@descope/web-components-ui 1.0.61 → 1.0.63

package/dist/index.esm.js

@@ -1,17 +1,15 @@
 import '@vaadin/button';
 import '@vaadin/checkbox';
-import '@vaadin/text-field';
 import '@vaadin/date-picker';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
+import '@vaadin/text-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
 
-const DESCOPE_PREFIX = 'descope';
-
 const kebabCase = (str) =>
 	str
 		.replace(/([a-z])([A-Z])/g, '$1-$2')
@@ -20,8 +18,132 @@ const kebabCase = (str) =>
 
 const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
+const compose = (...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
+
+const DESCOPE_PREFIX = 'descope';
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+
+const observeAttributes = (
+	ele,
+	callback,
+	{ 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 observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === 'attributes' &&
+				!excludeAttrs.includes(mutation.attributeName) &&
+				(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+			) {
+				callback([mutation.attributeName]);
+			}
+		}
+	});
+
+	observer.observe(ele, { attributes: 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);
+				}
+			} else {
+				targetEle.removeAttribute(targetAttrName);
+			}
+		});
+	};
+
+const syncAttrs = (ele1, ele2, options) => {
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
 const getCssVarName = (...args) =>
-	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+
+const forwardAttrs = (source, dest, options = {}) => {
+  observeAttributes(
+    source,
+    createSyncAttrsCb(source, dest, options.mapAttrs),
+    options
+  );
+};
+
+const forwardProps = (src, target, props = []) => {
+	if(!props.length) return;
+
+	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
+		get () {
+			return target[prop]
+		},
+		set (v) {
+			target[prop] = v;
+		}
+	}}), {});
+
+	Object.defineProperties(src, config);
+};
+
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach(cb => cb?.());
+  };
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => { this.#callbacks.delete(cb); };
+  };
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+}
+
+const componentsThemeManager = new ComponentsThemeManager();
 
 const createCssVarFallback = (first, ...rest) =>
 	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -32,11 +154,10 @@ const createCssSelector = (
 ) =>
 	typeof relativeSelectorOrSelectorFn === 'function'
 		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${
-				/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-					? ` ${relativeSelectorOrSelectorFn}`
-					: relativeSelectorOrSelectorFn
-		  }`;
+		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+			? ` ${relativeSelectorOrSelectorFn}`
+			: relativeSelectorOrSelectorFn
+		}`;
 
 class StyleBuilder {
 	constructor() {
@@ -57,9 +178,9 @@ class StyleBuilder {
 	toString() {
 		return Array.from(this.styleMap.entries()).reduce(
 			(style, [selector, propValArr]) =>
-				(style += `${selector} { \n${propValArr
-					.map(({ property, value }) => `${property}: ${value}`)
-					.join(';\n')} \n}\n\n`),
+			(style += `${selector} { \n${propValArr
+				.map(({ property, value }) => `${property}: ${value}`)
+				.join(';\n')} \n}\n\n`),
 			''
 		);
 	}
@@ -105,124 +226,115 @@ const createCssVarsList = (componentName, mappings) =>
 		{}
 	);
 
-// match the host selector with the inner element selector
-// e.g. when we want to set the same size for the host & the inner element this can be useful
-const matchHostStyle = (mappingObj = {}) => [
-	mappingObj,
-	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
-];
+// on some cases we need a selector to be more specific than another
+// for this we have this fn that generate a class selector multiple times
+const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRepeats)
+	.fill(`.${className}`)
+	.join('');
 
 const createStyleMixin =
-	({ mappings = {}, nestedMappings = {} }) =>
-	(superclass) => {
-		const styleAttributes = Object.keys(mappings).map((key) =>
-			kebabCaseJoin('st', key)
-		);
-		return class CustomStyleMixinClass extends superclass {
-			static get observedAttributes() {
-				const superAttrs = superclass.observedAttributes || [];
-				return [...superAttrs, ...styleAttributes];
-			}
-
-			static get cssVarList() {
-				return createCssVarsList(superclass.componentName, {
-					...mappings,
-					...nestedMappings
-				});
-			}
+	({ 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];
+				}
 
-			#styleEle = null;
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, {
+						...mappings,
+					});
+				}
 
-			constructor() {
-				super();
+				#overrideStyleEle = null;
+				#themeStyleEle = null;
+				#disconnectThemeManager
 
-				this.#createComponentStyle();
-				this.#createAttrOverrideStyle();
-			}
+				constructor() {
+					super();
 
-			#createAttrOverrideStyle() {
-				this.#styleEle = document.createElement('style');
-				this.#styleEle.id = 'style-mixin-overrides';
+					this.classList.add(superclass.componentName);
 
-				this.#styleEle.innerText = '* {}';
-				this.shadowRoot.prepend(this.#styleEle);
-			}
-
-			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.sheet?.cssRules[0].style;
-				const varName = getCssVarName(
-					superclass.componentName,
-					attrName.replace(/^st-/, '')
-				);
+					this.#createComponentStyle();
+					this.#createComponentTheme();
+					this.#createAttrOverrideStyle();
+				}
 
-				if (value) style?.setProperty(varName, value);
-				else style?.removeProperty(varName);
-			}
+				get componentTheme() {
+					return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+				}
 
-			#createComponentStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-component';
-				themeStyle.innerHTML = createStyle(
-					superclass.componentName,
-					this.baseSelector,
-					mappings
-				);
-				this.shadowRoot.prepend(themeStyle);
-			}
+				onComponentThemeChange() {
+					this.#themeStyleEle.innerHTML = this.componentTheme.theme;
+				}
 
-			#createComponentNestingStyle() {
-				// we need these selectors to be more specific from the theme selectors
-				// in order to do it, we are repeating the class name for specificity
-				const numOfClassNameSpecifier = 3;
+				#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();
+				}
 
-				const rootNode = this.shadowRoot.host.getRootNode();
-				const styleId = `${superclass.componentName}-style-mixin-component`;
+				#createAttrOverrideStyle() {
+					this.#overrideStyleEle = document.createElement('style');
+					this.#overrideStyleEle.id = 'style-mixin-overrides';
 
-				const className = superclass.componentName;
-				this.shadowRoot.host.classList.add(className);
+					const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+					this.shadowRoot.append(this.#overrideStyleEle);
+				}
 
