@getauthui/core 0.1.11 → 0.1.12

package/dist/{authui-user-button-BErNabVH.js → authui-user-button--QfXbaC8.js}

@@ -1,5 +1,5 @@
-import { state as c, property as m, customElement as T, query as at } from "lit/decorators.js";
-import { css as L, LitElement as nt, nothing as n, html as r, svg as u } from "lit";
+import { state as c, property as m, customElement as L, query as at } from "lit/decorators.js";
+import { css as T, LitElement as nt, nothing as n, html as r, svg as u } from "lit";
 import { Client as ct, Account as dt, Teams as kt, ID as W, Avatars as Ct } from "appwrite";
 const St = {
   signIn: "Sign in",
@@ -79,7 +79,7 @@ const St = {
   twoFactor: "Two-factor authentication",
   mfaBadge: "MFA",
   twoFactorDescription: "Require a second factor when signing in to this account.",
-  mfaNoFactorWarning: "Turn on an authenticator, or verify your email or phone, before enabling two-factor authentication. Without a factor, this setting does not protect the account.",
+  mfaNoFactorWarning: "Two-factor authentication is on, but no factors are set up yet. Add an authenticator, or verify your email or phone. Without a factor, this setting does not protect the account.",
   enable: "Enable",
   disable: "Disable",
   authenticatorApp: "Authenticator app",
@@ -248,13 +248,13 @@ const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
   "juniper",
   "kite",
   "lumen"
-], ht = () => `${G[Math.floor(Math.random() * G.length)]}-${G[Math.floor(Math.random() * G.length)]}`, D = () => Math.random().toString(36).slice(2, 12), ut = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Et = {
+], ht = () => `${G[Math.floor(Math.random() * G.length)]}-${G[Math.floor(Math.random() * G.length)]}`, D = () => Math.random().toString(36).slice(2, 12), ut = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Ut = {
   name: "Ada Lovelace",
   email: "ada@example.com",
   phone: "+15550100"
 };
 class It {
-  constructor(t = Et) {
+  constructor(t = Ut) {
     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 ─────────────────────────
@@ -591,7 +591,7 @@ class It {
     this.user = null, this.mfaPending = !1, this.sessions = [], this.identities = [], this.logs = [], this.tokens.clear();
   }
 }
-function Ut(e) {
+function Et(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;
@@ -760,7 +760,7 @@ function $t() {
     } catch {
     }
 }
-function mt() {
+function ft() {
   if (!(typeof sessionStorage > "u"))
     try {
       sessionStorage.removeItem(Z);
@@ -777,7 +777,7 @@ function A(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const it = "authui", ft = ["userId", "secret", "expire", "project", "error", it], gt = () => ({
+const it = "authui", mt = ["userId", "secret", "expire", "project", "error", it], gt = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
@@ -785,7 +785,7 @@ const it = "authui", ft = ["userId", "secret", "expire", "project", "error", it]
   configured: !1,
   configError: null
 });
-class Lt {
+class Tt {
   constructor() {
     this.client = null, this.account = null, this.config = null, this.state = gt(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null, this.teams = null, this.activeTeamId = null;
   }
@@ -1332,7 +1332,7 @@ class Lt {
   /** 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 ft) s.searchParams.delete(a);
+    for (const a of mt) s.searchParams.delete(a);
     return s.searchParams.set(it, t), s.toString();
   }
   setPending(t) {
@@ -1361,10 +1361,10 @@ class Lt {
       switch (i) {
         case "oauth":
         case "magic-url":
-          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? $t() : _("magic-url")) : (i === "oauth" && mt(), h());
+          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? $t() : _("magic-url")) : (i === "oauth" && ft(), h());
           break;
         case "oauth-failed":
-          mt(), this.setState({
+          ft(), this.setState({
             pending: {
               type: "notice",
               tone: "error",
@@ -1397,7 +1397,7 @@ class Lt {
   }
   cleanUrl() {
     const t = new URL(window.location.href);
-    for (const i of ft) t.searchParams.delete(i);
+    for (const i of mt) t.searchParams.delete(i);
     window.history.replaceState(window.history.state, "", t.toString());
   }
   /** Test helper. */
@@ -1405,7 +1405,7 @@ class Lt {
     this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = gt(), this.listeners.clear();
   }
 }
-const o = new Lt();
+const l = new Tt();
 class Rt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
@@ -1441,7 +1441,7 @@ const vt = new Rt(), bt = {
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, Tt = L`
+}, Lt = T`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -1519,7 +1519,7 @@ const vt = new Rt(), bt = {
     --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;
   }
-`, Dt = L`
+`, Dt = T`
   *,
   *::before,
   *::after {
@@ -2529,12 +2529,12 @@ var zt = Object.defineProperty, _t = (e, t, i, s) => {
 }, O;
 const xt = (O = class extends nt {
   constructor() {
-    super(...arguments), this.auth = o.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
+    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);
-    this.auth = o.getState(), this.unsubscribeStore = o.on("change", (t) => {
+    this.auth = l.getState(), this.unsubscribeStore = l.on("change", (t) => {
       this.auth = t, this.applyBranding();
     }), this.unsubscribeTheme = vt.subscribe(() => this.applyBranding()), this.applyBranding();
   }
@@ -2544,14 +2544,14 @@ const xt = (O = class extends nt {
     this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
   }
   get strings() {
-    return o.getStrings();
+    return l.getStrings();
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
     return At(this.strings[t], i);
   }
   get config() {
-    return o.getConfig();
+    return l.getConfig();
   }
   get productName() {
     return this.config?.branding?.name ?? "";
@@ -2568,11 +2568,11 @@ const xt = (O = class extends nt {
   fire(t, i) {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-}, O.styles = [Tt, Dt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
+}, O.styles = [Lt, Dt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
 _t([
   c()
 ], xt.prototype, "auth");
-let U = xt;
+let E = xt;
 var qt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Vt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
@@ -2591,12 +2591,12 @@ let w = class extends nt {
   configure() {
     if (!this.endpoint || !this.project) {
       queueMicrotask(() => {
-        (!this.endpoint || !this.project) && o.notifyConfigIncomplete();
+        (!this.endpoint || !this.project) && l.notifyConfigIncomplete();
       });
       return;
     }
-    const e = this.toConfig(), t = o.getConfig();
-    t && JSON.stringify(t) === JSON.stringify(e) || o.configure(e);
+    const e = this.toConfig(), t = l.getConfig();
+    t && JSON.stringify(t) === JSON.stringify(e) || l.configure(e);
   }
   toConfig() {
     const e = { oauth: [] }, t = this.methods.split(/[\s,]+/).filter(Boolean);
@@ -2629,7 +2629,7 @@ let w = class extends nt {
     };
   }
 };
-w.styles = L`
+w.styles = T`
     :host {
       display: none;
     }
@@ -2695,7 +2695,7 @@ x([
   m({ type: String })
 ], w.prototype, "preview", 2);
 w = x([
-  T("authui-config")
+  L("authui-config")
 ], w);
 var Nt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Q = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Bt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
@@ -2732,10 +2732,10 @@ function Wt(e, t, i) {
 }
 let H = class extends nt {
   constructor() {
-    super(...arguments), this.when = "", this.unless = "", this.status = o.getState().status, this.unsubscribe = null;
+    super(...arguments), this.when = "", this.unless = "", this.status = l.getState().status, this.unsubscribe = null;
   }
   connectedCallback() {
-    super.connectedCallback(), this.status = o.getState().status, this.unsubscribe = o.on("change", (e) => this.status = e.status);
+    super.connectedCallback(), this.status = l.getState().status, this.unsubscribe = l.on("change", (e) => this.status = e.status);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.unsubscribe?.(), this.unsubscribe = null;
@@ -2761,9 +2761,9 @@ Q([
   c()
 ], H.prototype, "status", 2);
 H = Q([
-  T("authui-show")
+  L("authui-show")
 ], H);
-const Kt = L`
+const Kt = T`
   :host {
     display: block;
     width: 100%;
@@ -2828,7 +2828,7 @@ const Kt = L`
     aria-hidden="true"
   >
     ${e}
-  </svg>`, l = {
+  </svg>`, o = {
   mail: b(
     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"/>`
   ),
@@ -2967,11 +2967,11 @@ const Kt = L`
   )
 };
 function B(e) {
-  return Gt[e] ?? l.globe;
+  return Gt[e] ?? o.globe;
 }
 function lt(e) {
   const t = (e.trim()[0] ?? "?").toUpperCase();
-  return /[A-Z0-9]/i.test(t) ? t : l.user;
+  return /[A-Z0-9]/i.test(t) ? t : o.user;
 }
 function X(e) {
   typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
@@ -3002,19 +3002,19 @@ var Yt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, k = (e, t,
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
   return s && a && Yt(t, i, a), a;
 };
-let $ = class extends U {
+let $ = class extends E {
   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) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await o.signInWithEmailPassword(this.email, this.password), this.password = "", _("email-password"), this.fire("authui-success", { method: "email-password" });
+        await l.signInWithEmailPassword(this.email, this.password), this.password = "", _("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 o.signUp(this.email, this.password, this.name), this.password = "", _("email-password"), this.fire("authui-success", { method: "sign-up" });
+        await l.signUp(this.email, this.password, this.name), this.password = "", _("email-password"), this.fire("authui-success", { method: "sign-up" });
       }));
     }, this.onGuest = () => {
       this.run(async () => {
-        await o.signInAnonymously(), _("anonymous"), this.fire("authui-success", { method: "anonymous" });
+        await l.signInAnonymously(), _("anonymous"), this.fire("authui-success", { method: "anonymous" });
       });
     }, this.onOAuth = (e) => {
       if (this.step === "sign-up" && !this.ensureLegalAccepted()) {
@@ -3022,7 +3022,7 @@ let $ = class extends U {
         return;
       }
       this.legalErrorFromOAuth = !1, this.run(async () => {
-        if (Ft(e), await o.signInWithOAuth(e), o.isPreview) {
+        if (Ft(e), await l.signInWithOAuth(e), l.isPreview) {
           $t(), this.fire("authui-success", { method: "oauth" });
           return;
         }
@@ -3030,7 +3030,7 @@ let $ = class extends U {
       });
     }, this.onForgot = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await o.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
+        await l.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
       });
     }, this.onReset = (e) => {
       if (e.preventDefault(), !this.requireValid(e)) return;
@@ -3040,11 +3040,11 @@ let $ = class extends U {
       }
       const t = this.recovery;
       t && this.run(async () => {
-        await o.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.auth.pending?.type === "reset-password" && o.setPending(null), this.go("sign-in"), this.notice = { tone: "success", message: this.t("passwordUpdated") };
+        await l.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.auth.pending?.type === "reset-password" && l.setPending(null), this.go("sign-in"), this.notice = { tone: "success", message: this.t("passwordUpdated") };
       });
     }, this.onMagicUrl = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await o.sendMagicUrl(this.email);
+        const t = await l.sendMagicUrl(this.email);
         this.token = {
           userId: t.userId,
           kind: "magic-url",
@@ -3054,7 +3054,7 @@ let $ = class extends U {
       });
     }, this.onEmailOtp = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await o.sendEmailOtp(this.email);
+        const t = await l.sendEmailOtp(this.email);
         this.token = {
           userId: t.userId,
           kind: "email-otp",
@@ -3064,37 +3064,37 @@ let $ = class extends U {
       });
     }, this.onPhoneOtp = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await o.sendPhoneOtp(this.phone);
+        const t = await l.sendPhoneOtp(this.phone);
         this.token = { userId: t.userId, kind: "phone", target: this.phone }, this.code = "", this.resendCooldownUntil = Date.now() + 3e4, window.setTimeout(() => this.requestUpdate(), 3e4);
       });
     }, this.onVerifyCode = (e) => {
       if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.token;
       t && this.run(async () => {
-        await o.signInWithToken(t.userId, this.code), this.code = "", this.token = null, _(t.kind), this.fire("authui-success", { method: t.kind });
+        await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, _(t.kind), this.fire("authui-success", { method: t.kind });
       }, "code");
     }, this.onChooseFactor = (e) => {
       this.run(async () => {
-        const t = await o.createMfaChallenge(e);
+        const t = await l.createMfaChallenge(e);
         this.challenge = { id: t.$id, factor: e }, this.code = "";
       });
     }, this.onVerifyFactor = (e) => {
       if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.challenge;
       t && this.run(async () => {
-        await o.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
+        await l.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
       }, "code");
     }, this.onCancelMfa = () => {
       this.run(async () => {
         try {
-          await o.signOut();
+          await l.signOut();
         } catch (e) {
           if (!j(e, v.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
     }, this.onSignOut = () => {
-      this.run(() => o.signOut());
+      this.run(() => l.signOut());
     };
   }
   connectedCallback() {
@@ -3118,7 +3118,7 @@ let $ = class extends U {
   }
   /** Navigate between screens and reset transient state. */
   dismissNotice() {
-    this.notice = null, this.auth.pending?.type === "notice" && o.setPending(null);
+    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 });
@@ -3153,14 +3153,14 @@ let $ = class extends U {
       <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
         ${this.renderHeader()}
         ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
-                ${this.notice.tone === "success" ? l.checkCircle : this.notice.tone === "error" ? l.alert : l.info}
+                ${this.notice.tone === "success" ? o.checkCircle : this.notice.tone === "error" ? o.alert : o.info}
                 <div class="alert-body">${this.notice.message}</div>
                 <button
                   class="btn btn-ghost btn-icon dismiss"
                   @click=${() => this.dismissNotice()}
                   aria-label=${this.t("close")}
                 >
-                  ${l.x}
+                  ${o.x}
                 </button>
               </div>` : n}
         ${e}
@@ -3205,7 +3205,7 @@ let $ = class extends U {
       a.target.hidden = !0;
     }}
               />` : n}
-        ${o.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : n}
+        ${l.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : n}
         <h2 class="title" id="authui-title">${i}</h2>
         ${s ? r`<p class="description">${s}</p>` : n}
       </div>
@@ -3213,7 +3213,7 @@ let $ = class extends U {
   }
   renderError() {
     return this.error ? r`<div class="alert alert-error" role="alert">
-          ${l.alert}
+          ${o.alert}
           <div class="alert-body">${this.error}</div>
         </div>` : n;
   }
@@ -3255,7 +3255,7 @@ let $ = class extends U {
     }}
             aria-label=${i ? this.t("hidePassword") : this.t("showPassword")}
           >
-            ${i ? l.eyeOff : l.eye}
+            ${i ? o.eyeOff : o.eye}
           </button>
         </div>
         ${s && t ? r`<div class="strength" aria-live="polite">
@@ -3345,19 +3345,19 @@ let $ = class extends U {
   backLink(e = "sign-in") {
     return r`<div class="links">
       <button type="button" class="btn btn-link" @click=${() => this.go(e)}>
-        ${l.arrowLeft} ${this.t("back")}
+        ${o.arrowLeft} ${this.t("back")}
       </button>
     </div>`;
   }
   renderStep() {
     if (this.auth.configError)
       return r`<div class="alert alert-error" role="alert">
-        ${l.alert}
+        ${o.alert}
         <div class="alert-body">${this.auth.configError}</div>
       </div>`;
     if (!this.auth.configured)
       return r`<div class="alert alert-error" role="alert">
-        ${l.alert}
+        ${o.alert}
         <div class="alert-body">${this.t("errorNotConfigured")}</div>
       </div>`;
     if (this.auth.status === "loading")
@@ -3406,10 +3406,10 @@ let $ = class extends U {
       this.embedded ? this.fire("authui-open", { view: "account" }) : X("account");
     }}
           >
-            ${l.settings} ${this.t("manageAccount")}
+            ${o.settings} ${this.t("manageAccount")}
           </button>
           <button class="btn btn-ghost btn-block" @click=${this.onSignOut} ?disabled=${this.busy}>
-            ${l.logOut} ${this.t("signOut")}
+            ${o.logOut} ${this.t("signOut")}
           </button>
         </div>
       </div>
@@ -3509,9 +3509,9 @@ let $ = class extends U {
   }
   renderSignIn() {
     const e = this.config?.methods ?? {}, t = e.emailPassword !== !1, i = (e.oauth?.length ?? 0) > 0, s = [
-      e.magicUrl ? { step: "magic-url", icon: l.link, label: this.t("sendMagicLink") } : null,
-      e.emailOtp ? { step: "email-otp", icon: l.mail, label: this.t("continueWithEmail") } : null,
-      e.phone ? { step: "phone", icon: l.smartphone, label: this.t("continueWithPhone") } : null
+      e.magicUrl ? { step: "magic-url", icon: o.link, label: this.t("sendMagicLink") } : null,
+      e.emailOtp ? { step: "email-otp", icon: o.mail, label: this.t("continueWithEmail") } : null,
+      e.phone ? { step: "phone", icon: o.smartphone, label: this.t("continueWithPhone") } : null
     ].filter(Boolean);
     return r`
       <div class="stack">
@@ -3549,7 +3549,7 @@ let $ = class extends U {
                 @click=${this.onGuest}
                 ?disabled=${this.busy}
               >
-                ${l.ghost} ${this.t("continueAsGuest")}
+                ${o.ghost} ${this.t("continueAsGuest")}
                 ${z() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
               </button>` : n}
         ${t && this.config?.signUp !== !1 ? r`<div class="links">
@@ -3622,13 +3622,13 @@ let $ = class extends U {
       this.step = "sign-in", this.error = "", this.notice = null, this.focusOnStep = !0, this.fire("authui-view", { view: "sign-in" });
     }}
           >
-            ${l.arrowLeft} ${this.t("back")}
+            ${o.arrowLeft} ${this.t("back")}
           </button>
         </div>
       </div>
     ` : r`<div class="stack">
         <div class="alert alert-error" role="alert">
-          ${l.alert}
+          ${o.alert}
           <div class="alert-body">${this.t("errorInvalidToken")}</div>
         </div>
         <div class="links">
@@ -3646,7 +3646,7 @@ let $ = class extends U {
   }
   phraseBox(e) {
     return e ? r`<div class="alert alert-info">
-      ${l.shield}
+      ${o.shield}
       <div class="alert-title">
         ${this.t("securityPhrase")}: <span class="code">${e}</span>
       </div>
@@ -3656,7 +3656,7 @@ let $ = class extends U {
   renderMagicUrl() {
     return this.token ? r`<div class="stack">
         <div class="alert alert-success" role="status">
-          ${l.mail}
+          ${o.mail}
           <div class="alert-body">${this.t("magicLinkSent", { email: this.token.target })}</div>
         </div>
         ${this.phraseBox(this.token.phrase)} ${this.backLink()}
@@ -3673,10 +3673,10 @@ let $ = class extends U {
     const e = this.token;
     !e || Date.now() < this.resendCooldownUntil || (this.error = "", await this.run(async () => {
       if (e.kind === "phone") {
-        const t = await o.sendPhoneOtp(e.target);
+        const t = await l.sendPhoneOtp(e.target);
         this.token = { userId: t.userId, kind: "phone", target: e.target };
       } else {
-        const t = await o.sendEmailOtp(e.target);
+        const t = await l.sendEmailOtp(e.target);
         this.token = {
           userId: t.userId,
           kind: "email-otp",
@@ -3691,7 +3691,7 @@ let $ = class extends U {
     const e = this.token?.kind === "phone", t = Date.now() < this.resendCooldownUntil;
     return r`
       <div class="alert alert-info" role="status">
-        ${e ? l.smartphone : l.mail}
+        ${e ? o.smartphone : o.mail}
         <div class="alert-body">${this.t("codeSent", { target: this.token.target })}</div>
       </div>
       ${this.phraseBox(this.token.phrase)}
@@ -3761,25 +3761,25 @@ let $ = class extends U {
       const i = [
         {
           factor: "totp",
-          icon: l.smartphone,
+          icon: o.smartphone,
           label: this.t("mfaUseAuthenticator"),
           available: e?.totp ?? !0
         },
         {
           factor: "email",
-          icon: l.mail,
+          icon: o.mail,
           label: this.t("mfaUseEmail"),
           available: e?.email ?? !0
         },
         {
           factor: "phone",
-          icon: l.phone,
+          icon: o.phone,
           label: this.t("mfaUsePhone"),
           available: e?.phone ?? !0
         },
         {
           factor: "recoverycode",
-          icon: l.key,
+          icon: o.key,
           label: this.t("mfaUseRecoveryCode"),
           available: e?.recoveryCode ?? !0
         }
@@ -3827,7 +3827,7 @@ let $ = class extends U {
         </form>
         <div class="links">
           <button type="button" class="btn btn-link" @click=${() => this.challenge = null}>
-            ${l.arrowLeft} ${this.t("back")}
+            ${o.arrowLeft} ${this.t("back")}
           </button>
           <span aria-hidden="true">·</span>
           <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
@@ -3838,7 +3838,7 @@ let $ = class extends U {
     `;
   }
 };
-$.styles = [...U.styles, Kt];
+$.styles = [...E.styles, Kt];
 k([
   m({ type: String })
 ], $.prototype, "view", 2);
@@ -3894,16 +3894,16 @@ k([
   c()
 ], $.prototype, "legalErrorFromOAuth", 2);
 $ = k([
-  T("authui-sign-in")
+  L("authui-sign-in")
 ], $);
 var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Qt(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 && Xt(t, i, a), a;
 };
-let p = class extends U {
+let p = class extends E {
   constructor() {
-    super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = 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.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.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");
@@ -3918,12 +3918,12 @@ let p = class extends U {
       const a = t[s].id.replace("authui-tab-", "");
       this.select(a), requestAnimationFrame(() => t[s]?.focus());
     }, this.noticeTimer = null, this.factorsLoading = !1, this.onUpdateName = (e) => {
-      e.preventDefault(), this.requireValid(e) && this.run("name", () => o.updateName(this.nameInput), this.t("nameUpdated"));
+      e.preventDefault(), this.requireValid(e) && this.run("name", () => l.updateName(this.nameInput), this.t("nameUpdated"));
     }, this.onUpdateEmail = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "email",
         async () => {
-          await o.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
+          await l.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
         },
         this.t("emailUpdated")
       );
@@ -3931,7 +3931,7 @@ let p = class extends U {
       e.preventDefault(), this.requireValid(e) && this.run(
         "phone",
         async () => {
-          await o.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
+          await l.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
         },
         this.t("phoneUpdated")
       );
@@ -3939,7 +3939,7 @@ let p = class extends U {
       e.preventDefault(), this.requireValid(e) && this.run(
         "guest",
         async () => {
-          await o.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
+          await l.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
         },
         this.t("accountConverted")
       );
@@ -3947,19 +3947,19 @@ let p = class extends U {
       Date.now() < this.verifyEmailCooldownUntil || this.run(
         "verify",
         async () => {
-          await o.sendEmailVerification(), this.startVerifyEmailCooldown();
+          await l.sendEmailVerification(), this.startVerifyEmailCooldown();
         },
         this.t("verificationSent")
       );
     }, this.onSendPhoneVerification = () => {
-      this.run("verify-phone", async () => {
-        await o.sendPhoneVerification(), this.phoneCodeSent = !0;
+      Date.now() < this.verifyPhoneCooldownUntil || this.run("verify-phone", async () => {
+        await l.sendPhoneVerification(), this.phoneCodeSent = !0, this.startVerifyPhoneCooldown();
       });
     }, this.onConfirmPhoneVerification = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "verify-phone-code",
         async () => {
-          await o.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
+          await l.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1, this.verifyPhoneCooldownUntil = 0, this.clearVerifyPhoneCooldownTimer();
         },
         this.t("phoneVerified")
       );
@@ -3972,7 +3972,7 @@ let p = class extends U {
         this.run(
           "password",
           async () => {
-            await o.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
+            await l.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
           },
           this.t("passwordChanged")
         );
@@ -3980,17 +3980,17 @@ let p = class extends U {
     }, this.onToggleMfa = () => {
       const e = !this.user?.mfa;
       this.run("mfa", async () => {
-        await o.setMfaEnabled(e), await this.loadFactors();
+        await l.setMfaEnabled(e), await this.loadFactors();
       });
     }, this.onAddAuthenticator = () => {
       this.run("authenticator", async () => {
-        this.authenticator = await o.addAuthenticator(), this.authenticatorCode = "";
+        this.authenticator = await l.addAuthenticator(), this.authenticatorCode = "";
       });
     }, this.onVerifyAuthenticator = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "authenticator-code",
         async () => {
-          await o.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
+          await l.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
         },
         this.t("authenticatorAdded")
       );
@@ -4000,15 +4000,15 @@ let p = class extends U {
         return;
       }
       this.confirmRemoveAuthenticator = !1, this.run("remove-authenticator", async () => {
-        await o.removeAuthenticator(), await this.loadFactors();
+        await l.removeAuthenticator(), await this.loadFactors();
       });
     }, this.onRecoveryCodes = () => {
       this.run("recovery", async () => {
         try {
-          this.recoveryCodes = await o.createRecoveryCodes();
+          this.recoveryCodes = await l.createRecoveryCodes();
         } catch (e) {
           if (!j(e, v.recoveryCodesExist)) throw e;
-          this.recoveryCodes = await o.getRecoveryCodes();
+          this.recoveryCodes = await l.getRecoveryCodes();
         }
         await this.loadFactors();
       });
@@ -4018,7 +4018,7 @@ let p = class extends U {
         return;
       }
       this.confirmRegenerate = !1, this.run("recovery", async () => {
-        this.recoveryCodes = await o.regenerateRecoveryCodes();
+        this.recoveryCodes = await l.regenerateRecoveryCodes();
       });
     }, this.onCopyCodes = async () => {
       if (this.recoveryCodes)
@@ -4038,7 +4038,7 @@ let p = class extends U {
         }
     }, this.onStepUpFactor = (e) => {
       this.run("stepup", async () => {
-        const t = await o.createMfaChallenge(e);
+        const t = await l.createMfaChallenge(e);
         this.stepUp = { ...this.stepUp, challenge: { id: t.$id, factor: e } }, this.stepUpCode = "";
       });
     }, this.onStepUpVerify = (e) => {
@@ -4047,40 +4047,40 @@ let p = class extends U {
       t?.challenge && (async () => {
         let i = !1;
         await this.run("stepup-code", async () => {
-          await o.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", i = !0;
+          await l.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", i = !0;
         }), i && await t.retry();
       })();
     }, this.onDeleteSession = (e) => {
       this.run(`session-${e}`, async () => {
         if ((this.sessions ?? []).some((i) => i.$id === e && i.current)) {
-          await o.signOut(), this.sessions = [];
+          await l.signOut(), this.sessions = [];
           return;
         }
-        await o.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
+        await l.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
       });
     }, this.onSignOutAll = () => {
       if (!this.confirmSignOutAll) {
         this.confirmSignOutAll = !0;
         return;
       }
-      this.confirmSignOutAll = !1, this.run("sessions-all", () => o.signOutEverywhere());
+      this.confirmSignOutAll = !1, this.run("sessions-all", () => l.signOutEverywhere());
     }, this.onDeleteIdentity = (e) => {
       if (this.confirmDisconnectId !== e) {
         this.confirmDisconnectId = e;
         return;
       }
       this.confirmDisconnectId = null, this.run(`identity-${e}`, async () => {
-        await o.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
+        await l.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
       });
     }, this.onDeleteAccount = () => {
-      this.run("delete", () => o.deleteAccount());
+      this.run("delete", () => l.deleteAccount());
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.active = this.tab, this.hydrate();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.clearVerifyEmailCooldownTimer(), this.noticeTimer && (clearTimeout(this.noticeTimer), this.noticeTimer = null);
+    super.disconnectedCallback(), this.clearVerifyEmailCooldownTimer(), this.clearVerifyPhoneCooldownTimer(), this.noticeTimer && (clearTimeout(this.noticeTimer), this.noticeTimer = null);
   }
   willUpdate(e) {
     e.has("tab") && e.get("tab") !== void 0 && (this.active = this.tab), e.has("auth") && this.hydrate(), this.ensureLoaded();
@@ -4109,7 +4109,7 @@ let p = class extends U {
         '.tab[aria-selected="true"]'
       );
       i && typeof i.scrollIntoView == "function" && i.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
-    }), (e.has("confirmDelete") && this.confirmDelete || e.has("confirmSignOutAll") && this.confirmSignOutAll || e.has("confirmDisconnectId") && this.confirmDisconnectId !== null) && requestAnimationFrame(() => {
+    }), (e.has("confirmDelete") && this.confirmDelete || e.has("confirmSignOutAll") && this.confirmSignOutAll || e.has("confirmDisconnectId") && this.confirmDisconnectId !== null || e.has("confirmRegenerate") && this.confirmRegenerate || e.has("confirmRemoveAuthenticator") && this.confirmRemoveAuthenticator) && requestAnimationFrame(() => {
       this.renderRoot.querySelector(
         ".card-footer [autofocus], .row-actions [autofocus], .inline [autofocus], .card-footer .btn-outline, .row-actions .btn-outline, .inline .btn-outline"
       )?.focus({ preventScroll: !0 });
@@ -4146,12 +4146,12 @@ let p = class extends U {
   // ─────────────────────────── loaders ───────────────────────────
   async loadSessions() {
     await this.run("sessions", async () => {
-      this.sessions = await o.listSessions();
+      this.sessions = await l.listSessions();
     });
   }
   async loadIdentities() {
     await this.run("identities", async () => {
-      this.identities = await o.listIdentities();
+      this.identities = await l.listIdentities();
     });
   }
   /** Probe once so Activity is never shown on servers without /account/logs. */
@@ -4159,7 +4159,7 @@ let p = class extends U {
     if (!this.logsProbeStarted) {
       this.logsProbeStarted = !0;
       try {
-        this.logs = await o.listLogs(), this.logsSupported = !0;
+        this.logs = await l.listLogs(), this.logsSupported = !0;
       } catch {
         this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
       }
@@ -4172,7 +4172,7 @@ let p = class extends U {
     }
     this.busy = "logs";
     try {
-      this.logs = await o.listLogs();
+      this.logs = await l.listLogs();
     } catch {
       this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
     } finally {
@@ -4183,7 +4183,7 @@ let p = class extends U {
     if (!this.factorsLoading) {
       this.factorsLoading = !0;
       try {
-        this.factors = await o.listMfaFactors();
+        this.factors = await l.listMfaFactors();
       } catch {
         this.factors = {
           totp: !1,
@@ -4205,6 +4205,14 @@ let p = class extends U {
   clearVerifyEmailCooldownTimer() {
     this.verifyEmailCooldownTimer && (clearInterval(this.verifyEmailCooldownTimer), this.verifyEmailCooldownTimer = null);
   }
+  startVerifyPhoneCooldown() {
+    this.verifyPhoneCooldownUntil = Date.now() + 45e3, this.clearVerifyPhoneCooldownTimer(), this.verifyPhoneCooldownTimer = setInterval(() => {
+      this.requestUpdate(), Date.now() >= this.verifyPhoneCooldownUntil && this.clearVerifyPhoneCooldownTimer();
+    }, 1e3);
+  }
+  clearVerifyPhoneCooldownTimer() {
+    this.verifyPhoneCooldownTimer && (clearInterval(this.verifyPhoneCooldownTimer), this.verifyPhoneCooldownTimer = null);
+  }
   bind(e) {
     return (t) => {
       this[e] = t.target.value;
@@ -4214,7 +4222,7 @@ let p = class extends U {
   render() {
     if (!this.auth.configured)
       return r`<div class="alert alert-error" role="alert">
-        ${l.alert}
+        ${o.alert}
         <div class="alert-body">${this.t("errorNotConfigured")}</div>
       </div>`;
     if (this.auth.status === "loading")
@@ -4251,7 +4259,7 @@ let p = class extends U {
     )}
         </div>
         ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
-                ${this.notice.tone === "success" ? l.checkCircle : l.info}
+                ${this.notice.tone === "success" ? o.checkCircle : o.info}
                 <div class="alert-body">${this.notice.message}</div>
                 <button
                   class="btn btn-ghost btn-icon dismiss"
@@ -4260,7 +4268,7 @@ let p = class extends U {
     }}
                   aria-label=${this.t("close")}
                 >
-                  ${l.x}
+                  ${o.x}
                 </button>
               </div>` : n}
         ${this.stepUp ? this.renderStepUp() : r`<div
@@ -4283,14 +4291,14 @@ let p = class extends U {
           <div class="row-main">
             <span class="row-title" title=${t}>
               ${t}
-              ${e.mfa ? r`<span class="badge badge-success">${l.shieldCheck} ${this.t("mfaBadge")}</span>` : n}
-              ${o.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : n}
+              ${e.mfa ? r`<span class="badge badge-success">${o.shieldCheck} ${this.t("mfaBadge")}</span>` : n}
+              ${l.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : n}
             </span>
             ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : n}
           </div>
         </div>
-        <button class="btn btn-outline btn-sm" @click=${() => o.signOut()}>
-          ${l.logOut} ${this.t("signOut")}
+        <button class="btn btn-outline btn-sm" @click=${() => l.signOut()}>
+          ${o.logOut} ${this.t("signOut")}
         </button>
       </div>
     `;
@@ -4312,7 +4320,7 @@ let p = class extends U {
   error(e) {
     const t = this.errors[e];
     return t ? r`<div class="alert alert-error" role="alert">
-          ${l.alert}
+          ${o.alert}
           <div class="alert-body">${t}</div>
         </div>` : n;
   }
@@ -4359,7 +4367,7 @@ let p = class extends U {
     </div>`;
   }
   verifiedBadge(e) {
-    return e ? r`<span class="badge badge-success">${l.check} ${this.t("verified")}</span>` : r`<span class="badge badge-warning">${this.t("unverified")}</span>`;
+    return e ? r`<span class="badge badge-success">${o.check} ${this.t("verified")}</span>` : r`<span class="badge badge-warning">${this.t("unverified")}</span>`;
   }
   // ── Profile ──
   renderProfile() {
@@ -4584,13 +4592,27 @@ let p = class extends U {
                   ${this.spinner("verify-phone")} ${this.t("sendCode")}
                 </button>` : n}
           ${this.phoneCodeSent ? r`<button
-                  class="btn btn-outline btn-sm"
-                  type="button"
-                  @click=${this.onConfirmPhoneVerification}
-                  ?disabled=${!!this.busy}
-                >
-                  ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
-                </button>` : n}
+                    class="btn btn-outline btn-sm"
+                    type="button"
+                    @click=${this.onSendPhoneVerification}
+                    ?disabled=${!!this.busy || Date.now() < this.verifyPhoneCooldownUntil}
+                  >
+                    ${this.spinner("verify-phone")}
+                    ${Date.now() < this.verifyPhoneCooldownUntil ? this.t("verificationResendIn", {
+        seconds: Math.max(
+          1,
+          Math.ceil((this.verifyPhoneCooldownUntil - Date.now()) / 1e3)
+        )
+      }) : this.t("resendCode")}
+                  </button>
+                  <button
+                    class="btn btn-outline btn-sm"
+                    type="button"
+                    @click=${this.onConfirmPhoneVerification}
+                    ?disabled=${!!this.busy}
+                  >
+                    ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
+                  </button>` : n}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
@@ -4610,7 +4632,7 @@ let p = class extends U {
       this.t("deleteAccountDescription"),
       this.confirmDelete ? this.error("delete") : r`${this.error("delete")}
             <button class="btn btn-outline btn-sm warn" @click=${() => this.confirmDelete = !0}>
-              ${l.userX} ${this.t("deleteAccount")}
+              ${o.userX} ${this.t("deleteAccount")}
             </button>`,
       this.confirmDelete ? this.confirmFooter(
         () => {
@@ -4642,28 +4664,48 @@ let p = class extends U {
                         <label class="label" for="acc-old-password"
                           >${this.t("currentPassword")}</label
                         >
-                        <input
-                          class="input"
-                          id="acc-old-password"
-                          type="password"
-                          .value=${this.oldPassword}
-                          @input=${this.bind("oldPassword")}
-                          autocomplete="current-password"
-                          required
-                        />
+                        <div class="input-wrap">
+                          <input
+                            class="input"
+                            id="acc-old-password"
+                            type=${this.showOldPassword ? "text" : "password"}
+                            .value=${this.oldPassword}
+                            @input=${this.bind("oldPassword")}
+                            autocomplete="current-password"
+                            required
+                          />
+                          <button
+                            type="button"
+                            class="btn btn-ghost btn-icon"
+                            @click=${() => this.showOldPassword = !this.showOldPassword}
+                            aria-label=${this.showOldPassword ? this.t("hidePassword") : this.t("showPassword")}
+                          >
+                            ${this.showOldPassword ? o.eyeOff : o.eye}
+                          </button>
+                        </div>
                       </div>` : n}
                 <div class="field">
                   <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
-                  <input
-                    class="input"
-                    id="acc-new-password"
-                    type="password"
-                    required
-                    minlength="8"
-                    .value=${this.newPassword}
-                    @input=${this.bind("newPassword")}
-                    autocomplete="new-password"
-                  />
+                  <div class="input-wrap">
+                    <input
+                      class="input"
+                      id="acc-new-password"
+                      type=${this.showNewPassword ? "text" : "password"}
+                      required
+                      minlength="8"
+                      .value=${this.newPassword}
+                      @input=${this.bind("newPassword")}
+                      autocomplete="new-password"
+                    />
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-icon"
+                      @click=${() => this.showNewPassword = !this.showNewPassword}
+                      aria-label=${this.showNewPassword ? this.t("hidePassword") : this.t("showPassword")}
+                    >
+                      ${this.showNewPassword ? o.eyeOff : o.eye}
+                    </button>
+                  </div>
                   ${this.newPassword ? (() => {
         const i = rt(this.newPassword);
         return r`<div class="strength" aria-live="polite">
@@ -4687,16 +4729,26 @@ let p = class extends U {
                   <label class="label" for="acc-new-password-confirm"
                     >${this.t("confirmPassword")}</label
                   >
-                  <input
-                    class="input"
-                    id="acc-new-password-confirm"
-                    type="password"
-                    required
-                    minlength="8"
-                    .value=${this.newPasswordConfirm}
-                    @input=${this.bind("newPasswordConfirm")}
-                    autocomplete="new-password"
-                  />
+                  <div class="input-wrap">
+                    <input
+                      class="input"
+                      id="acc-new-password-confirm"
+                      type=${this.showNewPasswordConfirm ? "text" : "password"}
+                      required
+                      minlength="8"
+                      .value=${this.newPasswordConfirm}
+                      @input=${this.bind("newPasswordConfirm")}
+                      autocomplete="new-password"
+                    />
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-icon"
+                      @click=${() => this.showNewPasswordConfirm = !this.showNewPasswordConfirm}
+                      aria-label=${this.showNewPasswordConfirm ? this.t("hidePassword") : this.t("showPassword")}
+                    >
+                      ${this.showNewPasswordConfirm ? o.eyeOff : o.eye}
+                    </button>
+                  </div>
                 </div>
                 ${this.error("password")}
               </form>`,
@@ -4714,7 +4766,7 @@ let p = class extends U {
     </div>`;
   }
   renderMfaCard() {
-    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? o.isPreview ? Ut(this.authenticator.uri) : new Ct(o.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? l.isPreview ? Et(this.authenticator.uri) : new Ct(l.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
@@ -4734,7 +4786,7 @@ let p = class extends U {
           ></button>
         </div>
         ${e.mfa && !(this.factors?.totp || e.emailVerification || e.phoneVerification) ? r`<div class="alert alert-warning" role="status">
-                ${l.alert}
+                ${o.alert}
                 <div class="alert-body">
                   ${this.t("mfaNoFactorWarning")}
                   ${this.factors?.totp ? n : r`<div class="links">
@@ -4754,23 +4806,27 @@ let p = class extends U {
         <div class="toggle-row">
           <div class="row-main">
             <span class="row-title"
-              >${l.smartphone} ${this.t("authenticatorApp")}
+              >${o.smartphone} ${this.t("authenticatorApp")}
               ${t ? this.verifiedBadge(!0) : n}</span
             >
           </div>
           ${t ? this.confirmRemoveAuthenticator ? r`<div class="inline">
                     <button
-                      class="btn btn-outline btn-sm warn"
-                      @click=${this.onRemoveAuthenticator}
+                      type="button"
+                      class="btn btn-outline btn-sm"
+                      autofocus
                       ?disabled=${!!this.busy}
+                      @click=${() => this.confirmRemoveAuthenticator = !1}
                     >
-                      ${this.spinner("remove-authenticator")} ${this.t("remove")}
+                      ${this.t("cancel")}
                     </button>
                     <button
-                      class="btn btn-ghost btn-sm"
-                      @click=${() => this.confirmRemoveAuthenticator = !1}
+                      type="button"
+                      class="btn btn-destructive btn-sm"
+                      @click=${this.onRemoveAuthenticator}
+                      ?disabled=${!!this.busy}
                     >
-                      ${this.t("cancel")}
+                      ${this.spinner("remove-authenticator")} ${this.t("remove")}
                     </button>
                   </div>` : r`<button
                     class="btn btn-outline btn-sm"
@@ -4802,7 +4858,7 @@ let p = class extends U {
         this.onCopySecret();
       }}
                   >
-                    ${this.copied ? l.check : l.copy}
+                    ${this.copied ? o.check : o.copy}
                     ${this.copied ? this.t("copied") : this.t("authenticatorCopyKey")}
                   </button>
                 </div>
@@ -4844,7 +4900,7 @@ let p = class extends U {
       this.t("recoveryCodesDescription") + " " + this.t("recoveryCodesOnceHint"),
       r`<div class="kv">
         ${this.recoveryCodes ? r`<div class="alert alert-warning">
-                  ${l.alert}
+                  ${o.alert}
                   <div class="alert-body">${this.t("recoveryCodesWarning")}</div>
                 </div>
                 <div class="codes">
@@ -4852,7 +4908,7 @@ let p = class extends U {
                 </div>
                 <div class="inline">
                   <button class="btn btn-outline btn-sm" @click=${this.onCopyCodes}>
-                    ${this.copied ? l.check : l.copy}
+                    ${this.copied ? o.check : o.copy}
                     ${this.copied ? this.t("copied") : this.t("copy")}
                   </button>
                   <button class="btn btn-ghost btn-sm" @click=${() => this.recoveryCodes = null}>
@@ -4864,29 +4920,34 @@ let p = class extends U {
                   @click=${this.onRecoveryCodes}
                   ?disabled=${!!this.busy}
                 >
-                  ${this.spinner("recovery")} ${l.key}
+                  ${this.spinner("recovery")} ${o.key}
                   ${e ? this.t("viewRecoveryCodes") : this.t("generateRecoveryCodes")}
                 </button>
                 ${e ? this.confirmRegenerate ? r`<div class="inline">
                           <button
-                            class="btn btn-outline btn-sm warn"
-                            @click=${this.onRegenerateRecoveryCodes}
+                            type="button"
+                            class="btn btn-outline btn-sm"
+                            autofocus
                             ?disabled=${!!this.busy}
+                            @click=${() => this.confirmRegenerate = !1}
                           >
-                            ${l.refresh} ${this.t("regenerateRecoveryCodes")}
+                            ${this.t("cancel")}
                           </button>
                           <button
-                            class="btn btn-ghost btn-sm"
-                            @click=${() => this.confirmRegenerate = !1}
+                            type="button"
+                            class="btn btn-destructive btn-sm"
+                            @click=${this.onRegenerateRecoveryCodes}
+                            ?disabled=${!!this.busy}
                           >
-                            ${this.t("cancel")}
+                            ${this.spinner("recovery")} ${o.refresh}
+                            ${this.t("regenerateRecoveryCodes")}
                           </button>
                         </div>` : r`<button
                           class="btn btn-ghost btn-sm"
                           @click=${this.onRegenerateRecoveryCodes}
                           ?disabled=${!!this.busy}
                         >
-                          ${l.refresh} ${this.t("regenerateRecoveryCodes")}
+                          ${o.refresh} ${this.t("regenerateRecoveryCodes")}
                         </button>` : n}
               </div>`}
         ${this.error("recovery")}
@@ -4898,25 +4959,25 @@ let p = class extends U {
     const e = this.stepUp, t = this.factors, i = [
       {
         factor: "totp",
-        icon: l.smartphone,
+        icon: o.smartphone,
         label: this.t("mfaUseAuthenticator"),
         available: t?.totp ?? !0
       },
       {
         factor: "email",
-        icon: l.mail,
+        icon: o.mail,
         label: this.t("mfaUseEmail"),
         available: t?.email ?? !0
       },
       {
         factor: "phone",
-        icon: l.phone,
+        icon: o.phone,
         label: this.t("mfaUsePhone"),
         available: t?.phone ?? !0
       },
       {
         factor: "recoverycode",
-        icon: l.key,
+        icon: o.key,
         label: this.t("mfaUseRecoveryCode"),
         available: t?.recoveryCode ?? !0
       }
@@ -4967,7 +5028,7 @@ let p = class extends U {
   // ── Sessions ──
   deviceIcon(e) {
     const t = (e.deviceName || "").toLowerCase(), i = (e.osName || e.osCode || "").toLowerCase();
-    return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? l.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? l.monitor : l.globe;
+    return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? o.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? o.monitor : o.globe;
   }
   renderSessions() {
     const e = this.sessions;
@@ -4977,7 +5038,7 @@ let p = class extends U {
       void 0,
       r`${this.error("sessions")}
         ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
-        l.monitor,
+        o.monitor,
         this.t("noSessions"),
         this.t("noSessionsDescription")
       ) : e.map(
@@ -5003,7 +5064,7 @@ let p = class extends U {
                           ?disabled=${!!this.busy}
                           aria-label=${this.t("signOutSession")}
                         >
-                          ${l.logOut}
+                          ${o.logOut}
                         </button>
                       </div>
                     </div>`
@@ -5018,7 +5079,7 @@ let p = class extends U {
                 @click=${this.onSignOutAll}
                 ?disabled=${!!this.busy}
               >
-                ${this.spinner("sessions-all")} ${l.logOut} ${this.t("signOutAllSessions")}
+                ${this.spinner("sessions-all")} ${o.logOut} ${this.t("signOutAllSessions")}
               </button>`,
       this.confirmSignOutAll ? this.confirmFooter(
         () => {
@@ -5043,7 +5104,7 @@ let p = class extends U {
       void 0,
       r`${this.error("identities")}
         ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
-        l.link,
+        o.link,
         this.t("noConnections"),
         this.t("noConnectionsDescription")
       ) : e.map(
@@ -5090,7 +5151,7 @@ let p = class extends U {
         (i) => r`<button
                     class="btn btn-outline btn-sm"
                     @click=${() => {
-          this.run(`connect-${i}`, () => o.signInWithOAuth(i));
+          this.run(`connect-${i}`, () => l.signInWithOAuth(i));
         }}
                     ?disabled=${!!this.busy}
                   >
@@ -5109,7 +5170,7 @@ let p = class extends U {
       this.t("activity"),
       void 0,
       r`${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
-        l.activity,
+        o.activity,
         this.t("noActivity"),
         this.t("noActivityDescription")
       ) : e.map(
@@ -5128,8 +5189,8 @@ let p = class extends U {
   }
 };
 p.styles = [
-  ...U.styles,
-  L`
+  ...E.styles,
+  T`
       :host {
         display: block;
         width: 100%;
@@ -5276,6 +5337,15 @@ f([
 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);
@@ -5327,15 +5397,18 @@ f([
 f([
   c()
 ], p.prototype, "verifyEmailCooldownUntil", 2);
+f([
+  c()
+], p.prototype, "verifyPhoneCooldownUntil", 2);
 p = f([
-  T("authui-account")
+  L("authui-account")
 ], p);
 var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? te(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 && Jt(t, i, a), a;
 };
-let I = class extends U {
+let I = class extends E {
   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 ?? {};
@@ -5416,7 +5489,7 @@ let I = class extends U {
               @click=${this.hide}
               aria-label=${this.t("close")}
             >
-              ${l.x}
+              ${o.x}
             </button>
           </div>
           <div class="body" @scroll=${this.syncScrollCue}>
@@ -5432,8 +5505,8 @@ let I = class extends U {
   }
 };
 I.styles = [
-  ...U.styles,
-  L`
+  ...E.styles,
+  T`
       :host {
         display: contents;
       }
@@ -5556,14 +5629,14 @@ R([
   at(".body")
 ], I.prototype, "bodyEl", 2);
 I = R([
-  T("authui-modal")
+  L("authui-modal")
 ], I);
 var ee = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ie(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 && ee(t, i, a), a;
 };
-let V = class extends U {
+let V = class extends E {
   constructor() {
     super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
   }
@@ -5581,8 +5654,8 @@ let V = class extends U {
   }
 };
 V.styles = [
-  ...U.styles,
-  L`
+  ...E.styles,
+  T`
       :host {
         display: inline-block;
       }
@@ -5601,14 +5674,14 @@ J([
   m({ type: String })
 ], V.prototype, "size", 2);
 V = J([
-  T("authui-button")
+  L("authui-button")
 ], V);
 var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? re(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 && se(t, i, a), a;
 };
-let E = class extends U {
+let U = class extends E {
   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();
@@ -5632,7 +5705,7 @@ let E = class extends U {
     }, this.toggleMenu = () => {
       this.menuOpen = !this.menuOpen, this.menuOpen && this.showTeams && this.loadTeams();
     }, this.selectTeam = (e) => {
-      o.setActiveTeam({ $id: e.$id, name: e.name }), this.activeTeamId = e.$id, this.dispatchEvent(
+      l.setActiveTeam({ $id: e.$id, name: e.name }), this.activeTeamId = e.$id, this.dispatchEvent(
         new CustomEvent("authui-active-team", {
           detail: { teamId: e.$id, team: e },
           bubbles: !0,
@@ -5669,9 +5742,9 @@ let E = class extends U {
     })) : this.menuAbove = !1), this.menuOpen && (e.has("teams") || e.has("teamsLoading")) && requestAnimationFrame(() => this.placeMenu());
   }
   async loadTeams() {
-    this.teamsLoading = !0, this.activeTeamId = o.getActiveTeamId();
+    this.teamsLoading = !0, this.activeTeamId = l.getActiveTeamId();
     try {
-      this.teams = await o.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, o.setActiveTeam(null));
+      this.teams = await l.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, l.setActiveTeam(null));
     } catch {
       this.teams = [];
     } finally {
@@ -5715,9 +5788,9 @@ let E = class extends U {
                                     aria-checked=${a.$id === this.activeTeamId ? "true" : "false"}
                                     @click=${() => this.selectTeam(a)}
                                   >
-                                    ${l.users}
+                                    ${o.users}
                                     <span title=${a.name}>${a.name}</span>
-                                    ${a.$id === this.activeTeamId ? r`<span class="check">${l.check}</span>` : n}
+                                    ${a.$id === this.activeTeamId ? r`<span class="check">${o.check}</span>` : n}
                                   </button>`
     )}
                     </div>` : n}
@@ -5730,16 +5803,16 @@ let E = class extends U {
       this.menuOpen = !1, X("account");
     }}
               >
-                ${l.settings} ${this.t("manageAccount")}
+                ${o.settings} ${this.t("manageAccount")}
               </button>
               <button
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, o.signOut();
+      this.menuOpen = !1, l.signOut();
     }}
               >
-                ${l.logOut} ${this.t("signOut")}
+                ${o.logOut} ${this.t("signOut")}
               </button>
             </div>` : n}
     `;
@@ -5781,9 +5854,9 @@ let E = class extends U {
     }) : n;
   }
 };
-E.styles = [
-  ...U.styles,
-  L`
+U.styles = [
+  ...E.styles,
+  T`
       :host {
         display: inline-block;
         position: relative;
@@ -5905,49 +5978,49 @@ E.styles = [
 ];
 F([
   m({ type: Boolean, attribute: "show-teams" })
-], E.prototype, "showTeams", 2);
+], U.prototype, "showTeams", 2);
 F([
   m({ attribute: !1 })
-], E.prototype, "menuItems", 2);
+], U.prototype, "menuItems", 2);
 F([
   m({ type: String })
-], E.prototype, "src", 2);
+], U.prototype, "src", 2);
 F([
   c()
-], E.prototype, "menuOpen", 2);
+], U.prototype, "menuOpen", 2);
 F([
   c()
-], E.prototype, "menuAbove", 2);
+], U.prototype, "menuAbove", 2);
 F([
   c()
-], E.prototype, "teams", 2);
+], U.prototype, "teams", 2);
 F([
   c()
-], E.prototype, "teamsLoading", 2);
+], U.prototype, "teamsLoading", 2);
 F([
   c()
-], E.prototype, "activeTeamId", 2);
-E = F([
-  T("authui-user-button")
-], E);
+], U.prototype, "activeTeamId", 2);
+U = F([
+  L("authui-user-button")
+], U);
 export {
-  Lt as A,
+  Tt as A,
   ce as C,
   v as E,
   yt as F,
   It as P,
-  o as a,
+  l as a,
   p as b,
   de as c,
   V as d,
   w as e,
-  U as f,
+  E as f,
   I as g,
   H as h,
   $ as i,
-  E as j,
+  U as j,
   le as k,
-  mt as l,
+  ft as l,
   St as m,
   Y as n,
   X as o,