@arcblock/did-connect-core 4.1.51 → 4.1.53

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,32 @@ 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: {method}",
+    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",
+    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 +436,40 @@ 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\uFF1A{method}",
+    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",
+    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 +503,39 @@ 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\uFF1A{method}",
+    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",
+    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 +569,39 @@ 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\u306E\u65B9\u6CD5\uFF1A{method}",
+    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",
+    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 +634,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 +648,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 +2314,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 +2348,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 +2360,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 +2388,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 +2693,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 +2736,7 @@ h1 {
   line-height: 1;
   text-decoration: none;
   cursor: pointer;
+  height: 28px;
   padding: 2px 4px 2px 0;
   transition: color 0.15s ease;
 }
@@ -2663,7 +2749,6 @@ h1 {
   font-weight: 600;
   color: var(--text-white);
   margin-bottom: 8px;
-  clear: both;
   padding-top: 8px;
 }
 
@@ -2837,23 +2922,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 +2966,7 @@ h1 {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  height: 28px;
   padding: 4px 10px;
   font-size: 12px;
   color: var(--text-secondary);
@@ -2901,6 +2996,58 @@ h1 {
 }
 .locale-check { font-size: 11px; line-height: 1; }
 .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; }
+@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 { position: absolute; top: calc(100% + 8px); left: 0; z-index: 4; margin-top: 0;
+  width: max-content; max-width: min(260px,calc(100vw - 80px)); padding: 6px;
+  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); }
+.card-modal .locale-menu .locale-btn { min-height: 40px; height: auto; text-align: left; border-radius: 6px; }
+.card-modal .locale-menu .locale-btn span { overflow-wrap: anywhere; }
+
+.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; }
+.card-modal .back-btn { position: static; display: flex; width: max-content; max-width: 100%; margin: 0 0 16px; }
+.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 +3109,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 +3121,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 +3135,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 +3148,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 +3165,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 +3183,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 +3200,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 +3224,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 +3270,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 +3326,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 +3379,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 +3467,18 @@ 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) {
+    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 +3517,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";
@@ -3291,8 +3558,12 @@ var LoginPage = class {
       menu.appendChild(btn);
     }
     const onOutsideClick = (event) => {
-      if (!wrapper.contains(event.target))
-        setOpen(false);
+      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 +3587,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));
@@ -3333,8 +3608,24 @@ var LoginPage = class {
     }
   }
   renderMethodsView(card, locale, methods) {
-    this.renderHomeLink(card, locale);
+    if (this.options.mode !== "dialog")
+      this.renderHomeLink(card, locale);
     this.renderBrandHeader(card, locale);
+    if (this.options.preferenceKey) {
+      try {
+        const last = localStorage.getItem(`did-login-method:${this.options.preferenceKey}`);
+        const labels = { passkey: "Passkey", oauth: "OAuth", email: t("emailButton", locale), "did-connect": "DID Wallet" };
+        const provider = last?.startsWith("oauth:") ? this.options.oauthProviders?.find((p) => p.enabled && `oauth:${p.id}` === last) : void 0;
+        const label = provider?.name ?? (last ? labels[last] : void 0);
+        if (last && label && (methods.includes(last) || provider && methods.includes("oauth"))) {
+          const hint = document.createElement("p");
+          hint.className = "subtitle";
+          hint.textContent = t("lastUsed", locale, { method: label });
+          card.appendChild(hint);
+        }
+      } catch {
+      }
+    }
     const requestedPasskey = this.options.methods.includes("passkey");
     if (requestedPasskey && !methods.includes("passkey")) {
       const warn = document.createElement("div");
@@ -3342,6 +3633,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 +3648,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 +3688,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 +3707,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 +3735,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 +3766,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 +3794,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 +3802,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 +3820,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 +3832,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 +3842,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,20 +3872,27 @@ 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) {
@@ -3535,6 +3914,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 +3925,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 +3956,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 +4006,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 +4072,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 +4097,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);
@@ -3706,8 +4116,11 @@ var LoginPage = class {
         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 +4128,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)
@@ -3727,20 +4142,27 @@ var LoginPage = class {
           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 +4171,27 @@ var LoginPage = class {
           btn.disabled = false;
         return;
       }
+      this.emit("incomplete");
       renderCrossDeviceState();
     };
     const renderSignInState = () => {
+      this.cardEl?.classList.remove("passkey-creating");
+      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))}`;
       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,6 +4206,8 @@ var LoginPage = class {
   //  methods now render through renderSecondaryGrid)
   // ─── Private: OAuth popup flow ──────────────────────────────────────
   startOAuthPopup(providerId, btn) {
+    this.oauthCleanup?.();
+    const epoch = this.generation;
     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;
@@ -3787,14 +4218,32 @@ var LoginPage = class {
     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) {
+      this.options.onBeforeRedirect?.();
       window.location.href = loginUrl;
       return;
     }
     const originalHTML = btn.innerHTML;
-    btn.innerHTML = `<span class="oauth-spinner"></span> Authorizing...`;
+    btn.textContent = t("oauthWaiting", this.options.locale, { provider: this.options.oauthProviders?.find((p) => p.id === providerId)?.name ?? providerId });
     btn.disabled = true;
     btn.classList.add("oauth-btn-loading");
+    const recovery = document.createElement("div");
+    recovery.className = "oauth-recovery";
+    recovery.setAttribute("role", "status");
+    const hint = document.createElement("p");
+    hint.textContent = t("oauthIncomplete", this.options.locale);
+    const fullPage = document.createElement("a");
+    fullPage.href = loginUrl;
+    fullPage.textContent = t("oauthFullPage", this.options.locale);
+    fullPage.addEventListener("click", () => {
+      this.options.onBeforeRedirect?.();
+      this.oauthCleanup?.();
+    });
+    recovery.append(hint, fullPage);
+    recovery.hidden = true;
+    btn.parentElement?.after(recovery);
     const restore = () => {
+      recovery.hidden = false;
+      this.emit("incomplete");
       btn.innerHTML = originalHTML;
       btn.disabled = false;
       btn.classList.remove("oauth-btn-loading");
@@ -3802,19 +4251,19 @@ var LoginPage = class {
     let settled = false;
     let sessionPollTimer;
     const succeed = () => {
-      if (settled)
+      if (settled || !this.mounted || epoch !== this.generation)
         return;
       settled = true;
       cleanup();
-      btn.innerHTML = `<span class="oauth-check">\u2713</span> Success`;
+      btn.textContent = t("success", this.options.locale);
       this.handleSuccess();
     };
     const onMessage = async (event) => {
-      if (event.origin !== oauthOrigin)
+      if (event.origin !== oauthOrigin || event.source !== popup)
         return;
       if (!event.data || event.data.type !== "authorization_response")
         return;
-      if (settled)
+      if (settled || !this.mounted || epoch !== this.generation)
         return;
       if (pollTimer !== void 0) {
         clearInterval(pollTimer);
@@ -3835,7 +4284,7 @@ var LoginPage = class {
         cleanup();
         return;
       }
-      btn.innerHTML = `<span class="oauth-spinner"></span> Signing in...`;
+      btn.textContent = t("verifying", this.options.locale);
       btn.disabled = true;
       try {
         const oauthBody = { provider: providerId, code, state };
@@ -3844,6 +4293,8 @@ var LoginPage = class {
         await this.http.post(`${servicePrefix}/api/oauth/login`, oauthBody);
         succeed();
       } catch (oauthErr) {
+        if (settled || !this.mounted || epoch !== this.generation)
+          return;
         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") {
@@ -3886,6 +4337,10 @@ var LoginPage = class {
       restore();
     }, 5 * 60 * 1e3);
     const cleanup = () => {
+      settled = true;
+      btn.innerHTML = originalHTML;
+      btn.disabled = false;
+      btn.classList.remove("oauth-btn-loading");
       if (pollTimer !== void 0) {
         clearInterval(pollTimer);
         pollTimer = void 0;
@@ -3897,6 +4352,14 @@ var LoginPage = class {
       clearTimeout(abandonTimer);
       window.removeEventListener("message", onMessage);
     };
+    this.oauthCleanup = () => {
+      cleanup();
+      recovery.remove();
+      try {
+        popup.close();
+      } catch {
+      }
+    };
     window.addEventListener("message", onMessage);
   }
   // (removed dead code: renderEmailButton — email now renders through renderSecondaryGrid)
@@ -3906,19 +4369,24 @@ 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 }))}`;
         grid.appendChild(btn);
         btn.addEventListener("click", () => {
+          this.select("oauth");
+          this.activeProvider = provider.id;
           this.startOAuthPopup(provider.id, btn);
         });
       }
@@ -3930,6 +4398,7 @@ var LoginPage = class {
       btn.innerHTML = `${ICON_EMAIL} ${escapeHtml(t("emailButton", locale))}`;
       grid.appendChild(btn);
       btn.addEventListener("click", () => {
+        this.select("email");
         this.switchView("email");
       });
     }
@@ -3941,6 +4410,7 @@ var LoginPage = class {
       btn.innerHTML = `${ICON_DID_WALLET} ${escapeHtml(walletLabel)}`;
       grid.appendChild(btn);
       btn.addEventListener("click", () => {
+        this.select("did-connect");
         this.switchView("qr");
       });
     }
@@ -3949,19 +4419,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 +4470,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 +4504,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 +4643,238 @@ 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;
+    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 +4884,7 @@ export {
   ICON_EMAIL,
   ICON_PASSKEY,
   LOGIN_PAGE_STYLES,
+  LoginDialog,
   LoginPage,
   OAUTH_ICONS,
   SUPPORTED_LOCALES,