-				if (rootNode.querySelector(`style#${styleId}`)) return;
+				#updateAttrOverrideStyle(attrName, value) {
+					const style = this.#overrideStyleEle.sheet?.cssRules[0].style;
+					const varName = getCssVarName(
+						superclass.componentName,
+						attrName.replace(/^st-/, '')
+					);
 
-				const themeStyle = document.createElement('style');
-				themeStyle.id = styleId;
-				themeStyle.innerHTML = createStyle(
-					superclass.componentName,
-					`${superclass.componentName}${Array(numOfClassNameSpecifier)
-						.fill(`.${className}`)
-						.join('')}`,
-					nestedMappings
-				);
+					if (value) style?.setProperty(varName, value);
+					else style?.removeProperty(varName);
+				}
 
-				// rootNode can be either a shadow DOM or a light DOM
-				if (rootNode.nodeName === '#document') {
-					rootNode.head.append(themeStyle);
-				} else {
-					rootNode.append(themeStyle);
+				#createComponentStyle() {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = 'style-mixin-component';
+					themeStyle.innerHTML = createStyle(
+						superclass.componentName,
+						this.baseSelector,
+						mappings
+					);
+					this.shadowRoot.prepend(themeStyle);
 				}
-			}
 
-			attributeChangedCallback(attrName, oldValue, newValue) {
-				super.attributeChangedCallback?.(attrName, oldValue, newValue);
+				attributeChangedCallback(attrName, oldValue, newValue) {
+					super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-				if (styleAttributes.includes(attrName)) {
-					this.#updateAttrOverrideStyle(attrName, newValue);
+					if (styleAttributes.includes(attrName)) {
+						this.#updateAttrOverrideStyle(attrName, newValue);
+					}
 				}
-			}
 
-			connectedCallback() {
-				super.connectedCallback?.();
-				if (this.shadowRoot.isConnected) {
-					this.#createComponentNestingStyle();
+				connectedCallback() {
+					super.connectedCallback?.();
+					if (this.shadowRoot.isConnected) {
+						Array.from(this.attributes).forEach((attr) => {
+							if (styleAttributes.includes(attr.nodeName)) {
+								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
+							}
+						});
+					}
+				}
 
-					Array.from(this.attributes).forEach((attr) => {
-						if (styleAttributes.includes(attr.nodeName)) {
-							this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-						}
-					});
+				disconnectedCallback() {
+					this.#disconnectThemeManager?.();
 				}
-			}
+			};
 		};
-	};
 
 const draggableMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -282,81 +394,6 @@ const hoverableMixin =
 			}
 		};
 
