@descope/web-components-ui 1.0.39 → 1.0.40

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';
@@ -205,13 +209,18 @@ const syncAttrs = (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 +230,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 +262,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,51 +293,52 @@ 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();
 
-      this.#internals = this.attachInternals();
+		#internals;
 
-      // this is needed in order to make sure the form input validation is working
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', 0);
-      }
-    }
-
-    formAssociatedCallback() {
-      this.setValidity?.();
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
+		constructor() {
+			super();
 
-      // 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')
+			this.#internals = this.attachInternals();
+		}
 
-      this.checkValidity = () => input.checkValidity();
-      this.reportValidity = () => input.reportValidity();
-      this.validity = input.validity;
+		formAssociatedCallback() {
+			this.setValidity?.();
+		}
 
-      this.setValidity = () => {
-        this.#internals.setValidity(input.validity, input.validationMessage);
-      };
+		connectedCallback() {
+			super.connectedCallback?.();
 
-      input.oninput = () => {
-        this.value = input.value;
-        this.setValidity();
-      };
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				this.setAttribute('tabindex', 0);
+			}
 
-    }
-  };
+			// 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();
+			};
+		}
+	};
 
 const componentNameValidationMixin = (superclass) =>
   class DraggableMixinClass extends superclass {
@@ -349,79 +364,195 @@ const componentNameValidationMixin = (superclass) =>
 
 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>
@@ -438,29 +569,280 @@ class Combo extends HTMLElement {
   }
 }
 
-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');
+
+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$1 = getComponentName("date-picker");
+const componentName$3 = getComponentName("date-picker");
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$1,
+		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
+    return componentName$2
   }
   constructor() {
     super();
@@ -510,7 +892,7 @@ const Container = compose(
   componentNameValidationMixin,
 )(RawContainer);
 
-customElements.define(componentName, Container);
+customElements.define(componentName$2, Container);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -631,8 +1013,9 @@ const genColors = (colors) => {
 
 const colors = genColors({
 	surface: {
-		main: 'lightgray',
-		light: '#e1e1e1'
+		main: "lightgray",
+		light: "#fff",
+		dark: "#000",
 	},
 	primary: "#0082B5",
 	secondary: "#7D14EB",
@@ -659,11 +1042,11 @@ const typography = {
 };
 
 const spacing = {
-	xs: '2px',
-	sm: '4px',
-	md: '8px',
-	lg: '16px',
-	xl: '32px',
+	xs: "2px",
+	sm: "4px",
+	md: "8px",
+	lg: "16px",
+	xl: "32px",
 };
 
 const border = {
@@ -696,132 +1079,330 @@ var globals = {
 	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}`,
 		},
 	},
 
-	_fullWidth: {
-		[vars$2.width]: '100%'
+	[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$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 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}`
-    },
-  },
+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.inputBorderColor]: globalRefs$1.colors.surface.main
+	},
+
+	_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'
+};
 
-  _fullWidth: {
-    [vars$1.width]: '100%'
-  },
+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 +1412,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 +1446,7 @@ const container = {
 			[vars.alignItems]: helperRefs.verticalAlignment,
 			[vars.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' }
 			}
 		},
 
@@ -871,9 +1455,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 +1475,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 };