@descope/web-components-ui 1.0.39 → 1.0.41

package/dist/index.esm.js

@@ -1,5 +1,9 @@
 import '@vaadin/button';
 import '@vaadin/text-field';
+import '@vaadin/number-field';
+import '@vaadin/email-field';
+import '@vaadin/password-field';
+import '@vaadin/text-area';
 import '@vaadin/date-picker';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
@@ -7,211 +11,249 @@ import Color from 'color';
 
 const DESCOPE_PREFIX = 'descope';
 
-const kebabCase = str => str
-.replace(/([a-z])([A-Z])/g, "$1-$2")
-.replace(/[\s_.]+/g, '-')
-.toLowerCase();
+const kebabCase = (str) =>
+	str
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/[\s_.]+/g, '-')
+		.toLowerCase();
 
 const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
+const getCssVarName = (...args) =>
+	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
 
-const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVarFallback = (first, ...rest) =>
+	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
-const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') => 
-  typeof relativeSelectorOrSelectorFn === 'function' ? 
-    relativeSelectorOrSelectorFn(baseSelector) : 
-    `${baseSelector}${relativeSelectorOrSelectorFn}`;
+const createCssSelector = (
+	baseSelector = '',
+	relativeSelectorOrSelectorFn = ''
+) =>
+	typeof relativeSelectorOrSelectorFn === 'function'
+		? relativeSelectorOrSelectorFn(baseSelector)
+		: `${baseSelector}${relativeSelectorOrSelectorFn}`;
 
 class StyleBuilder {
-  constructor() {
-    this.styleMap = new Map();
-  }
-
-  add(selector, property, value) {
-    if (!this.styleMap.has(selector)) {
-      this.styleMap.set(selector, []);
-    }
-
-    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
-  }
-
-  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`
-      , '')
-  }
+	constructor() {
+		this.styleMap = new Map();
+	}
+
+	add(selector, property, value) {
+		if (!this.styleMap.has(selector)) {
+			this.styleMap.set(selector, []);
+		}
+
+		this.styleMap.set(selector, [
+			...this.styleMap.get(selector),
+			{ property, value }
+		]);
+	}
+
+	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`),
+			''
+		);
+	}
 }
 
 const normalizeConfig = (attr, config) => {
-  const defaultMapping = { selector: '', property: kebabCase(attr) };
+	const defaultMapping = { selector: '', property: kebabCase(attr) };
 
-  if (!config || !Object.keys(config).length) return [defaultMapping];
+	if (!config || !Object.keys(config).length) return [defaultMapping];
 
-  if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
+	if (Array.isArray(config))
+		return config.map((entry) => Object.assign({}, defaultMapping, entry));
 
-  return [Object.assign({}, defaultMapping, config)];
+	return [Object.assign({}, defaultMapping, config)];
 };
 
 const createStyle = (componentName, baseSelector, mappings) => {
-  const style = new StyleBuilder();
+	const style = new StyleBuilder();
 
-  Object.keys(mappings).forEach((attr) => {
-    const attrConfig = normalizeConfig(attr, mappings[attr]);
+	Object.keys(mappings).forEach((attr) => {
+		const attrConfig = normalizeConfig(attr, mappings[attr]);
 
-    const cssVarName = getCssVarName(componentName, attr);
+		const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        property,
-        createCssVarFallback(cssVarName)
-      );
-    });
-  });
+		attrConfig.forEach(
+			({ selector: relativeSelectorOrSelectorFn, property }) => {
+				style.add(
+					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+					property,
+					createCssVarFallback(cssVarName)
+				);
+			}
+		);
+	});
 
-  return style.toString();
+	return style.toString();
 };
 
 const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce(
-    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-    {}
-  );
+	Object.keys(mappings).reduce(
+		(acc, attr) =>
+			Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+		{}
+	);
 
 // 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 || ''}`}];
-
-const createStyleMixin = ({  mappings = {} }) => (superclass) => {
-  const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key));
-  return class CustomStyleMixinClass extends superclass {
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || [];
-      return [...superAttrs, ...styleAttributes]
-    }
+const matchHostStyle = (mappingObj) => [
+	mappingObj,
+	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
+];
+
+const createStyleMixin =
+	({ mappings = {} }) =>
+	(superclass) => {
+		const styleAttributes = Object.keys(mappings).map((key) =>
+			kebabCaseJoin('st', key)
+		);
+		return class CustomStyleMixinClass extends superclass {
+			static get observedAttributes() {
+				const superAttrs = superclass.observedAttributes || [];
+				return [...superAttrs, ...styleAttributes];
+			}
 
-    static get cssVarList() {
-      return createCssVarsList(superclass.componentName, mappings)
-    }
+			static get cssVarList() {
+				return createCssVarsList(superclass.componentName, mappings);
+			}
 
-    #styleEle = null;
+			#styleEle = null;
 
-    constructor() {
-      super();
+			constructor() {
+				super();
 
-      this.#createComponentStyle();
-      this.#createAttrOverrideStyle();
-    }
+				this.#createComponentStyle();
+				this.#createAttrOverrideStyle();
+			}
 
-    #createAttrOverrideStyle() {
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.id = 'style-mixin-overrides';
+			#createAttrOverrideStyle() {
+				this.#styleEle = document.createElement('style');
+				this.#styleEle.id = 'style-mixin-overrides';
 
-      this.#styleEle.innerText = '* {}';
-      this.shadowRoot.prepend(this.#styleEle);
-    }
+				this.#styleEle.innerText = '* {}';
+				this.shadowRoot.prepend(this.#styleEle);
+			}
 
-    #updateAttrOverrideStyle(attrName, value) {
-      const style = this.#styleEle.sheet.cssRules[0].style;
-      const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''));
+			#updateAttrOverrideStyle(attrName, value) {
+				const style = this.#styleEle.sheet.cssRules[0].style;
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(/^st-/, '')
+				);
 
