@descope/web-components-ui 1.0.67 → 1.0.69

package/dist/index.esm.js

@@ -24,6 +24,8 @@ const compose = (...fns) =>
 
 const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
+const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
 const BASE_THEME_SECTION = 'host';
@@ -175,7 +177,7 @@ const createCssSelector = (
 	baseSelector = '',
 	relativeSelectorOrSelectorFn = ''
 ) =>
-	typeof relativeSelectorOrSelectorFn === 'function'
+	isFunction(relativeSelectorOrSelectorFn)
 		? relativeSelectorOrSelectorFn(baseSelector)
 		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
 			? ` ${relativeSelectorOrSelectorFn}`
@@ -232,7 +234,7 @@ const createStyle = (componentName, baseSelector, mappings) => {
 			({ selector: relativeSelectorOrSelectorFn, property }) => {
 				style.add(
 					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-					property,
+					isFunction(property) ? property() : property,
 					createCssVarFallback(cssVarName)
 				);
 			}
@@ -315,7 +317,7 @@ const createStyleMixin =
 				this.#onComponentThemeChange();
 			}
 
-			#createAttrOverrideStyle() {
+			#createOverridesStyle() {
 				this.#overrideStyleEle = document.createElement('style');
 				this.#overrideStyleEle.id = 'style-mixin-overrides';
 
@@ -325,7 +327,7 @@ const createStyleMixin =
 				this.#rootElement.append(this.#overrideStyleEle);
 			}
 
-			#setAttrOverrideStyle(attrName, value) {
+			#setAttrOverride(attrName, value) {
 				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
 				if (!style) return;
 
@@ -338,10 +340,10 @@ const createStyleMixin =
 				else style?.removeProperty(varName);
 			}
 
-			#updateOverrideStyle(attrs = []) {
+			#updateOverridesStyle(attrs = []) {
 				for (const attr of attrs) {
 					if (this.#styleAttributes.includes(attr)) {
-						this.#setAttrOverrideStyle(attr, this.getAttribute(attr));
+						this.#setAttrOverride(attr, this.getAttribute(attr));
 					}
 				}
 
@@ -349,7 +351,7 @@ const createStyleMixin =
 				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
 			}
 
-			#createComponentStyle() {
+			#createMappingStyle() {
 				const themeStyle = document.createElement('style');
 				themeStyle.id = 'style-mixin-mappings';
 				themeStyle.innerHTML = createStyle(
@@ -370,13 +372,14 @@ const createStyleMixin =
 
 					this.#addClassName(superclass.componentName);
 
-					this.#createComponentStyle();
+					// TODO: we should do everything we can on the constructor
+					// when dragging & dropping these styles are created over & over
+					this.#createMappingStyle();
 					this.#createComponentTheme();
-					this.#createAttrOverrideStyle();
+					this.#createOverridesStyle();
 
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
-					observeAttributes(this, this.#updateOverrideStyle.bind(this), {});
-
+					observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
 				}
 			}
 
@@ -398,7 +401,7 @@ const draggableMixin = (superclass) =>
 			super();
 
 			this.#styleEle = document.createElement('style');
-			this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
+			this.#styleEle.innerText = `* { cursor: inherit!important }`;
 		}
 
 		#handleDraggableStyle(isDraggable) {
