@getauthui/core 0.1.2 → 0.1.3

package/dist/{authui-user-button-C64OcOdr.js → authui-user-button-PQdLnij_.js}

@@ -1,13 +1,16 @@
-import { state as d, property as f, customElement as _, query as rt } from "lit/decorators.js";
-import { css as I, LitElement as X, nothing as o, html as s, svg as l } from "lit";
-import { Client as ot, Account as ct, ID as V, Avatars as lt } from "appwrite";
-const dt = {
+import { state as d, property as m, customElement as O, query as ct } from "lit/decorators.js";
+import { css as I, LitElement as X, nothing as c, html as r, svg as l } from "lit";
+import { Client as tt, Account as et, ID as L, Avatars as dt } from "appwrite";
+const ht = {
   signIn: "Sign in",
+  dialogSignIn: "Sign in",
   signUp: "Sign up",
   signOut: "Sign out",
   continueAsGuest: "Continue as guest",
   email: "Email",
   password: "Password",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
   newPassword: "New password",
   confirmPassword: "Confirm password",
   name: "Name",
@@ -23,6 +26,9 @@ const dt = {
   continueWithPhone: "Continue with phone",
   sendMagicLink: "Send magic link",
   sendCode: "Send code",
+  resendCode: "Resend code",
+  useDifferentEmail: "Use a different email",
+  useDifferentPhone: "Use a different phone number",
   verifyCode: "Verify code",
   magicLinkSent: "We sent a sign-in link to {email}. Open it on this device to continue.",
   codeSent: "We sent a code to {target}. Enter it below to continue.",
@@ -38,6 +44,7 @@ const dt = {
   resetLinkSent: "If an account exists for {email}, a reset link is on its way.",
   passwordUpdated: "Your password was updated. You can sign in now.",
   sendResetLink: "Send reset link",
+  requestNewLink: "Request a new link",
   agreeTo: "By continuing you agree to our",
   terms: "Terms of Service",
   privacy: "Privacy Policy",
@@ -63,21 +70,28 @@ const dt = {
   verified: "Verified",
   unverified: "Unverified",
   verifyEmail: "Verify email",
+  verificationResendIn: "Sent. You can resend in {seconds} s",
   verificationSent: "Verification email sent. Check your inbox.",
   emailVerified: "Your email is verified.",
   changePassword: "Change password",
   currentPassword: "Current password",
   twoFactor: "Two-factor authentication",
+  mfaBadge: "MFA",
   twoFactorDescription: "Require a second factor when signing in to this account.",
+  mfaNoFactorWarning: "Turn on an authenticator, or verify your email or phone, before enabling two-factor authentication. Without a factor, this setting does not protect the account.",
   enable: "Enable",
   disable: "Disable",
   authenticatorApp: "Authenticator app",
   authenticatorAdd: "Add authenticator",
   authenticatorScan: "Scan this QR code with your authenticator app, then enter the 6-digit code.",
+  qrCodeAlt: "QR code",
   authenticatorManual: "Or enter this key manually",
+  authenticatorCopyKey: "Copy key",
   authenticatorVerify: "Verify and enable",
   recoveryCodes: "Recovery codes",
+  viewRecoveryCodes: "View recovery codes",
   recoveryCodesDescription: "Use a recovery code to sign in if you lose access to your other factors.",
+  recoveryCodesOnceHint: "Recovery codes can be viewed only once after they are generated. Viewing them again requires a recent second factor.",
   generateRecoveryCodes: "Generate recovery codes",
   regenerateRecoveryCodes: "Regenerate",
   recoveryCodesWarning: "Store these codes somewhere safe. Each code works once.",
@@ -87,16 +101,34 @@ const dt = {
   signOutAllSessionsDescription: "End every session, including this one.",
   noConnections: "No connected accounts.",
   disconnect: "Disconnect",
+  connectProvider: "Connect {provider}",
   noActivity: "No recent activity.",
+  noSessions: "No active sessions.",
   deleteAccount: "Delete account",
-  deleteAccountDescription: "Your account is disabled and you are signed out. An administrator can restore it.",
+  deleteAccountDescription: "Deleting disables your account and signs you out everywhere. An administrator can restore it.",
   deleteAccountConfirm: "Delete my account",
   loading: "Loading",
   copied: "Copied",
+  copyFailed: "Could not copy. Select the text and copy it manually.",
   copy: "Copy",
   done: "Done",
+  nameUpdated: "Name updated.",
+  emailUpdated: "Email updated. Verify the new address.",
+  phoneUpdated: "Phone number updated.",
+  phoneVerified: "Phone verified.",
+  authenticatorAdded: "Authenticator added.",
+  accountConverted: "Account created.",
+  enabled: "Enabled",
+  disabled: "Disabled",
+  createPassword: "Create a password",
+  createPasswordHint: "This becomes your sign-in password.",
+  errorCurrentPassword: "Current password is incorrect.",
   errorGeneric: "Something went wrong. Please try again.",
   errorInvalidCredentials: "Invalid email or password.",
+  errorInvalidEmail: "Enter a valid email address.",
+  errorInvalidPassword: "Password must be between 8 and 256 characters.",
+  errorInvalidPhone: "Enter a phone number in E.164 format, starting with +.",
+  errorInvalidName: "Enter a name.",
   errorUserExists: "An account with this email already exists.",
   errorUserBlocked: "This account is blocked. Contact support.",
   errorRateLimit: "Too many attempts. Wait a moment and try again.",
@@ -116,6 +148,7 @@ const dt = {
   passwordHint: "At least 8 characters.",
   signedInAs: "Signed in as",
   manageAccount: "Manage account",
+  dialogAccount: "Account",
   continue: "Continue",
   provider: "Provider",
   lastActive: "Last active",
@@ -123,13 +156,13 @@ const dt = {
   guestAccountDescription: "Add an email and password to keep your data.",
   preview: "Preview"
 };
-function ht(e, t = {}) {
+function ut(e, t = {}) {
   return e.replace(
     /\{(\w+)\}/g,
-    (i, r) => r in t ? String(t[r]) : `{${r}}`
+    (i, s) => s in t ? String(t[s]) : `{${s}}`
   );
 }
-const ut = {
+const pt = {
   amazon: "Amazon",
   apple: "Apple",
   appwrite: "Appwrite",
@@ -180,10 +213,10 @@ const ut = {
   zoho: "Zoho",
   zoom: "Zoom"
 };
-function D(e) {
-  return ut[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
+function R(e) {
+  return pt[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
 }
-const q = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), P = () => (/* @__PURE__ */ new Date()).toISOString(), M = (e) => new Date(Date.now() - e * 6e4).toISOString(), T = [
+const T = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), P = () => (/* @__PURE__ */ new Date()).toISOString(), U = (e) => new Date(Date.now() - e * 6e4).toISOString(), N = [
   "amber",
   "brave",
   "calm",
@@ -196,13 +229,13 @@ const q = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
   "juniper",
   "kite",
   "lumen"
-], Z = () => `${T[Math.floor(Math.random() * T.length)]}-${T[Math.floor(Math.random() * T.length)]}`, F = () => Math.random().toString(36).slice(2, 12), J = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), pt = {
+], it = () => `${N[Math.floor(Math.random() * N.length)]}-${N[Math.floor(Math.random() * N.length)]}`, F = () => Math.random().toString(36).slice(2, 12), st = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), ft = {
   name: "Ada Lovelace",
   email: "ada@example.com",
   phone: "+15550100"
 };
-class ft {
-  constructor(t = pt) {
+class mt {
+  constructor(t = ft) {
     this.seed = t, this.user = null, this.mfaPending = !1, this.mfaEnabled = !1, this.totpEnrolled = !1, this.recoveryCodes = [], this.lastChallenge = 0, this.sessions = [], this.identities = [], this.logs = [], this.tokens = /* @__PURE__ */ new Map(), this.pendingAuthenticator = null;
   }
   // ───────────────────────── helpers ─────────────────────────
@@ -210,13 +243,13 @@ class ft {
     const i = t.anonymous ?? !1;
     return this.user = {
       $id: "preview-user",
-      $createdAt: M(1440 * 30),
+      $createdAt: U(1440 * 30),
       $updatedAt: P(),
       name: i ? "" : t.name ?? this.seed.name,
-      registration: M(1440 * 30),
+      registration: U(1440 * 30),
       status: !0,
       labels: [],
-      passwordUpdate: i ? "" : M(1440 * 7),
+      passwordUpdate: i ? "" : U(1440 * 7),
       email: i ? "" : t.email ?? this.seed.email,
       phone: i ? "" : t.phone ?? this.seed.phone,
       emailVerification: !i,
@@ -267,7 +300,7 @@ class ft {
       {
         ...i,
         $id: F(),
-        $createdAt: M(300),
+        $createdAt: U(300),
         provider: t,
         ip: "198.51.100.7",
         osCode: "IOS",
@@ -284,7 +317,7 @@ class ft {
       {
         ...i,
         $id: F(),
-        $createdAt: M(1440 * 3),
+        $createdAt: U(1440 * 3),
         provider: "oauth2",
         ip: "192.0.2.90",
         osCode: "WIN",
@@ -299,8 +332,8 @@ class ft {
     ], this.identities = [
       {
         $id: "identity-github",
-        $createdAt: M(1440 * 20),
-        $updatedAt: M(1440 * 20),
+        $createdAt: U(1440 * 20),
+        $updatedAt: U(1440 * 20),
         userId: "preview-user",
         provider: "github",
         providerUid: "8675309",
@@ -320,7 +353,7 @@ class ft {
       },
       {
         event: "user.update.name",
-        time: M(1440 * 2),
+        time: U(1440 * 2),
         clientName: "Safari",
         osName: "iOS",
         countryName: "Germany",
@@ -328,7 +361,7 @@ class ft {
       },
       {
         event: "session.create",
-        time: M(1440 * 3),
+        time: U(1440 * 3),
         clientName: "Firefox",
         osName: "Windows",
         countryName: "United States",
@@ -338,9 +371,9 @@ class ft {
   }
   requireUser() {
     if (!this.user)
-      throw q("general_unauthorized_scope", "User (role: guests) missing scope (account)");
+      throw T("general_unauthorized_scope", "User (role: guests) missing scope (account)");
     if (this.mfaPending)
-      throw q(
+      throw T(
         "user_more_factors_required",
         "More factors are required to complete the sign in process."
       );
@@ -348,7 +381,7 @@ class ft {
   }
   requireRecentChallenge() {
     if (Date.now() - this.lastChallenge > 30 * 6e4)
-      throw q(
+      throw T(
         "user_challenge_required",
         "A recently successful challenge is required to complete this action."
       );
@@ -358,7 +391,7 @@ class ft {
     this.mfaPending = !!(this.user?.mfa && t);
   }
   async delay(t, i = 150) {
-    return await new Promise((r) => setTimeout(r, i)), typeof t == "function" ? t() : t;
+    return await new Promise((s) => setTimeout(s, i)), typeof t == "function" ? t() : t;
   }
   /** Sign the preview user in directly (used by the playground). */
   signInDirectly() {
@@ -368,7 +401,7 @@ class ft {
   async get() {
     return this.delay(() => this.requireUser(), 120);
   }
-  async create(t, i, r, a) {
+  async create(t, i, s, a) {
     return this.delay(() => this.makeUser({ email: i, name: a || i.split("@")[0] }));
   }
   async createEmailPasswordSession(t) {
@@ -389,7 +422,7 @@ class ft {
       userId: t,
       secret: "",
       expire: "",
-      phrase: Z()
+      phrase: it()
     });
   }
   async createEmailToken(t, i) {
@@ -399,7 +432,7 @@ class ft {
       userId: t,
       secret: "",
       expire: "",
-      phrase: Z()
+      phrase: it()
     });
   }
   async createPhoneToken(t, i) {
@@ -467,7 +500,10 @@ class ft {
     return this.delay(() => (this.requireUser(), { total: this.sessions.length, sessions: this.sessions }));
   }
   async deleteSession(t = "current") {
-    return this.delay(() => (t === "current" ? this.reset() : this.sessions = this.sessions.filter((i) => i.$id !== t), {}));
+    return this.delay(() => {
+      const i = this.sessions.find((s) => s.$id === t);
+      return t === "current" || i?.current ? this.reset() : this.sessions = this.sessions.filter((s) => s.$id !== t), {};
+    });
   }
   async deleteSessions() {
     return this.delay(() => (this.reset(), {}));
@@ -521,33 +557,33 @@ class ft {
   async createMFARecoveryCodes() {
     return this.delay(() => {
       if (this.recoveryCodes.length > 0)
-        throw q("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
-      return this.recoveryCodes = Array.from({ length: 6 }, J), { recoveryCodes: this.recoveryCodes };
+        throw T("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
+      return this.recoveryCodes = Array.from({ length: 6 }, st), { recoveryCodes: this.recoveryCodes };
     });
   }
   async getMFARecoveryCodes() {
     return this.delay(() => (this.requireRecentChallenge(), { recoveryCodes: this.recoveryCodes }));
   }
   async updateMFARecoveryCodes() {
-    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, J), { recoveryCodes: this.recoveryCodes }));
+    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, st), { recoveryCodes: this.recoveryCodes }));
   }
   /** Forget everything, as a sign out would. */
   reset() {
     this.user = null, this.mfaPending = !1, this.sessions = [], this.identities = [], this.logs = [], this.tokens.clear();
   }
 }
-function mt(e) {
+function gt(e) {
   let t = 2166136261;
   const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
   for (const x of e) t = (t ^ x.charCodeAt(0)) * 16777619;
-  const r = 25;
+  const s = 25;
   let a = "";
-  const h = (x, S) => `<rect x="${x}" y="${S}" width="7" height="7"/><rect x="${x + 1}" y="${S + 1}" width="5" height="5" fill="#fff"/><rect x="${x + 2}" y="${S + 2}" width="3" height="3"/>`;
-  for (let x = 0; x < r; x++)
-    for (let S = 0; S < r; S++)
-      !(S < 8 && x < 8 || S >= r - 8 && x < 8 || S < 8 && x >= r - 8) && i() < 0.45 && (a += `<rect x="${S}" y="${x}" width="1" height="1"/>`);
-  const u = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${r} ${r}" shape-rendering="crispEdges"><rect width="${r}" height="${r}" fill="#fff"/><g fill="#000">${h(0, 0)}${h(r - 7, 0)}${h(0, r - 7)}${a}</g></svg>`;
-  return `data:image/svg+xml;utf8,${encodeURIComponent(u)}`;
+  const h = (x, C) => `<rect x="${x}" y="${C}" width="7" height="7"/><rect x="${x + 1}" y="${C + 1}" width="5" height="5" fill="#fff"/><rect x="${x + 2}" y="${C + 2}" width="3" height="3"/>`;
+  for (let x = 0; x < s; x++)
+    for (let C = 0; C < s; C++)
+      !(C < 8 && x < 8 || C >= s - 8 && x < 8 || C < 8 && x >= s - 8) && i() < 0.45 && (a += `<rect x="${C}" y="${x}" width="1" height="1"/>`);
+  const p = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${s} ${s}" shape-rendering="crispEdges"><rect width="${s}" height="${s}" fill="#fff"/><g fill="#000">${h(0, 0)}${h(s - 7, 0)}${h(0, s - 7)}${a}</g></svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(p)}`;
 }
 const v = {
   moreFactorsRequired: "user_more_factors_required",
@@ -579,27 +615,29 @@ const v = {
   userUnauthorized: "user_unauthorized",
   authMethodUnsupported: "user_auth_method_unsupported",
   countMaxExceeded: "user_count_exceeded",
-  targetAlreadyExists: "user_target_already_exists"
+  targetAlreadyExists: "user_target_already_exists",
+  argumentInvalid: "general_argument_invalid"
 };
-function N(e) {
+function B(e) {
   if (e && typeof e == "object") {
     const t = e;
-    return {
-      message: typeof t.message == "string" ? t.message : "Unknown error",
+    let i = typeof t.message == "string" ? t.message : "Unknown error";
+    return /^\s*<(!doctype|html)/i.test(i) && (i = ""), {
+      message: i,
       type: typeof t.type == "string" ? t.type : "",
       code: typeof t.code == "number" ? t.code : 0
     };
   }
   return { message: String(e), type: "", code: 0 };
 }
-function B(e, t) {
-  return N(e).type === t;
+function z(e, t) {
+  return B(e).type === t;
 }
-function at(e, t, i = "link") {
-  const r = N(e);
-  switch (r.type) {
+function Z(e, t, i = "link") {
+  const s = B(e);
+  switch (s.type) {
     case v.invalidCredentials:
-      return t.errorInvalidCredentials;
+      return i === "password" ? t.errorCurrentPassword : t.errorInvalidCredentials;
     case v.userAlreadyExists:
     case v.emailAlreadyExists:
     case v.phoneAlreadyExists:
@@ -632,11 +670,15 @@ function at(e, t, i = "link") {
     case v.authMethodUnsupported:
       return t.errorMethodDisabled;
   }
-  return r.code === 0 && /fetch|network/i.test(r.message) ? t.errorNetwork : r.message || t.errorGeneric;
+  if (s.type === v.argumentInvalid || /Invalid `\w+` param/i.test(s.message)) {
+    const a = s.message.match(/Invalid `([^`]+)` param/i)?.[1]?.toLowerCase();
+    return a === "email" ? t.errorInvalidEmail : a === "password" ? t.errorInvalidPassword : a === "phone" ? t.errorInvalidPhone : a === "name" ? t.errorInvalidName : t.errorGeneric;
+  }
+  return s.code === 0 && /fetch|network/i.test(s.message) ? t.errorNetwork : /Invalid `\w+` param/i.test(s.message) || /^\s*<(!doctype|html)/i.test(s.message) ? t.errorGeneric : s.message || t.errorGeneric;
 }
-function k(e, t, i) {
-  for (const r of t) {
-    const a = e[r];
+function S(e, t, i) {
+  for (const s of t) {
+    const a = e[s];
     if (typeof a == "function")
       return a.apply(e, i);
   }
@@ -644,21 +686,21 @@ function k(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const G = "authui", tt = ["userId", "secret", "expire", "project", "error", G], et = () => ({
+const K = "authui", rt = ["userId", "secret", "expire", "project", "error", K], at = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
   pending: null,
   configured: !1
 });
-class gt {
+class vt {
   constructor() {
-    this.client = null, this.account = null, this.config = null, this.state = et(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null;
+    this.client = null, this.account = null, this.config = null, this.state = at(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null;
   }
   // ───────────────────────────── configuration ─────────────────────────────
   /** Configure the Appwrite client. Safe to call more than once; the last call wins. */
   configure(t) {
-    this.config = t, this.client = new ot().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new ft() : null, this.account = this.preview ? this.preview : new ct(this.client), this.setState({ configured: !0, status: "loading" }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
+    this.config = t, this.client = new tt().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new mt() : null, this.account = this.preview ? this.preview : new et(this.client), this.setState({ configured: !0, status: "loading" }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
   }
   get isConfigured() {
     return this.config !== null;
@@ -686,7 +728,7 @@ class gt {
     return this.account;
   }
   getStrings() {
-    return { ...dt, ...this.config?.strings ?? {} };
+    return { ...ht, ...this.config?.strings ?? {} };
   }
   getState() {
     return { ...this.state };
@@ -696,13 +738,13 @@ class gt {
   }
   // ─────────────────────────────── events ───────────────────────────────
   on(t, i) {
-    let r = this.listeners.get(t);
-    return r || (r = /* @__PURE__ */ new Set(), this.listeners.set(t, r)), r.add(i), () => r.delete(i);
+    let s = this.listeners.get(t);
+    return s || (s = /* @__PURE__ */ new Set(), this.listeners.set(t, s)), s.add(i), () => s.delete(i);
   }
   emit(t, i) {
-    this.listeners.get(t)?.forEach((r) => {
+    this.listeners.get(t)?.forEach((s) => {
       try {
-        r(i);
+        s(i);
       } catch (a) {
         console.error("[authui] listener failed", a);
       }
@@ -712,7 +754,7 @@ class gt {
     this.state = { ...this.state, ...t }, this.emit("change", this.getState());
   }
   fail(t) {
-    const i = N(t);
+    const i = B(t);
     throw this.emit("error", i), t;
   }
   acct() {
@@ -732,41 +774,76 @@ class gt {
         const i = await this.account.get();
         this.setState({ status: "signed-in", user: i, mfaFactors: null }), t || this.emit("signed-in", i);
       } catch (i) {
-        if (B(i, v.moreFactorsRequired)) {
-          let r = null;
+        if (z(i, v.moreFactorsRequired)) {
+          let s = null;
           try {
-            r = await k(
+            s = await S(
               this.account,
               ["listMFAFactors", "listMfaFactors"],
               []
             );
           } catch {
           }
-          this.setState({ status: "mfa-required", user: null, mfaFactors: r });
-        } else
-          this.setState({ status: "signed-out", user: null, mfaFactors: null }), t && this.emit("signed-out", void 0);
+          this.setState({ status: "mfa-required", user: null, mfaFactors: s });
+        } else z(i, v.userBlocked) ? (await this.purgeLocalSession(), this.setState({
+          status: "signed-out",
+          user: null,
+          mfaFactors: null,
+          pending: {
+            type: "notice",
+            tone: "error",
+            message: this.getStrings().errorUserBlocked
+          }
+        }), t && this.emit("signed-out", void 0)) : (this.setState({ status: "signed-out", user: null, mfaFactors: null }), t && this.emit("signed-out", void 0));
       }
     })().finally(() => {
       this.refreshPromise = null;
     }), this.refreshPromise);
   }
   async afterSignIn() {
-    await this.refresh();
+    if (await this.refresh(), this.state.status !== "signed-in" && this.state.status !== "mfa-required") {
+      const i = this.state.pending;
+      if (i?.type === "notice" && i.tone === "error")
+        throw Object.assign(new Error(i.message), {
+          type: v.userBlocked,
+          code: 401
+        });
+    }
     const t = this.config?.successUrl;
     t && this.state.status === "signed-in" && typeof window < "u" && window.location.assign(t);
   }
+  /**
+   * Drop a poisoned Appwrite session (e.g. after user_blocked). Deletes the
+   * current session when possible and clears the SDK fallback without reading it.
+   */
+  async purgeLocalSession() {
+    try {
+      await this.account?.deleteSession("current");
+    } catch {
+    }
+    try {
+      this.client?.setSession("");
+    } catch {
+    }
+    if (typeof localStorage < "u")
+      try {
+        localStorage.removeItem("cookieFallback");
+      } catch {
+      }
+    this.config && !this.preview && (this.client = new tt().setEndpoint(this.config.endpoint).setProject(this.config.project), this.account = new et(this.client));
+  }
   // ─────────────────────────────── sign in ───────────────────────────────
   async signInWithEmailPassword(t, i) {
     try {
       await this.acct().createEmailPasswordSession(t.trim(), i);
-    } catch (r) {
-      this.fail(r);
+    } catch (s) {
+      this.fail(s);
     }
     await this.afterSignIn();
   }
-  async signUp(t, i, r) {
+  async signUp(t, i, s) {
     try {
-      await this.acct().create(V.unique(), t.trim(), i, r?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
+      await this.acct().create(L.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
     } catch (a) {
       this.fail(a);
     }
@@ -786,9 +863,9 @@ class gt {
    */
   async signInWithOAuth(t) {
     const i = this.config?.oauthScopes?.[t];
-    let r;
+    let s;
     try {
-      r = this.acct().createOAuth2Token(
+      s = this.acct().createOAuth2Token(
         t,
         this.redirectUrl("oauth"),
         this.redirectUrl("oauth-failed"),
@@ -797,9 +874,9 @@ class gt {
     } catch (a) {
       this.fail(a);
     }
-    if (r && typeof r.then == "function") {
+    if (s && typeof s.then == "function") {
       try {
-        await r;
+        await s;
       } catch (a) {
         this.fail(a);
       }
@@ -809,7 +886,7 @@ class gt {
   async sendMagicUrl(t) {
     try {
       return await this.acct().createMagicURLToken(
-        V.unique(),
+        L.unique(),
         t.trim(),
         this.redirectUrl("magic-url"),
         this.config?.securityPhrase ?? !0
@@ -821,7 +898,7 @@ class gt {
   async sendEmailOtp(t) {
     try {
       return await this.acct().createEmailToken(
-        V.unique(),
+        L.unique(),
         t.trim(),
         this.config?.securityPhrase ?? !0
       );
@@ -831,7 +908,7 @@ class gt {
   }
   async sendPhoneOtp(t) {
     try {
-      return await this.acct().createPhoneToken(V.unique(), t.replace(/[\s()-]/g, ""));
+      return await this.acct().createPhoneToken(L.unique(), t.replace(/[\s()-]/g, ""));
     } catch (i) {
       return this.fail(i);
     }
@@ -840,15 +917,15 @@ class gt {
   async signInWithToken(t, i) {
     try {
       await this.acct().createSession(t, i.trim());
-    } catch (r) {
-      this.fail(r);
+    } catch (s) {
+      this.fail(s);
     }
     await this.afterSignIn();
   }
   // ─────────────────────────────── MFA ───────────────────────────────
   async createMfaChallenge(t) {
     try {
-      return await k(
+      return await S(
         this.acct(),
         ["createMFAChallenge", "createMfaChallenge"],
         [t]
@@ -858,9 +935,9 @@ class gt {
     }
   }
   /** Verify a challenge. Completes a pending sign in, or acts as a step-up for protected actions. */
-  async completeMfaChallenge(t, i, r = {}) {
+  async completeMfaChallenge(t, i, s = {}) {
     try {
-      await k(
+      await S(
         this.acct(),
         ["updateMFAChallenge", "updateMfaChallenge"],
         [t, i.trim()]
@@ -868,11 +945,11 @@ class gt {
     } catch (a) {
       this.fail(a);
     }
-    (r.signIn ?? !0) && await this.afterSignIn();
+    (s.signIn ?? !0) && await this.afterSignIn();
   }
   async listMfaFactors() {
     try {
-      return await k(this.acct(), ["listMFAFactors", "listMfaFactors"], []);
+      return await S(this.acct(), ["listMFAFactors", "listMfaFactors"], []);
     } catch (t) {
       return this.fail(t);
     }
@@ -887,7 +964,7 @@ class gt {
   }
   async addAuthenticator() {
     try {
-      return await k(
+      return await S(
         this.acct(),
         ["createMFAAuthenticator", "createMfaAuthenticator"],
         ["totp"]
@@ -898,7 +975,7 @@ class gt {
   }
   async verifyAuthenticator(t) {
     try {
-      await k(
+      await S(
         this.acct(),
         ["updateMFAAuthenticator", "updateMfaAuthenticator"],
         ["totp", t.trim()]
@@ -911,7 +988,7 @@ class gt {
   /** Requires a recent MFA challenge (server rejects with user_challenge_required otherwise). */
   async removeAuthenticator() {
     try {
-      await k(this.acct(), ["deleteMFAAuthenticator", "deleteMfaAuthenticator"], ["totp"]);
+      await S(this.acct(), ["deleteMFAAuthenticator", "deleteMfaAuthenticator"], ["totp"]);
     } catch (t) {
       this.fail(t);
     }
@@ -919,7 +996,7 @@ class gt {
   }
   async createRecoveryCodes() {
     try {
-      return (await k(
+      return (await S(
         this.acct(),
         ["createMFARecoveryCodes", "createMfaRecoveryCodes"],
         []
@@ -931,7 +1008,7 @@ class gt {
   /** Requires a recent MFA challenge. */
   async regenerateRecoveryCodes() {
     try {
-      return (await k(
+      return (await S(
         this.acct(),
         ["updateMFARecoveryCodes", "updateMfaRecoveryCodes"],
         []
@@ -943,7 +1020,7 @@ class gt {
   /** Requires a recent MFA challenge. */
   async getRecoveryCodes() {
     try {
-      return (await k(
+      return (await S(
         this.acct(),
         ["getMFARecoveryCodes", "getMfaRecoveryCodes"],
         []
@@ -960,9 +1037,9 @@ class gt {
       this.fail(i);
     }
   }
-  async completePasswordRecovery(t, i, r) {
+  async completePasswordRecovery(t, i, s) {
     try {
-      await this.acct().updateRecovery(t, i, r);
+      await this.acct().updateRecovery(t, i, s);
     } catch (a) {
       this.fail(a);
     }
@@ -975,7 +1052,15 @@ class gt {
     } catch (i) {
       this.fail(i);
     }
-    t === "current" && (this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0));
+    if (t === "current") {
+      this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0);
+      return;
+    }
+    try {
+      await this.acct().get();
+    } catch {
+      this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0);
+    }
   }
   async signOutEverywhere() {
     try {
@@ -1025,31 +1110,31 @@ class gt {
   async updateEmail(t, i) {
     try {
       await this.acct().updateEmail(t.trim(), i);
-    } catch (r) {
-      this.fail(r);
+    } catch (s) {
+      this.fail(s);
     }
     await this.refresh();
   }
   async updatePhone(t, i) {
     try {
       await this.acct().updatePhone(t.replace(/[\s()-]/g, ""), i);
-    } catch (r) {
-      this.fail(r);
+    } catch (s) {
+      this.fail(s);
     }
     await this.refresh();
   }
   async updatePassword(t, i) {
     try {
       await this.acct().updatePassword(t, i || void 0);
-    } catch (r) {
-      this.fail(r);
+    } catch (s) {
+      this.fail(s);
     }
     await this.refresh();
   }
   /** Turn an anonymous session into a full account. */
-  async convertGuest(t, i, r) {
+  async convertGuest(t, i, s) {
     try {
-      await this.acct().updateEmail(t.trim(), i), r?.trim() && await this.acct().updateName(r.trim());
+      await this.acct().updateEmail(t.trim(), i), s?.trim() && await this.acct().updateName(s.trim());
     } catch (a) {
       this.fail(a);
     }
@@ -1057,7 +1142,7 @@ class gt {
   }
   async sendEmailVerification() {
     try {
-      await k(
+      await S(
         this.acct(),
         ["createEmailVerification", "createVerification"],
         [this.redirectUrl("verify-email")]
@@ -1078,8 +1163,8 @@ class gt {
     if (i) {
       try {
         await this.acct().updatePhoneVerification(i, t.trim());
-      } catch (r) {
-        this.fail(r);
+      } catch (s) {
+        this.fail(s);
       }
       await this.refresh();
     }
@@ -1096,9 +1181,9 @@ class gt {
   // ───────────────────────────── redirects ─────────────────────────────
   /** Build the URL Appwrite should send the user back to for a given flow. */
   redirectUrl(t) {
-    const i = this.config?.redirectUrl ?? (typeof window < "u" ? window.location.origin + window.location.pathname : ""), r = new URL(i, typeof window < "u" ? window.location.href : void 0);
-    for (const a of tt) r.searchParams.delete(a);
-    return r.searchParams.set(G, t), r.toString();
+    const i = this.config?.redirectUrl ?? (typeof window < "u" ? window.location.origin + window.location.pathname : ""), s = new URL(i, typeof window < "u" ? window.location.href : void 0);
+    for (const a of rt) s.searchParams.delete(a);
+    return s.searchParams.set(K, t), s.toString();
   }
   setPending(t) {
     this.setState({ pending: t });
@@ -1109,54 +1194,63 @@ class gt {
    */
   async handleRedirect() {
     if (typeof window > "u") return !1;
-    const t = new URLSearchParams(window.location.search), i = t.get(G);
+    const t = new URLSearchParams(window.location.search), i = t.get(K);
     if (!i) return !1;
-    const r = t.get("userId") ?? "", a = t.get("secret") ?? "";
+    const s = t.get("userId") ?? "", a = t.get("secret") ?? "";
     this.cleanUrl();
+    const h = () => {
+      this.setState({
+        pending: {
+          type: "notice",
+          message: this.getStrings().errorInvalidToken,
+          tone: "error"
+        }
+      });
+    };
     try {
       switch (i) {
         case "oauth":
         case "magic-url":
-          r && a && await this.acct().createSession(r, a);
+          s && a ? await this.acct().createSession(s, a) : h();
           break;
         case "oauth-failed":
           this.setState({ pending: { type: "oauth-failed" } });
           break;
         case "recovery":
-          r && a && this.setState({ pending: { type: "reset-password", userId: r, secret: a } });
+          s && a ? this.setState({ pending: { type: "reset-password", userId: s, secret: a } }) : h();
           break;
         case "verify-email":
-          r && a && (await k(
+          s && a ? (await S(
             this.acct(),
             ["updateEmailVerification", "updateVerification"],
-            [r, a]
+            [s, a]
           ), this.setState({
             pending: {
               type: "notice",
               message: this.getStrings().emailVerified,
               tone: "success"
             }
-          }));
+          })) : h();
           break;
       }
-    } catch (h) {
-      const u = N(h);
-      this.emit("error", u), this.setState({ pending: { type: "notice", message: u.message, tone: "error" } });
+    } catch (p) {
+      const x = B(p), C = Z(p, this.getStrings(), "link");
+      this.emit("error", x), this.setState({ pending: { type: "notice", message: C, tone: "error" } });
     }
     return !0;
   }
   cleanUrl() {
     const t = new URL(window.location.href);
-    for (const i of tt) t.searchParams.delete(i);
+    for (const i of rt) t.searchParams.delete(i);
     window.history.replaceState(window.history.state, "", t.toString());
   }
   /** Test helper. */
   reset() {
-    this.client = null, this.account = null, this.preview = null, this.config = null, this.state = et(), this.listeners.clear();
+    this.client = null, this.account = null, this.preview = null, this.config = null, this.state = at(), this.listeners.clear();
   }
 }
-const n = new gt();
-class vt {
+const n = new vt();
+class bt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
       const t = this.isDark("auto");
@@ -1184,14 +1278,14 @@ class vt {
     this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
   }
 }
-const it = new vt(), st = {
+const nt = new bt(), ot = {
   none: "0px",
   sm: "0.25rem",
   md: "0.625rem",
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, bt = I`
+}, yt = I`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -1269,7 +1363,7 @@ const it = new vt(), st = {
     --authui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
     color-scheme: dark;
   }
-`, yt = I`
+`, wt = I`
   *,
   *::before,
   *::after {
@@ -1284,6 +1378,8 @@ const it = new vt(), st = {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: start;
+    min-width: 0;
+    max-width: 100%;
   }
 
   [hidden] {
@@ -1539,6 +1635,9 @@ const it = new vt(), st = {
   }
 
   /* ── Alert ── */
+  .alert:has(.dismiss) {
+    padding-inline-end: 36px;
+  }
   .alert {
     position: relative;
     width: 100%;
@@ -1660,7 +1759,7 @@ const it = new vt(), st = {
   .tabs {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     height: 36px;
     width: fit-content;
     max-width: 100%;
@@ -1671,6 +1770,7 @@ const it = new vt(), st = {
     padding: 3px;
     gap: 2px;
     scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
   }
   :host([data-theme="dark"]) .tabs {
     background: color-mix(in oklab, var(--authui-muted) 80%, transparent);
@@ -1681,7 +1781,7 @@ const it = new vt(), st = {
     justify-content: center;
     gap: 6px;
     height: 100%;
-    flex: 1;
+    flex: 0 0 auto;
     padding: 4px 10px;
     border-radius: var(--authui-radius-md);
     border: 1px solid transparent;
@@ -1808,6 +1908,8 @@ const it = new vt(), st = {
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
+    min-width: 0;
+    flex: 1;
   }
   .between {
     display: flex;
@@ -1916,6 +2018,9 @@ const it = new vt(), st = {
   .providers.two {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .providers.two > :last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
   .providers .btn svg {
     width: 18px;
     height: 18px;
@@ -2012,25 +2117,25 @@ const it = new vt(), st = {
     }
   }
 `;
-var wt = Object.defineProperty, $t = (e, t, i, r) => {
-  for (var a = void 0, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = u(t, i, a) || a);
-  return a && wt(t, i, a), a;
-}, U;
-const nt = (U = class extends X {
+var $t = Object.defineProperty, xt = (e, t, i, s) => {
+  for (var a = void 0, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = p(t, i, a) || a);
+  return a && $t(t, i, a), a;
+}, E;
+const lt = (E = class extends X {
   constructor() {
     super(...arguments), this.auth = n.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
   }
   connectedCallback() {
     super.connectedCallback();
-    for (const t of U.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
+    for (const t of E.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
     this.auth = n.getState(), this.unsubscribeStore = n.on("change", (t) => {
       this.auth = t, this.applyBranding();
-    }), this.unsubscribeTheme = it.subscribe(() => this.applyBranding()), this.applyBranding();
+    }), this.unsubscribeTheme = nt.subscribe(() => this.applyBranding()), this.applyBranding();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    for (const t of U.KEY_EVENTS) this.removeEventListener(t, this.stopKeys);
+    for (const t of E.KEY_EVENTS) this.removeEventListener(t, this.stopKeys);
     this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
   }
   get strings() {
@@ -2038,7 +2143,7 @@ const nt = (U = class extends X {
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
-    return ht(this.strings[t], i);
+    return ut(this.strings[t], i);
   }
   get config() {
     return n.getConfig();
@@ -2048,25 +2153,25 @@ const nt = (U = class extends X {
   }
   /** Push theme and branding from config onto the host element. */
   applyBranding() {
-    const t = this.config?.branding, i = it.isDark(t?.theme ?? "auto");
+    const t = this.config?.branding, i = nt.isDark(t?.theme ?? "auto");
     this.setAttribute("data-theme", i ? "dark" : "light"), t?.primary && (this.style.setProperty("--authui-primary", t.primary), this.style.setProperty(
       "--authui-primary-foreground",
       t.primaryForeground ?? "#ffffff"
-    )), t?.radius && st[t.radius] && this.style.setProperty("--authui-radius", st[t.radius]);
+    )), t?.radius && ot[t.radius] && this.style.setProperty("--authui-radius", ot[t.radius]);
   }
   /** Emit a composed custom event from this element. */
   fire(t, i) {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-}, U.styles = [bt, yt], U.KEY_EVENTS = ["keydown", "keyup", "keypress"], U);
-$t([
+}, E.styles = [yt, wt], E.KEY_EVENTS = ["keydown", "keyup", "keypress"], E);
+xt([
   d()
-], nt.prototype, "auth");
-let A = nt;
-var xt = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, y = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? kt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && xt(t, i, a), a;
+], lt.prototype, "auth");
+let A = lt;
+var kt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, y = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ct(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && kt(t, i, a), a;
 };
 let b = class extends X {
   constructor() {
@@ -2084,10 +2189,10 @@ let b = class extends X {
     t && JSON.stringify(t) === JSON.stringify(e) || n.configure(e);
   }
   toConfig() {
-    const e = { oauth: [] };
-    for (const t of this.methods.split(/[\s,]+/).filter(Boolean))
-      t.startsWith("oauth:") ? e.oauth.push(t.slice(6)) : t === "email-password" ? e.emailPassword = !0 : t === "magic-url" ? e.magicUrl = !0 : t === "email-otp" ? e.emailOtp = !0 : t === "phone" ? e.phone = !0 : (t === "anonymous" || t === "guest") && (e.anonymous = !0);
-    return e.emailPassword === void 0 && !this.methods.trim() && (e.emailPassword = !0), {
+    const e = { oauth: [] }, t = this.methods.split(/[\s,]+/).filter(Boolean);
+    for (const i of t)
+      i.startsWith("oauth:") ? e.oauth.push(i.slice(6)) : i === "email-password" ? e.emailPassword = !0 : i === "magic-url" ? e.magicUrl = !0 : i === "email-otp" ? e.emailOtp = !0 : i === "phone" ? e.phone = !0 : (i === "anonymous" || i === "guest") && (e.anonymous = !0);
+    return e.emailPassword = t.length > 0 ? t.includes("email-password") : !0, {
       endpoint: this.endpoint,
       project: this.project,
       redirectUrl: this.redirectUrl || void 0,
@@ -2119,76 +2224,76 @@ b.styles = I`
     }
   `;
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "endpoint", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "project", 2);
 y([
-  f({ type: String, attribute: "redirect-url" })
+  m({ type: String, attribute: "redirect-url" })
 ], b.prototype, "redirectUrl", 2);
 y([
-  f({ type: String, attribute: "success-url" })
+  m({ type: String, attribute: "success-url" })
 ], b.prototype, "successUrl", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "methods", 2);
 y([
-  f({ type: String, attribute: "sign-up" })
+  m({ type: String, attribute: "sign-up" })
 ], b.prototype, "signUp", 2);
 y([
-  f({ type: String, attribute: "require-name" })
+  m({ type: String, attribute: "require-name" })
 ], b.prototype, "requireName", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "mfa", 2);
 y([
-  f({ type: String, attribute: "security-phrase" })
+  m({ type: String, attribute: "security-phrase" })
 ], b.prototype, "securityPhrase", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "name", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "logo", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "theme", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "radius", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "primary", 2);
 y([
-  f({ type: String, attribute: "primary-foreground" })
+  m({ type: String, attribute: "primary-foreground" })
 ], b.prototype, "primaryForeground", 2);
 y([
-  f({ type: String, attribute: "terms-url" })
+  m({ type: String, attribute: "terms-url" })
 ], b.prototype, "termsUrl", 2);
 y([
-  f({ type: String, attribute: "privacy-url" })
+  m({ type: String, attribute: "privacy-url" })
 ], b.prototype, "privacyUrl", 2);
 y([
-  f({ type: String })
+  m({ type: String })
 ], b.prototype, "preview", 2);
 b = y([
-  _("authui-config")
+  O("authui-config")
 ], b);
-var Ct = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, H = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? Pt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && Ct(t, i, a), a;
+var St = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, j = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Pt(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && St(t, i, a), a;
 };
 if (typeof document < "u" && !document.getElementById("authui-fouc")) {
   const e = document.createElement("style");
   e.id = "authui-fouc", e.textContent = "authui-show:not([ready]){display:none}", document.head.appendChild(e);
 }
-const St = ["loading", "signed-out", "signed-in", "mfa-required"];
-function W(e) {
-  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => St.includes(t)) : [];
+const At = ["loading", "signed-out", "signed-in", "mfa-required"];
+function G(e) {
+  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => At.includes(t)) : [];
 }
-let L = class extends X {
+let V = class extends X {
   constructor() {
     super(...arguments), this.when = "", this.unless = "", this.status = n.getState().status, this.unsubscribe = null;
   }
@@ -2200,35 +2305,38 @@ let L = class extends X {
   }
   /** Whether the current status satisfies `when` and `unless`. */
   get visible() {
-    const e = W(this.when), t = W(this.unless);
+    const e = G(this.when), t = G(this.unless);
     return !(this.status === "loading" && !e.includes("loading") || e.length > 0 && !e.includes(this.status) || t.includes(this.status));
   }
   updated() {
-    (this.status !== "loading" || W(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
+    (this.status !== "loading" || G(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
   }
   render() {
-    return this.visible ? s`<slot></slot>` : o;
+    return this.visible ? r`<slot></slot>` : c;
   }
 };
-H([
-  f({ type: String })
-], L.prototype, "when", 2);
-H([
-  f({ type: String })
-], L.prototype, "unless", 2);
-H([
+j([
+  m({ type: String })
+], V.prototype, "when", 2);
+j([
+  m({ type: String })
+], V.prototype, "unless", 2);
+j([
   d()
-], L.prototype, "status", 2);
-L = H([
-  _("authui-show")
-], L);
-const At = I`
+], V.prototype, "status", 2);
+V = j([
+  O("authui-show")
+], V);
+const Ut = I`
   :host {
     display: block;
     width: 100%;
     max-width: 420px;
+    min-width: 0;
   }
   .panel {
+    min-width: 0;
+    overflow: hidden;
     background: var(--authui-card);
     color: var(--authui-card-foreground);
     border: 1px solid var(--authui-border);
@@ -2258,6 +2366,9 @@ const At = I`
     align-self: center;
     margin-bottom: 4px;
   }
+  .alert:has(.dismiss) {
+    padding-inline-end: 36px;
+  }
   .alert .dismiss {
     position: absolute;
     top: 4px;
@@ -2270,7 +2381,7 @@ const At = I`
     height: 14px;
     margin: 0;
   }
-`, m = (e) => s`<svg
+`, g = (e) => r`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="none"
@@ -2281,86 +2392,86 @@ const At = I`
     aria-hidden="true"
   >
     ${e}
-  </svg>`, c = {
-  mail: m(
+  </svg>`, o = {
+  mail: g(
     l`<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>`
   ),
-  phone: m(
+  phone: g(
     l`<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>`
   ),
-  user: m(
+  user: g(
     l`<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`
   ),
-  userX: m(
+  userX: g(
     l`<path d="M2 21a8 8 0 0 1 11.873-7"/><circle cx="10" cy="8" r="5"/><path d="m17 17 5 5"/><path d="m22 17-5 5"/>`
   ),
-  lock: m(
+  lock: g(
     l`<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`
   ),
-  key: m(
+  key: g(
     l`<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>`
   ),
-  shield: m(
+  shield: g(
     l`<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>`
   ),
-  shieldCheck: m(
+  shieldCheck: g(
     l`<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>`
   ),
-  smartphone: m(
+  smartphone: g(
     l`<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>`
   ),
-  monitor: m(
+  monitor: g(
     l`<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>`
   ),
-  globe: m(
+  globe: g(
     l`<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>`
   ),
-  logOut: m(
+  logOut: g(
     l`<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>`
   ),
-  settings: m(
+  settings: g(
     l`<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`
   ),
-  x: m(l`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
-  check: m(l`<path d="M20 6 9 17l-5-5"/>`),
-  copy: m(
+  x: g(l`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
+  check: g(l`<path d="M20 6 9 17l-5-5"/>`),
+  copy: g(
     l`<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`
   ),
-  eye: m(
+  eye: g(
     l`<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>`
   ),
-  eyeOff: m(
+  eyeOff: g(
     l`<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>`
   ),
-  arrowLeft: m(l`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
-  alert: m(
+  arrowLeft: g(l`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
+  alert: g(
     l`<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>`
   ),
-  info: m(l`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
-  checkCircle: m(l`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
-  link: m(
+  info: g(l`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
+  checkCircle: g(l`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
+  link: g(
     l`<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`
   ),
-  activity: m(
+  activity: g(
     l`<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>`
   ),
-  trash: m(
+  trash: g(
     l`<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>`
   ),
-  sparkles: m(
+  sparkles: g(
     l`<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>`
   ),
-  refresh: m(
+  refresh: g(
     l`<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>`
   ),
-  chevronDown: m(l`<path d="m6 9 6 6 6-6"/>`),
-  ghost: m(
+  chevronDown: g(l`<path d="m6 9 6 6 6-6"/>`),
+  ghost: g(
     l`<path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/>`
   ),
-  qr: m(
+  qr: g(
     l`<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>`
   )
-}, w = (e, t = "0 0 24 24") => s`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Mt = {
+}, w = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Et = {
   google: w(
     l`<path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.57 5.57 0 0 1-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A11.99 11.99 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29A11.97 11.97 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.69 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/>`
   ),
@@ -2416,22 +2527,34 @@ const At = I`
     l`<path fill="#003087" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/>`
   )
 };
-function K(e) {
-  return Mt[e] ?? c.globe;
+function Y(e) {
+  return Et[e] ?? o.globe;
+}
+function Q(e) {
+  const t = (e.trim()[0] ?? "?").toUpperCase();
+  return /[A-Z0-9]/i.test(t) ? t : o.user;
 }
-var Ut = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, C = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? Et(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && Ut(t, i, a), a;
+function H(e) {
+  typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
+    window.dispatchEvent(new CustomEvent("authui:open", { detail: { view: e } }));
+  }));
+}
+function Ht() {
+  typeof window > "u" || window.dispatchEvent(new CustomEvent("authui:close"));
+}
+var Mt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, k = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? It(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && Mt(t, i, a), a;
 };
 let $ = class extends A {
   constructor() {
-    super(...arguments), this.view = "sign-in", this.embedded = !1, this.step = "sign-in", this.busy = !1, this.error = "", this.notice = null, this.showPassword = !1, this.token = null, this.challenge = null, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.onSignIn = (e) => {
-      e.preventDefault(), this.run(async () => {
+    super(...arguments), this.view = "sign-in", this.embedded = !1, this.step = "sign-in", this.busy = !1, this.error = "", this.notice = null, this.showPassword = !1, this.token = null, this.focusOnStep = !1, this.resendCooldownUntil = 0, this.challenge = null, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.onSignIn = (e) => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         await n.signInWithEmailPassword(this.email, this.password), this.password = "", this.fire("authui-success", { method: "email-password" });
       });
     }, this.onSignUp = (e) => {
-      e.preventDefault(), this.run(async () => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         await n.signUp(this.email, this.password, this.name), this.password = "", this.fire("authui-success", { method: "sign-up" });
       });
     }, this.onGuest = () => {
@@ -2447,20 +2570,21 @@ let $ = class extends A {
         await new Promise((t) => setTimeout(t, 4e3));
       });
     }, this.onForgot = (e) => {
-      e.preventDefault(), this.run(async () => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         await n.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
       });
     }, this.onReset = (e) => {
-      if (e.preventDefault(), this.password !== this.passwordConfirm) {
+      if (e.preventDefault(), !this.requireValid(e)) return;
+      if (this.password !== this.passwordConfirm) {
         this.error = this.t("errorPasswordMismatch");
         return;
       }
       const t = this.recovery;
       t && this.run(async () => {
-        await n.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.notice = { tone: "success", message: this.t("passwordUpdated") }, this.go("sign-in");
+        await n.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.auth.pending?.type === "reset-password" && n.setPending(null), this.notice = { tone: "success", message: this.t("passwordUpdated") }, this.go("sign-in");
       });
     }, this.onMagicUrl = (e) => {
-      e.preventDefault(), this.run(async () => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         const t = await n.sendMagicUrl(this.email);
         this.token = {
           userId: t.userId,
@@ -2470,7 +2594,7 @@ let $ = class extends A {
         };
       });
     }, this.onEmailOtp = (e) => {
-      e.preventDefault(), this.run(async () => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         const t = await n.sendEmailOtp(this.email);
         this.token = {
           userId: t.userId,
@@ -2480,15 +2604,15 @@ let $ = class extends A {
         }, this.code = "";
       });
     }, this.onPhoneOtp = (e) => {
-      e.preventDefault(), this.run(async () => {
+      e.preventDefault(), this.requireValid(e) && this.run(async () => {
         const t = await n.sendPhoneOtp(this.phone);
         this.token = { userId: t.userId, kind: "phone", target: this.phone }, this.code = "";
       });
     }, this.onVerifyCode = (e) => {
-      e.preventDefault();
+      if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.token;
       t && this.run(async () => {
-        await n.signInWithToken(t.userId, this.code), this.code = "", this.fire("authui-success", { method: t.kind });
+        await n.signInWithToken(t.userId, this.code), this.code = "", this.token = null, this.fire("authui-success", { method: t.kind });
       }, "code");
     }, this.onChooseFactor = (e) => {
       this.run(async () => {
@@ -2496,17 +2620,17 @@ let $ = class extends A {
         this.challenge = { id: t.$id, factor: e }, this.code = "";
       });
     }, this.onVerifyFactor = (e) => {
-      e.preventDefault();
+      if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.challenge;
       t && this.run(async () => {
-        await n.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.fire("authui-success", { method: "mfa" });
+        await n.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
       }, "code");
     }, this.onCancelMfa = () => {
       this.run(async () => {
         try {
           await n.signOut();
         } catch (e) {
-          if (!B(e, v.sessionNotFound)) throw e;
+          if (!z(e, v.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
@@ -2521,19 +2645,24 @@ let $ = class extends A {
     e.has("view") && e.get("view") !== void 0 && this.go(this.view), e.has("auth") && this.syncFromStore();
   }
   updated(e) {
-    e.has("step") && requestAnimationFrame(() => this.firstInput?.focus());
+    e.has("step") && (this.focusOnStep || this.embedded) && (this.focusOnStep = !1, requestAnimationFrame(() => this.firstInput?.focus()));
   }
   /** React to store transitions: MFA pending, redirect results, sign in. */
   syncFromStore() {
     const { status: e, pending: t } = this.auth;
-    e === "mfa-required" && this.step !== "mfa" && this.go("mfa"), t?.type === "reset-password" && this.step !== "reset-password" && (this.recovery = { userId: t.userId, secret: t.secret }, this.go("reset-password")), t?.type === "oauth-failed" && (this.notice = { tone: "error", message: this.t("errorOAuth") }, n.setPending(null)), t?.type === "notice" && (this.notice = {
+    e === "mfa-required" && this.step !== "mfa" && this.go("mfa");
+    const i = this.step === "reset-password" || t?.type === "reset-password" || this.recovery !== null;
+    (e === "signed-in" || e === "signed-out") && !i && (this.step === "mfa" || this.step === "phone" || this.step === "email-otp" || this.step === "magic-url" || this.step === "forgot-password" || this.token !== null || this.challenge !== null || e === "signed-out") && (this.token = null, this.challenge = null, this.code = "", this.password = "", this.notice = null, this.go(this.view === "sign-up" ? "sign-up" : "sign-in")), t?.type === "reset-password" && this.step !== "reset-password" && (this.recovery = { userId: t.userId, secret: t.secret }, this.go("reset-password")), t?.type === "oauth-failed" && (this.notice = { tone: "error", message: this.t("errorOAuth") }, n.setPending(null)), t?.type === "notice" && !this.notice && (this.notice = {
       tone: t.tone === "error" ? "error" : t.tone,
       message: t.message
-    }, n.setPending(null));
+    });
   }
   /** Navigate between screens and reset transient state. */
+  dismissNotice() {
+    this.notice = null, this.auth.pending?.type === "notice" && n.setPending(null);
+  }
   go(e) {
-    this.step = e, this.error = "", this.busy = !1, this.showPassword = !1, e !== "mfa" && (this.challenge = null), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
+    e === "sign-up" && this.config?.signUp === !1 && (e = "sign-in"), this.focusOnStep = !0, this.step = e, this.error = "", this.notice = null, this.auth.pending?.type === "notice" && n.setPending(null), this.busy = !1, this.showPassword = !1, this.password = "", this.passwordConfirm = "", e !== "mfa" && (this.challenge = null), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
   }
   // ───────────────────────────── actions ─────────────────────────────
   async run(e, t = "link") {
@@ -2542,12 +2671,17 @@ let $ = class extends A {
       try {
         await e();
       } catch (i) {
-        this.error = at(i, this.strings, t);
+        this.error = Z(i, this.strings, t);
       } finally {
         this.busy = !1;
       }
     }
   }
+  /** Honour native constraint validation before calling Appwrite. */
+  requireValid(e) {
+    const t = e.target;
+    return !(t && typeof t.reportValidity == "function" && !t.reportValidity());
+  }
   bind(e) {
     return (t) => {
       this[e] = t.target.value;
@@ -2556,81 +2690,91 @@ let $ = class extends A {
   // ───────────────────────────── render ─────────────────────────────
   render() {
     const e = this.renderStep();
-    return s`
+    return r`
       <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
         ${this.renderHeader()}
-        ${this.notice ? s`<div class="alert alert-${this.notice.tone}" role="status">
-                ${this.notice.tone === "success" ? c.checkCircle : this.notice.tone === "error" ? c.alert : c.info}
+        ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
+                ${this.notice.tone === "success" ? o.checkCircle : this.notice.tone === "error" ? o.alert : o.info}
                 <div class="alert-body">${this.notice.message}</div>
                 <button
                   class="btn btn-ghost btn-icon dismiss"
-                  @click=${() => this.notice = null}
+                  @click=${() => this.dismissNotice()}
                   aria-label=${this.t("close")}
                 >
-                  ${c.x}
+                  ${o.x}
                 </button>
-              </div>` : o}
+              </div>` : c}
         ${e}
       </div>
     `;
   }
   renderHeader() {
     const e = this.config?.branding?.logo, t = this.productName;
-    let i = "", r = "";
-    switch (this.step) {
-      case "sign-in":
-        i = this.auth.status === "signed-in" ? this.t("signedInAs") : t ? this.t("signInTitle", { name: t }) : this.t("welcomeBack");
-        break;
-      case "sign-up":
-        i = t ? this.t("signUpTitle", { name: t }) : this.t("createAccount");
-        break;
-      case "forgot-password":
-      case "reset-password":
-        i = this.t("resetPassword");
-        break;
-      case "magic-url":
-      case "email-otp":
-        i = this.t("continueWithEmail");
-        break;
-      case "phone":
-        i = this.t("continueWithPhone");
-        break;
-      case "mfa":
-        i = this.t("mfaTitle"), r = this.t("mfaDescription");
-        break;
-    }
-    return s`
-      <header class="header">
-        ${e ? s`<img class="logo" src=${e} alt=${t || "Logo"} />` : o}
-        ${n.isPreview ? s`<span class="badge badge-info preview">${this.t("preview")}</span>` : o}
+    let i = "", s = "";
+    if (this.auth.status === "signed-in")
+      i = this.t("signedInAs");
+    else
+      switch (this.step) {
+        case "sign-in":
+          i = t ? this.t("signInTitle", { name: t }) : this.t("welcomeBack");
+          break;
+        case "sign-up":
+          i = t ? this.t("signUpTitle", { name: t }) : this.t("createAccount");
+          break;
+        case "forgot-password":
+        case "reset-password":
+          i = this.t("resetPassword");
+          break;
+        case "magic-url":
+        case "email-otp":
+          i = this.t("continueWithEmail");
+          break;
+        case "phone":
+          i = this.t("continueWithPhone");
+          break;
+        case "mfa":
+          i = this.t("mfaTitle"), s = this.t("mfaDescription");
+          break;
+      }
+    return r`
+      <div class="header">
+        ${e ? r`<img
+                class="logo"
+                src=${e}
+                alt=""
+                @error=${(a) => {
+      a.target.hidden = !0;
+    }}
+              />` : c}
+        ${n.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : c}
         <h2 class="title" id="authui-title">${i}</h2>
-        ${r ? s`<p class="description">${r}</p>` : o}
-      </header>
+        ${s ? r`<p class="description">${s}</p>` : c}
+      </div>
     `;
   }
   renderError() {
-    return this.error ? s`<div class="alert alert-error" role="alert">
-          ${c.alert}
+    return this.error ? r`<div class="alert alert-error" role="alert">
+          ${o.alert}
           <div class="alert-body">${this.error}</div>
-        </div>` : o;
+        </div>` : c;
   }
   submitButton(e, t = "btn-primary") {
-    return s`<button class="btn ${t} btn-block" type="submit" ?disabled=${this.busy}>
-      ${this.busy ? s`<span class="spinner" aria-hidden="true"></span>` : o} ${e}
+    return r`<button class="btn ${t} btn-block" type="submit" ?disabled=${this.busy}>
+      ${this.busy ? r`<span class="spinner" aria-hidden="true"></span>` : c} ${e}
     </button>`;
   }
   passwordField(e) {
-    return s`
+    return r`
       <div class="field">
         <label class="label" for=${e.id}>
           ${e.label}
-          ${e.forgot ? s`<button
+          ${e.forgot ? r`<button
                   type="button"
                   class="btn btn-link small"
                   @click=${() => this.go("forgot-password")}
                 >
                   ${this.t("forgotPassword")}
-                </button>` : o}
+                </button>` : c}
         </label>
         <div class="input-wrap">
           <input
@@ -2647,18 +2791,18 @@ let $ = class extends A {
             type="button"
             class="btn btn-ghost btn-icon"
             @click=${() => this.showPassword = !this.showPassword}
-            aria-label=${this.showPassword ? "Hide password" : "Show password"}
+            aria-label=${this.showPassword ? this.t("hidePassword") : this.t("showPassword")}
             tabindex="-1"
           >
-            ${this.showPassword ? c.eyeOff : c.eye}
+            ${this.showPassword ? o.eyeOff : o.eye}
           </button>
         </div>
-        ${e.hint ? s`<p class="hint">${e.hint}</p>` : o}
+        ${e.hint ? r`<p class="hint">${e.hint}</p>` : c}
       </div>
     `;
   }
   emailField(e = "email") {
-    return s`
+    return r`
       <div class="field">
         <label class="label" for="authui-email">${this.t("email")}</label>
         <input
@@ -2675,7 +2819,7 @@ let $ = class extends A {
     `;
   }
   codeField() {
-    return s`
+    return r`
       <div class="field">
         <label class="label" for="authui-code">${this.t("code")}</label>
         <input
@@ -2684,6 +2828,8 @@ let $ = class extends A {
           type="text"
           inputmode="numeric"
           autocomplete="one-time-code"
+          maxlength="6"
+          pattern="[0-9]*"
           required
           .value=${this.code}
           @input=${this.bind("code")}
@@ -2693,32 +2839,32 @@ let $ = class extends A {
   }
   legal() {
     const e = this.config?.legal;
-    return !e?.termsUrl && !e?.privacyUrl ? o : s`<p class="legal">
+    return !e?.termsUrl && !e?.privacyUrl ? c : r`<p class="legal">
       ${this.t("agreeTo")}
-      ${e.termsUrl ? s`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : o}
-      ${e.termsUrl && e.privacyUrl ? s` ${this.t("and")} ` : o}
-      ${e.privacyUrl ? s`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : o}.
+      ${e.termsUrl ? r`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : c}
+      ${e.termsUrl && e.privacyUrl ? r` ${this.t("and")} ` : c}
+      ${e.privacyUrl ? r`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : c}.
     </p>`;
   }
   backLink(e = "sign-in") {
-    return s`<div class="links">
+    return r`<div class="links">
       <button type="button" class="btn btn-link" @click=${() => this.go(e)}>
-        ${c.arrowLeft} ${this.t("back")}
+        ${o.arrowLeft} ${this.t("back")}
       </button>
     </div>`;
   }
   renderStep() {
     if (!this.auth.configured)
-      return s`<div class="alert alert-error" role="alert">
-        ${c.alert}
+      return r`<div class="alert alert-error" role="alert">
+        ${o.alert}
         <div class="alert-body">${this.t("errorNotConfigured")}</div>
       </div>`;
     if (this.auth.status === "loading")
-      return s`<div class="empty"><span class="spinner"></span></div>`;
+      return r`<div class="empty"><span class="spinner"></span></div>`;
     if (this.auth.status === "signed-in" && this.step !== "mfa") return this.renderSignedIn();
     switch (this.step) {
       case "sign-up":
-        return this.renderSignUp();
+        return this.config?.signUp === !1 ? this.renderSignIn() : this.renderSignUp();
       case "forgot-password":
         return this.renderForgot();
       case "reset-password":
@@ -2737,30 +2883,32 @@ let $ = class extends A {
   }
   renderSignedIn() {
     const e = this.auth.user, t = e.name || e.email || e.phone || this.t("guestAccount");
-    return s`
+    return r`
       <div class="stack">
         <div class="row">
           <div class="inline">
-            <span class="avatar">${t[0] ?? "?"}</span>
+            <span class="avatar">${Q(t)}</span>
             <div class="row-main">
-              <span class="row-title">${t}</span>
-              ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : o}
+              <span class="row-title" title=${t}>${t}</span>
+              ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : c}
             </div>
           </div>
         </div>
         ${this.renderError()}
         <div class="stack-sm">
-          ${this.config?.successUrl ? s`<a class="btn btn-primary btn-block" href=${this.config.successUrl}
+          ${this.config?.successUrl ? r`<a class="btn btn-primary btn-block" href=${this.config.successUrl}
                   >${this.t("continue")}</a
-                >` : o}
+                >` : c}
           <button
             class="btn btn-outline btn-block"
-            @click=${() => this.fire("authui-open", { view: "account" })}
+            @click=${() => {
+      this.embedded ? this.fire("authui-open", { view: "account" }) : H("account");
+    }}
           >
-            ${c.settings} ${this.t("manageAccount")}
+            ${o.settings} ${this.t("manageAccount")}
           </button>
           <button class="btn btn-ghost btn-block" @click=${this.onSignOut} ?disabled=${this.busy}>
-            ${c.logOut} ${this.t("signOut")}
+            ${o.logOut} ${this.t("signOut")}
           </button>
         </div>
       </div>
@@ -2768,21 +2916,21 @@ let $ = class extends A {
   }
   renderProviders() {
     const e = this.config?.methods?.oauth ?? [];
-    if (e.length === 0) return o;
+    if (e.length === 0) return c;
     const t = e.length > 2;
-    return s`
+    return r`
       <div class="providers ${t ? "two" : ""}">
         ${e.map(
-      (i) => s`<button
+      (i) => r`<button
               type="button"
               class="btn btn-outline"
               @click=${() => this.onOAuth(i)}
               ?disabled=${this.busy}
-              aria-label=${this.t("continueWith", { provider: D(i) })}
+              aria-label=${this.t("continueWith", { provider: R(i) })}
             >
-              ${K(i)}
+              ${Y(i)}
               <span
-                >${t ? D(i) : this.t("continueWith", { provider: D(i) })}</span
+                >${t ? R(i) : this.t("continueWith", { provider: R(i) })}</span
               >
             </button>`
     )}
@@ -2790,23 +2938,23 @@ let $ = class extends A {
     `;
   }
   renderSignIn() {
-    const e = this.config?.methods ?? {}, t = e.emailPassword !== !1, i = (e.oauth?.length ?? 0) > 0, r = [
-      e.magicUrl ? { step: "magic-url", icon: c.link, label: this.t("sendMagicLink") } : null,
-      e.emailOtp ? { step: "email-otp", icon: c.mail, label: this.t("continueWithEmail") } : null,
-      e.phone ? { step: "phone", icon: c.smartphone, label: this.t("continueWithPhone") } : null
+    const e = this.config?.methods ?? {}, t = e.emailPassword !== !1, i = (e.oauth?.length ?? 0) > 0, s = [
+      e.magicUrl ? { step: "magic-url", icon: o.link, label: this.t("sendMagicLink") } : null,
+      e.emailOtp ? { step: "email-otp", icon: o.mail, label: this.t("continueWithEmail") } : null,
+      e.phone ? { step: "phone", icon: o.smartphone, label: this.t("continueWithPhone") } : null
     ].filter(Boolean);
-    return s`
+    return r`
       <div class="stack">
         ${this.renderProviders()}
-        ${i && (t || r.length > 0) ? s`<div class="separator-text">${this.t("or")}</div>` : o}
-        ${t ? s`<form class="form" @submit=${this.onSignIn} novalidate>
+        ${i && (t || s.length > 0) ? r`<div class="separator-text">${this.t("or")}</div>` : c}
+        ${t ? r`<form class="form" @submit=${this.onSignIn} novalidate>
                 ${this.emailField()}
                 ${this.passwordField({ label: this.t("password"), autocomplete: "current-password", id: "authui-password", field: "password", forgot: !0 })}
                 ${this.renderError()} ${this.submitButton(this.t("signIn"))}
               </form>` : this.renderError()}
-        ${r.length > 0 ? s`<div class="stack-sm">
-                ${r.map(
-      (a) => s`<button
+        ${s.length > 0 ? r`<div class="stack-sm">
+                ${s.map(
+      (a) => r`<button
                       type="button"
                       class="btn btn-secondary btn-block"
                       @click=${() => this.go(a.step)}
@@ -2814,32 +2962,32 @@ let $ = class extends A {
                       ${a.icon} ${a.label}
                     </button>`
     )}
-              </div>` : o}
-        ${e.anonymous ? s`<button
+              </div>` : c}
+        ${e.anonymous ? r`<button
                 type="button"
                 class="btn btn-ghost btn-block"
                 @click=${this.onGuest}
                 ?disabled=${this.busy}
               >
-                ${c.ghost} ${this.t("continueAsGuest")}
-              </button>` : o}
-        ${t && this.config?.signUp !== !1 ? s`<div class="links">
+                ${o.ghost} ${this.t("continueAsGuest")}
+              </button>` : c}
+        ${t && this.config?.signUp !== !1 ? r`<div class="links">
                 <span>${this.t("noAccount")}</span>
                 <button type="button" class="btn btn-link" @click=${() => this.go("sign-up")}>
                   ${this.t("signUp")}
                 </button>
-              </div>` : o}
+              </div>` : c}
         ${this.legal()}
       </div>
     `;
   }
   renderSignUp() {
-    return s`
+    return r`
       <div class="stack">
         ${this.renderProviders()}
-        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? s`<div class="separator-text">${this.t("or")}</div>` : o}
+        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? r`<div class="separator-text">${this.t("or")}</div>` : c}
         <form class="form" @submit=${this.onSignUp} novalidate>
-          ${this.config?.requireName !== !1 ? s`<div class="field">
+          ${this.config?.requireName !== !1 ? r`<div class="field">
                   <label class="label" for="authui-name">${this.t("name")}</label>
                   <input
                     class="input"
@@ -2850,7 +2998,7 @@ let $ = class extends A {
                     .value=${this.name}
                     @input=${this.bind("name")}
                   />
-                </div>` : o}
+                </div>` : c}
           ${this.emailField()}
           ${this.passwordField({ label: this.t("password"), autocomplete: "new-password", id: "authui-password", field: "password", hint: this.t("passwordHint") })}
           ${this.renderError()} ${this.submitButton(this.t("createAccount"))}
@@ -2866,7 +3014,7 @@ let $ = class extends A {
     `;
   }
   renderForgot() {
-    return s`
+    return r`
       <div class="stack">
         <form class="form" @submit=${this.onForgot} novalidate>
           ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendResetLink"))}
@@ -2876,52 +3024,91 @@ let $ = class extends A {
     `;
   }
   renderReset() {
-    return this.recovery ? s`
+    return this.recovery ? r`
       <div class="stack">
         <form class="form" @submit=${this.onReset} novalidate>
           ${this.passwordField({ label: this.t("newPassword"), autocomplete: "new-password", id: "authui-password", field: "password", hint: this.t("passwordHint") })}
           ${this.passwordField({ label: this.t("confirmPassword"), autocomplete: "new-password", id: "authui-password-confirm", field: "passwordConfirm" })}
           ${this.renderError()} ${this.submitButton(this.t("resetPassword"))}
         </form>
-        ${this.backLink()}
+        <div class="links">
+          <button
+            type="button"
+            class="btn btn-link"
+            @click=${() => {
+      this.step = "sign-in", this.error = "", this.notice = null, this.focusOnStep = !0, this.fire("authui-view", { view: "sign-in" });
+    }}
+          >
+            ${o.arrowLeft} ${this.t("back")}
+          </button>
+        </div>
       </div>
-    ` : s`<div class="stack">
+    ` : r`<div class="stack">
         <div class="alert alert-error" role="alert">
-          ${c.alert}
+          ${o.alert}
           <div class="alert-body">${this.t("errorInvalidToken")}</div>
         </div>
-        ${this.backLink()}
+        <div class="links">
+          <button
+            type="button"
+            class="btn btn-link"
+            @click=${() => {
+      this.go("forgot-password");
+    }}
+          >
+            ${this.t("requestNewLink")}
+          </button>
+        </div>
       </div>`;
   }
   phraseBox(e) {
-    return e ? s`<div class="alert alert-info">
-      ${c.shield}
+    return e ? r`<div class="alert alert-info">
+      ${o.shield}
       <div class="alert-title">
         ${this.t("securityPhrase")}: <span class="code">${e}</span>
       </div>
       <div class="alert-body">${this.t("securityPhraseHint")}</div>
-    </div>` : o;
+    </div>` : c;
   }
   renderMagicUrl() {
-    return this.token ? s`<div class="stack">
+    return this.token ? r`<div class="stack">
         <div class="alert alert-success" role="status">
-          ${c.mail}
+          ${o.mail}
           <div class="alert-body">${this.t("magicLinkSent", { email: this.token.target })}</div>
         </div>
         ${this.phraseBox(this.token.phrase)} ${this.backLink()}
-      </div>` : s`
+      </div>` : r`
       <div class="stack">
         <form class="form" @submit=${this.onMagicUrl} novalidate>
           ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendMagicLink"))}
         </form>
-        ${this.backLink()}
+        ${this.backLink()} ${this.legal()}
       </div>
     `;
   }
+  async onResendCode() {
+    const e = this.token;
+    !e || Date.now() < this.resendCooldownUntil || (this.error = "", await this.run(async () => {
+      if (e.kind === "phone") {
+        const t = await n.sendPhoneOtp(e.target);
+        this.token = { userId: t.userId, kind: "phone", target: e.target };
+      } else {
+        const t = await n.sendEmailOtp(e.target);
+        this.token = {
+          userId: t.userId,
+          kind: "email-otp",
+          target: e.target,
+          phrase: t.phrase
+        };
+      }
+      this.resendCooldownUntil = Date.now() + 3e4, window.setTimeout(() => this.requestUpdate(), 3e4);
+    }));
+  }
   renderCodeEntry() {
-    return s`
+    const e = this.token?.kind === "phone", t = Date.now() < this.resendCooldownUntil;
+    return r`
       <div class="alert alert-info" role="status">
-        ${c.mail}
+        ${e ? o.smartphone : o.mail}
         <div class="alert-body">${this.t("codeSent", { target: this.token.target })}</div>
       </div>
       ${this.phraseBox(this.token.phrase)}
@@ -2929,28 +3116,41 @@ let $ = class extends A {
         ${this.codeField()} ${this.renderError()} ${this.submitButton(this.t("verifyCode"))}
       </form>
       <div class="links">
-        <button type="button" class="btn btn-link" @click=${() => this.token = null}>
-          ${this.t("sendCode")}
+        <button
+          type="button"
+          class="btn btn-link"
+          ?disabled=${t || this.busy}
+          @click=${() => {
+      this.onResendCode();
+    }}
+        >
+          ${this.t("resendCode")}
         </button>
         <span aria-hidden="true">·</span>
-        <button type="button" class="btn btn-link" @click=${() => this.go("sign-in")}>
-          ${this.t("back")}
+        <button
+          type="button"
+          class="btn btn-link"
+          @click=${() => {
+      this.token = null, this.error = "";
+    }}
+        >
+          ${e ? this.t("useDifferentPhone") : this.t("useDifferentEmail")}
         </button>
       </div>
     `;
   }
   renderEmailOtp() {
-    return this.token ? s`<div class="stack">${this.renderCodeEntry()}</div>` : s`
+    return this.token ? r`<div class="stack">${this.renderCodeEntry()}</div>` : r`
       <div class="stack">
         <form class="form" @submit=${this.onEmailOtp} novalidate>
           ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
         </form>
-        ${this.backLink()}
+        ${this.backLink()} ${this.legal()}
       </div>
     `;
   }
   renderPhone() {
-    return this.token ? s`<div class="stack">${this.renderCodeEntry()}</div>` : s`
+    return this.token ? r`<div class="stack">${this.renderCodeEntry()}</div>` : r`
       <div class="stack">
         <form class="form" @submit=${this.onPhoneOtp} novalidate>
           <div class="field">
@@ -2968,7 +3168,7 @@ let $ = class extends A {
           </div>
           ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
         </form>
-        ${this.backLink()}
+        ${this.backLink()} ${this.legal()}
       </div>
     `;
   }
@@ -2978,40 +3178,40 @@ let $ = class extends A {
       const i = [
         {
           factor: "totp",
-          icon: c.smartphone,
+          icon: o.smartphone,
           label: this.t("mfaUseAuthenticator"),
           available: e?.totp ?? !0
         },
         {
           factor: "email",
-          icon: c.mail,
+          icon: o.mail,
           label: this.t("mfaUseEmail"),
           available: e?.email ?? !0
         },
         {
           factor: "phone",
-          icon: c.phone,
+          icon: o.phone,
           label: this.t("mfaUsePhone"),
           available: e?.phone ?? !0
         },
         {
           factor: "recoverycode",
-          icon: c.key,
+          icon: o.key,
           label: this.t("mfaUseRecoveryCode"),
           available: e?.recoveryCode ?? !0
         }
       ];
-      return s`
+      return r`
         <div class="stack">
           <div class="stack-sm">
-            ${i.filter((r) => r.available).map(
-        (r) => s`<button
+            ${i.filter((s) => s.available).map(
+        (s) => r`<button
                     type="button"
                     class="choice"
-                    @click=${() => this.onChooseFactor(r.factor)}
+                    @click=${() => this.onChooseFactor(s.factor)}
                     ?disabled=${this.busy}
                   >
-                    ${r.icon}<span class="choice-title">${r.label}</span>
+                    ${s.icon}<span class="choice-title">${s.label}</span>
                   </button>`
       )}
           </div>
@@ -3025,10 +3225,10 @@ let $ = class extends A {
       `;
     }
     const t = this.challenge.factor === "recoverycode";
-    return s`
+    return r`
       <div class="stack">
         <form class="form" @submit=${this.onVerifyFactor} novalidate>
-          ${t ? s`<div class="field">
+          ${t ? r`<div class="field">
                   <label class="label" for="authui-code">${this.t("recoveryCode")}</label>
                   <input
                     class="input mono"
@@ -3044,7 +3244,7 @@ let $ = class extends A {
         </form>
         <div class="links">
           <button type="button" class="btn btn-link" @click=${() => this.challenge = null}>
-            ${c.arrowLeft} ${this.t("back")}
+            ${o.arrowLeft} ${this.t("back")}
           </button>
           <span aria-hidden="true">·</span>
           <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
@@ -3055,102 +3255,127 @@ let $ = class extends A {
     `;
   }
 };
-$.styles = [...A.styles, At];
-C([
-  f({ type: String })
+$.styles = [...A.styles, Ut];
+k([
+  m({ type: String })
 ], $.prototype, "view", 2);
-C([
-  f({ type: Boolean })
+k([
+  m({ type: Boolean })
 ], $.prototype, "embedded", 2);
-C([
+k([
   d()
 ], $.prototype, "step", 2);
-C([
+k([
   d()
 ], $.prototype, "busy", 2);
-C([
+k([
   d()
 ], $.prototype, "error", 2);
-C([
+k([
   d()
 ], $.prototype, "notice", 2);
-C([
+k([
   d()
 ], $.prototype, "showPassword", 2);
-C([
+k([
   d()
 ], $.prototype, "token", 2);
-C([
+k([
+  d()
+], $.prototype, "resendCooldownUntil", 2);
+k([
   d()
 ], $.prototype, "challenge", 2);
-C([
+k([
   d()
 ], $.prototype, "recovery", 2);
-C([
-  rt("form input:not([type=hidden])")
+k([
+  ct("form input:not([type=hidden])")
 ], $.prototype, "firstInput", 2);
-$ = C([
-  _("authui-sign-in")
+$ = k([
+  O("authui-sign-in")
 ], $);
-var It = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, g = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? _t(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && It(t, i, a), a;
+var Ot = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ft(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && Ot(t, i, a), a;
 };
-let p = class extends A {
+let u = class extends A {
   constructor() {
-    super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = !0, this.confirmDelete = !1, this.factorsLoading = !1, this.onUpdateName = (e) => {
-      e.preventDefault(), this.run("name", () => n.updateName(this.nameInput), this.t("done"));
+    super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = null, this.logsProbeStarted = !1, this.confirmDelete = !1, this.confirmRegenerate = !1, this.confirmRemoveAuthenticator = !1, this.confirmSignOutAll = !1, this.confirmDisconnectId = null, this.verifyEmailCooldownUntil = 0, this.onTabsKeydown = (e) => {
+      const t = [...this.renderRoot?.querySelectorAll('[role="tab"]') ?? []];
+      if (!t.length) return;
+      const i = t.findIndex((h) => h.getAttribute("aria-selected") === "true");
+      let s = i;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") s = (i + 1) % t.length;
+      else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+        s = (i - 1 + t.length) % t.length;
+      else if (e.key === "Home") s = 0;
+      else if (e.key === "End") s = t.length - 1;
+      else return;
+      e.preventDefault();
+      const a = t[s].id.replace("authui-tab-", "");
+      this.select(a), requestAnimationFrame(() => t[s]?.focus());
+    }, this.noticeTimer = null, this.factorsLoading = !1, this.onUpdateName = (e) => {
+      e.preventDefault(), this.requireValid(e) && this.run("name", () => n.updateName(this.nameInput), this.t("nameUpdated"));
     }, this.onUpdateEmail = (e) => {
-      e.preventDefault(), this.run(
+      e.preventDefault(), this.requireValid(e) && this.run(
         "email",
         async () => {
           await n.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
         },
-        this.t("done")
+        this.t("emailUpdated")
       );
     }, this.onUpdatePhone = (e) => {
-      e.preventDefault(), this.run(
+      e.preventDefault(), this.requireValid(e) && this.run(
         "phone",
         async () => {
           await n.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
         },
-        this.t("done")
+        this.t("phoneUpdated")
       );
     }, this.onConvertGuest = (e) => {
-      e.preventDefault(), this.run(
+      e.preventDefault(), this.requireValid(e) && this.run(
         "guest",
         async () => {
           await n.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
         },
-        this.t("done")
+        this.t("accountConverted")
       );
     }, this.onSendVerification = () => {
-      this.run("verify", () => n.sendEmailVerification(), this.t("verificationSent"));
+      Date.now() < this.verifyEmailCooldownUntil || this.run(
+        "verify",
+        async () => {
+          await n.sendEmailVerification(), this.verifyEmailCooldownUntil = Date.now() + 45e3, window.setTimeout(() => this.requestUpdate(), 45e3);
+        },
+        this.t("verificationSent")
+      );
     }, this.onSendPhoneVerification = () => {
       this.run("verify-phone", async () => {
         await n.sendPhoneVerification(), this.phoneCodeSent = !0;
       });
     }, this.onConfirmPhoneVerification = (e) => {
-      e.preventDefault(), this.run(
+      e.preventDefault(), this.requireValid(e) && this.run(
         "verify-phone-code",
         async () => {
           await n.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
         },
-        this.t("done")
+        this.t("phoneVerified")
       );
     }, this.onChangePassword = (e) => {
-      if (e.preventDefault(), this.newPassword !== this.newPasswordConfirm) {
-        this.errors = { ...this.errors, password: this.t("errorPasswordMismatch") };
-        return;
+      if (e.preventDefault(), !!this.requireValid(e)) {
+        if (this.newPassword !== this.newPasswordConfirm) {
+          this.errors = { ...this.errors, password: this.t("errorPasswordMismatch") };
+          return;
+        }
+        this.run(
+          "password",
+          async () => {
+            await n.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
+          },
+          this.t("passwordUpdated")
+        );
       }
-      this.run(
-        "password",
-        async () => {
-          await n.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
-        },
-        this.t("passwordUpdated")
-      );
     }, this.onToggleMfa = () => {
       const e = !this.user?.mfa;
       this.run("mfa", async () => {
@@ -3161,15 +3386,19 @@ let p = class extends A {
         this.authenticator = await n.addAuthenticator(), this.authenticatorCode = "";
       });
     }, this.onVerifyAuthenticator = (e) => {
-      e.preventDefault(), this.run(
+      e.preventDefault(), this.requireValid(e) && this.run(
         "authenticator-code",
         async () => {
           await n.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
         },
-        this.t("done")
+        this.t("authenticatorAdded")
       );
     }, this.onRemoveAuthenticator = () => {
-      this.run("remove-authenticator", async () => {
+      if (!this.confirmRemoveAuthenticator) {
+        this.confirmRemoveAuthenticator = !0;
+        return;
+      }
+      this.confirmRemoveAuthenticator = !1, this.run("remove-authenticator", async () => {
         await n.removeAuthenticator(), await this.loadFactors();
       });
     }, this.onRecoveryCodes = () => {
@@ -3177,13 +3406,17 @@ let p = class extends A {
         try {
           this.recoveryCodes = await n.createRecoveryCodes();
         } catch (e) {
-          if (!B(e, v.recoveryCodesExist)) throw e;
+          if (!z(e, v.recoveryCodesExist)) throw e;
           this.recoveryCodes = await n.getRecoveryCodes();
         }
         await this.loadFactors();
       });
     }, this.onRegenerateRecoveryCodes = () => {
-      this.run("recovery", async () => {
+      if (!this.confirmRegenerate) {
+        this.confirmRegenerate = !0;
+        return;
+      }
+      this.confirmRegenerate = !1, this.run("recovery", async () => {
         this.recoveryCodes = await n.regenerateRecoveryCodes();
       });
     }, this.onCopyCodes = async () => {
@@ -3192,6 +3425,15 @@ let p = class extends A {
           await navigator.clipboard.writeText(this.recoveryCodes.join(`
 `)), this.copied = !0, setTimeout(() => this.copied = !1, 1500);
         } catch {
+          this.setNotice("error", this.t("copyFailed"));
+        }
+    }, this.onCopySecret = async () => {
+      const e = this.authenticator?.secret;
+      if (e)
+        try {
+          await navigator.clipboard.writeText(e), this.copied = !0, setTimeout(() => this.copied = !1, 1500);
+        } catch {
+          this.setNotice("error", this.t("copyFailed"));
         }
     }, this.onStepUpFactor = (e) => {
       this.run("stepup", async () => {
@@ -3199,19 +3441,31 @@ let p = class extends A {
         this.stepUp = { ...this.stepUp, challenge: { id: t.$id, factor: e } }, this.stepUpCode = "";
       });
     }, this.onStepUpVerify = (e) => {
-      e.preventDefault();
+      if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.stepUp;
       t?.challenge && this.run("stepup-code", async () => {
         await n.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", await t.retry();
       });
     }, this.onDeleteSession = (e) => {
       this.run(`session-${e}`, async () => {
-        await n.signOut(e), this.sessions = (this.sessions ?? []).filter((t) => t.$id !== e);
+        if ((this.sessions ?? []).some((i) => i.$id === e && i.current)) {
+          await n.signOut(), this.sessions = [];
+          return;
+        }
+        await n.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
       });
     }, this.onSignOutAll = () => {
-      this.run("sessions-all", () => n.signOutEverywhere());
+      if (!this.confirmSignOutAll) {
+        this.confirmSignOutAll = !0;
+        return;
+      }
+      this.confirmSignOutAll = !1, this.run("sessions-all", () => n.signOutEverywhere());
     }, this.onDeleteIdentity = (e) => {
-      this.run(`identity-${e}`, async () => {
+      if (this.confirmDisconnectId !== e) {
+        this.confirmDisconnectId = e;
+        return;
+      }
+      this.confirmDisconnectId = null, this.run(`identity-${e}`, async () => {
         await n.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
       });
     }, this.onDeleteAccount = () => {
@@ -3226,7 +3480,7 @@ let p = class extends A {
   }
   /** Lazily load data for the active tab once a user is available. */
   ensureLoaded() {
-    !this.user || this.busy || (this.active === "sessions" && this.sessions === null ? this.loadSessions() : this.active === "connections" && this.identities === null ? this.loadIdentities() : this.active === "activity" && this.logs === null ? this.loadLogs() : this.active === "security" && this.factors === null && this.loadFactors());
+    !this.user || this.busy || (this.logsProbeStarted || this.probeLogsSupport(), this.active === "sessions" && this.sessions === null ? this.loadSessions() : this.active === "connections" && this.identities === null ? this.loadIdentities() : this.active === "activity" && this.logsSupported === !0 && this.logs === null ? this.loadLogs() : this.active === "activity" && this.logsSupported === !1 ? this.active = "profile" : this.active === "security" && this.factors === null && this.loadFactors());
   }
   hydrate() {
     const e = this.auth.user;
@@ -3242,16 +3496,36 @@ let p = class extends A {
   select(e) {
     this.active = e, this.notice = null, this.errors = {};
   }
-  /** Run an action with a busy key, surfacing errors under that key. Handles MFA step-up. */
+  updated(e) {
+    e.has("active") && requestAnimationFrame(() => {
+      const t = this.renderRoot.querySelector(
+        '.tab[aria-selected="true"]'
+      );
+      t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
+    });
+  }
+  setNotice(e, t) {
+    this.notice = { tone: e, message: t }, this.noticeTimer && clearTimeout(this.noticeTimer), this.noticeTimer = setTimeout(() => {
+      this.notice = null, this.noticeTimer = null;
+    }, 8e3);
+  }
+  requireValid(e) {
+    const t = e.target;
+    return !(t && typeof t.reportValidity == "function" && !t.reportValidity());
+  }
   async run(e, t, i) {
     if (!this.busy) {
-      this.busy = e, this.errors = { ...this.errors, [e]: "" };
+      this.busy = e, this.errors = { ...this.errors, [e]: "" }, this.notice = null;
       try {
-        await t(), i && (this.notice = { tone: "success", message: i });
-      } catch (r) {
-        B(r, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
+        await t(), i && this.setNotice("success", i);
+      } catch (s) {
+        z(s, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
           ...this.errors,
-          [e]: at(r, this.strings, e.includes("code") ? "code" : "link")
+          [e]: Z(
+            s,
+            this.strings,
+            e.includes("code") ? "code" : e === "password" ? "password" : "link"
+          )
         };
       } finally {
         this.busy = "";
@@ -3269,12 +3543,27 @@ let p = class extends A {
       this.identities = await n.listIdentities();
     });
   }
+  /** Probe once so Activity is never shown on servers without /account/logs. */
+  async probeLogsSupport() {
+    if (!this.logsProbeStarted) {
+      this.logsProbeStarted = !0;
+      try {
+        this.logs = await n.listLogs(), this.logsSupported = !0;
+      } catch {
+        this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
+      }
+    }
+  }
   async loadLogs() {
+    if (this.logsSupported === !1) {
+      this.active === "activity" && (this.active = "profile");
+      return;
+    }
     this.busy = "logs";
     try {
       this.logs = await n.listLogs();
     } catch {
-      this.logsSupported = !1, this.logs = [];
+      this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
     } finally {
       this.busy = "";
     }
@@ -3305,14 +3594,16 @@ let p = class extends A {
   // ─────────────────────────── render ───────────────────────────
   render() {
     if (!this.auth.configured)
-      return s`<div class="alert alert-error" role="alert">
-        ${c.alert}
+      return r`<div class="alert alert-error" role="alert">
+        ${o.alert}
         <div class="alert-body">${this.t("errorNotConfigured")}</div>
       </div>`;
     if (this.auth.status === "loading")
-      return s`<div class="empty"><span class="spinner"></span></div>`;
+      return r`<div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
+        <div class="empty"><span class="spinner"></span></div>
+      </div>`;
     if (!this.user)
-      return s`<div class="panel ${this.embedded ? "embedded" : ""}">
+      return r`<div class="panel ${this.embedded ? "embedded" : ""}">
         <authui-sign-in embedded></authui-sign-in>
       </div>`;
     const e = [
@@ -3322,46 +3613,65 @@ let p = class extends A {
       { id: "connections", label: this.t("connections") },
       ...this.logsSupported ? [{ id: "activity", label: this.t("activity") }] : []
     ];
-    return s`
+    return r`
       <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
         ${this.renderIdentity()}
-        <div class="tabs" role="tablist">
+        <div class="tabs" role="tablist" @keydown=${this.onTabsKeydown}>
           ${e.map(
-      (t) => s`<button
+      (t) => r`<button
                 class="tab"
                 role="tab"
+                id=${`authui-tab-${t.id}`}
+                aria-controls=${`authui-panel-${t.id}`}
                 aria-selected=${this.active === t.id ? "true" : "false"}
+                tabindex=${this.active === t.id ? "0" : "-1"}
                 @click=${() => this.select(t.id)}
               >
                 ${t.label}
               </button>`
     )}
         </div>
-        ${this.notice ? s`<div class="alert alert-${this.notice.tone}" role="status">
-                ${this.notice.tone === "success" ? c.checkCircle : c.info}
+        ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
+                ${this.notice.tone === "success" ? o.checkCircle : o.info}
                 <div class="alert-body">${this.notice.message}</div>
-              </div>` : o}
-        ${this.stepUp ? this.renderStepUp() : this.renderTab()}
+                <button
+                  class="btn btn-ghost btn-icon dismiss"
+                  @click=${() => {
+      this.notice = null, this.noticeTimer && (clearTimeout(this.noticeTimer), this.noticeTimer = null);
+    }}
+                  aria-label=${this.t("close")}
+                >
+                  ${o.x}
+                </button>
+              </div>` : c}
+        ${this.stepUp ? this.renderStepUp() : r`<div
+                class="tabpanel"
+                role="tabpanel"
+                id=${`authui-panel-${this.active}`}
+                aria-labelledby=${`authui-tab-${this.active}`}
+              >
+                ${this.renderTab()}
+              </div>`}
       </div>
     `;
   }
   renderIdentity() {
     const e = this.user, t = e.name || e.email || e.phone || this.t("guestAccount");
-    return s`
+    return r`
       <div class="between">
         <div class="identity">
-          <span class="avatar">${t[0] ?? "?"}</span>
+          <span class="avatar">${Q(t)}</span>
           <div class="row-main">
-            <span class="row-title">
+            <span class="row-title" title=${t}>
               ${t}
-              ${e.mfa ? s`<span class="badge badge-success">${c.shieldCheck} MFA</span>` : o}
-              ${n.isPreview ? s`<span class="badge badge-info">${this.t("preview")}</span>` : o}
+              ${e.mfa ? r`<span class="badge badge-success">${o.shieldCheck} ${this.t("mfaBadge")}</span>` : c}
+              ${n.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : c}
             </span>
-            ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : o}
+            ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : c}
           </div>
         </div>
         <button class="btn btn-outline btn-sm" @click=${() => n.signOut()}>
-          ${c.logOut} ${this.t("signOut")}
+          ${o.logOut} ${this.t("signOut")}
         </button>
       </div>
     `;
@@ -3382,35 +3692,35 @@ let p = class extends A {
   }
   error(e) {
     const t = this.errors[e];
-    return t ? s`<div class="alert alert-error" role="alert">
-          ${c.alert}
+    return t ? r`<div class="alert alert-error" role="alert">
+          ${o.alert}
           <div class="alert-body">${t}</div>
-        </div>` : o;
+        </div>` : c;
   }
   spinner(e) {
-    return this.busy === e ? s`<span class="spinner" aria-hidden="true"></span>` : o;
+    return this.busy === e ? r`<span class="spinner" aria-hidden="true"></span>` : c;
   }
-  card(e, t, i, r, a = !1) {
-    return s`<section class="card ${a ? "card-danger" : ""}">
+  card(e, t, i, s, a = !1) {
+    return r`<section class="card ${a ? "card-danger" : ""}">
       <div class="card-header">
         <h3 class="card-title">${e}</h3>
-        ${t ? s`<p class="card-description">${t}</p>` : o}
+        ${t ? r`<p class="card-description">${t}</p>` : c}
       </div>
       <div class="card-body">${i}</div>
-      ${r ? s`<div class="card-footer">${r}</div>` : o}
+      ${s ? r`<div class="card-footer">${s}</div>` : c}
     </section>`;
   }
   verifiedBadge(e) {
-    return e ? s`<span class="badge badge-success">${c.check} ${this.t("verified")}</span>` : s`<span class="badge badge-warning">${this.t("unverified")}</span>`;
+    return e ? r`<span class="badge badge-success">${o.check} ${this.t("verified")}</span>` : r`<span class="badge badge-warning">${this.t("unverified")}</span>`;
   }
   // ── Profile ──
   renderProfile() {
     const e = this.user;
-    return this.isGuest ? s`<div class="section">
+    return this.isGuest ? r`<div class="section">
         ${this.card(
       this.t("guestAccount"),
       this.t("guestAccountDescription"),
-      s`<form class="form" id="guest-form" @submit=${this.onConvertGuest} novalidate>
+      r`<form class="form" id="guest-form" @submit=${this.onConvertGuest} novalidate>
             <div class="field">
               <label class="label" for="guest-name">${this.t("name")}</label>
               <input
@@ -3449,7 +3759,7 @@ let p = class extends A {
             </div>
             ${this.error("guest")}
           </form>`,
-      s`<button
+      r`<button
             class="btn btn-primary btn-sm"
             type="submit"
             form="guest-form"
@@ -3458,11 +3768,11 @@ let p = class extends A {
             ${this.spinner("guest")} ${this.t("createAccount")}
           </button>`
     )}
-      </div>` : s`<div class="section">
+      </div>` : r`<div class="section">
       ${this.card(
       this.t("name"),
       void 0,
-      s`<form class="form" id="name-form" @submit=${this.onUpdateName} novalidate>
+      r`<form class="form" id="name-form" @submit=${this.onUpdateName} novalidate>
           <div class="field">
             <label class="label" for="acc-name">${this.t("name")}</label>
             <input
@@ -3476,11 +3786,11 @@ let p = class extends A {
           </div>
           ${this.error("name")}
         </form>`,
-      s`<button
+      r`<button
           class="btn btn-primary btn-sm"
           type="submit"
           form="name-form"
-          ?disabled=${!!this.busy || this.nameInput === e.name}
+          ?disabled=${!!this.busy || !this.nameInput.trim() || this.nameInput === e.name}
         >
           ${this.spinner("name")} ${this.t("update")}
         </button>`
@@ -3488,11 +3798,11 @@ let p = class extends A {
       ${this.card(
       this.t("email"),
       void 0,
-      s`<form class="form" id="email-form" @submit=${this.onUpdateEmail} novalidate>
+      r`<form class="form" id="email-form" @submit=${this.onUpdateEmail} novalidate>
           <div class="field">
             <label class="label" for="acc-email"
               >${this.t("email")}
-              ${e.email ? this.verifiedBadge(e.emailVerification) : o}</label
+              ${e.email ? this.verifiedBadge(e.emailVerification) : c}</label
             >
             <input
               class="input"
@@ -3504,34 +3814,43 @@ let p = class extends A {
               required
             />
           </div>
-          ${this.emailInput !== e.email ? s`<div class="field">
-                  <label class="label" for="acc-email-password">${this.t("currentPassword")}</label>
+          ${this.emailInput !== e.email ? r`<div class="field">
+                  <label class="label" for="acc-email-password"
+                    >${e.passwordUpdate ? this.t("currentPassword") : this.t("createPassword")}</label
+                  >
                   <input
                     class="input"
                     id="acc-email-password"
                     type="password"
                     .value=${this.emailPassword}
                     @input=${this.bind("emailPassword")}
-                    autocomplete="current-password"
+                    autocomplete=${e.passwordUpdate ? "current-password" : "new-password"}
                     required
                   />
-                </div>` : o}
+                  ${e.passwordUpdate ? c : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
+                </div>` : c}
           ${this.error("email")} ${this.error("verify")}
         </form>`,
-      s`
-          ${e.email && !e.emailVerification ? s`<button
+      r`
+          ${e.email && !e.emailVerification ? r`<button
                   class="btn btn-outline btn-sm"
                   type="button"
                   @click=${this.onSendVerification}
-                  ?disabled=${!!this.busy}
+                  ?disabled=${!!this.busy || Date.now() < this.verifyEmailCooldownUntil}
                 >
-                  ${this.spinner("verify")} ${this.t("verifyEmail")}
-                </button>` : o}
+                  ${this.spinner("verify")}
+                  ${Date.now() < this.verifyEmailCooldownUntil ? this.t("verificationResendIn", {
+        seconds: Math.max(
+          1,
+          Math.ceil((this.verifyEmailCooldownUntil - Date.now()) / 1e3)
+        )
+      }) : this.t("verifyEmail")}
+                </button>` : c}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
             form="email-form"
-            ?disabled=${!!this.busy || this.emailInput === e.email}
+            ?disabled=${!!this.busy || !this.emailInput.trim() || this.emailInput === e.email}
           >
             ${this.spinner("email")} ${this.t("update")}
           </button>
@@ -3540,11 +3859,11 @@ let p = class extends A {
       ${this.card(
       this.t("phone"),
       void 0,
-      s`<form class="form" id="phone-form" @submit=${this.onUpdatePhone} novalidate>
+      r`<form class="form" id="phone-form" @submit=${this.onUpdatePhone} novalidate>
           <div class="field">
             <label class="label" for="acc-phone"
               >${this.t("phone")}
-              ${e.phone ? this.verifiedBadge(e.phoneVerification) : o}</label
+              ${e.phone ? this.verifiedBadge(e.phoneVerification) : c}</label
             >
             <input
               class="input"
@@ -3556,53 +3875,62 @@ let p = class extends A {
               autocomplete="tel"
             />
           </div>
-          ${this.phoneInput !== e.phone ? s`<div class="field">
-                  <label class="label" for="acc-phone-password">${this.t("currentPassword")}</label>
+          ${this.phoneInput !== e.phone ? r`<div class="field">
+                  <label class="label" for="acc-phone-password"
+                    >${e.passwordUpdate ? this.t("currentPassword") : this.t("createPassword")}</label
+                  >
                   <input
                     class="input"
                     id="acc-phone-password"
                     type="password"
                     .value=${this.phonePassword}
                     @input=${this.bind("phonePassword")}
-                    autocomplete="current-password"
+                    autocomplete=${e.passwordUpdate ? "current-password" : "new-password"}
                     required
                   />
-                </div>` : o}
-          ${this.phoneCodeSent ? s`<div class="field">
+                  ${e.passwordUpdate ? c : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
+                </div>` : c}
+          ${this.phoneCodeSent ? r`<div class="field">
                   <label class="label" for="acc-phone-code">${this.t("code")}</label>
                   <input
                     class="input input-otp"
                     id="acc-phone-code"
                     inputmode="numeric"
                     autocomplete="one-time-code"
+                    maxlength="6"
+                    pattern="[0-9]*"
+                    required
                     .value=${this.phoneCode}
                     @input=${this.bind("phoneCode")}
+                    @keydown=${(t) => {
+        t.key === "Enter" && (t.preventDefault(), this.onConfirmPhoneVerification(t));
+      }}
                   />
-                </div>` : o}
+                </div>` : c}
           ${this.error("phone")} ${this.error("verify-phone")} ${this.error("verify-phone-code")}
         </form>`,
-      s`
-          ${e.phone && !e.phoneVerification && !this.phoneCodeSent ? s`<button
+      r`
+          ${e.phone && !e.phoneVerification && !this.phoneCodeSent ? r`<button
                   class="btn btn-outline btn-sm"
                   type="button"
                   @click=${this.onSendPhoneVerification}
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone")} ${this.t("sendCode")}
-                </button>` : o}
-          ${this.phoneCodeSent ? s`<button
+                </button>` : c}
+          ${this.phoneCodeSent ? r`<button
                   class="btn btn-outline btn-sm"
                   type="button"
                   @click=${this.onConfirmPhoneVerification}
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
-                </button>` : o}
+                </button>` : c}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
             form="phone-form"
-            ?disabled=${!!this.busy || this.phoneInput === e.phone}
+            ?disabled=${!!this.busy || !this.phoneInput.trim() || this.phoneInput === e.phone}
           >
             ${this.spinner("phone")} ${this.t("update")}
           </button>
@@ -3615,10 +3943,10 @@ let p = class extends A {
     return this.card(
       this.t("deleteAccount"),
       this.t("deleteAccountDescription"),
-      s`${this.error("delete")}
-      ${this.confirmDelete ? s`<div class="inline">
+      r`${this.error("delete")}
+      ${this.confirmDelete ? r`<div class="inline">
               <button
-                class="btn btn-destructive btn-sm"
+                class="btn btn-outline btn-sm warn"
                 @click=${this.onDeleteAccount}
                 ?disabled=${!!this.busy}
               >
@@ -3627,11 +3955,11 @@ let p = class extends A {
               <button class="btn btn-ghost btn-sm" @click=${() => this.confirmDelete = !1}>
                 ${this.t("cancel")}
               </button>
-            </div>` : s`<button
+            </div>` : r`<button
               class="btn btn-outline btn-sm warn"
               @click=${() => this.confirmDelete = !0}
             >
-              ${c.userX} ${this.t("deleteAccount")}
+              ${o.userX} ${this.t("deleteAccount")}
             </button>`}`,
       void 0,
       !0
@@ -3640,17 +3968,17 @@ let p = class extends A {
   // ── Security ──
   renderSecurity() {
     const e = this.user, t = this.config?.mfa !== !1;
-    return s`<div class="section">
-      ${this.isGuest ? o : this.card(
+    return r`<div class="section">
+      ${this.isGuest ? c : this.card(
       this.t("changePassword"),
       void 0,
-      s`<form
+      r`<form
                 class="form"
                 id="password-form"
                 @submit=${this.onChangePassword}
                 novalidate
               >
-                ${e.passwordUpdate ? s`<div class="field">
+                ${e.passwordUpdate ? r`<div class="field">
                         <label class="label" for="acc-old-password"
                           >${this.t("currentPassword")}</label
                         >
@@ -3661,8 +3989,9 @@ let p = class extends A {
                           .value=${this.oldPassword}
                           @input=${this.bind("oldPassword")}
                           autocomplete="current-password"
+                          required
                         />
-                      </div>` : o}
+                      </div>` : c}
                 <div class="field">
                   <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
                   <input
@@ -3694,7 +4023,7 @@ let p = class extends A {
                 </div>
                 ${this.error("password")}
               </form>`,
-      s`<button
+      r`<button
                 class="btn btn-primary btn-sm"
                 type="submit"
                 form="password-form"
@@ -3703,20 +4032,20 @@ let p = class extends A {
                 ${this.spinner("password")} ${this.t("update")}
               </button>`
     )}
-      ${t ? this.renderMfaCard() : o}
-      ${t ? this.renderRecoveryCard() : o}
+      ${t ? this.renderMfaCard() : c}
+      ${t ? this.renderRecoveryCard() : c}
     </div>`;
   }
   renderMfaCard() {
-    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? n.isPreview ? mt(this.authenticator.uri) : new lt(n.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? n.isPreview ? gt(this.authenticator.uri) : new dt(n.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
-      s`<div class="kv">
+      r`<div class="kv">
         <div class="toggle-row">
           <div class="row-main">
             <span class="row-title">${this.t("twoFactor")}</span>
-            <span class="row-sub">${e.mfa ? this.t("enable") : this.t("disable")}d</span>
+            <span class="row-sub">${e.mfa ? this.t("enabled") : this.t("disabled")}</span>
           </div>
           <button
             class="switch"
@@ -3727,22 +4056,52 @@ let p = class extends A {
             aria-label=${this.t("twoFactor")}
           ></button>
         </div>
+        ${e.mfa && !(this.factors?.totp || e.emailVerification || e.phoneVerification) ? r`<div class="alert alert-warning" role="status">
+                ${o.alert}
+                <div class="alert-body">
+                  ${this.t("mfaNoFactorWarning")}
+                  ${this.factors?.totp ? c : r`<div class="links">
+                          <button
+                            type="button"
+                            class="btn btn-link"
+                            @click=${this.onAddAuthenticator}
+                            ?disabled=${!!this.busy || !!this.authenticator}
+                          >
+                            ${this.t("authenticatorAdd")}
+                          </button>
+                        </div>`}
+                </div>
+              </div>` : c}
         ${this.error("mfa")}
         <div class="separator"></div>
         <div class="toggle-row">
           <div class="row-main">
             <span class="row-title"
-              >${c.smartphone} ${this.t("authenticatorApp")}
-              ${t ? this.verifiedBadge(!0) : o}</span
+              >${o.smartphone} ${this.t("authenticatorApp")}
+              ${t ? this.verifiedBadge(!0) : c}</span
             >
           </div>
-          ${t ? s`<button
-                  class="btn btn-outline btn-sm"
-                  @click=${this.onRemoveAuthenticator}
-                  ?disabled=${!!this.busy}
-                >
-                  ${this.spinner("remove-authenticator")} ${this.t("remove")}
-                </button>` : this.authenticator ? o : s`<button
+          ${t ? this.confirmRemoveAuthenticator ? r`<div class="inline">
+                    <button
+                      class="btn btn-outline btn-sm warn"
+                      @click=${this.onRemoveAuthenticator}
+                      ?disabled=${!!this.busy}
+                    >
+                      ${this.spinner("remove-authenticator")} ${this.t("remove")}
+                    </button>
+                    <button
+                      class="btn btn-ghost btn-sm"
+                      @click=${() => this.confirmRemoveAuthenticator = !1}
+                    >
+                      ${this.t("cancel")}
+                    </button>
+                  </div>` : r`<button
+                    class="btn btn-outline btn-sm"
+                    @click=${this.onRemoveAuthenticator}
+                    ?disabled=${!!this.busy}
+                  >
+                    ${this.spinner("remove-authenticator")} ${this.t("remove")}
+                  </button>` : this.authenticator ? c : r`<button
                     class="btn btn-outline btn-sm"
                     @click=${this.onAddAuthenticator}
                     ?disabled=${!!this.busy}
@@ -3751,13 +4110,25 @@ let p = class extends A {
                   </button>`}
         </div>
         ${this.error("authenticator")} ${this.error("remove-authenticator")}
-        ${this.authenticator ? s`<form class="form" @submit=${this.onVerifyAuthenticator} novalidate>
+        ${this.authenticator ? r`<form class="form" @submit=${this.onVerifyAuthenticator} novalidate>
                 <p class="hint">${this.t("authenticatorScan")}</p>
-                <img class="qr" src=${i} alt="QR code" />
-                <p class="hint center">
-                  ${this.t("authenticatorManual")}:
-                  <span class="code">${this.authenticator.secret}</span>
-                </p>
+                <img class="qr" src=${i} alt=${this.t("qrCodeAlt")} />
+                <p class="hint center">${this.t("authenticatorManual")}</p>
+                <div class="inline">
+                  <span class="code"
+                    >${this.authenticator.secret.match(/.{1,4}/g)?.join(" ") ?? this.authenticator.secret}</span
+                  >
+                  <button
+                    class="btn btn-ghost btn-sm"
+                    type="button"
+                    @click=${() => {
+        this.onCopySecret();
+      }}
+                  >
+                    ${this.copied ? o.check : o.copy}
+                    ${this.copied ? this.t("copied") : this.t("authenticatorCopyKey")}
+                  </button>
+                </div>
                 <div class="field">
                   <label class="label" for="acc-totp">${this.t("code")}</label>
                   <input
@@ -3765,6 +4136,8 @@ let p = class extends A {
                     id="acc-totp"
                     inputmode="numeric"
                     autocomplete="one-time-code"
+                    maxlength="6"
+                    pattern="[0-9]*"
                     required
                     .value=${this.authenticatorCode}
                     @input=${this.bind("authenticatorCode")}
@@ -3783,7 +4156,7 @@ let p = class extends A {
                     ${this.t("cancel")}
                   </button>
                 </div>
-              </form>` : o}
+              </form>` : c}
       </div>`
     );
   }
@@ -3791,33 +4164,53 @@ let p = class extends A {
     const e = this.factors?.recoveryCode ?? !1;
     return this.card(
       this.t("recoveryCodes"),
-      this.t("recoveryCodesDescription"),
-      s`<div class="kv">
-        ${this.recoveryCodes ? s`<div class="alert alert-warning">
-                  ${c.alert}
+      this.t("recoveryCodesDescription") + " " + this.t("recoveryCodesOnceHint"),
+      r`<div class="kv">
+        ${this.recoveryCodes ? r`<div class="alert alert-warning">
+                  ${o.alert}
                   <div class="alert-body">${this.t("recoveryCodesWarning")}</div>
                 </div>
                 <div class="codes">
-                  ${this.recoveryCodes.map((t) => s`<span class="code">${t}</span>`)}
+                  ${this.recoveryCodes.map((t) => r`<span class="code">${t}</span>`)}
                 </div>
                 <div class="inline">
                   <button class="btn btn-outline btn-sm" @click=${this.onCopyCodes}>
-                    ${this.copied ? c.check : c.copy}
+                    ${this.copied ? o.check : o.copy}
                     ${this.copied ? this.t("copied") : this.t("copy")}
                   </button>
                   <button class="btn btn-ghost btn-sm" @click=${() => this.recoveryCodes = null}>
                     ${this.t("done")}
                   </button>
-                </div>` : s`<div class="inline">
+                </div>` : r`<div class="inline">
                 <button
                   class="btn btn-outline btn-sm"
                   @click=${this.onRecoveryCodes}
                   ?disabled=${!!this.busy}
                 >
-                  ${this.spinner("recovery")} ${c.key}
-                  ${e ? this.t("recoveryCodes") : this.t("generateRecoveryCodes")}
+                  ${this.spinner("recovery")} ${o.key}
+                  ${e ? this.t("viewRecoveryCodes") : this.t("generateRecoveryCodes")}
                 </button>
-                ${e ? s`<button class="btn btn-ghost btn-sm" @click=${this.onRegenerateRecoveryCodes} ?disabled=${!!this.busy}>${c.refresh} ${this.t("regenerateRecoveryCodes")}</button>` : o}
+                ${e ? this.confirmRegenerate ? r`<div class="inline">
+                          <button
+                            class="btn btn-outline btn-sm warn"
+                            @click=${this.onRegenerateRecoveryCodes}
+                            ?disabled=${!!this.busy}
+                          >
+                            ${o.refresh} ${this.t("regenerateRecoveryCodes")}
+                          </button>
+                          <button
+                            class="btn btn-ghost btn-sm"
+                            @click=${() => this.confirmRegenerate = !1}
+                          >
+                            ${this.t("cancel")}
+                          </button>
+                        </div>` : r`<button
+                          class="btn btn-ghost btn-sm"
+                          @click=${this.onRegenerateRecoveryCodes}
+                          ?disabled=${!!this.busy}
+                        >
+                          ${o.refresh} ${this.t("regenerateRecoveryCodes")}
+                        </button>` : c}
               </div>`}
         ${this.error("recovery")}
       </div>`
@@ -3828,25 +4221,25 @@ let p = class extends A {
     const e = this.stepUp, t = this.factors, i = [
       {
         factor: "totp",
-        icon: c.smartphone,
+        icon: o.smartphone,
         label: this.t("mfaUseAuthenticator"),
         available: t?.totp ?? !0
       },
       {
         factor: "email",
-        icon: c.mail,
+        icon: o.mail,
         label: this.t("mfaUseEmail"),
         available: t?.email ?? !0
       },
       {
         factor: "phone",
-        icon: c.phone,
+        icon: o.phone,
         label: this.t("mfaUsePhone"),
         available: t?.phone ?? !0
       },
       {
         factor: "recoverycode",
-        icon: c.key,
+        icon: o.key,
         label: this.t("mfaUseRecoveryCode"),
         available: t?.recoveryCode ?? !0
       }
@@ -3854,8 +4247,8 @@ let p = class extends A {
     return this.card(
       this.t("mfaTitle"),
       this.t("errorChallengeRequired"),
-      s`<div class="kv">
-        ${e.challenge ? s`<form class="form" @submit=${this.onStepUpVerify} novalidate>
+      r`<div class="kv">
+        ${e.challenge ? r`<form class="form" @submit=${this.onStepUpVerify} novalidate>
                 <div class="field">
                   <label class="label" for="acc-stepup"
                     >${e.challenge.factor === "recoverycode" ? this.t("recoveryCode") : this.t("code")}</label
@@ -3863,6 +4256,9 @@ let p = class extends A {
                   <input
                     class="input ${e.challenge.factor === "recoverycode" ? "mono" : "input-otp"}"
                     id="acc-stepup"
+                    inputmode=${e.challenge.factor === "recoverycode" ? "text" : "numeric"}
+                    maxlength=${e.challenge.factor === "recoverycode" ? "64" : "6"}
+                    pattern=${e.challenge.factor === "recoverycode" ? ".*" : "[0-9]*"}
                     autocomplete="one-time-code"
                     required
                     .value=${this.stepUpCode}
@@ -3872,21 +4268,21 @@ let p = class extends A {
                 <button class="btn btn-primary btn-sm" type="submit" ?disabled=${!!this.busy}>
                   ${this.spinner("stepup-code")} ${this.t("verifyCode")}
                 </button>
-              </form>` : s`<div class="stack-sm">
-                ${i.filter((r) => r.available).map(
-        (r) => s`<button
+              </form>` : r`<div class="stack-sm">
+                ${i.filter((s) => s.available).map(
+        (s) => r`<button
                         type="button"
                         class="choice"
-                        @click=${() => this.onStepUpFactor(r.factor)}
+                        @click=${() => this.onStepUpFactor(s.factor)}
                         ?disabled=${!!this.busy}
                       >
-                        ${r.icon}<span class="choice-title">${r.label}</span>
+                        ${s.icon}<span class="choice-title">${s.label}</span>
                       </button>`
       )}
               </div>`}
         ${this.error("stepup")} ${this.error("stepup-code")}
       </div>`,
-      s`<button class="btn btn-ghost btn-sm" @click=${() => this.stepUp = null}>
+      r`<button class="btn btn-ghost btn-sm" @click=${() => this.stepUp = null}>
         ${this.t("cancel")}
       </button>`
     );
@@ -3894,24 +4290,24 @@ let p = class extends A {
   // ── Sessions ──
   deviceIcon(e) {
     const t = (e.deviceName || "").toLowerCase(), i = (e.osName || e.osCode || "").toLowerCase();
-    return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? c.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? c.monitor : c.globe;
+    return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? o.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? o.monitor : o.globe;
   }
   renderSessions() {
     const e = this.sessions;
-    return s`<div class="section">
+    return r`<div class="section">
       ${this.card(
       this.t("sessions"),
       void 0,
-      s`${this.error("sessions")}
-        ${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noActivity")}</div>` : e.map(
-        (t) => s`<div class="row">
+      r`${this.error("sessions")}
+        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noSessions")}</div>` : e.map(
+        (t) => r`<div class="row">
                       <div class="inline">
                         <span class="device">${this.deviceIcon(t)}</span>
                         <div class="row-main">
                           <span class="row-title">
                             ${t.clientName || t.provider}
-                            ${t.clientVersion ? s`<span class="muted small">${t.clientVersion}</span>` : o}
-                            ${t.current ? s`<span class="badge badge-info">${this.t("currentSession")}</span>` : o}
+                            ${t.clientVersion ? r`<span class="muted small">${t.clientVersion}</span>` : c}
+                            ${t.current ? r`<span class="badge badge-info">${this.t("currentSession")}</span>` : c}
                           </span>
                           <span class="row-sub"
                             >${[t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
@@ -3919,14 +4315,14 @@ let p = class extends A {
                         </div>
                       </div>
                       <div class="row-actions">
-                        ${this.busy === `session-${t.$id}` ? s`<span class="spinner"></span>` : o}
+                        ${this.busy === `session-${t.$id}` ? r`<span class="spinner"></span>` : c}
                         <button
                           class="btn btn-ghost btn-sm"
                           @click=${() => this.onDeleteSession(t.$id)}
                           ?disabled=${!!this.busy}
                           aria-label=${this.t("signOutSession")}
                         >
-                          ${c.logOut}
+                          ${o.logOut}
                         </button>
                       </div>
                     </div>`
@@ -3935,14 +4331,28 @@ let p = class extends A {
       ${this.card(
       this.t("signOutAllSessions"),
       this.t("signOutAllSessionsDescription"),
-      s`${this.error("sessions-all")}
-          <button
-            class="btn btn-outline btn-sm warn"
-            @click=${this.onSignOutAll}
-            ?disabled=${!!this.busy}
-          >
-            ${this.spinner("sessions-all")} ${c.logOut} ${this.t("signOutAllSessions")}
-          </button>`,
+      r`${this.error("sessions-all")}
+        ${this.confirmSignOutAll ? r`<div class="inline">
+                <button
+                  class="btn btn-outline btn-sm warn"
+                  @click=${this.onSignOutAll}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("sessions-all")} ${o.logOut} ${this.t("signOutAllSessions")}
+                </button>
+                <button
+                  class="btn btn-ghost btn-sm"
+                  @click=${() => this.confirmSignOutAll = !1}
+                >
+                  ${this.t("cancel")}
+                </button>
+              </div>` : r`<button
+                class="btn btn-outline btn-sm warn"
+                @click=${this.onSignOutAll}
+                ?disabled=${!!this.busy}
+              >
+                ${this.spinner("sessions-all")} ${o.logOut} ${this.t("signOutAllSessions")}
+              </button>`}`,
       void 0,
       !0
     )}
@@ -3951,38 +4361,57 @@ let p = class extends A {
   // ── Connections ──
   renderConnections() {
     const e = this.identities, t = this.config?.methods?.oauth ?? [];
-    return s`<div class="section">
+    return r`<div class="section">
       ${this.card(
       this.t("connections"),
       void 0,
-      s`${this.error("identities")}
-        ${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noConnections")}</div>` : e.map(
-        (i) => s`<div class="row">
+      r`${this.error("identities")}
+        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noConnections")}</div>` : e.map(
+        (i) => r`<div class="row">
                       <div class="inline">
-                        <span class="device">${K(i.provider)}</span>
+                        <span class="device">${Y(i.provider)}</span>
                         <div class="row-main">
-                          <span class="row-title">${D(i.provider)}</span>
+                          <span class="row-title">${R(i.provider)}</span>
                           <span class="row-sub">${i.providerEmail || i.providerUid}</span>
                         </div>
                       </div>
                       <div class="row-actions">
-                        <button
-                          class="btn btn-ghost btn-sm"
-                          @click=${() => this.onDeleteIdentity(i.$id)}
-                          ?disabled=${!!this.busy}
-                        >
-                          ${this.busy === `identity-${i.$id}` ? s`<span class="spinner"></span>` : o}
-                          ${this.t("disconnect")}
-                        </button>
+                        ${this.confirmDisconnectId === i.$id ? r`<div class="inline">
+                                <button
+                                  class="btn btn-outline btn-sm warn"
+                                  @click=${() => this.onDeleteIdentity(i.$id)}
+                                  ?disabled=${!!this.busy}
+                                >
+                                  ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : c}
+                                  ${this.t("disconnect")}
+                                </button>
+                                <button
+                                  class="btn btn-ghost btn-sm"
+                                  @click=${() => this.confirmDisconnectId = null}
+                                >
+                                  ${this.t("cancel")}
+                                </button>
+                              </div>` : r`<button
+                                class="btn btn-ghost btn-sm"
+                                @click=${() => this.onDeleteIdentity(i.$id)}
+                                ?disabled=${!!this.busy}
+                              >
+                                ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : c}
+                                ${this.t("disconnect")}
+                              </button>`}
                       </div>
                     </div>`
       )}`,
-      t.length > 0 ? s`${t.filter((i) => !(e ?? []).some((r) => r.provider === i)).map(
-        (i) => s`<button
+      t.length > 0 ? r`${t.filter((i) => !(e ?? []).some((s) => s.provider === i)).map(
+        (i) => r`<button
                     class="btn btn-outline btn-sm"
-                    @click=${() => n.signInWithOAuth(i)}
+                    @click=${() => {
+          this.run(`connect-${i}`, () => n.signInWithOAuth(i));
+        }}
+                    ?disabled=${!!this.busy}
                   >
-                    ${K(i)} ${D(i)}
+                    ${this.spinner(`connect-${i}`)} ${Y(i)}
+                    ${this.t("connectProvider", { provider: R(i) })}
                   </button>`
       )}` : void 0
     )}
@@ -3991,12 +4420,12 @@ let p = class extends A {
   // ── Activity ──
   renderActivity() {
     const e = this.logs;
-    return s`<div class="section">
+    return r`<div class="section">
       ${this.card(
       this.t("activity"),
       void 0,
-      s`${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noActivity")}</div>` : e.map(
-        (t) => s`<div class="row">
+      r`${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noActivity")}</div>` : e.map(
+        (t) => r`<div class="row">
                       <div class="row-main">
                         <span class="row-title">${t.event}</span>
                         <span class="row-sub"
@@ -4010,15 +4439,18 @@ let p = class extends A {
     </div>`;
   }
 };
-p.styles = [
+u.styles = [
   ...A.styles,
   I`
       :host {
         display: block;
         width: 100%;
         max-width: 560px;
+        min-width: 0;
       }
       .panel {
+        min-width: 0;
+        overflow: hidden;
         background: var(--authui-card);
         color: var(--authui-card-foreground);
         border: 1px solid var(--authui-border);
@@ -4039,6 +4471,22 @@ p.styles = [
         display: flex;
         align-items: center;
         gap: 12px;
+        min-width: 0;
+        flex: 1;
+      }
+      .identity .row-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .identity .row-title .badge {
+        display: inline-flex;
+        vertical-align: middle;
+        margin-inline-start: 6px;
+      }
+      .between > .btn {
+        flex-shrink: 0;
       }
       .identity .avatar {
         width: 44px;
@@ -4089,102 +4537,117 @@ p.styles = [
       }
     `
 ];
-g([
-  f({ type: Boolean })
-], p.prototype, "embedded", 2);
-g([
-  f({ type: String })
-], p.prototype, "tab", 2);
-g([
+f([
+  m({ type: Boolean })
+], u.prototype, "embedded", 2);
+f([
+  m({ type: String })
+], u.prototype, "tab", 2);
+f([
   d()
-], p.prototype, "active", 2);
-g([
+], u.prototype, "active", 2);
+f([
   d()
-], p.prototype, "busy", 2);
-g([
+], u.prototype, "busy", 2);
+f([
   d()
-], p.prototype, "notice", 2);
-g([
+], u.prototype, "notice", 2);
+f([
   d()
-], p.prototype, "errors", 2);
-g([
+], u.prototype, "errors", 2);
+f([
   d()
-], p.prototype, "nameInput", 2);
-g([
+], u.prototype, "nameInput", 2);
+f([
   d()
-], p.prototype, "emailInput", 2);
-g([
+], u.prototype, "emailInput", 2);
+f([
   d()
-], p.prototype, "emailPassword", 2);
-g([
+], u.prototype, "emailPassword", 2);
+f([
   d()
-], p.prototype, "phoneInput", 2);
-g([
+], u.prototype, "phoneInput", 2);
+f([
   d()
-], p.prototype, "phonePassword", 2);
-g([
+], u.prototype, "phonePassword", 2);
+f([
   d()
-], p.prototype, "phoneCode", 2);
-g([
+], u.prototype, "phoneCode", 2);
+f([
   d()
-], p.prototype, "phoneCodeSent", 2);
-g([
+], u.prototype, "phoneCodeSent", 2);
+f([
   d()
-], p.prototype, "guestName", 2);
-g([
+], u.prototype, "guestName", 2);
+f([
   d()
-], p.prototype, "oldPassword", 2);
-g([
+], u.prototype, "oldPassword", 2);
+f([
   d()
-], p.prototype, "newPassword", 2);
-g([
+], u.prototype, "newPassword", 2);
+f([
   d()
-], p.prototype, "newPasswordConfirm", 2);
-g([
+], u.prototype, "newPasswordConfirm", 2);
+f([
   d()
-], p.prototype, "authenticator", 2);
-g([
+], u.prototype, "authenticator", 2);
+f([
   d()
-], p.prototype, "authenticatorCode", 2);
-g([
+], u.prototype, "authenticatorCode", 2);
+f([
   d()
-], p.prototype, "factors", 2);
-g([
+], u.prototype, "factors", 2);
+f([
   d()
-], p.prototype, "recoveryCodes", 2);
-g([
+], u.prototype, "recoveryCodes", 2);
+f([
   d()
-], p.prototype, "stepUp", 2);
-g([
+], u.prototype, "stepUp", 2);
+f([
   d()
-], p.prototype, "stepUpCode", 2);
-g([
+], u.prototype, "stepUpCode", 2);
+f([
   d()
-], p.prototype, "copied", 2);
-g([
+], u.prototype, "copied", 2);
+f([
   d()
-], p.prototype, "sessions", 2);
-g([
+], u.prototype, "sessions", 2);
+f([
   d()
-], p.prototype, "identities", 2);
-g([
+], u.prototype, "identities", 2);
+f([
   d()
-], p.prototype, "logs", 2);
-g([
+], u.prototype, "logs", 2);
+f([
   d()
-], p.prototype, "logsSupported", 2);
-g([
+], u.prototype, "logsSupported", 2);
+f([
   d()
-], p.prototype, "confirmDelete", 2);
-p = g([
-  _("authui-account")
-], p);
-var Ft = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, O = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? zt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && Ft(t, i, a), a;
+], u.prototype, "confirmDelete", 2);
+f([
+  d()
+], u.prototype, "confirmRegenerate", 2);
+f([
+  d()
+], u.prototype, "confirmRemoveAuthenticator", 2);
+f([
+  d()
+], u.prototype, "confirmSignOutAll", 2);
+f([
+  d()
+], u.prototype, "confirmDisconnectId", 2);
+f([
+  d()
+], u.prototype, "verifyEmailCooldownUntil", 2);
+u = f([
+  O("authui-account")
+], u);
+var Dt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, _ = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? _t(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && Dt(t, i, a), a;
 };
-let E = class extends A {
+let M = class extends A {
   constructor() {
     super(...arguments), this.open = !1, this.view = "sign-in", this.closeOnSuccess = !0, this.handledPending = null, this.onOpenEvent = (e) => {
       const t = e.detail ?? {};
@@ -4205,29 +4668,38 @@ let E = class extends A {
     super.disconnectedCallback(), window.removeEventListener("authui:open", this.onOpenEvent), window.removeEventListener("authui:close", this.onCloseEvent);
   }
   show(e) {
-    e ? this.view = e : this.auth.status === "signed-in" && (this.view = "account"), this.open = !0;
+    e === "account" && this.auth.status !== "signed-in" ? this.view = "sign-in" : e ? this.view = e : this.auth.status === "signed-in" ? this.view = "account" : this.view = "sign-in", this.open = !0;
   }
   hide() {
     this.open = !1;
   }
   updated(e) {
-    if (e.has("open") && this.dialog && (this.open && !this.dialog.open && this.dialog.showModal(), !this.open && this.dialog.open && this.dialog.close()), e.has("auth")) {
+    if (e.has("open") && this.dialog && (this.open && !this.dialog.open && (this.dialog.showModal(), requestAnimationFrame(() => this.focusPrimary())), !this.open && this.dialog.open && this.dialog.close()), e.has("auth")) {
       const t = this.auth.pending;
-      t && t !== this.handledPending && t.type !== "notice" && (this.handledPending = t, this.view = "sign-in", this.open = !0), t?.type === "notice" && t !== this.handledPending && (this.handledPending = t, this.open = !0);
+      t && t !== this.handledPending && t.type !== "notice" && (this.handledPending = t, this.view = "sign-in", this.open = !0), t?.type === "notice" && t !== this.handledPending && (this.handledPending = t, this.open = !0), this.open && this.view === "account" && this.auth.status !== "signed-in" && (this.view = "sign-in"), this.open && this.auth.status === "signed-out" && this.view === "account" && (this.view = "sign-in");
     }
   }
+  focusPrimary() {
+    const e = this.dialog;
+    if (!e) return;
+    const i = e.querySelector("authui-sign-in, authui-account")?.shadowRoot;
+    (i?.querySelector(".alert[role=alert], .alert[role=status]") ?? i?.querySelector(
+      "input:not([type=hidden]), button.choice, [role=tab]"
+    ))?.focus?.();
+  }
   render() {
-    const e = this.view === "account";
-    return s`
+    const e = this.auth.status === "signed-in", t = this.view === "account" && e;
+    return r`
       <dialog
-        class=${e ? "wide" : ""}
-        aria-labelledby="authui-title"
+        class=${t ? "wide" : ""}
+        aria-label=${t ? this.t("dialogAccount") : this.t("dialogSignIn")}
         @close=${() => this.open = !1}
-        @cancel=${(t) => {
-      t.preventDefault(), this.hide();
+        @cancel=${(i) => {
+      i.preventDefault(), this.hide();
     }}
         @click=${this.onBackdrop}
         @authui-open=${this.onInnerOpen}
+        @authui-success=${this.onSuccess}
       >
         <div class="body">
           <button
@@ -4235,19 +4707,18 @@ let E = class extends A {
             @click=${this.hide}
             aria-label=${this.t("close")}
           >
-            ${c.x}
+            ${o.x}
           </button>
-          ${this.open ? e ? s`<authui-account embedded></authui-account>` : s`<authui-sign-in
+          ${this.open ? t ? r`<authui-account embedded></authui-account>` : r`<authui-sign-in
                     embedded
-                    .view=${this.view}
-                    @authui-success=${this.onSuccess}
-                  ></authui-sign-in>` : o}
+                    .view=${this.view === "account" ? "sign-in" : this.view}
+                  ></authui-sign-in>` : c}
         </div>
       </dialog>
     `;
   }
 };
-E.styles = [
+M.styles = [
   ...A.styles,
   I`
       :host {
@@ -4309,46 +4780,38 @@ E.styles = [
       }
     `
 ];
-O([
-  f({ type: Boolean, reflect: !0 })
-], E.prototype, "open", 2);
-O([
-  f({ type: String })
-], E.prototype, "view", 2);
-O([
-  f({ type: Boolean, attribute: "close-on-success" })
-], E.prototype, "closeOnSuccess", 2);
-O([
+_([
+  m({ type: Boolean, reflect: !0 })
+], M.prototype, "open", 2);
+_([
+  m({ type: String })
+], M.prototype, "view", 2);
+_([
+  m({ type: Boolean, attribute: "close-on-success" })
+], M.prototype, "closeOnSuccess", 2);
+_([
   d()
-], E.prototype, "handledPending", 2);
-O([
-  rt("dialog")
-], E.prototype, "dialog", 2);
-E = O([
-  _("authui-modal")
-], E);
-function Y(e) {
-  typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
-    window.dispatchEvent(new CustomEvent("authui:open", { detail: { view: e } }));
-  }));
-}
-function Bt() {
-  typeof window > "u" || window.dispatchEvent(new CustomEvent("authui:close"));
-}
-var Ot = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, j = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? Dt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && Ot(t, i, a), a;
+], M.prototype, "handledPending", 2);
+_([
+  ct("dialog")
+], M.prototype, "dialog", 2);
+M = _([
+  O("authui-modal")
+], M);
+var Rt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, W = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? zt(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && Rt(t, i, a), a;
 };
-let z = class extends A {
+let D = class extends A {
   constructor() {
     super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
   }
   render() {
     const e = this.size === "md" ? "" : `btn-${this.size}`;
-    return s`<button
+    return r`<button
       class="btn btn-${this.variant} ${e}"
-      @click=${() => Y(this.view)}
+      @click=${() => H(this.view)}
       part="button"
     >
       <slot
@@ -4357,7 +4820,7 @@ let z = class extends A {
     </button>`;
   }
 };
-z.styles = [
+D.styles = [
   ...A.styles,
   I`
       :host {
@@ -4368,29 +4831,42 @@ z.styles = [
       }
     `
 ];
-j([
-  f({ type: String })
-], z.prototype, "view", 2);
-j([
-  f({ type: String })
-], z.prototype, "variant", 2);
-j([
-  f({ type: String })
-], z.prototype, "size", 2);
-z = j([
-  _("authui-button")
-], z);
-var Lt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Q = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? Rt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
-  return r && a && Lt(t, i, a), a;
+W([
+  m({ type: String })
+], D.prototype, "view", 2);
+W([
+  m({ type: String })
+], D.prototype, "variant", 2);
+W([
+  m({ type: String })
+], D.prototype, "size", 2);
+D = W([
+  O("authui-button")
+], D);
+var Vt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? qt(t, i) : t, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  return s && a && Vt(t, i, a), a;
 };
-let R = class extends A {
+let q = class extends A {
   constructor() {
     super(...arguments), this.src = "", this.menuOpen = !1, this.onDocumentClick = (e) => {
       e.composedPath().includes(this) || (this.menuOpen = !1);
     }, this.onKeydown = (e) => {
-      e.key === "Escape" && (this.menuOpen = !1);
+      if (!this.menuOpen) {
+        (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && e.target === this.renderRoot?.querySelector(".trigger") && e.key === "ArrowDown" && (e.preventDefault(), this.menuOpen = !0, requestAnimationFrame(() => this.focusMenuItem(0)));
+        return;
+      }
+      const t = [
+        ...this.renderRoot?.querySelectorAll('[role="menuitem"]') ?? []
+      ], i = t.findIndex((s) => s === this.shadowRoot?.activeElement);
+      if (e.key === "Escape") {
+        e.preventDefault(), this.menuOpen = !1, this.renderRoot?.querySelector(".trigger")?.focus();
+        return;
+      }
+      e.key === "ArrowDown" ? (e.preventDefault(), this.focusMenuItem(i < 0 ? 0 : (i + 1) % t.length)) : e.key === "ArrowUp" ? (e.preventDefault(), this.focusMenuItem(
+        i < 0 ? t.length - 1 : (i - 1 + t.length) % t.length
+      )) : e.key === "Home" ? (e.preventDefault(), this.focusMenuItem(0)) : e.key === "End" && (e.preventDefault(), this.focusMenuItem(t.length - 1));
     };
   }
   connectedCallback() {
@@ -4399,16 +4875,24 @@ let R = class extends A {
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick, !0), document.removeEventListener("keydown", this.onKeydown), this.removeEventListener("keydown", this.onKeydown);
   }
+  focusMenuItem(e) {
+    [
+      ...this.renderRoot?.querySelectorAll('[role="menuitem"]') ?? []
+    ][e]?.focus();
+  }
+  updated(e) {
+    e.has("menuOpen") && this.menuOpen && requestAnimationFrame(() => this.focusMenuItem(0));
+  }
   render() {
     const { status: e, user: t } = this.auth;
     if (e === "loading")
-      return s`<span class="avatar"><span class="spinner"></span></span>`;
+      return r`<span class="avatar"><span class="spinner"></span></span>`;
     if (e !== "signed-in" || !t)
-      return s`<button class="btn btn-primary btn-sm" @click=${() => Y("sign-in")}>
+      return r`<button class="btn btn-primary btn-sm" @click=${() => H("sign-in")}>
         <slot>${this.t("signIn")}</slot>
       </button>`;
     const i = t.name || t.email || t.phone || this.t("guestAccount");
-    return s`
+    return r`
       <button
         class="trigger"
         aria-haspopup="menu"
@@ -4417,22 +4901,22 @@ let R = class extends A {
         aria-label=${i}
       >
         <span class="avatar"
-          >${this.src ? s`<img src=${this.src} alt="" />` : i[0] ?? "?"}</span
+          >${this.src ? r`<img src=${this.src} alt="" />` : Q(i)}</span
         >
       </button>
-      ${this.menuOpen ? s`<div class="menu" role="menu">
+      ${this.menuOpen ? r`<div class="menu" role="menu">
               <div class="menu-header">
-                <span class="row-title">${i}</span>
-                ${t.email && t.name ? s`<span class="row-sub">${t.email}</span>` : o}
+                <span class="row-title" title=${i}>${i}</span>
+                ${t.email && t.name ? r`<span class="row-sub" title=${t.email}>${t.email}</span>` : c}
               </div>
               <button
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, Y("account");
+      this.menuOpen = !1, H("account");
     }}
               >
-                ${c.settings} ${this.t("manageAccount")}
+                ${o.settings} ${this.t("manageAccount")}
               </button>
               <button
                 class="menu-item"
@@ -4441,13 +4925,13 @@ let R = class extends A {
       this.menuOpen = !1, n.signOut();
     }}
               >
-                ${c.logOut} ${this.t("signOut")}
+                ${o.logOut} ${this.t("signOut")}
               </button>
-            </div>` : o}
+            </div>` : c}
     `;
   }
 };
-R.styles = [
+q.styles = [
   ...A.styles,
   I`
       :host {
@@ -4476,6 +4960,7 @@ R.styles = [
         top: calc(100% + 6px);
         inset-inline-end: 0;
         min-width: 220px;
+        max-width: min(320px, 90vw);
         background: var(--authui-popover);
         color: var(--authui-popover-foreground);
         border: 1px solid var(--authui-border);
@@ -4488,6 +4973,8 @@ R.styles = [
         gap: 2px;
       }
       .menu-header {
+        min-width: 0;
+        overflow: hidden;
         padding: 8px 10px 10px;
         display: flex;
         flex-direction: column;
@@ -4495,6 +4982,14 @@ R.styles = [
         border-bottom: 1px solid var(--authui-border);
         margin-bottom: 4px;
       }
+      .menu .row-title,
+      .menu .row-sub {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       .menu-item {
         display: flex;
         align-items: center;
@@ -4527,32 +5022,32 @@ R.styles = [
       }
     `
 ];
-Q([
-  f({ type: String })
-], R.prototype, "src", 2);
-Q([
+J([
+  m({ type: String })
+], q.prototype, "src", 2);
+J([
   d()
-], R.prototype, "menuOpen", 2);
-R = Q([
-  _("authui-user-button")
-], R);
+], q.prototype, "menuOpen", 2);
+q = J([
+  O("authui-user-button")
+], q);
 export {
-  gt as A,
+  vt as A,
   v as E,
-  ft as P,
+  mt as P,
   n as a,
-  p as b,
-  Bt as c,
-  z as d,
+  u as b,
+  Ht as c,
+  D as d,
   b as e,
   A as f,
-  E as g,
-  L as h,
+  M as g,
+  V as h,
   $ as i,
-  R as j,
-  dt as k,
-  at as l,
-  Y as o,
-  D as p,
-  N as t
+  q as j,
+  ht as k,
+  Z as l,
+  H as o,
+  R as p,
+  B as t
 };