@getauthui/core 0.1.12 → 0.1.14

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

@@ -1,7 +1,7 @@
-import { state as c, property as m, customElement as L, query as at } from "lit/decorators.js";
-import { css as T, LitElement as nt, nothing as n, html as r, svg as u } from "lit";
-import { Client as ct, Account as dt, Teams as kt, ID as W, Avatars as Ct } from "appwrite";
-const St = {
+import { state as c, property as m, customElement as D, query as nt } from "lit/decorators.js";
+import { css as T, LitElement as ot, nothing as n, html as r, svg as u } from "lit";
+import { Client as dt, Account as ht, Teams as Ct, ID as G, Avatars as St } from "appwrite";
+const At = {
   signIn: "Sign in",
   dialogSignIn: "Sign in",
   signUp: "Sign up",
@@ -175,13 +175,13 @@ const St = {
   acceptLegal: "I agree to the",
   errorLegalRequired: "Accept the terms to continue."
 };
-function At(e, t = {}) {
+function Pt(e, t = {}) {
   return e.replace(
     /\{(\w+)\}/g,
     (i, s) => s in t ? String(t[s]) : `{${s}}`
   );
 }
-const Pt = {
+const Ut = {
   amazon: "Amazon",
   apple: "Apple",
   appwrite: "Appwrite",
@@ -232,10 +232,10 @@ const Pt = {
   zoho: "Zoho",
   zoom: "Zoom"
 };
-function N(e) {
-  return Pt[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
+function B(e) {
+  return Ut[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
 }
-const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), P = () => (/* @__PURE__ */ new Date()).toISOString(), M = (e) => new Date(Date.now() - e * 6e4).toISOString(), G = [
+const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), P = () => (/* @__PURE__ */ new Date()).toISOString(), M = (e) => new Date(Date.now() - e * 6e4).toISOString(), Y = [
   "amber",
   "brave",
   "calm",
@@ -248,13 +248,13 @@ const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
   "juniper",
   "kite",
   "lumen"
-], ht = () => `${G[Math.floor(Math.random() * G.length)]}-${G[Math.floor(Math.random() * G.length)]}`, D = () => Math.random().toString(36).slice(2, 12), ut = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Ut = {
+], ut = () => `${Y[Math.floor(Math.random() * Y.length)]}-${Y[Math.floor(Math.random() * Y.length)]}`, z = () => Math.random().toString(36).slice(2, 12), pt = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), It = {
   name: "Ada Lovelace",
   email: "ada@example.com",
   phone: "+15550100"
 };
-class It {
-  constructor(t = Ut) {
+class Et {
+  constructor(t = It) {
     this.seed = t, this.user = null, this.mfaPending = !1, this.mfaEnabled = !1, this.totpEnrolled = !1, this.recoveryCodes = [], this.lastChallenge = 0, this.sessions = [], this.identities = [], this.logs = [], this.tokens = /* @__PURE__ */ new Map(), this.pendingAuthenticator = null;
   }
   // ───────────────────────── helpers ─────────────────────────
@@ -318,7 +318,7 @@ class It {
       },
       {
         ...i,
-        $id: D(),
+        $id: z(),
         $createdAt: M(300),
         provider: t,
         ip: "198.51.100.7",
@@ -335,7 +335,7 @@ class It {
       },
       {
         ...i,
-        $id: D(),
+        $id: z(),
         $createdAt: M(1440 * 3),
         provider: "oauth2",
         ip: "192.0.2.90",
@@ -436,26 +436,26 @@ class It {
   }
   async createMagicURLToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: D(),
+      $id: z(),
       $createdAt: P(),
       userId: t,
       secret: "",
       expire: "",
-      phrase: ht()
+      phrase: ut()
     });
   }
   async createEmailToken(t, i) {
     return this.tokens.set(t, { email: i }), this.delay({
-      $id: D(),
+      $id: z(),
       $createdAt: P(),
       userId: t,
       secret: "",
       expire: "",
-      phrase: ht()
+      phrase: ut()
     });
   }
   async createPhoneToken(t, i) {
-    return this.tokens.set(t, { phone: i }), this.delay({ $id: D(), $createdAt: P(), userId: t, secret: "", expire: "", phrase: "" });
+    return this.tokens.set(t, { phone: i }), this.delay({ $id: z(), $createdAt: P(), userId: t, secret: "", expire: "", phrase: "" });
   }
   async createSession(t) {
     return this.delay(() => {
@@ -547,7 +547,7 @@ class It {
     });
   }
   async createMFAChallenge() {
-    return this.delay({ $id: D(), $createdAt: P(), userId: "preview-user", expire: "" });
+    return this.delay({ $id: z(), $createdAt: P(), userId: "preview-user", expire: "" });
   }
   async updateMFAChallenge() {
     return this.delay(() => (this.mfaPending = !1, this.lastChallenge = Date.now(), this.sessions[0]));
@@ -577,21 +577,21 @@ class It {
     return this.delay(() => {
       if (this.recoveryCodes.length > 0)
         throw K("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
-      return this.recoveryCodes = Array.from({ length: 6 }, ut), { recoveryCodes: this.recoveryCodes };
+      return this.recoveryCodes = Array.from({ length: 6 }, pt), { recoveryCodes: this.recoveryCodes };
     });
   }
   async getMFARecoveryCodes() {
     return this.delay(() => (this.requireRecentChallenge(), { recoveryCodes: this.recoveryCodes }));
   }
   async updateMFARecoveryCodes() {
-    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, ut), { recoveryCodes: this.recoveryCodes }));
+    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, pt), { recoveryCodes: this.recoveryCodes }));
   }
   /** Forget everything, as a sign out would. */
   reset() {
     this.user = null, this.mfaPending = !1, this.sessions = [], this.identities = [], this.logs = [], this.tokens.clear();
   }
 }
-function Et(e) {
+function Mt(e) {
   let t = 2166136261;
   const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
   for (const g of e) t = (t ^ g.charCodeAt(0)) * 16777619;
@@ -639,7 +639,7 @@ const v = {
   targetAlreadyExists: "user_target_already_exists",
   argumentInvalid: "general_argument_invalid"
 };
-function q(e) {
+function V(e) {
   if (e && typeof e == "object") {
     const t = e;
     let i = typeof t.message == "string" ? t.message : "Unknown error";
@@ -651,11 +651,11 @@ function q(e) {
   }
   return { message: String(e), type: "", code: 0 };
 }
-function j(e, t) {
-  return q(e).type === t;
+function H(e, t) {
+  return V(e).type === t;
 }
-function Y(e, t, i = "link") {
-  const s = q(e);
+function Z(e, t, i = "link") {
+  const s = V(e);
   switch (s.type) {
     case v.invalidCredentials:
       return i === "password" ? t.errorCurrentPassword : t.errorInvalidCredentials;
@@ -697,73 +697,73 @@ function Y(e, t, i = "link") {
   }
   return s.type === v.projectNotFound || s.type === v.unknownOrigin ? t.errorConfig : s.type === v.routeNotFound ? t.errorConfigEndpoint : s.code === 0 && /fetch|network/i.test(s.message) ? t.errorNetwork : /Invalid `\w+` param/i.test(s.message) ? t.errorGeneric : s.message ? s.message || t.errorGeneric : s.code === 404 || s.type === v.routeNotFound ? t.errorConfigEndpoint : t.errorGeneric;
 }
-function Mt(e) {
-  const t = q(e);
+function Ot(e) {
+  const t = V(e);
   return !!(t.type === v.projectNotFound || t.type === v.unknownOrigin || t.type === v.routeNotFound || !t.message && t.code === 404 || t.code === 0 && /fetch|network|load failed|failed to fetch/i.test(t.message));
 }
-const et = (e) => `authui:active-team:${e}`;
-function pt(e) {
+const it = (e) => `authui:active-team:${e}`;
+function ft(e) {
   if (typeof localStorage > "u" || !e) return null;
   try {
-    return localStorage.getItem(et(e));
+    return localStorage.getItem(it(e));
   } catch {
     return null;
   }
 }
-function Ot(e, t) {
+function Ft(e, t) {
   if (!(typeof localStorage > "u" || !e))
     try {
-      t ? localStorage.setItem(et(e), t) : localStorage.removeItem(et(e));
+      t ? localStorage.setItem(it(e), t) : localStorage.removeItem(it(e));
     } catch {
     }
 }
-const ot = "authui:last-method";
-function _(e) {
+const lt = "authui:last-method";
+function q(e) {
   if (!(typeof localStorage > "u")) {
     if (!e || e === "mfa" || e === "sign-up")
       if (e === "sign-up") e = "email-password";
       else return;
     try {
-      localStorage.setItem(ot, e);
+      localStorage.setItem(lt, e);
     } catch {
     }
   }
 }
-function z() {
+function _() {
   if (typeof localStorage > "u") return null;
   try {
-    return localStorage.getItem(ot);
+    return localStorage.getItem(lt);
   } catch {
     return null;
   }
 }
-function le() {
+function ce() {
   if (!(typeof localStorage > "u"))
     try {
-      localStorage.removeItem(ot);
+      localStorage.removeItem(lt);
     } catch {
     }
 }
-const Z = "authui:pending-oauth";
-function Ft(e) {
+const X = "authui:pending-oauth";
+function Rt(e) {
   if (!(typeof sessionStorage > "u"))
     try {
-      sessionStorage.setItem(Z, e);
+      sessionStorage.setItem(X, e);
     } catch {
     }
 }
-function $t() {
+function xt() {
   if (!(typeof sessionStorage > "u"))
     try {
-      const e = sessionStorage.getItem(Z);
-      sessionStorage.removeItem(Z), e && _(`oauth:${e}`);
+      const e = sessionStorage.getItem(X);
+      sessionStorage.removeItem(X), e && q(`oauth:${e}`);
     } catch {
     }
 }
-function ft() {
+function mt() {
   if (!(typeof sessionStorage > "u"))
     try {
-      sessionStorage.removeItem(Z);
+      sessionStorage.removeItem(X);
     } catch {
     }
 }
@@ -777,7 +777,7 @@ function A(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const it = "authui", mt = ["userId", "secret", "expire", "project", "error", it], gt = () => ({
+const st = "authui", gt = ["userId", "secret", "expire", "project", "error", st], vt = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
@@ -787,7 +787,7 @@ const it = "authui", mt = ["userId", "secret", "expire", "project", "error", it]
 });
 class Tt {
   constructor() {
-    this.client = null, this.account = null, this.config = null, this.state = gt(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null, this.teams = null, this.activeTeamId = null;
+    this.client = null, this.account = null, this.config = null, this.state = vt(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = null, this.teams = null, this.activeTeamId = null;
   }
   // ───────────────────────────── configuration ─────────────────────────────
   /** Configure the Appwrite client. Safe to call more than once; the last call wins. */
@@ -795,7 +795,7 @@ class Tt {
     const i = t.endpoint.trim().replace(/\/+$/, "");
     i && !i.endsWith("/v1") && console.warn(
       `[authui] endpoint should end with /v1 (got "${t.endpoint}"). Without it Appwrite returns HTML 404 pages.`
-    ), this.config = t, this.client = new ct().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new It() : null, this.account = this.preview ? this.preview : new dt(this.client), this.teams = null, this.activeTeamId = pt(t.project), this.setState({ configured: !0, status: "loading", configError: null }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
+    ), this.config = t, this.client = new dt().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new Et() : null, this.account = this.preview ? this.preview : new ht(this.client), this.teams = null, this.activeTeamId = ft(t.project), this.setState({ configured: !0, status: "loading", configError: null }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
   }
   /**
    * Called by <authui-config> when it is on the page but missing endpoint or project.
@@ -841,7 +841,7 @@ class Tt {
   /** List teams the signed-in user belongs to. Empty in preview or when signed out. */
   async listTeams() {
     if (this.preview || !this.client || this.state.status !== "signed-in") return [];
-    this.teams ??= new kt(this.client);
+    this.teams ??= new Ct(this.client);
     try {
       return (await this.teams.list()).teams ?? [];
     } catch (t) {
@@ -851,7 +851,7 @@ class Tt {
   getActiveTeamId() {
     if (this.activeTeamId) return this.activeTeamId;
     const t = this.config?.project;
-    return t ? (this.activeTeamId = pt(t), this.activeTeamId) : null;
+    return t ? (this.activeTeamId = ft(t), this.activeTeamId) : null;
   }
   /**
    * Remember the active team locally and emit `active-team`.
@@ -859,10 +859,10 @@ class Tt {
    */
   setActiveTeam(t) {
     const i = this.config?.project;
-    i && Ot(i, t?.$id ?? null), this.activeTeamId = t?.$id ?? null, this.emit("active-team", { teamId: this.activeTeamId, team: t });
+    i && Ft(i, t?.$id ?? null), this.activeTeamId = t?.$id ?? null, this.emit("active-team", { teamId: this.activeTeamId, team: t });
   }
   getStrings() {
-    return { ...St, ...this.config?.strings ?? {} };
+    return { ...At, ...this.config?.strings ?? {} };
   }
   getState() {
     return { ...this.state };
@@ -888,7 +888,7 @@ class Tt {
     this.state = { ...this.state, ...t }, this.emit("change", this.getState());
   }
   fail(t) {
-    const i = q(t);
+    const i = V(t);
     throw this.emit("error", i), t;
   }
   acct() {
@@ -908,7 +908,7 @@ class Tt {
         const i = await this.account.get();
         this.setState({ status: "signed-in", user: i, mfaFactors: null, configError: null }), t || this.emit("signed-in", i);
       } catch (i) {
-        if (j(i, v.moreFactorsRequired)) {
+        if (H(i, v.moreFactorsRequired)) {
           let s = null;
           try {
             s = await A(
@@ -919,7 +919,7 @@ class Tt {
           } catch {
           }
           this.setState({ status: "mfa-required", user: null, mfaFactors: s });
-        } else if (j(i, v.userBlocked))
+        } else if (H(i, v.userBlocked))
           await this.purgeLocalSession(), this.setState({
             status: "signed-out",
             user: null,
@@ -930,12 +930,12 @@ class Tt {
               message: this.getStrings().errorUserBlocked
             }
           }), t && this.emit("signed-out", void 0);
-        else if (!t && Mt(i)) {
-          const a = Y(i, this.getStrings()) || this.getStrings().errorConfig;
+        else if (!t && Ot(i)) {
+          const a = Z(i, this.getStrings()) || this.getStrings().errorConfig;
           console.warn(
             `[authui] ${a} (endpoint=${this.config?.endpoint ?? "?"}, project=${this.config?.project ?? "?"})`
           );
-          const h = q(i);
+          const h = V(i);
           this.emit("error", { message: a, type: h.type, code: h.code }), this.setState({
             status: "signed-out",
             user: null,
@@ -980,7 +980,7 @@ class Tt {
         localStorage.removeItem("cookieFallback");
       } catch {
       }
-    this.config && !this.preview && (this.client = new ct().setEndpoint(this.config.endpoint).setProject(this.config.project), this.account = new dt(this.client));
+    this.config && !this.preview && (this.client = new dt().setEndpoint(this.config.endpoint).setProject(this.config.project), this.account = new ht(this.client));
   }
   // ─────────────────────────────── sign in ───────────────────────────────
   async signInWithEmailPassword(t, i) {
@@ -993,7 +993,7 @@ class Tt {
   }
   async signUp(t, i, s) {
     try {
-      await this.acct().create(W.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
+      await this.acct().create(G.unique(), t.trim(), i, s?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
     } catch (a) {
       this.fail(a);
     }
@@ -1036,7 +1036,7 @@ class Tt {
   async sendMagicUrl(t) {
     try {
       return await this.acct().createMagicURLToken(
-        W.unique(),
+        G.unique(),
         t.trim(),
         this.redirectUrl("magic-url"),
         this.config?.securityPhrase ?? !0
@@ -1048,7 +1048,7 @@ class Tt {
   async sendEmailOtp(t) {
     try {
       return await this.acct().createEmailToken(
-        W.unique(),
+        G.unique(),
         t.trim(),
         this.config?.securityPhrase ?? !0
       );
@@ -1058,7 +1058,7 @@ class Tt {
   }
   async sendPhoneOtp(t) {
     try {
-      return await this.acct().createPhoneToken(W.unique(), t.replace(/[\s()-]/g, ""));
+      return await this.acct().createPhoneToken(G.unique(), t.replace(/[\s()-]/g, ""));
     } catch (i) {
       return this.fail(i);
     }
@@ -1332,8 +1332,8 @@ class Tt {
   /** Build the URL Appwrite should send the user back to for a given flow. */
   redirectUrl(t) {
     const i = this.config?.redirectUrl ?? (typeof window < "u" ? window.location.origin + window.location.pathname : ""), s = new URL(i, typeof window < "u" ? window.location.href : void 0);
-    for (const a of mt) s.searchParams.delete(a);
-    return s.searchParams.set(it, t), s.toString();
+    for (const a of gt) s.searchParams.delete(a);
+    return s.searchParams.set(st, t), s.toString();
   }
   setPending(t) {
     this.setState({ pending: t });
@@ -1344,7 +1344,7 @@ class Tt {
    */
   async handleRedirect() {
     if (typeof window > "u") return !1;
-    const t = new URLSearchParams(window.location.search), i = t.get(it);
+    const t = new URLSearchParams(window.location.search), i = t.get(st);
     if (!i) return !1;
     const s = t.get("userId") ?? "", a = t.get("secret") ?? "";
     this.cleanUrl();
@@ -1361,10 +1361,10 @@ class Tt {
       switch (i) {
         case "oauth":
         case "magic-url":
-          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? $t() : _("magic-url")) : (i === "oauth" && ft(), h());
+          s && a ? (await this.acct().createSession(s, a), i === "oauth" ? xt() : q("magic-url")) : (i === "oauth" && mt(), h());
           break;
         case "oauth-failed":
-          ft(), this.setState({
+          mt(), this.setState({
             pending: {
               type: "notice",
               tone: "error",
@@ -1390,23 +1390,23 @@ class Tt {
           break;
       }
     } catch (d) {
-      const g = q(d), y = Y(d, this.getStrings(), "link");
+      const g = V(d), y = Z(d, this.getStrings(), "link");
       this.emit("error", g), this.setState({ pending: { type: "notice", message: y, tone: "error" } });
     }
     return !0;
   }
   cleanUrl() {
     const t = new URL(window.location.href);
-    for (const i of mt) t.searchParams.delete(i);
+    for (const i of gt) t.searchParams.delete(i);
     window.history.replaceState(window.history.state, "", t.toString());
   }
   /** Test helper. */
   reset() {
-    this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = gt(), this.listeners.clear();
+    this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = vt(), this.listeners.clear();
   }
 }
 const l = new Tt();
-class Rt {
+class Lt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
       const t = this.isDark("auto");
@@ -1434,14 +1434,14 @@ class Rt {
     this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
   }
 }
-const vt = new Rt(), bt = {
+const bt = new Lt(), yt = {
   none: "0px",
   sm: "0.25rem",
   md: "0.625rem",
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, Lt = T`
+}, Dt = T`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -1462,7 +1462,8 @@ const vt = new Rt(), bt = {
     --authui-destructive-foreground: oklch(0.577 0.245 27.325);
     --authui-border: oklch(0.93 0.0035 286.32);
     --authui-input: oklch(0.93 0.0035 286.32);
-    --authui-ring: oklch(0.898 0.004 286.286);
+    /* Raised on white for WCAG 1.4.11 / 2.4.7 (~3:1+) UI contrast; zinc-500 */
+    --authui-ring: #71717a;
     --authui-brand: #fd366e;
     --authui-brand-foreground: #ffffff;
     --authui-success: oklch(0.696 0.17 162.48);
@@ -1508,9 +1509,10 @@ const vt = new Rt(), bt = {
     --authui-accent-foreground: oklch(0.985 0 0);
     --authui-destructive: oklch(0.396 0.141 25.723);
     --authui-destructive-foreground: oklch(0.637 0.237 25.331);
-    --authui-border: oklch(0.252 0.005 286.32);
-    --authui-input: #2d2d31;
-    --authui-ring: oklch(0.448 0.015 285.786);
+    /* Raised vs card (#1d1d21) for WCAG 1.4.11 (~3:1) UI contrast */
+    --authui-border: #71717a;
+    --authui-input: #71717a;
+    --authui-ring: #a1a1aa;
     --authui-success-foreground: #34d399;
     --authui-warning-foreground: #fbbf24;
     --authui-error-foreground: #f87171;
@@ -1519,7 +1521,7 @@ const vt = new Rt(), bt = {
     --authui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
     color-scheme: dark;
   }
-`, Dt = T`
+`, zt = T`
   *,
   *::before,
   *::after {
@@ -1719,6 +1721,32 @@ const vt = new Rt(), bt = {
     justify-content: space-between;
     gap: 8px;
   }
+  /* Forgot after password in DOM (tab order); grid keeps it visually beside the label */
+  .field-with-forgot {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "label forgot"
+      "input input"
+      "meta meta";
+    column-gap: 8px;
+    row-gap: 6px;
+    align-items: center;
+  }
+  .field-with-forgot > .label {
+    grid-area: label;
+  }
+  .field-with-forgot > .field-forgot {
+    grid-area: forgot;
+    justify-self: end;
+  }
+  .field-with-forgot > .input-wrap {
+    grid-area: input;
+  }
+  .field-with-forgot > .hint,
+  .field-with-forgot > .strength {
+    grid-area: meta;
+  }
   .label {
     font-size: 14px;
     line-height: 1;
@@ -1727,7 +1755,8 @@ const vt = new Rt(), bt = {
   }
   .input {
     font: inherit;
-    font-size: 14px;
+    /* 16px avoids iOS Safari auto-zoom on focus */
+    font-size: 16px;
     height: 36px;
     width: 100%;
     min-width: 0;
@@ -1802,8 +1831,9 @@ const vt = new Rt(), bt = {
     background: var(--authui-muted);
     transition: background-color 120ms ease;
   }
+  /* destructive-foreground matches light destructive and stays visible on dark card */
   .strength-meter[data-level="1"] span:nth-child(-n + 1) {
-    background: var(--authui-destructive);
+    background: var(--authui-destructive-foreground);
   }
   .strength-meter[data-level="2"] span:nth-child(-n + 2) {
     background: var(--authui-warning-foreground);
@@ -1819,6 +1849,19 @@ const vt = new Rt(), bt = {
     color: var(--authui-muted-foreground);
     margin: 0;
   }
+  :host([data-theme="dark"]) .strength-meter span {
+    background: var(--authui-border);
+  }
+  :host([data-theme="dark"]) .strength-meter[data-level="1"] span:nth-child(-n + 1) {
+    background: var(--authui-destructive-foreground);
+  }
+  :host([data-theme="dark"]) .strength-meter[data-level="2"] span:nth-child(-n + 2),
+  :host([data-theme="dark"]) .strength-meter[data-level="3"] span:nth-child(-n + 3) {
+    background: var(--authui-warning-foreground);
+  }
+  :host([data-theme="dark"]) .strength-meter[data-level="4"] span {
+    background: var(--authui-success);
+  }
 
   .btn.last-used {
     border-color: var(--authui-brand);
@@ -1969,7 +2012,7 @@ const vt = new Rt(), bt = {
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
-    height: 36px;
+    height: 44px;
     width: fit-content;
     max-width: 100%;
     overflow-x: auto;
@@ -1980,6 +2023,14 @@ const vt = new Rt(), bt = {
     gap: 2px;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
+    /* Subtle right-edge fade as overflow cue at narrow widths */
+    -webkit-mask-image: linear-gradient(
+      to right,
+      #000 0%,
+      #000 calc(100% - 28px),
+      transparent 100%
+    );
+    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
   }
   :host([data-theme="dark"]) .tabs {
     background: color-mix(in oklab, var(--authui-muted) 80%, transparent);
@@ -1990,8 +2041,9 @@ const vt = new Rt(), bt = {
     justify-content: center;
     gap: 6px;
     height: 100%;
+    min-height: 38px;
     flex: 0 0 auto;
-    padding: 4px 10px;
+    padding: 8px 12px;
     border-radius: var(--authui-radius-md);
     border: 1px solid transparent;
     background: transparent;
@@ -2522,12 +2574,12 @@ const vt = new Rt(), bt = {
     }
   }
 `;
-var zt = Object.defineProperty, _t = (e, t, i, s) => {
+var _t = Object.defineProperty, qt = (e, t, i, s) => {
   for (var a = void 0, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = d(t, i, a) || a);
-  return a && zt(t, i, a), a;
+  return a && _t(t, i, a), a;
 }, O;
-const xt = (O = class extends nt {
+const kt = (O = class extends ot {
   constructor() {
     super(...arguments), this.auth = l.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
   }
@@ -2536,7 +2588,7 @@ const xt = (O = class extends nt {
     for (const t of O.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
     this.auth = l.getState(), this.unsubscribeStore = l.on("change", (t) => {
       this.auth = t, this.applyBranding();
-    }), this.unsubscribeTheme = vt.subscribe(() => this.applyBranding()), this.applyBranding();
+    }), this.unsubscribeTheme = bt.subscribe(() => this.applyBranding()), this.applyBranding();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -2548,7 +2600,7 @@ const xt = (O = class extends nt {
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
-    return At(this.strings[t], i);
+    return Pt(this.strings[t], i);
   }
   get config() {
     return l.getConfig();
@@ -2558,27 +2610,27 @@ const xt = (O = class extends nt {
   }
   /** Push theme and branding from config onto the host element. */
   applyBranding() {
-    const t = this.config?.branding, i = vt.isDark(t?.theme ?? "auto");
+    const t = this.config?.branding, i = bt.isDark(t?.theme ?? "auto");
     this.setAttribute("data-theme", i ? "dark" : "light"), t?.primary && (this.style.setProperty("--authui-primary", t.primary), this.style.setProperty(
       "--authui-primary-foreground",
       t.primaryForeground ?? "#ffffff"
-    )), t?.radius && bt[t.radius] && this.style.setProperty("--authui-radius", bt[t.radius]);
+    )), t?.radius && yt[t.radius] && this.style.setProperty("--authui-radius", yt[t.radius]);
   }
   /** Emit a composed custom event from this element. */
   fire(t, i) {
     this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-}, O.styles = [Lt, Dt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
-_t([
+}, O.styles = [Dt, zt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
+qt([
   c()
-], xt.prototype, "auth");
-let E = xt;
-var qt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Vt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+], kt.prototype, "auth");
+let E = kt;
+var Vt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Nt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && qt(t, i, a), a;
+  return s && a && Vt(t, i, a), a;
 };
-let w = class extends nt {
+let w = class extends ot {
   constructor() {
     super(...arguments), this.endpoint = "", this.project = "", this.redirectUrl = "", this.successUrl = "", this.methods = "email-password", this.signUp = "true", this.requireName = "true", this.mfa = "true", this.securityPhrase = "true", this.name = "", this.logo = "", this.theme = "auto", this.radius = "", this.primary = "", this.primaryForeground = "", this.termsUrl = "", this.privacyUrl = "", this.requireAcceptance = "", this.oauthLayout = "", this.preview = "";
   }
@@ -2695,42 +2747,42 @@ x([
   m({ type: String })
 ], w.prototype, "preview", 2);
 w = x([
-  L("authui-config")
+  D("authui-config")
 ], w);
-var Nt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Q = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Bt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+var Bt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? jt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Nt(t, i, a), a;
+  return s && a && Bt(t, i, a), a;
 };
-const yt = "authui-show:not([ready]){display:none}", ce = "authui-show:not([ready]){display:none}authui-button:not(:defined),authui-user-button:not(:defined){visibility:hidden}";
-let wt = !1;
-function jt() {
-  if (!(typeof document > "u" || wt)) {
-    wt = !0;
+const wt = "authui-show:not([ready]){display:none}", de = "authui-show:not([ready]){display:none}authui-button:not(:defined),authui-user-button:not(:defined){visibility:hidden}";
+let $t = !1;
+function Ht() {
+  if (!(typeof document > "u" || $t)) {
+    $t = !0;
     try {
       if (typeof CSSStyleSheet < "u" && "adoptedStyleSheets" in Document.prototype) {
         const e = new CSSStyleSheet();
-        e.replaceSync(yt), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e];
+        e.replaceSync(wt), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e];
         return;
       }
     } catch {
     }
     if (!document.getElementById("authui-fouc")) {
       const e = document.createElement("style");
-      e.id = "authui-fouc", e.textContent = yt, document.head.appendChild(e);
+      e.id = "authui-fouc", e.textContent = wt, document.head.appendChild(e);
     }
   }
 }
-jt();
-const Ht = ["loading", "signed-out", "signed-in", "mfa-required"];
-function st(e) {
-  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => Ht.includes(t)) : [];
+Ht();
+const Wt = ["loading", "signed-out", "signed-in", "mfa-required"];
+function rt(e) {
+  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => Wt.includes(t)) : [];
 }
-function Wt(e, t, i) {
-  const s = st(t), a = st(i);
+function Gt(e, t, i) {
+  const s = rt(t), a = rt(i);
   return !(e === "loading" && !s.includes("loading") || s.length > 0 && !s.includes(e) || a.includes(e));
 }
-let H = class extends nt {
+let W = class extends ot {
   constructor() {
     super(...arguments), this.when = "", this.unless = "", this.status = l.getState().status, this.unsubscribe = null;
   }
@@ -2742,27 +2794,27 @@ let H = class extends nt {
   }
   /** Whether the current status satisfies `when` and `unless`. */
   get visible() {
-    return Wt(this.status, this.when, this.unless);
+    return Gt(this.status, this.when, this.unless);
   }
   updated() {
-    (this.status !== "loading" || st(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
+    (this.status !== "loading" || rt(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
   }
   render() {
     return this.visible ? r`<slot></slot>` : n;
   }
 };
-Q([
+J([
   m({ type: String })
-], H.prototype, "when", 2);
-Q([
+], W.prototype, "when", 2);
+J([
   m({ type: String })
-], H.prototype, "unless", 2);
-Q([
+], W.prototype, "unless", 2);
+J([
   c()
-], H.prototype, "status", 2);
-H = Q([
-  L("authui-show")
-], H);
+], W.prototype, "status", 2);
+W = J([
+  D("authui-show")
+], W);
 const Kt = T`
   :host {
     display: block;
@@ -2910,7 +2962,7 @@ const Kt = T`
   qr: b(
     u`<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>`
   )
-}, S = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Gt = {
+}, S = (e, t = "0 0 24 24") => r`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Yt = {
   google: S(
     u`<path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.57 5.57 0 0 1-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A11.99 11.99 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29A11.97 11.97 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.69 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/>`
   ),
@@ -2966,22 +3018,22 @@ const Kt = T`
     u`<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 B(e) {
-  return Gt[e] ?? o.globe;
+function j(e) {
+  return Yt[e] ?? o.globe;
 }
-function lt(e) {
+function ct(e) {
   const t = (e.trim()[0] ?? "?").toUpperCase();
   return /[A-Z0-9]/i.test(t) ? t : o.user;
 }
-function X(e) {
+function Q(e) {
   typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
     window.dispatchEvent(new CustomEvent("authui:open", { detail: { view: e } }));
   }));
 }
-function de() {
+function he() {
   typeof window > "u" || window.dispatchEvent(new CustomEvent("authui:close"));
 }
-function rt(e) {
+function at(e) {
   const t = {
     length: e.length >= 8,
     long: e.length >= 12,
@@ -2997,24 +3049,25 @@ function rt(e) {
   let s, a;
   return !t.length || i <= 1 ? (s = 1, a = "passwordStrengthTooWeak") : i === 2 ? (s = 2, a = "passwordStrengthWeak") : i === 3 ? (s = 3, a = "passwordStrengthFair") : i >= 5 && t.long && t.lower && t.upper && t.number && t.symbol ? (s = 4, a = "passwordStrengthVeryStrong") : (s = 4, a = "passwordStrengthStrong"), { level: s, percent: s * 25, labelKey: a, checks: t };
 }
-var Yt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, k = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Zt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+var Zt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, k = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Xt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Yt(t, i, a), a;
+  return s && a && Zt(t, i, a), a;
 };
+const R = "authui-error";
 let $ = class extends E {
   constructor() {
     super(...arguments), this.view = "sign-in", this.embedded = !1, this.step = "sign-in", this.busy = !1, this.error = "", this.notice = null, this.showPassword = !1, this.showPasswordConfirm = !1, this.expandedOAuth = null, this.token = null, this.focusOnStep = !1, this.resendCooldownUntil = 0, this.challenge = null, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.legalAccepted = !1, this.legalErrorFromOAuth = !1, this.onSignIn = (e) => {
       e.preventDefault(), this.requireValid(e) && this.run(async () => {
-        await l.signInWithEmailPassword(this.email, this.password), this.password = "", _("email-password"), this.fire("authui-success", { method: "email-password" });
+        await l.signInWithEmailPassword(this.email, this.password), this.password = "", q("email-password"), this.fire("authui-success", { method: "email-password" });
       });
     }, this.onSignUp = (e) => {
       e.preventDefault(), this.requireValid(e) && (this.legalErrorFromOAuth = !1, this.ensureLegalAccepted() && this.run(async () => {
-        await l.signUp(this.email, this.password, this.name), this.password = "", _("email-password"), this.fire("authui-success", { method: "sign-up" });
+        await l.signUp(this.email, this.password, this.name), this.password = "", q("email-password"), this.fire("authui-success", { method: "sign-up" });
       }));
     }, this.onGuest = () => {
       this.run(async () => {
-        await l.signInAnonymously(), _("anonymous"), this.fire("authui-success", { method: "anonymous" });
+        await l.signInAnonymously(), q("anonymous"), this.fire("authui-success", { method: "anonymous" });
       });
     }, this.onOAuth = (e) => {
       if (this.step === "sign-up" && !this.ensureLegalAccepted()) {
@@ -3022,8 +3075,8 @@ let $ = class extends E {
         return;
       }
       this.legalErrorFromOAuth = !1, this.run(async () => {
-        if (Ft(e), await l.signInWithOAuth(e), l.isPreview) {
-          $t(), this.fire("authui-success", { method: "oauth" });
+        if (Rt(e), await l.signInWithOAuth(e), l.isPreview) {
+          xt(), this.fire("authui-success", { method: "oauth" });
           return;
         }
         await new Promise((t) => setTimeout(t, 4e3));
@@ -3071,7 +3124,7 @@ let $ = class extends E {
       if (e.preventDefault(), !this.requireValid(e)) return;
       const t = this.token;
       t && this.run(async () => {
-        await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, _(t.kind), this.fire("authui-success", { method: t.kind });
+        await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, q(t.kind), this.fire("authui-success", { method: t.kind });
       }, "code");
     }, this.onChooseFactor = (e) => {
       this.run(async () => {
@@ -3089,7 +3142,7 @@ let $ = class extends E {
         try {
           await l.signOut();
         } catch (e) {
-          if (!j(e, v.sessionNotFound)) throw e;
+          if (!H(e, v.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
@@ -3130,7 +3183,7 @@ let $ = class extends E {
       try {
         await e();
       } catch (i) {
-        this.error = Y(i, this.strings, t);
+        this.error = Z(i, this.strings, t);
       } finally {
         this.busy = !1;
       }
@@ -3212,7 +3265,7 @@ let $ = class extends E {
     `;
   }
   renderError() {
-    return this.error ? r`<div class="alert alert-error" role="alert">
+    return this.error ? r`<div class="alert alert-error" role="alert" id=${R}>
           ${o.alert}
           <div class="alert-body">${this.error}</div>
         </div>` : n;
@@ -3223,19 +3276,10 @@ let $ = class extends E {
     </button>`;
   }
   passwordField(e) {
-    const t = this[e.field], i = e.field === "passwordConfirm" ? this.showPasswordConfirm : this.showPassword, s = e.meter ? rt(t) : null;
+    const t = this[e.field], i = e.field === "passwordConfirm" ? this.showPasswordConfirm : this.showPassword, s = e.meter ? at(t) : null;
     return r`
-      <div class="field">
-        <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>` : n}
-        </div>
+      <div class="field${e.forgot ? " field-with-forgot" : ""}">
+        <label class="label" for=${e.id}>${e.label}</label>
         <div class="input-wrap">
           <input
             class="input"
@@ -3246,6 +3290,8 @@ let $ = class extends E {
             minlength="8"
             .value=${t}
             @input=${this.bind(e.field)}
+            aria-invalid=${this.error ? "true" : n}
+            aria-describedby=${this.error ? R : n}
           />
           <button
             type="button"
@@ -3258,6 +3304,13 @@ let $ = class extends E {
             ${i ? o.eyeOff : o.eye}
           </button>
         </div>
+        ${e.forgot ? r`<button
+                type="button"
+                class="btn btn-link small field-forgot"
+                @click=${() => this.go("forgot-password")}
+              >
+                ${this.t("forgotPassword")}
+              </button>` : n}
         ${s && t ? r`<div class="strength" aria-live="polite">
                 <div
                   class="strength-meter"
@@ -3289,6 +3342,8 @@ let $ = class extends E {
           inputmode="email"
           .value=${this.email}
           @input=${this.bind("email")}
+          aria-invalid=${this.error ? "true" : n}
+          aria-describedby=${this.error ? R : n}
         />
       </div>
     `;
@@ -3308,6 +3363,8 @@ let $ = class extends E {
           required
           .value=${this.code}
           @input=${this.bind("code")}
+          aria-invalid=${this.error ? "true" : n}
+          aria-describedby=${this.error ? R : n}
         />
       </div>
     `;
@@ -3331,16 +3388,20 @@ let $ = class extends E {
   }
   /** Required acceptance checkbox on sign-up when legal.requireAcceptance is set. */
   legalAcceptField() {
-    return this.needsLegalAcceptance() ? r`<label class="legal-accept">
+    if (!this.needsLegalAcceptance()) return n;
+    const e = this.error === this.t("errorLegalRequired");
+    return r`<label class="legal-accept">
       <input
         type="checkbox"
         .checked=${this.legalAccepted}
-        @change=${(e) => {
-      this.legalAccepted = e.target.checked, this.legalAccepted && this.error === this.t("errorLegalRequired") && (this.error = "", this.legalErrorFromOAuth = !1);
+        aria-invalid=${e ? "true" : n}
+        aria-describedby=${e ? R : n}
+        @change=${(t) => {
+      this.legalAccepted = t.target.checked, this.legalAccepted && this.error === this.t("errorLegalRequired") && (this.error = "", this.legalErrorFromOAuth = !1);
     }}
       />
       <span>${this.t("acceptLegal")} ${this.legalLinks()}.</span>
-    </label>` : n;
+    </label>`;
   }
   backLink(e = "sign-in") {
     return r`<div class="links">
@@ -3388,7 +3449,7 @@ let $ = class extends E {
       <div class="stack">
         <div class="row">
           <div class="inline">
-            <span class="avatar">${lt(t)}</span>
+            <span class="avatar">${ct(t)}</span>
             <div class="row-main">
               <span class="row-title" title=${t}>${t}</span>
               ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : n}
@@ -3403,7 +3464,7 @@ let $ = class extends E {
           <button
             class="btn btn-outline btn-block"
             @click=${() => {
-      this.embedded ? this.fire("authui-open", { view: "account" }) : X("account");
+      this.embedded ? this.fire("authui-open", { view: "account" }) : Q("account");
     }}
           >
             ${o.settings} ${this.t("manageAccount")}
@@ -3418,16 +3479,16 @@ let $ = class extends E {
   renderProviders() {
     const e = [...this.config?.methods?.oauth ?? []];
     if (e.length === 0) return n;
-    const t = z(), i = e.find((d) => t === `oauth:${d}`) ?? null, s = this.config?.methods?.oauthLayout, a = s === "horizontal" || s === "icon" ? "icon" : s === "stack" || s === "accordion" ? s : e.length <= 2 ? "stack" : "accordion";
+    const t = _(), i = e.find((d) => t === `oauth:${d}`) ?? null, s = this.config?.methods?.oauthLayout, a = s === "horizontal" || s === "icon" ? "icon" : s === "stack" || s === "accordion" ? s : e.length <= 2 ? "stack" : "accordion";
     if (a === "icon") {
       const d = [...e].sort((g, y) => {
-        const C = t === `oauth:${g}` ? 0 : 1, tt = t === `oauth:${y}` ? 0 : 1;
-        return C - tt;
+        const C = t === `oauth:${g}` ? 0 : 1, et = t === `oauth:${y}` ? 0 : 1;
+        return C - et;
       });
       return r`
         <div class="providers icon">
           ${d.map((g) => {
-        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: N(g) });
+        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: B(g) });
         return r`<button
               type="button"
               class="btn btn-outline ${y ? "last-used" : ""}"
@@ -3436,7 +3497,7 @@ let $ = class extends E {
               aria-label=${y ? `${C}. ${this.t("lastUsed")}` : C}
               title=${C}
             >
-              ${B(g)}
+              ${j(g)}
               ${y ? r`<span class="oauth-last-used-dot" aria-hidden="true"></span>` : n}
             </button>`;
       })}
@@ -3445,13 +3506,13 @@ let $ = class extends E {
     }
     if (a === "stack") {
       const d = [...e].sort((g, y) => {
-        const C = t === `oauth:${g}` ? 0 : 1, tt = t === `oauth:${y}` ? 0 : 1;
-        return C - tt;
+        const C = t === `oauth:${g}` ? 0 : 1, et = t === `oauth:${y}` ? 0 : 1;
+        return C - et;
       });
       return r`
         <div class="providers">
           ${d.map((g) => {
-        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: N(g) });
+        const y = t === `oauth:${g}`, C = this.t("continueWith", { provider: B(g) });
         return r`<button
               type="button"
               class="btn btn-outline ${y ? "last-used" : ""}"
@@ -3459,7 +3520,7 @@ let $ = class extends E {
               ?disabled=${this.busy}
               aria-label=${y ? `${C}. ${this.t("lastUsed")}` : C}
             >
-              ${B(g)}
+              ${j(g)}
               <span>${C}</span>
               ${y ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
             </button>`;
@@ -3476,7 +3537,7 @@ let $ = class extends E {
     }}
       >
         ${e.map((d) => {
-      const g = t === `oauth:${d}`, y = h === d, C = this.t("continueWith", { provider: N(d) });
+      const g = t === `oauth:${d}`, y = h === d, C = this.t("continueWith", { provider: B(d) });
       return r`<div
             class="provider-slot ${y ? "is-expanded" : ""}"
             @mouseenter=${() => {
@@ -3493,7 +3554,7 @@ let $ = class extends E {
               ?disabled=${this.busy}
               aria-label=${g ? `${C}. ${this.t("lastUsed")}` : C}
             >
-              ${B(d)}
+              ${j(d)}
               <span class="provider-label"
                 ><span><span class="provider-label-text">${C}</span></span></span
               >
@@ -3518,11 +3579,11 @@ let $ = class extends E {
         ${this.renderProviders()}
         ${i && (t || s.length > 0) ? r`<div class="separator-text">${this.t("or")}</div>` : n}
         ${t ? r`<form
-                class="form ${z() === "email-password" ? "last-used-form" : ""}"
+                class="form ${_() === "email-password" ? "last-used-form" : ""}"
                 @submit=${this.onSignIn}
                 novalidate
               >
-                ${z() === "email-password" ? r`<p class="hint">
+                ${_() === "email-password" ? r`<p class="hint">
                         <span class="last-used-badge">${this.t("lastUsed")}</span>
                       </p>` : n}
                 ${this.emailField()}
@@ -3531,7 +3592,7 @@ let $ = class extends E {
               </form>` : this.renderError()}
         ${s.length > 0 ? r`<div class="stack-sm">
                 ${s.map((a) => {
-      const h = z() === a.step;
+      const h = _() === a.step;
       return r`<button
                     type="button"
                     class="btn btn-secondary btn-block ${h ? "last-used" : ""}"
@@ -3545,12 +3606,12 @@ let $ = class extends E {
               </div>` : n}
         ${e.anonymous ? r`<button
                 type="button"
-                class="btn btn-ghost btn-block ${z() === "anonymous" ? "last-used" : ""}"
+                class="btn btn-ghost btn-block ${_() === "anonymous" ? "last-used" : ""}"
                 @click=${this.onGuest}
                 ?disabled=${this.busy}
               >
                 ${o.ghost} ${this.t("continueAsGuest")}
-                ${z() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
+                ${_() === "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>
@@ -3579,6 +3640,8 @@ let $ = class extends E {
                     required
                     .value=${this.name}
                     @input=${this.bind("name")}
+                    aria-invalid=${this.error ? "true" : n}
+                    aria-describedby=${this.error ? R : n}
                   />
                 </div>` : n}
           ${this.emailField()}
@@ -3747,6 +3810,8 @@ let $ = class extends E {
               required
               .value=${this.phone}
               @input=${this.bind("phone")}
+              aria-invalid=${this.error ? "true" : n}
+              aria-describedby=${this.error ? R : n}
             />
           </div>
           ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
@@ -3821,6 +3886,8 @@ let $ = class extends E {
                     required
                     .value=${this.code}
                     @input=${this.bind("code")}
+                    aria-invalid=${this.error ? "true" : n}
+                    aria-describedby=${this.error ? R : n}
                   />
                 </div>` : this.codeField()}
           ${this.renderError()} ${this.submitButton(this.t("verifyCode"))}
@@ -3879,7 +3946,7 @@ k([
   c()
 ], $.prototype, "recovery", 2);
 k([
-  at("form input:not([type=hidden])")
+  nt("form input:not([type=hidden])")
 ], $.prototype, "firstInput", 2);
 k([
   c()
@@ -3894,12 +3961,12 @@ k([
   c()
 ], $.prototype, "legalErrorFromOAuth", 2);
 $ = k([
-  L("authui-sign-in")
+  D("authui-sign-in")
 ], $);
-var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Qt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Jt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Xt(t, i, a), a;
+  return s && a && Qt(t, i, a), a;
 };
 let p = class extends E {
   constructor() {
@@ -4007,7 +4074,7 @@ let p = class extends E {
         try {
           this.recoveryCodes = await l.createRecoveryCodes();
         } catch (e) {
-          if (!j(e, v.recoveryCodesExist)) throw e;
+          if (!H(e, v.recoveryCodesExist)) throw e;
           this.recoveryCodes = await l.getRecoveryCodes();
         }
         await this.loadFactors();
@@ -4130,9 +4197,9 @@ let p = class extends E {
       try {
         await t(), i && this.setNotice("success", i);
       } catch (s) {
-        j(s, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
+        H(s, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
           ...this.errors,
-          [e]: Y(
+          [e]: Z(
             s,
             this.strings,
             e.includes("code") ? "code" : e === "password" ? "password" : "link"
@@ -4287,7 +4354,7 @@ let p = class extends E {
     return r`
       <div class="between">
         <div class="identity">
-          <span class="avatar">${lt(t)}</span>
+          <span class="avatar">${ct(t)}</span>
           <div class="row-main">
             <span class="row-title" title=${t}>
               ${t}
@@ -4412,7 +4479,7 @@ let p = class extends E {
                 autocomplete="new-password"
               />
               ${this.emailPassword ? (() => {
-        const t = rt(this.emailPassword);
+        const t = at(this.emailPassword);
         return r`<div class="strength" aria-live="polite">
                         <div
                           class="strength-meter"
@@ -4707,7 +4774,7 @@ let p = class extends E {
                     </button>
                   </div>
                   ${this.newPassword ? (() => {
-        const i = rt(this.newPassword);
+        const i = at(this.newPassword);
         return r`<div class="strength" aria-live="polite">
                             <div
                               class="strength-meter"
@@ -4766,7 +4833,7 @@ let p = class extends E {
     </div>`;
   }
   renderMfaCard() {
-    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? l.isPreview ? Et(this.authenticator.uri) : new Ct(l.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? l.isPreview ? Mt(this.authenticator.uri) : new St(l.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
@@ -5110,9 +5177,9 @@ let p = class extends E {
       ) : e.map(
         (i) => r`<div class="row">
                       <div class="inline">
-                        <span class="device">${B(i.provider)}</span>
+                        <span class="device">${j(i.provider)}</span>
                         <div class="row-main">
-                          <span class="row-title">${N(i.provider)}</span>
+                          <span class="row-title">${B(i.provider)}</span>
                           <span class="row-sub">${i.providerEmail || i.providerUid}</span>
                         </div>
                       </div>
@@ -5155,8 +5222,8 @@ let p = class extends E {
         }}
                     ?disabled=${!!this.busy}
                   >
-                    ${this.spinner(`connect-${i}`)} ${B(i)}
-                    ${this.t("connectProvider", { provider: N(i) })}
+                    ${this.spinner(`connect-${i}`)} ${j(i)}
+                    ${this.t("connectProvider", { provider: B(i) })}
                   </button>`
       )}` : void 0
     )}
@@ -5401,12 +5468,12 @@ f([
   c()
 ], p.prototype, "verifyPhoneCooldownUntil", 2);
 p = f([
-  L("authui-account")
+  D("authui-account")
 ], p);
-var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? te(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, L = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ee(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && Jt(t, i, a), a;
+  return s && a && te(t, i, a), a;
 };
 let I = class extends E {
   constructor() {
@@ -5516,9 +5583,11 @@ I.styles = [
         background: var(--authui-background);
         color: var(--authui-foreground);
         padding: 0;
-        width: calc(100% - 2rem);
+        width: calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
         max-width: 440px;
-        max-height: calc(100dvh - 2rem);
+        max-height: calc(
+          100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
+        );
         box-shadow: var(--authui-shadow-lg);
         overflow: hidden;
         z-index: var(--authui-z);
@@ -5546,7 +5615,9 @@ I.styles = [
       .frame {
         display: flex;
         flex-direction: column;
-        max-height: calc(100dvh - 2rem);
+        max-height: calc(
+          100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
+        );
         min-height: 0;
         position: relative;
       }
@@ -5555,11 +5626,13 @@ I.styles = [
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        padding: 8px 8px 0;
+        padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0
+          max(8px, env(safe-area-inset-left, 0px));
         background: var(--authui-background);
       }
       .body {
-        padding: 4px 24px 28px;
+        padding: 4px max(24px, env(safe-area-inset-right, 0px))
+          max(28px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
         overflow-y: auto;
         flex: 1 1 auto;
         min-height: 0;
@@ -5594,13 +5667,13 @@ I.styles = [
       }
     `
 ];
-R([
+L([
   m({ type: Boolean, reflect: !0 })
 ], I.prototype, "open", 2);
-R([
+L([
   m({ type: String })
 ], I.prototype, "view", 2);
-R([
+L([
   m({
     attribute: "close-on-success",
     reflect: !0,
@@ -5616,27 +5689,27 @@ R([
     }
   })
 ], I.prototype, "closeOnSuccess", 2);
-R([
+L([
   c()
 ], I.prototype, "handledPending", 2);
-R([
+L([
   c()
 ], I.prototype, "scrollCue", 2);
-R([
-  at("dialog")
+L([
+  nt("dialog")
 ], I.prototype, "dialog", 2);
-R([
-  at(".body")
+L([
+  nt(".body")
 ], I.prototype, "bodyEl", 2);
-I = R([
-  L("authui-modal")
+I = L([
+  D("authui-modal")
 ], I);
-var ee = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ie(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, tt = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? se(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && ee(t, i, a), a;
+  return s && a && ie(t, i, a), a;
 };
-let V = class extends E {
+let N = class extends E {
   constructor() {
     super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
   }
@@ -5644,7 +5717,7 @@ let V = class extends E {
     const e = this.size === "md" ? "" : `btn-${this.size}`;
     return r`<button
       class="btn btn-${this.variant} ${e}"
-      @click=${() => X(this.view)}
+      @click=${() => Q(this.view)}
       part="button"
     >
       <slot
@@ -5653,7 +5726,7 @@ let V = class extends E {
     </button>`;
   }
 };
-V.styles = [
+N.styles = [
   ...E.styles,
   T`
       :host {
@@ -5664,22 +5737,22 @@ V.styles = [
       }
     `
 ];
-J([
+tt([
   m({ type: String })
-], V.prototype, "view", 2);
-J([
+], N.prototype, "view", 2);
+tt([
   m({ type: String })
-], V.prototype, "variant", 2);
-J([
+], N.prototype, "variant", 2);
+tt([
   m({ type: String })
-], V.prototype, "size", 2);
-V = J([
-  L("authui-button")
-], V);
-var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? re(t, i) : t, h = e.length - 1, d; h >= 0; h--)
+], N.prototype, "size", 2);
+N = tt([
+  D("authui-button")
+], N);
+var re = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ae(t, i) : t, h = e.length - 1, d; h >= 0; h--)
     (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
-  return s && a && se(t, i, a), a;
+  return s && a && re(t, i, a), a;
 };
 let U = class extends E {
   constructor() {
@@ -5756,7 +5829,7 @@ let U = class extends E {
     if (e === "loading" && i)
       return r`<span class="avatar"><span class="spinner"></span></span>`;
     if (e !== "signed-in" || !t)
-      return r`<button class="btn btn-primary btn-sm" @click=${() => X("sign-in")}>
+      return r`<button class="btn btn-primary btn-sm" @click=${() => Q("sign-in")}>
         <slot>${this.t("signIn")}</slot>
       </button>`;
     const s = t.name || t.email || t.phone || this.t("guestAccount");
@@ -5769,7 +5842,7 @@ let U = class extends E {
         aria-label=${s}
       >
         <span class="avatar"
-          >${this.src ? r`<img src=${this.src} alt="" />` : lt(s)}</span
+          >${this.src ? r`<img src=${this.src} alt="" />` : ct(s)}</span
         >
       </button>
       ${this.menuOpen ? r`<div class="menu ${this.menuAbove ? "above" : ""}" role="menu">
@@ -5800,7 +5873,7 @@ let U = class extends E {
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, X("account");
+      this.menuOpen = !1, Q("account");
     }}
               >
                 ${o.settings} ${this.t("manageAccount")}
@@ -6001,38 +6074,38 @@ F([
   c()
 ], U.prototype, "activeTeamId", 2);
 U = F([
-  L("authui-user-button")
+  D("authui-user-button")
 ], U);
 export {
   Tt as A,
-  ce as C,
+  de as C,
   v as E,
-  yt as F,
-  It as P,
+  wt as F,
+  Et as P,
   l as a,
   p as b,
-  de as c,
-  V as d,
+  he as c,
+  N as d,
   w as e,
   E as f,
   I as g,
-  H as h,
+  W as h,
   $ as i,
   U as j,
-  le as k,
-  ft as l,
-  St as m,
-  Y as n,
-  X as o,
-  z as p,
-  pt as q,
-  Mt as r,
-  N as s,
-  _ as t,
-  $t as u,
-  rt as v,
-  Ot as w,
-  Ft as x,
-  q as y,
-  Wt as z
+  ce as k,
+  mt as l,
+  At as m,
+  Z as n,
+  Q as o,
+  _ as p,
+  ft as q,
+  Ot as r,
+  B as s,
+  q as t,
+  xt as u,
+  at as v,
+  Ft as w,
+  Rt as x,
+  V as y,
+  Gt as z
 };