@@ -417,31 +420,32 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
-class DescopeBaseClass extends HTMLElement {}
+const createBaseClass = ({ componentName, baseSelector = '' }) => {
+  class DescopeBaseClass extends HTMLElement {
+    static get componentName() {
+      return componentName;
+    }
 
-const hoverableMixin =
-	(relativeSelector = '') =>
-	(superclass) =>
-		class HovrerableMixinClass extends superclass {
-			connectedCallback() {
-				super.connectedCallback?.();
+    #baseElement;
+    get baseSelector() {
+      return baseSelector
+    }
 
-				const onMouseOver = (e) => {
-					this.shadowRoot.host.setAttribute('hover', 'true');
-					e.target.addEventListener(
-						'mouseleave',
-						() => this.shadowRoot.host.removeAttribute('hover'),
-						{ once: true }
-					);
-				};
+    get baseElement() {
+      this.#baseElement ??= this.baseSelector ?
+        this.rootElement.querySelector(this.baseSelector) :
+        this;
 
-				const baseElement = this.shadowRoot.querySelector(
-					this.baseSelector + relativeSelector
-				);
+      return this.#baseElement
+    }
 
-				baseElement.addEventListener('mouseover', onMouseOver);
-			}
-		};
+    get rootElement() {
+      return this.shadowRoot || this
+    }
+  }
+
+  return compose(componentNameValidationMixin, hoverableMixin)(DescopeBaseClass)
+};
 
 const createProxy = ({
 	componentName,
@@ -460,38 +464,39 @@ const createProxy = ({
 		</${wrappedEleName}>
 	`;
 
-	class ProxyElement extends DescopeBaseClass {
-		static get componentName() {
-			return componentName;
-		}
-
+	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
 		constructor() {
 			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.baseSelector = wrappedEleName;
 			this.shadowRoot.getElementById('create-proxy').innerHTML =
-				typeof style === 'function' ? style() : style;
+				isFunction(style) ? style() : style;
 		}
 
+		#boundOnFocus = this.#onFocus.bind(this);
+
+		// we want to focus on the proxy element when focusing our WCP
+		#onFocus() {
+			this.proxyElement.focus();
+		}
+
+		focus = this.#onFocus
+
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 
+				this.addEventListener('focus', this.#boundOnFocus);
+
 				// this is needed for components that uses props, such as combo box
 				forwardProps(this.hostElement, this.proxyElement, includeForwardProps);
 
-				this.setAttribute('tabindex', '0');
-
-				// we want to focus on the proxy element when focusing our WC
-				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
-				// which causes faulty behaviour.
+				// which causes faulty behavior.
+				// we need this to happen only when the proxy component is in the light DOM, 
+				// otherwise it will focus the nested proxy element
 				this.proxyElement.onkeydown = (e) => {
-					if (e.shiftKey && e.keyCode === 9) {
+					if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
 						this.removeAttribute('tabindex');
 						// We want to defer the action of setting the tab index back
 						// so it will happen after focusing the previous element
@@ -499,10 +504,6 @@ const createProxy = ({
 					}
 				};
 
-				// sync events
-				this.addEventListener = (...args) =>
-					this.proxyElement.addEventListener(...args);
-
 				syncAttrs(this.proxyElement, this.hostElement, {
 					excludeAttrs: excludeAttrsSync,
 					includeAttrs: includeAttrsSync
@@ -510,28 +511,30 @@ const createProxy = ({
 			}
 		}
 
-		disconnectedCallback() {
-			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
-		}
-
 		attributeChangedCallback() {
 			if (!this.proxyElement) {
 				return;
 			}
 		}
+
+		disconnectedCallback() {
+			super.disconnectedCallback?.();
+
+			this.removeEventListener('focus', this.#boundOnFocus);
+		}
 	}
 
-	return compose(hoverableMixin())(ProxyElement);
+	return ProxyClass;
 };
 
-const events = [
-  'change',
-  'input',
-  'blur',
-  'focus',
-  'invalid',
-  'valid',
-];
+// move create event to here
+
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something')
+function createDispatchEvent(eventName) {
+  this[`on${eventName}`]?.(); // in case we got an event callback as property
+  this.dispatchEvent(new Event(eventName));
+}
 
 const observedAttributes = [
   'required',
@@ -542,7 +545,7 @@ const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
   patternMismatch: 'data-errormessage-pattern-mismatch'
 };
-const inputMixin = (superclass) => class InputMixinClass extends superclass {
+const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
   static get observedAttributes() {
     return [
       ...superclass.observedAttributes || [],
@@ -554,18 +557,19 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     return true;
   }
 
+  #dispatchValid = createDispatchEvent.bind(this, 'valid')
+  #dispatchInvalid = createDispatchEvent.bind(this, 'invalid')
+
   #internals
 
+  #boundedHandleInput
+
   constructor() {
     super();
 
     this.#internals = this.attachInternals();
 
-    for (const event of events) {
-      this[`dispatch${upperFirst(event)}`] = function () {
-        this.dispatchInputEvent(event);
-      };
-    }
+    this.#boundedHandleInput = this.#handleInput.bind(this);
   }
 
   get defaultErrorMsgValueMissing() {
@@ -591,13 +595,7 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     }
   }
 
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
-
   setValidity() {
-    if (this.isReadOnly) return;
-
     const validity = this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity));
   }
@@ -607,7 +605,7 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
   }
 
   getValidity() {
-    throw Error('getValidity', 'is not implemented')
+    console.warn('getValidity', 'is not implemented');
   }
 
   checkValidity() {
@@ -639,36 +637,11 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     return this.getAttribute('pattern')
   }
 
-  get value() {
-    throw Error('get value', 'is not implemented')
-  }
-
-  set value(value) {
-    throw Error('set value', 'is not implemented')
-  }
-
-  handleFocus() {
-    throw Error('handleFocus', 'is not implemented')
-  }
-
-  handleInput() {
+  #handleInput() {
     this.setValidity();
     this.handleDispatchValidationEvents();
   }
 
-  handleBlur() {
-    throw Error('handleBlur', 'is not implemented')
-  }
-
-  handleChange() {
-    throw Error('handleChange', 'is not implemented')
-  }
-
-  dispatchInputEvent(eventName) {
-    this[`on${eventName}`]?.(); // in case we got an event callback as property
-    this.dispatchEvent(new InputEvent(eventName));
-  }
-
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -679,25 +652,23 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
 
   handleDispatchValidationEvents() {
     if (this.checkValidity()) {
-      this.dispatchValid();
+      this.#dispatchValid();
     } else {
-      this.dispatchInvalid();
+      this.#dispatchInvalid();
     }
   }
 
   connectedCallback() {
     super.connectedCallback?.();
 
+    this.addEventListener('input', this.#boundedHandleInput);
+
     this.setValidity();
     this.handleDispatchValidationEvents();
+  }
 
-    // create proxy replace the addEventListener fn 
-    // and we want to be able to access the focus events 
-    // of this element and not the nested element's events
-    this.onfocus = this.handleFocus.bind(this);
-    this.addEventListener('input', this.handleInput.bind(this));
-    this.addEventListener('blur', this.handleBlur.bind(this));
-    this.addEventListener('change', this.handleBlur.bind(this));
+  disconnectedCallback() {
+    this.removeEventListener('input', this.#boundedHandleInput);
   }
 };
 
@@ -730,18 +701,28 @@ const getNestedInput = (ele) => {
 };
 
 const proxyInputMixin = (superclass) =>
-	class proxyInputMixinClass extends inputMixin(superclass) {
+	class proxyInputMixinClass extends inputValidationMixin(superclass) {
 		static get observedAttributes() {
 			return [...superclass.observedAttributes || [], ...errorAttrs];
 		}
 
 		#inputElement
 
+		#boundHandleFocus
+		#boundHandleInvalid
+		#boundHandleValid
+
 		constructor() {
 			super();
 
 			this.#inputElement = super.inputElement;
 
+			this.#boundHandleFocus = this.#handleFocus.bind(this);
+			this.#boundHandleInvalid = this.#handleInvalid.bind(this);
+			this.#boundHandleValid = this.#handleValid.bind(this);
+
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
 		}
 
 		get inputElement() {
@@ -749,7 +730,7 @@ const proxyInputMixin = (superclass) =>
 			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]');
 
 			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
-		
+
 			if (!this.#inputElement) throw Error('no input was found');
 
 			return this.#inputElement
@@ -765,27 +746,17 @@ const proxyInputMixin = (superclass) =>
 
 		reportValidityOnInternalInput() {
 			setTimeout(() => {
+				this.baseEle.focus(); //TODO: check if this is needed
 				this.inputElement.reportValidity();
-			}, 0);
-		}
-
-		handleBlur() { }
-
-		handleFocus() {
-			this.inputElement.focus();
-			if (this.hasAttribute('invalid')) {
-				this.reportValidityOnInternalInput();
-			}
+			});
 		}
 
 		// we want reportValidity to behave like form submission
 		reportValidity() {
-			const isValid = super.reportValidity();
 			if (!isValid) {
 				this.setAttribute('invalid', 'true');
-				this.inputElement.focus();
+				this.reportValidityOnInternalInput();
 			}
-			this.reportValidityOnInternalInput();
 		}
 
 		setInternalInputErrorMessage() {
@@ -794,48 +765,47 @@ 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');
-					}
+		// when clicking on the form submit button and the input is invalid
+		// we want it to appear as invalid
+		#handleFocus(e) {
+			if (e.relatedTarget?.form) {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
+				}
 
-					if (this.hasAttribute('invalid')) {
-						this.reportValidityOnInternalInput();
-					}
+				if (this.hasAttribute('invalid')) {
+					this.reportValidityOnInternalInput();
 				}
-			});
+			}
+		}
 
-			this.addEventListener('invalid', () => {
-				this.setInternalInputErrorMessage();
-				this.setAttribute('error-message', this.validationMessage);
-			});
+		#handleInvalid() {
+			this.setInternalInputErrorMessage();
+			this.setAttribute('error-message', this.validationMessage);
+		}
 
-			this.addEventListener('valid', () => {
-				this.removeAttribute('invalid');
-			});
+		#handleValid() {
+			this.removeAttribute('invalid');
+		}
 
+		connectedCallback() {
 			super.connectedCallback?.();
 
-			this.inputElement.addEventListener('input', () => {
+			// 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', this.#boundHandleFocus);
+
+			this.addEventListener('invalid', this.#boundHandleInvalid);
+			this.addEventListener('valid', this.#boundHandleValid);
+
+			this.addEventListener('input', () => {
 				this.inputElement.setCustomValidity('');
 				if (!this.inputElement.checkValidity())
 					this.setInternalInputErrorMessage();
 			});
 
-			this.inputElement.addEventListener('invalid', () => {
-				this.setValidity();
-				this.setInternalInputErrorMessage();
-				this.setAttribute('error-message', this.validationMessage);
-			});
-
 			// this is needed in order to make sure the form input validation is working
-			if (!this.hasAttribute('tabindex')) {
+			if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
 				this.setAttribute('tabindex', 0);
 			}
 
@@ -844,6 +814,12 @@ const proxyInputMixin = (superclass) =>
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 		}
 
+		disconnectedCallback() {
+			this.removeEventListener('focus', this.#boundHandleFocus);
+			this.removeEventListener('invalid', this.#boundHandleInvalid);
+			this.removeEventListener('valid', this.#boundHandleValid);
+		}
+
 		attributeChangedCallback(attrName, oldValue, newValue) {
 			super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -854,7 +830,7 @@ const proxyInputMixin = (superclass) =>
 	};
 
 const componentNameValidationMixin = (superclass) =>
-	class DraggableMixinClass extends superclass {
+	class ComponentNameValidationMixinClass extends superclass {
 		#checkComponentName() {
 			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
 
@@ -879,10 +855,168 @@ const componentNameValidationMixin = (superclass) =>
 		}
 	};
 
-const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+const hoverableMixin =
+	(superclass) =>
+		class HoverableMixinClass extends superclass {
+			#boundOnMouseOver = this.#onMouseOver.bind(this)
+
+			#onMouseOver(e) {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.shadowRoot.host.removeAttribute('hover'),
+					{ once: true }
+				);
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				const baseElement = this.shadowRoot.querySelector(
+					this.baseSelector
+				);
+
+				baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
+			}
+		};
+
+const events = [
+  'blur',
+  'focus',
+  'focusin',
+  'focusout',
+];
 
-const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
-  Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {});
+const focusMixin = (superclass) => class FocusMixinClass extends superclass {
+  #isFocused = false
+  #setFocusTimer
+
+  #boundedHandleFocus
+  #boundedHandleBlur
+  #boundedHandleFocusIn
+  #boundedHandleFocusOut
+
+  constructor() {
+    super();
+
+    for (const event of events) {
+      this[`dispatch${upperFirst(event)}`] = function () {
+        this.dispatchInputEvent(event);
+      };
+    }
+
+    this.#boundedHandleFocus = this.#handleFocus.bind(this);
+    this.#boundedHandleBlur = this.#handleBlur.bind(this);
+    this.#boundedHandleFocusIn = this.#handleFocusIn.bind(this);
+    this.#boundedHandleFocusOut = this.#handleFocusOut.bind(this);
+  }
+
+  #handleFocus(e) {
+    if (this.isReadOnly) {
+      e.stopPropagation();
+      return
+    }
+    // we want to listen only to browser events 
+    // and not to events we are dispatching
+    if (e.isTrusted) { // TODO: check if this is needed, because Vaadin is also dispatching events
+      // we want to control the focus events that dispatched by the component
+      // so we are stopping propagation and handling it in setFocus
+      e.stopPropagation();
+      this.setFocus(true);
+
+      // if the focus event is on the root component (and not on the inner components)
+      // we want to notify the component and let it decide what to do with it
+      if (e.target === this) {
+        this.onFocus(e);
+      }
+    }
+  }
+
+  #handleFocusOut(e) {
+    // we want to listen only to browser events 
+    // and not to events we are dispatching
+    if (e.isTrusted) {
+      // we want to control the focus events that dispatched by the component
+      // so we are stopping propagation and handling it in setFocus
+      e.stopPropagation();
+    }
+  }
+
+  #handleFocusIn(e) {
+    // we want to listen only to browser events 
+    // and not to events we are dispatching
+    if (e.isTrusted) {
+      // we want to control the focus events that dispatched by the component
+      // so we are stopping propagation and handling it in setFocus
+      e.stopPropagation();
+    }
+  }
+
+  #handleBlur(e) {
+    if (e.isTrusted) {
+      e.stopPropagation();
+      this.setFocus(false);
+    }
+  }
+
+  get isReadOnly() {
+    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+  }
+
+  // we want to debounce the calls to this fn
+  // so we can support input like components with multiple inputs inside
+  setFocus(isFocused) {
+    clearTimeout(this.#setFocusTimer);
+
+    this.#setFocusTimer = setTimeout(() => {
+      if (this.#isFocused !== isFocused) {
+        this.#isFocused = isFocused;
+        if (isFocused) {
+          this.dispatchFocus();
+          this.dispatchFocusin();
+        }
+        else {
+          this.dispatchBlur();
+          this.dispatchFocusout();
+        }
+      }
+    });
+  }
+
+  onFocus() {
+    console.warn('onFocus', 'is not implemented');
+  }
+
+  dispatchInputEvent(eventName) {
+    this[`on${eventName}`]?.(); // in case we got an event callback as property
+    this.dispatchEvent(new InputEvent(eventName));
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.addEventListener('focus', this.#boundedHandleFocus, true);
+    this.addEventListener('blur', this.#boundedHandleBlur, true);
+    this.addEventListener('focusin', this.#boundedHandleFocusIn);
+    this.addEventListener('focusout', this.#boundedHandleFocusOut);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('focus', this.#boundedHandleFocus);
+    this.removeEventListener('blur', this.#boundedHandleBlur);
+    this.removeEventListener('focusin', this.#boundedHandleFocusIn);
+    this.removeEventListener('focusout', this.#boundedHandleFocusOut);
+  }
+};
+
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping, 
+// will generate the same var as "color" attribute in portals's mapping 
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_';
+
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
@@ -897,7 +1031,7 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
     static get cssVarList() {
       return {
         ...BaseClass.cssVarList,
-        ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
+        [eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
       };
     }
 
@@ -907,14 +1041,14 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
       // we cannot use "this" before calling "super"
       const getRootElement = (that) => {
         const baseEle = that.shadowRoot.querySelector(that.baseSelector);
-        const portal = baseEle.shadowRoot.querySelector(selector);
+        const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
 
         return portal.shadowRoot || portal
       };
 
       super({
         getRootElement,
-        componentNameSuffix: eleDisplayName,
+        componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
         themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
         baseSelector: ':host'
       });
@@ -936,6 +1070,52 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
   }
 };
 
+const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
+
+  #boundedHandleChange
+  #boundedHandleBlur  
+  
+  #removeChangeListener
+  #removeBlurListener
+
+  #dispatchChange = createDispatchEvent.bind(this, 'change')
+
+  constructor() {
+    super();
+
+    this.#boundedHandleChange = this.#handleChange.bind(this);
+    this.#boundedHandleBlur = this.#handleBlur.bind(this);
+  }
+
+  #handleChange(e) {
+    // we want to listen only to browser events 
+    // and not to events we are dispatching
+    if (e.isTrusted) {
+      // we want to control the change events that dispatched by the component
+      // so we are stopping propagation and handling it in handleBlur
+      e.stopPropagation();
+    }
+  }
+
+  #handleBlur() {
+    // on blur, we want to dispatch a change event
+    this.#dispatchChange();
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.#removeChangeListener = addEventListener.bind();
+    this.addEventListener('change', this.#boundedHandleChange, true);
+    this.addEventListener('blur', this.#boundedHandleBlur);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('change', this.#boundedHandleChange);
+    this.removeEventListener('blur', this.#boundedHandleBlur);
+  }
+};
+
 const componentName$i = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
@@ -1063,41 +1243,36 @@ customElements.define(componentName$h, Checkbox);
 
 const componentName$g = getComponentName('loader-linear');
 
-class RawLoaderLinear extends DescopeBaseClass {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
 	static get componentName() {
 		return componentName$g;
 	}
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				@keyframes tilt {
-					0% { transform: translateX(0); }
-					50% { transform: translateX(400%); }
-				}
-				:host {
-					position: relative;
-					display: inline-block
-				}
-				div::after {
-					content: '';
-					animation-name: tilt;
-					position: absolute;
-					left: 0;
-				}
-
-				:host > div {
-					width: 100%;
-				}
-			</style>
-			<div></div>
-		`;
 
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes tilt {
+				0% { transform: translateX(0); }
+				50% { transform: translateX(400%); }
+			}
+			:host {
+				position: relative;
+				display: inline-block
+			}
+			div::after {
+				content: '';
+				animation-name: tilt;
+				position: absolute;
+				left: 0;
+			}
 
-		this.baseSelector = ':host > div';
+			:host > div {
+				width: 100%;
+			}
+		</style>
+		<div></div>
+	`;
 	}
 }
 
@@ -1132,34 +1307,26 @@ customElements.define(componentName$g, LoaderLinear);
 
 const componentName$f = getComponentName('loader-radial');
 
-class RawLoaderRadial extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$f;
-	}
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				@keyframes spin {
-					0% { transform: rotate(0deg); }
-					100% { transform: rotate(360deg); }
-				}
-				:host {
-					position: relative;
-					display: inline-flex;
-				}
-				:host > div {
-					animation-name: spin;
-				}
-			</style>
-			<div></div>
-		`;
 
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > div';
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
 	}
 }
 
@@ -1190,33 +1357,25 @@ customElements.define(componentName$f, LoaderRadial);
 
 const componentName$e = getComponentName('container');
 
-class RawContainer extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$e;
-	}
+class RawContainer extends createBaseClass({componentName: componentName$e, baseSelector: ':host > slot'}) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				:host > slot {
-					box-sizing: border-box;
-					width: 100%;
-					height: 100%;
-					display: flex;
-					overflow: auto;
-				}
-				:host {
-					display: inline-block;
-				}
-			</style>
-			<slot></slot>
-		`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
-		this.baseSelector = ':host > slot';
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: auto;
+			}
+			:host {
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+	`;
 	}
 }
 
