@getauthui/core 0.1.11 → 0.1.13

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.
@@ -1,5 +1,5 @@
1
- import { state as c, property as m, customElement as T, query as at } from "lit/decorators.js";
2
- import { css as L, LitElement as nt, nothing as n, html as r, svg as u } from "lit";
1
+ import { state as c, property as m, customElement as L, query as at } from "lit/decorators.js";
2
+ import { css as T, LitElement as nt, nothing as n, html as r, svg as u } from "lit";
3
3
  import { Client as ct, Account as dt, Teams as kt, ID as W, Avatars as Ct } from "appwrite";
4
4
  const St = {
5
5
  signIn: "Sign in",
@@ -79,7 +79,7 @@ const St = {
79
79
  twoFactor: "Two-factor authentication",
80
80
  mfaBadge: "MFA",
81
81
  twoFactorDescription: "Require a second factor when signing in to this account.",
82
- mfaNoFactorWarning: "Turn on an authenticator, or verify your email or phone, before enabling two-factor authentication. Without a factor, this setting does not protect the account.",
82
+ mfaNoFactorWarning: "Two-factor authentication is on, but no factors are set up yet. Add an authenticator, or verify your email or phone. Without a factor, this setting does not protect the account.",
83
83
  enable: "Enable",
84
84
  disable: "Disable",
85
85
  authenticatorApp: "Authenticator app",
@@ -248,13 +248,13 @@ const K = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }),
248
248
  "juniper",
249
249
  "kite",
250
250
  "lumen"
251
- ], ht = () => `${G[Math.floor(Math.random() * G.length)]}-${G[Math.floor(Math.random() * G.length)]}`, D = () => Math.random().toString(36).slice(2, 12), ut = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), Et = {
251
+ ], 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 = {
252
252
  name: "Ada Lovelace",
253
253
  email: "ada@example.com",
254
254
  phone: "+15550100"
255
255
  };
