@descope/web-components-ui 3.26.4 → 3.27.0

package/dist/index.esm.js

@@ -10265,6 +10265,7 @@ const PasswordClass = compose(
 			${useHostExternalPadding(PasswordClass.cssVarList)}
 			${resetInputCursor('vaadin-password-field')}
       ${resetInputLabelPosition('vaadin-password-field')}
+      ${resetInputAutoFill('vaadin-password-field', PasswordClass.cssVarList)}
 
 			vaadin-password-field {
 				width: 100%;
@@ -19357,6 +19358,20 @@ const asciiPattern =
 const unicodePattern =
   "^[\\p{L}\\p{M}\\p{N}._%+'\\-]+@(?:[\\p{L}\\p{M}\\p{N}](?:[\\p{L}\\p{M}\\p{N}\\-]*[\\p{L}\\p{M}\\p{N}])?\\.)+[\\p{L}\\p{M}][\\p{L}\\p{M}\\p{N}\\-]+$";
 
+// The autocomplete grammar is ordered (section-*, shipping/billing, field name, webauthn) and on/off can't be
+// combined with a field name, so `email` takes the field name's place, before webauthn
+const emailVerificationAutocomplete = (autocomplete) => {
+  const tokens = (autocomplete || '')
+    .split(/\s+/)
+    .filter(
+      (token) => token && !['username', 'email', 'on', 'off'].includes(token),
+    );
+  const webauthn = tokens.indexOf('webauthn');
+  tokens.splice(webauthn === -1 ? tokens.length : webauthn, 0, 'email');
+
+  return tokens.join(' ');
+};
+
 const componentName$B = getComponentName$1('email-field');
 
 const defaultAutocomplete = 'username';
@@ -19405,6 +19420,38 @@ const customMixin$6 = (superclass) =>
       if (!this.validatesFormat) {
         this.disableFormatValidation();
       }
+
+      if (this.emailVerification) {
+        this.enableEmailVerification();
+      }
+    }
+
+    // Read once, in `init`: descope-wc renders the screen html once
+    get emailVerification() {
+      return this.getAttribute('email-verification') === 'true';
+    }
+
+    // Browser email verification needs the native input to be an email field (autocomplete `email`).
+    // The host keeps its own autocomplete: descope-wc finds the passkey autofill field by an exact
+    // `[autocomplete="webauthn"]` match on it, so changing the host would break passkeys
+    enableEmailVerification() {
+      const { baseElement } = this;
+      const delegate = baseElement._delegateAttribute.bind(baseElement);
+      // vaadin writes the native autocomplete only through here, so it writes ours
+      baseElement._delegateAttribute = (name, value) =>
+        delegate(
+          name,
+          name === 'autocomplete'
+            ? emailVerificationAutocomplete(value)
+            : value,
+        );
+      baseElement._delegateAttribute('autocomplete', baseElement.autocomplete);
+
+      // the external input copies the host autocomplete once, when it is created
+      this.externalInput?.setAttribute(
+        'autocomplete',
+        emailVerificationAutocomplete(this.getAttribute('autocomplete')),
+      );
     }
 
     enableUnicode() {