@@ -1273,51 +1432,43 @@ const DatePicker = compose(
 customElements.define(componentName$d, DatePicker);
 
 const componentName$c = getComponentName('divider');
-class RawDivider extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$c;
-	}
+class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				:host > div {
-					display: flex;
-					height: 100%;
-					width: 100%;
-				}
-				:host > div::before,
-				:host > div::after {
-					content: '';
-					flex-grow: 1;
-				}
-
-				descope-text {
-					flex-grow: 0;
-					flex-shrink: 0;
-				}
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > div {
+				display: flex;
+				height: 100%;
+				width: 100%;
+			}
+			:host > div::before,
+			:host > div::after {
+				content: '';
+				flex-grow: 1;
+			}
 
-				:host(:empty) descope-text {
-					display: none;
-				}
+			descope-text {
+				flex-grow: 0;
+				flex-shrink: 0;
+			}
 
-				:host([vertical="true"]) div {
-					width: fit-content;
-				}
+			:host(:empty) descope-text {
+				display: none;
+			}
 
-			</style>
-			<div>
-				<descope-text>
-					<slot></slot>
-				</descope-text>
-			</div>
-		`;
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
+			:host([vertical="true"]) div {
+				width: fit-content;
+			}
 
-		this.baseSelector = ':host > div';
+		</style>
+		<div>
+			<descope-text>
+				<slot></slot>
+			</descope-text>
+		</div>
+	`;
 
 		this.textComponent = this.shadowRoot.querySelector('descope-text');
 
