@descope/web-components-ui 1.0.82 → 1.0.84

package/dist/index.esm.js

@@ -1051,7 +1051,7 @@ const iconStyles = `
 	}
 `;
 
-const { label: label$4, host: host$8 } = {
+const { label: label$5, host: host$9 } = {
 	label: { selector: '::part(label)' },
 	host: { selector: () => ':host' }
 };
@@ -1061,16 +1061,16 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: label$4,
+			color: label$5,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: host$8,
+			width: host$9,
 			cursor: {},
-			padding: label$4,
-			textDecoration: label$4
+			padding: label$5,
+			textDecoration: label$5
 		}
 	}),
 	draggableMixin,
@@ -1129,7 +1129,7 @@ const createBaseInputClass = (...args) => compose(
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
-const componentName$n = getComponentName('checkbox-internal');
+const componentName$n = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = [
 	'disabled',
@@ -1140,7 +1140,7 @@ const forwardAttributes$1 = [
 
 const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
 
-class CheckboxInternal extends BaseInputClass$3 {
+class BooleanInputInternal extends BaseInputClass$3 {
 	constructor() {
 		super();
 		this.innerHTML = `
@@ -1177,7 +1177,10 @@ class CheckboxInternal extends BaseInputClass$3 {
 		super.init?.();
 
 		forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
-		syncAttrs(this, this.checkbox, { includeAttrs: ['checked', 'focused', 'focus-ring'] });
+		syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
+
+		// we need it in order to set the focus ring and trigger validation on descope-checkbox
+		this.handleFocusEventsDispatching([this.checkbox]);
 	}
 
 	getValidity() {
@@ -1188,52 +1191,112 @@ class CheckboxInternal extends BaseInputClass$3 {
 	};
 }
 
-const componentName$m = getComponentName('checkbox');
+const booleanFieldMixin = (superclass) =>
+    class BooleanFieldMixinClass extends superclass {
+        constructor() {
+            super();
+        }
 
-const customMixin$4 = (superclass) =>
-	class CheckboxMixinClass extends superclass {
-		constructor() {
-			super();
-		}
+        init() {
+            super.init?.();
 
-		init() {
-			super.init?.();
-
-			const template = document.createElement('template');
-			template.innerHTML = `
+            const template = document.createElement('template');
+            template.innerHTML = `
 				<${componentName$n} 
 					tabindex="-1"
 					slot="input"
 				></${componentName$n}>
 			`;
 
-			this.baseElement.appendChild(template.content.cloneNode(true));
-			this.inputElement = this.shadowRoot.querySelector(componentName$n);
-			this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+            this.baseElement.appendChild(template.content.cloneNode(true));
+            this.inputElement = this.shadowRoot.querySelector(componentName$n);
+            this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+            forwardAttrs(this, this.inputElement, {
+                includeAttrs: [
+                    'required',
+                    'full-width',
+                    'size',
+                    'label',
+                    'invalid',
+                ]
+            });
+
+            forwardProps(this.inputElement, this, ['checked']);
+            syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+        }
+    };
 
-			forwardAttrs(this, this.inputElement, {
-				includeAttrs: [
-					'required',
-					'full-width',
-					'size',
-					'label',
-					'invalid',
-				]
-			});
+var commonStyles = `
+:host {
+	--vaadin-field-default-width: auto;
+	display: inline-flex;
+}
+.wrapper {
+	display: flex;
+}
 
-			forwardProps(this.inputElement, this, ['checked']);
-			syncAttrs(this, this.inputElement, { includeAttrs: ['checked', 'focused', 'focus-ring'] });
-		}
-	};
+vaadin-text-field {
+	position: relative;
+	padding: 0;
+	display: inline-flex;
+	align-items: flex-start;
+}
+vaadin-text-field::before {
+	height: 0;
+	margin: 0;
+}
+vaadin-text-field::part(label) {
+    position: absolute;
+    top: 0;
+}
+vaadin-text-field::part(input-field) {
+	padding: 0;
+	background: none;
+	min-height: 0;
+}
+vaadin-text-field::part(input-field)::after {
+    background: none;
+}
+vaadin-text-field[focus-ring]::part(input-field) {
+	box-shadow: none;
+}
+vaadin-text-field[required]::part(required-indicator)::after {
+	content: "*";
+}
+
+vaadin-checkbox [slot="label"] {
+    align-self: flex-start;
+    opacity: 0;
+    padding: 0;
+}
+[required] vaadin-checkbox [slot="label"] {
+	padding-right: 1em;
+}
+vaadin-checkbox::part(checkbox) {
+	margin: 0;
+}
+vaadin-checkbox[focus-ring]::part(checkbox) {
+	box-shadow: none;
+}
+
+descope-boolean-field-internal {
+	-webkit-mask-image: none;
+	min-height: 0;
+	padding: 0;
+}
+`;
+
+const componentName$m = getComponentName('checkbox');
 
 const {
-	host: host$7,
-	component,
+	host: host$8,
+	component: component$1,
 	checkboxElement,
 	checkboxSurface,
-	checkboxHiddenLabel,
-	label: label$3,
-	requiredIndicator: requiredIndicator$3
+	checkboxHiddenLabel: checkboxHiddenLabel$1,
+	label: label$4,
+	requiredIndicator: requiredIndicator$4
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
@@ -1247,15 +1310,15 @@ const {
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$7,
-			cursor: component,
+			width: host$8,
+			cursor: component$1,
 
 			// Checkbox
 			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
 			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
 			checkboxWidth: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$3, property: 'margin-left' }
+				{ ...label$4, property: 'margin-left' }
 			],
 			checkboxHeight: { ...checkboxElement, property: 'height' },
 
@@ -1265,13 +1328,121 @@ const Checkbox = compose(
 			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
 			// Checkmark
-			checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
+			checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component$1, property: 'font-size' }],
 			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
 
 			// Label
 			labelFontSize: [
-				{ ...label$3, property: 'font-size' },
-				{ ...checkboxHiddenLabel, property: 'font-size' }
+				{ ...label$4, property: 'font-size' },
+				{ ...checkboxHiddenLabel$1, property: 'font-size' }
+			],
+			labelLineHeight: [
+				{ ...label$4, property: 'line-height' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' }
+			],
+			labelFontWeight: [
+				{ ...label$4, property: 'font-weight' },
+				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
+			],
+			labelMargin: [
+				{ ...label$4, property: 'left' },
+				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
+			],
+			labelTextColor: [
+				{ ...label$4, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' },
+			],
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	booleanFieldMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: `
+		${commonStyles}
+
+		vaadin-checkbox [slot="label"] {
+			height: 100%;
+			cursor: pointer;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$m
+	})
+);
+
+customElements.define(componentName$n, BooleanInputInternal);
+
+customElements.define(componentName$m, Checkbox);
+
+const componentName$l = getComponentName('switch-toggle');
+
+const {
+	host: host$7,
+	component,
+	checkboxElement: track,
+	checkboxSurface: knob,
+	checkboxHiddenLabel,
+	label: label$3,
+	requiredIndicator: requiredIndicator$3,
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+};
+
+const SwitchToggle = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$7,
+			cursor: [component, checkboxHiddenLabel, track],
+			fontSize: [component, label$3, checkboxHiddenLabel],
+
+			// Track
+			trackBorderWidth: { ...track, property: 'border-width' },
+			trackBorderStyle: { ...track, property: 'border-style' },
+			trackBorderColor: { ...track, property: 'border-color' },
+
+			// Checkbox
+			trackBackgroundColor: { ...track, property: 'background-color' },
+			trackRadius: { ...track, property: 'border-radius' },
+
+			trackWidth: [
+				{ ...track, property: 'width' },
+			],
+			trackHeight: [
+				{ ...knob, property: 'font-size' },
+				{ ...track, property: 'height' }
+			],
+			switchOutlineWidth: { ...track, property: 'outline-width' },
+			switchOutlineOffset: { ...track, property: 'outline-offset' },
+			switchOutlineColor: { ...track, property: 'outline-color' },
+			switchOutlineStyle: { ...track, property: 'outline-style' },
+
+			// Knob
+			knobSize: [
+				{ ...knob, property: 'width' },
+				{ ...knob, property: 'height' },
+			],
+			knobTextColor: { ...knob, property: 'color' },
+			knobRadius: { ...knob, property: 'border-radius' },
+			knobTransition: { ...knob, property: 'transition' },
+			knobColor: { ...knob, property: 'background-color' },
+			knobTopOffset: { ...knob, property: 'top' },
+			knobPosition: { ...knob, property: 'left' },
+
+			// Label
+			labelMargin: [
+				{ ...label$3, property: 'padding-left' },
+				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
 			labelLineHeight: [
 				{ ...label$3, property: 'line-height' },
@@ -1281,10 +1452,6 @@ const Checkbox = compose(
 				{ ...label$3, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
-			labelMargin: [
-				{ ...label$3, property: 'left' },
-				{ ...checkboxHiddenLabel, property: 'padding-left' }
-			],
 			labelTextColor: [
 				{ ...label$3, property: 'color' },
 				{ ...requiredIndicator$3, property: 'color' },
@@ -1294,86 +1461,42 @@ const Checkbox = compose(
 	draggableMixin,
 	proxyInputMixin,
 	componentNameValidationMixin,
-	customMixin$4
+	booleanFieldMixin
 )(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
-		style: `
-		:host {
-			--vaadin-field-default-width: auto;
-			display: inline-flex;
-		}
-		.wrapper {
-			display: flex;
-		}
+		style: () => `
+		${commonStyles}
 
-		vaadin-text-field {
-			position: relative;
-			padding: 0;
-			display: inline-flex;
-			align-items: flex-start;
-		}
-		vaadin-text-field[focus-ring]::part(input-field) {
-			box-shadow: none;
-		}
-		vaadin-text-field::before {
-			height: auto;
-			margin: 0;
-		}
-		vaadin-text-field::part(input-field) {
-			padding: 0;
-			background: none;
-			min-height: 0;
-		}
-		vaadin-text-field::part(input-field)::after {
-			background: none;
-		}		
 		vaadin-text-field::part(label) {
-			position: absolute;
-			top: 0;
-		}		
-		vaadin-text-field[required]::part(required-indicator)::after {
-			content: "*";
+			left: calc(var(${SwitchToggle.cssVarList.trackWidth}) + var(${SwitchToggle.cssVarList.trackBorderWidth}) * 2);
 		}
 
-		vaadin-checkbox [slot="label"] {
-			opacity: 0;
-			height: 100%;
-			align-self: flex-start;
-			padding: 0;
-			cursor: pointer;
-		}
-		[required] vaadin-checkbox [slot="label"] {
-			padding-right: 1em;
+		vaadin-checkbox[active]::part(checkbox) {
+			transform: none;
 		}
-		vaadin-checkbox::part(checkbox) {
-			margin: 0;
-		}
-		vaadin-checkbox[focus-ring]::part(checkbox) {
-			box-shadow: none;
+		vaadin-checkbox[checked]::part(checkbox) {
+			background: none;
 		}
-
-		descope-checkbox-internal {
-			-webkit-mask-image: none;
-			min-height: 0;
-			padding: 0;
+		vaadin-checkbox::part(checkbox)::after {
+			position: absolute;
+			opacity: 1;
+			content: '';
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$m
+		componentName: componentName$l
 	})
 );
 
-customElements.define(componentName$n, CheckboxInternal);
+customElements.define(componentName$l, SwitchToggle);
 
-customElements.define(componentName$m, Checkbox);
+const componentName$k = getComponentName('loader-linear');
 
-const componentName$l = getComponentName('loader-linear');
-
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$l;
+		return componentName$k;
 	}
 	constructor() {
 		super();
@@ -1431,11 +1554,11 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$l, LoaderLinear);
+customElements.define(componentName$k, LoaderLinear);
 
-const componentName$k = getComponentName('loader-radial');
+const componentName$j = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1481,11 +1604,11 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$k, LoaderRadial);
+customElements.define(componentName$j, LoaderRadial);
 
-const componentName$j = getComponentName('container');
+const componentName$i = getComponentName('container');
 
-class RawContainer extends createBaseClass({componentName: componentName$j, baseSelector: ':host > slot'}) {
+class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1526,6 +1649,7 @@ const Container = compose(
 			justifyContent: {},
 			alignItems: {},
 			gap: {},
+			flexWrap: {},
 
 			backgroundColor: {},
 			borderRadius: {},
@@ -1541,26 +1665,26 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$j, Container);
+customElements.define(componentName$i, Container);
 
-const componentName$i = getComponentName('date-picker');
+const componentName$h = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$i,
+		componentName: componentName$h,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$i, DatePicker);
+customElements.define(componentName$h, DatePicker);
 
-const componentName$h = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
+const componentName$g = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1638,9 +1762,9 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$g = getComponentName('text');
+const componentName$f = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1682,9 +1806,9 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$g, Text);
+customElements.define(componentName$f, Text);
 
-customElements.define(componentName$h, Divider);
+customElements.define(componentName$g, Divider);
 
 const selectors$2 = {
 	label: '::part(label)',
@@ -1729,9 +1853,9 @@ var textFieldMappings = {
 	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
 };
 
-const componentName$f = getComponentName('email-field');
+const componentName$e = getComponentName('email-field');
 
-let overrides$6 = ``;
+let overrides$5 = ``;
 
 const EmailField = compose(
 	createStyleMixin({
@@ -1746,13 +1870,13 @@ const EmailField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$6,
+		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$e
 	})
 );
 
-overrides$6 = `
+overrides$5 = `
 	:host {
 		display: inline-block;
 	}
@@ -1792,10 +1916,10 @@ overrides$6 = `
 	}
 `;
 
-customElements.define(componentName$f, EmailField);
+customElements.define(componentName$e, EmailField);
 
-const componentName$e = getComponentName('link');
-class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
+const componentName$d = getComponentName('link');
+class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 		document.createElement('template');
@@ -1856,14 +1980,14 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$e, Link);
+customElements.define(componentName$d, Link);
 
-const componentName$d = getComponentName('logo');
+const componentName$c = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
-class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
+class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1901,11 +2025,11 @@ style = `
 }
 `;
 
-customElements.define(componentName$d, Logo);
+customElements.define(componentName$c, Logo);
 
-const componentName$c = getComponentName('number-field');
+const componentName$b = getComponentName('number-field');
 
-let overrides$5 = ``;
+let overrides$4 = ``;
 
 const NumberField = compose(
 	createStyleMixin({
@@ -1920,13 +2044,13 @@ const NumberField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$5,
+		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$c
+		componentName: componentName$b
 	})
 );
 
-overrides$5 = `
+overrides$4 = `
 	:host {
 		display: inline-block;
 	}
@@ -1966,7 +2090,7 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$c, NumberField);
+customElements.define(componentName$b, NumberField);
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -1982,7 +2106,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$b = getComponentName('passcode-internal');
+const componentName$a = getComponentName('passcode-internal');
 
 const observedAttributes$1 = [
 	'digits'
@@ -1996,7 +2120,7 @@ const forwardAttributes = [
 	'readonly'
 ];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$2 {
 	static get observedAttributes() {
@@ -2004,7 +2128,7 @@ class PasscodeInternal extends BaseInputClass$2 {
 	}
 
 	static get componentName() {
-		return componentName$b;
+		return componentName$a;
 	}
 
 	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -2170,9 +2294,9 @@ class PasscodeInternal extends BaseInputClass$2 {
 	}
 }
 
-const componentName$a = getComponentName('text-field');
+const componentName$9 = getComponentName('text-field');
 
-let overrides$4 = ``;
+let overrides$3 = ``;
 
 const observedAttrs = ['type'];
 
@@ -2208,13 +2332,13 @@ const TextField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$4,
+		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$9
 	})
 );
 
-overrides$4 = `
+overrides$3 = `
 	:host {
 		display: inline-block;
 		--vaadin-field-default-width: auto;
@@ -2267,7 +2391,7 @@ overrides$4 = `
 	}
 `;
 
-const componentName$9 = getComponentName('passcode');
+const componentName$8 = getComponentName('passcode');
 
 const customMixin$2 = (superclass) =>
 	class PasscodeClass extends superclass {
@@ -2284,17 +2408,17 @@ const customMixin$2 = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$b} 
+			<${componentName$a} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$b}>
+			></${componentName$a}>
 			`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$b);
+			this.inputElement = this.shadowRoot.querySelector(componentName$a);
 
 			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
 		}
