@descope/web-components-ui 1.0.85 → 1.0.87

package/dist/index.esm.js

@@ -776,13 +776,24 @@ const proxyInputMixin = (superclass) =>
 			this.#inputElement = super.inputElement;
 		}
 
+		// the web-component does not loaded immediately, so we want to defer the warning
+		// and show it only if the input element was not found after the component is loaded
+		warnIfInputElementIsMissing() {
+			clearTimeout(this.inputElementTimerId);
+
+			this.inputElementTimerId = setTimeout(() => {
+				!this.#inputElement && console.warn('no input was found');
+			}, 0);
+		}
+
 		get inputElement() {
-			const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+			this.warnIfInputElementIsMissing();
+
+			const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="inputt"]');
 			const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
 			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
-			if (!this.#inputElement) throw Error('no input was found');
 
 			return this.#inputElement
 		}
@@ -792,7 +803,7 @@ const proxyInputMixin = (superclass) =>
 		}
 
 		getValidity() {
-			return this.inputElement.validity
+			return this.inputElement?.validity || {}
 		}
 
 		handleInternalInputErrorMessage() {
@@ -1690,6 +1701,9 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
 
 		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
+			:host {
+				display: inline-block;
+			}
 			:host > div {
 				display: flex;
 				height: 100%;
@@ -2590,6 +2604,7 @@ overrides$2 = `
 	}
 	vaadin-password-field {
 		width: 100%;
+		padding: 0;
 	}
 	vaadin-password-field > input {
 		min-height: 0;
@@ -5273,7 +5288,6 @@ const globalRefs$b = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$d.width]: '100%',
 	[vars$d.color]: globalRefs$b.colors.primary.main,
 	[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
 	[vars$d.resize]: 'vertical',
@@ -5284,6 +5298,7 @@ const textArea = {
 	[vars$d.borderColor]: 'transparent',
 	[vars$d.outlineWidth]: '2px',
 	[vars$d.outlineStyle]: 'solid',
+	[vars$d.outlineColor]: 'transparent',
 
 
 	_bordered: {