@@ -1345,7 +1496,7 @@ const Divider = compose(
 			alignItems: root,
 			alignSelf: root,
 			flexDirection: root,
-			textPadding: {...text$2, property: 'padding'},
+			textPadding: { ...text$2, property: 'padding' },
 			width: host$1,
 			padding: host$1,
 			backgroundColor: [before, after],
@@ -1361,14 +1512,11 @@ const Divider = compose(
 
 const componentName$b = getComponentName('text');
 
-class RawText extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$b;
-	}
+class RawText extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			:host {
 				display: inline-block;
@@ -1380,11 +1528,6 @@ class RawText extends DescopeBaseClass {
 		</style>
 		<slot></slot>
 		`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > slot';
 	}
 }
 
@@ -1516,15 +1659,12 @@ overrides$5 = `
 customElements.define(componentName$a, EmailField);
 
 const componentName$9 = getComponentName('link');
-class RawLink extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$9;
-	}
+class RawLink extends createBaseClass({ componentName: componentName$9, baseSelector: ':host a' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
+		document.createElement('template');
 
-		template.innerHTML = `
+		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 		:host {
 			display: inline-block;
@@ -1542,9 +1682,6 @@ class RawLink extends DescopeBaseClass {
 		</div>
 		`;
 
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
 		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
 			includeAttrs: ['href', 'target', 'tooltip'],
 			mapAttrs: {
@@ -1555,24 +1692,23 @@ class RawLink extends DescopeBaseClass {
 		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
 			includeAttrs: ['mode', 'variant'],
 		});
-
-		this.baseSelector = ':host > div';
 	}
 }
 
 const selectors$2 = {
 	host: { selector: () => 'host' },
-	anchor: { selector: '> a' },
-	text: { selector: Text.componentName }
+	anchor: {},
+	wrapper: {selector: () => ':host > div'},
+	text: { selector: () => Text.componentName }
 };
 
-const { anchor, text: text$1, host } = selectors$2;
+const { anchor, text: text$1, host, wrapper } = selectors$2;
 
 const Link = compose(
 	createStyleMixin({
 		mappings: {
 			width: host,
-			textAlign: {},
+			textAlign: wrapper,
 			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
@@ -1580,7 +1716,6 @@ const Link = compose(
 			borderBottomColor: anchor
 		},
 	}),
-	hoverableMixin(anchor.selector),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawLink);
@@ -1592,23 +1727,15 @@ const componentName$8 = getComponentName('logo');
 let style;
 const getStyle = () => style;
 
-class RawLogo extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$8;
-	}
+class RawLogo extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			${getStyle()}
 		</style>
 		<div></div>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > div';
 	}
 }
 