-const observeAttributes = (
-	ele,
-	callback,
-	{ 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 observer = new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (
-				mutation.type === 'attributes' &&
-				!excludeAttrs.includes(mutation.attributeName) &&
-				(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
-			) {
-				callback([mutation.attributeName]);
-			}
-		}
-	});
-
-	observer.observe(ele, { attributes: 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);
-				}
-			} else {
-				targetEle.removeAttribute(targetAttrName);
-			}
-		});
-	};
-
-const syncAttrs = (ele1, ele2, options) => {
-	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
-	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
-};
-
-const forwardAttrs = (source, dest, options = {}) => {
-	observeAttributes(
-		source,
-		createSyncAttrsCb(source, dest, options.mapAttrs),
-		options
-	);
-};
-
-const forwardProps = (src, target, props = []) => {
-	if(!props.length) return;
-
-	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
-		get () {
-			return target[prop]
-		},
-		set (v) {
-			target[prop] = v;
-		}
-	}}), {});
-
-	Object.defineProperties(src, config);
-};
-
 const createProxy = ({
 	componentName,
 	wrappedEleName,
@@ -438,9 +475,177 @@ const createProxy = ({
 	return compose(hoverableMixin())(ProxyElement);
 };
 
-const attrs = {
-	valueMissing: 'data-errormessage-value-missing',
-	patternMismatch: 'data-errormessage-pattern-mismatch'
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const events = [
+  'change',
+  'input',
+  'blur',
+  'focus',
+  'invalid',
+  'valid',
+];
+
+const observedAttributes = [
+  'required',
+  'pattern',
+];
+
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch'
+};
+const inputMixin = (superclass) => class InputMixinClass extends superclass {
+  static get observedAttributes() {
+    return [
+      ...superclass.observedAttributes || [],
+      ...observedAttributes
+    ];
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  #internals
+
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals();
+
+    for (const event of events) {
+      this[`dispatch${upperFirst(event)}`] = function () {
+        this.dispatchInputEvent(event);
+      };
+    }
+  }
+
+  get defaultErrorMsgValueMissing() {
+    return 'Please fill out this field.'
+  }
+
+  get defaultErrorMsgPatternMismatch() {
+    return 'Please match the requested format.'
+  }
+
+  getErrorMessage(flags) {
+    switch (true) {
+      case flags.valueMissing:
+        return this.getAttribute(errorAttributes.valueMissing) ||
+          this.defaultErrorMsgValueMissing
+      case flags.patternMismatch || flags.typeMismatch:
+        return this.getAttribute(errorAttributes.patternMismatch) ||
+          this.defaultErrorMsgPatternMismatch
+      case flags.customError:
+        return this.validationMessage
+      default:
+        return ''
+    }
+  }
+
+  setValidity() {
+    const validity = this.getValidity();
+    this.#internals.setValidity(validity, this.getErrorMessage(validity));
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  getValidity() {
+    throw Error('getValidity', 'is not implemented')
+  }
+
+  checkValidity() {
+    return this.#internals.validity.valid
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  setCustomValidity(errorMessage) {
+    if(errorMessage){
+      this.#internals.setValidity({customError: true}, errorMessage);
+    } else {
+      this.#internals.setValidity({});
+      this.setValidity();
+    }
+  }
+
+  get isRequired() {
+    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+  }
+
+  get pattern() {
+    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() {
+    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);
+
+    if (observedAttributes.includes(attrName)) {
+      this.setValidity();
+    }
+  }
+
+  handleDispatchValidationEvents(){
+    if(this.checkValidity()) {
+      this.dispatchValid(); 
+    } else {
+      this.dispatchInvalid();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    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));
+  }
 };
 
 const errorAttrs = ['invalid', 'has-error-message'];
@@ -457,79 +662,140 @@ const propertyObserver = (src, target, property) => {
 	});
 };
 
-const inputMixin = (superclass) =>
-	class InputMixinClass extends superclass {
-		static get formAssociated() {
-			return true;
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+	if (!ele) return;
+
+	const nestingLevel = 10;
+
+	let nonSlotEle = ele;
+	for (let i = 0; i < nestingLevel; i++) {
+		nonSlotEle = nonSlotEle.assignedElements()[0];
+		if (nonSlotEle.localName !== 'slot') return nonSlotEle
+	}
+};
+
+const proxyInputMixin = (superclass) =>
+	class proxyInputMixinClass extends inputMixin(superclass) {
+		static get observedAttributes() {
+			return [...superclass.observedAttributes || [], ...errorAttrs];
 		}
 
-		#internals;
+		#inputElement
 
 		constructor() {
 			super();
 
-			this.#internals = this.attachInternals();
+			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() {
+			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]');
+			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
+		}
+
+		set inputElement(ele) {
+			this.#inputElement = ele;
+		}
+
+		getValidity() {
+			return this.inputElement.validity
 		}
 
-		formAssociatedCallback() {
-			this.setValidity?.();
+		reportValidityOnInternalInput() {
+			setTimeout(() => {
+				this.inputElement.reportValidity();
+			}, 0);
+		}
+
+		handleBlur() { }
+
+		handleFocus() {
+			this.inputElement.focus();
+			if (this.hasAttribute('invalid')) {
+				this.reportValidityOnInternalInput();
+			}
 		}
 
-		setValidationAttribute(attr) {
-			const validationAttr = this.getAttribute(attr);
-			if (validationAttr) {
-				this.proxyElement.setAttribute('error-message', validationAttr);
+		// we want reportValidity to behave like form submission
+		reportValidity() {
+			const isValid = super.reportValidity();
+			if (!isValid) {
+				this.setAttribute('invalid', 'true');
+				this.inputElement.focus();
 			}
-			// normalize vaadin error attributes to have a boolean value
-			errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
+			this.reportValidityOnInternalInput();
 		}
 
-		validate() {
-			const { valueMissing, patternMismatch, typeMismatch } = this.validity;
-			if (valueMissing) {
-				this.setValidationAttribute(attrs.valueMissing);
-			} else if (typeMismatch || patternMismatch) {
-				this.setValidationAttribute(attrs.patternMismatch);
+		setInternalInputErrorMessage() {
+			if (!this.checkValidity()) {
+				this.inputElement.setCustomValidity(this.validationMessage);
 			}
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
 			super.connectedCallback?.();
 
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+			this.inputElement.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')) {
 				this.setAttribute('tabindex', 0);
 			}
 
-			this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
-				this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0];
-			if (!this.inputElement) throw Error('no input was found');
-
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+		}
 
-			this.validity = this.inputElement.validity;
-
-			this.setValidity = () => {
-				this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
-			};
-
-			this.inputElement.oninput = () => {
-				this.value = this.inputElement.value;
-				this.setValidity();
-			};
-
-			this.onfocus = () => {
-				setTimeout(() => this.inputElement.reportValidity(), 0);
-				this.validate();
-			};
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-			this.inputElement.oninvalid = () => {
-				this.validate();
-			};
+			if (attrName === 'invalid' && newValue === '') {
+				this.setAttribute('invalid', 'true');
+			}
 		}
 	};
 
@@ -559,14 +825,7 @@ const componentNameValidationMixin = (superclass) =>
 		}
 	};
 
-const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
-
-const compose =
-	(...fns) =>
-	(val) =>
-		fns.reduceRight((res, fn) => fn(res), val);
-
-const componentName$i = getComponentName('button');
+const componentName$h = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -589,8 +848,9 @@ const iconStyles = `
 	}
 `;
 
-const selectors$5 = {
-	label: '::part(label)'
+const { label: label$1, host: host$3 } = {
+	label: { selector: '::part(label)' },
+	host: { selector: () => ':host' }
 };
 
 const Button = compose(
@@ -598,16 +858,16 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: { selector: selectors$5.label },
+			color: label$1,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: matchHostStyle(),
+			width: host$3,
 			cursor: {},
-			padding: [{ selector: selectors$5.label }],
-			textDecoration: { selector: selectors$5.label }
+			padding: label$1,
+			textDecoration: label$1
 		}
 	}),
 	draggableMixin,
@@ -619,7 +879,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$h
 	})
 );
 
@@ -650,21 +910,25 @@ const loadingIndicatorStyles = `
 	:host([loading="true"])::part(label) {
 		visibility: hidden;
 	}
+
+	vaadin-button {
+		width: 100%;
+	}
 `;
 
-customElements.define(componentName$i, Button);
+customElements.define(componentName$h, Button);
 
-const componentName$h = getComponentName('checkbox');
+const componentName$g = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: { selector: () => ':host' },
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -674,19 +938,23 @@ const Checkbox = compose(
 		:host {
 			display: inline-block;
 		}
+		
+		vaadin-checkbox {
+			width: 100%;
+		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$h
+		componentName: componentName$g
 	})
 );
 
-customElements.define(componentName$h, Checkbox);
+customElements.define(componentName$g, Checkbox);
 
-const componentName$g = getComponentName('loader-linear');
+const componentName$f = getComponentName('loader-linear');
 
 class RawLoaderLinear extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$g;