256
256
  class It {
257
- constructor(t = Et) {
257
+ constructor(t = Ut) {
258
258
  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;
259
259
  }
260
260
  // ───────────────────────── helpers ─────────────────────────
@@ -591,7 +591,7 @@ class It {
591
591
  this.user = null, this.mfaPending = !1, this.sessions = [], this.identities = [], this.logs = [], this.tokens.clear();
592
592
  }
593
593
  }
594
- function Ut(e) {
594
+ function Et(e) {
595
595
  let t = 2166136261;
596
596
  const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
597
597
  for (const g of e) t = (t ^ g.charCodeAt(0)) * 16777619;
@@ -760,7 +760,7 @@ function $t() {
760
760
  } catch {
761
761
  }
762
762
  }
763
- function mt() {
763
+ function ft() {
764
764
  if (!(typeof sessionStorage > "u"))
765
765
  try {
766
766
  sessionStorage.removeItem(Z);
@@ -777,7 +777,7 @@ function A(e, t, i) {
777
777
  new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
778
778
  );
779
779
  }
780
- const it = "authui", ft = ["userId", "secret", "expire", "project", "error", it], gt = () => ({
780
+ const it = "authui", mt = ["userId", "secret", "expire", "project", "error", it], gt = () => ({
781
781
  status: "loading",
782
782
  user: null,
783
783
  mfaFactors: null,
@@ -785,7 +785,7 @@ const it = "authui", ft = ["userId", "secret", "expire", "project", "error", it]
785
785
  configured: !1,
786
786
  configError: null
787
787
  });
788
- class Lt {
788
+ class Tt {
789
789
  constructor() {
790
790
  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;
791
791
  }
@@ -1332,7 +1332,7 @@ class Lt {
1332
1332
  /** Build the URL Appwrite should send the user back to for a given flow. */
1333
1333
  redirectUrl(t) {
1334
1334
  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);
1335
- for (const a of ft) s.searchParams.delete(a);
1335
+ for (const a of mt) s.searchParams.delete(a);
1336
1336
  return s.searchParams.set(it, t), s.toString();
1337
1337
  }
1338
1338
  setPending(t) {
@@ -1361,10 +1361,10 @@ class Lt {
1361
1361
  switch (i) {
1362
1362
  case "oauth":
1363
1363
  case "magic-url":
1364
- s && a ? (await this.acct().createSession(s, a), i === "oauth" ? $t() : _("magic-url")) : (i === "oauth" && mt(), h());
1364
+ s && a ? (await this.acct().createSession(s, a), i === "oauth" ? $t() : _("magic-url")) : (i === "oauth" && ft(), h());
1365
1365
  break;
1366
1366
  case "oauth-failed":
1367
- mt(), this.setState({
1367
+ ft(), this.setState({
1368
1368
  pending: {
1369
1369
  type: "notice",
1370
1370
  tone: "error",
@@ -1397,7 +1397,7 @@ class Lt {
1397
1397
  }
1398
1398
  cleanUrl() {
1399
1399
  const t = new URL(window.location.href);
1400
- for (const i of ft) t.searchParams.delete(i);
1400
+ for (const i of mt) t.searchParams.delete(i);
1401
1401
  window.history.replaceState(window.history.state, "", t.toString());
1402
1402
  }
1403
1403
  /** Test helper. */
@@ -1405,7 +1405,7 @@ class Lt {
1405
1405
  this.client = null, this.account = null, this.teams = null, this.activeTeamId = null, this.preview = null, this.config = null, this.state = gt(), this.listeners.clear();
1406
1406
  }
1407
1407
  }
1408
- const o = new Lt();
1408
+ const l = new Tt();
1409
1409
  class Rt {
1410
1410
  constructor() {
1411
1411
  this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
@@ -1441,7 +1441,7 @@ const vt = new Rt(), bt = {
1441
1441
  lg: "0.875rem",
1442
1442
  xl: "1.125rem",
1443
1443
  full: "1.5rem"
1444
- }, Tt = L`
1444
+ }, Lt = T`
1445
1445
  :host {
1446
1446
  /* Light theme (matches :root in the console) */
1447
1447
  --authui-background: oklch(1 0 0);
@@ -1508,9 +1508,10 @@ const vt = new Rt(), bt = {
1508
1508
  --authui-accent-foreground: oklch(0.985 0 0);
1509
1509
  --authui-destructive: oklch(0.396 0.141 25.723);
1510
1510
  --authui-destructive-foreground: oklch(0.637 0.237 25.331);
1511
- --authui-border: oklch(0.252 0.005 286.32);
1512
- --authui-input: #2d2d31;
1513
- --authui-ring: oklch(0.448 0.015 285.786);
1511
+ /* Raised vs card (#1d1d21) for WCAG 1.4.11 (~3:1) UI contrast */
1512
+ --authui-border: #71717a;
1513
+ --authui-input: #71717a;
1514
+ --authui-ring: #a1a1aa;
1514
1515
  --authui-success-foreground: #34d399;
1515
1516
  --authui-warning-foreground: #fbbf24;
1516
1517
  --authui-error-foreground: #f87171;
@@ -1519,7 +1520,7 @@ const vt = new Rt(), bt = {
1519
1520
  --authui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
1520
1521
  color-scheme: dark;
1521
1522
  }
1522
- `, Dt = L`
1523
+ `, Dt = T`
1523
1524
  *,
1524
1525
  *::before,
1525
1526
  *::after {
@@ -1727,7 +1728,8 @@ const vt = new Rt(), bt = {
1727
1728
  }
1728
1729
  .input {
1729
1730
  font: inherit;
1730
- font-size: 14px;
1731
+ /* 16px avoids iOS Safari auto-zoom on focus */
1732
+ font-size: 16px;
1731
1733
  height: 36px;
1732
1734
  width: 100%;
1733
1735
  min-width: 0;
@@ -1802,8 +1804,9 @@ const vt = new Rt(), bt = {
1802
1804
  background: var(--authui-muted);
1803
1805
  transition: background-color 120ms ease;
1804
1806
  }
1807
+ /* destructive-foreground matches light destructive and stays visible on dark card */
1805
1808
  .strength-meter[data-level="1"] span:nth-child(-n + 1) {
1806
- background: var(--authui-destructive);
1809
+ background: var(--authui-destructive-foreground);
1807
1810
  }
1808
1811
  .strength-meter[data-level="2"] span:nth-child(-n + 2) {
1809
1812
  background: var(--authui-warning-foreground);
@@ -1819,6 +1822,19 @@ const vt = new Rt(), bt = {
1819
1822
  color: var(--authui-muted-foreground);
1820
1823
  margin: 0;
1821
1824
  }
1825
+ :host([data-theme="dark"]) .strength-meter span {
1826
+ background: var(--authui-border);
1827
+ }
1828
+ :host([data-theme="dark"]) .strength-meter[data-level="1"] span:nth-child(-n + 1) {
1829
+ background: var(--authui-destructive-foreground);
1830
+ }
1831
+ :host([data-theme="dark"]) .strength-meter[data-level="2"] span:nth-child(-n + 2),
1832
+ :host([data-theme="dark"]) .strength-meter[data-level="3"] span:nth-child(-n + 3) {
1833
+ background: var(--authui-warning-foreground);
1834
+ }
1835
+ :host([data-theme="dark"]) .strength-meter[data-level="4"] span {
1836
+ background: var(--authui-success);
1837
+ }
1822
1838
 
1823
1839
  .btn.last-used {
1824
1840
  border-color: var(--authui-brand);
@@ -1969,7 +1985,7 @@ const vt = new Rt(), bt = {
1969
1985
  display: inline-flex;
1970
1986
  align-items: center;
1971
1987
  justify-content: flex-start;
1972
- height: 36px;
1988
+ height: 44px;
1973
1989
  width: fit-content;
1974
1990
  max-width: 100%;
1975
1991
  overflow-x: auto;
@@ -1980,6 +1996,14 @@ const vt = new Rt(), bt = {
1980
1996
  gap: 2px;
1981
1997
  scrollbar-width: none;
1982
1998
  -webkit-overflow-scrolling: touch;
1999
+ /* Subtle right-edge fade as overflow cue at narrow widths */
2000
+ -webkit-mask-image: linear-gradient(
2001
+ to right,
2002
+ #000 0%,
2003
+ #000 calc(100% - 28px),
2004
+ transparent 100%
2005
+ );
2006
+ mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
1983
2007
  }
1984
2008
  :host([data-theme="dark"]) .tabs {
1985
2009
  background: color-mix(in oklab, var(--authui-muted) 80%, transparent);
@@ -1990,8 +2014,9 @@ const vt = new Rt(), bt = {
1990
2014
  justify-content: center;
1991
2015
  gap: 6px;
1992
2016
  height: 100%;
2017
+ min-height: 38px;
1993
2018
  flex: 0 0 auto;
1994
- padding: 4px 10px;
2019
+ padding: 8px 12px;
1995
2020
  border-radius: var(--authui-radius-md);
1996
2021
  border: 1px solid transparent;
1997
2022
  background: transparent;
@@ -2529,12 +2554,12 @@ var zt = Object.defineProperty, _t = (e, t, i, s) => {
2529
2554
  }, O;
2530
2555
  const xt = (O = class extends nt {
2531
2556
  constructor() {
2532
- super(...arguments), this.auth = o.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
2557
+ super(...arguments), this.auth = l.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
2533
2558
  }
2534
2559
  connectedCallback() {
2535
2560
  super.connectedCallback();
2536
2561
  for (const t of O.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
2537
- this.auth = o.getState(), this.unsubscribeStore = o.on("change", (t) => {
2562
+ this.auth = l.getState(), this.unsubscribeStore = l.on("change", (t) => {
2538
2563
  this.auth = t, this.applyBranding();
2539
2564
  }), this.unsubscribeTheme = vt.subscribe(() => this.applyBranding()), this.applyBranding();
2540
2565
  }
@@ -2544,14 +2569,14 @@ const xt = (O = class extends nt {
2544
2569
  this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
2545
2570
  }
2546
2571
  get strings() {
2547
- return o.getStrings();
2572
+ return l.getStrings();
2548
2573
  }
2549
2574
  /** Translate a string key with optional `{placeholders}`. */
2550
2575
  t(t, i) {
2551
2576
  return At(this.strings[t], i);
2552
2577
  }
2553
2578
  get config() {
2554
- return o.getConfig();
2579
+ return l.getConfig();
2555
2580
  }
2556
2581
  get productName() {
2557
2582
  return this.config?.branding?.name ?? "";
@@ -2568,11 +2593,11 @@ const xt = (O = class extends nt {
2568
2593
  fire(t, i) {
2569
2594
  this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
2570
2595
  }
2571
- }, O.styles = [Tt, Dt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
2596
+ }, O.styles = [Lt, Dt], O.KEY_EVENTS = ["keydown", "keyup", "keypress"], O);
2572
2597
  _t([
2573
2598
  c()
2574
2599
  ], xt.prototype, "auth");
2575
- let U = xt;
2600
+ let E = xt;
2576
2601
  var qt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
2577
2602
  for (var a = s > 1 ? void 0 : s ? Vt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
2578
2603
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
@@ -2591,12 +2616,12 @@ let w = class extends nt {
2591
2616
  configure() {
2592
2617
  if (!this.endpoint || !this.project) {
2593
2618
  queueMicrotask(() => {
2594
- (!this.endpoint || !this.project) && o.notifyConfigIncomplete();
2619
+ (!this.endpoint || !this.project) && l.notifyConfigIncomplete();
2595
2620
  });
2596
2621
  return;
2597
2622
  }
2598
- const e = this.toConfig(), t = o.getConfig();
2599
- t && JSON.stringify(t) === JSON.stringify(e) || o.configure(e);
2623
+ const e = this.toConfig(), t = l.getConfig();
2624
+ t && JSON.stringify(t) === JSON.stringify(e) || l.configure(e);
2600
2625
  }
2601
2626
  toConfig() {
2602
2627
  const e = { oauth: [] }, t = this.methods.split(/[\s,]+/).filter(Boolean);
@@ -2629,7 +2654,7 @@ let w = class extends nt {
2629
2654
  };
2630
2655
  }
2631
2656
  };
2632
- w.styles = L`
2657
+ w.styles = T`
2633
2658
  :host {
2634
2659
  display: none;
2635
2660
  }
@@ -2695,7 +2720,7 @@ x([
2695
2720
  m({ type: String })
2696
2721
  ], w.prototype, "preview", 2);
2697
2722
  w = x([
2698
- T("authui-config")
2723
+ L("authui-config")
2699
2724
  ], w);
2700
2725
  var Nt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Q = (e, t, i, s) => {
2701
2726
  for (var a = s > 1 ? void 0 : s ? Bt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
@@ -2732,10 +2757,10 @@ function Wt(e, t, i) {
2732
2757
  }
2733
2758
  let H = class extends nt {
2734
2759
  constructor() {
2735
- super(...arguments), this.when = "", this.unless = "", this.status = o.getState().status, this.unsubscribe = null;
2760
+ super(...arguments), this.when = "", this.unless = "", this.status = l.getState().status, this.unsubscribe = null;
2736
2761
  }
2737
2762
  connectedCallback() {
2738
- super.connectedCallback(), this.status = o.getState().status, this.unsubscribe = o.on("change", (e) => this.status = e.status);
2763
+ super.connectedCallback(), this.status = l.getState().status, this.unsubscribe = l.on("change", (e) => this.status = e.status);
2739
2764
  }
2740
2765
  disconnectedCallback() {
2741
2766
  super.disconnectedCallback(), this.unsubscribe?.(), this.unsubscribe = null;
@@ -2761,9 +2786,9 @@ Q([
2761
2786
  c()
2762
2787
  ], H.prototype, "status", 2);
2763
2788
  H = Q([
2764
- T("authui-show")
2789
+ L("authui-show")
2765
2790
  ], H);
2766
- const Kt = L`
2791
+ const Kt = T`
2767
2792
  :host {
2768
2793
  display: block;
2769
2794
  width: 100%;
@@ -2828,7 +2853,7 @@ const Kt = L`
2828
2853
  aria-hidden="true"
2829
2854
  >
2830
2855
  ${e}
2831
- </svg>`, l = {
2856
+ </svg>`, o = {
2832
2857
  mail: b(
2833
2858
  u`<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>`
2834
2859
  ),
@@ -2967,11 +2992,11 @@ const Kt = L`
2967
2992
  )
2968
2993
  };
2969
2994
  function B(e) {
2970
- return Gt[e] ?? l.globe;
2995
+ return Gt[e] ?? o.globe;
2971
2996
  }
2972
2997
  function lt(e) {
2973
2998
  const t = (e.trim()[0] ?? "?").toUpperCase();
2974
- return /[A-Z0-9]/i.test(t) ? t : l.user;
2999
+ return /[A-Z0-9]/i.test(t) ? t : o.user;
2975
3000
  }
2976
3001
  function X(e) {
2977
3002
  typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
@@ -3002,19 +3027,19 @@ var Yt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, k = (e, t,
3002
3027
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
3003
3028
  return s && a && Yt(t, i, a), a;
3004
3029
  };
3005
- let $ = class extends U {
3030
+ let $ = class extends E {
3006
3031
  constructor() {
3007
3032
  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) => {
3008
3033
  e.preventDefault(), this.requireValid(e) && this.run(async () => {
3009
- await o.signInWithEmailPassword(this.email, this.password), this.password = "", _("email-password"), this.fire("authui-success", { method: "email-password" });
3034
+ await l.signInWithEmailPassword(this.email, this.password), this.password = "", _("email-password"), this.fire("authui-success", { method: "email-password" });
3010
3035
  });
3011
3036
  }, this.onSignUp = (e) => {
3012
3037
  e.preventDefault(), this.requireValid(e) && (this.legalErrorFromOAuth = !1, this.ensureLegalAccepted() && this.run(async () => {
3013
- await o.signUp(this.email, this.password, this.name), this.password = "", _("email-password"), this.fire("authui-success", { method: "sign-up" });
3038
+ await l.signUp(this.email, this.password, this.name), this.password = "", _("email-password"), this.fire("authui-success", { method: "sign-up" });
3014
3039
  }));
3015
3040
  }, this.onGuest = () => {
3016
3041
  this.run(async () => {
3017
- await o.signInAnonymously(), _("anonymous"), this.fire("authui-success", { method: "anonymous" });
3042
+ await l.signInAnonymously(), _("anonymous"), this.fire("authui-success", { method: "anonymous" });
3018
3043
  });
3019
3044
  }, this.onOAuth = (e) => {
3020
3045
  if (this.step === "sign-up" && !this.ensureLegalAccepted()) {
@@ -3022,7 +3047,7 @@ let $ = class extends U {
3022
3047
  return;
3023
3048
  }
3024
3049
  this.legalErrorFromOAuth = !1, this.run(async () => {
3025
- if (Ft(e), await o.signInWithOAuth(e), o.isPreview) {
3050
+ if (Ft(e), await l.signInWithOAuth(e), l.isPreview) {
3026
3051
  $t(), this.fire("authui-success", { method: "oauth" });
3027
3052
  return;
3028
3053
  }
@@ -3030,7 +3055,7 @@ let $ = class extends U {
3030
3055
  });
3031
3056
  }, this.onForgot = (e) => {
3032
3057
  e.preventDefault(), this.requireValid(e) && this.run(async () => {
3033
- await o.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
3058
+ await l.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
3034
3059
  });
3035
3060
  }, this.onReset = (e) => {
3036
3061
  if (e.preventDefault(), !this.requireValid(e)) return;
@@ -3040,11 +3065,11 @@ let $ = class extends U {
3040
3065
  }
3041
3066
  const t = this.recovery;
3042
3067
  t && this.run(async () => {
3043
- 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") };
3068
+ await l.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.auth.pending?.type === "reset-password" && l.setPending(null), this.go("sign-in"), this.notice = { tone: "success", message: this.t("passwordUpdated") };
3044
3069
  });
3045
3070
  }, this.onMagicUrl = (e) => {
3046
3071
  e.preventDefault(), this.requireValid(e) && this.run(async () => {
3047
- const t = await o.sendMagicUrl(this.email);
3072
+ const t = await l.sendMagicUrl(this.email);
3048
3073
  this.token = {
3049
3074
  userId: t.userId,
3050
3075
  kind: "magic-url",
@@ -3054,7 +3079,7 @@ let $ = class extends U {
3054
3079
  });
3055
3080
  }, this.onEmailOtp = (e) => {
3056
3081
  e.preventDefault(), this.requireValid(e) && this.run(async () => {
3057
- const t = await o.sendEmailOtp(this.email);
3082
+ const t = await l.sendEmailOtp(this.email);
3058
3083
  this.token = {
3059
3084
  userId: t.userId,
3060
3085
  kind: "email-otp",
@@ -3064,37 +3089,37 @@ let $ = class extends U {
3064
3089
  });
3065
3090
  }, this.onPhoneOtp = (e) => {
3066
3091
  e.preventDefault(), this.requireValid(e) && this.run(async () => {
3067
- const t = await o.sendPhoneOtp(this.phone);
3092
+ const t = await l.sendPhoneOtp(this.phone);
3068
3093
  this.token = { userId: t.userId, kind: "phone", target: this.phone }, this.code = "", this.resendCooldownUntil = Date.now() + 3e4, window.setTimeout(() => this.requestUpdate(), 3e4);
3069
3094
  });
3070
3095
  }, this.onVerifyCode = (e) => {
3071
3096
  if (e.preventDefault(), !this.requireValid(e)) return;
3072
3097
  const t = this.token;
3073
3098
  t && this.run(async () => {
3074
- await o.signInWithToken(t.userId, this.code), this.code = "", this.token = null, _(t.kind), this.fire("authui-success", { method: t.kind });
3099
+ await l.signInWithToken(t.userId, this.code), this.code = "", this.token = null, _(t.kind), this.fire("authui-success", { method: t.kind });
3075
3100
  }, "code");
3076
3101
  }, this.onChooseFactor = (e) => {
3077
3102
  this.run(async () => {
3078
- const t = await o.createMfaChallenge(e);
3103
+ const t = await l.createMfaChallenge(e);
3079
3104
  this.challenge = { id: t.$id, factor: e }, this.code = "";
3080
3105
  });
3081
3106
  }, this.onVerifyFactor = (e) => {
3082
3107
  if (e.preventDefault(), !this.requireValid(e)) return;
3083
3108
  const t = this.challenge;
3084
3109
  t && this.run(async () => {
3085
- await o.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
3110
+ await l.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.go("sign-in"), this.fire("authui-success", { method: "mfa" });
3086
3111
  }, "code");
3087
3112
  }, this.onCancelMfa = () => {
3088
3113
  this.run(async () => {
3089
3114
  try {
3090
- await o.signOut();
3115
+ await l.signOut();
3091
3116
  } catch (e) {
3092
3117
  if (!j(e, v.sessionNotFound)) throw e;
3093
3118
  }
3094
3119
  this.go("sign-in");
3095
3120
  });
3096
3121
  }, this.onSignOut = () => {
3097
- this.run(() => o.signOut());
3122
+ this.run(() => l.signOut());
3098
3123
  };
3099
3124
  }
3100
3125
  connectedCallback() {
@@ -3118,7 +3143,7 @@ let $ = class extends U {
3118
3143
  }
3119
3144
  /** Navigate between screens and reset transient state. */
3120
3145
  dismissNotice() {
3121
- this.notice = null, this.auth.pending?.type === "notice" && o.setPending(null);
3146
+ this.notice = null, this.auth.pending?.type === "notice" && l.setPending(null);
3122
3147
  }
3123
3148
  go(e) {
3124
3149
  e === "sign-up" && this.config?.signUp === !1 && (e = "sign-in"), this.focusOnStep = !0, this.step = e, this.error = "", this.notice = null, this.busy = !1, this.showPassword = !1, this.showPasswordConfirm = !1, this.password = "", this.passwordConfirm = "", this.legalAccepted = !1, this.legalErrorFromOAuth = !1, e !== "mfa" && (this.challenge = null), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
@@ -3153,14 +3178,14 @@ let $ = class extends U {
3153
3178
  <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
3154
3179
  ${this.renderHeader()}
3155
3180
  ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
3156
- ${this.notice.tone === "success" ? l.checkCircle : this.notice.tone === "error" ? l.alert : l.info}
3181
+ ${this.notice.tone === "success" ? o.checkCircle : this.notice.tone === "error" ? o.alert : o.info}
3157
3182
  <div class="alert-body">${this.notice.message}</div>
3158
3183
  <button
3159
3184
  class="btn btn-ghost btn-icon dismiss"
3160
3185
  @click=${() => this.dismissNotice()}
3161
3186
  aria-label=${this.t("close")}
3162
3187
  >
3163
- ${l.x}
3188
+ ${o.x}
3164
3189
  </button>
3165
3190
  </div>` : n}
3166
3191
  ${e}
@@ -3205,7 +3230,7 @@ let $ = class extends U {
3205
3230
  a.target.hidden = !0;
3206
3231
  }}
3207
3232
  />` : n}
3208
- ${o.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : n}
3233
+ ${l.isPreview ? r`<span class="badge badge-info preview">${this.t("preview")}</span>` : n}
3209
3234
  <h2 class="title" id="authui-title">${i}</h2>
3210
3235
  ${s ? r`<p class="description">${s}</p>` : n}
3211
3236
  </div>
@@ -3213,7 +3238,7 @@ let $ = class extends U {
3213
3238
  }
3214
3239
  renderError() {
3215
3240
  return this.error ? r`<div class="alert alert-error" role="alert">
3216
- ${l.alert}
3241
+ ${o.alert}
3217
3242
  <div class="alert-body">${this.error}</div>
3218
3243
  </div>` : n;
3219
3244
  }
@@ -3255,7 +3280,7 @@ let $ = class extends U {
3255
3280
  }}
3256
3281
  aria-label=${i ? this.t("hidePassword") : this.t("showPassword")}
3257
3282
  >
3258
- ${i ? l.eyeOff : l.eye}
3283
+ ${i ? o.eyeOff : o.eye}
3259
3284
  </button>
3260
3285
  </div>
3261
3286
  ${s && t ? r`<div class="strength" aria-live="polite">
@@ -3345,19 +3370,19 @@ let $ = class extends U {
3345
3370
  backLink(e = "sign-in") {
3346
3371
  return r`<div class="links">
3347
3372
  <button type="button" class="btn btn-link" @click=${() => this.go(e)}>
3348
- ${l.arrowLeft} ${this.t("back")}
3373
+ ${o.arrowLeft} ${this.t("back")}
3349
3374
  </button>
3350
3375
  </div>`;
3351
3376
  }
3352
3377
  renderStep() {
3353
3378
  if (this.auth.configError)
3354
3379
  return r`<div class="alert alert-error" role="alert">
3355
- ${l.alert}
3380
+ ${o.alert}
3356
3381
  <div class="alert-body">${this.auth.configError}</div>
3357
3382
  </div>`;
3358
3383
  if (!this.auth.configured)
3359
3384
  return r`<div class="alert alert-error" role="alert">
3360
- ${l.alert}
3385
+ ${o.alert}
3361
3386
  <div class="alert-body">${this.t("errorNotConfigured")}</div>
3362
3387
  </div>`;
3363
3388
  if (this.auth.status === "loading")
@@ -3406,10 +3431,10 @@ let $ = class extends U {
3406
3431
  this.embedded ? this.fire("authui-open", { view: "account" }) : X("account");
3407
3432
  }}
3408
3433
  >
3409
- ${l.settings} ${this.t("manageAccount")}
3434
+ ${o.settings} ${this.t("manageAccount")}
3410
3435
  </button>
3411
3436
  <button class="btn btn-ghost btn-block" @click=${this.onSignOut} ?disabled=${this.busy}>
3412
- ${l.logOut} ${this.t("signOut")}
3437
+ ${o.logOut} ${this.t("signOut")}
3413
3438
  </button>
3414
3439
  </div>
3415
3440
  </div>
@@ -3509,9 +3534,9 @@ let $ = class extends U {
3509
3534
  }
3510
3535
  renderSignIn() {
3511
3536
  const e = this.config?.methods ?? {}, t = e.emailPassword !== !1, i = (e.oauth?.length ?? 0) > 0, s = [
3512
- e.magicUrl ? { step: "magic-url", icon: l.link, label: this.t("sendMagicLink") } : null,
3513
- e.emailOtp ? { step: "email-otp", icon: l.mail, label: this.t("continueWithEmail") } : null,
3514
- e.phone ? { step: "phone", icon: l.smartphone, label: this.t("continueWithPhone") } : null
3537
+ e.magicUrl ? { step: "magic-url", icon: o.link, label: this.t("sendMagicLink") } : null,
3538
+ e.emailOtp ? { step: "email-otp", icon: o.mail, label: this.t("continueWithEmail") } : null,
3539
+ e.phone ? { step: "phone", icon: o.smartphone, label: this.t("continueWithPhone") } : null
3515
3540
  ].filter(Boolean);
3516
3541
  return r`
3517
3542
  <div class="stack">
@@ -3549,7 +3574,7 @@ let $ = class extends U {
3549
3574
  @click=${this.onGuest}
3550
3575
  ?disabled=${this.busy}
3551
3576
  >
3552
- ${l.ghost} ${this.t("continueAsGuest")}
3577
+ ${o.ghost} ${this.t("continueAsGuest")}
3553
3578
  ${z() === "anonymous" ? r`<span class="last-used-badge">${this.t("lastUsed")}</span>` : n}
3554
3579
  </button>` : n}
3555
3580
  ${t && this.config?.signUp !== !1 ? r`<div class="links">
@@ -3622,13 +3647,13 @@ let $ = class extends U {
3622
3647
  this.step = "sign-in", this.error = "", this.notice = null, this.focusOnStep = !0, this.fire("authui-view", { view: "sign-in" });
3623
3648
  }}
3624
3649
  >
3625
- ${l.arrowLeft} ${this.t("back")}
3650
+ ${o.arrowLeft} ${this.t("back")}
3626
3651
  </button>
3627
3652
  </div>
3628
3653
  </div>
3629
3654
  ` : r`<div class="stack">
3630
3655
  <div class="alert alert-error" role="alert">
3631
- ${l.alert}
3656
+ ${o.alert}
3632
3657
  <div class="alert-body">${this.t("errorInvalidToken")}</div>
3633
3658
  </div>
3634
3659
  <div class="links">
@@ -3646,7 +3671,7 @@ let $ = class extends U {
3646
3671
  }
3647
3672
  phraseBox(e) {
3648
3673
  return e ? r`<div class="alert alert-info">
3649
- ${l.shield}
3674
+ ${o.shield}
3650
3675
  <div class="alert-title">
3651
3676
  ${this.t("securityPhrase")}: <span class="code">${e}</span>
3652
3677
  </div>
@@ -3656,7 +3681,7 @@ let $ = class extends U {
3656
3681
  renderMagicUrl() {
3657
3682
  return this.token ? r`<div class="stack">
3658
3683
  <div class="alert alert-success" role="status">
3659
- ${l.mail}
3684
+ ${o.mail}
3660
3685
  <div class="alert-body">${this.t("magicLinkSent", { email: this.token.target })}</div>
3661
3686
  </div>
3662
3687
  ${this.phraseBox(this.token.phrase)} ${this.backLink()}
@@ -3673,10 +3698,10 @@ let $ = class extends U {
3673
3698
  const e = this.token;
3674
3699
  !e || Date.now() < this.resendCooldownUntil || (this.error = "", await this.run(async () => {
3675
3700
  if (e.kind === "phone") {
3676
- const t = await o.sendPhoneOtp(e.target);
3701
+ const t = await l.sendPhoneOtp(e.target);
3677
3702
  this.token = { userId: t.userId, kind: "phone", target: e.target };
3678
3703
  } else {
3679
- const t = await o.sendEmailOtp(e.target);
3704
+ const t = await l.sendEmailOtp(e.target);
3680
3705
  this.token = {
3681
3706
  userId: t.userId,
3682
3707
  kind: "email-otp",
@@ -3691,7 +3716,7 @@ let $ = class extends U {
3691
3716
  const e = this.token?.kind === "phone", t = Date.now() < this.resendCooldownUntil;
3692
3717
  return r`
3693
3718
  <div class="alert alert-info" role="status">
3694
- ${e ? l.smartphone : l.mail}
3719
+ ${e ? o.smartphone : o.mail}
3695
3720
  <div class="alert-body">${this.t("codeSent", { target: this.token.target })}</div>
3696
3721
  </div>
3697
3722
  ${this.phraseBox(this.token.phrase)}
@@ -3761,25 +3786,25 @@ let $ = class extends U {
3761
3786
  const i = [
3762
3787
  {
3763
3788
  factor: "totp",
3764
- icon: l.smartphone,
3789
+ icon: o.smartphone,
3765
3790
  label: this.t("mfaUseAuthenticator"),
3766
3791
  available: e?.totp ?? !0
3767
3792
  },
3768
3793
  {
3769
3794
  factor: "email",
3770
- icon: l.mail,
3795
+ icon: o.mail,
3771
3796
  label: this.t("mfaUseEmail"),
3772
3797
  available: e?.email ?? !0
3773
3798
  },
3774
3799
  {
3775
3800
  factor: "phone",
3776
- icon: l.phone,
3801
+ icon: o.phone,
3777
3802
  label: this.t("mfaUsePhone"),
3778
3803
  available: e?.phone ?? !0
3779
3804
  },
3780
3805
  {
3781
3806
  factor: "recoverycode",
3782
- icon: l.key,
3807
+ icon: o.key,
3783
3808
  label: this.t("mfaUseRecoveryCode"),
3784
3809
  available: e?.recoveryCode ?? !0
3785
3810
  }
@@ -3827,7 +3852,7 @@ let $ = class extends U {
3827
3852
  </form>
3828
3853
  <div class="links">
3829
3854
  <button type="button" class="btn btn-link" @click=${() => this.challenge = null}>
3830
- ${l.arrowLeft} ${this.t("back")}
3855
+ ${o.arrowLeft} ${this.t("back")}
3831
3856
  </button>
3832
3857
  <span aria-hidden="true">·</span>
3833
3858
  <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
@@ -3838,7 +3863,7 @@ let $ = class extends U {
3838
3863
  `;
3839
3864
  }
3840
3865
  };
3841
- $.styles = [...U.styles, Kt];
3866
+ $.styles = [...E.styles, Kt];
3842
3867
  k([
3843
3868
  m({ type: String })
3844
3869
  ], $.prototype, "view", 2);
@@ -3894,16 +3919,16 @@ k([
3894
3919
  c()
3895
3920
  ], $.prototype, "legalErrorFromOAuth", 2);
3896
3921
  $ = k([
3897
- T("authui-sign-in")
3922
+ L("authui-sign-in")
3898
3923
  ], $);
3899
3924
  var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
3900
3925
  for (var a = s > 1 ? void 0 : s ? Qt(t, i) : t, h = e.length - 1, d; h >= 0; h--)
3901
3926
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
3902
3927
  return s && a && Xt(t, i, a), a;
3903
3928
  };
3904
- let p = class extends U {
3929
+ let p = class extends E {
3905
3930
  constructor() {
3906
- super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = null, this.logsProbeStarted = !1, this.confirmDelete = !1, this.confirmRegenerate = !1, this.confirmRemoveAuthenticator = !1, this.confirmSignOutAll = !1, this.confirmDisconnectId = null, this.verifyEmailCooldownUntil = 0, this.verifyEmailCooldownTimer = null, this.onTabsKeydown = (e) => {
3931
+ super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.showOldPassword = !1, this.showNewPassword = !1, this.showNewPasswordConfirm = !1, this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = null, this.logsProbeStarted = !1, this.confirmDelete = !1, this.confirmRegenerate = !1, this.confirmRemoveAuthenticator = !1, this.confirmSignOutAll = !1, this.confirmDisconnectId = null, this.verifyEmailCooldownUntil = 0, this.verifyEmailCooldownTimer = null, this.verifyPhoneCooldownUntil = 0, this.verifyPhoneCooldownTimer = null, this.onTabsKeydown = (e) => {
3907
3932
  const t = [...this.renderRoot?.querySelectorAll('[role="tab"]') ?? []];
3908
3933
  if (!t.length) return;
3909
3934
  const i = t.findIndex((h) => h.getAttribute("aria-selected") === "true");
@@ -3918,12 +3943,12 @@ let p = class extends U {
3918
3943
  const a = t[s].id.replace("authui-tab-", "");
3919
3944
  this.select(a), requestAnimationFrame(() => t[s]?.focus());
3920
3945
  }, this.noticeTimer = null, this.factorsLoading = !1, this.onUpdateName = (e) => {
3921
- e.preventDefault(), this.requireValid(e) && this.run("name", () => o.updateName(this.nameInput), this.t("nameUpdated"));
3946
+ e.preventDefault(), this.requireValid(e) && this.run("name", () => l.updateName(this.nameInput), this.t("nameUpdated"));
3922
3947
  }, this.onUpdateEmail = (e) => {
3923
3948
  e.preventDefault(), this.requireValid(e) && this.run(
3924
3949
  "email",
3925
3950
  async () => {
3926
- await o.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
3951
+ await l.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
3927
3952
  },
3928
3953
  this.t("emailUpdated")
3929
3954
  );
@@ -3931,7 +3956,7 @@ let p = class extends U {
3931
3956
  e.preventDefault(), this.requireValid(e) && this.run(
3932
3957
  "phone",
3933
3958
  async () => {
3934
- await o.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
3959
+ await l.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
3935
3960
  },
3936
3961
  this.t("phoneUpdated")
3937
3962
  );
@@ -3939,7 +3964,7 @@ let p = class extends U {
3939
3964
  e.preventDefault(), this.requireValid(e) && this.run(
3940
3965
  "guest",
3941
3966
  async () => {
3942
- await o.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
3967
+ await l.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
3943
3968
  },
3944
3969
  this.t("accountConverted")
3945
3970
  );
@@ -3947,19 +3972,19 @@ let p = class extends U {
3947
3972
  Date.now() < this.verifyEmailCooldownUntil || this.run(
3948
3973
  "verify",
3949
3974
  async () => {
3950
- await o.sendEmailVerification(), this.startVerifyEmailCooldown();
3975
+ await l.sendEmailVerification(), this.startVerifyEmailCooldown();
3951
3976
  },
3952
3977
  this.t("verificationSent")
3953
3978
  );
3954
3979
  }, this.onSendPhoneVerification = () => {
3955
- this.run("verify-phone", async () => {
3956
- await o.sendPhoneVerification(), this.phoneCodeSent = !0;
3980
+ Date.now() < this.verifyPhoneCooldownUntil || this.run("verify-phone", async () => {
3981
+ await l.sendPhoneVerification(), this.phoneCodeSent = !0, this.startVerifyPhoneCooldown();
3957
3982
  });
3958
3983
  }, this.onConfirmPhoneVerification = (e) => {
3959
3984
  e.preventDefault(), this.requireValid(e) && this.run(
3960
3985
  "verify-phone-code",
3961
3986
  async () => {
3962
- await o.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
3987
+ await l.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1, this.verifyPhoneCooldownUntil = 0, this.clearVerifyPhoneCooldownTimer();
3963
3988
  },
3964
3989
  this.t("phoneVerified")
3965
3990
  );
@@ -3972,7 +3997,7 @@ let p = class extends U {
3972
3997
  this.run(
3973
3998
  "password",
3974
3999
  async () => {
3975
- await o.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
4000
+ await l.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
3976
4001
  },
3977
4002
  this.t("passwordChanged")
3978
4003
  );
@@ -3980,17 +4005,17 @@ let p = class extends U {
3980
4005
  }, this.onToggleMfa = () => {
3981
4006
  const e = !this.user?.mfa;
3982
4007
  this.run("mfa", async () => {
3983
- await o.setMfaEnabled(e), await this.loadFactors();
4008
+ await l.setMfaEnabled(e), await this.loadFactors();
3984
4009
  });
3985
4010
  }, this.onAddAuthenticator = () => {
3986
4011
  this.run("authenticator", async () => {
3987
- this.authenticator = await o.addAuthenticator(), this.authenticatorCode = "";
4012
+ this.authenticator = await l.addAuthenticator(), this.authenticatorCode = "";
3988
4013
  });
3989
4014
  }, this.onVerifyAuthenticator = (e) => {
3990
4015
  e.preventDefault(), this.requireValid(e) && this.run(
3991
4016
  "authenticator-code",
3992
4017
  async () => {
3993
- await o.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
4018
+ await l.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
3994
4019
  },
3995
4020
  this.t("authenticatorAdded")
3996
4021
  );
@@ -4000,15 +4025,15 @@ let p = class extends U {
4000
4025
  return;
4001
4026
  }
4002
4027
  this.confirmRemoveAuthenticator = !1, this.run("remove-authenticator", async () => {
4003
- await o.removeAuthenticator(), await this.loadFactors();
4028
+ await l.removeAuthenticator(), await this.loadFactors();
4004
4029
  });
4005
4030
  }, this.onRecoveryCodes = () => {
4006
4031
  this.run("recovery", async () => {
4007
4032
  try {
4008
- this.recoveryCodes = await o.createRecoveryCodes();
4033
+ this.recoveryCodes = await l.createRecoveryCodes();
4009
4034
  } catch (e) {
4010
4035
  if (!j(e, v.recoveryCodesExist)) throw e;
4011
- this.recoveryCodes = await o.getRecoveryCodes();
4036
+ this.recoveryCodes = await l.getRecoveryCodes();
4012
4037
  }
4013
4038
  await this.loadFactors();
4014
4039
  });
@@ -4018,7 +4043,7 @@ let p = class extends U {
4018
4043
  return;
4019
4044
  }
4020
4045
  this.confirmRegenerate = !1, this.run("recovery", async () => {
4021
- this.recoveryCodes = await o.regenerateRecoveryCodes();
4046
+ this.recoveryCodes = await l.regenerateRecoveryCodes();
4022
4047
  });
4023
4048
  }, this.onCopyCodes = async () => {
4024
4049
  if (this.recoveryCodes)
@@ -4038,7 +4063,7 @@ let p = class extends U {
4038
4063
  }
4039
4064
  }, this.onStepUpFactor = (e) => {
4040
4065
  this.run("stepup", async () => {
4041
- const t = await o.createMfaChallenge(e);
4066
+ const t = await l.createMfaChallenge(e);
4042
4067
  this.stepUp = { ...this.stepUp, challenge: { id: t.$id, factor: e } }, this.stepUpCode = "";
4043
4068
  });
4044
4069
  }, this.onStepUpVerify = (e) => {
@@ -4047,40 +4072,40 @@ let p = class extends U {
4047
4072
  t?.challenge && (async () => {
4048
4073
  let i = !1;
4049
4074
  await this.run("stepup-code", async () => {
4050
- await o.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", i = !0;
4075
+ await l.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", i = !0;
4051
4076
  }), i && await t.retry();
4052
4077
  })();
4053
4078
  }, this.onDeleteSession = (e) => {
4054
4079
  this.run(`session-${e}`, async () => {
4055
4080
  if ((this.sessions ?? []).some((i) => i.$id === e && i.current)) {
4056
- await o.signOut(), this.sessions = [];
4081
+ await l.signOut(), this.sessions = [];
4057
4082
  return;
4058
4083
  }
4059
- await o.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
4084
+ await l.signOut(e), this.sessions = (this.sessions ?? []).filter((i) => i.$id !== e);
4060
4085
  });
4061
4086
  }, this.onSignOutAll = () => {
4062
4087
  if (!this.confirmSignOutAll) {
4063
4088
  this.confirmSignOutAll = !0;
4064
4089
  return;
4065
4090
  }
4066
- this.confirmSignOutAll = !1, this.run("sessions-all", () => o.signOutEverywhere());
4091
+ this.confirmSignOutAll = !1, this.run("sessions-all", () => l.signOutEverywhere());
4067
4092
  }, this.onDeleteIdentity = (e) => {
4068
4093
  if (this.confirmDisconnectId !== e) {
4069
4094
  this.confirmDisconnectId = e;
4070
4095
  return;
4071
4096
  }
4072
4097
  this.confirmDisconnectId = null, this.run(`identity-${e}`, async () => {
4073
- await o.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
4098
+ await l.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
4074
4099
  });
4075
4100
  }, this.onDeleteAccount = () => {
4076
- this.run("delete", () => o.deleteAccount());
4101
+ this.run("delete", () => l.deleteAccount());
4077
4102
  };
4078
4103
  }
4079
4104
  connectedCallback() {
4080
4105
  super.connectedCallback(), this.active = this.tab, this.hydrate();
4081
4106
  }
4082
4107
  disconnectedCallback() {
4083
- super.disconnectedCallback(), this.clearVerifyEmailCooldownTimer(), this.noticeTimer && (clearTimeout(this.noticeTimer), this.noticeTimer = null);
4108
+ super.disconnectedCallback(), this.clearVerifyEmailCooldownTimer(), this.clearVerifyPhoneCooldownTimer(), this.noticeTimer && (clearTimeout(this.noticeTimer), this.noticeTimer = null);
4084
4109
  }
4085
4110
  willUpdate(e) {
4086
4111
  e.has("tab") && e.get("tab") !== void 0 && (this.active = this.tab), e.has("auth") && this.hydrate(), this.ensureLoaded();
@@ -4109,7 +4134,7 @@ let p = class extends U {
4109
4134
  '.tab[aria-selected="true"]'
4110
4135
  );
4111
4136
  i && typeof i.scrollIntoView == "function" && i.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
4112
- }), (e.has("confirmDelete") && this.confirmDelete || e.has("confirmSignOutAll") && this.confirmSignOutAll || e.has("confirmDisconnectId") && this.confirmDisconnectId !== null) && requestAnimationFrame(() => {
4137
+ }), (e.has("confirmDelete") && this.confirmDelete || e.has("confirmSignOutAll") && this.confirmSignOutAll || e.has("confirmDisconnectId") && this.confirmDisconnectId !== null || e.has("confirmRegenerate") && this.confirmRegenerate || e.has("confirmRemoveAuthenticator") && this.confirmRemoveAuthenticator) && requestAnimationFrame(() => {
4113
4138
  this.renderRoot.querySelector(
4114
4139
  ".card-footer [autofocus], .row-actions [autofocus], .inline [autofocus], .card-footer .btn-outline, .row-actions .btn-outline, .inline .btn-outline"
4115
4140
  )?.focus({ preventScroll: !0 });
@@ -4146,12 +4171,12 @@ let p = class extends U {
4146
4171
  // ─────────────────────────── loaders ───────────────────────────
4147
4172
  async loadSessions() {
4148
4173
  await this.run("sessions", async () => {
4149
- this.sessions = await o.listSessions();
4174
+ this.sessions = await l.listSessions();
4150
4175
  });
4151
4176
  }
4152
4177
  async loadIdentities() {
4153
4178
  await this.run("identities", async () => {
4154
- this.identities = await o.listIdentities();
4179
+ this.identities = await l.listIdentities();
4155
4180
  });
4156
4181
  }
4157
4182
  /** Probe once so Activity is never shown on servers without /account/logs. */
@@ -4159,7 +4184,7 @@ let p = class extends U {
4159
4184
  if (!this.logsProbeStarted) {
4160
4185
  this.logsProbeStarted = !0;
4161
4186
  try {
4162
- this.logs = await o.listLogs(), this.logsSupported = !0;
4187
+ this.logs = await l.listLogs(), this.logsSupported = !0;
4163
4188
  } catch {
4164
4189
  this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
4165
4190
  }
@@ -4172,7 +4197,7 @@ let p = class extends U {
4172
4197
  }
4173
4198
  this.busy = "logs";
4174
4199
  try {
4175
- this.logs = await o.listLogs();
4200
+ this.logs = await l.listLogs();
4176
4201
  } catch {
4177
4202
  this.logsSupported = !1, this.logs = [], this.active === "activity" && (this.active = "profile");
4178
4203
  } finally {
@@ -4183,7 +4208,7 @@ let p = class extends U {
4183
4208
  if (!this.factorsLoading) {
4184
4209
  this.factorsLoading = !0;
4185
4210
  try {
4186
- this.factors = await o.listMfaFactors();
4211
+ this.factors = await l.listMfaFactors();
4187
4212
  } catch {
4188
4213
  this.factors = {
4189
4214
  totp: !1,
@@ -4205,6 +4230,14 @@ let p = class extends U {
4205
4230
  clearVerifyEmailCooldownTimer() {
4206
4231
  this.verifyEmailCooldownTimer && (clearInterval(this.verifyEmailCooldownTimer), this.verifyEmailCooldownTimer = null);
4207
4232
  }
4233
+ startVerifyPhoneCooldown() {
4234
+ this.verifyPhoneCooldownUntil = Date.now() + 45e3, this.clearVerifyPhoneCooldownTimer(), this.verifyPhoneCooldownTimer = setInterval(() => {
4235
+ this.requestUpdate(), Date.now() >= this.verifyPhoneCooldownUntil && this.clearVerifyPhoneCooldownTimer();
4236
+ }, 1e3);
4237
+ }
4238
+ clearVerifyPhoneCooldownTimer() {
4239
+ this.verifyPhoneCooldownTimer && (clearInterval(this.verifyPhoneCooldownTimer), this.verifyPhoneCooldownTimer = null);
4240
+ }
4208
4241
  bind(e) {
4209
4242
  return (t) => {
4210
4243
  this[e] = t.target.value;
@@ -4214,7 +4247,7 @@ let p = class extends U {
4214
4247
  render() {
4215
4248
  if (!this.auth.configured)
4216
4249
  return r`<div class="alert alert-error" role="alert">
4217
- ${l.alert}
4250
+ ${o.alert}
4218
4251
  <div class="alert-body">${this.t("errorNotConfigured")}</div>
4219
4252
  </div>`;
4220
4253
  if (this.auth.status === "loading")
@@ -4251,7 +4284,7 @@ let p = class extends U {
4251
4284
  )}
4252
4285
  </div>
4253
4286
  ${this.notice ? r`<div class="alert alert-${this.notice.tone}" role="status">
4254
- ${this.notice.tone === "success" ? l.checkCircle : l.info}
4287
+ ${this.notice.tone === "success" ? o.checkCircle : o.info}
4255
4288
  <div class="alert-body">${this.notice.message}</div>
4256
4289
  <button
4257
4290
  class="btn btn-ghost btn-icon dismiss"
@@ -4260,7 +4293,7 @@ let p = class extends U {
4260
4293
  }}
4261
4294
  aria-label=${this.t("close")}
4262
4295
  >
4263
- ${l.x}
4296
+ ${o.x}
4264
4297
  </button>
4265
4298
  </div>` : n}
4266
4299
  ${this.stepUp ? this.renderStepUp() : r`<div
@@ -4283,14 +4316,14 @@ let p = class extends U {
4283
4316
  <div class="row-main">
4284
4317
  <span class="row-title" title=${t}>
4285
4318
  ${t}
4286
- ${e.mfa ? r`<span class="badge badge-success">${l.shieldCheck} ${this.t("mfaBadge")}</span>` : n}
4287
- ${o.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : n}
4319
+ ${e.mfa ? r`<span class="badge badge-success">${o.shieldCheck} ${this.t("mfaBadge")}</span>` : n}
4320
+ ${l.isPreview ? r`<span class="badge badge-info">${this.t("preview")}</span>` : n}
4288
4321
  </span>
4289
4322
  ${e.email && e.name ? r`<span class="row-sub" title=${e.email}>${e.email}</span>` : n}
4290
4323
  </div>
4291
4324
  </div>
4292
- <button class="btn btn-outline btn-sm" @click=${() => o.signOut()}>
4293
- ${l.logOut} ${this.t("signOut")}
4325
+ <button class="btn btn-outline btn-sm" @click=${() => l.signOut()}>
4326
+ ${o.logOut} ${this.t("signOut")}
4294
4327
  </button>
4295
4328
  </div>
4296
4329
  `;
@@ -4312,7 +4345,7 @@ let p = class extends U {
4312
4345
  error(e) {
4313
4346
  const t = this.errors[e];
4314
4347
  return t ? r`<div class="alert alert-error" role="alert">
4315
- ${l.alert}
4348
+ ${o.alert}
4316
4349
  <div class="alert-body">${t}</div>
4317
4350
  </div>` : n;
4318
4351
  }
@@ -4359,7 +4392,7 @@ let p = class extends U {
4359
4392
  </div>`;
4360
4393
  }
4361
4394
  verifiedBadge(e) {
4362
- return e ? r`<span class="badge badge-success">${l.check} ${this.t("verified")}</span>` : r`<span class="badge badge-warning">${this.t("unverified")}</span>`;
4395
+ return e ? r`<span class="badge badge-success">${o.check} ${this.t("verified")}</span>` : r`<span class="badge badge-warning">${this.t("unverified")}</span>`;
4363
4396
  }
4364
4397
  // ── Profile ──
4365
4398
  renderProfile() {
@@ -4584,13 +4617,27 @@ let p = class extends U {
4584
4617
  ${this.spinner("verify-phone")} ${this.t("sendCode")}
4585
4618
  </button>` : n}
4586
4619
  ${this.phoneCodeSent ? r`<button
4587
- class="btn btn-outline btn-sm"
4588
- type="button"
4589
- @click=${this.onConfirmPhoneVerification}
4590
- ?disabled=${!!this.busy}
4591
- >
4592
- ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
4593
- </button>` : n}
4620
+ class="btn btn-outline btn-sm"
4621
+ type="button"
4622
+ @click=${this.onSendPhoneVerification}
4623
+ ?disabled=${!!this.busy || Date.now() < this.verifyPhoneCooldownUntil}
4624
+ >
4625
+ ${this.spinner("verify-phone")}
4626
+ ${Date.now() < this.verifyPhoneCooldownUntil ? this.t("verificationResendIn", {
4627
+ seconds: Math.max(
4628
+ 1,
4629
+ Math.ceil((this.verifyPhoneCooldownUntil - Date.now()) / 1e3)
4630
+ )
4631
+ }) : this.t("resendCode")}
4632
+ </button>
4633
+ <button
4634
+ class="btn btn-outline btn-sm"
4635
+ type="button"
4636
+ @click=${this.onConfirmPhoneVerification}
4637
+ ?disabled=${!!this.busy}
4638
+ >
4639
+ ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
4640
+ </button>` : n}
4594
4641
  <button
4595
4642
  class="btn btn-primary btn-sm"
4596
4643
  type="submit"
@@ -4610,7 +4657,7 @@ let p = class extends U {
4610
4657
  this.t("deleteAccountDescription"),
4611
4658
  this.confirmDelete ? this.error("delete") : r`${this.error("delete")}
4612
4659
  <button class="btn btn-outline btn-sm warn" @click=${() => this.confirmDelete = !0}>
4613
- ${l.userX} ${this.t("deleteAccount")}
4660
+ ${o.userX} ${this.t("deleteAccount")}
4614
4661
  </button>`,
4615
4662
  this.confirmDelete ? this.confirmFooter(
4616
4663
  () => {
@@ -4642,28 +4689,48 @@ let p = class extends U {
4642
4689
  <label class="label" for="acc-old-password"
4643
4690
  >${this.t("currentPassword")}</label
4644
4691
  >
4645
- <input
4646
- class="input"
4647
- id="acc-old-password"
4648
- type="password"
4649
- .value=${this.oldPassword}
4650
- @input=${this.bind("oldPassword")}
4651
- autocomplete="current-password"
4652
- required
4653
- />
4692
+ <div class="input-wrap">
4693
+ <input
4694
+ class="input"
4695
+ id="acc-old-password"
4696
+ type=${this.showOldPassword ? "text" : "password"}
4697
+ .value=${this.oldPassword}
4698
+ @input=${this.bind("oldPassword")}
4699
+ autocomplete="current-password"
4700
+ required
4701
+ />
4702
+ <button
4703
+ type="button"
4704
+ class="btn btn-ghost btn-icon"
4705
+ @click=${() => this.showOldPassword = !this.showOldPassword}
4706
+ aria-label=${this.showOldPassword ? this.t("hidePassword") : this.t("showPassword")}
4707
+ >
4708
+ ${this.showOldPassword ? o.eyeOff : o.eye}
4709
+ </button>
4710
+ </div>
4654
4711
  </div>` : n}
4655
4712
  <div class="field">
4656
4713
  <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
4657
- <input
4658
- class="input"
4659
- id="acc-new-password"
4660
- type="password"
4661
- required
4662
- minlength="8"
4663
- .value=${this.newPassword}
4664
- @input=${this.bind("newPassword")}
4665
- autocomplete="new-password"
4666
- />
4714
+ <div class="input-wrap">
4715
+ <input
4716
+ class="input"
4717
+ id="acc-new-password"
4718
+ type=${this.showNewPassword ? "text" : "password"}
4719
+ required
4720
+ minlength="8"
4721
+ .value=${this.newPassword}
4722
+ @input=${this.bind("newPassword")}
4723
+ autocomplete="new-password"
4724
+ />
4725
+ <button
4726
+ type="button"
4727
+ class="btn btn-ghost btn-icon"
4728
+ @click=${() => this.showNewPassword = !this.showNewPassword}
4729
+ aria-label=${this.showNewPassword ? this.t("hidePassword") : this.t("showPassword")}
4730
+ >
4731
+ ${this.showNewPassword ? o.eyeOff : o.eye}
4732
+ </button>
4733
+ </div>
4667
4734
  ${this.newPassword ? (() => {
4668
4735
  const i = rt(this.newPassword);
4669
4736
  return r`<div class="strength" aria-live="polite">
@@ -4687,16 +4754,26 @@ let p = class extends U {
4687
4754
  <label class="label" for="acc-new-password-confirm"
4688
4755
  >${this.t("confirmPassword")}</label
4689
4756
  >
4690
- <input
4691
- class="input"
4692
- id="acc-new-password-confirm"
4693
- type="password"
4694
- required
4695
- minlength="8"
4696
- .value=${this.newPasswordConfirm}
4697
- @input=${this.bind("newPasswordConfirm")}
4698
- autocomplete="new-password"
4699
- />
4757
+ <div class="input-wrap">
4758
+ <input
4759
+ class="input"
4760
+ id="acc-new-password-confirm"
4761
+ type=${this.showNewPasswordConfirm ? "text" : "password"}
4762
+ required
4763
+ minlength="8"
4764
+ .value=${this.newPasswordConfirm}
4765
+ @input=${this.bind("newPasswordConfirm")}
4766
+ autocomplete="new-password"
4767
+ />
4768
+ <button
4769
+ type="button"
4770
+ class="btn btn-ghost btn-icon"
4771
+ @click=${() => this.showNewPasswordConfirm = !this.showNewPasswordConfirm}
4772
+ aria-label=${this.showNewPasswordConfirm ? this.t("hidePassword") : this.t("showPassword")}
4773
+ >
4774
+ ${this.showNewPasswordConfirm ? o.eyeOff : o.eye}
4775
+ </button>
4776
+ </div>
4700
4777
  </div>
4701
4778
  ${this.error("password")}
4702
4779
  </form>`,
@@ -4714,7 +4791,7 @@ let p = class extends U {
4714
4791
  </div>`;
4715
4792
  }
4716
4793
  renderMfaCard() {
4717
- const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? o.isPreview ? Ut(this.authenticator.uri) : new Ct(o.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
4794
+ 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() : "";
4718
4795
  return this.card(
4719
4796
  this.t("twoFactor"),
4720
4797
  this.t("twoFactorDescription"),
@@ -4734,7 +4811,7 @@ let p = class extends U {
4734
4811
  ></button>
4735
4812
  </div>
4736
4813
  ${e.mfa && !(this.factors?.totp || e.emailVerification || e.phoneVerification) ? r`<div class="alert alert-warning" role="status">
4737
- ${l.alert}
4814
+ ${o.alert}
4738
4815
  <div class="alert-body">
4739
4816
  ${this.t("mfaNoFactorWarning")}
4740
4817
  ${this.factors?.totp ? n : r`<div class="links">
@@ -4754,23 +4831,27 @@ let p = class extends U {
4754
4831
  <div class="toggle-row">
4755
4832
  <div class="row-main">
4756
4833
  <span class="row-title"
4757
- >${l.smartphone} ${this.t("authenticatorApp")}
4834
+ >${o.smartphone} ${this.t("authenticatorApp")}
4758
4835
  ${t ? this.verifiedBadge(!0) : n}</span
4759
4836
  >
4760
4837
  </div>
4761
4838
  ${t ? this.confirmRemoveAuthenticator ? r`<div class="inline">
4762
4839
  <button
4763
- class="btn btn-outline btn-sm warn"
4764
- @click=${this.onRemoveAuthenticator}
4840
+ type="button"
4841
+ class="btn btn-outline btn-sm"
4842
+ autofocus
4765
4843
  ?disabled=${!!this.busy}
4844
+ @click=${() => this.confirmRemoveAuthenticator = !1}
4766
4845
  >
4767
- ${this.spinner("remove-authenticator")} ${this.t("remove")}
4846
+ ${this.t("cancel")}
4768
4847
  </button>
4769
4848
  <button
4770
- class="btn btn-ghost btn-sm"
4771
- @click=${() => this.confirmRemoveAuthenticator = !1}
4849
+ type="button"
4850
+ class="btn btn-destructive btn-sm"
4851
+ @click=${this.onRemoveAuthenticator}
4852
+ ?disabled=${!!this.busy}
4772
4853
  >
4773
- ${this.t("cancel")}
4854
+ ${this.spinner("remove-authenticator")} ${this.t("remove")}
4774
4855
  </button>
4775
4856
  </div>` : r`<button
4776
4857
  class="btn btn-outline btn-sm"
@@ -4802,7 +4883,7 @@ let p = class extends U {
4802
4883
  this.onCopySecret();
4803
4884
  }}
4804
4885
  >
4805
- ${this.copied ? l.check : l.copy}
4886
+ ${this.copied ? o.check : o.copy}
4806
4887
  ${this.copied ? this.t("copied") : this.t("authenticatorCopyKey")}
4807
4888
  </button>
4808
4889
  </div>
@@ -4844,7 +4925,7 @@ let p = class extends U {
4844
4925
  this.t("recoveryCodesDescription") + " " + this.t("recoveryCodesOnceHint"),
4845
4926
  r`<div class="kv">
4846
4927
  ${this.recoveryCodes ? r`<div class="alert alert-warning">
4847
- ${l.alert}
4928
+ ${o.alert}
4848
4929
  <div class="alert-body">${this.t("recoveryCodesWarning")}</div>
4849
4930
  </div>
4850
4931
  <div class="codes">
@@ -4852,7 +4933,7 @@ let p = class extends U {
4852
4933
  </div>
4853
4934
  <div class="inline">
4854
4935
  <button class="btn btn-outline btn-sm" @click=${this.onCopyCodes}>
4855
- ${this.copied ? l.check : l.copy}
4936
+ ${this.copied ? o.check : o.copy}
4856
4937
  ${this.copied ? this.t("copied") : this.t("copy")}
4857
4938
  </button>
4858
4939
  <button class="btn btn-ghost btn-sm" @click=${() => this.recoveryCodes = null}>
@@ -4864,29 +4945,34 @@ let p = class extends U {
4864
4945
  @click=${this.onRecoveryCodes}
4865
4946
  ?disabled=${!!this.busy}
4866
4947
  >
4867
- ${this.spinner("recovery")} ${l.key}
4948
+ ${this.spinner("recovery")} ${o.key}
4868
4949
  ${e ? this.t("viewRecoveryCodes") : this.t("generateRecoveryCodes")}
4869
4950
  </button>
4870
4951
  ${e ? this.confirmRegenerate ? r`<div class="inline">
4871
4952
  <button
4872
- class="btn btn-outline btn-sm warn"
4873
- @click=${this.onRegenerateRecoveryCodes}
4953
+ type="button"
4954
+ class="btn btn-outline btn-sm"
4955
+ autofocus
4874
4956
  ?disabled=${!!this.busy}
4957
+ @click=${() => this.confirmRegenerate = !1}
4875
4958
  >
4876
- ${l.refresh} ${this.t("regenerateRecoveryCodes")}
4959
+ ${this.t("cancel")}
4877
4960
  </button>
4878
4961
  <button
4879
- class="btn btn-ghost btn-sm"
4880
- @click=${() => this.confirmRegenerate = !1}
4962
+ type="button"
4963
+ class="btn btn-destructive btn-sm"
4964
+ @click=${this.onRegenerateRecoveryCodes}
4965
+ ?disabled=${!!this.busy}
4881
4966
  >
4882
- ${this.t("cancel")}
4967
+ ${this.spinner("recovery")} ${o.refresh}
4968
+ ${this.t("regenerateRecoveryCodes")}
4883
4969
  </button>
4884
4970
  </div>` : r`<button
4885
4971
  class="btn btn-ghost btn-sm"
4886
4972
  @click=${this.onRegenerateRecoveryCodes}
4887
4973
  ?disabled=${!!this.busy}
4888
4974
  >
4889
- ${l.refresh} ${this.t("regenerateRecoveryCodes")}
4975
+ ${o.refresh} ${this.t("regenerateRecoveryCodes")}
4890
4976
  </button>` : n}
4891
4977
  </div>`}
4892
4978
  ${this.error("recovery")}
@@ -4898,25 +4984,25 @@ let p = class extends U {
4898
4984
  const e = this.stepUp, t = this.factors, i = [
4899
4985
  {
4900
4986
  factor: "totp",
4901
- icon: l.smartphone,
4987
+ icon: o.smartphone,
4902
4988
  label: this.t("mfaUseAuthenticator"),
4903
4989
  available: t?.totp ?? !0
4904
4990
  },
4905
4991
  {
4906
4992
  factor: "email",
4907
- icon: l.mail,
4993
+ icon: o.mail,
4908
4994
  label: this.t("mfaUseEmail"),
4909
4995
  available: t?.email ?? !0
4910
4996
  },
4911
4997
  {
4912
4998
  factor: "phone",
4913
- icon: l.phone,
4999
+ icon: o.phone,
4914
5000
  label: this.t("mfaUsePhone"),
4915
5001
  available: t?.phone ?? !0
4916
5002
  },
4917
5003
  {
4918
5004
  factor: "recoverycode",
4919
- icon: l.key,
5005
+ icon: o.key,
4920
5006
  label: this.t("mfaUseRecoveryCode"),
4921
5007
  available: t?.recoveryCode ?? !0
4922
5008
  }
@@ -4967,7 +5053,7 @@ let p = class extends U {
4967
5053
  // ── Sessions ──
4968
5054
  deviceIcon(e) {
4969
5055
  const t = (e.deviceName || "").toLowerCase(), i = (e.osName || e.osCode || "").toLowerCase();
4970
- return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? l.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? l.monitor : l.globe;
5056
+ return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? o.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? o.monitor : o.globe;
4971
5057
  }
4972
5058
  renderSessions() {
4973
5059
  const e = this.sessions;
@@ -4977,7 +5063,7 @@ let p = class extends U {
4977
5063
  void 0,
4978
5064
  r`${this.error("sessions")}
4979
5065
  ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
4980
- l.monitor,
5066
+ o.monitor,
4981
5067
  this.t("noSessions"),
4982
5068
  this.t("noSessionsDescription")
4983
5069
  ) : e.map(
@@ -5003,7 +5089,7 @@ let p = class extends U {
5003
5089
  ?disabled=${!!this.busy}
5004
5090
  aria-label=${this.t("signOutSession")}
5005
5091
  >
5006
- ${l.logOut}
5092
+ ${o.logOut}
5007
5093
  </button>
5008
5094
  </div>
5009
5095
  </div>`
@@ -5018,7 +5104,7 @@ let p = class extends U {
5018
5104
  @click=${this.onSignOutAll}
5019
5105
  ?disabled=${!!this.busy}
5020
5106
  >
5021
- ${this.spinner("sessions-all")} ${l.logOut} ${this.t("signOutAllSessions")}
5107
+ ${this.spinner("sessions-all")} ${o.logOut} ${this.t("signOutAllSessions")}
5022
5108
  </button>`,
5023
5109
  this.confirmSignOutAll ? this.confirmFooter(
5024
5110
  () => {
@@ -5043,7 +5129,7 @@ let p = class extends U {
5043
5129
  void 0,
5044
5130
  r`${this.error("identities")}
5045
5131
  ${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
5046
- l.link,
5132
+ o.link,
5047
5133
  this.t("noConnections"),
5048
5134
  this.t("noConnectionsDescription")
5049
5135
  ) : e.map(
@@ -5090,7 +5176,7 @@ let p = class extends U {
5090
5176
  (i) => r`<button
5091
5177
  class="btn btn-outline btn-sm"
5092
5178
  @click=${() => {
5093
- this.run(`connect-${i}`, () => o.signInWithOAuth(i));
5179
+ this.run(`connect-${i}`, () => l.signInWithOAuth(i));
5094
5180
  }}
5095
5181
  ?disabled=${!!this.busy}
5096
5182
  >
@@ -5109,7 +5195,7 @@ let p = class extends U {
5109
5195
  this.t("activity"),
5110
5196
  void 0,
5111
5197
  r`${e === null ? r`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? this.emptyState(
5112
- l.activity,
5198
+ o.activity,
5113
5199
  this.t("noActivity"),
5114
5200
  this.t("noActivityDescription")
5115
5201
  ) : e.map(
@@ -5128,8 +5214,8 @@ let p = class extends U {
5128
5214
  }
5129
5215
  };
5130
5216
  p.styles = [
5131
- ...U.styles,
5132
- L`
5217
+ ...E.styles,
5218
+ T`
5133
5219
  :host {
5134
5220
  display: block;
5135
5221
  width: 100%;
@@ -5276,6 +5362,15 @@ f([
5276
5362
  f([
5277
5363
  c()
5278
5364
  ], p.prototype, "newPasswordConfirm", 2);
5365
+ f([
5366
+ c()
5367
+ ], p.prototype, "showOldPassword", 2);
5368
+ f([
5369
+ c()
5370
+ ], p.prototype, "showNewPassword", 2);
5371
+ f([
5372
+ c()
5373
+ ], p.prototype, "showNewPasswordConfirm", 2);
5279
5374
  f([
5280
5375
  c()
5281
5376
  ], p.prototype, "authenticator", 2);
@@ -5327,15 +5422,18 @@ f([
5327
5422
  f([
5328
5423
  c()
5329
5424
  ], p.prototype, "verifyEmailCooldownUntil", 2);
5425
+ f([
5426
+ c()
5427
+ ], p.prototype, "verifyPhoneCooldownUntil", 2);
5330
5428
  p = f([
5331
- T("authui-account")
5429
+ L("authui-account")
5332
5430
  ], p);
5333
5431
  var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
5334
5432
  for (var a = s > 1 ? void 0 : s ? te(t, i) : t, h = e.length - 1, d; h >= 0; h--)
5335
5433
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
5336
5434
  return s && a && Jt(t, i, a), a;
5337
5435
  };
5338
- let I = class extends U {
5436
+ let I = class extends E {
5339
5437
  constructor() {
5340
5438
  super(...arguments), this.open = !1, this.view = "sign-in", this.closeOnSuccess = !0, this.handledPending = null, this.scrollCue = !1, this.bodyResizeObserver = null, this.onOpenEvent = (e) => {
5341
5439
  const t = e.detail ?? {};
@@ -5416,7 +5514,7 @@ let I = class extends U {
5416
5514
  @click=${this.hide}
5417
5515
  aria-label=${this.t("close")}
5418
5516
  >
5419
- ${l.x}
5517
+ ${o.x}
5420
5518
  </button>
5421
5519
  </div>
5422
5520
  <div class="body" @scroll=${this.syncScrollCue}>
@@ -5432,8 +5530,8 @@ let I = class extends U {
5432
5530
  }
5433
5531
  };
5434
5532
  I.styles = [
5435
- ...U.styles,
5436
- L`
5533
+ ...E.styles,
5534
+ T`
5437
5535
  :host {
5438
5536
  display: contents;
5439
5537
  }
@@ -5443,9 +5541,11 @@ I.styles = [
5443
5541
  background: var(--authui-background);
5444
5542
  color: var(--authui-foreground);
5445
5543
  padding: 0;
5446
- width: calc(100% - 2rem);
5544
+ width: calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
5447
5545
  max-width: 440px;
5448
- max-height: calc(100dvh - 2rem);
5546
+ max-height: calc(
5547
+ 100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
5548
+ );
5449
5549
  box-shadow: var(--authui-shadow-lg);
5450
5550
  overflow: hidden;
5451
5551
  z-index: var(--authui-z);
@@ -5473,7 +5573,9 @@ I.styles = [
5473
5573
  .frame {
5474
5574
  display: flex;
5475
5575
  flex-direction: column;
5476
- max-height: calc(100dvh - 2rem);
5576
+ max-height: calc(
5577
+ 100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
5578
+ );
5477
5579
  min-height: 0;
5478
5580
  position: relative;
5479
5581
  }
@@ -5482,11 +5584,13 @@ I.styles = [
5482
5584
  display: flex;
5483
5585
  justify-content: flex-end;
5484
5586
  align-items: center;
5485
- padding: 8px 8px 0;
5587
+ padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0
5588
+ max(8px, env(safe-area-inset-left, 0px));
5486
5589
  background: var(--authui-background);
5487
5590
  }
5488
5591
  .body {
5489
- padding: 4px 24px 28px;
5592
+ padding: 4px max(24px, env(safe-area-inset-right, 0px))
5593
+ max(28px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
5490
5594
  overflow-y: auto;
5491
5595
  flex: 1 1 auto;
5492
5596
  min-height: 0;
@@ -5556,14 +5660,14 @@ R([
5556
5660
  at(".body")
5557
5661
  ], I.prototype, "bodyEl", 2);
5558
5662
  I = R([
5559
- T("authui-modal")
5663
+ L("authui-modal")
5560
5664
  ], I);
5561
5665
  var ee = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, J = (e, t, i, s) => {
5562
5666
  for (var a = s > 1 ? void 0 : s ? ie(t, i) : t, h = e.length - 1, d; h >= 0; h--)
5563
5667
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
5564
5668
  return s && a && ee(t, i, a), a;
5565
5669
  };
5566
- let V = class extends U {
5670
+ let V = class extends E {
5567
5671
  constructor() {
5568
5672
  super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
5569
5673
  }
@@ -5581,8 +5685,8 @@ let V = class extends U {
5581
5685
  }
5582
5686
  };
5583
5687
  V.styles = [
5584
- ...U.styles,
5585
- L`
5688
+ ...E.styles,
5689
+ T`
5586
5690
  :host {
5587
5691
  display: inline-block;
5588
5692
  }
@@ -5601,14 +5705,14 @@ J([
5601
5705
  m({ type: String })
5602
5706
  ], V.prototype, "size", 2);
5603
5707
  V = J([
5604
- T("authui-button")
5708
+ L("authui-button")
5605
5709
  ], V);
5606
5710
  var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, F = (e, t, i, s) => {
5607
5711
  for (var a = s > 1 ? void 0 : s ? re(t, i) : t, h = e.length - 1, d; h >= 0; h--)
5608
5712
  (d = e[h]) && (a = (s ? d(t, i, a) : d(a)) || a);
5609
5713
  return s && a && se(t, i, a), a;
5610
5714
  };
5611
- let E = class extends U {
5715
+ let U = class extends E {
5612
5716
  constructor() {
5613
5717
  super(...arguments), this.showTeams = !1, this.menuItems = [], this.src = "", this.menuOpen = !1, this.menuAbove = !1, this.teams = [], this.teamsLoading = !1, this.activeTeamId = null, this.onReposition = () => {
5614
5718
  this.menuOpen && this.placeMenu();
@@ -5632,7 +5736,7 @@ let E = class extends U {
5632
5736
  }, this.toggleMenu = () => {
5633
5737
  this.menuOpen = !this.menuOpen, this.menuOpen && this.showTeams && this.loadTeams();
5634
5738
  }, this.selectTeam = (e) => {
5635
- o.setActiveTeam({ $id: e.$id, name: e.name }), this.activeTeamId = e.$id, this.dispatchEvent(
5739
+ l.setActiveTeam({ $id: e.$id, name: e.name }), this.activeTeamId = e.$id, this.dispatchEvent(
5636
5740
  new CustomEvent("authui-active-team", {
5637
5741
  detail: { teamId: e.$id, team: e },
5638
5742
  bubbles: !0,
@@ -5669,9 +5773,9 @@ let E = class extends U {
5669
5773
  })) : this.menuAbove = !1), this.menuOpen && (e.has("teams") || e.has("teamsLoading")) && requestAnimationFrame(() => this.placeMenu());
5670
5774
  }
5671
5775
  async loadTeams() {
5672
- this.teamsLoading = !0, this.activeTeamId = o.getActiveTeamId();
5776
+ this.teamsLoading = !0, this.activeTeamId = l.getActiveTeamId();
5673
5777
  try {
5674
- this.teams = await o.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, o.setActiveTeam(null));
5778
+ this.teams = await l.listTeams(), this.activeTeamId && !this.teams.some((e) => e.$id === this.activeTeamId) && (this.activeTeamId = null, l.setActiveTeam(null));
5675
5779
  } catch {
5676
5780
  this.teams = [];
5677
5781
  } finally {
@@ -5715,9 +5819,9 @@ let E = class extends U {
5715
5819
  aria-checked=${a.$id === this.activeTeamId ? "true" : "false"}
5716
5820
  @click=${() => this.selectTeam(a)}
5717
5821
  >
5718
- ${l.users}
5822
+ ${o.users}
5719
5823
  <span title=${a.name}>${a.name}</span>
5720
- ${a.$id === this.activeTeamId ? r`<span class="check">${l.check}</span>` : n}
5824
+ ${a.$id === this.activeTeamId ? r`<span class="check">${o.check}</span>` : n}
5721
5825
  </button>`
5722
5826
  )}
5723
5827
  </div>` : n}
@@ -5730,16 +5834,16 @@ let E = class extends U {
5730
5834
  this.menuOpen = !1, X("account");
5731
5835
  }}
5732
5836
  >
5733
- ${l.settings} ${this.t("manageAccount")}
5837
+ ${o.settings} ${this.t("manageAccount")}
5734
5838
  </button>
5735
5839
  <button
5736
5840
  class="menu-item"
5737
5841
  role="menuitem"
5738
5842
  @click=${() => {
5739
- this.menuOpen = !1, o.signOut();
5843
+ this.menuOpen = !1, l.signOut();
5740
5844
  }}
5741
5845
  >
5742
- ${l.logOut} ${this.t("signOut")}
5846
+ ${o.logOut} ${this.t("signOut")}
5743
5847
  </button>
5744
5848
  </div>` : n}
5745
5849
  `;
@@ -5781,9 +5885,9 @@ let E = class extends U {
5781
5885
  }) : n;
5782
5886
  }
5783
5887
  };
5784
- E.styles = [
5785
- ...U.styles,
5786
- L`
5888
+ U.styles = [
5889
+ ...E.styles,
5890
+ T`
5787
5891
  :host {
5788
5892
  display: inline-block;
5789
5893
  position: relative;
@@ -5905,49 +6009,49 @@ E.styles = [
5905
6009
  ];
5906
6010
  F([
5907
6011
  m({ type: Boolean, attribute: "show-teams" })
5908
- ], E.prototype, "showTeams", 2);
6012
+ ], U.prototype, "showTeams", 2);
5909
6013
  F([
5910
6014
  m({ attribute: !1 })
5911
- ], E.prototype, "menuItems", 2);
6015
+ ], U.prototype, "menuItems", 2);
5912
6016
  F([
5913
6017
  m({ type: String })
5914
- ], E.prototype, "src", 2);
6018
+ ], U.prototype, "src", 2);
5915
6019
  F([
5916
6020
  c()
5917
- ], E.prototype, "menuOpen", 2);
6021
+ ], U.prototype, "menuOpen", 2);
5918
6022
  F([
5919
6023
  c()
5920
- ], E.prototype, "menuAbove", 2);
6024
+ ], U.prototype, "menuAbove", 2);
5921
6025
  F([
5922
6026
  c()
5923
- ], E.prototype, "teams", 2);
6027
+ ], U.prototype, "teams", 2);
5924
6028
  F([
5925
6029
  c()
5926
- ], E.prototype, "teamsLoading", 2);
6030
+ ], U.prototype, "teamsLoading", 2);
5927
6031
  F([
5928
6032
  c()
5929
- ], E.prototype, "activeTeamId", 2);
5930
- E = F([
5931
- T("authui-user-button")
5932
- ], E);
6033
+ ], U.prototype, "activeTeamId", 2);
6034
+ U = F([
6035
+ L("authui-user-button")
6036
+ ], U);
5933
6037
  export {
5934
- Lt as A,
6038
+ Tt as A,
5935
6039
  ce as C,
5936
6040
  v as E,
5937
6041
  yt as F,
5938
6042
  It as P,
5939
- o as a,
6043
+ l as a,
5940
6044
  p as b,
5941
6045
  de as c,
5942
6046
  V as d,
5943
6047
  w as e,
5944
- U as f,
6048
+ E as f,
5945
6049
  I as g,
5946
6050
  H as h,
5947
6051
  $ as i,
5948
- E as j,
6052
+ U as j,
5949
6053
  le as k,
5950
- mt as l,
6054
+ ft as l,
5951
6055
  St as m,
5952
6056
  Y as n,
5953
6057
  X as o,