@@ -1702,7 +1829,7 @@ overrides$4 = `
 
 customElements.define(componentName$7, NumberField);
 
-var BaseInputClass = inputMixin(HTMLElement); //todo: maybe we should use base class?
+var BaseInputClass = compose(focusMixin, inputValidationMixin, changeMixin)(HTMLElement); //todo: maybe we should use base class?
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -1723,11 +1850,10 @@ const componentName$6 = getComponentName('passcode-internal');
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
 		return [
-			...BaseInputClass.observedAttributes,
+			...(BaseInputClass.observedAttributes || []),
 			'disabled',
 			'bordered',
 			'size',
-			'readonly'
 		];
 	}
 
@@ -1735,10 +1861,12 @@ class PasscodeInternal extends BaseInputClass {
 		return componentName$6;
 	}
 
+	#boundHandleInvalid = this.#handleInvalid.bind(this)
+	#boundHandleValid = this.#handleValid.bind(this)
+	#boundHandleBlur = this.#handleBlur.bind(this)
+
 	constructor() {
 		super();
-		const template = document.createElement('template');
-
 		const inputs = [...Array(this.digits).keys()].map((idx) => `
 		<descope-text-field
 			st-width="35px"
@@ -1748,14 +1876,12 @@ class PasscodeInternal extends BaseInputClass {
 		></descope-text-field>
 	`);
 
-		template.innerHTML = `
+		this.innerHTML = `
 		<div>
 			${inputs.join('')}
 		</div>
 		`;
 
-		this.appendChild(template.content.cloneNode(true));
-
 		this.baseSelector = ':host > div';
 
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
@@ -1783,15 +1909,13 @@ class PasscodeInternal extends BaseInputClass {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	handleInputsInvalid() {
-		setTimeout(() => {
-			if (this.hasAttribute('invalid')) {
-				this.inputs.forEach(input => input.setAttribute('invalid', 'true'));
-			}
-		});
+	#handleInvalid() {
+		if (this.hasAttribute('invalid')) {
+			this.inputs.forEach(input => input.setAttribute('invalid', 'true'));
+		}
 	}
 
-	handleInputsValid() {
+	#handleValid() {
 		this.inputs.forEach(input => input.removeAttribute('invalid'));
 	}
 
@@ -1807,17 +1931,25 @@ class PasscodeInternal extends BaseInputClass {
 		}
 	};
 
-	handleFocus() {
+	onFocus(){
 		this.inputs[0].focus();
 	}
 
-	async connectedCallback() {
-		super.connectedCallback();
+	connectedCallback() {
+		super.connectedCallback?.();
 
 		this.initInputs();
 
-		this.addEventListener('invalid', this.handleInputsInvalid);
-		this.addEventListener('valid', this.handleInputsValid);
+		this.addEventListener('invalid', this.#boundHandleInvalid);
+		this.addEventListener('valid', this.#boundHandleValid);
+		this.addEventListener('blur', this.#boundHandleBlur);
+	}
+
+	disconnectedCallback() {
+		super.connectedCallback?.();
+		this.removeEventListener('invalid', this.#boundHandleInvalid);
+		this.removeEventListener('valid', this.#boundHandleValid);
+		this.removeEventListener('blur', this.#boundHandleBlur);
 	}
 
 	getInputIdx(inputEle) {
@@ -1841,66 +1973,49 @@ class PasscodeInternal extends BaseInputClass {
 			currentInput.value = charArr[i] ?? '';
 
 			const nextInput = this.getNextInput(currentInput);
+
 			if (nextInput === currentInput) break;
 			currentInput = nextInput;
 		}
 
-		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+		focusElement(currentInput);
 	};
 
-	handleBlur() {
-		this.handleInputsInvalid();
+	#handleBlur() {
+		this.#handleInvalid();
 	}
 
 	initInputs() {
 		this.inputs.forEach((input) => {
-
-			// 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', (e) => {
-				e.stopPropagation();
-				const timerId = setTimeout(() => {
-					this.dispatchBlur();
-				});
-
-				this.inputs.forEach((ele) =>
-					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
-				);
-			});
-
 			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
+				if (!charArr.length) {
+					// if we got an invalid value we want to clear the input
+					input.value = '';
+					if (e.data === null) {
+						// if the user deleted the char, we want to focus the prev digit
+						focusElement(this.getPrevInput(input));
+					}
+				}
 				else this.fillDigits(charArr, input);
-
-				this.dispatchInput();
 			};
 
 			input.onkeydown = ({ key }) => {
+				// when user deletes a digit, we want to focus the previous digit
 				if (key === 'Backspace') {
-					input.value = '';
-
-					// if the user deleted the digit we want to focus the previous digit
-					const prevInput = this.getPrevInput(input);
-
-					!prevInput.hasAttribute('focused') && setTimeout(() => {
-						focusElement(prevInput);
+					setTimeout(() => {
+						focusElement(this.getPrevInput(input));
 					});
-
-					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
 				}
-
 			};
 		});
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
-		super.attributeChangedCallback(attrName, oldValue, newValue);
+		super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
 		if (oldValue !== newValue) {
 			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {
@@ -1999,21 +2114,10 @@ const customMixin = (superclass) =>
 
 			this.proxyElement.appendChild(template.content.cloneNode(true));
 
-			// 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.inputElement = this.shadowRoot.querySelector(componentName$6);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
 
-			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
-			this.inputElement.addEventListener('blur', (e) => {
-				// we do not want native blur events, only the ones that we are sending
-				if (!e.isTrusted){
-					this.proxyElement.validate();
-				}
-			});
 		}
 	};
 
@@ -2050,6 +2154,10 @@ const Passcode = compose(
 			display: inline-block;
     }
 
+		:host([readonly]) descope-passcode-internal > div {
+			pointer-events: none;
+		}
+
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;
@@ -3231,9 +3339,21 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 		};
 	}
 
+	// the default vaadin behavior is to attach the overlay to the body when opened
+	// we do not want that because it's difficult to style the overlay in this way
+	// so we override it to open inside the shadow DOM
+	#overrideOverlaySettings() {
+		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+
+		overlay._attachOverlay = function () { this.bringToFront(); };
+		overlay._detachOverlay = function () { };
+		overlay._enterModalState = function () { };
+	}
+
 	connectedCallback() {
 		super.connectedCallback?.();
 
+		this.#overrideOverlaySettings();
 		observeChildren(this, this.#onChildrenChange.bind(this));
 	}
 };
@@ -3251,15 +3371,17 @@ const ComboBox = compose(
 			borderWidth: input,
 			cursor: toggle,
 			height: input,
+			// overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
+			// overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
 		}
 	}),
 	draggableMixin,
 	portalMixin({
 		name: 'overlay',
-		selector: 'vaadin-combo-box-scroller',
+		selector: '',
 		mappings: {
-			border: { selector: () => '::slotted(*)' },
-			backgroundColor: {},
+			// border: { selector: 'vaadin-combo-box-scroller' },
+			// backgroundColor: { selector: 'vaadin-combo-box-item' },
 		}
 	}),
 	proxyInputMixin,
@@ -3296,15 +3418,8 @@ const comboBox = {
 	[vars.borderWidth]: '0',
 	[vars.cursor]: 'pointer',
 	[vars.padding]: '0',
-
-	'@overlay': {
-		[vars.overlayBackgroundColor] : 'red',
-		[vars.overlayBorder]: '3px solid blue',
-
-		_hover: {
-			[vars.overlayBackgroundColor] : 'blue',
-		}
-	}
+	// [vars.overlayBackground]: 'blue',
+	// [vars.overlayBorder]: '3px solid red',
 };
 
 var components = {