+		return componentName$f;
 	}
 	constructor() {
 		super();
@@ -699,6 +967,7 @@ class RawLoaderLinear extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-block
 				}
 				div::after {
 					content: '';
@@ -706,6 +975,10 @@ class RawLoaderLinear extends DescopeBaseClass {
 					position: absolute;
 					left: 0;
 				}
+
+				:host > div {
+					width: 100%;
+				}
 			</style>
 			<div></div>
 		`;
@@ -719,16 +992,17 @@ class RawLoaderLinear extends DescopeBaseClass {
 
 const selectors$4 = {
 	root: {},
-	after: { selector: '::after' }
+	after: { selector: '::after' },
+	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1 } = selectors$4;
+const { root: root$1, after: after$1, host: host$2 } = selectors$4;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
-			width: matchHostStyle(root$1),
+			width: host$2,
 			height: [root$1, after$1],
 			borderRadius: [root$1, after$1],
 			surfaceColor: [{ property: 'background-color' }],
@@ -743,13 +1017,13 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$g, LoaderLinear);
+customElements.define(componentName$f, LoaderLinear);
 
-const componentName$f = getComponentName('loader-radial');
+const componentName$e = getComponentName('loader-radial');
 
 class RawLoaderRadial extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$f;
+		return componentName$e;
 	}
 	constructor() {
 		super();
@@ -762,6 +1036,7 @@ class RawLoaderRadial extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-flex;
 				}
 				:host > div {
 					animation-name: spin;
@@ -781,7 +1056,7 @@ const LoaderRadial = compose(
 	createStyleMixin({
 		mappings: {
 			display: {},
-			width: matchHostStyle({}),
+			width: {},
 			height: {},
 			spinnerWidth: { property: 'border-width' },
 			spinnerStyle: { property: 'border-style' },
@@ -800,133 +1075,13 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$f, LoaderRadial);
-
-const selectors$3 = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown'
-};
-
-var textFieldMappings = {
-	color: { selector: selectors$3.input },
-	backgroundColor: { selector: selectors$3.input },
-	color: { selector: selectors$3.input },
-	width: matchHostStyle({}),
-	borderColor: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
-	],
-	borderWidth: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
-	],
-	borderStyle: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
-	],
-	borderRadius: { selector: selectors$3.input },
-	boxShadow: { selector: selectors$3.input },
-	fontSize: {},
-	height: { selector: selectors$3.input },
-	padding: { selector: selectors$3.input },
-	outline: { selector: selectors$3.input },
-	outlineOffset: { selector: selectors$3.input },
-
-	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
-};
-
-const componentName$e = getComponentName('text-field');
-
-let overrides$6 = ``;
-
-const TextField = compose(
-	createStyleMixin({
-		mappings: textFieldMappings
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$6,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$e
-	})
-);
-
-overrides$6 = `
-	:host {
-		display: inline-block;
-	}
-
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-text-field input:-webkit-autofill,
-	vaadin-text-field input:-webkit-autofill::first-line,
-	vaadin-text-field input:-webkit-autofill:hover,
-	vaadin-text-field input:-webkit-autofill:active,
-	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextField.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		cursor: pointer;
-		color: var(${TextField.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${TextField.cssVarList.color});
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
-customElements.define(componentName$e, TextField);
-
-const template = document.createElement('template');
-
-const componentName$d = getComponentName('combo');
+customElements.define(componentName$e, LoaderRadial);
 
-template.innerHTML = `
-  <descope-button></descope-button>
-  <descope-text-field></descope-text-field>
-`;
-
-class Combo extends DescopeBaseClass {
-	constructor() {
-		super();
-
-		this.attachShadow({ mode: 'open' }).appendChild(
-			template.content.cloneNode(true)
-		);
-	}
-}
-
-customElements.define(componentName$d, Combo);
-
-const componentName$c = getComponentName('container');
+const componentName$d = getComponentName('container');
 
 class RawContainer extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$c;
+		return componentName$d;
 	}
 	constructor() {
 		super();
@@ -935,6 +1090,13 @@ class RawContainer extends DescopeBaseClass {
 			<style>
 				:host > slot {
 					box-sizing: border-box;
+					width: 100%;
+					height: 100%;
+					display: flex;
+					overflow: auto;
+				}
+				:host {
+					display: inline-block;
 				}
 			</style>
 			<slot></slot>
@@ -950,8 +1112,8 @@ class RawContainer extends DescopeBaseClass {
 const Container = compose(
 	createStyleMixin({
 		mappings: {
-			height: matchHostStyle(),
-			width: matchHostStyle(),
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
 
 			verticalPadding: [
 				{ property: 'padding-top' },
@@ -962,7 +1124,6 @@ const Container = compose(
 				{ property: 'padding-right' }
 			],
 
-			display: {}, // maybe this should be hardcoded to flex
 			flexDirection: {},
 			justifyContent: {},
 			alignItems: {},
@@ -982,244 +1143,203 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$c, Container);
+customElements.define(componentName$d, Container);
 
-const componentName$b = getComponentName('date-picker');
+const componentName$c = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$b,
+		componentName: componentName$c,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$b, DatePicker);
-
-const getChildObserver = (callback) => {
-	return new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				callback(mutation);
-			}
-		}
-	});
-};
-
-const insertNestingLevel = (srcEle, nestingEle) => {
-	nestingEle.append(...srcEle.childNodes);
-	srcEle.appendChild(nestingEle);
-};
-
-// adds a nesting element to the component, and move all existing children
-// to be under the nesting element
-const enforceNestingElementsStylesMixin =
-	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
-	(superclass) => {
-		const getChildNodeEle = () =>
-			Object.assign(document.createElement(nestingElementTagName), {
-				slot: nestingElementDestSlotName
-			});
-
-		let childObserver;
-		
-		const getObserver = () => childObserver;
-
-		return class EnforceNestingElementsStylesMixinClass extends superclass {
-			constructor() {
-				super();
-
-				const childObserverCallback = () => {
-					// we are going to change the DOM, so we need to disconnect the observer before
-					// and reconnect it after the child component is added
-					getObserver().disconnect(this.shadowRoot.host);
-
-					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
-					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
-
-					if (!isNestingElementExist && hasNewChildren) {
-						// if before there were no children and now there are children - insert
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					} else if (isNestingElementExist && hasNewChildren) {
-						// if children existed, and they changed -
-						// we need to update (move) the new children into
-						// descope-text and remove previous children
-						this.shadowRoot.host.querySelector(child).remove();
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					}
-					else if (isNestingElementExist && !hasNewChildren) {
-						// if children existed and now there are none -
-						// we need to remove descope-text completely
-						this.shadowRoot.host.querySelector(child).remove();
-					}
-
-					// we need a new observer, because we remove the nesting element
-					this.shadowRoot.host.querySelector(nestingElementTagName) &&
-						forwardAttrs(
-							this.shadowRoot.host,
-							this.shadowRoot.host.querySelector(nestingElementTagName),
-							forwardAttrOptions
-						);
-
-						getObserver().observe(this.shadowRoot.host, {
-						childList: true
-					});
-				};
-
-				childObserver = getChildObserver(childObserverCallback);
-			}
-
-			connectedCallback() {
-				super.connectedCallback?.();
-
-				if (this.shadowRoot.host.childNodes.length > 0) {
-					// on the first render - we want to move all component's children to be under descope-text
-					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-
-					forwardAttrs(
-						this.shadowRoot.host,
-						this.shadowRoot.host.querySelector(nestingElementTagName),
-						forwardAttrOptions
-					);
-				}
-
-				getObserver().observe(this.shadowRoot.host, {
-					childList: true
-				});
-			}
-		};
-	};
-
-const componentName$a = getComponentName('text');
-
-class RawText extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$a;
-	}
-	constructor() {
-		super();
-		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > slot';
-	}
-}
-
-const Text = compose(
-	createStyleMixin({
-		mappings: {
-			fontFamily: {},
-			lineHeight: {},
-			fontStyle: {},
-			fontSize: {},
-			fontWeight: {},
-			width: {},
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
-			borderWidth: {},
-			borderStyle: {},
-			borderColor: {},
-			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawText);
+customElements.define(componentName$c, DatePicker);
 
-const componentName$9 = getComponentName('divider');
+const componentName$b = getComponentName('divider');
 class RawDivider extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$9;
+		return componentName$b;
 	}
 	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;
-					width: 100%;
 				}
-				::slotted(*) {
+
+				descope-text {
 					flex-grow: 0;
 					flex-shrink: 0;
 				}
+
+				:host(:empty) descope-text {
+					display: none;
+				}
+
+				:host([vertical="true"]) div {
+					width: fit-content;
+				}
+
 			</style>
 			<div>
-				<slot></slot>
-				<slot name="text"></slot>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
 			</div>
 		`;
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
 		this.baseSelector = ':host > div';
+
+		this.textComponent = this.shadowRoot.querySelector('descope-text');
+
+		forwardAttrs(this, this.textComponent, {
+			includeAttrs: ['mode', 'variant', 'italic']
+		});
 	}
 }
 
-const selectors$2 = {
+const selectors$3 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
-	slotted: { selector: () => '::slotted(*)' }
+	text: { selector: 'descope-text' },
+	host: { selector: () => ':host' },
 };
 
-const { root, before, after, slotted } = selectors$2;
+const { root, before, after, text: text$2, host: host$1 } = selectors$3;
 
 const Divider = compose(
-	enforceNestingElementsStylesMixin({
-		nestingElementTagName: 'descope-text',
-		nestingElementDestSlotName: 'text',
-		forwardAttrOptions: {
-			includeAttrs: ['mode', 'variant'],
-			excludeAttrs: []
-		}
-	}),
 	createStyleMixin({
 		mappings: {
+			maxTextWidth: { ...text$2, property: 'max-width' },
 			minHeight: root,
 			alignItems: root,
 			alignSelf: root,
 			flexDirection: root,
-			padding: slotted,
-			width: matchHostStyle(),
-			height: [before, after],
+			textPadding: {...text$2, property: 'padding'},
+			width: host$1,
+			padding: host$1,
 			backgroundColor: [before, after],
 			opacity: [before, after],
-			textWidth: { ...slotted, property: 'width' }
+			textWidth: { ...text$2, property: 'width' },
+			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
+			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
 		},
-		nestedMappings: {
-			fontStyle: {
-				selector: Text.componentName,
-				property: Text.cssVarList.fontStyle
-			}
-		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawDivider);
 
+const componentName$a = getComponentName('text');
+
+class RawText extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$a;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
+}
+
+const Text = compose(
+	createStyleMixin({
+		mappings: {
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
+			width: { selector: () => ':host' },
+			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
+			textAlign: {},
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawText);
+
 customElements.define(componentName$a, Text);
 
-customElements.define(componentName$9, Divider);
+customElements.define(componentName$b, Divider);
+
+const selectors$2 = {
+	label: '::part(label)',
+	input: '::part(input-field)',
+	readOnlyInput: '[readonly]::part(input-field)::after',
+	placeholder: '> input:placeholder-shown',
+	host: () => ':host'
+};
+
+var textFieldMappings = {
+	backgroundColor: { selector: selectors$2.input },
+	color: { selector: selectors$2.input },
+	width: { selector: selectors$2.host },
+	borderColor: [
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
+	],
+	borderWidth: [
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
+	],
+	borderStyle: [
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
+	],
+	borderRadius: { selector: selectors$2.input },
+	boxShadow: { selector: selectors$2.input },
+	fontSize: {},
+	height: { selector: selectors$2.input },
+	padding: { selector: selectors$2.input },
+	outline: { selector: selectors$2.input },
+	outlineOffset: { selector: selectors$2.input },
+
+	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
+};
 
-const componentName$8 = getComponentName('email-field');
+const componentName$9 = getComponentName('email-field');
 
 let overrides$5 = ``;
 
@@ -1230,7 +1350,7 @@ const EmailField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1238,7 +1358,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$9
 	})
 );
 
@@ -1282,12 +1402,12 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$8, EmailField);
+customElements.define(componentName$9, EmailField);
 
-const componentName$7 = getComponentName('link');
+const componentName$8 = getComponentName('link');
 class RawLink extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$7;
+		return componentName$8;
 	}
 	constructor() {
 		super();
@@ -1304,7 +1424,9 @@ class RawLink extends DescopeBaseClass {
 		</style>
 		<div>
 			<a>
-				<slot name="text"></slot>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
 			</a>
 		</div>
 		`;
@@ -1312,63 +1434,56 @@ class RawLink extends DescopeBaseClass {
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
-		forwardAttrs(this.shadowRoot.host, this.shadowRoot.querySelector('a'), {
+		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
 			includeAttrs: ['href', 'target', 'tooltip'],
 			mapAttrs: {
 				tooltip: 'title'
 			}
 		});
 
+		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+			includeAttrs: ['mode', 'variant'],
+		});
+
 		this.baseSelector = ':host > div';
 	}
 }
 
 const selectors$1 = {
-	anchor: { selector: '> a' }
+	host: { selector: () => 'host' },
+	anchor: { selector: '> a' },
+	text: { selector: Text.componentName }
 };
 
