@descope/web-components-ui 1.0.62 → 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
-				});
-			}
-
-			#styleEle = null;
+	({ 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];
+				}
 
-			constructor() {
-				super();
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, {
+						...mappings,
+					});
+				}
 
-				this.#createComponentStyle();
-				this.#createAttrOverrideStyle();
-			}
+				#overrideStyleEle = null;
+				#themeStyleEle = null;
+				#disconnectThemeManager
 
-			#createAttrOverrideStyle() {
-				this.#styleEle = document.createElement('style');
-				this.#styleEle.id = 'style-mixin-overrides';
+				constructor() {
+					super();
 
-				this.#styleEle.innerText = '* {}';
-				this.shadowRoot.prepend(this.#styleEle);
-			}
+					this.classList.add(superclass.componentName);
 
-			#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 {
@@ -256,10 +368,6 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
-var compose = (...fns) =>
-(val) =>
-  fns.reduceRight((res, fn) => fn(res), val);
-
 class DescopeBaseClass extends HTMLElement {}
 
 const hoverableMixin =
@@ -286,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,
@@ -792,9 +825,7 @@ const componentNameValidationMixin = (superclass) =>
 		}
 	};
 
-const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
-
-const componentName$i = getComponentName('button');
+const componentName$h = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -817,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(
@@ -826,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,
@@ -847,7 +879,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$h
 	})
 );
 
@@ -878,16 +910,20 @@ 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' }]
 		}
 	}),