@@ -2400,19 +2524,19 @@ const Passcode = compose(
 		}
     `,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$8
 	})
 );
 
-customElements.define(componentName$a, TextField);
+customElements.define(componentName$9, TextField);
 
-customElements.define(componentName$b, PasscodeInternal);
+customElements.define(componentName$a, PasscodeInternal);
 
-customElements.define(componentName$9, Passcode);
+customElements.define(componentName$8, Passcode);
 
-const componentName$8 = getComponentName('password-field');
+const componentName$7 = getComponentName('password-field');
 
-let overrides$3 = ``;
+let overrides$2 = ``;
 
 const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
 	host: () => ':host',
@@ -2454,13 +2578,13 @@ const PasswordField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: () => overrides$3,
+		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$7
 	})
 );
 
-overrides$3 = `
+overrides$2 = `
 	:host {
 		display: inline-block;
 	}
@@ -2481,87 +2605,7 @@ overrides$3 = `
 	}
 `;
 
-customElements.define(componentName$8, PasswordField);
-
-const componentName$7 = getComponentName('switch-toggle');
-
-let overrides$2 = ``;
-
-const SwitchToggle = compose(
-	createStyleMixin({
-		mappings: {
-			width: { selector: () => ':host' },
-			cursor: [{}, { selector: '> label' }]
-		}
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-checkbox',
-		style: () => overrides$2,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
-	})
-);
-
-overrides$2 = `
-	:host {
-		display: inline-block;
-	}
-	
-	: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 : {
-		width: 100%;
-	}
-	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;
-		margin: 0;
-	}
-	vaadin-checkbox[checked]>label::after {
-		transform: translateX(-100%);
-		left: calc(100% - var(--margin));
-	}
-	vaadin-checkbox[active]>label::after {
-		width: calc(var(--knobSize) + 15px);
-	}
-`;
-
-customElements.define(componentName$7, SwitchToggle);
+customElements.define(componentName$7, PasswordField);
 
 const componentName$6 = getComponentName('text-area');
 
@@ -4996,15 +5040,15 @@ var globals = {
 	fonts
 };
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs(globals);
 const vars$g = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$d.colors.primary,
-	secondary: globalRefs$d.colors.secondary,
-	success: globalRefs$d.colors.success,
-	error: globalRefs$d.colors.error,
-	surface: globalRefs$d.colors.surface
+	primary: globalRefs$e.colors.primary,
+	secondary: globalRefs$e.colors.secondary,
+	success: globalRefs$e.colors.success,
+	error: globalRefs$e.colors.error,
+	surface: globalRefs$e.colors.surface
 };
 
 const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
@@ -5016,31 +5060,31 @@ const button = {
 		xs: {
 			[vars$g.height]: '10px',
 			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$d.spacing.xs}`