-const { anchor } = selectors$1;
+const { anchor, text: text$1, host } = selectors$1;
 
 const Link = compose(
-	enforceNestingElementsStylesMixin({
-		nestingElementTagName: 'descope-text',
-		nestingElementDestSlotName: 'text',
-		forwardAttrOptions: {
-			includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
-		}
-	}),
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: host,
 			textAlign: {},
-			color: anchor,
+			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
 			borderBottomStyle: anchor,
 			borderBottomColor: anchor
 		},
-		nestedMappings: {
-			color: {
-				selector: Text.componentName,
-				property: Text.cssVarList.color
-			}
-		}
 	}),
 	hoverableMixin(anchor.selector),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$7, Link);
+customElements.define(componentName$8, Link);
 
-const componentName$6 = getComponentName('logo');
+const componentName$7 = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
 class RawLogo extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$6;
+		return componentName$7;
 	}
 	constructor() {
 		super();
@@ -1401,7 +1516,7 @@ const Logo = compose(
 
 style = `
 :host {
-	display: inline-block;
+	display: inline-flex;
 }
 :host > div {
 	display: inline-block;
@@ -1409,9 +1524,9 @@ style = `
 }
 `;
 
-customElements.define(componentName$6, Logo);
+customElements.define(componentName$7, Logo);
 
-const componentName$5 = getComponentName('number-field');
+const componentName$6 = getComponentName('number-field');
 
 let overrides$4 = ``;
 
@@ -1422,7 +1537,7 @@ const NumberField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1430,7 +1545,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$6
 	})
 );
 
@@ -1474,7 +1589,9 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$5, NumberField);
+customElements.define(componentName$6, NumberField);
+
+var BaseInputClass = inputMixin(HTMLElement); //todo: maybe we should use base class?
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -1490,29 +1607,22 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$4 = getComponentName('passcode-internal');
+const componentName$5 = getComponentName('passcode-internal');
 
-class PasscodeInternal extends HTMLElement {
+class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
 		return [
+			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size',
-			'required',
-			'pattern'
+			'size'
 		];
 	}
 
 	static get componentName() {
-		return componentName$4;
-	}
-
-	static get formAssociated() {
-		return true;
+		return componentName$5;
 	}
 
-	#internals
-
 	constructor() {
 		super();
 		const template = document.createElement('template');
@@ -1536,23 +1646,9 @@ class PasscodeInternal extends HTMLElement {
 
 		this.baseSelector = ':host > div';
 
-		this.#internals = this.attachInternals();
-
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
 	}
 
-	checkValidity() {
-		// we need to toggle the has-error-message so the text inside the digits will become red when there is an error
-		if (this.#internals.validity.valid) {
-			this.inputs.forEach(input => input.removeAttribute('has-error-message'));
-		} else {
-			this.inputs.forEach(input => input.setAttribute('has-error-message', 'true'));
-			// we need to call it so the has-error-message with have the correct format (="true")
-			this.oninvalid?.();
-		}
-		return this.#internals.validity.valid
-	}
-
 	get digits() {
 		return Number.parseInt(this.getAttribute('digits')) || 6
 	}
@@ -1561,59 +1657,54 @@ class PasscodeInternal extends HTMLElement {
 		return this.inputs.map(({ value }) => value).join('')
 	}
 
-	set value(val) { }
+	set value(val) {
+		if(val === this.value) return;
+
+		const charArr = getSanitizedCharacters(val);
 
-	get isRequired() {
-		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+		if (charArr.length) {
+			this.fillDigits(charArr, this.inputs[0]);
+		}
 	}
 
 	get pattern() {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	get valueMissingErrMsg() {
-		return 'Please fill out this field.'
-	}
-
-	get patternMismatchErrMsg() {
-		return `Must be a ${this.digits} digits number.`
-	}
-
-	get validity() {
-		return this.#internals.validity;
-	}
-
-	get validationMessage() {
-		return this.#internals.validationMessage;
-	}
-
-	reportValidity() {
-		this.#internals.reportValidity();
+	handleInputsInvalid() {
+		setTimeout(() => {
+			if (this.hasAttribute('invalid')) {
+				this.inputs.forEach(input => input.setAttribute('invalid', 'true'));
+			}
+		});
 	}
 
-	formAssociatedCallback() {
-		this.setValidity?.();
+	handleInputsValid() {
+		this.inputs.forEach(input => input.removeAttribute('invalid'));
 	}
 
-	setValidity = () => {
+	getValidity() {
 		if (this.isRequired && !this.value) {
-			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+			return { valueMissing: true };
 		}
 		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
-			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+			return { patternMismatch: true };
 		}
 		else {
-			this.#internals.setValidity({});
+			return {}
 		}
 	};
 
+	handleFocus() {
+		this.inputs[0].focus();
+	}
+
 	async connectedCallback() {
-		this.setValidity();
+		super.connectedCallback();
 		this.initInputs();
 
-		this.onfocus = () => {
-			this.inputs[0].focus();
-		};
+		this.addEventListener('invalid', this.handleInputsInvalid);
+		this.addEventListener('valid', this.handleInputsValid);
 	}
 
 	getInputIdx(inputEle) {
@@ -1644,6 +1735,10 @@ class PasscodeInternal extends HTMLElement {
 		!currentInput.hasAttribute('focused') && focusElement(currentInput);
 	};
 
+	handleBlur() {
+		this.handleInputsInvalid();
+	}
+
 	initInputs() {
 		this.inputs.forEach((input) => {
 
@@ -1652,7 +1747,7 @@ class PasscodeInternal extends HTMLElement {
 			// if not, the component is no longer focused and we should simulate blur
 			input.addEventListener('blur', () => {
 				const timerId = setTimeout(() => {
-					this.dispatchEvent(new Event('blur'));
+					this.dispatchBlur();
 				});
 
 				this.inputs.forEach((ele) =>
@@ -1660,13 +1755,13 @@ class PasscodeInternal extends HTMLElement {
 				);
 			});
 
-			input.oninput = (e) => {
+			input.oninput = () => {
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
 				else this.fillDigits(charArr, input);
 
-				this.setValidity();
+				this.dispatchInput();
 			};
 
 			input.onkeydown = ({ key }) => {
@@ -1679,33 +1774,89 @@ class PasscodeInternal extends HTMLElement {
 					!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
 				}
 
-				this.setValidity();
 			};
 		});
 	}
 
-	attributeChangedCallback(
-		attrName,
-		oldValue,
-		newValue
-	) {
-		const validationRelatedAttributes = ['required', 'pattern'];
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback(attrName, oldValue, newValue);
 
 		if (oldValue !== newValue) {
-			if (validationRelatedAttributes.includes(attrName)) {
-				this.setValidity();
-			}
-			else if (PasscodeInternal.observedAttributes.includes(attrName)) {
+			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {
 				this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
 			}
 		}
 	}
 }
 
+const componentName$4 = getComponentName('text-field');
+
+let overrides$3 = ``;
+
+const TextField = compose(
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides$3,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$4
+	})
+);
+
+overrides$3 = `
+	:host {
+		display: inline-block;
+	}
+
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-text-field input:-webkit-autofill,
+	vaadin-text-field input:-webkit-autofill::first-line,
+	vaadin-text-field input:-webkit-autofill:hover,
+	vaadin-text-field input:-webkit-autofill:active,
+	vaadin-text-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${TextField.cssVarList.color});
+		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-text-field > label,
+	vaadin-text-field::part(input-field) {
+		cursor: pointer;
+		color: var(${TextField.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${TextField.cssVarList.color});
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
 const componentName$3 = getComponentName('passcode');
 
 const customMixin = (superclass) =>
@@ -1723,28 +1874,21 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-      <${componentName$4} 
-        bordered="true" 
-        name="code" 
-        tabindex="0"
-        slot="input"
-      ></${componentName$4}>
-      `;
-
-			// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
-			const slotEle = Object.assign(document.createElement('slot'), {
-				name: 'input',
-				slot: 'input',
-				part: 'input'
-			});
-			this.proxyElement.appendChild(slotEle);
+			<${componentName$5} 
+				bordered="true" 
+				name="code" 
+				tabindex="-1"
+				slot="input"
+			></${componentName$5}>
+			`;
+
+			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.shadowRoot.host.appendChild(template.content.cloneNode(true));
-			this.inputElement = this.querySelector(componentName$4);
+			this.inputElement = this.shadowRoot.querySelector(componentName$5);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
 
@@ -1758,20 +1902,24 @@ const customMixin = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
+const { digitField, label, requiredIndicator } = {
+	digitField: { selector: () => TextField.componentName },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
+};
+
+const textVars = TextField.cssVarList;
+
 const Passcode = compose(
 	createStyleMixin({
 		mappings: {
-			...restTextFieldMappings
+			...restTextFieldMappings,
+			borderColor: { ...digitField, property: textVars.borderColor },
+			color: [restTextFieldMappings.color, label, requiredIndicator],
 		},
-		nestedMappings: {
-			borderColor: {
-				selector: TextField.componentName,
-				property: TextField.cssVarList.borderColor
-			}
-		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin,
 	customMixin
 )(
@@ -1781,63 +1929,50 @@ const Passcode = compose(
 		style: () => `
     :host {
       --vaadin-field-default-width: auto;
+			display: inline-block;
     }
-
-    ::slotted([slot='input']) {
+    descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;
       gap: 2px;
       align-items: center;
       padding: 0;
     }
-
     vaadin-text-field::part(input-field) {
       background-color: transparent;
       padding: 0;
+			overflow: hidden;
     }
-
-    ${overrides$3}
+		vaadin-text-field {
+			margin: 0;
+			padding: 0;
+		}
+		vaadin-text-field[readonly] > input:placeholder-shown {
+			opacity: 1;
+		}
+		vaadin-text-field > label,
+		vaadin-text-field::part(input-field) {
+			cursor: pointer;
+		}
+		vaadin-text-field::part(input-field):focus {
+			cursor: text;
+		}
+		vaadin-text-field[required]::part(required-indicator)::after {
+			font-size: "12px";
+			content: "*";
+		}
+		vaadin-text-field[readonly]::part(input-field)::after {
+			border: 0 solid;
+		}
     `,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$3
 	})
 );
 
-const overrides$3 = `
-	:host {
-		display: inline-block;
-	}
-
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		cursor: pointer;
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
+customElements.define(componentName$4, TextField);
 
-customElements.define(componentName$4, PasscodeInternal);
+customElements.define(componentName$5, PasscodeInternal);
 
 customElements.define(componentName$3, Passcode);
 
@@ -1858,7 +1993,7 @@ const PasswordField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1919,12 +2054,12 @@ let overrides$1 = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: {selector: () => ':host'},
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1950,6 +2085,9 @@ overrides$1 = `
 		--bgColor: #fff;
 		--knobBgColor: #000;
 	}
+	vaadin-checkbox : {
+		width: 100%;
+	}
 	vaadin-checkbox>label {
 		cursor: pointer;
 		border: 1px solid;
@@ -1976,6 +2114,7 @@ overrides$1 = `
 		height: 0;
 		width: 0;
 		visibility: hidden;
+		margin: 0;
 	}
 	vaadin-checkbox[checked]>label::after {
 		transform: translateX(-100%);
@@ -1993,7 +2132,8 @@ const componentName = getComponentName('text-area');
 const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
-	required: '::part(required-indicator)::after'
+	required: '::part(required-indicator)::after',
+	host: () => ':host'
 };
 
 let overrides = ``;
@@ -2004,7 +2144,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: matchHostStyle(),
+			width: { selector: selectors.host },
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -2015,7 +2155,7 @@ const TextArea = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -2034,6 +2174,7 @@ overrides = `
 
 	vaadin-text-area {
 		margin: 0;
+		width: 100%;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
@@ -2078,9 +2219,9 @@ const getThemeRefs = (theme, prefix) =>
 const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-		(acc, entry) => (acc += `${entry.join(':')};\n`),
-		''
-	)}
+	(acc, entry) => (acc += `${entry.join(':')};\n`),
+	''
+)}
 }
 `;
 
@@ -2088,10 +2229,20 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
 		const [component, ...restPath] = path;
 		const property = restPath.pop();
+		const componentName = getComponentName(component);
+
+		// we need a support for portal components theme (e.g. overlay)
+		// 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';
+
+		if (restPath[0] && restPath[0].startsWith('#')) {
+			themeName = restPath.shift();
+		}
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
-
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
 			if (section.startsWith('_'))
 				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
@@ -2111,30 +2262,53 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`;
+		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
 		return {
-			[selector]: {
-				[property]: val
+			[componentName]: {
+				[themeName]: {
+					[selector]: {
+						[property]: val
+					}
+				}
 			}
 		};
 	});
 
