@arcblock/did-connect-core 4.1.52 → 4.1.54

package/dist/ui/index.bundle.js

@@ -100,7 +100,7 @@ var lightTokens = {
 var DESIGN_TOKENS_CSS = (
   /* css */
   `
-  :root {
+  :root, :host {
     /* Backgrounds \u2014 layered depth */
     --bg-root:      ${tokens.bg.root};
     --bg-surface:   ${tokens.bg.surface};
@@ -159,7 +159,7 @@ var DESIGN_TOKENS_CSS = (
 var DESIGN_TOKENS_LIGHT_CSS = (
   /* css */
   `
-  [data-theme="light"] {
+  [data-theme="light"], :host([data-theme="light"]) {
     --bg-root:      ${lightTokens.bg.root};
     --bg-surface:   ${lightTokens.bg.surface};
     --bg-card:      ${lightTokens.bg.card};
@@ -190,8 +190,8 @@ var DESIGN_RESET_CSS = (
   /* css */
   `
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  html { color-scheme: dark; }
-  html[data-theme="light"] { color-scheme: light; }
+  html, :host { color-scheme: dark; }
+  html[data-theme="light"], :host([data-theme="light"]) { color-scheme: light; }
   body {
     font-family: ${tokens.font.family};
     background: var(--bg-root);
@@ -378,18 +378,39 @@ if (typeof customElements !== "undefined" && !customElements.get("did-address"))
 // dist/ui/i18n.js
 var messages = {
   en: {
-    signIn: "Sign in",
-    signInTo: "Sign in to {appName}",
+    emailExplanation: "We will send you a verification code. No password needed.",
+    otherMethods: "Other ways to sign in",
+    passkeyCreateAccount: "Create an account with Passkey",
+    lastUsed: "Last used",
+    passkeyExplanation: "Create a new account using your fingerprint, face, or device unlock. Your device will ask you to save a Passkey. Already have an account? Go back to sign in.",
+    continueWith: "Continue with {provider}",
+    oauthWaiting: "Continue in the {provider} window",
+    oauthIncomplete: "Sign-in is not complete. Reopen the window or choose another method.",
+    oauthReopen: "Reopen window",
+    oauthUnconfirmed: "We could not confirm sign-in. Reload this page to check your session before trying again.",
+    oauthCheckSession: "Reload and check sign-in",
+    oauthCancelled: "Stopped waiting for sign-in. If the provider window is still open, close it before retrying.",
+    oauthDenied: "Authorization was declined. Try again or choose another sign-in method.",
+    oauthBlocked: "Your browser blocked the sign-in window. Reopen it or continue on this page.",
+    oauthTimedOut: "Sign-in timed out. Reopen the window to start again.",
+    oauthFailed: "We could not complete sign-in. Try again or choose another method.",
+    oauthFullPage: "Continue on this page",
+    emailEdit: "Change email",
+    emailCooldown: "Resend in {seconds}s",
+    walletRetry: "Wallet did not open? Try again or scan the QR code.",
+    tryAgain: "Try again",
+    signIn: "Sign in or create an account",
+    signInTo: "Sign in or join {appName}",
     passkeyButton: "Continue with Passkey",
     passkeySignIn: "Sign in with Passkey",
     passkeyCreate: "Create Passkey",
-    passkeyFirstTime: "First time? Create a passkey",
+    passkeyFirstTime: "First time? Create an account",
     passkeyBackToSignIn: "Back to sign in",
     passkeyWaiting: "Waiting for passkey\u2026",
     passkeyCreating: "Creating your passkey\u2026",
-    passkeyNoLocal: "No passkey found on this device.",
+    passkeyNoLocal: "Passkey verification was not completed. Retry, use another device, or choose another method.",
     passkeyUseAnotherDevice: "Use another device",
-    passkeyCreateInstead: "Create a new passkey instead",
+    passkeyCreateInstead: "First time? Create an account",
     didWalletButton: "Continue with DID Wallet",
     didWalletButtonShort: "DID Wallet",
     scanWithWallet: "Scan with your DID Wallet",
@@ -422,26 +443,47 @@ var messages = {
     emailTitle: "Continue with Email",
     emailSubmit: "Send Code",
     emailSending: "Sending code...",
-    emailSent: "We sent a 6-digit code to {email}",
-    emailCodePlaceholder: "6-digit code",
+    emailSent: "We sent an 8-digit code to {email}",
+    emailCodePlaceholder: "8-digit code",
     emailVerify: "Verify",
     emailResend: "Resend code",
     emailInvalid: "Please enter a valid email address.",
-    emailCodeInvalid: "Please enter the 6-digit code."
+    emailCodeInvalid: "Please enter the 8-digit code."
   },
   zh: {
-    signIn: "\u767B\u5F55",
-    signInTo: "\u767B\u5F55\u5230 {appName}",
+    emailExplanation: "\u6211\u4EEC\u4F1A\u53D1\u9001\u9A8C\u8BC1\u7801\uFF0C\u65E0\u9700\u5BC6\u7801\u3002",
+    otherMethods: "\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F",
+    passkeyCreateAccount: "\u4F7F\u7528 Passkey \u521B\u5EFA\u8D26\u6237",
+    lastUsed: "\u4E0A\u6B21\u4F7F\u7528",
+    passkeyExplanation: "\u4F7F\u7528\u6307\u7EB9\u3001\u9762\u5BB9\u6216\u8BBE\u5907\u89E3\u9501\u65B9\u5F0F\u521B\u5EFA\u65B0\u8D26\u6237\uFF0C\u65E0\u9700\u5BC6\u7801\u3002\u8BBE\u5907\u4F1A\u63D0\u793A\u4FDD\u5B58 Passkey\u3002\u5DF2\u6709\u8D26\u6237\uFF1F\u8BF7\u8FD4\u56DE\u767B\u5F55\u3002",
+    continueWith: "\u4F7F\u7528 {provider} \u7EE7\u7EED",
+    oauthWaiting: "\u8BF7\u5728 {provider} \u7A97\u53E3\u4E2D\u7EE7\u7EED",
+    oauthIncomplete: "\u767B\u5F55\u5C1A\u672A\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u91CD\u65B0\u6253\u5F00\u7A97\u53E3\u6216\u9009\u62E9\u5176\u4ED6\u65B9\u5F0F\u3002",
+    oauthReopen: "\u91CD\u65B0\u6253\u5F00\u7A97\u53E3",
+    oauthUnconfirmed: "\u6682\u65F6\u65E0\u6CD5\u786E\u8BA4\u767B\u5F55\u7ED3\u679C\u3002\u8BF7\u5148\u91CD\u65B0\u52A0\u8F7D\u9875\u9762\u68C0\u67E5\u767B\u5F55\u72B6\u6001\uFF0C\u518D\u51B3\u5B9A\u662F\u5426\u91CD\u8BD5\u3002",
+    oauthCheckSession: "\u91CD\u65B0\u52A0\u8F7D\u5E76\u68C0\u67E5\u767B\u5F55\u72B6\u6001",
+    oauthCancelled: "\u5DF2\u505C\u6B62\u7B49\u5F85\u767B\u5F55\u3002\u82E5\u6388\u6743\u7A97\u53E3\u4ECD\u7136\u6253\u5F00\uFF0C\u8BF7\u5173\u95ED\u540E\u518D\u91CD\u8BD5\u3002",
+    oauthDenied: "\u60A8\u672A\u540C\u610F\u6388\u6743\u3002\u53EF\u4EE5\u91CD\u8BD5\u6216\u9009\u62E9\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F\u3002",
+    oauthBlocked: "\u6D4F\u89C8\u5668\u62E6\u622A\u4E86\u767B\u5F55\u7A97\u53E3\u3002\u8BF7\u91CD\u65B0\u6253\u5F00\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u7EE7\u7EED\u3002",
+    oauthTimedOut: "\u767B\u5F55\u7B49\u5F85\u5DF2\u8D85\u65F6\u3002\u8BF7\u91CD\u65B0\u6253\u5F00\u7A97\u53E3\u518D\u8BD5\u3002",
+    oauthFailed: "\u672A\u80FD\u5B8C\u6210\u767B\u5F55\u3002\u8BF7\u91CD\u8BD5\u6216\u9009\u62E9\u5176\u4ED6\u65B9\u5F0F\u3002",
+    oauthFullPage: "\u5728\u5F53\u524D\u9875\u9762\u7EE7\u7EED",
+    emailEdit: "\u4FEE\u6539\u90AE\u7BB1",
+    emailCooldown: "{seconds} \u79D2\u540E\u91CD\u53D1",
+    walletRetry: "\u94B1\u5305\u672A\u6253\u5F00\uFF1F\u8BF7\u91CD\u8BD5\u6216\u626B\u63CF\u4E8C\u7EF4\u7801\u3002",
+    tryAgain: "\u91CD\u8BD5",
+    signIn: "\u767B\u5F55\u6216\u521B\u5EFA\u8D26\u6237",
+    signInTo: "\u767B\u5F55\u6216\u52A0\u5165 {appName}",
     passkeyButton: "\u4F7F\u7528 Passkey \u7EE7\u7EED",
     passkeySignIn: "\u4F7F\u7528 Passkey \u767B\u5F55",
     passkeyCreate: "\u521B\u5EFA Passkey",
-    passkeyFirstTime: "\u7B2C\u4E00\u6B21\u4F7F\u7528\uFF1F\u521B\u5EFA Passkey",
+    passkeyFirstTime: "\u9996\u6B21\u4F7F\u7528\uFF1F\u521B\u5EFA\u8D26\u6237",
     passkeyBackToSignIn: "\u8FD4\u56DE\u767B\u5F55",
     passkeyWaiting: "\u6B63\u5728\u7B49\u5F85 Passkey\u2026",
     passkeyCreating: "\u6B63\u5728\u521B\u5EFA Passkey\u2026",
-    passkeyNoLocal: "\u6B64\u8BBE\u5907\u4E0A\u6CA1\u6709\u627E\u5230 Passkey\u3002",
+    passkeyNoLocal: "\u8FD9\u6B21\u672A\u5B8C\u6210 Passkey \u9A8C\u8BC1\u3002\u8BF7\u91CD\u8BD5\u3001\u4F7F\u7528\u5176\u4ED6\u8BBE\u5907\uFF0C\u6216\u9009\u62E9\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F\u3002",
     passkeyUseAnotherDevice: "\u7528\u5176\u4ED6\u8BBE\u5907\u767B\u5F55",
-    passkeyCreateInstead: "\u6539\u4E3A\u521B\u5EFA\u65B0\u7684 Passkey",
+    passkeyCreateInstead: "\u9996\u6B21\u4F7F\u7528\uFF1F\u521B\u5EFA\u8D26\u6237",
     didWalletButton: "\u4F7F\u7528 DID Wallet \u7EE7\u7EED",
     didWalletButtonShort: "DID Wallet",
     scanWithWallet: "\u8BF7\u4F7F\u7528 DID Wallet \u626B\u7801",
@@ -475,25 +517,46 @@ var messages = {
     emailSubmit: "\u53D1\u9001\u9A8C\u8BC1\u7801",
     emailSending: "\u6B63\u5728\u53D1\u9001\u9A8C\u8BC1\u7801...",
     emailSent: "\u9A8C\u8BC1\u7801\u5DF2\u53D1\u9001\u81F3 {email}",
-    emailCodePlaceholder: "6 \u4F4D\u9A8C\u8BC1\u7801",
+    emailCodePlaceholder: "8 \u4F4D\u9A8C\u8BC1\u7801",
     emailVerify: "\u9A8C\u8BC1",
     emailResend: "\u91CD\u65B0\u53D1\u9001",
     emailInvalid: "\u8BF7\u8F93\u5165\u6709\u6548\u7684\u90AE\u7BB1\u5730\u5740\u3002",
-    emailCodeInvalid: "\u8BF7\u8F93\u5165 6 \u4F4D\u9A8C\u8BC1\u7801\u3002"
+    emailCodeInvalid: "\u8BF7\u8F93\u5165 8 \u4F4D\u9A8C\u8BC1\u7801\u3002"
   },
   "zh-TW": {
-    signIn: "\u767B\u5165",
-    signInTo: "\u767B\u5165\u81F3 {appName}",
+    emailExplanation: "\u6211\u5011\u6703\u50B3\u9001\u9A57\u8B49\u78BC\uFF0C\u7121\u9700\u5BC6\u78BC\u3002",
+    otherMethods: "\u5176\u4ED6\u767B\u5165\u65B9\u5F0F",
+    passkeyCreateAccount: "\u4F7F\u7528 Passkey \u5EFA\u7ACB\u5E33\u6236",
+    lastUsed: "\u4E0A\u6B21\u4F7F\u7528",
+    passkeyExplanation: "\u4F7F\u7528\u6307\u7D0B\u3001\u9762\u5BB9\u6216\u88DD\u7F6E\u89E3\u9396\u65B9\u5F0F\u5EFA\u7ACB\u65B0\u5E33\u6236\uFF0C\u7121\u9700\u5BC6\u78BC\u3002\u88DD\u7F6E\u6703\u63D0\u793A\u5132\u5B58 Passkey\u3002\u5DF2\u6709\u5E33\u6236\uFF1F\u8ACB\u8FD4\u56DE\u767B\u5165\u3002",
+    continueWith: "\u4F7F\u7528 {provider} \u7E7C\u7E8C",
+    oauthWaiting: "\u8ACB\u5728 {provider} \u8996\u7A97\u4E2D\u7E7C\u7E8C",
+    oauthIncomplete: "\u767B\u5165\u5C1A\u672A\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u91CD\u65B0\u958B\u555F\u8996\u7A97\u6216\u9078\u64C7\u5176\u4ED6\u65B9\u5F0F\u3002",
+    oauthReopen: "\u91CD\u65B0\u958B\u555F\u8996\u7A97",
+    oauthUnconfirmed: "\u66AB\u6642\u7121\u6CD5\u78BA\u8A8D\u767B\u5165\u7D50\u679C\u3002\u8ACB\u5148\u91CD\u65B0\u8F09\u5165\u9801\u9762\u6AA2\u67E5\u767B\u5165\u72C0\u614B\uFF0C\u518D\u6C7A\u5B9A\u662F\u5426\u91CD\u8A66\u3002",
+    oauthCheckSession: "\u91CD\u65B0\u8F09\u5165\u4E26\u6AA2\u67E5\u767B\u5165\u72C0\u614B",
+    oauthCancelled: "\u5DF2\u505C\u6B62\u7B49\u5F85\u767B\u5165\u3002\u82E5\u6388\u6B0A\u8996\u7A97\u4ECD\u7136\u958B\u555F\uFF0C\u8ACB\u95DC\u9589\u5F8C\u518D\u91CD\u8A66\u3002",
+    oauthDenied: "\u60A8\u672A\u540C\u610F\u6388\u6B0A\u3002\u53EF\u4EE5\u91CD\u8A66\u6216\u9078\u64C7\u5176\u4ED6\u767B\u5165\u65B9\u5F0F\u3002",
+    oauthBlocked: "\u700F\u89BD\u5668\u5C01\u9396\u4E86\u767B\u5165\u8996\u7A97\u3002\u8ACB\u91CD\u65B0\u958B\u555F\uFF0C\u6216\u5728\u76EE\u524D\u9801\u9762\u7E7C\u7E8C\u3002",
+    oauthTimedOut: "\u767B\u5165\u7B49\u5F85\u5DF2\u903E\u6642\u3002\u8ACB\u91CD\u65B0\u958B\u555F\u8996\u7A97\u518D\u8A66\u3002",
+    oauthFailed: "\u672A\u80FD\u5B8C\u6210\u767B\u5165\u3002\u8ACB\u91CD\u8A66\u6216\u9078\u64C7\u5176\u4ED6\u65B9\u5F0F\u3002",
+    oauthFullPage: "\u5728\u76EE\u524D\u9801\u9762\u7E7C\u7E8C",
+    emailEdit: "\u4FEE\u6539\u96FB\u5B50\u90F5\u4EF6",
+    emailCooldown: "{seconds} \u79D2\u5F8C\u91CD\u65B0\u50B3\u9001",
+    walletRetry: "\u9322\u5305\u672A\u958B\u555F\uFF1F\u8ACB\u91CD\u8A66\u6216\u6383\u78BC\u3002",
+    tryAgain: "\u91CD\u8A66",
+    signIn: "\u767B\u5165\u6216\u5EFA\u7ACB\u5E33\u6236",
+    signInTo: "\u767B\u5165\u6216\u52A0\u5165 {appName}",
     passkeyButton: "\u4F7F\u7528 Passkey \u7E7C\u7E8C",
     passkeySignIn: "\u4F7F\u7528 Passkey \u767B\u5165",
     passkeyCreate: "\u5EFA\u7ACB Passkey",
-    passkeyFirstTime: "\u7B2C\u4E00\u6B21\u4F7F\u7528\uFF1F\u5EFA\u7ACB Passkey",
+    passkeyFirstTime: "\u7B2C\u4E00\u6B21\u4F7F\u7528\uFF1F\u5EFA\u7ACB\u5E33\u6236",
     passkeyBackToSignIn: "\u8FD4\u56DE\u767B\u5165",
     passkeyWaiting: "\u6B63\u5728\u7B49\u5F85 Passkey\u2026",
     passkeyCreating: "\u6B63\u5728\u5EFA\u7ACB Passkey\u2026",
-    passkeyNoLocal: "\u6B64\u88DD\u7F6E\u4E0A\u6C92\u6709\u627E\u5230 Passkey\u3002",
+    passkeyNoLocal: "\u9019\u6B21\u672A\u5B8C\u6210 Passkey \u9A57\u8B49\u3002\u8ACB\u91CD\u8A66\u3001\u4F7F\u7528\u5176\u4ED6\u88DD\u7F6E\uFF0C\u6216\u9078\u64C7\u5176\u4ED6\u767B\u5165\u65B9\u5F0F\u3002",
     passkeyUseAnotherDevice: "\u7528\u5176\u4ED6\u88DD\u7F6E\u767B\u5165",
-    passkeyCreateInstead: "\u6539\u70BA\u5EFA\u7ACB\u65B0\u7684 Passkey",
+    passkeyCreateInstead: "\u7B2C\u4E00\u6B21\u4F7F\u7528\uFF1F\u5EFA\u7ACB\u5E33\u6236",
     didWalletButton: "\u4F7F\u7528 DID Wallet \u7E7C\u7E8C",
     didWalletButtonShort: "DID Wallet",
     scanWithWallet: "\u8ACB\u4F7F\u7528 DID Wallet \u6383\u78BC",
@@ -527,25 +590,46 @@ var messages = {
     emailSubmit: "\u50B3\u9001\u9A57\u8B49\u78BC",
     emailSending: "\u6B63\u5728\u50B3\u9001\u9A57\u8B49\u78BC...",
     emailSent: "\u9A57\u8B49\u78BC\u5DF2\u50B3\u9001\u81F3 {email}",
-    emailCodePlaceholder: "6 \u4F4D\u6578\u9A57\u8B49\u78BC",
+    emailCodePlaceholder: "8 \u4F4D\u6578\u9A57\u8B49\u78BC",
     emailVerify: "\u9A57\u8B49",
     emailResend: "\u91CD\u65B0\u50B3\u9001",
     emailInvalid: "\u8ACB\u8F38\u5165\u6709\u6548\u7684\u96FB\u5B50\u90F5\u4EF6\u5730\u5740\u3002",
-    emailCodeInvalid: "\u8ACB\u8F38\u5165 6 \u4F4D\u6578\u9A57\u8B49\u78BC\u3002"
+    emailCodeInvalid: "\u8ACB\u8F38\u5165 8 \u4F4D\u6578\u9A57\u8B49\u78BC\u3002"
   },
   ja: {
-    signIn: "\u30ED\u30B0\u30A4\u30F3",
-    signInTo: "{appName} \u306B\u30ED\u30B0\u30A4\u30F3",
+    emailExplanation: "\u78BA\u8A8D\u30B3\u30FC\u30C9\u3092\u9001\u4FE1\u3057\u307E\u3059\u3002\u30D1\u30B9\u30EF\u30FC\u30C9\u306F\u4E0D\u8981\u3067\u3059\u3002",
+    otherMethods: "\u4ED6\u306E\u30ED\u30B0\u30A4\u30F3\u65B9\u6CD5",
+    passkeyCreateAccount: "Passkey \u3067\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u4F5C\u6210",
+    lastUsed: "\u524D\u56DE\u4F7F\u7528",
+    passkeyExplanation: "\u6307\u7D0B\u3001\u9854\u8A8D\u8A3C\u3001\u307E\u305F\u306F\u30C7\u30D0\u30A4\u30B9\u306E\u30ED\u30C3\u30AF\u89E3\u9664\u3067\u65B0\u3057\u3044\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u4F5C\u6210\u3057\u307E\u3059\u3002\u30D1\u30B9\u30EF\u30FC\u30C9\u306F\u4E0D\u8981\u3067\u3059\u3002\u30C7\u30D0\u30A4\u30B9\u304C Passkey \u306E\u4FDD\u5B58\u3092\u6C42\u3081\u307E\u3059\u3002\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u304A\u6301\u3061\u3067\u3059\u304B\uFF1F\u30ED\u30B0\u30A4\u30F3\u306B\u623B\u3063\u3066\u304F\u3060\u3055\u3044\u3002",
+    continueWith: "{provider} \u3067\u7D9A\u3051\u308B",
+    oauthWaiting: "{provider} \u306E\u30A6\u30A3\u30F3\u30C9\u30A6\u3067\u7D9A\u3051\u3066\u304F\u3060\u3055\u3044",
+    oauthIncomplete: "\u30ED\u30B0\u30A4\u30F3\u306F\u307E\u3060\u5B8C\u4E86\u3057\u3066\u3044\u307E\u305B\u3093\u3002\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u958B\u304D\u76F4\u3059\u304B\u3001\u5225\u306E\u65B9\u6CD5\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
+    oauthReopen: "\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u958B\u304D\u76F4\u3059",
+    oauthUnconfirmed: "\u30ED\u30B0\u30A4\u30F3\u7D50\u679C\u3092\u78BA\u8A8D\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u8A66\u884C\u306E\u524D\u306B\u30DA\u30FC\u30B8\u3092\u518D\u8AAD\u307F\u8FBC\u307F\u3057\u3066\u72B6\u614B\u3092\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    oauthCheckSession: "\u518D\u8AAD\u307F\u8FBC\u307F\u3057\u3066\u30ED\u30B0\u30A4\u30F3\u3092\u78BA\u8A8D",
+    oauthCancelled: "\u30ED\u30B0\u30A4\u30F3\u306E\u5F85\u6A5F\u3092\u7D42\u4E86\u3057\u307E\u3057\u305F\u3002\u8A8D\u8A3C\u30A6\u30A3\u30F3\u30C9\u30A6\u304C\u958B\u3044\u3066\u3044\u308B\u5834\u5408\u306F\u3001\u9589\u3058\u3066\u304B\u3089\u518D\u8A66\u884C\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    oauthDenied: "\u8A8D\u8A3C\u304C\u8A31\u53EF\u3055\u308C\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u8A66\u884C\u3059\u308B\u304B\u3001\u5225\u306E\u65B9\u6CD5\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
+    oauthBlocked: "\u30D6\u30E9\u30A6\u30B6\u304C\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3092\u30D6\u30ED\u30C3\u30AF\u3057\u307E\u3057\u305F\u3002\u958B\u304D\u76F4\u3059\u304B\u3001\u3053\u306E\u30DA\u30FC\u30B8\u3067\u7D9A\u3051\u3066\u304F\u3060\u3055\u3044\u3002",
+    oauthTimedOut: "\u30ED\u30B0\u30A4\u30F3\u304C\u30BF\u30A4\u30E0\u30A2\u30A6\u30C8\u3057\u307E\u3057\u305F\u3002\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u958B\u304D\u76F4\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    oauthFailed: "\u30ED\u30B0\u30A4\u30F3\u3092\u5B8C\u4E86\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u8A66\u884C\u3059\u308B\u304B\u3001\u5225\u306E\u65B9\u6CD5\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
+    oauthFullPage: "\u3053\u306E\u30DA\u30FC\u30B8\u3067\u7D9A\u3051\u308B",
+    emailEdit: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5909\u66F4",
+    emailCooldown: "{seconds} \u79D2\u5F8C\u306B\u518D\u9001\u4FE1",
+    walletRetry: "\u30A6\u30A9\u30EC\u30C3\u30C8\u304C\u958B\u304B\u306A\u3044\u5834\u5408\u306F\u3001\u518D\u8A66\u884C\u3059\u308B\u304B QR \u30B3\u30FC\u30C9\u3092\u30B9\u30AD\u30E3\u30F3\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    tryAgain: "\u518D\u8A66\u884C",
+    signIn: "\u30ED\u30B0\u30A4\u30F3\u307E\u305F\u306F\u30A2\u30AB\u30A6\u30F3\u30C8\u4F5C\u6210",
+    signInTo: "{appName} \u306B\u30ED\u30B0\u30A4\u30F3\u307E\u305F\u306F\u53C2\u52A0",
     passkeyButton: "Passkey \u3067\u7D9A\u3051\u308B",
     passkeySignIn: "Passkey \u3067\u30ED\u30B0\u30A4\u30F3",
     passkeyCreate: "Passkey \u3092\u4F5C\u6210",
-    passkeyFirstTime: "\u521D\u3081\u3066\u3067\u3059\u304B\uFF1FPasskey \u3092\u4F5C\u6210",
+    passkeyFirstTime: "\u521D\u3081\u3066\u3067\u3059\u304B\uFF1F\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u4F5C\u6210",
     passkeyBackToSignIn: "\u30ED\u30B0\u30A4\u30F3\u306B\u623B\u308B",
     passkeyWaiting: "Passkey \u3092\u5F85\u3063\u3066\u3044\u307E\u3059\u2026",
     passkeyCreating: "Passkey \u3092\u4F5C\u6210\u3057\u3066\u3044\u307E\u3059\u2026",
-    passkeyNoLocal: "\u3053\u306E\u30C7\u30D0\u30A4\u30B9\u306B Passkey \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002",
+    passkeyNoLocal: "\u4ECA\u56DE\u306F Passkey \u306E\u78BA\u8A8D\u304C\u5B8C\u4E86\u3057\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u8A66\u884C\u3059\u308B\u304B\u3001\u5225\u306E\u30C7\u30D0\u30A4\u30B9\u3092\u4F7F\u3046\u304B\u3001\u5225\u306E\u65B9\u6CD5\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
     passkeyUseAnotherDevice: "\u5225\u306E\u30C7\u30D0\u30A4\u30B9\u3092\u4F7F\u7528",
-    passkeyCreateInstead: "\u4EE3\u308F\u308A\u306B\u65B0\u3057\u3044 Passkey \u3092\u4F5C\u6210",
+    passkeyCreateInstead: "\u521D\u3081\u3066\u3067\u3059\u304B\uFF1F\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u4F5C\u6210",
     didWalletButton: "DID Wallet \u3067\u7D9A\u3051\u308B",
     didWalletButtonShort: "DID Wallet",
     scanWithWallet: "DID Wallet \u3067\u30B9\u30AD\u30E3\u30F3\u3057\u3066\u304F\u3060\u3055\u3044",
@@ -578,12 +662,12 @@ var messages = {
     emailTitle: "\u30E1\u30FC\u30EB\u3067\u7D9A\u3051\u308B",
     emailSubmit: "\u30B3\u30FC\u30C9\u3092\u9001\u4FE1",
     emailSending: "\u30B3\u30FC\u30C9\u3092\u9001\u4FE1\u3057\u3066\u3044\u307E\u3059...",
-    emailSent: "{email} \u306B 6 \u6841\u306E\u30B3\u30FC\u30C9\u3092\u9001\u4FE1\u3057\u307E\u3057\u305F",
-    emailCodePlaceholder: "6 \u6841\u306E\u30B3\u30FC\u30C9",
+    emailSent: "{email} \u306B 8 \u6841\u306E\u30B3\u30FC\u30C9\u3092\u9001\u4FE1\u3057\u307E\u3057\u305F",
+    emailCodePlaceholder: "8 \u6841\u306E\u30B3\u30FC\u30C9",
     emailVerify: "\u78BA\u8A8D",
     emailResend: "\u30B3\u30FC\u30C9\u3092\u518D\u9001\u4FE1",
     emailInvalid: "\u6709\u52B9\u306A\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
-    emailCodeInvalid: "6 \u6841\u306E\u30B3\u30FC\u30C9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
+    emailCodeInvalid: "8 \u6841\u306E\u30B3\u30FC\u30C9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
   }
 };
 var SUPPORTED_LOCALES = [
@@ -592,7 +676,7 @@ var SUPPORTED_LOCALES = [
 ];
 function t(key, locale, params) {
   const lang = locale && messages[locale] ? locale : "en";
-  let msg = messages[lang][key] ?? key;
+  let msg = messages[lang][key] ?? messages.en[key] ?? key;
   if (params) {
     for (const [k, v] of Object.entries(params)) {
       msg = msg.replace(new RegExp(`\\{${k}\\}`, "g"), v);
@@ -2258,8 +2342,17 @@ var qrcode_default = qrcode;
 var stringToBytes = qrcode.stringToBytes;
 
 // dist/ui/qr-renderer.js
+var QR_PLATE_DARK = "#e8e8e8";
+var QR_PLATE_LIGHT = "#ffffff";
+function plateColor(container) {
+  const root = container.getRootNode();
+  const themeEl = root instanceof ShadowRoot ? root.host : document.documentElement;
+  const theme = themeEl instanceof Element ? themeEl.getAttribute("data-theme") : null;
+  return theme === "light" ? QR_PLATE_LIGHT : QR_PLATE_DARK;
+}
 function renderQR(container, url, size = 200) {
   clearQR(container);
+  container.dataset.qrUrl = url;
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext?.("2d") ?? null;
   if (!ctx) {
@@ -2283,7 +2376,7 @@ function renderQR(container, url, size = 200) {
   canvas.style.width = `${size}px`;
   canvas.style.height = `${size}px`;
   canvas.style.imageRendering = "pixelated";
-  const bgColor = "#e8e8e8";
+  const bgColor = plateColor(container);
   ctx.fillStyle = bgColor;
   ctx.fillRect(0, 0, actualSize, actualSize);
   ctx.fillStyle = "#000000";
@@ -2295,12 +2388,18 @@ function renderQR(container, url, size = 200) {
     }
   }
   const wrapper = document.createElement("div");
-  wrapper.style.cssText = "display:inline-block;padding:10px;background:#e8e8e8;border-radius:8px;line-height:0";
+  wrapper.className = "qr-plate";
+  wrapper.style.display = "inline-block";
+  wrapper.style.padding = "10px";
+  wrapper.style.backgroundColor = bgColor;
+  wrapper.style.borderRadius = "8px";
+  wrapper.style.lineHeight = "0";
   wrapper.appendChild(canvas);
   container.appendChild(wrapper);
 }
 function clearQR(container) {
   container.innerHTML = "";
+  delete container.dataset.qrUrl;
 }
 
 // dist/ui/styles.js
@@ -2317,6 +2416,14 @@ body {
   justify-content: center;
   background-image: radial-gradient(ellipse at 50% 0%, rgba(108,71,255,0.08) 0%, transparent 60%);
 }
+/* The body rule does not apply inside a shadow tree. The host page must
+   give the LoginPage container a height for this centering to show. */
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+}
 
 /* Card \u2014 fixed width prevents shrinking when views switch */
 .card {
@@ -2614,19 +2721,25 @@ h1 {
 /* Email section (methods view) */
 .email-section { margin-top: 8px; }
 
-/* Back button */
+/* Back button \u2014 same top row as Cancel and the locale/theme tools.
+   A float sat inside the 48px content padding, so Back landed below the
+   absolute locale pill. */
 .back-btn {
+  position: absolute;
+  top: 16px;
+  left: 40px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  height: 28px;
   background: none;
   border: none;
   color: var(--text-secondary);
   font-size: 14px;
+  line-height: 1;
   cursor: pointer;
   padding: 0;
-  margin-bottom: 16px;
-  float: left;
+  margin: 0;
 }
 .back-btn:hover { color: var(--text); }
 .back-btn svg { width: 18px; height: 18px; }
@@ -2651,6 +2764,7 @@ h1 {
   line-height: 1;
   text-decoration: none;
   cursor: pointer;
+  height: 28px;
   padding: 2px 4px 2px 0;
   transition: color 0.15s ease;
 }
@@ -2663,7 +2777,6 @@ h1 {
   font-weight: 600;
   color: var(--text-white);
   margin-bottom: 8px;
-  clear: both;
   padding-top: 8px;
 }
 
@@ -2837,23 +2950,32 @@ h1 {
 [data-theme="light"] body {
   background-image: radial-gradient(ellipse at 50% 0%, rgba(108,71,255,0.05) 0%, transparent 60%);
 }
-[data-theme="light"] .card {
+[data-theme="light"] .card,
+:host([data-theme="light"]) .card {
   box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(108,71,255,0.08);
 }
-[data-theme="light"] .btn:hover {
+[data-theme="light"] .btn:hover,
+:host([data-theme="light"]) .btn:hover {
   box-shadow: 0 2px 8px rgba(108,71,255,0.15);
 }
 
-/* Language switcher */
-.locale-switcher {
+/* Language sits on the same top row as Back / Cancel. */
+.card-tools {
   position: absolute;
   top: 16px;
   right: 16px;
+  z-index: 2;
+  display: flex;
+  align-items: flex-start;
+}
+.locale-switcher {
+  position: relative;
 }
 .locale-btn {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  height: 28px;
   padding: 4px 10px;
   font-size: 12px;
   color: var(--text-secondary);
@@ -2872,6 +2994,7 @@ h1 {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  height: 28px;
   padding: 4px 10px;
   font-size: 12px;
   color: var(--text-secondary);
@@ -2885,22 +3008,89 @@ h1 {
   border-color: var(--border-strong);
 }
 .locale-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
+/* One compact menu surface; rows are choices, not nested pill buttons. */
 .locale-menu {
-  display: none;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 4px;
-  margin-top: 4px;
+  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 4;
+  min-width: 144px; width: max-content; max-width: min(240px,calc(100vw - 64px));
+  padding: 4px; background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; box-shadow: var(--shadow-lg);
 }
-.locale-switcher.open .locale-menu {
-  display: flex;
-}
-.locale-btn[aria-checked="true"] {
-  color: var(--text);
-  border-color: var(--border-strong);
+.locale-switcher.open .locale-menu { display: flex; flex-direction: column; }
+.locale-menu .locale-btn {
+  width: 100%; min-height: 36px; height: auto; padding: 7px 10px; gap: 8px;
+  border: 0; border-radius: 6px; background: transparent; text-align: left;
+  font-size: 13px; line-height: 1.4; overflow-wrap: anywhere;
 }
-.locale-check { font-size: 11px; line-height: 1; }
+.locale-menu .locale-btn:hover, .locale-menu .locale-btn:focus-visible { background: var(--bg-hover); color: var(--text); }
+.locale-menu .locale-btn[aria-checked="true"] { color: var(--text); font-weight: 600; }
+.locale-check { width: 14px; flex: 0 0 14px; font-size: 12px; line-height: 1; }
+@media (pointer: coarse) { .locale-menu .locale-btn { min-height: 44px; } }
+.has-last-used { flex-wrap: wrap; }
+.last-used { display: inline-block; font-size: 11px; font-weight: 400; line-height: 1.4;
+  padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; opacity: .72; white-space: nowrap; }
 .card { position: relative; }
+
+/* Long localized method labels remain readable on narrow screens. */
+.methods-grid { grid-template-columns: 1fr; }
+.method-btn { min-height: 48px; white-space: normal; }
+.passkey-alt { min-height: 44px; font-weight: 600; }
+.oauth-recovery { font-size: 14px; line-height: 1.5; margin: 12px 0; padding: 12px;
+  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); text-align: left; }
+.oauth-recovery p { margin: 0 0 8px; overflow-wrap: anywhere; }
+.oauth-recovery-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
+.oauth-recovery-actions button, .oauth-recovery-actions a { font: inherit; font-size: 13px; min-height: 44px;
+  display: inline-flex; align-items: center; padding: 4px 0; color: var(--text); border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.oauth-recovery-actions[hidden], .oauth-recovery-actions [hidden] { display: none; }
+.oauth-recovery-actions :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
+
+@media (max-width: 480px) { .card { padding: 24px 20px; width: 100%; box-sizing: border-box; } h1 { font-size: 24px; } }
+
+.passkey-create-entry { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text); padding: 10px 14px; }
+.passkey-create-entry:hover { background: var(--bg-hover); text-decoration: none; }
+.status:empty { min-height: 0; padding: 0; margin: 0; }
+.passkey-section .subtitle { margin: 8px 0 16px; font-size: 14px; line-height: 1.5; }
+@media (max-width: 480px) { .card { padding: 20px 18px; } .brand-header { margin-bottom: 20px; } }
+
+.card-modal .card-tools { left: 20px; right: 80px; top: 12px; }
+.card-modal .locale-switcher { min-width: 0; max-width: 100%; }
+.card-modal .locale-trigger { max-width: 100%; height: 36px; }
+.locale-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card-modal .locale-menu { left: 0; right: auto; }
+
+.card { padding: 52px 24px 24px; box-sizing: border-box; }
+.card-modal { width: 100%; }
+.card-modal { padding-top: 68px; border: 0; border-radius: 0; }
+/* The dialog frame owns the shadow in both palettes. */
+.card.card-modal, :host([data-theme="light"]) .card.card-modal { box-shadow: none; }
+/* A translateY entrance expands an auto scroller by 4px until it finishes. */
+.card-modal[data-view] { animation: none; }
+/* Sub-step navigation shares the close button's center line in both modes. */
+.back-btn { top: 8px; left: 24px; height: 44px; max-width: calc(100% - 160px); line-height: 1.4; text-align: left; }
+.back-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
+.card-modal .back-btn { position: absolute; top: 8px; left: 24px; margin: 0; }
+.card-modal:has(.back-btn) .card-tools { left: auto; right: 64px; max-width: calc(100% - 160px); }
+.passkey-creating > .home-link { display: none; }
+@media (max-width:480px) { .back-btn, .card-modal .back-btn { left: 18px; } }
+.card-modal h1 { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; line-height: 1.4; padding-block: 2px; }
+.card-modal h1[tabindex="-1"]:focus { outline: none; }
+.card-modal h1, .card-modal h2, .card-modal .subtitle, .card-modal .status { overflow-wrap: anywhere; }
+.card-modal .btn { height: auto; min-height: 44px; line-height: 1.4; padding-block: 10px; white-space: normal; }
+.card-modal button, .card-modal a { overflow-wrap: anywhere; }
+.social-first .divider { margin: 14px 0; }
+.social-first .app-logo { width: 32px; height: 32px; margin-bottom: 12px; }
+.social-first .login-footer { margin-top: 16px; padding-top: 12px; }
+.other-methods { margin-top: 8px; color: var(--text-secondary); font-size: 14px; }
+.other-methods summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
+.other-methods summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+@media (max-width:480px) { .card { padding: 52px 18px 24px; } }
+@media (max-width:480px) { .card-modal { padding-top: 68px; } .card-modal .card-tools { left: 18px; } }
+@media (prefers-reduced-motion: reduce) { .card[data-view], .qr-view { animation: none; } }
+
+.passkey-creating > .methods-grid, .passkey-creating > .divider, .passkey-creating > .other-methods { display: none; }
+
+.input-label { display: block; text-align: left; margin: 8px 0; color: var(--text); font-size: 14px; font-weight: 500; }
+.input-label[hidden], .email-help[hidden] { display: none; }
+.email-help { text-align: left; font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px; }
 `;
 
 // dist/ui/webauthn-browser.js
@@ -2962,7 +3152,7 @@ async function runPasskeyAuth(options) {
   const txtCreating = texts.creating || t("passkeyCreating", locale);
   const txtVerifying = texts.verifying || t("verifying", locale);
   async function fetchAuthChallenge() {
-    const res = await fetch(`${prefix}/auth`, { method: "GET" });
+    const res = await fetch(`${prefix}/auth`, { method: "GET", signal: options.signal });
     if (!res.ok)
       throw new Error(t("authFailed", locale));
     return res.json();
@@ -2974,7 +3164,7 @@ async function runPasskeyAuth(options) {
     if (invitationId)
       params.push(`invitationId=${encodeURIComponent(invitationId)}`);
     const qs = params.length ? `?${params.join("&")}` : "";
-    const res = await fetch(`${prefix}/register${qs}`, { method: "GET" });
+    const res = await fetch(`${prefix}/register${qs}`, { method: "GET", signal: options.signal });
     if (!res.ok)
       throw new Error(t("registrationFailed", locale));
     return res.json();
@@ -2988,6 +3178,7 @@ async function runPasskeyAuth(options) {
   async function verifyAuth(challengeId, credential) {
     const res = await fetch(`${prefix}/auth`, {
       method: "POST",
+      signal: options.signal,
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ challengeId, credential })
     });
@@ -3000,6 +3191,7 @@ async function runPasskeyAuth(options) {
   async function verifyRegister(challengeId, credential, name) {
     const res = await fetch(`${prefix}/register`, {
       method: "POST",
+      signal: options.signal,
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ challengeId, credential, name: name || void 0 })
     });
@@ -3016,6 +3208,7 @@ async function runPasskeyAuth(options) {
       const { challengeId } = challengeResult;
       const authentication = challengeResult.authentication || challengeResult;
       const authOpts = {
+        signal: options.signal,
         publicKey: {
           ...authentication,
           challenge: b64urlDecode(authentication.challenge),
@@ -3033,6 +3226,10 @@ async function runPasskeyAuth(options) {
           return { success: false, error: "no_passkey" };
         }
       }
+      if (!raw && authOnly)
+        return { success: false, error: "no_passkey" };
+      if (options.signal?.aborted)
+        return { success: false, error: "cancelled" };
       if (raw) {
         const credential = serializeAuthentication(raw);
         onStatus(txtVerifying, false);
@@ -3046,15 +3243,16 @@ async function runPasskeyAuth(options) {
       return { success: false, error: errMsg, code: errCode };
     }
   }
-  const challengeData = await fetchRegisterChallenge(options.name || "");
-  if (challengeData.registrationAllowed === false) {
-    onStatus(t("regClosed", locale), true);
-    return { success: false, error: "registration_closed" };
-  }
-  onStatus(txtCreating, false);
   try {
+    const challengeData = await fetchRegisterChallenge(options.name || "");
+    if (challengeData.registrationAllowed === false) {
+      onStatus(t("regClosed", locale), true);
+      return { success: false, error: "registration_closed" };
+    }
+    onStatus(txtCreating, false);
     const registration = challengeData.registration || challengeData;
     const regOpts = {
+      signal: options.signal,
       publicKey: {
         ...registration,
         challenge: b64urlDecode(registration.challenge),
@@ -3069,12 +3267,14 @@ async function runPasskeyAuth(options) {
       }
     };
     const raw = await navigator.credentials.create(regOpts);
+    if (!raw || options.signal?.aborted)
+      return { success: false, error: t("passkeyNoLocal", locale) };
     const credential = serializeRegistration(raw);
     onStatus(txtVerifying, false);
     await verifyRegister(challengeData.challengeId, credential, options.name || "");
     return { success: true };
   } catch (regErr) {
-    const errMsg = regErr instanceof Error ? regErr.message : t("passkeySetupFailed", locale);
+    const errMsg = regErr instanceof Error && (regErr.name === "NotAllowedError" || regErr.name === "AbortError") ? t("passkeyNoLocal", locale) : regErr instanceof Error ? regErr.message : t("passkeySetupFailed", locale);
     const errCode = regErr instanceof Error ? regErr.code : void 0;
     onStatus(errMsg, true);
     return { success: false, error: errMsg, code: errCode };
@@ -3113,15 +3313,42 @@ var LoginPage = class {
   tokenSession = null;
   styleEl = null;
   mounted = false;
+  completed = false;
+  generation = 0;
+  activeMethod;
+  activeProvider;
+  oauthCleanup;
+  emailTimer;
+  emailDraft = "";
+  abort;
+  emit(name) {
+    try {
+      this.options.onEvent?.({ name, method: this.activeMethod, mode: this.options.mode ?? "page" });
+    } catch {
+    }
+  }
+  select(method) {
+    this.generation++;
+    this.oauthCleanup?.();
+    this.abort?.abort();
+    this.abort = new AbortController();
+    this.activeMethod = method;
+    this.activeProvider = void 0;
+    this.emit("method_selected");
+  }
   currentView = "methods";
   cardEl = null;
   mediaQuery = null;
   mediaListener = null;
   localeOutsideClick = null;
+  /** Open shadow root when isolate is set. Reused across destroy/mount. */
+  shadow = null;
+  isolate;
   constructor(container, config, http, options) {
     this.container = container;
     this.config = config;
     this.http = http;
+    this.isolate = options?.isolate === true;
     this.options = {
       methods: ["passkey", "did-connect"],
       locale: "en",
@@ -3142,32 +3369,50 @@ var LoginPage = class {
     if (this.mounted)
       return;
     this.mounted = true;
+    this.completed = false;
+    this.emit("view");
     this.styleEl = document.createElement("style");
     this.styleEl.textContent = LOGIN_PAGE_STYLES;
-    this.container.appendChild(this.styleEl);
+    this.mountRoot().appendChild(this.styleEl);
+    this.adoptStoredTheme();
     this.applyTheme();
     const available = this.filterMethods(this.options.methods);
     this.renderCard(available);
   }
   /** Destroy the login UI, clean up timers and listeners. Idempotent. */
   destroy() {
+    this.generation++;
+    this.oauthCleanup?.();
+    this.abort?.abort();
+    clearInterval(this.emailTimer);
     this.detachLocaleMenu();
     if (this.tokenSession) {
       this.tokenSession.destroy();
       this.tokenSession = null;
     }
-    if (this.mediaQuery && this.mediaListener) {
-      this.mediaQuery.removeEventListener("change", this.mediaListener);
-      this.mediaQuery = null;
-      this.mediaListener = null;
+    this.detachMedia();
+    if (this.isolate) {
+      const shadow = this.shadow ?? this.container.shadowRoot;
+      if (shadow)
+        shadow.innerHTML = "";
+      this.container.removeAttribute("data-theme");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+      this.container.innerHTML = "";
     }
-    document.documentElement.removeAttribute("data-theme");
-    this.container.innerHTML = "";
     this.styleEl = null;
     this.cardEl = null;
     this.currentView = "methods";
     this.mounted = false;
   }
+  /**
+   * Apply a light or dark theme without remounting.
+   * The host writes `web-mode` itself. Isolate updates the shadow host only.
+   */
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.applyTheme();
+  }
   /** Update options and re-render. */
   update(newOptions) {
     Object.assign(this.options, newOptions);
@@ -3177,24 +3422,82 @@ var LoginPage = class {
     }
   }
   // ─── Private: theme ────────────────────────────────────────────────
+  /** Light DOM themes <html>. Isolate themes the shadow host only. */
+  themeTarget() {
+    return this.isolate ? this.container : document.documentElement;
+  }
+  /** Shadow root created once. attachShadow throws if called again. */
+  mountRoot() {
+    if (!this.isolate)
+      return this.container;
+    if (this.shadow)
+      return this.shadow;
+    this.shadow = this.container.shadowRoot ?? this.container.attachShadow({ mode: "open" });
+    return this.shadow;
+  }
+  detachMedia() {
+    if (this.mediaQuery && this.mediaListener) {
+      this.mediaQuery.removeEventListener("change", this.mediaListener);
+    }
+    this.mediaQuery = null;
+    this.mediaListener = null;
+  }
+  /**
+   * Same order as theme/init.js: `?theme=` is a preview and wins;
+   * otherwise `localStorage["web-mode"]`. Neither write happens here.
+   */
+  adoptStoredTheme() {
+    if (this.options.mode === "dialog")
+      return;
+    if (typeof window === "undefined")
+      return;
+    const urlTheme = new URLSearchParams(window.location.search).get("theme");
+    if (urlTheme === "light" || urlTheme === "dark" || urlTheme === "auto") {
+      this.options.theme = urlTheme;
+      return;
+    }
+    try {
+      const stored = localStorage.getItem("web-mode");
+      if (stored === "light" || stored === "dark" || stored === "auto")
+        this.options.theme = stored;
+    } catch {
+    }
+  }
+  /** light sets data-theme. dark removes it. auto follows the OS. */
   applyTheme() {
+    this.detachMedia();
     const theme = this.options.theme ?? "dark";
+    const target = this.themeTarget();
     if (theme === "light") {
-      document.documentElement.dataset.theme = "light";
+      target.dataset.theme = "light";
     } else if (theme === "auto" && typeof window.matchMedia === "function") {
       const mq = window.matchMedia("(prefers-color-scheme: light)");
       this.mediaQuery = mq;
       const apply = (light) => {
-        if (light) {
-          document.documentElement.dataset.theme = "light";
-        } else {
-          document.documentElement.removeAttribute("data-theme");
-        }
+        if (light)
+          target.dataset.theme = "light";
+        else
+          target.removeAttribute("data-theme");
+        this.repaintQRPlate();
       };
       apply(mq.matches);
       this.mediaListener = (e) => apply(e.matches);
       mq.addEventListener("change", this.mediaListener);
+      return;
+    } else {
+      target.removeAttribute("data-theme");
     }
+    this.repaintQRPlate();
+  }
+  /** Redraw a visible QR so its plate matches the theme. Leaves a timeout overlay alone. */
+  repaintQRPlate() {
+    const qr = this.mountRoot().querySelector("#did-connect-qr");
+    if (!(qr instanceof HTMLElement))
+      return;
+    const url = qr.dataset.qrUrl;
+    if (!url || !qr.querySelector("canvas") || qr.querySelector(".qr-timeout-overlay"))
+      return;
+    renderQR(qr, url);
   }
   // ─── Private: rendering ──────────────────────────────────────────────
   filterMethods(methods) {
@@ -3207,11 +3510,20 @@ var LoginPage = class {
   }
   renderCard(methods) {
     const card = document.createElement("div");
-    card.className = "card";
+    card.className = this.options.mode === "dialog" ? "card card-modal" : "card";
     this.cardEl = card;
-    this.container.appendChild(card);
+    this.mountRoot().appendChild(card);
     this.switchView("methods", methods);
   }
+  /** Locale sits on the card's top-right row, level with Back / Cancel. */
+  renderCardTools(card) {
+    if (!(this.options.showLocaleSelector ?? this.options.mode !== "dialog"))
+      return;
+    const tools = document.createElement("div");
+    tools.className = "card-tools";
+    this.renderLocaleSwitcher(tools);
+    card.appendChild(tools);
+  }
   renderLocaleSwitcher(card) {
     const passed = this.options.locales;
     if (passed) {
@@ -3250,7 +3562,7 @@ var LoginPage = class {
     trigger.className = "locale-trigger";
     trigger.setAttribute("aria-haspopup", "menu");
     trigger.setAttribute("aria-expanded", "false");
-    trigger.innerHTML = `${ICON_GLOBE} ${escapeHtml(current.label)}`;
+    trigger.innerHTML = `${ICON_GLOBE} <span class="locale-label">${escapeHtml(current.label)}</span>`;
     trigger.title = current.label;
     const menu = document.createElement("div");
     menu.className = "locale-menu";
@@ -3264,6 +3576,8 @@ var LoginPage = class {
     trigger.addEventListener("click", (event) => {
       event.stopPropagation();
       setOpen(menu.hidden);
+      if (!menu.hidden)
+        menu.querySelector('[aria-checked="true"]')?.focus();
     });
     for (const item of locales) {
       const checked = item.code === current.code;
@@ -3273,12 +3587,13 @@ var LoginPage = class {
       btn.setAttribute("role", "menuitemradio");
       btn.setAttribute("aria-checked", checked ? "true" : "false");
       btn.dataset.locale = item.code;
+      btn.tabIndex = -1;
       btn.title = item.label;
-      if (checked) {
+      {
         const mark = document.createElement("span");
         mark.className = "locale-check";
         mark.setAttribute("aria-hidden", "true");
-        mark.textContent = "\u2713";
+        mark.textContent = checked ? "\u2713" : "";
         btn.appendChild(mark);
       }
       const label = document.createElement("span");
@@ -3290,9 +3605,31 @@ var LoginPage = class {
       });
       menu.appendChild(btn);
     }
-    const onOutsideClick = (event) => {
-      if (!wrapper.contains(event.target))
+    wrapper.addEventListener("keydown", (event) => {
+      const items = [...menu.querySelectorAll(".locale-btn")];
+      const active = this.shadow?.activeElement ?? document.activeElement;
+      const index = items.indexOf(active);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        trigger.focus();
+      } else if (event.key === "Tab")
         setOpen(false);
+      else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        setOpen(true);
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index < 0 ? event.key === "ArrowUp" ? items.length - 1 : 0 : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) % items.length;
+        items[next]?.focus();
+      }
+    });
+    const onOutsideClick = (event) => {
+      const path = event.composedPath();
+      if (path.includes(wrapper))
+        return;
+      if (this.isolate && path.includes(this.container))
+        return;
+      setOpen(false);
     };
     document.addEventListener("click", onOutsideClick);
     this.localeOutsideClick = onOutsideClick;
@@ -3316,10 +3653,14 @@ var LoginPage = class {
         this.tokenSession = null;
       }
     }
+    this.generation++;
+    this.oauthCleanup?.();
+    this.abort?.abort();
+    clearInterval(this.emailTimer);
     this.currentView = view;
     this.cardEl.innerHTML = "";
     this.cardEl.dataset.view = view;
-    this.renderLocaleSwitcher(this.cardEl);
+    this.renderCardTools(this.cardEl);
     switch (view) {
       case "methods":
         this.renderMethodsView(this.cardEl, locale, methods ?? this.filterMethods(this.options.methods));
@@ -3332,8 +3673,24 @@ var LoginPage = class {
         break;
     }
   }
+  /** Keep recognition next to the action, without a second page subtitle. */
+  markLastUsed(button, method, locale) {
+    if (!this.options.preferenceKey)
+      return;
+    try {
+      if (localStorage.getItem(`did-login-method:${this.options.preferenceKey}`) !== method)
+        return;
+      const hint = document.createElement("span");
+      hint.className = "last-used";
+      hint.textContent = t("lastUsed", locale);
+      button.classList.add("has-last-used");
+      button.appendChild(hint);
+    } catch {
+    }
+  }
   renderMethodsView(card, locale, methods) {
-    this.renderHomeLink(card, locale);
+    if (this.options.mode !== "dialog")
+      this.renderHomeLink(card, locale);
     this.renderBrandHeader(card, locale);
     const requestedPasskey = this.options.methods.includes("passkey");
     if (requestedPasskey && !methods.includes("passkey")) {
@@ -3342,6 +3699,12 @@ var LoginPage = class {
       warn.textContent = t("passkeyUnsupported", locale);
       card.appendChild(warn);
     }
+    const socialFirst = this.options.preferredLayout !== "passkey-first" && methods.includes("oauth") && this.options.oauthProviders?.some((p) => p.enabled && ["google", "apple"].includes(p.id));
+    card.classList.toggle("social-first", !!socialFirst);
+    if (socialFirst) {
+      this.renderSecondaryGrid(card, locale, ["oauth"], "primary");
+      this.renderDivider(card, locale);
+    }
     const hasPrimary = methods.includes("passkey");
     if (hasPrimary) {
       this.renderPasskeySection(card, locale);
@@ -3351,7 +3714,20 @@ var LoginPage = class {
       this.renderDivider(card, locale);
     }
     if (secondary.length > 0) {
-      this.renderSecondaryGrid(card, locale, methods);
+      if (socialFirst) {
+        if (methods.includes("email"))
+          this.renderSecondaryGrid(card, locale, ["email"]);
+        const details = document.createElement("details");
+        details.className = "other-methods";
+        const summary = document.createElement("summary");
+        summary.textContent = t("otherMethods", locale);
+        details.appendChild(summary);
+        this.renderSecondaryGrid(details, locale, methods.filter((m) => m !== "email"), "secondary");
+        if (details.querySelector("button"))
+          card.appendChild(details);
+      } else {
+        this.renderSecondaryGrid(card, locale, methods);
+      }
     }
     if (methods.length === 0 && !requestedPasskey) {
       const msg = document.createElement("p");
@@ -3378,10 +3754,14 @@ var LoginPage = class {
     walletBtn.id = "did-wallet-open-btn";
     walletBtn.textContent = t("openInWallet", locale);
     walletBtn.disabled = true;
-    card.appendChild(walletBtn);
+    if (isMobile())
+      card.insertBefore(walletBtn, qrContainer);
+    else
+      card.appendChild(walletBtn);
     const statusEl = document.createElement("div");
     statusEl.id = "did-connect-status";
     statusEl.className = "status";
+    statusEl.setAttribute("role", "status");
     card.appendChild(statusEl);
     this.renderTrustFooter(card, locale);
     this.startDIDConnectInView(statusEl, qrContainer, walletBtn, locale);
@@ -3393,9 +3773,26 @@ var LoginPage = class {
     title.className = "view-title";
     title.textContent = t("emailTitle", locale);
     card.appendChild(title);
+    const emailLabel = document.createElement("label");
+    emailLabel.className = "input-label";
+    emailLabel.htmlFor = "login-email-address";
+    emailLabel.textContent = t("emailPlaceholder", locale);
+    card.appendChild(emailLabel);
+    const emailHelp = document.createElement("p");
+    emailHelp.className = "email-help";
+    emailHelp.textContent = t("emailExplanation", locale);
+    card.appendChild(emailHelp);
     const emailInput = document.createElement("input");
     emailInput.className = "input";
+    emailInput.id = "login-email-address";
     emailInput.type = "email";
+    emailInput.required = true;
+    emailInput.autocomplete = "email";
+    emailInput.value = this.emailDraft;
+    emailInput.setAttribute("aria-label", t("emailPlaceholder", locale));
+    emailInput.addEventListener("input", () => {
+      this.emailDraft = emailInput.value;
+    });
     emailInput.placeholder = t("emailPlaceholder", locale);
     card.appendChild(emailInput);
     const sendBtn = document.createElement("button");
@@ -3404,15 +3801,23 @@ var LoginPage = class {
     card.appendChild(sendBtn);
     const status = document.createElement("div");
     status.className = "status";
+    status.setAttribute("role", "status");
     card.appendChild(status);
     const codeSection = document.createElement("div");
     codeSection.className = "email-code-section";
     codeSection.style.display = "none";
+    const codeLabel = document.createElement("label");
+    codeLabel.className = "input-label";
+    codeLabel.htmlFor = "login-email-code";
+    codeLabel.textContent = t("emailCodePlaceholder", locale);
+    codeSection.appendChild(codeLabel);
     const codeInput = document.createElement("input");
+    codeInput.id = "login-email-code";
     codeInput.className = "input";
     codeInput.type = "text";
     codeInput.inputMode = "numeric";
     codeInput.maxLength = 8;
+    codeInput.setAttribute("aria-label", t("emailCodePlaceholder", locale));
     codeInput.autocomplete = "one-time-code";
     codeInput.placeholder = t("emailCodePlaceholder", locale);
     codeSection.appendChild(codeInput);
@@ -3427,6 +3832,27 @@ var LoginPage = class {
     codeSection.appendChild(resendBtn);
     card.insertBefore(codeSection, status);
     this.renderTrustFooter(card, locale);
+    const epoch = this.generation;
+    const isCurrent = () => this.mounted && epoch === this.generation;
+    const editBtn = document.createElement("button");
+    editBtn.className = "passkey-alt";
+    editBtn.textContent = t("emailEdit", locale);
+    codeSection.appendChild(editBtn);
+    editBtn.addEventListener("click", () => this.switchView("email"));
+    const cooldown = () => {
+      let remaining = 60;
+      clearInterval(this.emailTimer);
+      resendBtn.disabled = true;
+      resendBtn.textContent = t("emailCooldown", locale, { seconds: String(remaining) });
+      this.emailTimer = setInterval(() => {
+        remaining--;
+        resendBtn.textContent = remaining > 0 ? t("emailCooldown", locale, { seconds: String(remaining) }) : t("emailResend", locale);
+        if (remaining <= 0) {
+          clearInterval(this.emailTimer);
+          resendBtn.disabled = false;
+        }
+      }, 1e3);
+    };
     let currentEmail = "";
     let currentCodeId;
     const servicePrefix = this.config.servicePrefix ?? "/.well-known/service";
@@ -3434,7 +3860,7 @@ var LoginPage = class {
       if (sendBtn.disabled)
         return;
       const email = emailInput.value.trim();
-      if (!email?.includes("@")) {
+      if (!emailInput.checkValidity()) {
         status.textContent = t("emailInvalid", locale);
         status.className = "status error";
         return;
@@ -3442,11 +3868,17 @@ var LoginPage = class {
       sendBtn.disabled = true;
       status.textContent = t("emailSending", locale);
       status.className = "status";
+      status.setAttribute("role", "status");
       try {
         const sendResult = await this.http.post(`${servicePrefix}/api/email/sendCode`, { email, locale });
+        if (!isCurrent())
+          return;
+        cooldown();
         currentEmail = email;
         currentCodeId = sendResult?.id;
         emailInput.style.display = "none";
+        emailLabel.hidden = true;
+        emailHelp.hidden = true;
         sendBtn.style.display = "none";
         codeSection.style.display = "";
         title.textContent = t("emailVerify", locale);
@@ -3454,6 +3886,8 @@ var LoginPage = class {
         status.className = "status";
         codeInput.focus();
       } catch (err) {
+        if (!isCurrent())
+          return;
         const msg = err instanceof Error ? err.message : "Failed to send email";
         status.textContent = msg;
         status.className = "status error";
@@ -3464,7 +3898,7 @@ var LoginPage = class {
       if (verifyBtn.disabled)
         return;
       const code = codeInput.value.trim();
-      if (!code || code.length !== 8) {
+      if (!/^\d{8}$/.test(code)) {
         status.textContent = t("emailCodeInvalid", locale);
         status.className = "status error";
         return;
@@ -3474,10 +3908,14 @@ var LoginPage = class {
       status.className = "status";
       try {
         await this.http.post(`${servicePrefix}/api/email/login`, { code, id: currentCodeId });
+        if (!isCurrent())
+          return;
         status.textContent = t("success", locale);
         status.className = "status";
         this.handleSuccess();
       } catch (err) {
+        if (!isCurrent())
+          return;
         if (err instanceof Error && "code" in err && err.code === "FORBIDDEN") {
           this.showFullError(friendlyError(err, locale));
         } else {
@@ -3500,27 +3938,35 @@ var LoginPage = class {
         verifyCode();
     });
     resendBtn.addEventListener("click", async () => {
+      if (resendBtn.disabled)
+        return;
       resendBtn.disabled = true;
       status.textContent = t("emailSending", locale);
       status.className = "status";
       try {
         const resendResult = await this.http.post(`${servicePrefix}/api/email/sendCode`, { email: currentEmail, locale });
+        if (!isCurrent())
+          return;
+        cooldown();
         currentCodeId = resendResult?.id;
         status.textContent = t("emailSent", locale, { email: currentEmail });
         status.className = "status";
       } catch (err) {
+        if (!isCurrent())
+          return;
+        resendBtn.disabled = false;
         const msg = err instanceof Error ? err.message : "Failed to resend";
         status.textContent = msg;
         status.className = "status error";
       }
-      resendBtn.disabled = false;
     });
   }
-  renderBackButton(parent, locale) {
+  renderBackButton(parent, locale, onBack = () => this.switchView("methods")) {
     const btn = document.createElement("button");
+    btn.type = "button";
     btn.className = "back-btn";
     btn.innerHTML = `${ICON_BACK_ARROW} ${escapeHtml(t("back", locale))}`;
-    btn.addEventListener("click", () => this.switchView("methods"));
+    btn.addEventListener("click", onBack);
     parent.appendChild(btn);
   }
   /**
@@ -3535,6 +3981,8 @@ var LoginPage = class {
    * sub-view back buttons that mean "return to the method list".
    */
   renderHomeLink(parent, locale) {
+    if (this.options.dismissible === false)
+      return;
     const { homeUrl, onCancel } = this.options;
     if (!onCancel && !homeUrl)
       return;
@@ -3544,7 +3992,10 @@ var LoginPage = class {
       btn.type = "button";
       btn.className = "home-link";
       btn.innerHTML = label;
-      btn.addEventListener("click", () => this.options.onCancel?.());
+      btn.addEventListener("click", () => {
+        this.emit("cancel");
+        this.options.onCancel?.();
+      });
       parent.appendChild(btn);
     } else {
       const link = document.createElement("a");
@@ -3572,7 +4023,16 @@ var LoginPage = class {
     } else {
       h1.textContent = t("signIn", locale);
     }
+    if (this.options.purpose)
+      h1.textContent = this.options.purpose.title;
+    h1.id = "login-title";
     header.appendChild(h1);
+    if (this.options.purpose?.description) {
+      const description = document.createElement("p");
+      description.className = "subtitle";
+      description.textContent = this.options.purpose.description;
+      header.appendChild(description);
+    }
     if (this.options.masterAppName) {
       const sub = document.createElement("p");
       sub.className = "federated-hint";
@@ -3613,6 +4073,12 @@ var LoginPage = class {
       }
       footer.appendChild(links);
     }
+    if (this.currentView !== "methods" && this.options.mode !== "dialog") {
+      this.renderHomeLink(footer, locale);
+      const cancel = footer.querySelector(".home-link");
+      if (cancel)
+        cancel.style.cssText = "position:static;display:inline-flex;margin-top:12px";
+    }
     parent.appendChild(footer);
   }
   renderDivider(parent, locale) {
@@ -3673,14 +4139,24 @@ var LoginPage = class {
       retryBtn.addEventListener("click", () => doSignIn());
       const createLink = document.createElement("button");
       createLink.type = "button";
-      createLink.className = "passkey-alt";
+      createLink.className = "passkey-alt passkey-create-entry";
       createLink.textContent = t("passkeyCreateInstead", locale);
       section.appendChild(createLink);
       createLink.addEventListener("click", () => renderCreateState());
     };
     const renderCreateState = () => {
+      this.cardEl?.classList.add("passkey-creating");
+      this.abort?.abort();
+      this.generation++;
       section.innerHTML = "";
       clearStatus();
+      const heading = this.cardEl?.querySelector("h1");
+      if (heading)
+        heading.textContent = t("passkeyCreateAccount", locale);
+      const explanation = document.createElement("p");
+      explanation.className = "subtitle";
+      explanation.textContent = t("passkeyExplanation", locale);
+      section.appendChild(explanation);
       const nameRow = document.createElement("div");
       nameRow.className = "name-row visible";
       nameRow.id = "passkey-name-row";
@@ -3688,6 +4164,7 @@ var LoginPage = class {
       nameInput.className = "input";
       nameInput.id = "passkey-name-input";
       nameInput.type = "text";
+      nameInput.setAttribute("aria-label", t("namePlaceholder", locale));
       nameInput.placeholder = t("namePlaceholder", locale);
       nameInput.autocomplete = "name";
       nameRow.appendChild(nameInput);
@@ -3697,17 +4174,17 @@ var LoginPage = class {
       createBtn.id = "passkey-btn";
       createBtn.innerHTML = `${ICON_PASSKEY} ${escapeHtml(t("passkeyCreate", locale))}`;
       section.appendChild(createBtn);
-      const backLink = document.createElement("button");
-      backLink.type = "button";
-      backLink.className = "passkey-alt";
-      backLink.textContent = t("passkeyBackToSignIn", locale);
-      section.appendChild(backLink);
+      parent.querySelector(".back-btn")?.remove();
+      this.renderBackButton(parent, locale, () => renderSignInState());
       const doCreate = async () => {
         if (createBtn.disabled)
           return;
         createBtn.disabled = true;
+        this.select("passkey");
+        const epoch = this.generation;
         const result = await runPasskeyAuth({
           registerOnly: true,
+          signal: this.abort?.signal,
           name: nameInput.value.trim(),
           onStatus: setStatus,
           texts: statusTexts,
@@ -3715,6 +4192,8 @@ var LoginPage = class {
           prefix: this.options.passkeyPrefix,
           invitationId: this.options.invitationId
         });
+        if (!this.mounted || epoch !== this.generation || this.abort?.signal.aborted)
+          return;
         if (handleResult(result))
           return;
         if (result.error)
@@ -3726,21 +4205,27 @@ var LoginPage = class {
         if (e.key === "Enter")
           doCreate();
       });
-      backLink.addEventListener("click", () => renderSignInState());
-      nameInput.focus();
+      createBtn.focus();
     };
     const doSignIn = async () => {
       const btn = section.querySelector("#passkey-btn");
+      if (btn?.disabled)
+        return;
       if (btn)
         btn.disabled = true;
+      this.select("passkey");
+      const epoch = this.generation;
       const result = await runPasskeyAuth({
         authOnly: true,
+        signal: this.abort?.signal,
         onStatus: setStatus,
         texts: statusTexts,
         locale,
         prefix: this.options.passkeyPrefix,
         invitationId: this.options.invitationId
       });
+      if (!this.mounted || epoch !== this.generation || this.abort?.signal.aborted)
+        return;
       if (handleResult(result))
         return;
       if (result.error && result.error !== "no_passkey") {
@@ -3749,20 +4234,29 @@ var LoginPage = class {
           btn.disabled = false;
         return;
       }
+      this.emit("incomplete");
       renderCrossDeviceState();
     };
     const renderSignInState = () => {
+      this.cardEl?.classList.remove("passkey-creating");
+      parent.querySelector(".back-btn")?.remove();
+      this.abort?.abort();
+      this.generation++;
+      const heading = this.cardEl?.querySelector("h1");
+      if (heading)
+        heading.textContent = this.options.purpose?.title ?? (this.options.appName ? t("signInTo", locale, { appName: this.options.appName }) : t("signIn", locale));
       section.innerHTML = "";
       clearStatus();
       const signInBtn = document.createElement("button");
-      signInBtn.className = "btn";
+      signInBtn.className = this.cardEl?.classList.contains("social-first") ? "btn btn-secondary" : "btn";
       signInBtn.id = "passkey-btn";
       signInBtn.innerHTML = `${ICON_PASSKEY} ${escapeHtml(t("passkeySignIn", locale))}`;
+      this.markLastUsed(signInBtn, "passkey", locale);
       section.appendChild(signInBtn);
       signInBtn.addEventListener("click", () => doSignIn());
       const createLink = document.createElement("button");
       createLink.type = "button";
-      createLink.className = "passkey-alt";
+      createLink.className = "passkey-alt passkey-create-entry";
       createLink.textContent = t("passkeyFirstTime", locale);
       section.appendChild(createLink);
       createLink.addEventListener("click", () => renderCreateState());
@@ -3777,127 +4271,242 @@ var LoginPage = class {
   //  methods now render through renderSecondaryGrid)
   // ─── Private: OAuth popup flow ──────────────────────────────────────
   startOAuthPopup(providerId, btn) {
+    this.oauthCleanup?.();
+    const epoch = this.generation;
+    const locale = this.options.locale;
     const servicePrefix = this.config.servicePrefix ?? "/.well-known/service";
     const oauthBase = this.options.masterOAuthOrigin ? `${this.options.masterOAuthOrigin}${servicePrefix}` : servicePrefix;
     const oauthOrigin = new URL(oauthBase, window.location.href).origin;
-    const loginUrl = `${oauthBase}/api/oauth/${encodeURIComponent(providerId)}/login?returnUrl=${encodeURIComponent(window.location.href)}`;
-    const width = 500;
-    const height = 620;
-    const left = window.screenX + (window.innerWidth - width) / 2;
-    const top = window.screenY + (window.innerHeight - height) / 2;
-    const popup = window.open(loginUrl, "oauth-login:popup", `left=${left},top=${top},width=${width},height=${height},resizable,scrollbars=yes,status=1,popup`);
-    if (!popup) {
-      window.location.href = loginUrl;
-      return;
+    let returnUrl = window.location.href;
+    if (this.options.mode !== "dialog" && window.location.pathname === `${servicePrefix}/login`) {
+      const requested = new URLSearchParams(window.location.search).get("return_to");
+      try {
+        const target = new URL(requested || "/", window.location.origin);
+        returnUrl = target.origin === window.location.origin && !/^\/[/\\]/.test(target.pathname) ? target.href : `${window.location.origin}/`;
+      } catch {
+        returnUrl = `${window.location.origin}/`;
+      }
     }
+    const loginUrl = `${oauthBase}/api/oauth/${encodeURIComponent(providerId)}/login?returnUrl=${encodeURIComponent(returnUrl)}`;
+    const provider = this.options.oauthProviders?.find((p) => p.id === providerId)?.name ?? providerId;
     const originalHTML = btn.innerHTML;
-    btn.innerHTML = `<span class="oauth-spinner"></span> Authorizing...`;
-    btn.disabled = true;
-    btn.classList.add("oauth-btn-loading");
-    const restore = () => {
+    let popup = null;
+    let settled = false;
+    let exchanging = false;
+    let probing = false;
+    let pollTimer;
+    let sessionTimer;
+    let abandonTimer;
+    const current = () => !settled && this.mounted && epoch === this.generation;
+    const locked = [];
+    const lockMethods = () => {
+      for (const button of this.cardEl?.querySelectorAll(".method-btn, .passkey-create-entry, #passkey-btn, .locale-trigger, .locale-btn") ?? []) {
+        locked.push({ button, disabled: button.disabled });
+        button.disabled = true;
+      }
+    };
+    const recovery = document.createElement("div");
+    recovery.className = "oauth-recovery";
+    recovery.setAttribute("role", "status");
+    const hint = document.createElement("p");
+    const actions = document.createElement("div");
+    actions.className = "oauth-recovery-actions";
+    const reopen = document.createElement("button");
+    reopen.type = "button";
+    reopen.className = "oauth-retry";
+    reopen.textContent = t("oauthReopen", locale);
+    reopen.hidden = true;
+    reopen.onclick = () => {
+      this.select("oauth");
+      this.activeProvider = providerId;
+      this.startOAuthPopup(providerId, btn);
+    };
+    const fullPage = document.createElement("a");
+    fullPage.href = loginUrl;
+    fullPage.textContent = t("oauthFullPage", locale);
+    fullPage.addEventListener("click", (event) => {
+      const reconcile = recovery.dataset.state === "oauthUnconfirmed";
+      if (exchanging && !settled) {
+        event.preventDefault();
+        return;
+      }
+      if (reconcile)
+        event.preventDefault();
+      this.options.onBeforeRedirect?.();
+      this.oauthCleanup?.();
+      if (reconcile)
+        window.location.reload();
+    });
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "oauth-cancel";
+    cancel.textContent = t("cancel", locale);
+    actions.append(reopen, fullPage, cancel);
+    recovery.append(hint, actions);
+    btn.parentElement?.after(recovery);
+    const restoreButton = () => {
       btn.innerHTML = originalHTML;
       btn.disabled = false;
       btn.classList.remove("oauth-btn-loading");
     };
-    let settled = false;
-    let sessionPollTimer;
+    const closePopup = () => {
+      try {
+        popup?.close();
+      } catch {
+      }
+    };
+    const cleanup = () => {
+      settled = true;
+      clearInterval(pollTimer);
+      clearInterval(sessionTimer);
+      clearTimeout(abandonTimer);
+      window.removeEventListener("message", onMessage);
+      for (const item of locked.splice(0))
+        item.button.disabled = item.disabled;
+      restoreButton();
+    };
+    const showRecovery = (key) => {
+      hint.textContent = t(key, locale, { provider });
+      recovery.dataset.state = key;
+      actions.hidden = false;
+      reopen.hidden = false;
+      cancel.hidden = true;
+      restoreButton();
+    };
+    const fail = (key) => {
+      if (!current())
+        return;
+      cleanup();
+      closePopup();
+      showRecovery(key);
+      this.emit("incomplete");
+    };
     const succeed = () => {
-      if (settled)
+      if (!current())
         return;
-      settled = true;
       cleanup();
-      btn.innerHTML = `<span class="oauth-check">\u2713</span> Success`;
+      closePopup();
+      recovery.remove();
+      btn.textContent = t("success", locale);
+      btn.disabled = true;
       this.handleSuccess();
     };
-    const onMessage = async (event) => {
-      if (event.origin !== oauthOrigin)
+    cancel.onclick = () => {
+      if (exchanging)
         return;
-      if (!event.data || event.data.type !== "authorization_response")
+      fail("oauthCancelled");
+      btn.focus();
+    };
+    const onMessage = async (event) => {
+      if (event.origin !== oauthOrigin || event.source !== popup || !popup)
         return;
-      if (settled)
+      if (!event.data || event.data.type !== "authorization_response" || !current() || exchanging)
         return;
-      if (pollTimer !== void 0) {
-        clearInterval(pollTimer);
-        pollTimer = void 0;
-      }
-      try {
-        popup.close();
-      } catch {
-      }
+      clearInterval(pollTimer);
+      clearInterval(sessionTimer);
       if (event.data.error) {
-        restore();
-        cleanup();
+        fail(event.data.error === "access_denied" ? "oauthDenied" : event.data.error === "cancelled" ? "oauthCancelled" : "oauthFailed");
         return;
       }
       const { code, state } = event.data.response ?? event.data;
-      if (!code) {
-        restore();
-        cleanup();
+      if (typeof code !== "string" || !code || typeof state !== "string" || !state) {
+        fail("oauthFailed");
         return;
       }
-      btn.innerHTML = `<span class="oauth-spinner"></span> Signing in...`;
+      exchanging = true;
+      lockMethods();
+      actions.hidden = true;
+      closePopup();
+      hint.textContent = t("verifying", locale);
+      btn.textContent = t("verifying", locale);
       btn.disabled = true;
       try {
         const oauthBody = { provider: providerId, code, state };
         if (this.options.invitationId)
           oauthBody.invitationId = this.options.invitationId;
-        await this.http.post(`${servicePrefix}/api/oauth/login`, oauthBody);
+        await this.http.post(`${servicePrefix}/api/oauth/login`, oauthBody, { signal: this.abort?.signal });
         succeed();
-      } catch (oauthErr) {
-        const errMsg = oauthErr instanceof Error ? oauthErr.message : "";
-        const errCode = oauthErr instanceof Error && "code" in oauthErr ? oauthErr.code : "";
-        if (errCode === "FORBIDDEN" || errMsg === "registration_closed" || errCode === "registration_closed") {
-          settled = true;
+      } catch (err) {
+        if (!current())
+          return;
+        const code2 = err instanceof Error && "code" in err ? String(err.code) : "";
+        const message = err instanceof Error ? err.message : "";
+        if (code2 === "FORBIDDEN" || code2 === "registration_closed" || message === "registration_closed") {
           cleanup();
-          this.showFullError(friendlyError(oauthErr, this.options.locale));
-        } else {
-          restore();
-        }
+          recovery.remove();
+          this.showFullError(friendlyError(err, locale));
+        } else
+          fail("oauthFailed");
+      }
+    };
+    this.oauthCleanup = () => {
+      cleanup();
+      recovery.remove();
+      closePopup();
+    };
+    window.addEventListener("message", onMessage);
+    try {
+      popup = window.open(loginUrl, "oauth-login:popup", `left=${window.screenX + (window.innerWidth - 500) / 2},top=${window.screenY + (window.innerHeight - 620) / 2},width=500,height=620,resizable,scrollbars=yes,status=1,popup`);
+    } catch {
+    }
+    if (!popup) {
+      fail("oauthBlocked");
+      return;
+    }
+    hint.textContent = t("oauthWaiting", locale, { provider });
+    btn.textContent = t("oauthWaiting", locale, { provider });
+    btn.disabled = true;
+    btn.classList.add("oauth-btn-loading");
+    const checkSession = async () => {
+      if (!current() || exchanging || probing)
+        return;
+      probing = true;
+      try {
+        const session = await this.http.get(`${servicePrefix}/api/did/session`);
+        if (current() && !exchanging && session?.authenticated === true)
+          succeed();
+      } catch {
+      } finally {
+        probing = false;
       }
     };
-    let pollTimer = setInterval(() => {
+    pollTimer = setInterval(() => {
       let closed = false;
       try {
-        closed = popup.closed;
+        closed = !!popup?.closed;
       } catch {
         return;
       }
-      if (!closed)
+      if (!closed || !current())
         return;
-      if (pollTimer !== void 0) {
-        clearInterval(pollTimer);
-        pollTimer = void 0;
-      }
-      restore();
-      const checkSession = () => {
-        void this.http.get(`${servicePrefix}/api/did/session`).then((session) => {
-          if (session?.authenticated)
-            succeed();
-        }).catch(() => {
-        });
-      };
-      checkSession();
-      sessionPollTimer = setInterval(checkSession, 500);
+      clearInterval(pollTimer);
+      showRecovery("oauthIncomplete");
+      cancel.hidden = false;
+      void checkSession();
+      sessionTimer = setInterval(() => {
+        void checkSession();
+      }, 2e3);
     }, 500);
-    const abandonTimer = setTimeout(() => {
-      if (settled)
+    abandonTimer = setTimeout(() => {
+      if (!current())
+        return;
+      if (!exchanging) {
+        fail("oauthTimedOut");
         return;
+      }
+      this.abort?.abort();
       cleanup();
-      restore();
+      closePopup();
+      lockMethods();
+      hint.textContent = t("oauthUnconfirmed", locale);
+      recovery.dataset.state = "oauthUnconfirmed";
+      actions.hidden = false;
+      reopen.hidden = true;
+      cancel.hidden = true;
+      fullPage.href = window.location.href;
+      fullPage.textContent = t("oauthCheckSession", locale);
+      this.emit("incomplete");
     }, 5 * 60 * 1e3);
-    const cleanup = () => {
-      if (pollTimer !== void 0) {
-        clearInterval(pollTimer);
-        pollTimer = void 0;
-      }
-      if (sessionPollTimer !== void 0) {
-        clearInterval(sessionPollTimer);
-        sessionPollTimer = void 0;
-      }
-      clearTimeout(abandonTimer);
-      window.removeEventListener("message", onMessage);
-    };
-    window.addEventListener("message", onMessage);
   }
   // (removed dead code: renderEmailButton — email now renders through renderSecondaryGrid)
   /**
@@ -3906,19 +4515,25 @@ var LoginPage = class {
    * Even count: all items in 2 columns (each half width).
    * Odd count: DID Wallet spans full width at the end.
    */
-  renderSecondaryGrid(parent, locale, methods) {
+  renderSecondaryGrid(parent, locale, methods, group) {
     const grid = document.createElement("div");
     grid.className = "methods-grid";
     if (methods.includes("oauth") && this.options.oauthProviders?.length) {
-      const enabledProviders = (this.options.oauthProviders ?? []).filter((p) => p.enabled);
+      const order = this.options.oauthProviderOrder ?? ["google", "apple", "github"];
+      const rank = (id) => order.includes(id) ? order.indexOf(id) : order.length;
+      const explicitOrder = !!this.options.oauthProviderOrder || this.options.oauthProviders?.some((p) => p.order !== void 0 && p.order !== 999);
+      const enabledProviders = (this.options.oauthProviders ?? []).filter((p) => p.enabled && (!group || (explicitOrder || ["google", "apple"].includes(p.id)) === (group === "primary"))).sort((a, b) => this.options.oauthProviderOrder ? rank(a.id) - rank(b.id) : (a.order ?? 999) - (b.order ?? 999) || rank(a.id) - rank(b.id));
       for (const provider of enabledProviders) {
         const btn = document.createElement("button");
         btn.className = "method-btn";
         btn.dataset.provider = provider.id;
         const icon = getOAuthIcon(provider.id);
-        btn.innerHTML = `${icon} ${escapeHtml(provider.name)}`;
+        btn.innerHTML = `${icon} ${escapeHtml(t("continueWith", locale, { provider: provider.name }))}`;
+        this.markLastUsed(btn, `oauth:${provider.id}`, locale);
         grid.appendChild(btn);
         btn.addEventListener("click", () => {
+          this.select("oauth");
+          this.activeProvider = provider.id;
           this.startOAuthPopup(provider.id, btn);
         });
       }
@@ -3928,8 +4543,10 @@ var LoginPage = class {
       btn.className = "method-btn";
       btn.id = "email-btn";
       btn.innerHTML = `${ICON_EMAIL} ${escapeHtml(t("emailButton", locale))}`;
+      this.markLastUsed(btn, "email", locale);
       grid.appendChild(btn);
       btn.addEventListener("click", () => {
+        this.select("email");
         this.switchView("email");
       });
     }
@@ -3939,8 +4556,10 @@ var LoginPage = class {
       btn.id = "did-wallet-btn";
       const walletLabel = grid.children.length > 0 ? t("didWalletButtonShort", locale) : t("didWalletButton", locale);
       btn.innerHTML = `${ICON_DID_WALLET} ${escapeHtml(walletLabel)}`;
+      this.markLastUsed(btn, "did-connect", locale);
       grid.appendChild(btn);
       btn.addEventListener("click", () => {
+        this.select("did-connect");
         this.switchView("qr");
       });
     }
@@ -3949,19 +4568,27 @@ var LoginPage = class {
   // ─── Private: DID Connect flow (QR view) ───────────────────────────
   async startDIDConnectInView(statusEl, qrContainer, walletBtn, locale) {
     statusEl.textContent = t("connecting", locale);
+    const epoch = this.generation;
+    const isCurrent = () => this.mounted && epoch === this.generation;
     try {
       this.tokenSession?.destroy();
       this.tokenSession = new TokenSession(this.config, this.http);
       this.tokenSession.on("succeed", async () => {
+        if (!isCurrent())
+          return;
         this.showConnectResult(qrContainer, walletBtn, statusEl, t("verifying", locale));
         try {
           const servicePrefix = this.config.servicePrefix ?? "/.well-known/service";
           await this.http.post(`${servicePrefix}/api/did/connect/complete`, {
             token: this.tokenSession.state.token
           });
+          if (!isCurrent())
+            return;
           this.showConnectSuccess(qrContainer, walletBtn, statusEl, locale);
           this.handleSuccess();
         } catch (err) {
+          if (!isCurrent())
+            return;
           this.showConnectResult(qrContainer, walletBtn, statusEl, friendlyError(err, locale), true);
         }
       });
@@ -3992,17 +4619,21 @@ var LoginPage = class {
         }
       });
       const state = await this.tokenSession.create({ locale });
+      if (!isCurrent())
+        return;
       if (state.url) {
         renderQR(qrContainer, state.url);
         walletBtn.disabled = false;
         walletBtn.addEventListener("click", () => {
-          this.showConnectScanned(qrContainer, walletBtn, statusEl, locale);
+          statusEl.textContent = t("walletRetry", locale);
           this.openInWallet(state.url, locale);
         });
       }
       statusEl.textContent = t("scanWithWallet", locale);
       this.tokenSession.startPolling();
     } catch (err) {
+      if (!isCurrent())
+        return;
       statusEl.textContent = friendlyError(err, locale);
       clearQR(qrContainer);
     }
@@ -4022,7 +4653,7 @@ var LoginPage = class {
     }
     this.cardEl.innerHTML = "";
     this.cardEl.dataset.view = "error";
-    this.renderLocaleSwitcher(this.cardEl);
+    this.renderCardTools(this.cardEl);
     const resultContainer = document.createElement("div");
     resultContainer.className = "connect-result";
     resultContainer.innerHTML = `<div class="result-icon result-error">\u2715</div>`;
@@ -4161,13 +4792,241 @@ var LoginPage = class {
   }
   // ─── Private: success handler ────────────────────────────────────────
   handleSuccess() {
+    if (!this.mounted || this.completed)
+      return;
+    this.completed = true;
+    this.emit("success");
+    if (this.options.preferenceKey && this.activeMethod) {
+      try {
+        localStorage.setItem(`did-login-method:${this.options.preferenceKey}`, this.activeMethod === "oauth" && this.activeProvider ? `oauth:${this.activeProvider}` : this.activeMethod);
+      } catch {
+      }
+    }
     if (this.options.onSuccess) {
-      this.options.onSuccess();
+      const epoch = this.generation;
+      Promise.resolve().then(() => {
+        if (this.mounted && epoch === this.generation)
+          return this.options.onSuccess?.();
+      }).catch(() => {
+        if (!this.mounted || epoch !== this.generation)
+          return;
+        this.completed = false;
+        this.showFullError(t("authFailed", this.options.locale));
+      });
     } else {
       setTimeout(() => location.reload(), 300);
     }
   }
 };
+
+// dist/ui/login-dialog.js
+var DIALOG_STYLES = `${DESIGN_TOKENS_CSS}${DESIGN_TOKENS_LIGHT_CSS}
+:host { color-scheme: dark; }
+:host([data-theme="light"]) { color-scheme: light; }
+dialog { box-sizing:border-box; position:fixed; inset:0; margin:auto; padding:0;
+  width:min(420px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px);
+  border:1px solid var(--border); border-radius:16px; background:var(--bg-card);
+  color:var(--text); color-scheme:inherit; overflow:hidden; box-shadow:var(--shadow-lg); }
+dialog::backdrop { background:rgba(8,10,18,.56); }
+:host(:not([data-theme="light"])) dialog::backdrop { background:rgba(0,0,0,.68); }
+[data-dialog-scroll] { max-height:calc(100dvh - 34px); overflow:auto; overscroll-behavior:contain; }
+.close { position:absolute; top:8px; right:8px; z-index:3; display:grid; place-items:center;
+  box-sizing:border-box; width:44px; height:44px; padding:0; border:1px solid transparent;
+  border-radius:10px; background:var(--bg-card); color:var(--text-secondary);
+  font:400 24px/1 system-ui,sans-serif; cursor:pointer; }
+.close:hover { color:var(--text); background:var(--bg-hover); }
+.close:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
+.host-error { padding:16px 20px; font:14px/1.5 system-ui,sans-serif; overflow-wrap:anywhere; }
+.retry { padding:10px 16px; margin:0 20px 20px; color:var(--text); background:var(--bg-elevated);
+  border:1px solid var(--border); border-radius:8px; font:inherit; cursor:pointer; }
+`;
+var LoginDialog = class {
+  config;
+  http;
+  options;
+  host;
+  dialog;
+  page;
+  previous;
+  themeObserver;
+  systemTheme;
+  syncTheme = () => this.applyTheme(this.hostTheme());
+  constructor(config, http, options = {}) {
+    this.config = config;
+    this.http = http;
+    this.options = options;
+  }
+  mount() {
+    if (this.dialog)
+      return;
+    const hostLocale = document.documentElement.lang;
+    if (hostLocale)
+      this.options.locale = hostLocale;
+    let focused = document.activeElement;
+    while (focused?.shadowRoot?.activeElement)
+      focused = focused.shadowRoot.activeElement;
+    this.previous = this.options.returnFocus ?? (focused instanceof HTMLElement ? focused : void 0);
+    const host = document.createElement("div");
+    host.dataset.didLoginDialogHost = "";
+    host.style.cssText = "position:fixed;width:0;height:0;";
+    this.host = host;
+    const root = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = DIALOG_STYLES;
+    root.append(style);
+    const dialog = document.createElement("dialog");
+    this.dialog = dialog;
+    dialog.setAttribute("aria-label", this.options.purpose?.title ?? t("signIn", this.options.locale));
+    root.append(dialog);
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "close";
+    close.textContent = "\xD7";
+    close.setAttribute("aria-label", t("cancel", this.options.locale));
+    const cancel = () => {
+      if (this.options.dismissible === false || this.dialog !== dialog)
+        return;
+      try {
+        this.options.onEvent?.({ name: "cancel", mode: "dialog" });
+      } catch {
+      }
+      this.destroy();
+      this.options.onCancel?.();
+    };
+    close.addEventListener("click", cancel);
+    if (this.options.dismissible !== false)
+      dialog.append(close);
+    const scroller = document.createElement("div");
+    scroller.dataset.dialogScroll = "";
+    dialog.append(scroller);
+    const container = document.createElement("div");
+    container.dataset.loginDialogMount = "";
+    scroller.append(container);
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      cancel();
+    });
+    document.body.append(host);
+    const theme = this.hostTheme();
+    host.dataset.theme = theme;
+    this.page = new LoginPage(container, this.config, this.http, {
+      ...this.options,
+      theme,
+      isolate: true,
+      mode: "dialog",
+      onCancel: cancel,
+      onLocaleChange: (locale) => {
+        this.options.locale = locale;
+        close.setAttribute("aria-label", t("cancel", locale));
+        dialog.setAttribute("aria-label", this.options.purpose?.title ?? t("signIn", locale));
+        this.options.onLocaleChange?.(locale);
+      },
+      onSuccess: async () => {
+        const showFailure = () => {
+          if (!dialog.isConnected || this.dialog !== dialog)
+            return;
+          for (const node of scroller.querySelectorAll(".host-error, .retry"))
+            node.remove();
+          const status = document.createElement("p");
+          status.className = "host-error";
+          status.setAttribute("role", "alert");
+          status.textContent = t("authFailed", this.options.locale);
+          const retry = document.createElement("button");
+          retry.type = "button";
+          retry.className = "retry";
+          retry.textContent = t("tryAgain", this.options.locale);
+          retry.onclick = async () => {
+            retry.disabled = true;
+            try {
+              await this.options.onSuccess?.();
+              if (this.dialog === dialog)
+                this.destroy();
+            } catch {
+              showFailure();
+            }
+          };
+          scroller.append(status, retry);
+        };
+        try {
+          await this.options.onSuccess?.();
+          if (this.dialog === dialog)
+            this.destroy();
+        } catch {
+          showFailure();
+        }
+      }
+    });
+    this.page.mount();
+    this.themeObserver = new MutationObserver(this.syncTheme);
+    for (const target of [document.documentElement, document.body]) {
+      this.themeObserver.observe(target, { attributes: true, attributeFilter: ["data-theme", "data-mode", "class", "style"] });
+    }
+    if (typeof window.matchMedia === "function") {
+      this.systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
+      this.systemTheme.addEventListener("change", this.syncTheme);
+    }
+    dialog.showModal();
+    const title = container.shadowRoot?.querySelector("h1, h2");
+    if (title) {
+      title.tabIndex = -1;
+      title.focus({ preventScroll: true });
+    }
+  }
+  hostTheme() {
+    for (const element of [document.documentElement, document.body]) {
+      for (const name of ["data-mode", "data-theme"]) {
+        const value = element.getAttribute(name);
+        if (value === "light" || value === "dark")
+          return value;
+        if (value === "system" || value === "auto")
+          return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+    }
+    for (const element of [document.documentElement, document.body]) {
+      if (element.classList.contains("dark"))
+        return "dark";
+      if (element.classList.contains("light"))
+        return "light";
+    }
+    for (const element of [document.body, document.documentElement]) {
+      const schemes = getComputedStyle(element).colorScheme.split(/\s+/);
+      if (schemes.includes("light") && schemes.includes("dark")) {
+        return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      if (schemes.includes("light"))
+        return "light";
+      if (schemes.includes("dark"))
+        return "dark";
+    }
+    if (this.options.theme === "light" || this.options.theme === "dark")
+      return this.options.theme;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.applyTheme(theme);
+  }
+  applyTheme(theme) {
+    if (this.host)
+      this.host.dataset.theme = theme;
+    this.page?.setTheme(theme);
+  }
+  destroy() {
+    this.themeObserver?.disconnect();
+    this.themeObserver = void 0;
+    this.systemTheme?.removeEventListener("change", this.syncTheme);
+    this.systemTheme = void 0;
+    this.page?.destroy();
+    this.page = void 0;
+    this.dialog?.close();
+    this.dialog?.remove();
+    this.dialog = void 0;
+    this.host?.remove();
+    this.host = void 0;
+    if (this.previous?.isConnected)
+      this.previous.focus({ preventScroll: true });
+  }
+};
 export {
   DESIGN_RESET_CSS,
   DESIGN_TOKENS_CSS,
@@ -4177,6 +5036,7 @@ export {
   ICON_EMAIL,
   ICON_PASSKEY,
   LOGIN_PAGE_STYLES,
+  LoginDialog,
   LoginPage,
   OAUTH_ICONS,
   SUPPORTED_LOCALES,