-      if (value)
-        style.setProperty(varName, value);
-      else
-        style.removeProperty(varName);
-    }
+				if (value) style.setProperty(varName, value);
+				else style.removeProperty(varName);
+			}
 
-    #createComponentStyle() {
-      const themeStyle = document.createElement('style');
-      themeStyle.id = 'style-mixin-component';
-      themeStyle.innerHTML = createStyle(superclass.componentName, this.baseSelector, mappings);
-      this.shadowRoot.prepend(themeStyle);
-    }
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-component';
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					this.baseSelector,
+					mappings
+				);
+				this.shadowRoot.prepend(themeStyle);
+			}
 
-    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);
+				}
+			}
+		};
+	};
 
 const draggableMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-
-    #styleEle = null;
-
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || [];
-      return [...superAttrs, 'draggable']
-    }
-
-    constructor() {
-      super();
-
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
-    }
-
-    #handleDraggableStyle(isDraggable) {
-      if (isDraggable) {
-        this.shadowRoot.appendChild(this.#styleEle);
-      } else {
-        this.#styleEle.remove();
-      }
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-      if (attrName === 'draggable') {
-        this.#handleDraggableStyle(newValue === 'true');
-      }
-    }
-  };
+	class DraggableMixinClass extends superclass {
+		#styleEle = null;
 
-const observeAttributes = (ele, callback, excludeAttrs) => {
-  // sync all attrs on init
-  callback(...Array.from(ele.attributes).map(attr => attr.name));
+		static get observedAttributes() {
+			const superAttrs = superclass.observedAttributes || [];
+			return [...superAttrs, 'draggable'];
+		}
 
-  const observer = new MutationObserver((mutationsList) => {
-    for (const mutation of mutationsList) {
-      if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
-        callback(mutation.attributeName);
-      }
-    }
-  });
+		constructor() {
+			super();
 
-  observer.observe(ele, { attributes: true });
-};
+			this.#styleEle = document.createElement('style');
+			this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
+		}
 
-const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
-  attrNames.forEach(attrName => {
-    const srcAttrVal = srcEle.getAttribute(attrName);
-    if (srcAttrVal !== null) {
-      if (targetEle.getAttribute(attrName) !== srcAttrVal) {
-        targetEle.setAttribute(attrName, srcAttrVal);
-      }
-    } else {
-      targetEle.removeAttribute(attrName);
-    }
-  });
+		#handleDraggableStyle(isDraggable) {
+			if (isDraggable) {
+				this.shadowRoot.appendChild(this.#styleEle);
+			} else {
+				this.#styleEle.remove();
+			}
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			if (attrName === 'draggable') {
+				this.#handleDraggableStyle(newValue === 'true');
+			}
+		}
+	};
+
+const observeAttributes = (ele, callback, excludeAttrs) => {
+	// sync all attrs on init
+	callback(...Array.from(ele.attributes).map((attr) => attr.name));
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === 'attributes' &&
+				!excludeAttrs.includes(mutation.attributeName)
+			) {
+				callback(mutation.attributeName);
+			}
+		}
+	});
+
+	observer.observe(ele, { attributes: true });
 };
 
+const createSyncAttrsCb =
+	(srcEle, targetEle) =>
+	(...attrNames) => {
+		attrNames.forEach((attrName) => {
+			const srcAttrVal = srcEle.getAttribute(attrName);
+			if (srcAttrVal !== null) {
+				if (targetEle.getAttribute(attrName) !== srcAttrVal) {
+					targetEle.setAttribute(attrName, srcAttrVal);
+				}
+			} else {
+				targetEle.removeAttribute(attrName);
+			}
+		});
+	};
+
 const syncAttrs = (ele1, ele2, excludeAttrs) => {
-  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
-  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
 };
 
