@getauthui/core 0.1.15 → 0.1.17

package/dist/{authui-user-button-CV2B_0j5.js → authui-user-button-CfkLh8tP.js}

@@ -1,7 +1,7 @@
-import { state as c, property as m, customElement as D, query as nt } from "lit/decorators.js";
-import { css as T, LitElement as ot, nothing as n, html as r, svg as u } from "lit";
-import { Client as dt, Account as ht, Teams as Ct, ID as G, Avatars as St } from "appwrite";
-const At = {
+import { state as h, property as b, customElement as z, query as ct } from "lit/decorators.js";
+import { css as D, LitElement as dt, nothing as n, html as r, svg as u } from "lit";
+import { Client as pt, Account as ft, Teams as Et, ID as Y, Avatars as rt } from "appwrite";
+const Mt = {
   signIn: "Sign in",
   dialogSignIn: "Sign in",
   signUp: "Sign up",
@@ -97,6 +97,9 @@ const At = {
   regenerateRecoveryCodes: "Regenerate",
   recoveryCodesWarning: "Store these codes somewhere safe. Each code works once.",
   currentSession: "This device",
+  sessionExpires: "Expires {date}",
+  sessionCreated: "Created {date}",
+  sessionMfaFactors: "MFA: {factors}",
   signOutSession: "Sign out",
   signOutAllSessions: "Sign out everywhere",
   signOutAllSessionsDescription: "End every session, including this one.",
@@ -175,13 +178,13 @@ const At = {
   acceptLegal: "I agree to the",
   errorLegalRequired: "Accept the terms to continue."
 };
-function Pt(e, t = {}) {
+function Ot(e, t = {}) {
   return e.replace(
     /\{(\w+)\}/g,
     (i, s) => s in t ? String(t[s]) : `{${s}}`
   );
 }
-const Ut = {
+const Ft = {
   amazon: "Amazon",
   apple: "Apple",
   appwrite: "Appwrite",
@@ -232,10 +235,10 @@ const Ut = {
   zoho: "Zoho",
   zoom: "Zoom"
 };
-function B(e) {
-  return Ut[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
+function N(e) {
+  return Ft[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
 }
-const K = (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(), Y = [
+const Z = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), I = () => (/* @__PURE__ */ new Date()).toISOString(), O = (e) => new Date(Date.now() - e * 6e4).toISOString(), X = [
   "amber",
   "brave",
   "calm",
@@ -248,13 +251,13 @@ const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
   "juniper",
   "kite",
   "lumen"
-], ut = () => `${Y[Math.floor(Math.random() * Y.length)]}-${Y[Math.floor(Math.random() * Y.length)]}`, z = () => Math.random().toString(36).slice(2, 12), pt = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), It = {
+], mt = () => `${X[Math.floor(Math.random() * X.length)]}-${X[Math.floor(Math.random() * X.length)]}`, _ = () => Math.random().toString(36).slice(2, 12), gt = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Rt = {
   name: "Ada Lovelace",
   email: "ada@example.com",
   phone: "+15550100"
 };
-class Et {
-  constructor(t = It) {
+class Tt {
+  constructor(t = Rt) {
     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 ─────────────────────────
@@ -262,13 +265,13 @@ class Et {
     const i = t.anonymous ?? !1;
     return this.user = {
       $id: "preview-user",
-      $createdAt: M(1440 * 30),
-      $updatedAt: P(),
+      $createdAt: O(1440 * 30),
+      $updatedAt: I(),
       name: i ? "" : t.name ?? this.seed.name,
-      registration: M(1440 * 30),
+      registration: O(1440 * 30),
       status: !0,
       labels: [],
-      passwordUpdate: i ? "" : M(1440 * 7),
+      passwordUpdate: i ? "" : O(1440 * 7),
       email: i ? "" : t.email ?? this.seed.email,
       phone: i ? "" : t.phone ?? this.seed.phone,
       emailVerification: !i,
@@ -276,14 +279,14 @@ class Et {
       mfa: this.mfaEnabled,
       prefs: {},
       targets: [],
-      accessedAt: P()
+      accessedAt: I()
     }, this.seedActivity(i ? "anonymous" : "email"), this.user;
   }
   seedActivity(t) {
     if (this.sessions.length > 0) return;
     const i = {
-      $createdAt: P(),
-      $updatedAt: P(),
+      $createdAt: I(),
+      $updatedAt: I(),
       userId: "preview-user",
       expire: new Date(Date.now() + 365 * 864e5).toISOString(),
       providerUid: "",
@@ -318,8 +321,8 @@ class Et {
       },
       {
         ...i,
-        $id: z(),
-        $createdAt: M(300),
+        $id: _(),
+        $createdAt: O(300),
         provider: t,
         ip: "198.51.100.7",
         osCode: "IOS",
@@ -335,8 +338,8 @@ class Et {
       },
       {
         ...i,
-        $id: z(),
-        $createdAt: M(1440 * 3),
+        $id: _(),
+        $createdAt: O(1440 * 3),
         provider: "oauth2",
         ip: "192.0.2.90",
         osCode: "WIN",
@@ -351,8 +354,8 @@ class Et {
     ], this.identities = [
       {
         $id: "identity-github",
-        $createdAt: M(1440 * 20),
-        $updatedAt: M(1440 * 20),
+        $createdAt: O(1440 * 20),
+        $updatedAt: O(1440 * 20),
         userId: "preview-user",
         provider: "github",
         providerUid: "8675309",
@@ -364,7 +367,7 @@ class Et {
     ], this.logs = [
       {
         event: "session.create",
-        time: P(),
+        time: I(),
         clientName: "Chrome",
         osName: "macOS",
         countryName: "Germany",
@@ -372,7 +375,7 @@ class Et {
       },
       {
         event: "user.update.name",
-        time: M(1440 * 2),
+        time: O(1440 * 2),
         clientName: "Safari",
         osName: "iOS",
         countryName: "Germany",
@@ -380,7 +383,7 @@ class Et {
       },
       {
         event: "session.create",
-        time: M(1440 * 3),
+        time: O(1440 * 3),
         clientName: "Firefox",
         osName: "Windows",
         countryName: "United States",
@@ -390,9 +393,9 @@ class Et {
   }
   requireUser() {
     if (!this.user)
-      throw K("general_unauthorized_scope", "User (role: guests) missing scope (account)");
+      throw Z("general_unauthorized_scope", "User (role: guests) missing scope (account)");
     if (this.mfaPending)
-      throw K(
+      throw Z(
         "user_more_factors_required",
         "More factors are required to complete the sign in process."
       );
@@ -400,7 +403,7 @@ class Et {
   }
   requireRecentChallenge() {
     if (Date.now() - this.lastChallenge > 30 * 6e4)
-      throw K(
+      throw Z(
         "user_challenge_required",
         "A recently successful challenge is required to complete this action."
       );
@@ -436,26 +439,26 @@ class Et {
   }
   async createMagicURLToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: z(),
-      $createdAt: P(),
+      $id: _(),
+      $createdAt: I(),
       userId: t,
       secret: "",
       expire: "",
-      phrase: ut()
+      phrase: mt()
     });
   }
   async createEmailToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: z(),
-      $createdAt: P(),
+      $id: _(),
+      $createdAt: I(),
       userId: t,
       secret: "",
       expire: "",
-      phrase: ut()
+      phrase: mt()
     });
   }
   async createPhoneToken(t, i) {
-    return this.tokens.set(t, { phone: i }), this.delay({ $id: z(), $createdAt: P(), userId: t, secret: "", expire: "", phrase: "" });
+    return this.tokens.set(t, { phone: i }), this.delay({ $id: _(), $createdAt: I(), userId: t, secret: "", expire: "", phrase: "" });
   }
   async createSession(t) {
     return this.delay(() => {
@@ -496,7 +499,7 @@ class Et {
   async updateEmail(t) {
     return this.delay(() => {
       const i = this.requireUser();
-      return i.email = t, i.emailVerification = !1, i.passwordUpdate = P(), i;
+      return i.email = t, i.emailVerification = !1, i.passwordUpdate = I(), i;
     });
   }
   async updatePhone(t) {
@@ -508,7 +511,7 @@ class Et {
   async updatePassword() {
     return this.delay(() => {
       const t = this.requireUser();
-      return t.passwordUpdate = P(), t;
+      return t.passwordUpdate = I(), t;
     });
   }
   async updateStatus() {
@@ -547,7 +550,7 @@ class Et {
     });
   }
   async createMFAChallenge() {
-    return this.delay({ $id: z(), $createdAt: P(), userId: "preview-user", expire: "" });
+    return this.delay({ $id: _(), $createdAt: I(), userId: "preview-user", expire: "" });
   }
   async updateMFAChallenge() {
     return this.delay(() => (this.mfaPending = !1, this.lastChallenge = Date.now(), this.sessions[0]));
@@ -576,35 +579,35 @@ class Et {
   async createMFARecoveryCodes() {
     return this.delay(() => {
       if (this.recoveryCodes.length > 0)
-        throw K("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
-      return this.recoveryCodes = Array.from({ length: 6 }, pt), { recoveryCodes: this.recoveryCodes };
+        throw Z("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
+      return this.recoveryCodes = Array.from({ length: 6 }, gt), { 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 }, pt), { recoveryCodes: this.recoveryCodes }));
+    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, gt), { 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 Dt(e) {
   let t = 2166136261;
   const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
-  for (const g of e) t = (t ^ g.charCodeAt(0)) * 16777619;
+  for (const m of e) t = (t ^ m.charCodeAt(0)) * 16777619;
   const s = 25;
   let a = "";
-  const h = (g, y) => `<rect x="${g}" y="${y}" width="7" height="7"/><rect x="${g + 1}" y="${y + 1}" width="5" height="5" fill="#fff"/><rect x="${g + 2}" y="${y + 2}" width="3" height="3"/>`;
-  for (let g = 0; g < s; g++)
-    for (let y = 0; y < s; y++)
-      !(y < 8 && g < 8 || y >= s - 8 && g < 8 || y < 8 && g >= s - 8) && i() < 0.45 && (a += `<rect x="${y}" y="${g}" width="1" height="1"/>`);
-  const d = `<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>`;
+  const c = (m, v) => `<rect x="${m}" y="${v}" width="7" height="7"/><rect x="${m + 1}" y="${v + 1}" width="5" height="5" fill="#fff"/><rect x="${m + 2}" y="${v + 2}" width="3" height="3"/>`;
+  for (let m = 0; m < s; m++)
+    for (let v = 0; v < s; v++)
+      !(v < 8 && m < 8 || v >= s - 8 && m < 8 || v < 8 && m >= s - 8) && i() < 0.45 && (a += `<rect x="${v}" y="${m}" width="1" height="1"/>`);
+  const d = `<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">${c(0, 0)}${c(s - 7, 0)}${c(0, s - 7)}${a}</g></svg>`;
   return `data:image/svg+xml;utf8,${encodeURIComponent(d)}`;
 }
-const v = {
+const y = {
   moreFactorsRequired: "user_more_factors_required",
   invalidCredentials: "user_invalid_credentials",
   userAlreadyExists: "user_already_exists",
@@ -639,7 +642,7 @@ const v = {
   targetAlreadyExists: "user_target_already_exists",
   argumentInvalid: "general_argument_invalid"
 };
-function V(e) {
+function B(e) {
   if (e && typeof e == "object") {
     const t = e;
     let i = typeof t.message == "string" ? t.message : "Unknown error";
@@ -651,119 +654,119 @@ function V(e) {
   }
   return { message: String(e), type: "", code: 0 };
 }
-function H(e, t) {
-  return V(e).type === t;
+function K(e, t) {
+  return B(e).type === t;
 }
-function Z(e, t, i = "link") {
-  const s = V(e);
+function J(e, t, i = "link") {
+  const s = B(e);
   switch (s.type) {
-    case v.invalidCredentials:
+    case y.invalidCredentials:
       return i === "password" ? t.errorCurrentPassword : t.errorInvalidCredentials;
-    case v.userAlreadyExists:
-    case v.emailAlreadyExists:
-    case v.phoneAlreadyExists:
+    case y.userAlreadyExists:
+    case y.emailAlreadyExists:
+    case y.phoneAlreadyExists:
       return t.errorUserExists;
-    case v.userBlocked:
+    case y.userBlocked:
       return t.errorUserBlocked;
-    case v.rateLimit:
+    case y.rateLimit:
       return t.errorRateLimit;
-    case v.invalidToken:
+    case y.invalidToken:
       return i === "code" ? t.errorInvalidCode : t.errorInvalidToken;
-    case v.invalidCode:
+    case y.invalidCode:
       return t.errorInvalidCode;
-    case v.passwordMismatch:
+    case y.passwordMismatch:
       return t.errorPasswordMismatch;
-    case v.passwordRecentlyUsed:
+    case y.passwordRecentlyUsed:
       return t.errorPasswordRecentlyUsed;
-    case v.passwordPersonalData:
+    case y.passwordPersonalData:
       return t.errorPasswordPersonalData;
-    case v.passwordWeak:
+    case y.passwordWeak:
       return t.errorPasswordWeak;
-    case v.passwordPwned:
+    case y.passwordPwned:
       return t.errorPasswordPwned;
-    case v.challengeRequired:
+    case y.challengeRequired:
       return t.errorChallengeRequired;
-    case v.sessionAlreadyExists:
+    case y.sessionAlreadyExists:
       return t.errorSessionExists;
-    case v.oauthUnauthorized:
-    case v.oauthBadRequest:
+    case y.oauthUnauthorized:
+    case y.oauthBadRequest:
       return t.errorOAuth;
-    case v.authMethodUnsupported:
+    case y.authMethodUnsupported:
       return t.errorMethodDisabled;
   }
-  if (s.type === v.argumentInvalid || /Invalid `\w+` param/i.test(s.message)) {
+  if (s.type === y.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.type === v.projectNotFound || s.type === v.unknownOrigin ? t.errorConfig : s.type === v.routeNotFound ? t.errorConfigEndpoint : s.code === 0 && /fetch|network/i.test(s.message) ? t.errorNetwork : /Invalid `\w+` param/i.test(s.message) ? t.errorGeneric : s.message ? s.message || t.errorGeneric : s.code === 404 || s.type === v.routeNotFound ? t.errorConfigEndpoint : t.errorGeneric;
+  return s.type === y.projectNotFound || s.type === y.unknownOrigin ? t.errorConfig : s.type === y.routeNotFound ? t.errorConfigEndpoint : s.code === 0 && /fetch|network/i.test(s.message) ? t.errorNetwork : /Invalid `\w+` param/i.test(s.message) ? t.errorGeneric : s.message ? s.message || t.errorGeneric : s.code === 404 || s.type === y.routeNotFound ? t.errorConfigEndpoint : t.errorGeneric;
 }
-function Ot(e) {
-  const t = V(e);
-  return !!(t.type === v.projectNotFound || t.type === v.unknownOrigin || t.type === v.routeNotFound || !t.message && t.code === 404 || t.code === 0 && /fetch|network|load failed|failed to fetch/i.test(t.message));
+function Lt(e) {
+  const t = B(e);
+  return !!(t.type === y.projectNotFound || t.type === y.unknownOrigin || t.type === y.routeNotFound || !t.message && t.code === 404 || t.code === 0 && /fetch|network|load failed|failed to fetch/i.test(t.message));
 }
-const it = (e) => `authui:active-team:${e}`;
-function ft(e) {
+const at = (e) => `authui:active-team:${e}`;
+function vt(e) {
   if (typeof localStorage > "u" || !e) return null;
   try {
-    return localStorage.getItem(it(e));
+    return localStorage.getItem(at(e));
   } catch {
     return null;
   }
 }
-function Ft(e, t) {
+function zt(e, t) {
   if (!(typeof localStorage > "u" || !e))
     try {
-      t ? localStorage.setItem(it(e), t) : localStorage.removeItem(it(e));
+      t ? localStorage.setItem(at(e), t) : localStorage.removeItem(at(e));
     } catch {
     }
 }
-const lt = "authui:last-method";
-function q(e) {
+const ht = "authui:last-method";
+function V(e) {
   if (!(typeof localStorage > "u")) {
     if (!e || e === "mfa" || e === "sign-up")
       if (e === "sign-up") e = "email-password";
       else return;
     try {
-      localStorage.setItem(lt, e);
+      localStorage.setItem(ht, e);
     } catch {
     }
   }
 }
-function _() {
+function q() {
   if (typeof localStorage > "u") return null;
   try {
-    return localStorage.getItem(lt);
+    return localStorage.getItem(ht);
   } catch {
     return null;
   }
 }
-function ce() {
+function ge() {
   if (!(typeof localStorage > "u"))
     try {
-      localStorage.removeItem(lt);
+      localStorage.removeItem(ht);
     } catch {
     }
 }
-const X = "authui:pending-oauth";
-function Rt(e) {
+const tt = "authui:pending-oauth";
+function _t(e) {
   if (!(typeof sessionStorage > "u"))
     try {
-      sessionStorage.setItem(X, e);
+      sessionStorage.setItem(tt, e);
     } catch {
     }
 }
-function xt() {
+function At() {
   if (!(typeof sessionStorage > "u"))
     try {
-      const e = sessionStorage.getItem(X);
-      sessionStorage.removeItem(X), e && q(`oauth:${e}`);
+      const e = sessionStorage.getItem(tt);
+      sessionStorage.removeItem(tt), e && V(`oauth:${e}`);
     } catch {
     }
 }
-function mt() {
+function bt() {
   if (!(typeof sessionStorage > "u"))
     try {
-      sessionStorage.removeItem(X);
+      sessionStorage.removeItem(tt);
     } catch {
     }
 }
@@ -777,7 +780,7 @@ function A(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const st = "authui", gt = ["userId", "secret", "expire", "project", "error", st], vt = () => ({
+const nt = "authui", yt = ["userId", "secret", "expire", "project", "error", nt], wt = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
@@ -785,9 +788,9 @@ const st = "authui", gt = ["userId", "secret", "expire", "project", "error", st]
   configured: !1,
   configError: null
 });
-class Tt {
+class qt {
   constructor() {
-    this.client = null, this.account = null, this.config = null, this.state = vt(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null, this.teams = null, this.activeTeamId = null;
+    this.client = null, this.account = null, this.config = null, this.state = wt(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null, this.teams = null, this.activeTeamId = null;
   }
   // ───────────────────────────── configuration ─────────────────────────────
   /** Configure the Appwrite client. Safe to call more than once; the last call wins. */
@@ -795,7 +798,7 @@ class Tt {
     const i = t.endpoint.trim().replace(/\/+$/, "");
     i && !i.endsWith("/v1") && console.warn(
       `[authui] endpoint should end with /v1 (got "${t.endpoint}"). Without it Appwrite returns HTML 404 pages.`
-    ), this.config = t, this.client = new dt().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new Et() : null, this.account = this.preview ? this.preview : new ht(this.client), this.teams = null, this.activeTeamId = ft(t.project), this.setState({ configured: !0, status: "loading", configError: null }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
+    ), this.config = t, this.client = new pt().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new Tt() : null, this.account = this.preview ? this.preview : new ft(this.client), this.teams = null, this.activeTeamId = vt(t.project), this.setState({ configured: !0, status: "loading", configError: null }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
   }
   /**
    * Called by <authui-config> when it is on the page but missing endpoint or project.
@@ -809,8 +812,7 @@ class Tt {
       user: null,
       mfaFactors: null,
       configured: !1,
-      configError: t,
-      pending: { type: "notice", tone: "error", message: t }
+      configError: t
     });
   }
   get isConfigured() {
@@ -841,7 +843,7 @@ class Tt {
   /** List teams the signed-in user belongs to. Empty in preview or when signed out. */
   async listTeams() {
     if (this.preview || !this.client || this.state.status !== "signed-in") return [];
-    this.teams ??= new Ct(this.client);
+    this.teams ??= new Et(this.client);
     try {
       return (await this.teams.list()).teams ?? [];
     } catch (t) {
@@ -851,7 +853,7 @@ class Tt {
   getActiveTeamId() {
     if (this.activeTeamId) return this.activeTeamId;
     const t = this.config?.project;
-    return t ? (this.activeTeamId = ft(t), this.activeTeamId) : null;
+    return t ? (this.activeTeamId = vt(t), this.activeTeamId) : null;
   }
   /**
    * Remember the active team locally and emit `active-team`.
@@ -859,10 +861,10 @@ class Tt {
    */
   setActiveTeam(t) {
     const i = this.config?.project;
-    i && Ft(i, t?.$id ?? null), this.activeTeamId = t?.$id ?? null, this.emit("active-team", { teamId: this.activeTeamId, team: t });
+    i && zt(i, t?.$id ?? null), this.activeTeamId = t?.$id ?? null, this.emit("active-team", { teamId: this.activeTeamId, team: t });
   }
   getStrings() {
-    return { ...At, ...this.config?.strings ?? {} };
+    return { ...Mt, ...this.config?.strings ?? {} };
   }
   getState() {
     return { ...this.state };
@@ -888,7 +890,7 @@ class Tt {
     this.state = { ...this.state, ...t }, this.emit("change", this.getState());
   }
   fail(t) {
-    const i = V(t);
+    const i = B(t);
     throw this.emit("error", i), t;
   }
   acct() {
@@ -908,7 +910,7 @@ class Tt {
         const i = await this.account.get();
         this.setState({ status: "signed-in", user: i, mfaFactors: null, configError: null }), t || this.emit("signed-in", i);
       } catch (i) {
-        if (H(i, v.moreFactorsRequired)) {
+        if (K(i, y.moreFactorsRequired)) {
           let s = null;
           try {
             s = await A(
@@ -919,7 +921,7 @@ class Tt {
           } catch {
           }
           this.setState({ status: "mfa-required", user: null, mfaFactors: s });
-        } else if (H(i, v.userBlocked))
+        } else if (K(i, y.userBlocked))
           await this.purgeLocalSession(), this.setState({
             status: "signed-out",
             user: null,
@@ -930,18 +932,17 @@ class Tt {
               message: this.getStrings().errorUserBlocked
             }
           }), t && this.emit("signed-out", void 0);
-        else if (!t && Ot(i)) {
-          const a = Z(i, this.getStrings()) || this.getStrings().errorConfig;
+        else if (!t && Lt(i)) {
+          const a = J(i, this.getStrings()) || this.getStrings().errorConfig;
           console.warn(
             `[authui] ${a} (endpoint=${this.config?.endpoint ?? "?"}, project=${this.config?.project ?? "?"})`
           );
-          const h = V(i);
-          this.emit("error", { message: a, type: h.type, code: h.code }), this.setState({
+          const c = B(i);
+          this.emit("error", { message: a, type: c.type, code: c.code }), this.setState({
             status: "signed-out",
             user: null,
             mfaFactors: null,
-            configError: a,
-            pending: { type: "notice", tone: "error", message: a }
+            configError: a
           });
         } else
           this.setState({ status: "signed-out", user: null, mfaFactors: null, configError: null }), t && this.emit("signed-out", void 0);
@@ -955,7 +956,7 @@ class Tt {
       const i = this.state.pending;
       if (i?.type === "notice" && i.tone === "error")
         throw Object.assign(new Error(i.message), {
-          type: v.userBlocked,
+          type: y.userBlocked,
           code: 401
         });
     }
@@ -980,7 +981,7 @@ class Tt {
         localStorage.removeItem("cookieFallback");
       } catch {
       }
-    this.config && !this.preview && (this.client = new dt().setEndpoint(this.config.endpoint).setProject(this.config.project), this.account = new ht(this.client));
+    this.config && !this.preview && (this.client = new pt().setEndpoint(this.config.endpoint).setProject(this.config.project), this.account = new ft(this.client));
   }
   // ─────────────────────────────── sign in ───────────────────────────────
   async signInWithEmailPassword(t, i) {
@@ -993,7 +994,7 @@ class Tt {
   }
   async signUp(t, i, s) {
     try {
-      await this.acct().create(G.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
+      await this.acct().create(Y.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
     } catch (a) {
       this.fail(a);
     }
@@ -1036,7 +1037,7 @@ class Tt {
   async sendMagicUrl(t) {
     try {
       return await this.acct().createMagicURLToken(
-        G.unique(),
+        Y.unique(),
         t.trim(),
         this.redirectUrl("magic-url"),
         this.config?.securityPhrase ?? !0
@@ -1048,7 +1049,7 @@ class Tt {
   async sendEmailOtp(t) {
     try {
       return await this.acct().createEmailToken(
-        G.unique(),
+        Y.unique(),
         t.trim(),
         this.config?.securityPhrase ?? !0
       );
@@ -1058,7 +1059,7 @@ class Tt {
   }
   async sendPhoneOtp(t) {
     try {
-      return await this.acct().createPhoneToken(G.unique(), t.replace(/[\s()-]/g, ""));
+      return await this.acct().createPhoneToken(Y.unique(), t.replace(/[\s()-]/g, ""));
     } catch (i) {
       return this.fail(i);
     }
@@ -1332,8 +1333,8 @@ class Tt {
   /** 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 : ""), s = new URL(i, typeof window < "u" ? window.location.href : void 0);
-    for (const a of gt) s.searchParams.delete(a);
-    return s.searchParams.set(st, t), s.toString();
+    for (const a of yt) s.searchParams.delete(a);
+    return s.searchParams.set(nt, t), s.toString();
   }
   setPending(t) {
     this.setState({ pending: t });
@@ -1344,11 +1345,11 @@ class Tt {
    */
   async handleRedirect() {
     if (typeof window > "u") return !1;
-    const t = new URLSearchParams(window.location.search), i = t.get(st);
+    const t = new URLSearchParams(window.location.search), i = t.get(nt);
     if (!i) return !1;
     const s = t.get("userId") ?? "", a = t.get("secret") ?? "";
     this.cleanUrl();
-    const h = () => {
+    const c = () => {
       this.setState({
         pending: {
           type: "notice",
@@ -1361,10 +1362,10 @@ class Tt {
       switch (i) {
         case "oauth":
         case "magic-url":
-          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? xt() : q("magic-url")) : (i === "oauth" && mt(), h());
+          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? At() : V("magic-url")) : (i === "oauth" && bt(), c());
           break;
         case "oauth-failed":
-          mt(), this.setState({
+          bt(), this.setState({
             pending: {
               type: "notice",
               tone: "error",
@@ -1373,7 +1374,7 @@ class Tt {
           });
           break;
         case "recovery":
-          s && a ? this.setState({ pending: { type: "reset-password", userId: s, secret: a } }) : h();
+          s && a ? this.setState({ pending: { type: "reset-password", userId: s, secret: a } }) : c();
           break;
         case "verify-email":
           s && a ? (await A(
@@ -1386,27 +1387,27 @@ class Tt {
               message: this.getStrings().emailVerified,
               tone: "success"
             }
-          })) : h();
+          })) : c();
           break;
       }
     } catch (d) {
-      const g = V(d), y = Z(d, this.getStrings(), "link");
-      this.emit("error", g), this.setState({ pending: { type: "notice", message: y, tone: "error" } });
+      const m = B(d), v = J(d, this.getStrings(), "link");
+      this.emit("error", m), this.setState({ pending: { type: "notice", message: v, tone: "error" } });
     }
     return !0;
   }
   cleanUrl() {
     const t = new URL(window.location.href);
-    for (const i of gt) t.searchParams.delete(i);
+    for (const i of yt) t.searchParams.delete(i);
     window.history.replaceState(window.history.state, "", t.toString());
   }
   /** Test helper. */
   reset() {
-    this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = vt(), this.listeners.clear();
+    this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = wt(), this.listeners.clear();
   }
 }
-const l = new Tt();
-class Lt {
+const l = new qt();
+class Vt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
       const t = this.isDark("auto");
@@ -1434,14 +1435,14 @@ class Lt {
     this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
   }
 }
-const bt = new Lt(), yt = {
+const $t = new Vt(), xt = {
   none: "0px",
   sm: "0.25rem",
   md: "0.625rem",
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, Dt = T`
+}, Nt = D`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -1521,7 +1522,7 @@ const bt = new Lt(), yt = {
     --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;
   }
-`, zt = T`
+`, Bt = D`
   *,
   *::before,
   *::after {
@@ -1810,6 +1811,94 @@ const bt = new Lt(), yt = {
     font-size: 18px;
     height: 44px;
   }
+
+  /* Vibes-style segmented OTP (3 + sep + 3) */
+  .otp {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 52px;
+  }
+  .otp-group {
+    display: flex;
+    flex: 1;
+    gap: 6px;
+    min-width: 0;
+  }
+  .otp-slot {
+    flex: 1;
+    min-width: 0;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--authui-input);
+    border-radius: var(--authui-radius-md);
+    background: var(--authui-background);
+    color: var(--authui-foreground);
+    font-family: var(--authui-font-mono);
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1;
+    box-shadow: var(--authui-shadow-xs);
+    transition:
+      border-color 120ms ease,
+      box-shadow 120ms ease,
+      background-color 120ms ease;
+  }
+  .otp-slot-active {
+    border-color: var(--authui-ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 40%, transparent);
+  }
+  .otp-invalid .otp-slot {
+    border-color: var(--authui-destructive);
+  }
+  .otp-invalid .otp-slot-active {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-destructive) 35%, transparent);
+  }
+  .otp-sep {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 12px;
+  }
+  .otp-sep span {
+    display: block;
+    width: 8px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--authui-muted-foreground);
+    opacity: 0.7;
+  }
+  .otp-native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    caret-color: transparent;
+    color: transparent;
+    background: transparent;
+    cursor: text;
+    z-index: 1;
+  }
+  .otp-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  @media (max-width: 380px) {
+    .otp-slot {
+      height: 44px;
+      font-size: 18px;
+    }
+  }
   .hint {
     font-size: 12px;
     color: var(--authui-muted-foreground);
@@ -2574,25 +2663,25 @@ const bt = new Lt(), yt = {
     }
   }
 `;
-var _t = Object.defineProperty, qt = (e, t, i, s) => {
-  for (var a = void 0, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = d(t, i, a) || a);
-  return a && _t(t, i, a), a;
-}, O;
-const kt = (O = class extends ot {
+var jt = Object.defineProperty, Ht = (e, t, i, s) => {
+  for (var a = void 0, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = d(t, i, a) || a);
+  return a && jt(t, i, a), a;
+}, F;
+const Pt = (F = class extends dt {
   constructor() {
     super(...arguments), this.auth = l.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
   }
   connectedCallback() {
     super.connectedCallback();
-    for (const t of O.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
+    for (const t of F.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
     this.auth = l.getState(), this.unsubscribeStore = l.on("change", (t) => {
       this.auth = t, this.applyBranding();
-    }), this.unsubscribeTheme = bt.subscribe(() => this.applyBranding()), this.applyBranding();
+    }), this.unsubscribeTheme = $t.subscribe(() => this.applyBranding()), this.applyBranding();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    for (const t of O.KEY_EVENTS) this.removeEventListener(t, this.stopKeys);
+    for (const t of F.KEY_EVENTS) this.removeEventListener(t, this.stopKeys);
     this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
   }
   get strings() {
@@ -2600,7 +2689,7 @@ const kt = (O = class extends ot {
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
-    return Pt(this.strings[t], i);
+    return Ot(this.strings[t], i);
   }
   get config() {
     return l.getConfig();
@@ -2610,27 +2699,27 @@ const kt = (O = class extends ot {
   }
   /** Push theme and branding from config onto the host element. */
   applyBranding() {
-    const t = this.config?.branding, i = bt.isDark(t?.theme ?? "auto");
+    const t = this.config?.branding, i = $t.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 && yt[t.radius] && this.style.setProperty("--authui-radius", yt[t.radius]);
+    )), t?.radius && xt[t.radius] && this.style.setProperty("--authui-radius", xt[t.radius]);
   }
   /** Emit a composed custom event from this element. */
   fire(t, i) {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-}, O.styles = [Dt, zt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
-qt([
-  c()
-], kt.prototype, "auth");
-let E = kt;
-var Vt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Nt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Vt(t, i, a), a;
+}, F.styles = [Nt, Bt], F.KEY_EVENTS = ["keydown", "keyup", "keypress"], F);
+Ht([
+  h()
+], Pt.prototype, "auth");
+let M = Pt;
+var Wt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, k = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Kt(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && Wt(t, i, a), a;
 };
-let w = class extends ot {
+let $ = class extends dt {
   constructor() {
     super(...arguments), this.endpoint = "", this.project = "", this.redirectUrl = "", this.successUrl = "", this.methods = "email-password", this.signUp = "true", this.requireName = "true", this.mfa = "true", this.securityPhrase = "true", this.name = "", this.logo = "", this.theme = "auto", this.radius = "", this.primary = "", this.primaryForeground = "", this.termsUrl = "", this.privacyUrl = "", this.requireAcceptance = "", this.oauthLayout = "", this.preview = "";
   }
@@ -2681,108 +2770,108 @@ let w = class extends ot {
     };
   }
 };
-w.styles = T`
+$.styles = D`
     :host {
       display: none;
     }
   `;
-x([
-  m({ type: String })
-], w.prototype, "endpoint", 2);
-x([
-  m({ type: String })
-], w.prototype, "project", 2);
-x([
-  m({ type: String, attribute: "redirect-url" })
-], w.prototype, "redirectUrl", 2);
-x([
-  m({ type: String, attribute: "success-url" })
-], w.prototype, "successUrl", 2);
-x([
-  m({ type: String })
-], w.prototype, "methods", 2);
-x([
-  m({ type: String, attribute: "sign-up" })
-], w.prototype, "signUp", 2);
-x([
-  m({ type: String, attribute: "require-name" })
-], w.prototype, "requireName", 2);
-x([
-  m({ type: String })
-], w.prototype, "mfa", 2);
-x([
-  m({ type: String, attribute: "security-phrase" })
-], w.prototype, "securityPhrase", 2);
-x([
-  m({ type: String })
-], w.prototype, "name", 2);
-x([
-  m({ type: String })
-], w.prototype, "logo", 2);
-x([
-  m({ type: String })
-], w.prototype, "theme", 2);
-x([
-  m({ type: String })
-], w.prototype, "radius", 2);
-x([
-  m({ type: String })
-], w.prototype, "primary", 2);
-x([
-  m({ type: String, attribute: "primary-foreground" })
-], w.prototype, "primaryForeground", 2);
-x([
-  m({ type: String, attribute: "terms-url" })
-], w.prototype, "termsUrl", 2);
-x([
-  m({ type: String, attribute: "privacy-url" })
-], w.prototype, "privacyUrl", 2);
-x([
-  m({ type: String, attribute: "require-acceptance" })
-], w.prototype, "requireAcceptance", 2);
-x([
-  m({ type: String, attribute: "oauth-layout" })
-], w.prototype, "oauthLayout", 2);
-x([
-  m({ type: String })
-], w.prototype, "preview", 2);
-w = x([
-  D("authui-config")
-], w);
-var Bt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? jt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Bt(t, i, a), a;
+k([
+  b({ type: String })
+], $.prototype, "endpoint", 2);
+k([
+  b({ type: String })
+], $.prototype, "project", 2);
+k([
+  b({ type: String, attribute: "redirect-url" })
+], $.prototype, "redirectUrl", 2);
+k([
+  b({ type: String, attribute: "success-url" })
+], $.prototype, "successUrl", 2);
+k([
+  b({ type: String })
+], $.prototype, "methods", 2);
+k([
+  b({ type: String, attribute: "sign-up" })
+], $.prototype, "signUp", 2);
+k([
+  b({ type: String, attribute: "require-name" })
+], $.prototype, "requireName", 2);
+k([
+  b({ type: String })
+], $.prototype, "mfa", 2);
+k([
+  b({ type: String, attribute: "security-phrase" })
+], $.prototype, "securityPhrase", 2);
+k([
+  b({ type: String })
+], $.prototype, "name", 2);
+k([
+  b({ type: String })
+], $.prototype, "logo", 2);
+k([
+  b({ type: String })
+], $.prototype, "theme", 2);
+k([
+  b({ type: String })
+], $.prototype, "radius", 2);
+k([
+  b({ type: String })
+], $.prototype, "primary", 2);
+k([
+  b({ type: String, attribute: "primary-foreground" })
+], $.prototype, "primaryForeground", 2);
+k([
+  b({ type: String, attribute: "terms-url" })
+], $.prototype, "termsUrl", 2);
+k([
+  b({ type: String, attribute: "privacy-url" })
+], $.prototype, "privacyUrl", 2);
+k([
+  b({ type: String, attribute: "require-acceptance" })
+], $.prototype, "requireAcceptance", 2);
+k([
+  b({ type: String, attribute: "oauth-layout" })
+], $.prototype, "oauthLayout", 2);
+k([
+  b({ type: String })
+], $.prototype, "preview", 2);
+$ = k([
+  z("authui-config")
+], $);
+var Gt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, it = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Yt(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && Gt(t, i, a), a;
 };
-const wt = "authui-show:not([ready]){display:none}", de = "authui-show:not([ready]){display:none}authui-button:not(:defined),authui-user-button:not(:defined){visibility:hidden}";
-let $t = !1;
-function Ht() {
-  if (!(typeof document > "u" || $t)) {
-    $t = !0;
+const kt = "authui-show:not([ready]){display:none}", ve = "authui-show:not([ready]){display:none}authui-button:not(:defined),authui-user-button:not(:defined){visibility:hidden}";
+let Ct = !1;
+function Zt() {
+  if (!(typeof document > "u" || Ct)) {
+    Ct = !0;
     try {
       if (typeof CSSStyleSheet < "u" && "adoptedStyleSheets" in Document.prototype) {
         const e = new CSSStyleSheet();
-        e.replaceSync(wt), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e];
+        e.replaceSync(kt), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e];
         return;
       }
     } catch {
     }
     if (!document.getElementById("authui-fouc")) {
       const e = document.createElement("style");
-      e.id = "authui-fouc", e.textContent = wt, document.head.appendChild(e);
+      e.id = "authui-fouc", e.textContent = kt, document.head.appendChild(e);
     }
   }
 }
-Ht();
-const Wt = ["loading", "signed-out", "signed-in", "mfa-required"];
-function rt(e) {
-  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => Wt.includes(t)) : [];
+Zt();
+const Xt = ["loading", "signed-out", "signed-in", "mfa-required"];
+function ot(e) {
+  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => Xt.includes(t)) : [];
 }
-function Gt(e, t, i) {
-  const s = rt(t), a = rt(i);
+function Qt(e, t, i) {
+  const s = ot(t), a = ot(i);
   return !(e === "loading" && !s.includes("loading") || s.length > 0 && !s.includes(e) || a.includes(e));
 }
-let W = class extends ot {
+let G = class extends dt {
   constructor() {
     super(...arguments), this.when = "", this.unless = "", this.status = l.getState().status, this.unsubscribe = null;
   }
@@ -2794,28 +2883,28 @@ let W = class extends ot {
   }
   /** Whether the current status satisfies `when` and `unless`. */
   get visible() {
-    return Gt(this.status, this.when, this.unless);
+    return Qt(this.status, this.when, this.unless);
   }
   updated() {
-    (this.status !== "loading" || rt(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
+    (this.status !== "loading" || ot(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
   }
   render() {
     return this.visible ? r`<slot></slot>` : n;
   }
 };
-J([
-  m({ type: String })
-], W.prototype, "when", 2);
-J([
-  m({ type: String })
-], W.prototype, "unless", 2);
-J([
-  c()
-], W.prototype, "status", 2);
-W = J([
-  D("authui-show")
-], W);
-const Kt = T`
+it([
+  b({ type: String })
+], G.prototype, "when", 2);
+it([
+  b({ type: String })
+], G.prototype, "unless", 2);
+it([
+  h()
+], G.prototype, "status", 2);
+G = it([
+  z("authui-show")
+], G);
+const Jt = D`
   :host {
     display: block;
     width: 100%;
@@ -2869,7 +2958,7 @@ const Kt = T`
     height: 14px;
     margin: 0;
   }
-`, b = (e) => r`<svg
+`, w = (e) => r`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="none"
@@ -2881,88 +2970,88 @@ const Kt = T`
   >
     ${e}
   </svg>`, o = {
-  mail: b(
+  mail: w(
     u`<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: b(
+  phone: w(
     u`<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: b(
+  user: w(
     u`<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: b(
+  userX: w(
     u`<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: b(
+  lock: w(
     u`<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`
   ),
-  key: b(
+  key: w(
     u`<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: b(
+  shield: w(
     u`<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: b(
+  shieldCheck: w(
     u`<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: b(
+  smartphone: w(
     u`<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>`
   ),
-  monitor: b(
+  monitor: w(
     u`<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: b(
+  globe: w(
     u`<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: b(
+  logOut: w(
     u`<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: b(
+  settings: w(
     u`<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: b(u`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
-  check: b(u`<path d="M20 6 9 17l-5-5"/>`),
-  users: b(
+  x: w(u`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
+  check: w(u`<path d="M20 6 9 17l-5-5"/>`),
+  users: w(
     u`<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`
   ),
-  copy: b(
+  copy: w(
     u`<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: b(
+  eye: w(
     u`<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: b(
+  eyeOff: w(
     u`<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: b(u`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
-  alert: b(
+  arrowLeft: w(u`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
+  alert: w(
     u`<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: b(u`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
-  checkCircle: b(u`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
-  link: b(
+  info: w(u`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
+  checkCircle: w(u`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
+  link: w(
     u`<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: b(
+  activity: w(
     u`<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: b(
+  trash: w(
     u`<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: b(
+  sparkles: w(
     u`<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: b(
+  refresh: w(
     u`<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: b(u`<path d="m6 9 6 6 6-6"/>`),
-  ghost: b(
+  chevronDown: w(u`<path d="m6 9 6 6 6-6"/>`),
+  ghost: w(
     u`<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: b(
+  qr: w(
     u`<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"/>`
   )
-}, S = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Yt = {
+}, S = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, te = {
   google: S(
     u`<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"/>`
   ),
@@ -3019,21 +3108,21 @@ const Kt = T`
   )
 };
 function j(e) {
-  return Yt[e] ?? o.globe;
+  return te[e] ?? o.globe;
 }
-function ct(e) {
+function ut(e) {
   const t = (e.trim()[0] ?? "?").toUpperCase();
   return /[A-Z0-9]/i.test(t) ? t : o.user;
 }
-function Q(e) {
+function et(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 he() {
+function be() {
   typeof window > "u" || window.dispatchEvent(new CustomEvent("authui:close"));
 }
-function at(e) {
+function lt(e) {
   const t = {
     length: e.length >= 8,
     long: e.length >= 12,
@@ -3049,25 +3138,87 @@ function at(e) {
   let s, a;
   return !t.length || i <= 1 ? (s = 1, a = "passwordStrengthTooWeak") : i === 2 ? (s = 2, a = "passwordStrengthWeak") : i === 3 ? (s = 3, a = "passwordStrengthFair") : i >= 5 && t.long && t.lower && t.upper && t.number && t.symbol ? (s = 4, a = "passwordStrengthVeryStrong") : (s = 4, a = "passwordStrengthStrong"), { level: s, percent: s * 25, labelKey: a, checks: t };
 }
-var Zt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, k = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Xt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Zt(t, i, a), a;
+function St(e, t) {
+  return e.replace(/\D/g, "").slice(0, t);
+}
+function Q(e) {
+  const t = e.length ?? 6, i = St(e.value, t), s = Math.ceil(t / 2), a = Math.min(i.length, t - 1), c = (p) => {
+    const P = p.target, W = St(P.value, t);
+    P.value = W, e.onChange(W);
+  }, d = (p) => {
+    p.ctrlKey || p.metaKey || p.altKey || p.key === "Backspace" || p.key === "Delete" || p.key === "Tab" || p.key === "Enter" || p.key === "Escape" || p.key === "ArrowLeft" || p.key === "ArrowRight" || p.key === "Home" || p.key === "End" || p.key.length === 1 && !/[0-9]/.test(p.key) && p.preventDefault();
+  }, m = (p) => {
+    const P = i[p] ?? "", W = !e.disabled && p === a;
+    return r`<div
+      class="otp-slot ${P ? "otp-slot-filled" : ""} ${W ? "otp-slot-active" : ""}"
+      aria-hidden="true"
+    >
+      ${P}
+    </div>`;
+  }, v = (p, P) => r`<div class="otp-group">
+      ${Array.from({ length: P - p }, (W, Ut) => m(p + Ut))}
+    </div>`;
+  return r`
+    <div
+      class="otp ${e.invalid ? "otp-invalid" : ""} ${e.disabled ? "otp-disabled" : ""}"
+      data-otp
+    >
+      ${v(0, s)}
+      <div class="otp-sep" aria-hidden="true"><span></span></div>
+      ${v(s, t)}
+      <input
+        class="otp-native"
+        id=${e.id}
+        type="text"
+        inputmode="numeric"
+        autocomplete=${e.autocomplete ?? "one-time-code"}
+        maxlength=${t}
+        minlength=${t}
+        pattern="[0-9]{${t}}"
+        ?required=${e.required !== !1}
+        ?disabled=${e.disabled}
+        .value=${i}
+        @input=${c}
+        @keydown=${d}
+        aria-invalid=${e.invalid ? "true" : n}
+        aria-describedby=${e.describedBy ? e.describedBy : n}
+        aria-label=${e.ariaLabel ? e.ariaLabel : n}
+      />
+    </div>
+  `;
+}
+const ee = ["totp", "email", "phone", "recoverycode"];
+function It(e) {
+  const t = {
+    totp: !!e.totp,
+    email: !!e.email,
+    phone: !!e.phone,
+    recoverycode: !!e.recoveryCode
+  };
+  return ee.filter((i) => t[i]);
+}
+function ie(e) {
+  return It(e)[0] ?? null;
+}
+var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, C = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? re(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && se(t, i, a), a;
 };
-const R = "authui-error";
-let $ = class extends E {
+const T = "authui-error";
+let x = class extends M {
   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.showPasswordConfirm = !1, this.expandedOAuth = null, 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.legalAccepted = !1, this.legalErrorFromOAuth = !1, this.onSignIn = (e) => {
+    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.showPasswordConfirm = !1, this.expandedOAuth = null, this.token = null, this.focusOnStep = !1, this.resendCooldownUntil = 0, this.challenge = null, this.mfaAutoStarted = !1, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.legalAccepted = !1, this.legalErrorFromOAuth = !1, this.onSignIn = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await l.signInWithEmailPassword(this.email, this.password), this.password = "", q("email-password"), this.fire("authui-success", { method: "email-password" });
+        await l.signInWithEmailPassword(this.email, this.password), this.password = "", V("email-password"), this.fire("authui-success", { method: "email-password" });
       });
     }, this.onSignUp = (e) => {
       e.preventDefault(), this.requireValid(e) && (this.legalErrorFromOAuth = !1, this.ensureLegalAccepted() && this.run(async () => {
-        await l.signUp(this.email, this.password, this.name), this.password = "", q("email-password"), this.fire("authui-success", { method: "sign-up" });
+        await l.signUp(this.email, this.password, this.name), this.password = "", V("email-password"), this.fire("authui-success", { method: "sign-up" });
       }));
     }, this.onGuest = () => {
       this.run(async () => {
-        await l.signInAnonymously(), q("anonymous"), this.fire("authui-success", { method: "anonymous" });
+        await l.signInAnonymously(), V("anonymous"), this.fire("authui-success", { method: "anonymous" });
       });
     }, this.onOAuth = (e) => {
       if (this.step === "sign-up" && !this.ensureLegalAccepted()) {
@@ -3075,8 +3226,8 @@ let $ = class extends E {
         return;
       }
       this.legalErrorFromOAuth = !1, this.run(async () => {
-        if (Rt(e), await l.signInWithOAuth(e), l.isPreview) {
-          xt(), this.fire("authui-success", { method: "oauth" });
+        if (_t(e), await l.signInWithOAuth(e), l.isPreview) {
+          At(), this.fire("authui-success", { method: "oauth" });
           return;
         }
         await new Promise((t) => setTimeout(t, 4e3));
@@ -3124,7 +3275,7 @@ let $ = class extends E {
       if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.token;
       t && this.run(async () => {
-        await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, q(t.kind), this.fire("authui-success", { method: t.kind });
+        await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, V(t.kind), this.fire("authui-success", { method: t.kind });
       }, "code");
     }, this.onChooseFactor = (e) => {
       this.run(async () => {
@@ -3142,7 +3293,7 @@ let $ = class extends E {
         try {
           await l.signOut();
         } catch (e) {
-          if (!H(e, v.sessionNotFound)) throw e;
+          if (!K(e, y.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
@@ -3157,24 +3308,34 @@ let $ = class extends E {
     e.has("view") && e.get("view") !== void 0 && this.go(this.view), e.has("auth") && this.syncFromStore();
   }
   updated(e) {
-    e.has("step") && (this.focusOnStep || this.embedded) && (this.focusOnStep = !1, requestAnimationFrame(() => this.firstInput?.focus()));
+    e.has("step") && (this.focusOnStep || this.embedded) && (this.focusOnStep = !1, requestAnimationFrame(() => this.firstInput?.focus())), this.maybeAutoStartMfa();
+  }
+  /** Vibes-style: pick a default factor once and create its challenge. */
+  maybeAutoStartMfa() {
+    if (this.step !== "mfa" || this.challenge || this.mfaAutoStarted || this.busy) return;
+    const e = this.auth.mfaFactors;
+    if (!e) return;
+    const t = ie(e);
+    t && (this.mfaAutoStarted = !0, queueMicrotask(() => {
+      !this.challenge && this.step === "mfa" && this.onChooseFactor(t);
+    }));
   }
   /** 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");
     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") }), t?.type === "notice" && !this.notice && (this.notice = {
+    (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") }), t?.type === "notice" && !this.notice && (this.auth.configError && t.message === this.auth.configError || (this.notice = {
       tone: t.tone === "error" ? "error" : t.tone,
       message: t.message
-    });
+    }));
   }
   /** Navigate between screens and reset transient state. */
   dismissNotice() {
     this.notice = null, this.auth.pending?.type === "notice" && l.setPending(null);
   }
   go(e) {
-    e === "sign-up" && this.config?.signUp === !1 && (e = "sign-in"), this.focusOnStep = !0, this.step = e, this.error = "", this.notice = null, this.busy = !1, this.showPassword = !1, this.showPasswordConfirm = !1, this.password = "", this.passwordConfirm = "", this.legalAccepted = !1, this.legalErrorFromOAuth = !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.busy = !1, this.showPassword = !1, this.showPasswordConfirm = !1, this.password = "", this.passwordConfirm = "", this.legalAccepted = !1, this.legalErrorFromOAuth = !1, e !== "mfa" && (this.challenge = null, this.mfaAutoStarted = !1), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
   }
   // ───────────────────────────── actions ─────────────────────────────
   async run(e, t = "link") {
@@ -3183,7 +3344,7 @@ let $ = class extends E {
       try {
         await e();
       } catch (i) {
-        this.error = Z(i, this.strings, t);
+        this.error = J(i, this.strings, t);
       } finally {
         this.busy = !1;
       }
@@ -3205,7 +3366,7 @@ let $ = class extends E {
     return r`
       <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
         ${this.renderHeader()}
-        ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
+        ${this.notice && !(this.auth.configError && this.notice.message === this.auth.configError) ? 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
@@ -3265,7 +3426,7 @@ let $ = class extends E {
     `;
   }
   renderError() {
-    return this.error ? r`<div class="alert alert-error" role="alert" id=${R}>
+    return this.error ? r`<div class="alert alert-error" role="alert" id=${T}>
           ${o.alert}
           <div class="alert-body">${this.error}</div>
         </div>` : n;
@@ -3276,7 +3437,7 @@ let $ = class extends E {
     </button>`;
   }
   passwordField(e) {
-    const t = this[e.field], i = e.field === "passwordConfirm" ? this.showPasswordConfirm : this.showPassword, s = e.meter ? at(t) : null;
+    const t = this[e.field], i = e.field === "passwordConfirm" ? this.showPasswordConfirm : this.showPassword, s = e.meter ? lt(t) : null;
     return r`
       <div class="field${e.forgot ? " field-with-forgot" : ""}">
         <label class="label" for=${e.id}>${e.label}</label>
@@ -3291,7 +3452,7 @@ let $ = class extends E {
             .value=${t}
             @input=${this.bind(e.field)}
             aria-invalid=${this.error ? "true" : n}
-            aria-describedby=${this.error ? R : n}
+            aria-describedby=${this.error ? T : n}
           />
           <button
             type="button"
@@ -3343,7 +3504,7 @@ let $ = class extends E {
           .value=${this.email}
           @input=${this.bind("email")}
           aria-invalid=${this.error ? "true" : n}
-          aria-describedby=${this.error ? R : n}
+          aria-describedby=${this.error ? T : n}
         />
       </div>
     `;
@@ -3352,20 +3513,16 @@ let $ = class extends E {
     return r`
       <div class="field">
         <label class="label" for="authui-code">${this.t("code")}</label>
-        <input
-          class="input input-otp"
-          id="authui-code"
-          type="text"
-          inputmode="numeric"
-          autocomplete="one-time-code"
-          maxlength="6"
-          pattern="[0-9]*"
-          required
-          .value=${this.code}
-          @input=${this.bind("code")}
-          aria-invalid=${this.error ? "true" : n}
-          aria-describedby=${this.error ? R : n}
-        />
+        ${Q({
+      id: "authui-code",
+      value: this.code,
+      invalid: !!this.error,
+      describedBy: this.error ? T : null,
+      disabled: this.busy,
+      onChange: (e) => {
+        this.code = e, this.requestUpdate();
+      }
+    })}
       </div>
     `;
   }
@@ -3395,7 +3552,7 @@ let $ = class extends E {
         type="checkbox"
         .checked=${this.legalAccepted}
         aria-invalid=${e ? "true" : n}
-        aria-describedby=${e ? R : n}
+        aria-describedby=${e ? T : n}
         @change=${(t) => {
       this.legalAccepted = t.target.checked, this.legalAccepted && this.error === this.t("errorLegalRequired") && (this.error = "", this.legalErrorFromOAuth = !1);
     }}
@@ -3449,7 +3606,7 @@ let $ = class extends E {
       <div class="stack">
         <div class="row">
           <div class="inline">
-            <span class="avatar">${ct(t)}</span>
+            <span class="avatar">${ut(t)}</span>
             <div class="row-main">
               <span class="row-title" title=${t}>${t}</span>
               ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : n}
@@ -3464,7 +3621,7 @@ let $ = class extends E {
           <button
             class="btn btn-outline btn-block"
             @click=${() => {
-      this.embedded ? this.fire("authui-open", { view: "account" }) : Q("account");
+      this.embedded ? this.fire("authui-open", { view: "account" }) : et("account");
     }}
           >
             ${o.settings} ${this.t("manageAccount")}
@@ -3479,56 +3636,56 @@ let $ = class extends E {
   renderProviders() {
     const e = [...this.config?.methods?.oauth ?? []];
     if (e.length === 0) return n;
-    const t = _(), i = e.find((d) => t === `oauth:${d}`) ?? null, s = this.config?.methods?.oauthLayout, a = s === "horizontal" || s === "icon" ? "icon" : s === "stack" || s === "accordion" ? s : e.length <= 2 ? "stack" : "accordion";
+    const t = q(), i = e.find((d) => t === `oauth:${d}`) ?? null, s = this.config?.methods?.oauthLayout, a = s === "horizontal" || s === "icon" ? "icon" : s === "stack" || s === "accordion" ? s : e.length <= 2 ? "stack" : "accordion";
     if (a === "icon") {
-      const d = [...e].sort((g, y) => {
-        const C = t === `oauth:${g}` ? 0 : 1, et = t === `oauth:${y}` ? 0 : 1;
-        return C - et;
+      const d = [...e].sort((m, v) => {
+        const p = t === `oauth:${m}` ? 0 : 1, P = t === `oauth:${v}` ? 0 : 1;
+        return p - P;
       });
       return r`
         <div class="providers icon">
-          ${d.map((g) => {
-        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: B(g) });
+          ${d.map((m) => {
+        const v = t === `oauth:${m}`, p = this.t("continueWith", { provider: N(m) });
         return r`<button
               type="button"
-              class="btn btn-outline ${y ? "last-used" : ""}"
-              @click=${() => this.onOAuth(g)}
+              class="btn btn-outline ${v ? "last-used" : ""}"
+              @click=${() => this.onOAuth(m)}
               ?disabled=${this.busy}
-              aria-label=${y ? `${C}. ${this.t("lastUsed")}` : C}
-              title=${C}
+              aria-label=${v ? `${p}. ${this.t("lastUsed")}` : p}
+              title=${p}
             >
-              ${j(g)}
-              ${y ? r`<span class="oauth-last-used-dot" aria-hidden="true"></span>` : n}
+              ${j(m)}
+              ${v ? r`<span class="oauth-last-used-dot" aria-hidden="true"></span>` : n}
             </button>`;
       })}
         </div>
       `;
     }
     if (a === "stack") {
-      const d = [...e].sort((g, y) => {
-        const C = t === `oauth:${g}` ? 0 : 1, et = t === `oauth:${y}` ? 0 : 1;
-        return C - et;
+      const d = [...e].sort((m, v) => {
+        const p = t === `oauth:${m}` ? 0 : 1, P = t === `oauth:${v}` ? 0 : 1;
+        return p - P;
       });
       return r`
         <div class="providers">
-          ${d.map((g) => {
-        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: B(g) });
+          ${d.map((m) => {
+        const v = t === `oauth:${m}`, p = this.t("continueWith", { provider: N(m) });
         return r`<button
               type="button"
-              class="btn btn-outline ${y ? "last-used" : ""}"
-              @click=${() => this.onOAuth(g)}
+              class="btn btn-outline ${v ? "last-used" : ""}"
+              @click=${() => this.onOAuth(m)}
               ?disabled=${this.busy}
-              aria-label=${y ? `${C}. ${this.t("lastUsed")}` : C}
+              aria-label=${v ? `${p}. ${this.t("lastUsed")}` : p}
             >
-              ${j(g)}
-              <span>${C}</span>
-              ${y ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
+              ${j(m)}
+              <span>${p}</span>
+              ${v ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
             </button>`;
       })}
         </div>
       `;
     }
-    const h = this.expandedOAuth && e.includes(this.expandedOAuth) ? this.expandedOAuth : i ?? e[0];
+    const c = this.expandedOAuth && e.includes(this.expandedOAuth) ? this.expandedOAuth : i ?? e[0];
     return r`
       <div
         class="providers accordion"
@@ -3537,9 +3694,9 @@ let $ = class extends E {
     }}
       >
         ${e.map((d) => {
-      const g = t === `oauth:${d}`, y = h === d, C = this.t("continueWith", { provider: B(d) });
+      const m = t === `oauth:${d}`, v = c === d, p = this.t("continueWith", { provider: N(d) });
       return r`<div
-            class="provider-slot ${y ? "is-expanded" : ""}"
+            class="provider-slot ${v ? "is-expanded" : ""}"
             @mouseenter=${() => {
         this.expandedOAuth = d;
       }}
@@ -3552,13 +3709,13 @@ let $ = class extends E {
         this.expandedOAuth = d;
       }}
               ?disabled=${this.busy}
-              aria-label=${g ? `${C}. ${this.t("lastUsed")}` : C}
+              aria-label=${m ? `${p}. ${this.t("lastUsed")}` : p}
             >
               ${j(d)}
               <span class="provider-label"
-                ><span><span class="provider-label-text">${C}</span></span></span
+                ><span><span class="provider-label-text">${p}</span></span></span
               >
-              ${g ? r`<span class="oauth-last-used" data-last-used=${d} aria-hidden="true">
+              ${m ? r`<span class="oauth-last-used" data-last-used=${d} aria-hidden="true">
                       <span class="oauth-last-used-dot"></span>
                       <span class="oauth-last-used-pill">${this.t("lastUsed")}</span>
                     </span>` : n}
@@ -3579,11 +3736,11 @@ let $ = class extends E {
         ${this.renderProviders()}
         ${i && (t || s.length > 0) ? r`<div class="separator-text">${this.t("or")}</div>` : n}
         ${t ? r`<form
-                class="form ${_() === "email-password" ? "last-used-form" : ""}"
+                class="form ${q() === "email-password" ? "last-used-form" : ""}"
                 @submit=${this.onSignIn}
                 novalidate
               >
-                ${_() === "email-password" ? r`<p class="hint">
+                ${q() === "email-password" ? r`<p class="hint">
                         <span class="last-used-badge">${this.t("lastUsed")}</span>
                       </p>` : n}
                 ${this.emailField()}
@@ -3592,26 +3749,26 @@ let $ = class extends E {
               </form>` : this.renderError()}
         ${s.length > 0 ? r`<div class="stack-sm">
                 ${s.map((a) => {
-      const h = _() === a.step;
+      const c = q() === a.step;
       return r`<button
                     type="button"
-                    class="btn btn-secondary btn-block ${h ? "last-used" : ""}"
+                    class="btn btn-secondary btn-block ${c ? "last-used" : ""}"
                     @click=${() => this.go(a.step)}
                     ?disabled=${this.busy}
                   >
                     ${a.icon} ${a.label}
-                    ${h ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
+                    ${c ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
                   </button>`;
     })}
               </div>` : n}
         ${e.anonymous ? r`<button
                 type="button"
-                class="btn btn-ghost btn-block ${_() === "anonymous" ? "last-used" : ""}"
+                class="btn btn-ghost btn-block ${q() === "anonymous" ? "last-used" : ""}"
                 @click=${this.onGuest}
                 ?disabled=${this.busy}
               >
                 ${o.ghost} ${this.t("continueAsGuest")}
-                ${_() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
+                ${q() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
               </button>` : n}
         ${t && this.config?.signUp !== !1 ? r`<div class="links">
                 <span>${this.t("noAccount")}</span>
@@ -3641,7 +3798,7 @@ let $ = class extends E {
                     .value=${this.name}
                     @input=${this.bind("name")}
                     aria-invalid=${this.error ? "true" : n}
-                    aria-describedby=${this.error ? R : n}
+                    aria-describedby=${this.error ? T : n}
                   />
                 </div>` : n}
           ${this.emailField()}
@@ -3811,7 +3968,7 @@ let $ = class extends E {
               .value=${this.phone}
               @input=${this.bind("phone")}
               aria-invalid=${this.error ? "true" : n}
-              aria-describedby=${this.error ? R : n}
+              aria-describedby=${this.error ? T : n}
             />
           </div>
           ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
@@ -3822,45 +3979,39 @@ let $ = class extends E {
   }
   renderMfa() {
     const e = this.auth.mfaFactors;
+    if (!e)
+      return r`
+        <div class="stack">
+          <div class="empty"><span class="spinner" aria-label=${this.t("loading")}></span></div>
+          ${this.renderError()}
+          <div class="links">
+            <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
+              ${this.t("cancel")}
+            </button>
+          </div>
+        </div>
+      `;
     if (!this.challenge) {
       const i = [
-        {
-          factor: "totp",
-          icon: o.smartphone,
-          label: this.t("mfaUseAuthenticator"),
-          available: e?.totp ?? !0
-        },
-        {
-          factor: "email",
-          icon: o.mail,
-          label: this.t("mfaUseEmail"),
-          available: e?.email ?? !0
-        },
-        {
-          factor: "phone",
-          icon: o.phone,
-          label: this.t("mfaUsePhone"),
-          available: e?.phone ?? !0
-        },
-        {
-          factor: "recoverycode",
-          icon: o.key,
-          label: this.t("mfaUseRecoveryCode"),
-          available: e?.recoveryCode ?? !0
-        }
-      ];
+        { factor: "totp", icon: o.smartphone, label: this.t("mfaUseAuthenticator") },
+        { factor: "email", icon: o.mail, label: this.t("mfaUseEmail") },
+        { factor: "phone", icon: o.phone, label: this.t("mfaUsePhone") },
+        { factor: "recoverycode", icon: o.key, label: this.t("mfaUseRecoveryCode") }
+      ], s = new Set(It(e)), a = i.filter((c) => s.has(c.factor));
       return r`
         <div class="stack">
           <div class="stack-sm">
-            ${i.filter((s) => s.available).map(
-        (s) => r`<button
-                    type="button"
-                    class="choice"
-                    @click=${() => this.onChooseFactor(s.factor)}
-                    ?disabled=${this.busy}
-                  >
-                    ${s.icon}<span class="choice-title">${s.label}</span>
-                  </button>`
+            ${a.length === 0 ? r`<div class="empty">
+                    <span class="spinner" aria-label=${this.t("loading")}></span>
+                  </div>` : a.map(
+        (c) => r`<button
+                        type="button"
+                        class="choice"
+                        @click=${() => this.onChooseFactor(c.factor)}
+                        ?disabled=${this.busy}
+                      >
+                        ${c.icon}<span class="choice-title">${c.label}</span>
+                      </button>`
       )}
           </div>
           ${this.renderError()}
@@ -3887,7 +4038,7 @@ let $ = class extends E {
                     .value=${this.code}
                     @input=${this.bind("code")}
                     aria-invalid=${this.error ? "true" : n}
-                    aria-describedby=${this.error ? R : n}
+                    aria-describedby=${this.error ? T : n}
                   />
                 </div>` : this.codeField()}
           ${this.renderError()} ${this.submitButton(this.t("verifyCode"))}
@@ -3905,75 +4056,75 @@ let $ = class extends E {
     `;
   }
 };
-$.styles = [...E.styles, Kt];
-k([
-  m({ type: String })
-], $.prototype, "view", 2);
-k([
-  m({ type: Boolean })
-], $.prototype, "embedded", 2);
-k([
-  c()
-], $.prototype, "step", 2);
-k([
-  c()
-], $.prototype, "busy", 2);
-k([
-  c()
-], $.prototype, "error", 2);
-k([
-  c()
-], $.prototype, "notice", 2);
-k([
-  c()
-], $.prototype, "showPassword", 2);
-k([
-  c()
-], $.prototype, "showPasswordConfirm", 2);
-k([
-  c()
-], $.prototype, "expandedOAuth", 2);
-k([
-  c()
-], $.prototype, "token", 2);
-k([
-  c()
-], $.prototype, "resendCooldownUntil", 2);
-k([
-  c()
-], $.prototype, "challenge", 2);
-k([
-  c()
-], $.prototype, "recovery", 2);
-k([
-  nt("form input:not([type=hidden])")
-], $.prototype, "firstInput", 2);
-k([
-  c()
-], $.prototype, "password", 2);
-k([
-  c()
-], $.prototype, "passwordConfirm", 2);
-k([
-  c()
-], $.prototype, "legalAccepted", 2);
-k([
-  c()
-], $.prototype, "legalErrorFromOAuth", 2);
-$ = k([
-  D("authui-sign-in")
-], $);
-var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Jt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Qt(t, i, a), a;
+x.styles = [...M.styles, Jt];
+C([
+  b({ type: String })
+], x.prototype, "view", 2);
+C([
+  b({ type: Boolean })
+], x.prototype, "embedded", 2);
+C([
+  h()
+], x.prototype, "step", 2);
+C([
+  h()
+], x.prototype, "busy", 2);
+C([
+  h()
+], x.prototype, "error", 2);
+C([
+  h()
+], x.prototype, "notice", 2);
+C([
+  h()
+], x.prototype, "showPassword", 2);
+C([
+  h()
+], x.prototype, "showPasswordConfirm", 2);
+C([
+  h()
+], x.prototype, "expandedOAuth", 2);
+C([
+  h()
+], x.prototype, "token", 2);
+C([
+  h()
+], x.prototype, "resendCooldownUntil", 2);
+C([
+  h()
+], x.prototype, "challenge", 2);
+C([
+  h()
+], x.prototype, "recovery", 2);
+C([
+  ct("form input:not([type=hidden])")
+], x.prototype, "firstInput", 2);
+C([
+  h()
+], x.prototype, "password", 2);
+C([
+  h()
+], x.prototype, "passwordConfirm", 2);
+C([
+  h()
+], x.prototype, "legalAccepted", 2);
+C([
+  h()
+], x.prototype, "legalErrorFromOAuth", 2);
+x = C([
+  z("authui-sign-in")
+], x);
+var ae = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, g = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ne(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && ae(t, i, a), a;
 };
-let p = class extends E {
+let f = class extends M {
   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.showOldPassword = !1, this.showNewPassword = !1, this.showNewPasswordConfirm = !1, 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.verifyEmailCooldownTimer = null, this.verifyPhoneCooldownUntil = 0, this.verifyPhoneCooldownTimer = null, this.onTabsKeydown = (e) => {
+    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.showOldPassword = !1, this.showNewPassword = !1, this.showNewPasswordConfirm = !1, this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.browserIconFailed = {}, 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.verifyEmailCooldownTimer = null, this.verifyPhoneCooldownUntil = 0, this.verifyPhoneCooldownTimer = null, this.onTabsKeydown = (e) => {
       const t = [...this.renderRoot?.querySelectorAll('[role="tab"]') ?? []];
       if (!t.length) return;
-      const i = t.findIndex((h) => h.getAttribute("aria-selected") === "true");
+      const i = t.findIndex((c) => c.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")
@@ -4074,7 +4225,7 @@ let p = class extends E {
         try {
           this.recoveryCodes = await l.createRecoveryCodes();
         } catch (e) {
-          if (!H(e, v.recoveryCodesExist)) throw e;
+          if (!K(e, y.recoveryCodesExist)) throw e;
           this.recoveryCodes = await l.getRecoveryCodes();
         }
         await this.loadFactors();
@@ -4197,9 +4348,9 @@ let p = class extends E {
       try {
         await t(), i && this.setNotice("success", i);
       } catch (s) {
-        H(s, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
+        K(s, y.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
           ...this.errors,
-          [e]: Z(
+          [e]: J(
             s,
             this.strings,
             e.includes("code") ? "code" : e === "password" ? "password" : "link"
@@ -4354,7 +4505,7 @@ let p = class extends E {
     return r`
       <div class="between">
         <div class="identity">
-          <span class="avatar">${ct(t)}</span>
+          <span class="avatar">${ut(t)}</span>
           <div class="row-main">
             <span class="row-title" title=${t}>
               ${t}
@@ -4479,7 +4630,7 @@ let p = class extends E {
                 autocomplete="new-password"
               />
               ${this.emailPassword ? (() => {
-        const t = at(this.emailPassword);
+        const t = lt(this.emailPassword);
         return r`<div class="strength" aria-live="polite">
                         <div
                           class="strength-meter"
@@ -4632,20 +4783,15 @@ let p = class extends E {
                 </div>` : n}
           ${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));
-      }}
-                  />
+
+                  ${Q({
+        id: "acc-phone-code",
+        value: this.phoneCode,
+        disabled: !!this.busy,
+        onChange: (t) => {
+          this.phoneCode = t;
+        }
+      })}
                 </div>` : n}
           ${this.error("phone")} ${this.error("verify-phone")} ${this.error("verify-phone-code")}
         </form>`,
@@ -4774,7 +4920,7 @@ let p = class extends E {
                     </button>
                   </div>
                   ${this.newPassword ? (() => {
-        const i = at(this.newPassword);
+        const i = lt(this.newPassword);
         return r`<div class="strength" aria-live="polite">
                             <div
                               class="strength-meter"
@@ -4833,7 +4979,7 @@ let p = class extends E {
     </div>`;
   }
   renderMfaCard() {
-    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? l.isPreview ? Mt(this.authenticator.uri) : new St(l.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? l.isPreview ? Dt(this.authenticator.uri) : new rt(l.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
@@ -4931,17 +5077,15 @@ let p = class extends E {
                 </div>
                 <div class="field">
                   <label class="label" for="acc-totp">${this.t("code")}</label>
-                  <input
-                    class="input input-otp"
-                    id="acc-totp"
-                    inputmode="numeric"
-                    autocomplete="one-time-code"
-                    maxlength="6"
-                    pattern="[0-9]*"
-                    required
-                    .value=${this.authenticatorCode}
-                    @input=${this.bind("authenticatorCode")}
-                  />
+
+                  ${Q({
+        id: "acc-totp",
+        value: this.authenticatorCode,
+        disabled: !!this.busy,
+        onChange: (s) => {
+          this.authenticatorCode = s;
+        }
+      })}
                 </div>
                 ${this.error("authenticator-code")}
                 <div class="inline">
@@ -5058,17 +5202,23 @@ let p = class extends E {
                   <label class="label" for="acc-stepup"
                     >${e.challenge.factor === "recoverycode" ? this.t("recoveryCode") : this.t("code")}</label
                   >
-                  <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}
-                    @input=${this.bind("stepUpCode")}
-                  />
+                  ${e.challenge.factor === "recoverycode" ? r`<input
+                          class="input mono"
+                          id="acc-stepup"
+                          inputmode="text"
+                          maxlength="64"
+                          autocomplete="one-time-code"
+                          required
+                          .value=${this.stepUpCode}
+                          @input=${this.bind("stepUpCode")}
+                        />` : Q({
+        id: "acc-stepup",
+        value: this.stepUpCode,
+        disabled: !!this.busy,
+        onChange: (s) => {
+          this.stepUpCode = s;
+        }
+      })}
                 </div>
                 <button class="btn btn-primary btn-sm" type="submit" ?disabled=${!!this.busy}>
                   ${this.spinner("stepup-code")} ${this.t("verifyCode")}
@@ -5093,10 +5243,53 @@ let p = class extends E {
     );
   }
   // ── Sessions ──
-  deviceIcon(e) {
+  formatSessionDate(e) {
+    if (!e) return "";
+    const t = new Date(e);
+    return Number.isNaN(t.getTime()) ? e : t.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+  }
+  browserIconUrl(e) {
+    const t = (e.clientCode || "").trim();
+    if (!t || t === "-") return null;
+    const i = l.getClient();
+    if (!i) return null;
+    try {
+      const s = new rt(i).getBrowser(t, 64, 64);
+      return typeof s == "string" ? s : String(s);
+    } catch {
+      return null;
+    }
+  }
+  flagUrl(e) {
+    const t = (e.countryCode || "").trim().toLowerCase();
+    if (!t || t === "--") return null;
+    const i = l.getClient();
+    if (!i) return null;
+    try {
+      const s = new rt(i).getFlag(t, 32, 32);
+      return typeof s == "string" ? s : String(s);
+    } catch {
+      return null;
+    }
+  }
+  deviceKindIcon(e) {
     const t = (e.deviceName || "").toLowerCase(), i = (e.osName || e.osCode || "").toLowerCase();
     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;
   }
+  deviceIcon(e) {
+    const t = this.browserIconUrl(e), i = !!this.browserIconFailed[e.$id], s = this.deviceKindIcon(e);
+    return !t || i ? r`<span class="device">${s}</span>` : r`<span class="device">
+      <img
+        class="device-img"
+        src=${t}
+        alt=""
+        @error=${() => {
+      this.browserIconFailed = { ...this.browserIconFailed, [e.$id]: !0 };
+    }}
+      />
+      <span class="device-badge" aria-hidden="true">${s}</span>
+    </span>`;
+  }
   renderSessions() {
     const e = this.sessions;
     return r`<div class="section">
@@ -5108,34 +5301,52 @@ let p = class extends E {
         o.monitor,
         this.t("noSessions"),
         this.t("noSessionsDescription")
-      ) : 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 ? r`<span class="muted small">${t.clientVersion}</span>` : n}
+      ) : e.map((t) => {
+        const i = this.flagUrl(t), s = Array.isArray(t.factors) && t.factors.length > 0, a = (t.provider || "").trim(), c = !!a && a !== "email" && a !== "anonymous", d = this.formatSessionDate(t.$createdAt), m = this.formatSessionDate(t.expire), v = t.countryName || t.countryCode || "";
+        return r`<div class="row">
+                    <div class="inline">
+                      ${this.deviceIcon(t)}
+                      <div class="row-main">
+                        <span class="row-title">
+                          ${t.clientName || a || this.t("sessions")}
+                          ${t.clientVersion ? r`<span class="muted small">${t.clientVersion}</span>` : n}
+                          <span class="session-badges">
                             ${t.current ? r`<span class="badge badge-info">${this.t("currentSession")}</span>` : n}
+                            ${s ? r`<span
+                                    class="badge badge-info"
+                                    title=${this.t("sessionMfaFactors", { factors: t.factors.join(", ") })}
+                                    >${o.shield} ${this.t("mfaBadge")}</span
+                                  >` : n}
+                            ${c ? r`<span class="badge badge-outline"
+                                    >${j(a)} ${N(a)}</span
+                                  >` : n}
                           </span>
-                          <span class="row-sub"
-                            >${[t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
-                          >
-                        </div>
+                        </span>
+                        <span class="row-sub row-sub-meta">
+                          ${t.osName ? r`<span>${t.osName}</span>` : n}
+                          ${v ? r`<span
+                                  >${i ? r`<img class="flag" src=${i} alt="" />` : n}${v}</span
+                                >` : n}
+                          ${t.ip ? r`<span>${t.ip}</span>` : n}
+                        </span>
+                        ${d || m ? r`<span class="session-dates"
+                                >${d ? this.t("sessionCreated", { date: d }) : n}${d && m ? " · " : ""}${m ? this.t("sessionExpires", { date: m }) : n}</span
+                              >` : n}
                       </div>
-                      <div class="row-actions">
-                        ${this.busy === `session-${t.$id}` ? r`<span class="spinner"></span>` : n}
-                        <button
-                          class="btn btn-ghost btn-sm"
-                          @click=${() => this.onDeleteSession(t.$id)}
-                          ?disabled=${!!this.busy}
-                          aria-label=${this.t("signOutSession")}
-                        >
-                          ${o.logOut}
-                        </button>
-                      </div>
-                    </div>`
-      )}`
+                    </div>
+                    <div class="row-actions">
+                      ${this.busy === `session-${t.$id}` ? r`<span class="spinner"></span>` : n}
+                      <button
+                        class="btn btn-ghost btn-sm"
+                        @click=${() => this.onDeleteSession(t.$id)}
+                        ?disabled=${!!this.busy}
+                        aria-label=${this.t("signOutSession")}
+                      >
+                        ${o.logOut}
+                      </button>
+                    </div>
+                  </div>`;
+      })}`
     )}
       ${this.card(
       this.t("signOutAllSessions"),
@@ -5179,7 +5390,7 @@ let p = class extends E {
                       <div class="inline">
                         <span class="device">${j(i.provider)}</span>
                         <div class="row-main">
-                          <span class="row-title">${B(i.provider)}</span>
+                          <span class="row-title">${N(i.provider)}</span>
                           <span class="row-sub">${i.providerEmail || i.providerUid}</span>
                         </div>
                       </div>
@@ -5223,7 +5434,7 @@ let p = class extends E {
                     ?disabled=${!!this.busy}
                   >
                     ${this.spinner(`connect-${i}`)} ${j(i)}
-                    ${this.t("connectProvider", { provider: B(i) })}
+                    ${this.t("connectProvider", { provider: N(i) })}
                   </button>`
       )}` : void 0
     )}
@@ -5255,9 +5466,9 @@ let p = class extends E {
     </div>`;
   }
 };
-p.styles = [
-  ...E.styles,
-  T`
+f.styles = [
+  ...M.styles,
+  D`
       :host {
         display: block;
         width: 100%;
@@ -5329,6 +5540,7 @@ p.styles = [
         gap: 16px;
       }
       .device {
+        position: relative;
         width: 36px;
         height: 36px;
         border-radius: var(--authui-radius-md);
@@ -5338,11 +5550,79 @@ p.styles = [
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        overflow: visible;
+        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--authui-border) 70%, transparent);
       }
       .device svg {
         width: 18px;
         height: 18px;
       }
+      .device-img {
+        width: 36px;
+        height: 36px;
+        object-fit: contain;
+        padding: 4px;
+        border-radius: var(--authui-radius-md);
+        display: block;
+      }
+      .device-badge {
+        position: absolute;
+        inset-inline-end: -3px;
+        bottom: -3px;
+        width: 16px;
+        height: 16px;
+        border-radius: 999px;
+        background: var(--authui-card);
+        color: var(--authui-muted-foreground);
+        box-shadow: 0 0 0 2px var(--authui-card);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .device-badge svg {
+        width: 10px;
+        height: 10px;
+      }
+      .flag {
+        width: 14px;
+        height: 14px;
+        border-radius: 2px;
+        object-fit: cover;
+        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--authui-border) 50%, transparent);
+        flex-shrink: 0;
+        vertical-align: middle;
+      }
+      .row-sub-meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+      }
+      .row-sub-meta .flag {
+        margin-inline-end: 2px;
+      }
+      .session-badges {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        align-items: center;
+      }
+      .session-badges .badge {
+        font-size: 10px;
+        padding: 0 6px;
+        height: 18px;
+        gap: 3px;
+      }
+      .session-badges .badge svg {
+        width: 10px;
+        height: 10px;
+      }
+      .session-dates {
+        display: block;
+        font-size: 11px;
+        color: var(--authui-muted-foreground);
+        margin-top: 2px;
+      }
       .log-time {
         font-size: 12px;
         color: var(--authui-muted-foreground);
@@ -5353,129 +5633,132 @@ p.styles = [
       }
     `
 ];
-f([
-  m({ type: Boolean })
-], p.prototype, "embedded", 2);
-f([
-  m({ type: String })
-], p.prototype, "tab", 2);
-f([
-  c()
-], p.prototype, "active", 2);
-f([
-  c()
-], p.prototype, "busy", 2);
-f([
-  c()
-], p.prototype, "notice", 2);
-f([
-  c()
-], p.prototype, "errors", 2);
-f([
-  c()
-], p.prototype, "nameInput", 2);
-f([
-  c()
-], p.prototype, "emailInput", 2);
-f([
-  c()
-], p.prototype, "emailPassword", 2);
-f([
-  c()
-], p.prototype, "phoneInput", 2);
-f([
-  c()
-], p.prototype, "phonePassword", 2);
-f([
-  c()
-], p.prototype, "phoneCode", 2);
-f([
-  c()
-], p.prototype, "phoneCodeSent", 2);
-f([
-  c()
-], p.prototype, "guestName", 2);
-f([
-  c()
-], p.prototype, "oldPassword", 2);
-f([
-  c()
-], p.prototype, "newPassword", 2);
-f([
-  c()
-], p.prototype, "newPasswordConfirm", 2);
-f([
-  c()
-], p.prototype, "showOldPassword", 2);
-f([
-  c()
-], p.prototype, "showNewPassword", 2);
-f([
-  c()
-], p.prototype, "showNewPasswordConfirm", 2);
-f([
-  c()
-], p.prototype, "authenticator", 2);
-f([
-  c()
-], p.prototype, "authenticatorCode", 2);
-f([
-  c()
-], p.prototype, "factors", 2);
-f([
-  c()
-], p.prototype, "recoveryCodes", 2);
-f([
-  c()
-], p.prototype, "stepUp", 2);
-f([
-  c()
-], p.prototype, "stepUpCode", 2);
-f([
-  c()
-], p.prototype, "copied", 2);
-f([
-  c()
-], p.prototype, "sessions", 2);
-f([
-  c()
-], p.prototype, "identities", 2);
-f([
-  c()
-], p.prototype, "logs", 2);
-f([
-  c()
-], p.prototype, "logsSupported", 2);
-f([
-  c()
-], p.prototype, "confirmDelete", 2);
-f([
-  c()
-], p.prototype, "confirmRegenerate", 2);
-f([
-  c()
-], p.prototype, "confirmRemoveAuthenticator", 2);
-f([
-  c()
-], p.prototype, "confirmSignOutAll", 2);
-f([
-  c()
-], p.prototype, "confirmDisconnectId", 2);
-f([
-  c()
-], p.prototype, "verifyEmailCooldownUntil", 2);
-f([
-  c()
-], p.prototype, "verifyPhoneCooldownUntil", 2);
-p = f([
-  D("authui-account")
-], p);
-var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, L = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ee(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && te(t, i, a), a;
+g([
+  b({ type: Boolean })
+], f.prototype, "embedded", 2);
+g([
+  b({ type: String })
+], f.prototype, "tab", 2);
+g([
+  h()
+], f.prototype, "active", 2);
+g([
+  h()
+], f.prototype, "busy", 2);
+g([
+  h()
+], f.prototype, "notice", 2);
+g([
+  h()
+], f.prototype, "errors", 2);
+g([
+  h()
+], f.prototype, "nameInput", 2);
+g([
+  h()
+], f.prototype, "emailInput", 2);
+g([
+  h()
+], f.prototype, "emailPassword", 2);
+g([
+  h()
+], f.prototype, "phoneInput", 2);
+g([
+  h()
+], f.prototype, "phonePassword", 2);
+g([
+  h()
+], f.prototype, "phoneCode", 2);
+g([
+  h()
+], f.prototype, "phoneCodeSent", 2);
+g([
+  h()
+], f.prototype, "guestName", 2);
+g([
+  h()
+], f.prototype, "oldPassword", 2);
+g([
+  h()
+], f.prototype, "newPassword", 2);
+g([
+  h()
+], f.prototype, "newPasswordConfirm", 2);
+g([
+  h()
+], f.prototype, "showOldPassword", 2);
+g([
+  h()
+], f.prototype, "showNewPassword", 2);
+g([
+  h()
+], f.prototype, "showNewPasswordConfirm", 2);
+g([
+  h()
+], f.prototype, "authenticator", 2);
+g([
+  h()
+], f.prototype, "authenticatorCode", 2);
+g([
+  h()
+], f.prototype, "factors", 2);
+g([
+  h()
+], f.prototype, "recoveryCodes", 2);
+g([
+  h()
+], f.prototype, "stepUp", 2);
+g([
+  h()
+], f.prototype, "stepUpCode", 2);
+g([
+  h()
+], f.prototype, "copied", 2);
+g([
+  h()
+], f.prototype, "sessions", 2);
+g([
+  h()
+], f.prototype, "browserIconFailed", 2);
+g([
+  h()
+], f.prototype, "identities", 2);
+g([
+  h()
+], f.prototype, "logs", 2);
+g([
+  h()
+], f.prototype, "logsSupported", 2);
+g([
+  h()
+], f.prototype, "confirmDelete", 2);
+g([
+  h()
+], f.prototype, "confirmRegenerate", 2);
+g([
+  h()
+], f.prototype, "confirmRemoveAuthenticator", 2);
+g([
+  h()
+], f.prototype, "confirmSignOutAll", 2);
+g([
+  h()
+], f.prototype, "confirmDisconnectId", 2);
+g([
+  h()
+], f.prototype, "verifyEmailCooldownUntil", 2);
+g([
+  h()
+], f.prototype, "verifyPhoneCooldownUntil", 2);
+f = g([
+  z("authui-account")
+], f);
+var oe = Object.defineProperty, le = Object.getOwnPropertyDescriptor, L = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? le(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && oe(t, i, a), a;
 };
-let I = class extends E {
+let E = class extends M {
   constructor() {
     super(...arguments), this.open = !1, this.view = "sign-in", this.closeOnSuccess = !0, this.handledPending = null, this.scrollCue = !1, this.bodyResizeObserver = null, this.onOpenEvent = (e) => {
       const t = e.detail ?? {};
@@ -5571,9 +5854,9 @@ let I = class extends E {
     `;
   }
 };
-I.styles = [
-  ...E.styles,
-  T`
+E.styles = [
+  ...M.styles,
+  D`
       :host {
         display: contents;
       }
@@ -5668,13 +5951,13 @@ I.styles = [
     `
 ];
 L([
-  m({ type: Boolean, reflect: !0 })
-], I.prototype, "open", 2);
+  b({ type: Boolean, reflect: !0 })
+], E.prototype, "open", 2);
 L([
-  m({ type: String })
-], I.prototype, "view", 2);
+  b({ type: String })
+], E.prototype, "view", 2);
 L([
-  m({
+  b({
     attribute: "close-on-success",
     reflect: !0,
     converter: {
@@ -5688,28 +5971,28 @@ L([
       }
     }
   })
-], I.prototype, "closeOnSuccess", 2);
+], E.prototype, "closeOnSuccess", 2);
 L([
-  c()
-], I.prototype, "handledPending", 2);
+  h()
+], E.prototype, "handledPending", 2);
 L([
-  c()
-], I.prototype, "scrollCue", 2);
+  h()
+], E.prototype, "scrollCue", 2);
 L([
-  nt("dialog")
-], I.prototype, "dialog", 2);
+  ct("dialog")
+], E.prototype, "dialog", 2);
 L([
-  nt(".body")
-], I.prototype, "bodyEl", 2);
-I = L([
-  D("authui-modal")
-], I);
-var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, tt = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? se(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && ie(t, i, a), a;
+  ct(".body")
+], E.prototype, "bodyEl", 2);
+E = L([
+  z("authui-modal")
+], E);
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, st = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? de(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && ce(t, i, a), a;
 };
-let N = class extends E {
+let H = class extends M {
   constructor() {
     super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
   }
@@ -5717,7 +6000,7 @@ let N = class extends E {
     const e = this.size === "md" ? "" : `btn-${this.size}`;
     return r`<button
       class="btn btn-${this.variant} ${e}"
-      @click=${() => Q(this.view)}
+      @click=${() => et(this.view)}
       part="button"
     >
       <slot
@@ -5726,9 +6009,9 @@ let N = class extends E {
     </button>`;
   }
 };
-N.styles = [
-  ...E.styles,
-  T`
+H.styles = [
+  ...M.styles,
+  D`
       :host {
         display: inline-block;
       }
@@ -5737,24 +6020,24 @@ N.styles = [
       }
     `
 ];
-tt([
-  m({ type: String })
-], N.prototype, "view", 2);
-tt([
-  m({ type: String })
-], N.prototype, "variant", 2);
-tt([
-  m({ type: String })
-], N.prototype, "size", 2);
-N = tt([
-  D("authui-button")
-], N);
-var re = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ae(t, i) : t, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && re(t, i, a), a;
+st([
+  b({ type: String })
+], H.prototype, "view", 2);
+st([
+  b({ type: String })
+], H.prototype, "variant", 2);
+st([
+  b({ type: String })
+], H.prototype, "size", 2);
+H = st([
+  z("authui-button")
+], H);
+var he = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ue(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (a = (s ? d(t, i, a) : d(a)) || a);
+  return s && a && he(t, i, a), a;
 };
-let U = class extends E {
+let U = class extends M {
   constructor() {
     super(...arguments), this.showTeams = !1, this.menuItems = [], this.src = "", this.menuOpen = !1, this.menuAbove = !1, this.teams = [], this.teamsLoading = !1, this.activeTeamId = null, this.onReposition = () => {
       this.menuOpen && this.placeMenu();
@@ -5799,10 +6082,10 @@ let U = class extends E {
     if (!e || !t) return;
     const i = e.getBoundingClientRect(), s = 6, a = 8;
     t.style.maxHeight = "";
-    const h = t.offsetHeight + s, d = window.innerHeight - i.bottom, g = i.top, y = d < h && g > d;
-    y !== this.menuAbove && (this.menuAbove = y);
-    const C = Math.max(80, (y ? g : d) - s - a);
-    t.style.maxHeight = `${C}px`;
+    const c = t.offsetHeight + s, d = window.innerHeight - i.bottom, m = i.top, v = d < c && m > d;
+    v !== this.menuAbove && (this.menuAbove = v);
+    const p = Math.max(80, (v ? m : d) - s - a);
+    t.style.maxHeight = `${p}px`;
   }
   focusMenuItem(e) {
     [
@@ -5829,7 +6112,7 @@ let U = class extends E {
     if (e === "loading" && i)
       return r`<span class="avatar"><span class="spinner"></span></span>`;
     if (e !== "signed-in" || !t)
-      return r`<button class="btn btn-primary btn-sm" @click=${() => Q("sign-in")}>
+      return r`<button class="btn btn-primary btn-sm" @click=${() => et("sign-in")}>
         <slot>${this.t("signIn")}</slot>
       </button>`;
     const s = t.name || t.email || t.phone || this.t("guestAccount");
@@ -5842,7 +6125,7 @@ let U = class extends E {
         aria-label=${s}
       >
         <span class="avatar"
-          >${this.src ? r`<img src=${this.src} alt="" />` : ct(s)}</span
+          >${this.src ? r`<img src=${this.src} alt="" />` : ut(s)}</span
         >
       </button>
       ${this.menuOpen ? r`<div class="menu ${this.menuAbove ? "above" : ""}" role="menu">
@@ -5873,7 +6156,7 @@ let U = class extends E {
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, Q("account");
+      this.menuOpen = !1, et("account");
     }}
               >
                 ${o.settings} ${this.t("manageAccount")}
@@ -5928,8 +6211,8 @@ let U = class extends E {
   }
 };
 U.styles = [
-  ...E.styles,
-  T`
+  ...M.styles,
+  D`
       :host {
         display: inline-block;
         position: relative;
@@ -6049,63 +6332,63 @@ U.styles = [
       }
     `
 ];
-F([
-  m({ type: Boolean, attribute: "show-teams" })
+R([
+  b({ type: Boolean, attribute: "show-teams" })
 ], U.prototype, "showTeams", 2);
-F([
-  m({ attribute: !1 })
+R([
+  b({ attribute: !1 })
 ], U.prototype, "menuItems", 2);
-F([
-  m({ type: String })
+R([
+  b({ type: String })
 ], U.prototype, "src", 2);
-F([
-  c()
+R([
+  h()
 ], U.prototype, "menuOpen", 2);
-F([
-  c()
+R([
+  h()
 ], U.prototype, "menuAbove", 2);
-F([
-  c()
+R([
+  h()
 ], U.prototype, "teams", 2);
-F([
-  c()
+R([
+  h()
 ], U.prototype, "teamsLoading", 2);
-F([
-  c()
+R([
+  h()
 ], U.prototype, "activeTeamId", 2);
-U = F([
-  D("authui-user-button")
+U = R([
+  z("authui-user-button")
 ], U);
 export {
-  Tt as A,
-  de as C,
-  v as E,
-  wt as F,
-  Et as P,
+  qt as A,
+  ve as C,
+  y as E,
+  kt as F,
+  Tt as P,
   l as a,
-  p as b,
-  he as c,
-  N as d,
-  w as e,
-  E as f,
-  I as g,
-  W as h,
-  $ as i,
+  f as b,
+  be as c,
+  H as d,
+  $ as e,
+  M as f,
+  E as g,
+  G as h,
+  x as i,
   U as j,
-  ce as k,
-  mt as l,
-  At as m,
-  Z as n,
-  Q as o,
-  _ as p,
-  ft as q,
-  Ot as r,
-  B as s,
-  q as t,
-  xt as u,
-  at as v,
-  Ft as w,
-  Rt as x,
-  V as y,
-  Gt as z
+  ge as k,
+  bt as l,
+  Mt as m,
+  J as n,
+  et as o,
+  q as p,
+  vt as q,
+  Lt as r,
+  N as s,
+  V as t,
+  At as u,
+  lt as v,
+  zt as w,
+  _t as x,
+  B as y,
+  Qt as z
 };