npm - @getauthui/core - Versions diffs - 0.1.6 → 0.1.8 - Mend

@getauthui/core 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +9 -3
package/dist/{authui-user-button-CLVW46Q6.js → authui-user-button-BTKKRjIx.js} +599 -373
package/dist/authui.cdn.js +417 -250
package/dist/authui.cdn.mjs +1060 -834
package/dist/authui.js +2 -2
package/dist/components/authui-account.d.ts +3 -0
package/dist/components/authui-account.d.ts.map +1 -1
package/dist/components/authui-sign-in.d.ts +2 -0
package/dist/components/authui-sign-in.d.ts.map +1 -1
package/dist/i18n.d.ts.map +1 -1
package/dist/react.js +1 -1
package/dist/styles/base.d.ts.map +1 -1
package/dist/types.d.ts +3 -0
package/dist/types.d.ts.map +1 -1
package/package.json +1 -1

package/dist/{authui-user-button-CLVW46Q6.js → authui-user-button-BTKKRjIx.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { state as d, property as g, customElement as R, query as st } from "lit/decorators.js";
-import { css as O, LitElement as rt, nothing as o, html as r, svg as h } from "lit";
-import { Client as lt, Account as ct, Teams as xt, ID as H, Avatars as kt } from "appwrite";
+import { state as d, property as g, customElement as T, query as st } from "lit/decorators.js";
+import { css as O, LitElement as rt, nothing as n, html as r, svg as h } from "lit";
+import { Client as lt, Account as ct, Teams as xt, ID as B, Avatars as kt } from "appwrite";
 const Ct = {
   signIn: "Sign in",
   dialogSignIn: "Sign in",
@@ -101,10 +101,13 @@ const Ct = {
   signOutAllSessions: "Sign out everywhere",
   signOutAllSessionsDescription: "End every session, including this one.",
   noConnections: "No connected accounts.",
+  noConnectionsDescription: "Link an OAuth provider to sign in faster next time.",
   disconnect: "Disconnect",
   connectProvider: "Connect {provider}",
   noActivity: "No recent activity.",
+  noActivityDescription: "Security events for this account will appear here.",
   noSessions: "No active sessions.",
+  noSessionsDescription: "Active sessions will show up here once you sign in on a device.",
   deleteAccount: "Delete account",
   deleteAccountDescription: "Deleting disables your account and signs you out everywhere. An administrator can restore it.",
   deleteAccountConfirm: "Delete my account",
@@ -227,10 +230,10 @@ const At = {
   zoho: "Zoho",
   zoom: "Zoom"
 };
-function q(e) {
+function W(e) {
   return At[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
 }
-const j = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), A = () => (/* @__PURE__ */ new Date()).toISOString(), U = (e) => new Date(Date.now() - e * 6e4).toISOString(), W = [
+const H = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), A = () => (/* @__PURE__ */ new Date()).toISOString(), U = (e) => new Date(Date.now() - e * 6e4).toISOString(), j = [
   "amber",
   "brave",
   "calm",
@@ -243,7 +246,7 @@ const j = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
   "juniper",
   "kite",
   "lumen"
-], dt = () => `${W[Math.floor(Math.random() * W.length)]}-${W[Math.floor(Math.random() * W.length)]}`, _ = () => Math.random().toString(36).slice(2, 12), ht = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Pt = {
+], dt = () => `${j[Math.floor(Math.random() * j.length)]}-${j[Math.floor(Math.random() * j.length)]}`, D = () => Math.random().toString(36).slice(2, 12), ht = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Pt = {
   name: "Ada Lovelace",
   email: "ada@example.com",
   phone: "+15550100"
@@ -313,7 +316,7 @@ class It {
       },
       {
         ...i,
-        $id: _(),
+        $id: D(),
         $createdAt: U(300),
         provider: t,
         ip: "198.51.100.7",
@@ -330,7 +333,7 @@ class It {
       },
       {
         ...i,
-        $id: _(),
+        $id: D(),
         $createdAt: U(1440 * 3),
         provider: "oauth2",
         ip: "192.0.2.90",
@@ -385,9 +388,9 @@ class It {
   }
   requireUser() {
     if (!this.user)
-      throw j("general_unauthorized_scope", "User (role: guests) missing scope (account)");
+      throw H("general_unauthorized_scope", "User (role: guests) missing scope (account)");
     if (this.mfaPending)
-      throw j(
+      throw H(
         "user_more_factors_required",
         "More factors are required to complete the sign in process."
       );
@@ -395,7 +398,7 @@ class It {
   }
   requireRecentChallenge() {
     if (Date.now() - this.lastChallenge > 30 * 6e4)
-      throw j(
+      throw H(
         "user_challenge_required",
         "A recently successful challenge is required to complete this action."
       );
@@ -431,7 +434,7 @@ class It {
   }
   async createMagicURLToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: _(),
+      $id: D(),
       $createdAt: A(),
       userId: t,
       secret: "",
@@ -441,7 +444,7 @@ class It {
   }
   async createEmailToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: _(),
+      $id: D(),
       $createdAt: A(),
       userId: t,
       secret: "",
@@ -450,7 +453,7 @@ class It {
     });
   }
   async createPhoneToken(t, i) {
-    return this.tokens.set(t, { phone: i }), this.delay({ $id: _(), $createdAt: A(), userId: t, secret: "", expire: "", phrase: "" });
+    return this.tokens.set(t, { phone: i }), this.delay({ $id: D(), $createdAt: A(), userId: t, secret: "", expire: "", phrase: "" });
   }
   async createSession(t) {
     return this.delay(() => {
@@ -542,7 +545,7 @@ class It {
     });
   }
   async createMFAChallenge() {
-    return this.delay({ $id: _(), $createdAt: A(), userId: "preview-user", expire: "" });
+    return this.delay({ $id: D(), $createdAt: A(), userId: "preview-user", expire: "" });
   }
   async updateMFAChallenge() {
     return this.delay(() => (this.mfaPending = !1, this.lastChallenge = Date.now(), this.sessions[0]));
@@ -571,7 +574,7 @@ class It {
   async createMFARecoveryCodes() {
     return this.delay(() => {
       if (this.recoveryCodes.length > 0)
-        throw j("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
+        throw H("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
       return this.recoveryCodes = Array.from({ length: 6 }, ht), { recoveryCodes: this.recoveryCodes };
     });
   }
@@ -589,13 +592,13 @@ class It {
 function Et(e) {
   let t = 2166136261;
   const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
-  for (const $ of e) t = (t ^ $.charCodeAt(0)) * 16777619;
+  for (const b of e) t = (t ^ b.charCodeAt(0)) * 16777619;
   const s = 25;
   let a = "";
-  const c = ($, x) => `<rect x="${$}" y="${x}" width="7" height="7"/><rect x="${$ + 1}" y="${x + 1}" width="5" height="5" fill="#fff"/><rect x="${$ + 2}" y="${x + 2}" width="3" height="3"/>`;
-  for (let $ = 0; $ < s; $++)
-    for (let x = 0; x < s; x++)
-      !(x < 8 && $ < 8 || x >= s - 8 && $ < 8 || x < 8 && $ >= s - 8) && i() < 0.45 && (a += `<rect x="${x}" y="${$}" width="1" height="1"/>`);
+  const c = (b, $) => `<rect x="${b}" y="${$}" width="7" height="7"/><rect x="${b + 1}" y="${$ + 1}" width="5" height="5" fill="#fff"/><rect x="${b + 2}" y="${$ + 2}" width="3" height="3"/>`;
+  for (let b = 0; b < s; b++)
+    for (let $ = 0; $ < s; $++)
+      !($ < 8 && b < 8 || $ >= s - 8 && b < 8 || $ < 8 && b >= s - 8) && i() < 0.45 && (a += `<rect x="${$}" y="${b}" width="1" height="1"/>`);
   const u = `<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(u)}`;
 }
@@ -634,7 +637,7 @@ const f = {
   targetAlreadyExists: "user_target_already_exists",
   argumentInvalid: "general_argument_invalid"
 };
-function z(e) {
+function _(e) {
   if (e && typeof e == "object") {
     const t = e;
     let i = typeof t.message == "string" ? t.message : "Unknown error";
@@ -646,11 +649,11 @@ function z(e) {
   }
   return { message: String(e), type: "", code: 0 };
 }
-function N(e, t) {
-  return z(e).type === t;
+function q(e, t) {
+  return _(e).type === t;
 }
 function K(e, t, i = "link") {
-  const s = z(e);
+  const s = _(e);
   switch (s.type) {
     case f.invalidCredentials:
       return i === "password" ? t.errorCurrentPassword : t.errorInvalidCredentials;
@@ -693,14 +696,14 @@ function K(e, t, i = "link") {
   return s.type === f.projectNotFound || s.type === f.unknownOrigin ? t.errorConfig : s.type === f.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 === f.routeNotFound ? t.errorConfigEndpoint : t.errorGeneric;
 }
 function Ut(e) {
-  const t = z(e);
+  const t = _(e);
   return !!(t.type === f.projectNotFound || t.type === f.unknownOrigin || t.type === f.routeNotFound || !t.message && t.code === 404 || t.code === 0 && /fetch|network|load failed|failed to fetch/i.test(t.message));
 }
-const J = (e) => `authui:active-team:${e}`;
+const tt = (e) => `authui:active-team:${e}`;
 function ut(e) {
   if (typeof localStorage > "u" || !e) return null;
   try {
-    return localStorage.getItem(J(e));
+    return localStorage.getItem(tt(e));
   } catch {
     return null;
   }
@@ -708,7 +711,7 @@ function ut(e) {
 function Mt(e, t) {
   if (!(typeof localStorage > "u" || !e))
     try {
-      t ? localStorage.setItem(J(e), t) : localStorage.removeItem(J(e));
+      t ? localStorage.setItem(tt(e), t) : localStorage.removeItem(tt(e));
     } catch {
     }
 }
@@ -724,7 +727,7 @@ function V(e) {
     }
   }
 }
-function D() {
+function z() {
   if (typeof localStorage > "u") return null;
   try {
     return localStorage.getItem(at);
@@ -772,7 +775,7 @@ function S(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const tt = "authui", mt = ["userId", "secret", "expire", "project", "error", tt], ft = () => ({
+const et = "authui", mt = ["userId", "secret", "expire", "project", "error", et], ft = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
@@ -883,7 +886,7 @@ class Ft {
     this.state = { ...this.state, ...t }, this.emit("change", this.getState());
   }
   fail(t) {
-    const i = z(t);
+    const i = _(t);
     throw this.emit("error", i), t;
   }
   acct() {
@@ -903,7 +906,7 @@ class Ft {
         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 (N(i, f.moreFactorsRequired)) {
+        if (q(i, f.moreFactorsRequired)) {
           let s = null;
           try {
             s = await S(
@@ -914,7 +917,7 @@ class Ft {
           } catch {
           }
           this.setState({ status: "mfa-required", user: null, mfaFactors: s });
-        } else if (N(i, f.userBlocked))
+        } else if (q(i, f.userBlocked))
           await this.purgeLocalSession(), this.setState({
             status: "signed-out",
             user: null,
@@ -930,7 +933,7 @@ class Ft {
           console.warn(
             `[authui] ${a} (endpoint=${this.config?.endpoint ?? "?"}, project=${this.config?.project ?? "?"})`
           );
-          const c = z(i);
+          const c = _(i);
           this.emit("error", { message: a, type: c.type, code: c.code }), this.setState({
             status: "signed-out",
             user: null,
@@ -988,7 +991,7 @@ class Ft {
   }
   async signUp(t, i, s) {
     try {
-      await this.acct().create(H.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
+      await this.acct().create(B.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
     } catch (a) {
       this.fail(a);
     }
@@ -1031,7 +1034,7 @@ class Ft {
   async sendMagicUrl(t) {
     try {
       return await this.acct().createMagicURLToken(
-        H.unique(),
+        B.unique(),
         t.trim(),
         this.redirectUrl("magic-url"),
         this.config?.securityPhrase ?? !0
@@ -1043,7 +1046,7 @@ class Ft {
   async sendEmailOtp(t) {
     try {
       return await this.acct().createEmailToken(
-        H.unique(),
+        B.unique(),
         t.trim(),
         this.config?.securityPhrase ?? !0
       );
@@ -1053,7 +1056,7 @@ class Ft {
   }
   async sendPhoneOtp(t) {
     try {
-      return await this.acct().createPhoneToken(H.unique(), t.replace(/[\s()-]/g, ""));
+      return await this.acct().createPhoneToken(B.unique(), t.replace(/[\s()-]/g, ""));
     } catch (i) {
       return this.fail(i);
     }
@@ -1328,7 +1331,7 @@ class Ft {
   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 mt) s.searchParams.delete(a);
-    return s.searchParams.set(tt, t), s.toString();
+    return s.searchParams.set(et, t), s.toString();
   }
   setPending(t) {
     this.setState({ pending: t });
@@ -1339,7 +1342,7 @@ class Ft {
    */
   async handleRedirect() {
     if (typeof window > "u") return !1;
-    const t = new URLSearchParams(window.location.search), i = t.get(tt);
+    const t = new URLSearchParams(window.location.search), i = t.get(et);
     if (!i) return !1;
     const s = t.get("userId") ?? "", a = t.get("secret") ?? "";
     this.cleanUrl();
@@ -1385,8 +1388,8 @@ class Ft {
           break;
       }
     } catch (u) {
-      const $ = z(u), x = K(u, this.getStrings(), "link");
-      this.emit("error", $), this.setState({ pending: { type: "notice", message: x, tone: "error" } });
+      const b = _(u), $ = K(u, this.getStrings(), "link");
+      this.emit("error", b), this.setState({ pending: { type: "notice", message: $, tone: "error" } });
     }
     return !0;
   }
@@ -1400,8 +1403,8 @@ class Ft {
     this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = ft(), this.listeners.clear();
   }
 }
-const n = new Ft();
-class Tt {
+const o = new Ft();
+class Rt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
       const t = this.isDark("auto");
@@ -1429,14 +1432,14 @@ class Tt {
     this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
   }
 }
-const gt = new Tt(), vt = {
+const gt = new Rt(), vt = {
   none: "0px",
   sm: "0.25rem",
   md: "0.625rem",
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, Rt = O`
+}, Tt = O`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -1465,7 +1468,7 @@ const gt = new Tt(), vt = {
     --authui-success-bg: rgba(16, 185, 129, 0.1);
     --authui-warning-foreground: #b45309;
     --authui-warning-bg: rgba(245, 158, 11, 0.1);
-    --authui-error-foreground: #dc2626;
+    --authui-error-foreground: #b91c1c;
     --authui-error-bg: rgba(239, 68, 68, 0.1);
     --authui-info-foreground: #475569;
     --authui-info-bg: rgba(100, 116, 139, 0.1);
@@ -1514,7 +1517,7 @@ const gt = new Tt(), vt = {
     --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;
   }
-`, _t = O`
+`, Dt = O`
   *,
   *::before,
   *::after {
@@ -1708,11 +1711,13 @@ const gt = new Tt(), vt = {
     flex-direction: column;
     gap: 6px;
   }
-  .label {
+  .field-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+  }
+  .label {
     font-size: 14px;
     line-height: 1;
     font-weight: 500;
@@ -1876,7 +1881,7 @@ const gt = new Tt(), vt = {
     background: var(--authui-error-bg);
   }
   .alert-error .alert-body {
-    color: color-mix(in oklab, var(--authui-error-foreground) 90%, transparent);
+    color: var(--authui-error-foreground);
   }
   .alert-success {
     color: var(--authui-success-foreground);
@@ -2227,12 +2232,154 @@ const gt = new Tt(), vt = {
     width: 18px;
     height: 18px;
   }
+  /* OAuth accordion: last-used (or focused) expands; others stay icon-compact. */
+  .providers.accordion {
+    display: flex;
+    width: 100%;
+    gap: 8px;
+  }
+  .providers.accordion > .provider-slot {
+    position: relative;
+    flex: 0 1 2.25rem;
+    min-width: 2.25rem;
+    overflow: visible;
+    transition: flex-grow 480ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .providers.accordion > .provider-slot.is-expanded {
+    flex-grow: 1;
+  }
+  .providers.accordion .btn {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    justify-content: center;
+    gap: 0;
+    padding-inline: 0;
+    overflow: hidden;
+  }
+  .providers.accordion .btn svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+  .provider-label {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: 0fr;
+    transition: grid-template-columns 480ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
+  }
+  .provider-label > span {
+    min-width: 0;
+    overflow: hidden;
+  }
+  .provider-label-text {
+    display: block;
+    white-space: nowrap;
+    padding-inline-start: 6px;
+    opacity: 0;
+    transition: opacity 160ms ease;
+  }
+  .providers.accordion > .provider-slot.is-expanded .provider-label {
+    grid-template-columns: 1fr;
+    transition: grid-template-columns 480ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .providers.accordion > .provider-slot.is-expanded .provider-label-text {
+    opacity: 1;
+    transition: opacity 240ms ease 320ms;
+  }
+  .oauth-last-used {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .oauth-last-used-dot,
+  .oauth-last-used-pill {
+    position: absolute;
+    transition: opacity 180ms ease;
+  }
+  .oauth-last-used-dot {
+    top: -3px;
+    inset-inline-end: -3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--authui-brand);
+    box-shadow: 0 0 0 2px var(--authui-card);
+    opacity: 1;
+  }
+  .oauth-last-used-pill {
+    top: -8px;
+    inset-inline-start: 6px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--authui-border);
+    background: var(--authui-foreground);
+    color: var(--authui-background);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    opacity: 0;
+  }
+  .providers.accordion > .provider-slot.is-expanded .oauth-last-used-dot {
+    opacity: 0;
+  }
+  .providers.accordion > .provider-slot.is-expanded .oauth-last-used-pill {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .providers.accordion > .provider-slot,
+    .provider-label,
+    .provider-label-text,
+    .oauth-last-used-dot,
+    .oauth-last-used-pill {
+      transition: none;
+    }
+  }
   .empty {
     padding: 24px 0;
     text-align: center;
     font-size: 13px;
     color: var(--authui-muted-foreground);
   }
+  .empty-well {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 28px 16px;
+    border: 1px dashed var(--authui-border);
+    border-radius: var(--authui-radius-xl);
+    background: color-mix(in oklab, var(--authui-card) 50%, transparent);
+  }
+  .empty-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 999px;
+    background: var(--authui-muted);
+    color: var(--authui-muted-foreground);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  .empty-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+  .empty-title {
+    margin: 0 0 4px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--authui-foreground);
+  }
+  .empty-desc {
+    margin: 0;
+    font-size: 13px;
+    color: var(--authui-muted-foreground);
+    max-width: 280px;
+  }
   .choice {
     display: flex;
     align-items: center;
@@ -2319,19 +2466,19 @@ const gt = new Tt(), vt = {
     }
   }
 `;
-var Dt = Object.defineProperty, zt = (e, t, i, s) => {
+var zt = Object.defineProperty, _t = (e, t, i, s) => {
   for (var a = void 0, c = e.length - 1, u; c >= 0; c--)
     (u = e[c]) && (a = u(t, i, a) || a);
-  return a && Dt(t, i, a), a;
+  return a && zt(t, i, a), a;
 }, M;
 const $t = (M = class extends rt {
   constructor() {
-    super(...arguments), this.auth = n.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
+    super(...arguments), this.auth = o.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
   }
   connectedCallback() {
     super.connectedCallback();
     for (const t of M.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
-    this.auth = n.getState(), this.unsubscribeStore = n.on("change", (t) => {
+    this.auth = o.getState(), this.unsubscribeStore = o.on("change", (t) => {
       this.auth = t, this.applyBranding();
     }), this.unsubscribeTheme = gt.subscribe(() => this.applyBranding()), this.applyBranding();
   }
@@ -2341,14 +2488,14 @@ const $t = (M = class extends rt {
     this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
   }
   get strings() {
-    return n.getStrings();
+    return o.getStrings();
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
     return St(this.strings[t], i);
   }
   get config() {
-    return n.getConfig();
+    return o.getConfig();
   }
   get productName() {
     return this.config?.branding?.name ?? "";
@@ -2365,17 +2512,17 @@ const $t = (M = class extends rt {
   fire(t, i) {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-}, M.styles = [Rt, _t], M.KEY_EVENTS = ["keydown", "keyup", "keypress"], M);
-zt([
+}, M.styles = [Tt, Dt], M.KEY_EVENTS = ["keydown", "keyup", "keypress"], M);
+_t([
   d()
 ], $t.prototype, "auth");
 let E = $t;
-var Lt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, y = (e, t, i, s) => {
+var Lt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, w = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Vt(t, i) : t, c = e.length - 1, u; c >= 0; c--)
     (u = e[c]) && (a = (s ? u(t, i, a) : u(a)) || a);
   return s && a && Lt(t, i, a), a;
 };
-let b = class extends rt {
+let y = class extends rt {
   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.preview = "";
   }
@@ -2388,12 +2535,12 @@ let b = class extends rt {
   configure() {
     if (!this.endpoint || !this.project) {
       queueMicrotask(() => {
-        (!this.endpoint || !this.project) && n.notifyConfigIncomplete();
+        (!this.endpoint || !this.project) && o.notifyConfigIncomplete();
       });
       return;
     }
-    const e = this.toConfig(), t = n.getConfig();
-    t && JSON.stringify(t) === JSON.stringify(e) || n.configure(e);
+    const e = this.toConfig(), t = o.getConfig();
+    t && JSON.stringify(t) === JSON.stringify(e) || o.configure(e);
   }
   toConfig() {
     const e = { oauth: [] }, t = this.methods.split(/[\s,]+/).filter(Boolean);
@@ -2425,69 +2572,69 @@ let b = class extends rt {
     };
   }
 };
-b.styles = O`
+y.styles = O`
     :host {
       display: none;
     }
   `;
-y([
+w([
   g({ type: String })
-], b.prototype, "endpoint", 2);
-y([
+], y.prototype, "endpoint", 2);
+w([
   g({ type: String })
-], b.prototype, "project", 2);
-y([
+], y.prototype, "project", 2);
+w([
   g({ type: String, attribute: "redirect-url" })
-], b.prototype, "redirectUrl", 2);
-y([
+], y.prototype, "redirectUrl", 2);
+w([
   g({ type: String, attribute: "success-url" })
-], b.prototype, "successUrl", 2);
-y([
+], y.prototype, "successUrl", 2);
+w([
   g({ type: String })
-], b.prototype, "methods", 2);
-y([
+], y.prototype, "methods", 2);
+w([
   g({ type: String, attribute: "sign-up" })
-], b.prototype, "signUp", 2);
-y([
+], y.prototype, "signUp", 2);
+w([
   g({ type: String, attribute: "require-name" })
-], b.prototype, "requireName", 2);
-y([
+], y.prototype, "requireName", 2);
+w([
   g({ type: String })
-], b.prototype, "mfa", 2);
-y([
+], y.prototype, "mfa", 2);
+w([
   g({ type: String, attribute: "security-phrase" })
-], b.prototype, "securityPhrase", 2);
-y([
+], y.prototype, "securityPhrase", 2);
+w([
   g({ type: String })
-], b.prototype, "name", 2);
-y([
+], y.prototype, "name", 2);
+w([
   g({ type: String })
-], b.prototype, "logo", 2);
-y([
+], y.prototype, "logo", 2);
+w([
   g({ type: String })
-], b.prototype, "theme", 2);
-y([
+], y.prototype, "theme", 2);
+w([
   g({ type: String })
-], b.prototype, "radius", 2);
-y([
+], y.prototype, "radius", 2);
+w([
   g({ type: String })
-], b.prototype, "primary", 2);
-y([
+], y.prototype, "primary", 2);
+w([
   g({ type: String, attribute: "primary-foreground" })
-], b.prototype, "primaryForeground", 2);
-y([
+], y.prototype, "primaryForeground", 2);
+w([
   g({ type: String, attribute: "terms-url" })
-], b.prototype, "termsUrl", 2);
-y([
+], y.prototype, "termsUrl", 2);
+w([
   g({ type: String, attribute: "privacy-url" })
-], b.prototype, "privacyUrl", 2);
-y([
+], y.prototype, "privacyUrl", 2);
+w([
   g({ type: String })
-], b.prototype, "preview", 2);
-b = y([
-  R("authui-config")
-], b);
-var qt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, Z = (e, t, i, s) => {
+], y.prototype, "preview", 2);
+y = w([
+  T("authui-config")
+], y);
+var qt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, X = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Nt(t, i) : t, c = e.length - 1, u; c >= 0; c--)
     (u = e[c]) && (a = (s ? u(t, i, a) : u(a)) || a);
   return s && a && qt(t, i, a), a;
@@ -2513,43 +2660,43 @@ function Bt() {
 }
 Bt();
 const Ht = ["loading", "signed-out", "signed-in", "mfa-required"];
-function Q(e) {
+function J(e) {
   return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => Ht.includes(t)) : [];
 }
-let B = class extends rt {
+let N = class extends rt {
   constructor() {
-    super(...arguments), this.when = "", this.unless = "", this.status = n.getState().status, this.unsubscribe = null;
+    super(...arguments), this.when = "", this.unless = "", this.status = o.getState().status, this.unsubscribe = null;
   }
   connectedCallback() {
-    super.connectedCallback(), this.status = n.getState().status, this.unsubscribe = n.on("change", (e) => this.status = e.status);
+    super.connectedCallback(), this.status = o.getState().status, this.unsubscribe = o.on("change", (e) => this.status = e.status);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.unsubscribe?.(), this.unsubscribe = null;
   }
   /** Whether the current status satisfies `when` and `unless`. */
   get visible() {
-    const e = Q(this.when), t = Q(this.unless);
+    const e = J(this.when), t = J(this.unless);
     return !(this.status === "loading" && !e.includes("loading") || e.length > 0 && !e.includes(this.status) || t.includes(this.status));
   }
   updated() {
-    (this.status !== "loading" || Q(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
+    (this.status !== "loading" || J(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
   }
   render() {
-    return this.visible ? r`<slot></slot>` : o;
+    return this.visible ? r`<slot></slot>` : n;
   }
 };
-Z([
+X([
   g({ type: String })
-], B.prototype, "when", 2);
-Z([
+], N.prototype, "when", 2);
+X([
   g({ type: String })
-], B.prototype, "unless", 2);
-Z([
+], N.prototype, "unless", 2);
+X([
   d()
-], B.prototype, "status", 2);
-B = Z([
-  R("authui-show")
-], B);
+], N.prototype, "status", 2);
+N = X([
+  T("authui-show")
+], N);
 const jt = O`
   :host {
     display: block;
@@ -2697,70 +2844,70 @@ const jt = O`
   qr: v(
     h`<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>`
   )
-}, w = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Wt = {
-  google: w(
+}, x = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Wt = {
+  google: x(
     h`<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"/>`
   ),
-  github: w(
+  github: x(
     h`<path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>`
   ),
-  apple: w(
+  apple: x(
     h`<path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>`
   ),
-  facebook: w(
+  facebook: x(
     h`<path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>`
   ),
-  x: w(
+  x: x(
     h`<path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`
   ),
-  microsoft: w(
+  microsoft: x(
     h`<path fill="#F25022" d="M1 1h10v10H1z"/><path fill="#7FBA00" d="M13 1h10v10H13z"/><path fill="#00A4EF" d="M1 13h10v10H1z"/><path fill="#FFB900" d="M13 13h10v10H13z"/>`
   ),
-  discord: w(
+  discord: x(
     h`<path fill="#5865F2" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>`
   ),
-  gitlab: w(
+  gitlab: x(
     h`<path fill="#FC6D26" d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.876.876 0 0 0-1.001.054.874.874 0 0 0-.29.44l-2.205 6.748H7.535L5.33 1.069a.857.857 0 0 0-.29-.441.876.876 0 0 0-1.001-.054.86.86 0 0 0-.336.405L.436 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.011.009.03.021 4.976 3.727 2.462 1.863 1.5 1.132a1.009 1.009 0 0 0 1.22 0l1.5-1.132 2.461-1.863 5.006-3.75.013-.01a6.068 6.068 0 0 0 2.006-7.002z"/>`
   ),
-  linkedin: w(
+  linkedin: x(
     h`<path fill="#0A66C2" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>`
   ),
-  slack: w(
+  slack: x(
     h`<path fill="#E01E5A" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"/><path fill="#36C5F0" d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z"/><path fill="#2EB67D" d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312z"/><path fill="#ECB22E" d="M15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.315A2.527 2.527 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>`
   ),
-  twitch: w(
+  twitch: x(
     h`<path fill="#9146FF" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>`
   ),
-  spotify: w(
+  spotify: x(
     h`<path fill="#1DB954" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>`
   ),
-  notion: w(
+  notion: x(
     h`<path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/>`
   ),
-  dropbox: w(
+  dropbox: x(
     h`<path fill="#0061FF" d="M6 1.807 0 5.629l6 3.822 6.001-3.822L6 1.807zm12 0-6 3.822 6 3.822 6-3.822-6-3.822zM0 13.274l6 3.822 6.001-3.822L6 9.452l-6 3.822zm18-3.822-6 3.822 6 3.822 6-3.822-6-3.822zM6 18.371l6.001 3.822 6-3.822-6-3.822L6 18.371z"/>`
   ),
-  figma: w(
+  figma: x(
     h`<path fill="#F24E1E" d="M8 24a4 4 0 0 0 4-4v-4H8a4 4 0 0 0 0 8z"/><path fill="#A259FF" d="M4 12a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4z"/><path fill="#FF7262" d="M4 4a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4z"/><path fill="#1ABCFE" d="M12 0h4a4 4 0 0 1 0 8h-4V0z"/><path fill="#0ACF83" d="M20 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>`
   ),
-  bitbucket: w(
+  bitbucket: x(
     h`<path fill="#2684FF" d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z"/>`
   ),
-  amazon: w(
+  amazon: x(
     h`<path fill="currentColor" d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726a17.617 17.617 0 0 1-10.951-.577 17.88 17.88 0 0 1-5.43-3.35c-.1-.074-.151-.15-.151-.22 0-.047.021-.09.051-.13zm6.565-6.218c0-1.005.247-1.863.743-2.577.495-.71 1.17-1.25 2.04-1.615.796-.335 1.756-.575 2.912-.72.39-.046 1.033-.103 1.92-.174v-.37c0-.93-.105-1.558-.3-1.875-.302-.43-.78-.65-1.44-.65h-.182c-.48.046-.896.196-1.246.46-.35.27-.575.63-.675 1.096-.06.3-.206.465-.435.51l-2.52-.315c-.248-.06-.372-.18-.372-.39 0-.046.007-.09.022-.15.247-1.29.855-2.25 1.82-2.88.976-.616 2.1-.975 3.39-1.05h.54c1.65 0 2.957.434 3.888 1.29.135.15.27.3.405.48.12.165.224.314.283.45.075.134.15.33.195.57.06.254.105.42.135.51.03.104.062.3.076.615.01.313.02.493.02.553v5.28c0 .376.06.72.165 1.036.105.313.21.54.315.674l.51.674c.09.136.136.256.136.36 0 .12-.06.226-.18.314-1.2 1.05-1.86 1.62-1.963 1.71-.165.135-.373.15-.61.045a6.62 6.62 0 0 1-.526-.496l-.31-.347a9.858 9.858 0 0 1-.317-.42l-.3-.435c-.81.886-1.603 1.44-2.4 1.665-.494.15-1.093.227-1.83.227-1.11 0-2.04-.343-2.76-1.034-.72-.69-1.08-1.665-1.08-2.94l-.05-.076zm3.753-.438c0 .566.14 1.02.425 1.364.285.34.675.512 1.155.512.045 0 .106-.007.195-.02.09-.016.134-.023.166-.023.614-.16 1.08-.553 1.424-1.178.165-.28.285-.58.36-.91.09-.32.12-.59.135-.8.015-.195.015-.54.015-1.005v-.54c-.84 0-1.484.06-1.92.18-1.275.36-1.92 1.17-1.92 2.43l-.035-.01zm9.162 7.027c.03-.06.075-.11.132-.17.362-.243.714-.41 1.05-.5a8.094 8.094 0 0 1 1.612-.24c.14-.012.28 0 .41.03.65.06 1.05.168 1.172.33.063.09.099.228.099.39v.15c0 .51-.149 1.11-.424 1.8-.278.69-.664 1.248-1.156 1.68-.073.06-.14.09-.197.09-.03 0-.06 0-.09-.012-.09-.044-.107-.12-.064-.24.54-1.26.806-2.143.806-2.64 0-.15-.03-.27-.087-.344-.145-.166-.55-.257-1.224-.257-.243 0-.533.016-.87.045-.363.045-.7.09-1 .135-.09 0-.148-.014-.18-.044-.03-.03-.036-.06-.02-.106 0-.014.007-.03.02-.06z"/>`
   ),
-  paypal: w(
+  paypal: x(
     h`<path fill="#003087" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/>`
   )
 };
-function et(e) {
+function Y(e) {
   return Wt[e] ?? l.globe;
 }
 function nt(e) {
   const t = (e.trim()[0] ?? "?").toUpperCase();
   return /[A-Z0-9]/i.test(t) ? t : l.user;
 }
-function Y(e) {
+function Z(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 } }));
   }));
@@ -2791,21 +2938,21 @@ var Kt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, C = (e, t,
 };
 let k = 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.token = null, this.focusOnStep = !1, this.resendCooldownUntil = 0, this.challenge = null, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.onSignIn = (e) => {
+    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.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.onSignIn = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await n.signInWithEmailPassword(this.email, this.password), this.password = "", V("email-password"), this.fire("authui-success", { method: "email-password" });
+        await o.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.run(async () => {
-        await n.signUp(this.email, this.password, this.name), this.password = "", V("email-password"), this.fire("authui-success", { method: "sign-up" });
+        await o.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 n.signInAnonymously(), V("anonymous"), this.fire("authui-success", { method: "anonymous" });
+        await o.signInAnonymously(), V("anonymous"), this.fire("authui-success", { method: "anonymous" });
       });
     }, this.onOAuth = (e) => {
       this.run(async () => {
-        if (Ot(e), await n.signInWithOAuth(e), n.isPreview) {
+        if (Ot(e), await o.signInWithOAuth(e), o.isPreview) {
           wt(), this.fire("authui-success", { method: "oauth" });
           return;
         }
@@ -2813,7 +2960,7 @@ let k = class extends E {
       });
     }, this.onForgot = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await n.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
+        await o.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
       });
     }, this.onReset = (e) => {
       if (e.preventDefault(), !this.requireValid(e)) return;
@@ -2823,11 +2970,11 @@ let k = class extends E {
       }
       const t = this.recovery;
       t && this.run(async () => {
-        await n.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.auth.pending?.type === "reset-password" && n.setPending(null), this.go("sign-in"), this.notice = { tone: "success", message: this.t("passwordUpdated") };
+        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") };
       });
     }, this.onMagicUrl = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await n.sendMagicUrl(this.email);
+        const t = await o.sendMagicUrl(this.email);
         this.token = {
           userId: t.userId,
           kind: "magic-url",
@@ -2837,7 +2984,7 @@ let k = class extends E {
       });
     }, this.onEmailOtp = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await n.sendEmailOtp(this.email);
+        const t = await o.sendEmailOtp(this.email);
         this.token = {
           userId: t.userId,
           kind: "email-otp",
@@ -2847,37 +2994,37 @@ let k = class extends E {
       });
     }, this.onPhoneOtp = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        const t = await n.sendPhoneOtp(this.phone);
+        const t = await o.sendPhoneOtp(this.phone);
         this.token = { userId: t.userId, kind: "phone", target: this.phone }, this.code = "";
       });
     }, this.onVerifyCode = (e) => {
       if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.token;
       t && this.run(async () => {
-        await n.signInWithToken(t.userId, this.code), this.code = "", this.token = null, V(t.kind), this.fire("authui-success", { method: t.kind });
+        await o.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 () => {
-        const t = await n.createMfaChallenge(e);
+        const t = await o.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 n.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
+        await o.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
       }, "code");
     }, this.onCancelMfa = () => {
       this.run(async () => {
         try {
-          await n.signOut();
+          await o.signOut();
         } catch (e) {
-          if (!N(e, f.sessionNotFound)) throw e;
+          if (!q(e, f.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
     }, this.onSignOut = () => {
-      this.run(() => n.signOut());
+      this.run(() => o.signOut());
     };
   }
   connectedCallback() {
@@ -2901,7 +3048,7 @@ let k = class extends E {
   }
   /** Navigate between screens and reset transient state. */
   dismissNotice() {
-    this.notice = null, this.auth.pending?.type === "notice" && n.setPending(null);
+    this.notice = null, this.auth.pending?.type === "notice" && o.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.password = "", this.passwordConfirm = "", e !== "mfa" && (this.challenge = null), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
@@ -2945,7 +3092,7 @@ let k = class extends E {
                 >
                   ${l.x}
                 </button>
-              </div>` : o}
+              </div>` : n}
         ${e}
       </div>
     `;
@@ -2987,10 +3134,10 @@ let k = class extends E {
                 @error=${(a) => {
       a.target.hidden = !0;
     }}
-              />` : o}
-        ${n.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : o}
+              />` : n}
+        ${o.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>` : o}
+        ${s ? r`<p class="description">${s}</p>` : n}
       </div>
     `;
   }
@@ -2998,27 +3145,27 @@ let k = class extends E {
     return this.error ? r`<div class="alert alert-error" role="alert">
           ${l.alert}
           <div class="alert-body">${this.error}</div>
-        </div>` : o;
+        </div>` : n;
   }
   submitButton(e, t = "btn-primary") {
     return r`<button class="btn ${t} btn-block" type="submit" ?disabled=${this.busy}>
-      ${this.busy ? r`<span class="spinner" aria-hidden="true"></span>` : o} ${e}
+      ${this.busy ? r`<span class="spinner" aria-hidden="true"></span>` : n} ${e}
     </button>`;
   }
   passwordField(e) {
     const t = this[e.field], i = e.meter ? it(t) : null;
     return r`
       <div class="field">
-        <label class="label" for=${e.id}>
-          ${e.label}
+        <div class="field-header">
+          <label class="label" for=${e.id}>${e.label}</label>
           ${e.forgot ? r`<button
                   type="button"
                   class="btn btn-link small"
                   @click=${() => this.go("forgot-password")}
                 >
                   ${this.t("forgotPassword")}
-                </button>` : o}
-        </label>
+                </button>` : n}
+        </div>
         <div class="input-wrap">
           <input
             class="input"
@@ -3035,7 +3182,6 @@ let k = class extends E {
             class="btn btn-ghost btn-icon"
             @click=${() => this.showPassword = !this.showPassword}
             aria-label=${this.showPassword ? this.t("hidePassword") : this.t("showPassword")}
-            tabindex="-1"
           >
             ${this.showPassword ? l.eyeOff : l.eye}
           </button>
@@ -3054,7 +3200,7 @@ let k = class extends E {
                   <span></span><span></span><span></span><span></span>
                 </div>
                 <p class="strength-label">${this.t(i.labelKey)}</p>
-              </div>` : e.hint ? r`<p class="hint">${e.hint}</p>` : o}
+              </div>` : e.hint ? r`<p class="hint">${e.hint}</p>` : n}
       </div>
     `;
   }
@@ -3096,11 +3242,11 @@ let k = class extends E {
   }
   legal() {
     const e = this.config?.legal;
-    return !e?.termsUrl && !e?.privacyUrl ? o : r`<p class="legal">
+    return !e?.termsUrl && !e?.privacyUrl ? n : r`<p class="legal">
       ${this.t("agreeTo")}
-      ${e.termsUrl ? r`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : o}
-      ${e.termsUrl && e.privacyUrl ? r` ${this.t("and")} ` : o}
-      ${e.privacyUrl ? r`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : o}.
+      ${e.termsUrl ? r`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : n}
+      ${e.termsUrl && e.privacyUrl ? r` ${this.t("and")} ` : n}
+      ${e.privacyUrl ? r`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : n}.
     </p>`;
   }
   backLink(e = "sign-in") {
@@ -3152,7 +3298,7 @@ let k = class extends E {
             <span class="avatar">${nt(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>` : o}
+              ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : n}
             </div>
           </div>
         </div>
@@ -3160,11 +3306,11 @@ let k = class extends E {
         <div class="stack-sm">
           ${this.config?.successUrl ? r`<a class="btn btn-primary btn-block" href=${this.config.successUrl}
                   >${this.t("continue")}</a
-                >` : o}
+                >` : n}
           <button
             class="btn btn-outline btn-block"
             @click=${() => {
-      this.embedded ? this.fire("authui-open", { view: "account" }) : Y("account");
+      this.embedded ? this.fire("authui-open", { view: "account" }) : Z("account");
     }}
           >
             ${l.settings} ${this.t("manageAccount")}
@@ -3178,30 +3324,68 @@ let k = class extends E {
   }
   renderProviders() {
     const e = [...this.config?.methods?.oauth ?? []];
-    if (e.length === 0) return o;
-    const t = D();
-    e.sort((s, a) => {
-      const c = t === `oauth:${s}` ? 0 : 1, u = t === `oauth:${a}` ? 0 : 1;
-      return c - u;
-    });
-    const i = e.length > 2;
+    if (e.length === 0) return n;
+    const t = z(), i = e.find((a) => t === `oauth:${a}`) ?? null;
+    if (e.length <= 2) {
+      const a = [...e].sort((c, u) => {
+        const b = t === `oauth:${c}` ? 0 : 1, $ = t === `oauth:${u}` ? 0 : 1;
+        return b - $;
+      });
+      return r`
+        <div class="providers">
+          ${a.map((c) => {
+        const u = t === `oauth:${c}`, b = this.t("continueWith", { provider: W(c) });
+        return r`<button
+              type="button"
+              class="btn btn-outline ${u ? "last-used" : ""}"
+              @click=${() => this.onOAuth(c)}
+              ?disabled=${this.busy}
+              aria-label=${u ? `${b}. ${this.t("lastUsed")}` : b}
+            >
+              ${Y(c)}
+              <span>${b}</span>
+              ${u ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
+            </button>`;
+      })}
+        </div>
+      `;
+    }
+    const s = this.expandedOAuth && e.includes(this.expandedOAuth) ? this.expandedOAuth : i ?? e[0];
     return r`
-      <div class="providers ${i ? "two" : ""}">
-        ${e.map((s) => {
-      const a = t === `oauth:${s}`;
-      return r`<button
-            type="button"
-            class="btn btn-outline ${a ? "last-used" : ""}"
-            @click=${() => this.onOAuth(s)}
-            ?disabled=${this.busy}
-            aria-label=${this.t("continueWith", { provider: q(s) })}
+      <div
+        class="providers accordion"
+        @mouseleave=${() => {
+      this.expandedOAuth = i ?? e[0];
+    }}
+      >
+        ${e.map((a) => {
+      const c = t === `oauth:${a}`, u = s === a, b = this.t("continueWith", { provider: W(a) });
+      return r`<div
+            class="provider-slot ${u ? "is-expanded" : ""}"
+            @mouseenter=${() => {
+        this.expandedOAuth = a;
+      }}
           >
-            ${et(s)}
-            <span
-              >${i ? q(s) : this.t("continueWith", { provider: q(s) })}</span
+            <button
+              type="button"
+              class="btn btn-outline"
+              @click=${() => this.onOAuth(a)}
+              @focus=${() => {
+        this.expandedOAuth = a;
+      }}
+              ?disabled=${this.busy}
+              aria-label=${c ? `${b}. ${this.t("lastUsed")}` : b}
             >
-            ${a ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : o}
-          </button>`;
+              ${Y(a)}
+              <span class="provider-label"
+                ><span><span class="provider-label-text">${b}</span></span></span
+              >
+              ${c ? r`<span class="oauth-last-used" data-last-used=${a} aria-hidden="true">
+                      <span class="oauth-last-used-dot"></span>
+                      <span class="oauth-last-used-pill">${this.t("lastUsed")}</span>
+                    </span>` : n}
+            </button>
+          </div>`;
     })}
       </div>
     `;
@@ -3215,47 +3399,47 @@ let k = class extends E {
     return r`
       <div class="stack">
         ${this.renderProviders()}
-        ${i && (t || s.length > 0) ? r`<div class="separator-text">${this.t("or")}</div>` : o}
+        ${i && (t || s.length > 0) ? r`<div class="separator-text">${this.t("or")}</div>` : n}
         ${t ? r`<form
-                class="form ${D() === "email-password" ? "last-used-form" : ""}"
+                class="form ${z() === "email-password" ? "last-used-form" : ""}"
                 @submit=${this.onSignIn}
                 novalidate
               >
-                ${D() === "email-password" ? r`<p class="hint">
+                ${z() === "email-password" ? r`<p class="hint">
                         <span class="last-used-badge">${this.t("lastUsed")}</span>
-                      </p>` : o}
+                      </p>` : n}
                 ${this.emailField()}
                 ${this.passwordField({ label: this.t("password"), autocomplete: "current-password", id: "authui-password", field: "password", forgot: !0 })}
                 ${this.renderError()} ${this.submitButton(this.t("signIn"))}
               </form>` : this.renderError()}
         ${s.length > 0 ? r`<div class="stack-sm">
                 ${s.map((a) => {
-      const c = D() === a.step;
+      const c = z() === a.step;
       return r`<button
                     type="button"
                     class="btn btn-secondary btn-block ${c ? "last-used" : ""}"
                     @click=${() => this.go(a.step)}
                   >
                     ${a.icon} ${a.label}
-                    ${c ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : o}
+                    ${c ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
                   </button>`;
     })}
-              </div>` : o}
+              </div>` : n}
         ${e.anonymous ? r`<button
                 type="button"
-                class="btn btn-ghost btn-block ${D() === "anonymous" ? "last-used" : ""}"
+                class="btn btn-ghost btn-block ${z() === "anonymous" ? "last-used" : ""}"
                 @click=${this.onGuest}
                 ?disabled=${this.busy}
               >
                 ${l.ghost} ${this.t("continueAsGuest")}
-                ${D() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : o}
-              </button>` : o}
+                ${z() === "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>
                 <button type="button" class="btn btn-link" @click=${() => this.go("sign-up")}>
                   ${this.t("signUp")}
                 </button>
-              </div>` : o}
+              </div>` : n}
         ${this.legal()}
       </div>
     `;
@@ -3264,7 +3448,7 @@ let k = class extends E {
     return r`
       <div class="stack">
         ${this.renderProviders()}
-        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? r`<div class="separator-text">${this.t("or")}</div>` : o}
+        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? r`<div class="separator-text">${this.t("or")}</div>` : n}
         <form class="form" @submit=${this.onSignUp} novalidate>
           ${this.config?.requireName !== !1 ? r`<div class="field">
                   <label class="label" for="authui-name">${this.t("name")}</label>
@@ -3277,7 +3461,7 @@ let k = class extends E {
                     .value=${this.name}
                     @input=${this.bind("name")}
                   />
-                </div>` : o}
+                </div>` : n}
           ${this.emailField()}
           ${this.passwordField({ label: this.t("password"), autocomplete: "new-password", id: "authui-password", field: "password", hint: this.t("passwordHint"), meter: !0 })}
           ${this.renderError()} ${this.submitButton(this.t("createAccount"))}
@@ -3347,7 +3531,7 @@ let k = class extends E {
         ${this.t("securityPhrase")}: <span class="code">${e}</span>
       </div>
       <div class="alert-body">${this.t("securityPhraseHint")}</div>
-    </div>` : o;
+    </div>` : n;
   }
   renderMagicUrl() {
     return this.token ? r`<div class="stack">
@@ -3369,10 +3553,10 @@ let k = class extends E {
     const e = this.token;
     !e || Date.now() < this.resendCooldownUntil || (this.error = "", await this.run(async () => {
       if (e.kind === "phone") {
-        const t = await n.sendPhoneOtp(e.target);
+        const t = await o.sendPhoneOtp(e.target);
         this.token = { userId: t.userId, kind: "phone", target: e.target };
       } else {
-        const t = await n.sendEmailOtp(e.target);
+        const t = await o.sendEmailOtp(e.target);
         this.token = {
           userId: t.userId,
           kind: "email-otp",
@@ -3556,6 +3740,9 @@ C([
 C([
   d()
 ], k.prototype, "showPassword", 2);
+C([
+  d()
+], k.prototype, "expandedOAuth", 2);
 C([
   d()
 ], k.prototype, "token", 2);
@@ -3572,7 +3759,7 @@ C([
   st("form input:not([type=hidden])")
 ], k.prototype, "firstInput", 2);
 k = C([
-  R("authui-sign-in")
+  T("authui-sign-in")
 ], k);
 var Yt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, m = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Zt(t, i) : t, c = e.length - 1, u; c >= 0; c--)
@@ -3596,12 +3783,12 @@ let p = class extends E {
       const a = t[s].id.replace("authui-tab-", "");
       this.select(a), requestAnimationFrame(() => t[s]?.focus());
     }, this.noticeTimer = null, this.factorsLoading = !1, this.onUpdateName = (e) => {
-      e.preventDefault(), this.requireValid(e) && this.run("name", () => n.updateName(this.nameInput), this.t("nameUpdated"));
+      e.preventDefault(), this.requireValid(e) && this.run("name", () => o.updateName(this.nameInput), this.t("nameUpdated"));
     }, this.onUpdateEmail = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "email",
         async () => {
-          await n.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
+          await o.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
         },
         this.t("emailUpdated")
       );
@@ -3609,7 +3796,7 @@ let p = class extends E {
       e.preventDefault(), this.requireValid(e) && this.run(
         "phone",
         async () => {
-          await n.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
+          await o.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
         },
         this.t("phoneUpdated")
       );
@@ -3617,7 +3804,7 @@ let p = class extends E {
       e.preventDefault(), this.requireValid(e) && this.run(
         "guest",
         async () => {
-          await n.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
+          await o.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
         },
         this.t("accountConverted")
       );
@@ -3625,19 +3812,19 @@ let p = class extends E {
       Date.now() < this.verifyEmailCooldownUntil || this.run(
         "verify",
         async () => {
-          await n.sendEmailVerification(), this.startVerifyEmailCooldown();
+          await o.sendEmailVerification(), this.startVerifyEmailCooldown();
         },
         this.t("verificationSent")
       );
     }, this.onSendPhoneVerification = () => {
       this.run("verify-phone", async () => {
-        await n.sendPhoneVerification(), this.phoneCodeSent = !0;
+        await o.sendPhoneVerification(), this.phoneCodeSent = !0;
       });
     }, this.onConfirmPhoneVerification = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "verify-phone-code",
         async () => {
-          await n.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
+          await o.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
         },
         this.t("phoneVerified")
       );
@@ -3650,7 +3837,7 @@ let p = class extends E {
         this.run(
           "password",
           async () => {
-            await n.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
+            await o.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
           },
           this.t("passwordChanged")
         );
@@ -3658,17 +3845,17 @@ let p = class extends E {
     }, this.onToggleMfa = () => {
       const e = !this.user?.mfa;
       this.run("mfa", async () => {
-        await n.setMfaEnabled(e), await this.loadFactors();
+        await o.setMfaEnabled(e), await this.loadFactors();
       });
     }, this.onAddAuthenticator = () => {
       this.run("authenticator", async () => {
-        this.authenticator = await n.addAuthenticator(), this.authenticatorCode = "";
+        this.authenticator = await o.addAuthenticator(), this.authenticatorCode = "";
       });
     }, this.onVerifyAuthenticator = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(
         "authenticator-code",
         async () => {
-          await n.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
+          await o.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
         },
         this.t("authenticatorAdded")
       );
@@ -3678,15 +3865,15 @@ let p = class extends E {
         return;
       }
       this.confirmRemoveAuthenticator = !1, this.run("remove-authenticator", async () => {
-        await n.removeAuthenticator(), await this.loadFactors();
+        await o.removeAuthenticator(), await this.loadFactors();
       });
     }, this.onRecoveryCodes = () => {
       this.run("recovery", async () => {
         try {
-          this.recoveryCodes = await n.createRecoveryCodes();
+          this.recoveryCodes = await o.createRecoveryCodes();
         } catch (e) {
-          if (!N(e, f.recoveryCodesExist)) throw e;
-          this.recoveryCodes = await n.getRecoveryCodes();
+          if (!q(e, f.recoveryCodesExist)) throw e;
+          this.recoveryCodes = await o.getRecoveryCodes();
         }
         await this.loadFactors();
       });
@@ -3696,7 +3883,7 @@ let p = class extends E {
         return;
       }
       this.confirmRegenerate = !1, this.run("recovery", async () => {
-        this.recoveryCodes = await n.regenerateRecoveryCodes();
+        this.recoveryCodes = await o.regenerateRecoveryCodes();
       });
     }, this.onCopyCodes = async () => {
       if (this.recoveryCodes)
@@ -3716,7 +3903,7 @@ let p = class extends E {
         }
     }, this.onStepUpFactor = (e) => {
       this.run("stepup", async () => {
-        const t = await n.createMfaChallenge(e);
+        const t = await o.createMfaChallenge(e);
         this.stepUp = { ...this.stepUp, challenge: { id: t.$id, factor: e } }, this.stepUpCode = "";
       });
     }, this.onStepUpVerify = (e) => {
@@ -3725,33 +3912,33 @@ let p = class extends E {
       t?.challenge && (async () => {
         let i = !1;
         await this.run("stepup-code", async () => {
-          await n.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", i = !0;
+          await o.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 n.signOut(), this.sessions = [];
+          await o.signOut(), this.sessions = [];
           return;
         }
-        await n.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
+        await o.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", () => n.signOutEverywhere());
+      this.confirmSignOutAll = !1, this.run("sessions-all", () => o.signOutEverywhere());
     }, this.onDeleteIdentity = (e) => {
       if (this.confirmDisconnectId !== e) {
         this.confirmDisconnectId = e;
         return;
       }
       this.confirmDisconnectId = null, this.run(`identity-${e}`, async () => {
-        await n.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
+        await o.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
       });
     }, this.onDeleteAccount = () => {
-      this.run("delete", () => n.deleteAccount());
+      this.run("delete", () => o.deleteAccount());
     };
   }
   connectedCallback() {
@@ -3783,10 +3970,14 @@ let p = class extends E {
   }
   updated(e) {
     e.has("active") && requestAnimationFrame(() => {
-      const t = this.renderRoot.querySelector(
+      const i = this.renderRoot.querySelector(
         '.tab[aria-selected="true"]'
       );
-      t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
+      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(() => {
+      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 });
     });
   }
   setNotice(e, t) {
@@ -3804,7 +3995,7 @@ let p = class extends E {
       try {
         await t(), i && this.setNotice("success", i);
       } catch (s) {
-        N(s, f.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
+        q(s, f.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
           ...this.errors,
           [e]: K(
             s,
@@ -3820,12 +4011,12 @@ let p = class extends E {
   // ─────────────────────────── loaders ───────────────────────────
   async loadSessions() {
     await this.run("sessions", async () => {
-      this.sessions = await n.listSessions();
+      this.sessions = await o.listSessions();
     });
   }
   async loadIdentities() {
     await this.run("identities", async () => {
-      this.identities = await n.listIdentities();
+      this.identities = await o.listIdentities();
     });
   }
   /** Probe once so Activity is never shown on servers without /account/logs. */
@@ -3833,7 +4024,7 @@ let p = class extends E {
     if (!this.logsProbeStarted) {
       this.logsProbeStarted = !0;
       try {
-        this.logs = await n.listLogs(), this.logsSupported = !0;
+        this.logs = await o.listLogs(), this.logsSupported = !0;
       } catch {
         this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
       }
@@ -3846,7 +4037,7 @@ let p = class extends E {
     }
     this.busy = "logs";
     try {
-      this.logs = await n.listLogs();
+      this.logs = await o.listLogs();
     } catch {
       this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
     } finally {
@@ -3857,7 +4048,7 @@ let p = class extends E {
     if (!this.factorsLoading) {
       this.factorsLoading = !0;
       try {
-        this.factors = await n.listMfaFactors();
+        this.factors = await o.listMfaFactors();
       } catch {
         this.factors = {
           totp: !1,
@@ -3936,7 +4127,7 @@ let p = class extends E {
                 >
                   ${l.x}
                 </button>
-              </div>` : o}
+              </div>` : n}
         ${this.stepUp ? this.renderStepUp() : r`<div
                 class="tabpanel"
                 role="tabpanel"
@@ -3957,13 +4148,13 @@ let p = class extends E {
           <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>` : o}
-              ${n.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : o}
+              ${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}
             </span>
-            ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : o}
+            ${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=${() => n.signOut()}>
+        <button class="btn btn-outline btn-sm" @click=${() => o.signOut()}>
           ${l.logOut} ${this.t("signOut")}
         </button>
       </div>
@@ -3988,21 +4179,50 @@ let p = class extends E {
     return t ? r`<div class="alert alert-error" role="alert">
           ${l.alert}
           <div class="alert-body">${t}</div>
-        </div>` : o;
+        </div>` : n;
   }
   spinner(e) {
-    return this.busy === e ? r`<span class="spinner" aria-hidden="true"></span>` : o;
+    return this.busy === e ? r`<span class="spinner" aria-hidden="true"></span>` : n;
   }
   card(e, t, i, s, a = !1) {
     return r`<section class="card ${a ? "card-danger" : ""}">
       <div class="card-header">
         <h3 class="card-title">${e}</h3>
-        ${t ? r`<p class="card-description">${t}</p>` : o}
+        ${t ? r`<p class="card-description">${t}</p>` : n}
       </div>
-      <div class="card-body">${i}</div>
-      ${s ? r`<div class="card-footer">${s}</div>` : o}
+      ${i !== n ? r`<div class="card-body">${i}</div>` : n}
+      ${s ? r`<div class="card-footer">${s}</div>` : n}
     </section>`;
   }
+  /** Vibes-style confirm footer: Cancel first (autofocus), destructive only on confirm. */
+  confirmFooter(e, t, i, s) {
+    return r`
+      <button
+        type="button"
+        class="btn btn-outline btn-sm"
+        autofocus
+        ?disabled=${!!this.busy}
+        @click=${e}
+      >
+        ${this.t("cancel")}
+      </button>
+      <button
+        type="button"
+        class="btn btn-destructive btn-sm"
+        ?disabled=${!!this.busy}
+        @click=${t}
+      >
+        ${s ? this.spinner(s) : n} ${i}
+      </button>
+    `;
+  }
+  emptyState(e, t, i) {
+    return r`<div class="empty empty-well">
+      <div class="empty-icon" aria-hidden="true">${e}</div>
+      <p class="empty-title">${t}</p>
+      <p class="empty-desc">${i}</p>
+    </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>`;
   }
@@ -4112,7 +4332,7 @@ let p = class extends E {
           <div class="field">
             <label class="label" for="acc-email"
               >${this.t("email")}
-              ${e.email ? this.verifiedBadge(e.emailVerification) : o}</label
+              ${e.email ? this.verifiedBadge(e.emailVerification) : n}</label
             >
             <input
               class="input"
@@ -4137,8 +4357,8 @@ let p = class extends E {
                     autocomplete=${e.passwordUpdate ? "current-password" : "new-password"}
                     required
                   />
-                  ${e.passwordUpdate ? o : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
-                </div>` : o}
+                  ${e.passwordUpdate ? n : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
+                </div>` : n}
           ${this.error("email")} ${this.error("verify")}
         </form>`,
       r`
@@ -4155,7 +4375,7 @@ let p = class extends E {
           Math.ceil((this.verifyEmailCooldownUntil - Date.now()) / 1e3)
         )
       }) : this.t("verifyEmail")}
-                </button>` : o}
+                </button>` : n}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
@@ -4173,7 +4393,7 @@ let p = class extends E {
           <div class="field">
             <label class="label" for="acc-phone"
               >${this.t("phone")}
-              ${e.phone ? this.verifiedBadge(e.phoneVerification) : o}</label
+              ${e.phone ? this.verifiedBadge(e.phoneVerification) : n}</label
             >
             <input
               class="input"
@@ -4198,8 +4418,8 @@ let p = class extends E {
                     autocomplete=${e.passwordUpdate ? "current-password" : "new-password"}
                     required
                   />
-                  ${e.passwordUpdate ? o : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
-                </div>` : o}
+                  ${e.passwordUpdate ? n : r`<p class="hint">${this.t("createPasswordHint")}</p>`}
+                </div>` : n}
           ${this.phoneCodeSent ? r`<div class="field">
                   <label class="label" for="acc-phone-code">${this.t("code")}</label>
                   <input
@@ -4216,7 +4436,7 @@ let p = class extends E {
         t.key === "Enter" && (t.preventDefault(), this.onConfirmPhoneVerification(t));
       }}
                   />
-                </div>` : o}
+                </div>` : n}
           ${this.error("phone")} ${this.error("verify-phone")} ${this.error("verify-phone-code")}
         </form>`,
       r`
@@ -4227,7 +4447,7 @@ let p = class extends E {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone")} ${this.t("sendCode")}
-                </button>` : o}
+                </button>` : n}
           ${this.phoneCodeSent ? r`<button
                   class="btn btn-outline btn-sm"
                   type="button"
@@ -4235,7 +4455,7 @@ let p = class extends E {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
-                </button>` : o}
+                </button>` : n}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
@@ -4253,25 +4473,20 @@ let p = class extends E {
     return this.card(
       this.t("deleteAccount"),
       this.t("deleteAccountDescription"),
-      r`${this.error("delete")}
-      ${this.confirmDelete ? r`<div class="inline">
-              <button
-                class="btn btn-outline btn-sm warn"
-                @click=${this.onDeleteAccount}
-                ?disabled=${!!this.busy}
-              >
-                ${this.spinner("delete")} ${this.t("deleteAccountConfirm")}
-              </button>
-              <button class="btn btn-ghost btn-sm" @click=${() => this.confirmDelete = !1}>
-                ${this.t("cancel")}
-              </button>
-            </div>` : r`<button
-              class="btn btn-outline btn-sm warn"
-              @click=${() => this.confirmDelete = !0}
-            >
+      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")}
-            </button>`}`,
-      void 0,
+            </button>`,
+      this.confirmDelete ? this.confirmFooter(
+        () => {
+          this.confirmDelete = !1;
+        },
+        () => {
+          this.onDeleteAccount();
+        },
+        this.t("deleteAccountConfirm"),
+        "delete"
+      ) : void 0,
       !0
     );
   }
@@ -4279,7 +4494,7 @@ let p = class extends E {
   renderSecurity() {
     const e = this.user, t = this.config?.mfa !== !1;
     return r`<div class="section">
-      ${this.isGuest ? o : this.card(
+      ${this.isGuest ? n : this.card(
       this.t("changePassword"),
       void 0,
       r`<form
@@ -4301,7 +4516,7 @@ let p = class extends E {
                           autocomplete="current-password"
                           required
                         />
-                      </div>` : o}
+                      </div>` : n}
                 <div class="field">
                   <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
                   <input
@@ -4359,12 +4574,12 @@ let p = class extends E {
                 ${this.spinner("password")} ${this.t("update")}
               </button>`
     )}
-      ${t ? this.renderMfaCard() : o}
-      ${t ? this.renderRecoveryCard() : o}
+      ${t ? this.renderMfaCard() : n}
+      ${t ? this.renderRecoveryCard() : n}
     </div>`;
   }
   renderMfaCard() {
-    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? n.isPreview ? Et(this.authenticator.uri) : new kt(n.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? o.isPreview ? Et(this.authenticator.uri) : new kt(o.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
@@ -4387,7 +4602,7 @@ let p = class extends E {
                 ${l.alert}
                 <div class="alert-body">
                   ${this.t("mfaNoFactorWarning")}
-                  ${this.factors?.totp ? o : r`<div class="links">
+                  ${this.factors?.totp ? n : r`<div class="links">
                           <button
                             type="button"
                             class="btn btn-link"
@@ -4398,14 +4613,14 @@ let p = class extends E {
                           </button>
                         </div>`}
                 </div>
-              </div>` : o}
+              </div>` : n}
         ${this.error("mfa")}
         <div class="separator"></div>
         <div class="toggle-row">
           <div class="row-main">
             <span class="row-title"
               >${l.smartphone} ${this.t("authenticatorApp")}
-              ${t ? this.verifiedBadge(!0) : o}</span
+              ${t ? this.verifiedBadge(!0) : n}</span
             >
           </div>
           ${t ? this.confirmRemoveAuthenticator ? r`<div class="inline">
@@ -4428,7 +4643,7 @@ let p = class extends E {
                     ?disabled=${!!this.busy}
                   >
                     ${this.spinner("remove-authenticator")} ${this.t("remove")}
-                  </button>` : this.authenticator ? o : r`<button
+                  </button>` : this.authenticator ? n : r`<button
                     class="btn btn-outline btn-sm"
                     @click=${this.onAddAuthenticator}
                     ?disabled=${!!this.busy}
@@ -4483,7 +4698,7 @@ let p = class extends E {
                     ${this.t("cancel")}
                   </button>
                 </div>
-              </form>` : o}
+              </form>` : n}
       </div>`
     );
   }
@@ -4537,7 +4752,7 @@ let p = class extends E {
                           ?disabled=${!!this.busy}
                         >
                           ${l.refresh} ${this.t("regenerateRecoveryCodes")}
-                        </button>` : o}
+                        </button>` : n}
               </div>`}
         ${this.error("recovery")}
       </div>`
@@ -4626,15 +4841,19 @@ let p = class extends E {
       this.t("sessions"),
       void 0,
       r`${this.error("sessions")}
-        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noSessions")}</div>` : e.map(
+        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
+        l.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>` : o}
-                            ${t.current ? r`<span class="badge badge-info">${this.t("currentSession")}</span>` : o}
+                            ${t.clientVersion ? r`<span class="muted small">${t.clientVersion}</span>` : n}
+                            ${t.current ? r`<span class="badge badge-info">${this.t("currentSession")}</span>` : n}
                           </span>
                           <span class="row-sub"
                             >${[t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
@@ -4642,7 +4861,7 @@ let p = class extends E {
                         </div>
                       </div>
                       <div class="row-actions">
-                        ${this.busy === `session-${t.$id}` ? r`<span class="spinner"></span>` : o}
+                        ${this.busy === `session-${t.$id}` ? r`<span class="spinner"></span>` : n}
                         <button
                           class="btn btn-ghost btn-sm"
                           @click=${() => this.onDeleteSession(t.$id)}
@@ -4658,29 +4877,24 @@ let p = class extends E {
       ${this.card(
       this.t("signOutAllSessions"),
       this.t("signOutAllSessionsDescription"),
-      r`${this.error("sessions-all")}
-        ${this.confirmSignOutAll ? r`<div class="inline">
-                <button
-                  class="btn btn-outline btn-sm warn"
-                  @click=${this.onSignOutAll}
-                  ?disabled=${!!this.busy}
-                >
-                  ${this.spinner("sessions-all")} ${l.logOut} ${this.t("signOutAllSessions")}
-                </button>
-                <button
-                  class="btn btn-ghost btn-sm"
-                  @click=${() => this.confirmSignOutAll = !1}
-                >
-                  ${this.t("cancel")}
-                </button>
-              </div>` : r`<button
+      this.confirmSignOutAll ? this.error("sessions-all") : r`${this.error("sessions-all")}
+              <button
                 class="btn btn-outline btn-sm warn"
                 @click=${this.onSignOutAll}
                 ?disabled=${!!this.busy}
               >
                 ${this.spinner("sessions-all")} ${l.logOut} ${this.t("signOutAllSessions")}
-              </button>`}`,
-      void 0,
+              </button>`,
+      this.confirmSignOutAll ? this.confirmFooter(
+        () => {
+          this.confirmSignOutAll = !1;
+        },
+        () => {
+          this.onSignOutAll();
+        },
+        this.t("signOutAllSessions"),
+        "sessions-all"
+      ) : void 0,
       !0
     )}
     </div>`;
@@ -4693,37 +4907,45 @@ let p = class extends E {
       this.t("connections"),
       void 0,
       r`${this.error("identities")}
-        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noConnections")}</div>` : e.map(
+        ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
+        l.link,
+        this.t("noConnections"),
+        this.t("noConnectionsDescription")
+      ) : e.map(
         (i) => r`<div class="row">
                       <div class="inline">
-                        <span class="device">${et(i.provider)}</span>
+                        <span class="device">${Y(i.provider)}</span>
                         <div class="row-main">
-                          <span class="row-title">${q(i.provider)}</span>
+                          <span class="row-title">${W(i.provider)}</span>
                           <span class="row-sub">${i.providerEmail || i.providerUid}</span>
                         </div>
                       </div>
                       <div class="row-actions">
                         ${this.confirmDisconnectId === i.$id ? r`<div class="inline">
                                 <button
-                                  class="btn btn-outline btn-sm warn"
-                                  @click=${() => this.onDeleteIdentity(i.$id)}
+                                  type="button"
+                                  class="btn btn-outline btn-sm"
+                                  autofocus
                                   ?disabled=${!!this.busy}
+                                  @click=${() => this.confirmDisconnectId = null}
                                 >
-                                  ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : o}
-                                  ${this.t("disconnect")}
+                                  ${this.t("cancel")}
                                 </button>
                                 <button
-                                  class="btn btn-ghost btn-sm"
-                                  @click=${() => this.confirmDisconnectId = null}
+                                  type="button"
+                                  class="btn btn-destructive btn-sm"
+                                  @click=${() => this.onDeleteIdentity(i.$id)}
+                                  ?disabled=${!!this.busy}
                                 >
-                                  ${this.t("cancel")}
+                                  ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : n}
+                                  ${this.t("disconnect")}
                                 </button>
                               </div>` : r`<button
                                 class="btn btn-ghost btn-sm"
                                 @click=${() => this.onDeleteIdentity(i.$id)}
                                 ?disabled=${!!this.busy}
                               >
-                                ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : o}
+                                ${this.busy === `identity-${i.$id}` ? r`<span class="spinner"></span>` : n}
                                 ${this.t("disconnect")}
                               </button>`}
                       </div>
@@ -4733,12 +4955,12 @@ let p = class extends E {
         (i) => r`<button
                     class="btn btn-outline btn-sm"
                     @click=${() => {
-          this.run(`connect-${i}`, () => n.signInWithOAuth(i));
+          this.run(`connect-${i}`, () => o.signInWithOAuth(i));
         }}
                     ?disabled=${!!this.busy}
                   >
-                    ${this.spinner(`connect-${i}`)} ${et(i)}
-                    ${this.t("connectProvider", { provider: q(i) })}
+                    ${this.spinner(`connect-${i}`)} ${Y(i)}
+                    ${this.t("connectProvider", { provider: W(i) })}
                   </button>`
       )}` : void 0
     )}
@@ -4751,7 +4973,11 @@ let p = class extends E {
       ${this.card(
       this.t("activity"),
       void 0,
-      r`${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? r`<div class="empty">${this.t("noActivity")}</div>` : e.map(
+      r`${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
+        l.activity,
+        this.t("noActivity"),
+        this.t("noActivityDescription")
+      ) : e.map(
         (t) => r`<div class="row">
                       <div class="row-main">
                         <span class="row-title">${t.event}</span>
@@ -4967,7 +5193,7 @@ m([
   d()
 ], p.prototype, "verifyEmailCooldownUntil", 2);
 p = m([
-  R("authui-account")
+  T("authui-account")
 ], p);
 var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Qt(t, i) : t, c = e.length - 1, u; c >= 0; c--)
@@ -5062,7 +5288,7 @@ let P = class extends E {
             ${this.open ? t ? r`<authui-account embedded></authui-account>` : r`<authui-sign-in
                       embedded
                       .view=${this.view === "account" ? "sign-in" : this.view}
-                    ></authui-sign-in>` : o}
+                    ></authui-sign-in>` : n}
           </div>
           <div class="scroll-fade ${this.scrollCue ? "show" : ""}" aria-hidden="true"></div>
         </div>
@@ -5182,9 +5408,9 @@ F([
   st(".body")
 ], P.prototype, "bodyEl", 2);
 P = F([
-  R("authui-modal")
+  T("authui-modal")
 ], P);
-var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, X = (e, t, i, s) => {
+var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, Q = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? te(t, i) : t, c = e.length - 1, u; c >= 0; c--)
     (u = e[c]) && (a = (s ? u(t, i, a) : u(a)) || a);
   return s && a && Jt(t, i, a), a;
@@ -5197,7 +5423,7 @@ let L = class extends E {
     const e = this.size === "md" ? "" : `btn-${this.size}`;
     return r`<button
       class="btn btn-${this.variant} ${e}"
-      @click=${() => Y(this.view)}
+      @click=${() => Z(this.view)}
       part="button"
     >
       <slot
@@ -5217,19 +5443,19 @@ L.styles = [
       }
     `
 ];
-X([
+Q([
   g({ type: String })
 ], L.prototype, "view", 2);
-X([
+Q([
   g({ type: String })
 ], L.prototype, "variant", 2);
-X([
+Q([
   g({ type: String })
 ], L.prototype, "size", 2);
-L = X([
-  R("authui-button")
+L = Q([
+  T("authui-button")
 ], L);
-var ee = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, T = (e, t, i, s) => {
+var ee = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ie(t, i) : t, c = e.length - 1, u; c >= 0; c--)
     (u = e[c]) && (a = (s ? u(t, i, a) : u(a)) || a);
   return s && a && ee(t, i, a), a;
@@ -5258,7 +5484,7 @@ let I = class extends E {
     }, this.toggleMenu = () => {
       this.menuOpen = !this.menuOpen, this.menuOpen && this.showTeams && this.loadTeams();
     }, this.selectTeam = (e) => {
-      n.setActiveTeam({ $id: e.$id, name: e.name }), this.activeTeamId = e.$id, this.dispatchEvent(
+      o.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,
@@ -5279,9 +5505,9 @@ let I = class extends E {
     if (!e || !t) return;
     const i = e.getBoundingClientRect(), s = 6, a = 8;
     t.style.maxHeight = "";
-    const c = t.offsetHeight + s, u = window.innerHeight - i.bottom, $ = i.top, x = u < c && $ > u;
-    x !== this.menuAbove && (this.menuAbove = x);
-    const ot = Math.max(80, (x ? $ : u) - s - a);
+    const c = t.offsetHeight + s, u = window.innerHeight - i.bottom, b = i.top, $ = u < c && b > u;
+    $ !== this.menuAbove && (this.menuAbove = $);
+    const ot = Math.max(80, ($ ? b : u) - s - a);
     t.style.maxHeight = `${ot}px`;
   }
   focusMenuItem(e) {
@@ -5295,9 +5521,9 @@ let I = class extends E {
     })) : this.menuAbove = !1), this.menuOpen && (e.has("teams") || e.has("teamsLoading")) && requestAnimationFrame(() => this.placeMenu());
   }
   async loadTeams() {
-    this.teamsLoading = !0, this.activeTeamId = n.getActiveTeamId();
+    this.teamsLoading = !0, this.activeTeamId = o.getActiveTeamId();
     try {
-      this.teams = await n.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, n.setActiveTeam(null));
+      this.teams = await o.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, o.setActiveTeam(null));
     } catch {
       this.teams = [];
     } finally {
@@ -5309,7 +5535,7 @@ let I = 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=${() => Y("sign-in")}>
+      return r`<button class="btn btn-primary btn-sm" @click=${() => Z("sign-in")}>
         <slot>${this.t("signIn")}</slot>
       </button>`;
     const s = t.name || t.email || t.phone || this.t("guestAccount");
@@ -5328,7 +5554,7 @@ let I = class extends E {
       ${this.menuOpen ? r`<div class="menu ${this.menuAbove ? "above" : ""}" role="menu">
               <div class="menu-header">
                 <span class="row-title" title=${s}>${s}</span>
-                ${t.email && t.name ? r`<span class="row-sub" title=${t.email}>${t.email}</span>` : o}
+                ${t.email && t.name ? r`<span class="row-sub" title=${t.email}>${t.email}</span>` : n}
               </div>
               ${this.showTeams ? r`<div class="menu-section">
                       <div class="menu-section-label">${this.t("teamsLabel")}</div>
@@ -5343,15 +5569,15 @@ let I = class extends E {
                                   >
                                     ${l.users}
                                     <span title=${a.name}>${a.name}</span>
-                                    ${a.$id === this.activeTeamId ? r`<span class="check">${l.check}</span>` : o}
+                                    ${a.$id === this.activeTeamId ? r`<span class="check">${l.check}</span>` : n}
                                   </button>`
     )}
-                    </div>` : o}
+                    </div>` : n}
               <button
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, Y("account");
+      this.menuOpen = !1, Z("account");
     }}
               >
                 ${l.settings} ${this.t("manageAccount")}
@@ -5360,12 +5586,12 @@ let I = class extends E {
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, n.signOut();
+      this.menuOpen = !1, o.signOut();
     }}
               >
                 ${l.logOut} ${this.t("signOut")}
               </button>
-            </div>` : o}
+            </div>` : n}
     `;
   }
 };
@@ -5487,29 +5713,29 @@ I.styles = [
       }
     `
 ];
-T([
+R([
   g({ type: Boolean, attribute: "show-teams" })
 ], I.prototype, "showTeams", 2);
-T([
+R([
   g({ type: String })
 ], I.prototype, "src", 2);
-T([
+R([
   d()
 ], I.prototype, "menuOpen", 2);
-T([
+R([
   d()
 ], I.prototype, "menuAbove", 2);
-T([
+R([
   d()
 ], I.prototype, "teams", 2);
-T([
+R([
   d()
 ], I.prototype, "teamsLoading", 2);
-T([
+R([
   d()
 ], I.prototype, "activeTeamId", 2);
-I = T([
-  R("authui-user-button")
+I = R([
+  T("authui-user-button")
 ], I);
 export {
   Ft as A,
@@ -5517,29 +5743,29 @@ export {
   f as E,
   bt as F,
   It as P,
-  n as a,
+  o as a,
   p as b,
   le as c,
   L as d,
-  b as e,
+  y as e,
   E as f,
   P as g,
-  B as h,
+  N as h,
   k as i,
   I as j,
   ne as k,
   pt as l,
   Ct as m,
   K as n,
-  Y as o,
-  D as p,
+  Z as o,
+  z as p,
   ut as q,
   Ut as r,
-  q as s,
+  W as s,
   V as t,
   wt as u,
   it as v,
   Mt as w,
   Ot as x,
-  z as y
+  _ as y
 };