-const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
-
+const createProxy = ({
+	componentName,
+	wrappedEleName,
+	slots = [],
+	style,
+	excludeAttrsSync = []
+}) => {
 	const template = `
-		${style ? `<style id="create-proxy">${style}</style>` : ''}
+		<style id="create-proxy"></style>
 		<${wrappedEleName}>
 		<slot></slot>
-		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
+		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
 		</${wrappedEleName}>
 	`;
 
@@ -221,17 +263,19 @@ const createProxy = ({ componentName, wrappedEleName, slots = [], style, exclude
 		}
 
 		constructor() {
-			super().attachShadow({ mode: "open" }).innerHTML = template;
+			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
 			this.componentName = this.hostElement.tagName.toLowerCase();
 			this.baseSelector = wrappedEleName;
+			this.shadowRoot.getElementById('create-proxy').innerHTML =
+				typeof style === 'function' ? style() : style;
 		}
 
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 				this.setAttribute('tabindex', '0');
-				
+
 				// we want to focus on the proxy element when focusing our WC
 				this.onfocus = (e) => {
 					this.proxyElement.focus();
@@ -251,8 +295,11 @@ const createProxy = ({ componentName, wrappedEleName, slots = [], style, exclude
 
 				this.mouseoverCbRef = () => {
 					this.proxyElement.setAttribute('hover', '');
-					this.proxyElement.addEventListener('mouseleave', () =>
-						this.proxyElement.removeAttribute('hover'), { once: true });
+					this.proxyElement.addEventListener(
+						'mouseleave',
+						() => this.proxyElement.removeAttribute('hover'),
+						{ once: true }
+					);
 				};
 
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
@@ -279,149 +326,270 @@ const createProxy = ({ componentName, wrappedEleName, slots = [], style, exclude
 };
 
 const inputMixin = (superclass) =>
-  class InputMixinClass extends superclass {
+	class InputMixinClass extends superclass {
 		static get formAssociated() {
 			return true;
 		}
-    
-    #internals
 
-    constructor() {
-      super();
+		#internals;
 
-      this.#internals = this.attachInternals();
-
-      // this is needed in order to make sure the form input validation is working
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', 0);
-      }
-    }
+		constructor() {
+			super();
 
-    formAssociatedCallback() {
-      this.setValidity?.();
-    }
+			this.#internals = this.attachInternals();
+		}
 
-    connectedCallback() {
-      super.connectedCallback?.();
+		formAssociatedCallback() {
+			this.setValidity?.();
+		}
 
-      // vaadin does not expose all those validation attributes so we need to take it from the input
-      // https://github.com/vaadin/web-components/issues/1177
-      const input = this.proxyElement.querySelector('input');
-      if (!input) throw Error('no input was found')
+		connectedCallback() {
+			super.connectedCallback?.();
 
-      this.checkValidity = () => input.checkValidity();
-      this.reportValidity = () => input.reportValidity();
-      this.validity = input.validity;
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				this.setAttribute('tabindex', 0);
+			}
 
-      this.setValidity = () => {
-        this.#internals.setValidity(input.validity, input.validationMessage);
-      };
+			// vaadin does not expose all those validation attributes so we need to take it from the input
+			// https://github.com/vaadin/web-components/issues/1177
+			const input =
+				this.proxyElement.querySelector('input') ||
+				this.proxyElement.querySelector('textarea');
+			if (!input) throw Error('no input was found');
+
+			this.checkValidity = () => input.checkValidity();
+			this.reportValidity = () => input.reportValidity();
+			this.validity = input.validity;
+
+			this.setValidity = () => {
+				this.#internals.setValidity(input.validity, input.validationMessage);
+			};
+
+			input.oninput = () => {
+				this.value = input.value;
+				this.setValidity();
+			};
+		}
+	};
 
-      input.oninput = () => {
-        this.value = input.value;
-        this.setValidity();
-      };
+const componentNameValidationMixin = (superclass) =>
+	class DraggableMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
 
-    }
-  };
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
 
-const componentNameValidationMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    #checkComponentName() {
-      const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
-
-      if (!superclass.componentName) {
-        throw Error(`component name is not defined on super class, make sure you have a static get for "componentName"`)
-      }
-
-      if (currentComponentName !== superclass.componentName) {
-        throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
-      }
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        this.#checkComponentName();
-      }
-    }
-  };
+		connectedCallback() {
+			super.connectedCallback?.();
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName();
+			}
+		}
+	};
 
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
+const compose =
+	(...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
+
+const componentName$a = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+const resetStyles = `
+	vaadin-button { margin: 0; }
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 5px;
+	}
+`;
 
-const componentName$4 = getComponentName("button");
+const selectors$2 = {
+	label: '::part(label)'
+};
 
 const Button = compose(
-  createStyleMixin({
-    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
-    mappings: {
-      'backgroundColor': {},
-      'borderRadius': {},
-      'color': { selector: '::part(label)' },
-      'borderColor': {},
-      'borderStyle': {},
-      'borderWidth': {},
-      'fontSize': {},
-      'height': {},
-      'width': matchHostStyle({}),
-      'cursor': {},
-      'padding': {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
+	createStyleMixin({
+		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+		mappings: {
+			backgroundColor: {},
+			borderRadius: {},
+			color: { selector: selectors$2.label },
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+			fontSize: {},
+			height: {},
+			width: [matchHostStyle()],
+			cursor: {},
+			padding: [matchHostStyle(), { selector: selectors$2.label }],
+			textDecoration: { selector: selectors$2.label }
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
 )(
-  createProxy({
-    slots: ["prefix", "suffix"],
-    wrappedEleName: "vaadin-button",
-    style: `${editorOverrides}`,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$4
-  })
+	createProxy({
+		slots: ['prefix', 'label', 'suffix'],
+		wrappedEleName: 'vaadin-button',
+		style: () =>
+			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$a
+	})
 );
 
-customElements.define(componentName$4, Button);
+const loadingIndicatorStyles = `
+	@keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+	:host([loading]) ::before {
+		--marginRatio: 1.35;
+		color: var(${Button.cssVarList.color});
+		animation: spin 2s linear infinite;
+		position: absolute;
+		top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
+		left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
+		content: '';
+		z-index: 1;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		border-width: calc(var(${Button.cssVarList.height}) / 12);
+		border-style: solid;
+		width: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
+		height: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
+	}
+	:host([loading])::part(prefix),
+	:host([loading])::part(label) {
+		visibility: hidden;
+	}
+`;
 
-const componentName$3 = getComponentName("text-field");
+customElements.define(componentName$a, Button);
+
+const componentName$9 = getComponentName('text-field');
+
+const selectors$1 = {
+	label: '::part(label)',
+	input: '::part(input-field)',
+	readOnlyInput: '[readonly]::part(input-field)::after',
+	placeholder: '> input:placeholder-shown'
+};
+
+let overrides$5 = ``;
+
+const textFieldMappings = {
+	color: { selector: selectors$1.input },
+	backgroundColor: { selector: selectors$1.input },
+	width: [matchHostStyle()],
+	color: { selector: selectors$1.input },
+	borderColor: [
+		{ selector: selectors$1.input },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderWidth: [
+		{ selector: selectors$1.input },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderStyle: [
+		{ selector: selectors$1.input },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderRadius: { selector: selectors$1.input },
+	boxShadow: { selector: selectors$1.input },
+	fontSize: {},
+	height: { selector: selectors$1.input },
+	padding: { selector: selectors$1.input },
+	outline: { selector: selectors$1.input },
+	outlineOffset: { selector: selectors$1.input },
+
+	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
+};
 
 const TextField = compose(
-  createStyleMixin({
-    mappings: {
-      'placeholderColor': { selector: '> input:placeholder-shown', property: 'color' },
-      'color': {},
-      'borderColor': { selector: '::part(input-field)' },
-      'borderWidth': { selector: '::part(input-field)' },
-      'borderStyle': { selector: '::part(input-field)' },
-      'borderRadius': { selector: '::part(input-field)' },
-      'boxShadow': { selector: '::part(input-field)' },
-      'height': { selector: '::part(input-field)' },
-      'padding': { selector: '::part(input-field)' },
-      'backgroundColor': { selector: '::part(input-field)' },
-      'labelColor': { selector: '::part(label)', property: 'color' },
-    },
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
 )(
-  createProxy({
-    slots: ["prefix", "suffix"],
-    wrappedEleName: "vaadin-text-field",
-    style: ``,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$3
-  })
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides$5,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$9
+	})
 );
 
-customElements.define(componentName$3, TextField);
+overrides$5 = `
+	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$9, TextField);
 
 const template = document.createElement('template');
 
-const componentName$2 = getComponentName("combo");
+const componentName$8 = getComponentName('combo');
 
 template.innerHTML = `
   <descope-button></descope-button>
@@ -429,88 +597,339 @@ template.innerHTML = `
 `;
 
 class Combo extends HTMLElement {
-  constructor() {
-    super();
+	constructor() {
+		super();
 
-    this.attachShadow({ mode: 'open' }).appendChild(
-      template.content.cloneNode(true)
-    );
-  }
+		this.attachShadow({ mode: 'open' }).appendChild(
+			template.content.cloneNode(true)
+		);
+	}
 }
 
-customElements.define(componentName$2, Combo);
+customElements.define(componentName$8, Combo);
+
+const componentName$7 = getComponentName('number-field');
+
+let overrides$4 = ``;
+
+const NumberField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-number-field',
+		style: () => overrides$4,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$7
+	})
+);
+
+overrides$4 = `
+	vaadin-number-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-number-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-number-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-number-field input:-webkit-autofill,
+	vaadin-number-field input:-webkit-autofill::first-line,
+	vaadin-number-field input:-webkit-autofill:hover,
+	vaadin-number-field input:-webkit-autofill:active,
+	vaadin-number-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
+		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-number-field > label,
+	vaadin-number-field::part(input-field) {
+		cursor: pointer;
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-number-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$7, NumberField);
+
+const componentName$6 = getComponentName('email-field');
 
-const componentName$1 = getComponentName("date-picker");
+let overrides$3 = ``;
+
+const EmailField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-email-field',
+		style: () => overrides$3,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$6
+	})
+);
+
+overrides$3 = `
+	vaadin-email-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-email-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-email-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-email-field input:-webkit-autofill,
+	vaadin-email-field input:-webkit-autofill::first-line,
+	vaadin-email-field input:-webkit-autofill:hover,
+	vaadin-email-field input:-webkit-autofill:active,
+	vaadin-email-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
+		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-email-field > label,
+	vaadin-email-field::part(input-field) {
+		cursor: pointer;
+		color: var(${EmailField.cssVarList.color});
+	}
+	vaadin-email-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-email-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${EmailField.cssVarList.color});
+	}
+	vaadin-email-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$6, EmailField);
+
+const componentName$5 = getComponentName('password-field');
+
+let overrides$2 = ``;
+
+const PasswordField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings,
+			// todo: override cursor from lumo
+			revealCursor: [
+				{
+					selector: '::part(reveal-button)::before',
+					property: 'cursor'
+				}
+			]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-password-field',
+		style: () => overrides$2,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$5
+	})
+);
+
+overrides$2 = `
+	vaadin-password-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-password-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-password-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-password-field input:-webkit-autofill,
+	vaadin-password-field input:-webkit-autofill::first-line,
+	vaadin-password-field input:-webkit-autofill:hover,
+	vaadin-password-field input:-webkit-autofill:active,
+	vaadin-password-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
+		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-password-field > label,
+	vaadin-password-field::part(input-field) {
+		cursor: pointer;
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-password-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$5, PasswordField);
+
+const componentName$4 = getComponentName('text-area');
+
+const selectors = {
+	label: '::part(label)',
+	input: ':not([disabled])::part(input-field)',
+	required: '::part(required-indicator)::after'
+};
+
+let overrides$1 = ``;
+
+const TextArea = compose(
+	createStyleMixin({
+		mappings: {
+			resize: { selector: '> textarea' },
+			color: { selector: selectors.label },
+			cursor: {},
+			width: {},
+			backgroundColor: { selector: selectors.input },
+			borderWidth: { selector: selectors.input },
+			borderStyle: { selector: selectors.input },
+			borderColor: { selector: selectors.input },
+			borderRadius: { selector: selectors.input },
+			outline: { selector: selectors.input },
+			outlineOffset: { selector: selectors.input }
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-area',
+		style: () => overrides$1,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$4
+	})
+);
+
+overrides$1 = `
+	vaadin-text-area {
+		margin: 0;
+	}
+	vaadin-text-area > label,
+	vaadin-text-area::part(input-field) {
+		cursor: pointer;
+	}
+	vaadin-text-area[focused] input:focus {
+		cursor: text;
+	}
+	vaadin-text-area::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+	}	
+`;
+
+customElements.define(componentName$4, TextArea);
+
+const componentName$3 = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$1,
-		slots: ["prefix", "suffix"],
-		wrappedEleName: "vaadin-date-picker",
-		style: ``,
+		componentName: componentName$3,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
 	})
 );
 
-customElements.define(componentName$1, DatePicker);
+customElements.define(componentName$3, DatePicker);
 
-const componentName = getComponentName("container");
+const componentName$2 = getComponentName('container');
 
 class RawContainer extends HTMLElement {
-  static get componentName() {
-    return componentName
-  }
-  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';
-  }
+	static get componentName() {
+		return componentName$2;
+	}
+	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 Container = compose(
-  createStyleMixin({
-    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
-    mappings: {
-      'height': {},
-      'width': {},
-
-      'verticalPadding': [
-        { property: 'padding-top' },
-        { property: 'padding-bottom' }
-      ],
-      'horizontalPadding': [
-        { property: 'padding-left' },
-        { property: 'padding-right' }
-      ],
-
-      'display': {},
-      'flexDirection': {},
-      'justifyContent': {},
-      'alignItems': {},
-      'gap': {},
-
-      'backgroundColor': {},
-      'borderRadius': {},
-
-      'borderColor': {},
-      'borderStyle': {},
-      'borderWidth': {},
-
-      'boxShadow': {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
+	createStyleMixin({
+		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+		mappings: {
+			height: {},
+			width: {},
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			display: {},
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+
+			backgroundColor: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName, Container);
+customElements.define(componentName$2, Container);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -524,21 +943,25 @@ const transformTheme = (theme, path, getTransformation) => {
 	}, {});
 };
 
-const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
+const stringifyArray = (strArr) =>
+	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
 const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
 	}));
 
 const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+	transformTheme(theme, [], (path) =>
+		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+	);
 
 const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
-)}
+		(acc, entry) => (acc += `${entry.join(':')};\n`),
+		''
+	)}
 }
 `;
 
@@ -551,16 +974,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
+			if (section.startsWith('_'))
+				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
 
 			const nextSection = restPath[idx + 1];
 
 			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
+				console.error(
+					'theme generator',
+					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+				);
 				return acc;
 			}
 