+			[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
 		},
 		sm: {
 			[vars$g.height]: '20px',
 			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$d.spacing.sm}`
+			[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
 		},
 		md: {
 			[vars$g.height]: '30px',
 			[vars$g.fontSize]: '14px',
-			[vars$g.padding]: `0 ${globalRefs$d.spacing.md}`
+			[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
 		},
 		lg: {
 			[vars$g.height]: '40px',
 			[vars$g.fontSize]: '20px',
-			[vars$g.padding]: `0 ${globalRefs$d.spacing.lg}`
+			[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
 		},
 		xl: {
 			[vars$g.height]: '50px',
 			[vars$g.fontSize]: '25px',
-			[vars$g.padding]: `0 ${globalRefs$d.spacing.xl}`
+			[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
 		}
 	},
 
-	[vars$g.borderRadius]: globalRefs$d.radius.lg,
+	[vars$g.borderRadius]: globalRefs$e.radius.lg,
 	[vars$g.cursor]: 'pointer',
 	[vars$g.borderWidth]: '2px',
 	[vars$g.borderStyle]: 'solid',
@@ -5086,7 +5130,7 @@ const button = {
 	}
 };
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 
 const vars$f = TextField.cssVarList;
 
@@ -5095,44 +5139,44 @@ const textField = (vars) => ({
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$c.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$d.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$c.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$d.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$c.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$d.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$c.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$d.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$c.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$d.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$c.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$c.colors.surface.main,
+	[vars.color]: globalRefs$d.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$d.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$c.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$d.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$c.radius.sm,
+	[vars.borderRadius]: globalRefs$d.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$c.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$c.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$c.colors.surface.main
+		[vars.color]: globalRefs$d.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$d.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$d.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5142,24 +5186,24 @@ const textField = (vars) => ({
 	_focused: {
 		[vars.outlineWidth]: '2px',
 		[vars.outlineStyle]: 'solid',
-		[vars.outlineColor]: globalRefs$c.colors.surface.main
+		[vars.outlineColor]: globalRefs$d.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$c.colors.surface.main
+		[vars.borderColor]: globalRefs$d.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$c.colors.error.main,
-		[vars.color]: globalRefs$c.colors.error.main,
-		[vars.outlineColor]: globalRefs$c.colors.error.light,
-		[vars.placeholderColor]: globalRefs$c.colors.error.light
+		[vars.borderColor]: globalRefs$d.colors.error.main,
+		[vars.color]: globalRefs$d.colors.error.main,
+		[vars.outlineColor]: globalRefs$d.colors.error.light,
+		[vars.placeholderColor]: globalRefs$d.colors.error.light
 	}
 });
 
 var textField$1 = textField(vars$f);
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
 const vars$e = PasswordField.cssVarList;
 
@@ -5167,11 +5211,11 @@ const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$b.radius.sm,
+	[vars$e.wrapperBorderRadius]: globalRefs$c.radius.sm,
 
-	[vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
-	[vars$e.inputTextColor]: globalRefs$b.colors.surface.contrast,
-	[vars$e.placeholderTextColor]: globalRefs$b.colors.surface.main,
+	[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
 
 	[vars$e.pointerCursor]: 'pointer',
 
@@ -5202,7 +5246,7 @@ const passwordField = {
 
 	_bordered: {
 		[vars$e.padding]: `0 0.5em`,
-		[vars$e.wrapperBorderColor]: globalRefs$b.colors.surface.main
+		[vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5210,10 +5254,10 @@ const passwordField = {
 	},
 
 	_invalid: {
-		[vars$e.labelTextColor]: globalRefs$b.colors.error.main,
-		[vars$e.inputTextColor]: globalRefs$b.colors.error.main,
-		[vars$e.placeholderTextColor]: globalRefs$b.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$b.colors.error.main
+		[vars$e.labelTextColor]: globalRefs$c.colors.error.main,
+		[vars$e.inputTextColor]: globalRefs$c.colors.error.main,
+		[vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
+		[vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main
 	},
 };
 
@@ -5225,16 +5269,16 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
 	[vars$d.width]: '100%',
-	[vars$d.color]: globalRefs$a.colors.primary.main,
-	[vars$d.backgroundColor]: globalRefs$a.colors.surface.light,
+	[vars$d.color]: globalRefs$b.colors.primary.main,
+	[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
-	[vars$d.borderRadius]: globalRefs$a.radius.sm,
+	[vars$d.borderRadius]: globalRefs$b.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
 	[vars$d.borderColor]: 'transparent',
@@ -5243,11 +5287,11 @@ const textArea = {
 
 
 	_bordered: {
-		[vars$d.borderColor]: globalRefs$a.colors.surface.main
+		[vars$d.borderColor]: globalRefs$b.colors.surface.main
 	},
 
 	_focused: {
-		[vars$d.outlineColor]: globalRefs$a.colors.surface.main
+		[vars$d.outlineColor]: globalRefs$b.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5259,55 +5303,52 @@ const textArea = {
 	},
 
 	_invalid: {
-		[vars$d.outlineColor]: globalRefs$a.colors.error.main
+		[vars$d.outlineColor]: globalRefs$b.colors.error.main
 	}
 };
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
+	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
 
 	[vars$c.labelFontSize]: '12px',
 	[vars$c.labelFontWeight]: '400',
-	[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
+	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
 	[vars$c.cursor]: 'pointer',
 
 	[vars$c.checkboxWidth]: 'calc(1em - 2px)',
 	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
 	[vars$c.labelMargin]: 'calc(1em + 5px)',
 
+	[vars$c.checkboxRadius]: globalRefs$a.radius.sm,
+
 	size: {
 		xs: {
 			[vars$c.labelFontSize]: '12px',
 			[vars$c.labelLineHeight]: '1.1em',
 			[vars$c.checkmarkSize]: '18px',
-			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
 		},
 		sm: {
 			[vars$c.labelFontSize]: '14px',
 			[vars$c.labelLineHeight]: '1.2em',
 			[vars$c.checkmarkSize]: '22px',
-			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
 		},
 		md: {
 			[vars$c.labelFontSize]: '16px',
 			[vars$c.labelLineHeight]: '1.35em',
 			[vars$c.checkmarkSize]: '26px',
-			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
 		},
 		lg: {
 			[vars$c.labelFontSize]: '20px',
 			[vars$c.labelLineHeight]: '1.5em',
 			[vars$c.checkmarkSize]: '34px',
-			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
 		},
 		xl: {
 			[vars$c.labelFontSize]: '20px',
 			[vars$c.labelLineHeight]: '1.75em',
 			[vars$c.checkmarkSize]: '38px',
-			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
 		}
 	},
 
@@ -5316,33 +5357,98 @@ const checkbox = {
 	},
 
 	_checked: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.primary.main,
-		[vars$c.checkmarkTextColor]: globalRefs$9.colors.primary.contrast,
+		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
+		[vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
+		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
 	},
 
 	_focusRing: {
 		[vars$c.checkboxOutlineWidth]: '2px',
 		[vars$c.checkboxOutlineOffset]: '1px',
-		[vars$c.checkboxOutlineColor]: globalRefs$9.colors.primary.main,
+		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
 		[vars$c.checkboxOutlineStyle]: 'solid'
 	},
 
 	_invalid: {
-		[vars$c.checkboxOutlineColor]: globalRefs$9.colors.error.main,
-		[vars$c.labelTextColor]: globalRefs$9.colors.error.main
+		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
+		[vars$c.labelTextColor]: globalRefs$a.colors.error.main
 	},
 
 };
 
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
+const trackBorderWidth = '2px';
+
+const globalRefs$9 = getThemeRefs(globals);
 const vars$b = SwitchToggle.cssVarList;
 
 const switchToggle = {
-    [vars$b.width]: '70px',
-    [vars$b.cursor]: [{}, { selector: '> label' }]
+    size: {
+        xs: { [vars$b.fontSize]: '8px' },
+        sm: { [vars$b.fontSize]: '12px' },
+        md: { [vars$b.fontSize]: '16px' },
+        lg: { [vars$b.fontSize]: '20px' },
+        xl: { [vars$b.fontSize]: '24px' }
+    },
+
+    [vars$b.cursor]: 'pointer',
+
+    [vars$b.trackBorderStyle]: 'solid',
+    [vars$b.trackBorderWidth]: trackBorderWidth,
+    [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
+
+    [vars$b.trackBackgroundColor]: 'none',
+    [vars$b.trackRadius]: globalRefs$9.radius.md,
+    [vars$b.trackWidth]: '2.5em',
+    [vars$b.trackHeight]: checkboxHeight,
+
+    [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
+    [vars$b.knobRadius]: '50%',
+    [vars$b.knobTopOffset]: '1px',
+    [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.knobPosition]: knobMargin,
+    [vars$b.knobTransition]: '0.3s',
+
+    [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.labelFontWeight]: '400',
+    [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+    [vars$b.labelMargin]: '0.25em',
+
+    _fullWidth: {
+        [vars$b.width]: '100%',
+    },
+
+    _checked: {
+        [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
+        [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
+        [vars$b.knobColor]: globalRefs$9.colors.primary.main,
+        [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
+    },
+
+    _disabled: {
+        [vars$b.cursor]: 'not-allowed', // todo: fix cursor
+        [vars$b.knobColor]: globalRefs$9.colors.surface.main,
+        [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
+        [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
+    },
+
+    _focusRing: {
+        [vars$b.switchOutlineWidth]: '2px',
+        [vars$b.switchOutlineOffset]: '1px',
+        [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
+        [vars$b.switchOutlineStyle]: 'solid'
+    },
+
+    _invalid: {
+        [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
+        [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
+        [vars$b.knobColor]: globalRefs$9.colors.error.main,
+        [vars$b.labelTextColor]: globalRefs$9.colors.error.main
+    },
 };
 
 const globalRefs$8 = getThemeRefs(globals);
@@ -5386,6 +5492,7 @@ const container = {
 			[vars$a.flexDirection]: 'row',
 			[vars$a.alignItems]: helperRefs$1.verticalAlignment,
 			[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
+			[vars$a.flexWrap]: 'wrap',
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
@@ -5587,7 +5694,7 @@ const vars$6 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$h);
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
 
 
 const divider = {