-const componentsThemeToStyle = (componentsTheme, themeName = '') =>
-	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+
+const createComponentsTheme = (componentsTheme) => {
+	const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+	return Object.keys(styleObj).reduce(
+		(acc, componentName) => {
+			const componentThemes = styleObj[componentName];
+
+			return Object.assign(acc, {
+				[componentName]: Object.keys(componentThemes)
+					.reduce((acc, theme) =>
+						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+						{})
+			})
+		},
+		{}
+	);
+};
+
+const componentsThemeToStyle = (componentsTheme) =>
+	Object.entries(componentsTheme).reduce(
 		(acc, [selector, vars]) =>
-			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
-				vars
-			)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(';\n')} \n}\n\n`),
+		(acc += `${selector} { \n${Object.entries(
+			vars
+		)
+			.map(([key, val]) => `${key}: ${val}`)
+			.join(';\n')} \n}\n\n`),
 		''
 	);
 
-const themeToStyle = ({ globals, components }, themeName) => `
-${globalsThemeToStyle(globals, themeName)}
-${componentsThemeToStyle(components, themeName)}
-`;
+const themeToStyle = ({ globals, components }, themeName) => ({
+	globals: globalsThemeToStyle(globals, themeName),
+	components: createComponentsTheme(components)
+});
 
 const useVar = (varName) => `var(${varName})`;
 
@@ -2189,7 +2363,7 @@ const colors = genColors({
 	surface: {
 		main: 'lightgray',
 		light: '#fff',
-		dark: '#000'
+		dark: '#000',
 	},
 	primary: '#0082B5',
 	secondary: '#7D14EB',
@@ -2299,11 +2473,11 @@ const mode = {
 	surface: globalRefs$7.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$h);
 
 const button = {
-	...helperTheme$1,
-
+	...helperTheme$2,
+	[vars$c.width]: 'fit-content',
 	size: {
 		xs: {
 			[vars$c.height]: '10px',
@@ -2347,34 +2521,34 @@ const button = {
 
 	variant: {
 		contained: {
-			[vars$c.color]: helperRefs$1.contrast,
-			[vars$c.backgroundColor]: helperRefs$1.main,
+			[vars$c.color]: helperRefs$2.contrast,
+			[vars$c.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$c.backgroundColor]: helperRefs$1.dark
+				[vars$c.backgroundColor]: helperRefs$2.dark
 			},
 			_loading: {
-				[vars$c.backgroundColor]: helperRefs$1.main
+				[vars$c.backgroundColor]: helperRefs$2.main
 			}
 		},
 		outline: {
-			[vars$c.color]: helperRefs$1.main,
-			[vars$c.borderColor]: helperRefs$1.main,
+			[vars$c.color]: helperRefs$2.main,
+			[vars$c.borderColor]: helperRefs$2.main,
 			_hover: {
-				[vars$c.color]: helperRefs$1.dark,
-				[vars$c.borderColor]: helperRefs$1.dark,
+				[vars$c.color]: helperRefs$2.dark,
+				[vars$c.borderColor]: helperRefs$2.dark,
 				_error: {
-					[vars$c.color]: helperRefs$1.error
+					[vars$c.color]: helperRefs$2.error
 				}
 			}
 		},
 		link: {
-			[vars$c.color]: helperRefs$1.main,
+			[vars$c.color]: helperRefs$2.main,
 			[vars$c.padding]: 0,
 			[vars$c.margin]: 0,
-			[vars$c.lineHeight]: helperRefs$1.height,
+			[vars$c.lineHeight]: helperRefs$2.height,
 			[vars$c.borderRadius]: 0,
 			_hover: {
-				[vars$c.color]: helperRefs$1.main,
+				[vars$c.color]: helperRefs$2.main,
 				[vars$c.textDecoration]: 'underline'
 			}
 		}
@@ -2442,7 +2616,7 @@ const textField = (vars) => ({
 		[vars.borderColor]: globalRefs$6.colors.surface.main
 	},
 
-	_hasErrorMessage: {
+	_invalid: {
 		[vars.borderColor]: globalRefs$6.colors.error.main,
 		[vars.color]: globalRefs$6.colors.error.main,
 		[vars.placeholderColor]: globalRefs$6.colors.error.light
@@ -2470,6 +2644,7 @@ const globalRefs$5 = getThemeRefs(globals);
 const vars$9 = 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',
@@ -2503,7 +2678,8 @@ const textArea = {
 const vars$8 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$8.cursor]: 'pointer'
+	[vars$8.cursor]: 'pointer',
+	[vars$8.width]: 'fit-content'
 };
 
 const vars$7 = SwitchToggle.cssVarList;
@@ -2529,7 +2705,7 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme, helperRefs, helperVars] =
+const [helperTheme$1, helperRefs$1, helperVars] =
 	createHelperVars({
 		verticalAlignment,
 		horizontalAlignment,
@@ -2537,8 +2713,8 @@ const [helperTheme, helperRefs, helperVars] =
 	}, 'container');
 
 const container = {
-	...helperTheme,
-	[vars$6.display]: 'flex',
+	...helperTheme$1,
+	[vars$6.width]: '100%',
 	verticalPadding: {
 		sm: { [vars$6.verticalPadding]: '5px' },
 		md: { [vars$6.verticalPadding]: '10px' },
@@ -2552,8 +2728,8 @@ const container = {
 	direction: {
 		row: {
 			[vars$6.flexDirection]: 'row',
-			[vars$6.alignItems]: helperRefs.verticalAlignment,
-			[vars$6.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$6.alignItems]: helperRefs$1.verticalAlignment,
+			[vars$6.justifyContent]: helperRefs$1.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
@@ -2561,8 +2737,8 @@ const container = {
 
 		column: {
 			[vars$6.flexDirection]: 'column',
-			[vars$6.alignItems]: helperRefs.horizontalAlignment,
-			[vars$6.justifyContent]: helperRefs.verticalAlignment,
+			[vars$6.alignItems]: helperRefs$1.horizontalAlignment,
+			[vars$6.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -2583,20 +2759,20 @@ const container = {
 
 	shadow: {
 		sm: {
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$6.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.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$6.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.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$6.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.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$6.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.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
@@ -2753,25 +2929,32 @@ const link = {
 
 const vars$2 = Divider.cssVarList;
 
+const thickness = '2px';
+const textPaddingSize = '10px';
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$b);
+
+
 const divider = {
+	...helperTheme,
 	[vars$2.alignItems]: 'center',
-	[vars$2.height]: '2px',
+	[vars$2.dividerHeight]: helperRefs.thickness,
 	[vars$2.backgroundColor]: 'currentColor',
 	[vars$2.opacity]: '0.2',
-	[vars$2.padding]: '0 10px',
+	[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)',
 	_vertical: {
-		[vars$2.width]: '2px',
-		[vars$2.padding]: '10px 0',
+		[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]: 'max-content'
-	},
-	_italic: {
-		[vars$2.fontStyle]: 'italic'
+		[vars$2.textWidth]: 'fit-content',
+		[vars$2.dividerWidth]: helperRefs.thickness,
+		[vars$2.maxTextWidth]: '100%',
 	}
 };
 
@@ -2901,5 +3084,5 @@ var components = {
 
 var index = { globals, components };
 
-export { componentsThemeToStyle, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
+export { componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
 //# sourceMappingURL=index.esm.js.map