@@ -902,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();
@@ -927,6 +967,7 @@ class RawLoaderLinear extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-block
 				}
 				div::after {
 					content: '';
@@ -934,6 +975,10 @@ class RawLoaderLinear extends DescopeBaseClass {
 					position: absolute;
 					left: 0;
 				}
+
+				:host > div {
+					width: 100%;
+				}
 			</style>
 			<div></div>
 		`;
@@ -947,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' }],
@@ -971,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();
@@ -990,6 +1036,7 @@ class RawLoaderRadial extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-flex;
 				}
 				:host > div {
 					animation-name: spin;
@@ -1009,7 +1056,7 @@ const LoaderRadial = compose(
 	createStyleMixin({
 		mappings: {
 			display: {},
-			width: matchHostStyle({}),
+			width: {},
 			height: {},
 			spinnerWidth: { property: 'border-width' },
 			spinnerStyle: { property: 'border-style' },
@@ -1028,133 +1075,13 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$f, LoaderRadial);
+customElements.define(componentName$e, 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,
-	proxyInputMixin,
-	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');
-
-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();
@@ -1163,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>
@@ -1178,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' },
@@ -1189,273 +1123,223 @@ const Container = compose(
 				{ property: 'padding-left' },
 				{ property: 'padding-right' }
 			],
-
-			display: {}, // maybe this should be hardcoded to flex
-			flexDirection: {},
-			justifyContent: {},
-			alignItems: {},
-			gap: {},
-
-			backgroundColor: {},
-			borderRadius: {},
-
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
-
-			boxShadow: {}
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawContainer);
-
-customElements.define(componentName$c, Container);
-
-const componentName$b = getComponentName('date-picker');
-
-const DatePicker = compose(
-	draggableMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		componentName: componentName$b,
-		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 = () =>
-				document.createElement(nestingElementTagName, {
-					slot: nestingElementDestSlotName
-				});
-
-			let childObserver;
-
-			const getObserver = () => childObserver;
-
-			let isMutating = false;
-
-			const filterNestingElement = (node) => node.localName !== nestingElementTagName;
-			return class EnforceNestingElementsStylesMixinClass extends superclass {
-				constructor() {
-					super();
-
-					const childObserverCallback = (mutation, observer) => {
-
-						// we are going to change the DOM, so we need to skip the upcoming mutations
-						if (isMutating) return;
-
-						isMutating = true;
-
-						const { addedNodes, removedNodes } = mutation;
-
-						const nestingElement = this.shadowRoot.host.querySelector(nestingElementTagName);
-						const hasNewChildren = Array.from(addedNodes)
-							.filter(filterNestingElement)
-							.length > 0;
-						const hasRemovedChildren = Array.from(removedNodes)
-							.filter(filterNestingElement)
-							.length > 0;
-
-						if (!nestingElement && hasNewChildren) {
-							// if before there were no children and now there are children - insert
-							this.handleNestingLevelInsertion();
-
-						} else if (nestingElement && hasNewChildren) {
-							// if children existed, and they changed -
-							// we need to update (move) the new children into
-							// descope-text and remove previous children
-							nestingElement.replaceChildren(...addedNodes);
-						}
-						else if (nestingElement && !hasNewChildren && hasRemovedChildren) {
-							// 	// if children existed and now there are none -
-							// 	// we need to remove descope-text completely
-							nestingElement.remove();
-						}
-
-						setTimeout(() => {
-							isMutating = false;
-						});
-					};
-
-					childObserver = getChildObserver(childObserverCallback);
-				}
-
-				handleNestingLevelInsertion() {
-					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-
-					forwardAttrs(
-						this.shadowRoot.host,
-						this.shadowRoot.host.querySelector(nestingElementTagName),
-						forwardAttrOptions
-					);
-				}
-
-				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
-						this.handleNestingLevelInsertion();
-					}
-
-					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: {},
+
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+
+			backgroundColor: {},
+			borderRadius: {},
+
 			borderColor: {},
-			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
 		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
-)(RawText);
+)(RawContainer);
 
-const componentName$9 = getComponentName('divider');
+customElements.define(componentName$d, Container);
+
+const componentName$c = getComponentName('date-picker');
+
+const DatePicker = compose(
+	draggableMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		componentName: componentName$c,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
+	})
+);
+
+customElements.define(componentName$c, DatePicker);
+
+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 = ``;
 
@@ -1474,7 +1358,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$9
 	})
 );
 
@@ -1518,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();
@@ -1540,7 +1424,9 @@ class RawLink extends DescopeBaseClass {
 		</style>
 		<div>
 			<a>
-				<slot name="text"></slot>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
 			</a>
 		</div>
 		`;
@@ -1548,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();
@@ -1637,7 +1516,7 @@ const Logo = compose(
 
 style = `
 :host {
-	display: inline-block;
+	display: inline-flex;
 }
 :host > div {
 	display: inline-block;
@@ -1645,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 = ``;
 
@@ -1666,7 +1545,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$6
 	})
 );
 
@@ -1710,7 +1589,7 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$5, NumberField);
+customElements.define(componentName$6, NumberField);
 
 var BaseInputClass = inputMixin(HTMLElement); //todo: maybe we should use base class?
 
@@ -1728,7 +1607,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$4 = getComponentName('passcode-internal');
+const componentName$5 = getComponentName('passcode-internal');
 
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
@@ -1741,7 +1620,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 
 	static get componentName() {
-		return componentName$4;
+		return componentName$5;
 	}
 
 	constructor() {
@@ -1916,6 +1795,68 @@ class PasscodeInternal extends BaseInputClass {
 	}
 }
 
+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) =>
@@ -1933,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'] });
 
@@ -1968,17 +1902,21 @@ 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,
 	proxyInputMixin,
@@ -1991,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);
 
@@ -2129,7 +2054,7 @@ let overrides$1 = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: {selector: () => ':host'},
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -2160,6 +2085,9 @@ overrides$1 = `
 		--bgColor: #fff;
 		--knobBgColor: #000;
 	}
+	vaadin-checkbox : {
+		width: 100%;
+	}
 	vaadin-checkbox>label {
 		cursor: pointer;
 		border: 1px solid;
@@ -2186,6 +2114,7 @@ overrides$1 = `
 		height: 0;
 		width: 0;
 		visibility: hidden;
+		margin: 0;
 	}
 	vaadin-checkbox[checked]>label::after {
 		transform: translateX(-100%);
@@ -2203,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 = ``;
@@ -2214,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 },
@@ -2244,6 +2174,7 @@ overrides = `
 
 	vaadin-text-area {
 		margin: 0;
+		width: 100%;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
@@ -2288,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`),
+	''
+)}
 }
 `;
 
@@ -2298,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"]`);
@@ -2321,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})`;
 
@@ -2399,7 +2363,7 @@ const colors = genColors({
 	surface: {
 		main: 'lightgray',
 		light: '#fff',
-		dark: '#000'
+		dark: '#000',
 	},
 	primary: '#0082B5',
 	secondary: '#7D14EB',
@@ -2509,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',
@@ -2557,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'
 			}
 		}
@@ -2680,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',
@@ -2713,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;
@@ -2739,7 +2705,7 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme, helperRefs, helperVars] =
+const [helperTheme$1, helperRefs$1, helperVars] =
 	createHelperVars({
 		verticalAlignment,
 		horizontalAlignment,
@@ -2747,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' },
@@ -2762,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' },
 			}
@@ -2771,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' }
 			}
@@ -2793,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}`
 		},
 	},
 
@@ -2963,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%',
 	}
 };
 
@@ -3111,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