@descope/web-components-ui 1.0.97 → 1.0.99

package/dist/index.esm.js

@@ -308,6 +308,10 @@ const createStyleMixin =
 				this.#styleAttributes = Object.keys(mappings).map((key) =>
 					kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
 				);
+
+				this.#createMappingStyle();
+				this.#createComponentTheme();
+				this.#createOverridesStyle();
 			}
 
 			get componentTheme() {
@@ -378,15 +382,8 @@ const createStyleMixin =
 			init() {
 				super.init?.();
 				if (this.shadowRoot.isConnected) {
-
 					this.#addClassName(superclass.componentName);
 
-					// TODO: we should do everything we can on the constructor
-					// when dragging & dropping these styles are created over & over
-					this.#createMappingStyle();
-					this.#createComponentTheme();
-					this.#createOverridesStyle();
-
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
 					observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
 				}
@@ -423,22 +420,24 @@ const draggableMixin = (superclass) =>
 			}
 		}
 
-		get #isDraggable() {
+		get isDraggable() {
 			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
 		}
 
 		init() {
-
 			// because we are delegating the focus from the outer component, 
 			// the D&D is not working well in the page editor
 			// in order to solve it we are making the inner component focusable on mouse down
 			// and removing it on complete
 			this.addEventListener('mousedown', (e) => {
-				if (this.#isDraggable) {
+				if (this.isDraggable) {
+					const prevTabIndex = this.baseElement.getAttribute('tabindex');
 					this.baseElement.setAttribute('tabindex', '-1');
 
 					const onComplete = () => {
-						this.baseElement.removeAttribute('tabindex');
+						prevTabIndex ?
+							this.baseElement.setAttribute('tabindex', prevTabIndex) :
+							this.baseElement.removeAttribute('tabindex');
 
 						e.target.removeEventListener('mouseup', onComplete);
 						e.target.removeEventListener('dragend', onComplete);
@@ -701,7 +700,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   }
 
   #setValidity() {
-    const validity = this.getValidity();
+    const validity = this.isReadOnly ? {} : this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
   }
 
@@ -742,6 +741,10 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
   }
 
+  get isReadOnly() {
+    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+  }
+
   get pattern() {
     return this.getAttribute('pattern')
   }
@@ -879,7 +882,7 @@ const proxyInputMixin = (superclass) =>
 				this.#dispatchChange();
 			});
 
-			this.addEventListener('blur', () => {
+			this.#inputElement.addEventListener('blur', () => {
 				if (!this.checkValidity()) {
 					this.setAttribute('invalid', 'true');
 					this.#handleErrorMessage();
@@ -989,25 +992,6 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
   }
 };
 
-const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
-
-  init() {
-    ['focus', 'blur'].forEach(event => {
-      this.addEventListener(event, (e) => {
-        if (this.isReadOnly) {
-          e.stopImmediatePropagation();
-          e.preventDefault();
-        }
-      }, true);
-    });
-
-    super.init?.();
-  }
-};
-
 const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
   init() {
     this.#blockNativeEvents();
@@ -1110,7 +1094,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$9, label: label$6 } = {
+const { host: host$a, label: label$7 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
 };
@@ -1119,7 +1103,7 @@ const Button = compose(
 	createStyleMixin({
 		mappings: {
 			color: {},
-			textDecoration: label$6,
+			textDecoration: label$7,
 			fontSize: {},
 			cursor: {},
 			backgroundColor: {},
@@ -1127,8 +1111,8 @@ const Button = compose(
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
-			width: host$9,
-			gap: label$6,
+			width: host$a,
+			gap: label$7,
 			verticalPadding: [
 				{ property: 'padding-top' },
 				{ property: 'padding-bottom' },
@@ -1190,7 +1174,6 @@ customElements.define(componentName$o, Button);
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
   changeMixin,
-  readOnlyMixin,
   normalizeBooleanAttributesMixin,
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
@@ -1356,13 +1339,13 @@ descope-boolean-field-internal {
 const componentName$m = getComponentName('checkbox');
 
 const {
-	host: host$8,
+	host: host$9,
 	component: component$1,
 	checkboxElement,
 	checkboxSurface,
 	checkboxHiddenLabel: checkboxHiddenLabel$1,
-	label: label$5,
-	requiredIndicator: requiredIndicator$4
+	label: label$6,
+	requiredIndicator: requiredIndicator$5
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
@@ -1376,7 +1359,7 @@ const {
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$8,
+			width: host$9,
 			cursor: component$1,
 
 			// Checkbox
@@ -1384,7 +1367,7 @@ const Checkbox = compose(
 			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
 			checkboxWidth: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$5, property: 'margin-left' }
+				{ ...label$6, property: 'margin-left' }
 			],
 			checkboxHeight: { ...checkboxElement, property: 'height' },
 
@@ -1399,24 +1382,24 @@ const Checkbox = compose(
 
 			// Label
 			labelFontSize: [
-				{ ...label$5, property: 'font-size' },
+				{ ...label$6, property: 'font-size' },
 				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
 			labelLineHeight: [
-				{ ...label$5, property: 'line-height' },
+				{ ...label$6, property: 'line-height' },
 				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$5, property: 'font-weight' },
+				{ ...label$6, property: 'font-weight' },
 				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
 			],
 			labelMargin: [
-				{ ...label$5, property: 'left' },
+				{ ...label$6, property: 'left' },
 				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
 			],
 			labelTextColor: [
-				{ ...label$5, property: 'color' },
-				{ ...requiredIndicator$4, property: 'color' },
+				{ ...label$6, property: 'color' },
+				{ ...requiredIndicator$5, property: 'color' },
 			],
 		},
 	}),
@@ -1448,13 +1431,13 @@ customElements.define(componentName$m, Checkbox);
 const componentName$l = getComponentName('switch-toggle');
 
 const {
-	host: host$7,
+	host: host$8,
 	component,
 	checkboxElement: track,
 	checkboxSurface: knob,
 	checkboxHiddenLabel,
-	label: label$4,
-	requiredIndicator: requiredIndicator$3,
+	label: label$5,
+	requiredIndicator: requiredIndicator$4,
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
@@ -1468,9 +1451,9 @@ const {
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$7,
+			width: host$8,
 			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label$4, checkboxHiddenLabel],
+			fontSize: [component, label$5, checkboxHiddenLabel],
 
 			// Track
 			trackBorderWidth: { ...track, property: 'border-width' },
@@ -1507,20 +1490,20 @@ const SwitchToggle = compose(
 
 			// Label
 			labelMargin: [
-				{ ...label$4, property: 'padding-left' },
+				{ ...label$5, property: 'padding-left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
 			labelLineHeight: [
-				{ ...label$4, property: 'line-height' },
+				{ ...label$5, property: 'line-height' },
 				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$4, property: 'font-weight' },
+				{ ...label$5, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
 			labelTextColor: [
-				{ ...label$4, property: 'color' },
-				{ ...requiredIndicator$3, property: 'color' },
+				{ ...label$5, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' },
 			],
 		},
 	}),
@@ -1575,7 +1558,7 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
 			}
 			:host {
 				position: relative;
-				display: inline-block
+				display: flex;
 			}
 			div::after {
 				content: '';
@@ -1593,19 +1576,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
 	}
 }
 
-const selectors$4 = {
+const selectors$3 = {
 	root: {},
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$6 } = selectors$4;
+const { root: root$1, after: after$1, host: host$7 } = selectors$3;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
-			width: host$6,
+			width: host$7,
 			height: [root$1, after$1],
 			borderRadius: [root$1, after$1],
 			surfaceColor: [{ property: 'background-color' }],
@@ -1800,7 +1783,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
 	}
 }
 
-const selectors$3 = {
+const selectors$2 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
@@ -1808,7 +1791,7 @@ const selectors$3 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$5 } = selectors$3;
+const { root, before, after, text: text$2, host: host$6 } = selectors$2;
 
 const Divider = compose(
 	createStyleMixin({
@@ -1819,8 +1802,8 @@ const Divider = compose(
 			alignSelf: root,
 			flexDirection: root,
 			textPadding: { ...text$2, property: 'padding' },
-			width: host$5,
-			padding: host$5,
+			width: host$6,
+			padding: host$6,
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...text$2, property: 'width' },
@@ -1880,7 +1863,7 @@ customElements.define(componentName$f, Text);
 
 customElements.define(componentName$g, Divider);
 
-const selectors$2 = {
+const selectors$1 = {
 	label: '::part(label)',
 	inputWrapper: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -1890,37 +1873,41 @@ const selectors$2 = {
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$2.inputWrapper },
-	color: { selector: selectors$2.inputWrapper },
-	width: { selector: selectors$2.host },
+	backgroundColor: { selector: selectors$1.inputWrapper },
+	color: { selector: selectors$1.inputWrapper },
+	width: { selector: selectors$1.host },
 	borderColor: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$2.inputWrapper },
-	boxShadow: { selector: selectors$2.inputWrapper },
+	borderRadius: { selector: selectors$1.inputWrapper },
+	boxShadow: { selector: selectors$1.inputWrapper },
 
 	// we apply font-size also on the host so we can set its width with em
-	fontSize: [{}, { selector: selectors$2.host }],
-	
-	height: { selector: selectors$2.inputWrapper },
-	padding: { selector: selectors$2.inputWrapper },
-	margin: { selector: selectors$2.inputWrapper },
-	caretColor: { selector: selectors$2.input },
-	outlineColor: { selector: selectors$2.inputWrapper },
-	outlineStyle: { selector: selectors$2.inputWrapper },
-	outlineWidth: { selector: selectors$2.inputWrapper },
-	outlineOffset: { selector: selectors$2.inputWrapper },
-	textAlign: {selector: selectors$2.input},
-	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
+	fontSize: [{}, { selector: selectors$1.host }],
+
+	height: { selector: selectors$1.inputWrapper },
+	padding: { selector: selectors$1.inputWrapper },
+	margin: { selector: selectors$1.inputWrapper },
+	caretColor: { selector: selectors$1.input },
+	outlineColor: { selector: selectors$1.inputWrapper },
+	outlineStyle: { selector: selectors$1.inputWrapper },
+	outlineWidth: [
+		{ selector: selectors$1.inputWrapper },
+		// we need to make sure there is enough space for the outline
+		{ property: 'padding' }
+	],
+	outlineOffset: { selector: selectors$1.inputWrapper },
+	textAlign: { selector: selectors$1.input },
+	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
 };
 
 const componentName$e = getComponentName('email-field');
@@ -1952,8 +1939,11 @@ overrides$4 = `
 	}
 	vaadin-email-field {
 		margin: 0;
-		padding: 0;
 		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-email-field::before {
+		height: 0;
 	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
@@ -1978,7 +1968,6 @@ overrides$4 = `
 		cursor: text;
 	}
 	vaadin-email-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${EmailField.cssVarList.color});
 	}
@@ -1993,7 +1982,6 @@ const componentName$d = getComponentName('link');
 class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
 	constructor() {
 		super();
-		document.createElement('template');
 
 		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
@@ -2026,19 +2014,19 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
 	}
 }
 
-const selectors$1 = {
-	host: { selector: () => 'host' },
+const selectors = {
+	host: { selector: () => ':host' },
 	anchor: {},
 	wrapper: {selector: () => ':host > div'},
 	text: { selector: () => Text.componentName }
 };
 
-const { anchor, text: text$1, host: host$4, wrapper } = selectors$1;
+const { anchor, text: text$1, host: host$5, wrapper } = selectors;
 
 const Link = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$4,
+			width: host$5,
 			textAlign: wrapper,
 			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
@@ -2419,6 +2407,7 @@ overrides$2 = `
 		padding: 0;
 		width: 100%;
 		height: 100%;
+		box-sizing: border-box;
 	}
 
 	vaadin-text-field::part(input-field) {
@@ -2454,10 +2443,11 @@ overrides$2 = `
 		content: "*";
 		color: var(${TextField.cssVarList.color});
 	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-text-field::part(input-field)::after {
+		opacity: 0 !important;
 	}
 
+
 	vaadin-text-field::before {
 		height: unset;
 	}
@@ -2499,8 +2489,8 @@ const customMixin$2 = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
-	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
+const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
+	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -2521,13 +2511,16 @@ const Passcode = compose(
 				// ideally, this would be part of the text field
 				{ ...internalWrapper, property: 'padding' }
 			],
-			color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
+			color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
 			padding: { ...digitField, property: textVars$1.padding },
 			margin: { ...digitField, property: textVars$1.margin },
 			textAlign: { ...digitField, property: textVars$1.textAlign },
 			caretColor: { ...digitField, property: textVars$1.caretColor },
 			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedValidDigitFieldBorderColor: { ...focusedValidDigitField, property: textVars$1.borderColor }
+			focusedDigitFieldBorderColor: [
+				{ ...focusedDigitField, property: textVars$1.borderColor },
+				{ ...focusedDigitField, property: textVars$1.outlineColor }
+			]
 		},
 	}),
 	draggableMixin,
@@ -2543,6 +2536,12 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+	:host::after {
+		background-color: transparent;
+	}
+	:host::part(input-field)::after {
+		background-color: transparent;
+	}
 
     descope-passcode-internal {
 		-webkit-mask-image: none;
@@ -2589,7 +2588,6 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 	}
 	vaadin-text-field[readonly]::part(input-field)::after {
@@ -2607,17 +2605,49 @@ customElements.define(componentName$a, PasscodeInternal);
 
 customElements.define(componentName$8, Passcode);
 
+const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
+	get isReadOnly() {
+		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+	}
+
+	init() {
+		// there is an issue in Chrome that input field with type password cannot be D&D
+		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
+		// and return the original type when done
+		this.addEventListener('mousedown', (e) => {
+			if (this.isDraggable & this.isReadOnly) {
+				const inputEle = this.baseElement.querySelector('input');
+
+				const prevType = inputEle.getAttribute('type');
+				inputEle.setAttribute('type', 'text');
+
+				const onComplete = () => {
+					inputEle.setAttribute('type', prevType);
+
+					e.target.removeEventListener('mouseup', onComplete);
+					e.target.removeEventListener('dragend', onComplete);
+				};
+
+				e.target.addEventListener('mouseup', onComplete, { once: true });
+				e.target.addEventListener('dragend', onComplete, { once: true });
+			}
+		});
+
+		super.init?.();
+	}
+};
+
 const componentName$7 = getComponentName('password-field');
 
 const {
-	host: host$3,
+	host: host$4,
 	inputWrapper: inputWrapper$1,
 	inputElement,
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
-	label: label$2,
-	requiredIndicator: requiredIndicator$1
+	label: label$3,
+	requiredIndicator: requiredIndicator$2
 } = {
 	host: () => ':host',
 	inputWrapper: { selector: '::part(input-field)' },
@@ -2632,56 +2662,71 @@ const {
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
+			width: { selector: host$4 },
 			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
 			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
 			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
 			labelTextColor: [
-				{ ...label$2, property: 'color' },
-				{ ...requiredIndicator$1, property: 'color' }
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$2, property: 'color' }
 			],
 			inputTextColor: [
 				{ ...inputElement, property: 'color' },
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
-			fontSize: [{}, host$3],
+			fontSize: [{}, host$4],
 			height: inputWrapper$1,
 			padding: inputWrapper$1,
 			pointerCursor: [
 				{ ...revealButton, property: 'cursor' },
-				{ ...label$2, property: 'cursor' },
-				{ ...requiredIndicator$1, property: 'cursor' }
+				{ ...label$3, property: 'cursor' },
+				{ ...requiredIndicator$2, property: 'cursor' }
+			],
+			outlineColor: { ...inputWrapper$1 },
+			outlineStyle: { ...inputWrapper$1 },
+			outlineWidth: [
+				{ ...inputWrapper$1 },
+				// we need to make sure there is enough space for the outline
+				{ property: 'padding' }
 			],
+			backgroundColor: inputWrapper$1
 		}
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	passwordDraggableMixin
 )(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
 		style: `
 			:host {
-				display: inline-block;
+				display: inline-flex;
 			}
 			vaadin-password-field {
 				width: 100%;
-				padding: 0;
 			}
 			vaadin-password-field > input {
 				min-height: 0;
 			}
-			vaadin-password-field::part(input-field) {
-				background: transparent;
+
+			vaadin-password-field[readonly] > input:placeholder-shown {
+				opacity: 1;
 			}
+
 			vaadin-password-field::part(input-field)::after {
 				opacity: 0;
 			}	
 			vaadin-password-field::before {
 				height: initial;
 			}
+
+			vaadin-password-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$7
@@ -2692,11 +2737,20 @@ customElements.define(componentName$7, PasswordField);
 
 const componentName$6 = getComponentName('text-area');
 
-const selectors = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	required: '::part(required-indicator)::after',
-	host: () => ':host'
+const {
+	host: host$3,
+	placeholder: placeholder$1,
+	input: input$1,
+	textArea: textArea$1,
+	label: label$2,
+	requiredIndicator: requiredIndicator$1
+} = {
+	host: { selector: () => ':host' },
+	textArea: { selector: '> textarea' },
+	label: { selector: '::part(label)' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: 'textarea:placeholder-shown' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
 let overrides$1 = ``;
@@ -2704,19 +2758,24 @@ let overrides$1 = ``;
 const TextArea = compose(
 	createStyleMixin({
 		mappings: {
-			resize: { selector: '> textarea' },
-			color: { selector: selectors.label },
+			resize: textArea$1,
+			color: textArea$1,
 			cursor: {},
-			width: { selector: selectors.host },
-			backgroundColor: { selector: selectors.input },
-			borderWidth: { selector: selectors.input },
-			borderStyle: { selector: selectors.input },
-			borderColor: { selector: selectors.input },
-			borderRadius: { selector: selectors.input },
-			outlineWidth: { selector: selectors.input },
-			outlineStyle: { selector: selectors.input },
-			outlineColor: { selector: selectors.input },
-			outlineOffset: { selector: selectors.input }
+			labelColor: [
+				{ ...label$2, property: 'color' },
+				{ ...requiredIndicator$1, property: 'color' }
+			],
+			placeholderColor: { ...placeholder$1, property: 'color' },
+			width: host$3,
+			backgroundColor: input$1,
+			borderWidth: input$1,
+			borderStyle: input$1,
+			borderColor: input$1,
+			borderRadius: input$1,
+			outlineWidth: input$1,
+			outlineStyle: input$1,
+			outlineColor: input$1,
+			outlineOffset: [input$1, { property: 'padding' }],
 		}
 	}),
 	draggableMixin,
@@ -2740,6 +2799,7 @@ overrides$1 = `
 	vaadin-text-area {
 		margin: 0;
 		width: 100%;
+		box-sizing: border-box;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
@@ -2748,10 +2808,13 @@ overrides$1 = `
 	vaadin-text-area[focused]::part(input-field) {
 		cursor: text;
 	}
-	vaadin-text-area::part(required-indicator)::after {
-		font-size: "12px";
+	vaadin-text-area[required]::part(required-indicator)::after {
 		content: "*";
-	}	
+	}
+	vaadin-text-area[disabled] > textarea:placeholder-shown,
+	vaadin-text-area[readonly] > textarea:placeholder-shown {
+		opacity: 1;
+	}
 `;
 
 customElements.define(componentName$6, TextArea);
@@ -5125,12 +5188,12 @@ const typography = {
 	},
 	body1: {
 		font: fontsRef.font1.family,
-		weight: '300',
+		weight: '400',
 		size: '16px'
 	},
 	body2: {
 		font: fontsRef.font1.family,
-		weight: '200',
+		weight: '400',
 		size: '14px'
 	}
 };
@@ -5156,7 +5219,9 @@ const radius = {
 	sm: '10px',
 	md: '15px',
 	lg: '20px',
-	xl: '25px'
+	xl: '25px',
+	'2xl': '30px',
+	'3xl': '35px'
 };
 
 const shadow = {
@@ -5274,31 +5339,32 @@ const globalRefs$e = getThemeRefs(globals);
 const vars$f = TextField.cssVarList;
 
 const textField = (vars) => ({
+	[vars.padding]: '0 1em',
+
+	[vars.outlineWidth]: '2px',
+	[vars.outlineStyle]: 'solid',
+	[vars.outlineColor]: 'transparent',
+
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
 		}
 	},
 
@@ -5323,8 +5389,6 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outlineWidth]: '2px',
-		[vars.outlineStyle]: 'solid',
 		[vars.outlineColor]: globalRefs$e.colors.surface.main
 	},
 
@@ -5351,6 +5415,11 @@ const passwordField = {
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
 	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
+	[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
+
+	[vars$e.outlineWidth]: '2px',
+	[vars$e.outlineStyle]: 'solid',
+	[vars$e.outlineColor]: 'transparent',
 
 	[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
 	[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
@@ -5392,11 +5461,16 @@ const passwordField = {
 		[vars$e.width]: '100%'
 	},
 
+	_focused: {
+		[vars$e.outlineColor]: globalRefs$d.colors.surface.main
+	},
+
 	_invalid: {
 		[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
 		[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
 		[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
+		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main,
+		[vars$e.outlineColor]: globalRefs$d.colors.error.main,
 	},
 };
 
@@ -5412,36 +5486,36 @@ const globalRefs$c = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$d.color]: globalRefs$c.colors.primary.main,
+	[vars$d.labelColor]: globalRefs$c.colors.surface.contrast,
+	[vars$d.placeholderColor]: globalRefs$c.colors.surface.main,
+	[vars$d.color]: globalRefs$c.colors.surface.contrast,
+
 	[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
 	[vars$d.borderRadius]: globalRefs$c.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
-	[vars$d.borderColor]: 'transparent',
+	[vars$d.borderColor]: globalRefs$c.colors.surface.main,
 	[vars$d.outlineWidth]: '2px',
 	[vars$d.outlineStyle]: 'solid',
 	[vars$d.outlineColor]: 'transparent',
+	[vars$d.outlineOffset]: '0px',
 
-
-	_bordered: {
-		[vars$d.borderColor]: globalRefs$c.colors.surface.main
+	_fullWidth: {
+		[vars$d.width]: '100%'
 	},
 
 	_focused: {
 		[vars$d.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
-	_fullWidth: {
-		[vars$d.width]: '100%'
-	},
-
 	_disabled: {
 		[vars$d.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
+		[vars$d.labelColor]: globalRefs$c.colors.error.main,
 		[vars$d.outlineColor]: globalRefs$c.colors.error.main
 	}
 };
@@ -5461,7 +5535,7 @@ const checkbox = {
 	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
 	[vars$c.labelMargin]: 'calc(1em + 5px)',
 
-	[vars$c.checkboxRadius]: globalRefs$b.radius.sm,
+	[vars$c.checkboxRadius]: globalRefs$b.radius.xs,
 
 	size: {
 		xs: {
@@ -5676,7 +5750,7 @@ const container = {
 			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
-			[helperVars.shadowColor]: '#00000050',
+			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
 			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
@@ -5691,6 +5765,15 @@ const container = {
 		lg: {
 			[vars$a.borderRadius]: globalRefs$9.radius.lg
 		},
+		xl: {
+			[vars$a.borderRadius]: globalRefs$9.radius.xl
+		},
+		'2xl': {
+			[vars$a.borderRadius]: globalRefs$9.radius['2xl']
+		},
+		'3xl': {
+			[vars$a.borderRadius]: globalRefs$9.radius['3xl']
+		},
 	}
 };
 
@@ -5869,12 +5952,12 @@ const globalRefs$5 = getThemeRefs(globals);
 const passcode = {
 	[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
 	[vars$5.outlineWidth]: '2px',
-	[vars$5.outlineColor]: globalRefs$5.colors.primary.main,
+	[vars$5.outlineColor]: 'transparent',
 	[vars$5.padding]: '0',
 	[vars$5.textAlign]: 'center',
 	[vars$5.borderColor]: 'transparent',
 	[vars$5.digitsGap]: '4px',
-	[vars$5.focusedValidDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
+	[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
 
 	_hideCursor: {
 		[vars$5.caretColor]: 'transparent',
@@ -5895,7 +5978,7 @@ const passcode = {
 	_invalid: {
 		[vars$5.borderColor]: globalRefs$5.colors.error.main,
 		[vars$5.color]: globalRefs$5.colors.error.main,
-		[vars$5.outlineColor]: globalRefs$5.colors.error.light,
+		[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.error.light,
 	},
 };