-			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return (acc += `[${kebabCase(section)}="${restPath
+				.splice(idx + 1, 1)
+				.join('')}"]`);
 		}, '');
 
 		let selector = `${getComponentName(component)}${attrsSelector}`;
@@ -569,12 +998,17 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 			[selector]: {
 				[property]: val
 			}
-		}
+		};
 	});
 
 const componentsThemeToStyle = (componentsTheme, themeName = '') =>
 	Object.entries(componentsThemeToStyleObj(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, vars]) =>
+			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
+				vars
+			)
+				.map(([key, val]) => `${key}: ${val}`)
+				.join(';\n')} \n}\n\n`),
 		''
 	);
 
@@ -583,7 +1017,7 @@ ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
 `;
 
-const useVar = varName => `var(${varName})`;
+const useVar = (varName) => `var(${varName})`;
 
 const createHelperVars = (theme, prefix) => {
 	const res = transformTheme(theme, [], (path, value) => {
@@ -595,17 +1029,20 @@ const createHelperVars = (theme, prefix) => {
 		const theme = set({}, [...modifiedPath, varName], value);
 		const useVars = { [property]: useVar(varName) };
 
-		return { theme, useVars, vars }
+		return { theme, useVars, vars };
 	});
 
-	return [res.theme, res.useVars, res.vars]
+	return [res.theme, res.useVars, res.vars];
 };
 
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
 	const isDark = c.isDark();
-	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+	return c
+		.mix(Color(isDark ? 'white' : 'black'), percentage)
+		.saturate(1)
+		.hex();
 };
 
 const genColor = (color) => {
@@ -615,8 +1052,8 @@ const genColor = (color) => {
 		main: mainColor.hex(),
 		dark: color.dark || genDark(mainColor),
 		light: color.light || genLight(mainColor),
-		contrast: color.contrast || genContrast(mainColor),
-	}
+		contrast: color.contrast || genContrast(mainColor)
+	};
 };
 
 const genColors = (colors) => {
@@ -624,38 +1061,39 @@ const genColors = (colors) => {
 		const currentColor = colors[colorName];
 
 		return Object.assign(acc, {
-			[colorName]: genColor(currentColor),
-		})
+			[colorName]: genColor(currentColor)
+		});
 	}, {});
 };
 
 const colors = genColors({
 	surface: {
 		main: 'lightgray',
-		light: '#e1e1e1'
+		light: '#fff',
+		dark: '#000'
 	},
-	primary: "#0082B5",
-	secondary: "#7D14EB",
-	success: "green",
-	error: "red",
+	primary: '#0082B5',
+	secondary: '#7D14EB',
+	success: 'green',
+	error: 'red'
 });
 
 const typography = {
 	h1: {
-		font: ["Courier New", "Arial", "sans-serif"],
-		weight: "700",
-		size: "48px",
+		font: ['Courier New', 'Arial', 'sans-serif'],
+		weight: '700',
+		size: '48px'
 	},
 	h2: {
-		font: ["Courier New", "sans-serif"],
-		weight: "500",
-		size: "38px",
+		font: ['Courier New', 'sans-serif'],
+		weight: '500',
+		size: '38px'
 	},
 	h3: {
-		font: ["Courier New", "sans-serif"],
-		weight: "300",
-		size: "28px",
-	},
+		font: ['Courier New', 'sans-serif'],
+		weight: '300',
+		size: '28px'
+	}
 };
 
 const spacing = {
@@ -663,19 +1101,19 @@ const spacing = {
 	sm: '4px',
 	md: '8px',
 	lg: '16px',
-	xl: '32px',
+	xl: '32px'
 };
 
 const border = {
-	sm: "1px",
-	md: "2px",
-	lg: "3px",
+	sm: '1px',
+	md: '2px',
+	lg: '3px'
 };
 
 const radius = {
-	sm: "5px",
-	md: "25px",
-	lg: "50px",
+	sm: '5px',
+	md: '25px',
+	lg: '50px'
 };
 
 const shadow = {
@@ -683,8 +1121,8 @@ const shadow = {
 	size: {
 		sm: `0 0 10px`,
 		md: `0 0 20px`,
-		lg: `0 0 30px`,
-	},
+		lg: `0 0 30px`
+	}
 };
 
 var globals = {
@@ -693,135 +1131,333 @@ var globals = {
 	spacing,
 	border,
 	radius,
-	shadow,
+	shadow
 };
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$2 = Button.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$6 = Button.cssVarList;
 
 const mode = {
-	primary: {
-		main: globalRefs$2.colors.primary.main,
-		dark: 'darkblue',
-		light: 'lightblue',
-		contrast: 'white'
-	},
-	secondary: globalRefs$2.colors.secondary,
-	success: globalRefs$2.colors.success,
-	error: globalRefs$2.colors.error,
-	surface: globalRefs$2.colors.surface,
+	primary: globalRefs$3.colors.primary,
+	secondary: globalRefs$3.colors.secondary,
+	success: globalRefs$3.colors.success,
+	error: globalRefs$3.colors.error,
+	surface: globalRefs$3.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$4);
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
 
 const button = {
 	...helperTheme$1,
-	[vars$2.borderRadius]: globalRefs$2.radius.lg,
-	[vars$2.cursor]: 'pointer',
 
 	size: {
 		xs: {
-			[vars$2.height]: '10px',
-			[vars$2.fontSize]: '10px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
+			[vars$6.height]: '10px',
+			[vars$6.fontSize]: '10px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
 		},
 		sm: {
-			[vars$2.height]: '20px',
-			[vars$2.fontSize]: '10px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
+			[vars$6.height]: '20px',
+			[vars$6.fontSize]: '10px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
 		},
 		md: {
-			[vars$2.height]: '30px',
-			[vars$2.fontSize]: '14px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
+			[vars$6.height]: '30px',
+			[vars$6.fontSize]: '14px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
 		},
 		lg: {
-			[vars$2.height]: '40px',
-			[vars$2.fontSize]: '20px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
+			[vars$6.height]: '40px',
+			[vars$6.fontSize]: '20px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
 		},
 		xl: {
-			[vars$2.height]: '50px',
-			[vars$2.fontSize]: '25px',
-			[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
-		},
+			[vars$6.height]: '50px',
+			[vars$6.fontSize]: '25px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
+		}
 	},
 
+	[vars$6.borderRadius]: globalRefs$3.radius.lg,
+	[vars$6.cursor]: 'pointer',
+	[vars$6.borderWidth]: '2px',
+	[vars$6.borderStyle]: 'solid',
+	[vars$6.borderColor]: 'transparent',
+
 	_fullWidth: {
-		[vars$2.width]: '100%'
+		[vars$6.width]: '100%'
+	},
+	_loading: {
+		[vars$6.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$2.color]: helperRefs$1.contrast,
-			[vars$2.backgroundColor]: helperRefs$1.main,
+			[vars$6.color]: helperRefs$1.contrast,
+			[vars$6.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$2.backgroundColor]: helperRefs$1.dark,
+				[vars$6.backgroundColor]: helperRefs$1.dark
 			},
+			_loading: {
+				[vars$6.backgroundColor]: helperRefs$1.main
+			}
 		},
 		outline: {
-			[vars$2.color]: helperRefs$1.main,
-			[vars$2.borderColor]: helperRefs$1.main,
-			[vars$2.borderWidth]: '2px',
-			[vars$2.borderStyle]: 'solid',
+			[vars$6.color]: helperRefs$1.main,
+			[vars$6.borderColor]: helperRefs$1.main,
 			_hover: {
-				[vars$2.color]: helperRefs$1.dark,
-				[vars$2.borderColor]: helperRefs$1.dark,
+				[vars$6.color]: helperRefs$1.dark,
+				[vars$6.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$2.color]: 'red',
+					[vars$6.color]: helperRefs$1.error
 				}
 			}
 		},
 		link: {
-			[vars$2.color]: helperRefs$1.main,
+			[vars$6.color]: helperRefs$1.main,
+			[vars$6.padding]: 0,
+			[vars$6.margin]: 0,
+			[vars$6.lineHeight]: helperRefs$1.height,
+			[vars$6.borderRadius]: 0,
+			_hover: {
+				[vars$6.color]: helperRefs$1.main,
+				[vars$6.textDecoration]: 'underline'
+			}
+		}
+	}
+};
+
+const globalRefs$2 = getThemeRefs(globals);
+
+const vars$5 = TextField.cssVarList;
+
+const textField = (vars) => ({
+	size: {
+		xs: {
+			[vars.height]: '14px',
+			[vars.fontSize]: '8px',
+			[vars.padding]: `0 ${globalRefs$2.spacing.xs}`
 		},
+		sm: {
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs$2.spacing.sm}`
+		},
+		md: {
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs$2.spacing.md}`
+		},
+		lg: {
+			[vars.height]: '40px',
+			[vars.fontSize]: '16px',
+			[vars.padding]: `0 ${globalRefs$2.spacing.lg}`
+		},
+		xl: {
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs$2.spacing.xl}`
+		}
+	},
+
+	[vars.color]: globalRefs$2.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$2.colors.surface.contrast,
+
+	[vars.backgroundColor]: globalRefs$2.colors.surface.light,
+
+	[vars.borderWidth]: '1px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
+	[vars.borderWidthReadOnly]: '0',
+	[vars.borderRadius]: globalRefs$2.radius.sm,
+
+	_borderoffset: {
+		[vars.outlineOffset]: '2px'
+	},
+
+	_invalid: {
+		[vars.borderColor]: globalRefs$2.colors.error.main,
+		[vars.color]: globalRefs$2.colors.error.main
+	},
+
+	_disabled: {
+		[vars.color]: globalRefs$2.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$2.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$2.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_focused: {
+		[vars.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
+	},
+
+	_bordered: {
+		[vars.borderColor]: globalRefs$2.colors.surface.main
 	}
+});
+
+var textField$1 = textField(vars$5);
+
+const vars$4 = PasswordField.cssVarList;
+
+const passwordField = {
+	...textField(vars$4),
+	[vars$4.revealCursor]: 'pointer'
+};
+
+const numberField = {
+	...textField(NumberField.cssVarList)
+};
+
+const emailField = {
+	...textField(EmailField.cssVarList)
 };
 
 const globalRefs$1 = getThemeRefs(globals);
+const vars$3 = TextArea.cssVarList;
+
+const textArea = {
+	[vars$3.color]: globalRefs$1.colors.primary.main,
+	[vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
+	[vars$3.resize]: 'vertical',
+
+	[vars$3.borderRadius]: globalRefs$1.radius.sm,
+	[vars$3.borderWidth]: '1px',
+	[vars$3.borderStyle]: 'solid',
+	[vars$3.borderColor]: 'transparent',
+
+	_borderOffset: {
+		[vars$3.outlineOffset]: '2px'
+	},
+
+	_bordered: {
+		[vars$3.borderColor]: globalRefs$1.colors.surface.main
+	},
 
-const vars$1 = TextField.cssVarList;
-
-const textField = {
-  [vars$1.borderRadius]: globalRefs$1.radius.lg,
-  [vars$1.color]: globalRefs$1.colors.surface.contrast,
-  [vars$1.backgroundColor]: globalRefs$1.colors.surface.light,
-  [vars$1.borderWidth]: globalRefs$1.border.small,
-  [vars$1.borderStyle]: 'solid',
-  [vars$1.borderColor]: globalRefs$1.colors.surface.dark,
-  [vars$1.labelColor]: globalRefs$1.colors.surface.contrast,
-  [vars$1.placeholderColor]: globalRefs$1.colors.surface.dark,
-  _invalid: {
-    [vars$1.backgroundColor]: globalRefs$1.colors.error.light,
-    [vars$1.borderColor]: globalRefs$1.colors.error.dark,
-  },
-
-  size: {
-    sm: {
-      [vars$1.height]: '20px',
-      [vars$1.fontSize]: '10px',
-      [vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
-    },
-    md: {
-      [vars$1.height]: '30px',
-      [vars$1.fontSize]: '14px',
-      [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
-    },
-    lg: {
-      [vars$1.height]: '40px',
-      [vars$1.fontSize]: '20px',
-      [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
-    },
-    xl: {
-      [vars$1.height]: '50px',
-      [vars$1.fontSize]: '25px',
-      [vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
-    },
-  },
-
-  _fullWidth: {
-    [vars$1.width]: '100%'
-  },
+	_focused: {
+		[vars$3.focusInputCursor]: 'text',
+		[vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
+	},
+
+	_fullWidth: {
+		[vars$3.width]: '100%'
+	},
+
+	_disabled: {
+		[vars$3.cursor]: 'not-allowed'
+	},
+
+	_invalid: {
+		[vars$3.outline]: `2px solid ${globalRefs$1.colors.error.main}`
+	}
+};
+
+const componentName$1 = getComponentName('checkbox');
+
+const Checkbox = compose(
+	createStyleMixin({
+		mappings: {
+			width: {},
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: ``,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$1
+	})
+);
+
+const vars$2 = Checkbox.cssVarList;
+
+const checkbox = {
+	[vars$2.cursor]: 'pointer'
+};
+
+const componentName = getComponentName('switch-toggle');
+
+let overrides = ``;
+
+const SwitchToggle = compose(
+	createStyleMixin({
+		mappings: {
+			width: {},
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	:host {
+		--margin: 7px;
+		--width: var(${SwitchToggle.cssVarList.width});
+		--height: calc(var(--width) / 2);
+		--radius: var(--height);
+		--knobSize: calc(var(--height) - 5px);
+		--bgColor: #fff;
+		--knobBgColor: #000;
+	}
+	vaadin-checkbox>label {
+		cursor: pointer;
+		border: 1px solid;
+		text-indent: -99999px;
+		display: block;
+		position: relative;			
+		width: var(--width);
+		height: var(--height);
+		background: var(--bgColor);
+		border-radius: var(--radius);
+	}
+	vaadin-checkbox>label::after {
+		content: '';
+		position: absolute;
+		transition: 0.3s;
+		top: var(--margin);
+		left: var(--margin);
+		width: var(--knobSize);
+		height: var(--knobSize);
+		background: var(--knobBgColor);
+		border-radius: var(--knobSize);
+	}
+	vaadin-checkbox::part(checkbox) {
+		height: 0;
+		width: 0;
+		visibility: hidden;
+	}
+	vaadin-checkbox[checked]>label::after {
+		transform: translateX(-100%);
+		left: calc(100% - var(--margin));
+	}
+	vaadin-checkbox[active]>label::after {
+		width: calc(var(--knobSize) + 15px);
+	}
+`;
+
+const vars$1 = SwitchToggle.cssVarList;
+
+const swtichToggle = {
+	[vars$1.width]: '70px',
+	[vars$1.cursor]: [{}, { selector: '> label' }]
 };
 
 const globalRefs = getThemeRefs(globals);
@@ -831,30 +1467,33 @@ const vars = Container.cssVarList;
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
 	center: { verticalAlignment: 'center' },
-	end: { verticalAlignment: 'end' },
+	end: { verticalAlignment: 'end' }
 };
 
 const horizontalAlignment = {
 	start: { horizontalAlignment: 'start' },
 	center: { horizontalAlignment: 'center' },
-	end: { horizontalAlignment: 'end' },
+	end: { horizontalAlignment: 'end' }
 };
 
-const [helperTheme, helperVars, helperRefs] =
-	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+	{ verticalAlignment, horizontalAlignment },
+	'container'
+);
 
 const container = {
 	...helperTheme,
 	[vars.display]: 'flex',
+	[vars.backgroundColor]: globalRefs.colors.surface.main,
 	verticalPadding: {
 		sm: { [vars.verticalPadding]: '5px' },
 		md: { [vars.verticalPadding]: '10px' },
-		lg: { [vars.verticalPadding]: '20px' },
+		lg: { [vars.verticalPadding]: '20px' }
 	},
 	horizontalPadding: {
 		sm: { [vars.horizontalPadding]: '5px' },
 		md: { [vars.horizontalPadding]: '10px' },
-		lg: { [vars.horizontalPadding]: '20px' },
+		lg: { [vars.horizontalPadding]: '20px' }
 	},
 	direction: {
 		row: {
@@ -862,7 +1501,7 @@ const container = {
 			[vars.alignItems]: helperRefs.verticalAlignment,
 			[vars.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' }
 			}
 		},
 
@@ -871,9 +1510,11 @@ const container = {
 			[vars.alignItems]: helperRefs.horizontalAlignment,
 			[vars.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+				spaceBetween: {
+					[helperVars.verticalAlignment]: 'space-between'
+				}
 			}
-		},
+		}
 	},
 
 	spaceBetween: {
@@ -889,34 +1530,40 @@ const container = {
 	},
 
 	shadow: {
-		sm: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}` 
-		},		
-		md: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}` 
-		},		
-		lg: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}` 
+		sm: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
 		},
+		md: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
+		},
+		lg: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
+		}
 	},
 
 	borderRadius: {
-		sm: { 
+		sm: {
 			[vars.borderRadius]: globalRefs.radius.sm
 		},
-		md: { 
+		md: {
 			[vars.borderRadius]: globalRefs.radius.md
 		},
-		lg: { 
+		lg: {
 			[vars.borderRadius]: globalRefs.radius.lg
-		},
+		}
 	}
 };
 
 var components = {
-    button,
-    textField,
-    container
+	button,
+	textField: textField$1,
+	passwordField,
+	numberField,
+	emailField,
+	textArea,
+	checkbox,
+	switchToggle: swtichToggle,
+	container
 };
 
 var index = { globals, components };