@auth-link/web 1.1.0 → 2.0.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* All variants share the same protocol, accessible controls, and theme tokens. */
+/* A single responsive minimal dialog with accessible controls and theme tokens. */
 .authlink-dialog {
   --authlink-line: #e7ebe9;
   --authlink-soft: #f0f5f2;
@@ -26,7 +26,7 @@
   top: 8px; left: 1px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
 .authlink-close-icon::after { transform: rotate(-45deg); }
 .authlink-dialog .authlink-close:hover { background: var(--authlink-soft); color: var(--authlink-foreground, #173f35); }
-.authlink-dialog .authlink-close:focus-visible, .authlink-cancel:focus-visible, .authlink-button:focus-visible {
+.authlink-dialog .authlink-close:focus-visible, .authlink-button:focus-visible {
   outline: 2px solid var(--authlink-accent, #277456); outline-offset: 2px; }
 .authlink-widget { box-sizing: border-box; width: 100%; min-width: 0; padding: 24px;
   color: var(--authlink-foreground, #173f35); background: var(--authlink-background, #fff);
@@ -64,64 +64,20 @@
 .authlink-widget[data-status="error"] .authlink-status, .authlink-widget[data-status="rejected"] .authlink-status { color: #a04432; }
 .authlink-widget[data-status="confirmed"] .authlink-status { color: var(--authlink-accent, #277456); }
 .authlink-footer { margin-top: 20px; }
-.authlink-widget[data-variant="A"] .authlink-footer .authlink-status { border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; }
+.authlink-footer .authlink-status { border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; }
 .authlink-button { margin-top: 18px; border: 0; border-radius: 8px; min-height: 44px; padding: 10px 20px; font: inherit;
   cursor: pointer; color: #fff; background: var(--authlink-accent, #277456); }
-.authlink-cancel { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px;
-  min-width: 44px; padding: 8px 0; border: 0; border-radius: 4px; background: transparent;
-  color: var(--authlink-muted, #697780); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
-.authlink-cancel:hover { color: var(--authlink-accent, #277456); text-decoration: underline; text-underline-offset: 3px; }
-/* B: wide desktop layout, vertical layout on narrow viewports. */
-.authlink-dialog[data-variant="B"] { width: min(650px, calc(100vw - 32px)); border-radius: 16px; }
-.authlink-dialog[data-variant="B"][data-has-qr="false"] { width: min(460px, calc(100vw - 32px)); }
-.authlink-dialog[data-variant="B"] .authlink-header { margin: 0; padding: 10px 24px; }
-.authlink-dialog[data-variant="B"] .authlink-close { margin-right: -6px; }
-.authlink-dialog[data-variant="B"] .authlink-close::before { content: ''; position: absolute; inset: 7px; border-radius: 7px; background: #f0f2f3; }
-.authlink-widget[data-variant="B"] { text-align: left; }
-.authlink-widget[data-variant="B"] .authlink-title { font-size: 24px; }
-.authlink-widget[data-variant="B"] .authlink-subtitle { display: none; }
-.authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 24px; }
-.authlink-widget[data-variant="B"] .authlink-qr-wrap { width: 100%; margin: 0; text-align: center; }
-.authlink-widget[data-variant="B"] .authlink-qr { width: min(100%, 196px); }
-.authlink-widget[data-variant="B"] .authlink-qr-caption { display: block; }
-.authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-details { min-width: 0; padding-left: 24px; border-left: 1px solid var(--authlink-line, #e7ebe9); }
-.authlink-widget[data-variant="B"] .authlink-code-panel { display: block; padding: 0; background: transparent; }
-.authlink-widget[data-variant="B"] .authlink-code { margin: 10px 0 0; font-size: clamp(30px, 5vw, 40px); }
-.authlink-widget[data-variant="B"] .authlink-status { justify-content: flex-start; }
-.authlink-widget[data-variant="B"] .authlink-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
-  justify-content: space-between; border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 8px; margin-top: 24px; }
-/* C: compact card; becomes a bottom sheet on mobile. */
-.authlink-dialog[data-variant="C"] { width: min(390px, calc(100vw - 32px)); border-radius: 14px; }
-.authlink-dialog[data-variant="C"] .authlink-header { min-height: 58px; border: 0; padding-bottom: 0; }
-.authlink-widget[data-variant="C"] { padding-top: 12px; text-align: left; }
-.authlink-widget[data-variant="C"] .authlink-title { font-size: 22px; }
-.authlink-widget[data-variant="C"] .authlink-qr { width: min(100%, 180px); }
-.authlink-widget[data-variant="C"] .authlink-qr-wrap { margin-bottom: 18px; }
-.authlink-widget[data-variant="C"] .authlink-code-panel { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; gap: 10px; background: #f5f7f8; }
-.authlink-widget[data-variant="C"] .authlink-code { font-size: clamp(22px, 6.8vw, 26px); margin: 4px 0 0; }
-.authlink-widget[data-variant="C"] .authlink-progress { grid-column: 1 / -1; }
-.authlink-widget[data-variant="C"] .authlink-help { font-size: 11px; margin-top: 12px; }
-.authlink-widget[data-variant="C"] .authlink-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; margin-top: 18px; }
-.authlink-widget[data-variant="C"] .authlink-status { justify-content: flex-start; margin: 0; }
 @media (max-width: 560px) {
-  .authlink-dialog, .authlink-dialog[data-variant="B"], .authlink-dialog[data-variant="B"][data-has-qr="false"] { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
+  .authlink-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
   .authlink-header { margin: 0 20px; }
   .authlink-widget { padding: 20px; }
-  .authlink-title, .authlink-widget[data-variant="B"] .authlink-title { font-size: 22px; }
+  .authlink-title { font-size: 22px; }
   .authlink-code-panel { padding: 14px 16px; gap: 0 10px; }
-  .authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-body { display: block; }
-  .authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-details { border: 0; padding: 22px 0 0; }
-  .authlink-widget[data-variant="B"] .authlink-code { font-size: 36px; }
-  .authlink-widget[data-variant="B"] .authlink-qr { width: min(100%, 180px); }
-  .authlink-dialog[data-variant="C"] { width: 100%; max-width: none; margin: auto 0 0; max-height: calc(100dvh - 12px); border-radius: 20px 20px 0 0; border-bottom: 0; }
-  .authlink-dialog[data-variant="C"] .authlink-widget { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
 }
 @media (max-width: 350px) {
   .authlink-widget { padding: 16px; }
   .authlink-header { margin: 0 16px; }
   .authlink-code-panel { padding: 12px; }
-  .authlink-widget[data-variant="C"] .authlink-code-panel { grid-template-columns: minmax(0, 1fr); }
-  .authlink-widget[data-variant="C"] .authlink-code { margin-bottom: 4px; }
 }
 @media (prefers-reduced-motion: reduce) { .authlink-dialog * { animation: none !important; transition: none !important; } }
 

package/dist/types/modal.d.ts

@@ -1,5 +1,5 @@
 import type { ViewNode } from './view.js';
-import type { DialogVariant, Locale, WidgetOptions } from './types.js';
+import type { Locale, WidgetOptions } from './types.js';
 export interface AuthLinkModalOptions extends WidgetOptions {
     className?: string;
     onClose?: () => void;
@@ -10,8 +10,6 @@ export interface AuthLinkModal {
     /** Component cleanup: close without delivering a user-close callback. */
     destroy(): void;
     setLocale(locale?: Locale): void;
-    /** Change presentation without creating or restarting a request. */
-    setVariant(variant?: DialogVariant): void;
     retry(): void;
 }
 export declare function element(value: ViewNode | string, svg?: boolean): Node;

package/dist/types/passcode.d.ts

@@ -1,6 +1,6 @@
 import type { ClientOptions } from './core.js';
 import type { AuthLinkModal } from './modal.js';
-import type { DialogVariant, Locale } from './types.js';
+import type { Locale } from './types.js';
 export interface OTPVerification {
     status: 'confirmed';
     verificationId: string;
@@ -15,7 +15,6 @@ export interface PasscodeOptions {
     /** The CMS's single pending action deadline, not a TOTP time step. */
     expiresAt: string;
     locale?: Locale;
-    variant?: DialogVariant;
     /** First-time enrollment only. Ordinary verification has no QR or request ID. */
     bindingQr?: string;
     authLinkOrigin?: string;

package/dist/types/react.d.ts

@@ -3,7 +3,7 @@ import type { AuthLinkModalOptions } from './modal.js';
 import type { PasscodeOptions } from './passcode.js';
 export type { PasscodeOptions, PasscodeClient, OTPVerification } from './passcode.js';
 export declare function AuthLinkPasscode(props: PasscodeOptions): null;
-export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale, DialogVariant } from './types.js';
+export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale } from './types.js';
 export declare function useAuthLink(options: WidgetOptions): {
     snapshot: Snapshot;
     retry: () => void;

package/dist/types/types.d.ts

@@ -1,5 +1,4 @@
 export type Mode = 'bind' | 'confirm';
-export type DialogVariant = 'A' | 'B' | 'C';
 export type Status = 'idle' | 'pending' | 'confirmed' | 'rejected' | 'expired' | 'error';
 export type Locale = 'en' | 'zh-CN' | 'zh-TW' | 'ja' | 'bn' | 'es' | 'fil' | 'hi' | 'id' | 'ms' | 'pt' | 'th' | 'vi';
 /** Current display only. The generation secret must never reach the browser. */
@@ -64,8 +63,6 @@ export interface WidgetOptions extends Events {
     ticket: Ticket;
     client: AuthLinkClient;
     locale?: Locale;
-    /** A: minimal (default), B: split, C: compact / mobile bottom sheet. */
-    variant?: DialogVariant;
     showQr?: boolean;
     intervalMs?: number;
     onRefresh?: () => void;

package/dist/types/view.d.ts

@@ -1,14 +1,12 @@
-import type { DialogVariant, Locale, Mode, Snapshot } from './types.js';
+import type { Locale, Mode, Snapshot } from './types.js';
 export interface ViewNode {
     tag: string;
     props: Record<string, unknown>;
     children: (ViewNode | string)[];
 }
-export declare function resolveVariant(variant?: string): DialogVariant;
 export declare function widgetView(options: {
     mode: Mode;
     locale?: Locale;
-    variant?: DialogVariant;
     snapshot: Snapshot;
     passcodeMode?: boolean;
     qr?: string;
@@ -18,6 +16,5 @@ export declare function widgetView(options: {
     setCode?: (code: string) => void;
     retry: () => void;
     refresh?: () => void;
-    close?: () => void;
     className?: string;
 }): ViewNode;

package/dist/types/vue.d.ts

@@ -4,7 +4,7 @@ import type { AuthLinkModalOptions } from './modal.js';
 import type { PasscodeOptions } from './passcode.js';
 export type { PasscodeOptions, PasscodeClient, OTPVerification } from './passcode.js';
 export declare const AuthLinkPasscode: DefineComponent<PasscodeOptions>;
-export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale, DialogVariant } from './types.js';
+export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale } from './types.js';
 export declare function useAuthLink(getOptions: () => WidgetOptions): {
     snapshot: ShallowRef<Snapshot>;
     retry: () => void;

package/dist/vue.js

@@ -2256,12 +2256,9 @@ function getMessages(locale) {
 
 // src/view.ts
 var node = (tag, props, ...children) => ({ tag, props, children });
-function resolveVariant(variant) {
-  return variant === "B" || variant === "C" ? variant : "A";
-}
 function widgetView(options) {
   const { snapshot: s, mode, retry, refresh } = options;
-  const locale = resolveLocale(options.locale), variant = resolveVariant(options.variant);
+  const locale = resolveLocale(options.locale);
   const l = getMessages(locale);
   const pending = s.status === "pending", hasQr = pending && (mode === "bind" || Boolean(options.showQr)) && Boolean(options.qr);
   const status = { idle: l.loading, pending: options.passcodeMode ? l.otpWaiting : l.waiting, confirmed: l.confirmed, rejected: l.rejected, expired: l.expired, error: l.error }[s.status];
@@ -2278,12 +2275,6 @@ function widgetView(options) {
     expiring ? l.expiring : status,
     ...expiring ? [node("span", { class: "authlink-expiry", "aria-hidden": "true" }, ` \xB7 ${expiryTime}`)] : []
   );
-  const cancel = () => options.close ? [node("button", {
-    type: "button",
-    class: "authlink-cancel",
-    "data-authlink-focus": "cancel",
-    onClick: options.close
-  }, l.cancel)] : [];
   const children = [node("h3", { class: "authlink-title" }, l[mode])];
   if (hasQr) children.push(node("p", { class: "authlink-subtitle" }, l.scan));
   if (pending) {
@@ -2326,9 +2317,7 @@ function widgetView(options) {
       ...s.error ? [node("p", { class: "authlink-input-error", role: "alert" }, options.passcodeMode ? s.error.message === "OTP_NOT_CONFIGURED" ? l.otpSetup : l.otpError : l.codeError)] : []
     ];
     children.push(node("div", { class: "authlink-body" }, ...qr, node("div", { class: "authlink-details" }, ...detail)));
-    if (variant === "A") children.push(node("div", { class: "authlink-footer" }, statusNode()));
-    if (variant === "B") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
-    if (variant === "C") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
+    children.push(node("div", { class: "authlink-footer" }, statusNode()));
   } else {
     children.push(statusNode());
     if (s.error?.message === "CONFIRMATION_CODE_LOCKED") children.push(node("p", { class: "authlink-input-error", role: "alert" }, l.codeLocked));
@@ -2349,7 +2338,6 @@ function widgetView(options) {
     lang: locale,
     class: `authlink-widget ${options.className ?? ""}`.trim(),
     "data-status": s.status,
-    "data-variant": variant,
     "data-has-qr": String(hasQr),
     "aria-label": l[mode]
   }, ...children);
@@ -2393,7 +2381,7 @@ function openAuthLink(options) {
   content.className = "authlink-modal-content";
   header.append(brand, closeButton);
   dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), snapshot = initialSnapshot(), closed = false;
+  let locale = options.locale, snapshot = initialSnapshot(), closed = false;
   let abort;
   let inputCode = "";
   let submitCode;
@@ -2423,7 +2411,6 @@ function openAuthLink(options) {
     const language = resolveLocale(locale), messages2 = getMessages(language);
     dialog.lang = language;
     dialog.setAttribute("aria-label", messages2[mode]);
-    dialog.dataset.variant = variant;
     dialog.dataset.mode = mode;
     dialog.dataset.hasQr = String(snapshot.status === "pending" && (mode === "bind" || Boolean(options.showQr)));
     closeButton.setAttribute("aria-label", messages2.close);
@@ -2432,7 +2419,6 @@ function openAuthLink(options) {
     const next = element(widgetView({
       mode,
       locale,
-      variant,
       snapshot,
       qr: image,
       showQr: options.showQr,
@@ -2442,8 +2428,7 @@ function openAuthLink(options) {
       },
       submitCode: (code) => submitCode?.(code) ?? Promise.resolve(),
       retry,
-      refresh: options.onRefresh,
-      close: () => dispose(true)
+      refresh: options.onRefresh
     }));
     const oldCode = content.querySelector(".authlink-code");
     const nextCode = next.querySelector(".authlink-code");
@@ -2556,10 +2541,6 @@ function openAuthLink(options) {
       locale = value;
       render();
     },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
     retry
   };
 }
@@ -2597,7 +2578,7 @@ function openPasscode(options) {
   content.className = "authlink-modal-content";
   header.append(brand, close);
   dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), closed = false, busy = false, code = "", error;
+  let locale = options.locale, closed = false, busy = false, code = "", error;
   const mode = options.bindingQr ? "bind" : "confirm";
   let image;
   if (options.bindingQr) {
@@ -2624,7 +2605,6 @@ function openPasscode(options) {
     if (closed) return;
     const l = getMessages(locale);
     dialog.lang = resolveLocale(locale);
-    dialog.dataset.variant = variant;
     dialog.dataset.mode = mode;
     dialog.dataset.hasQr = String(Boolean(image));
     dialog.setAttribute("aria-label", l[mode]);
@@ -2635,7 +2615,6 @@ function openPasscode(options) {
     content.replaceChildren(element(widgetView({
       mode,
       locale,
-      variant,
       passcodeMode: true,
       snapshot,
       qr: image,
@@ -2648,8 +2627,7 @@ function openPasscode(options) {
       retry: () => {
         error = void 0;
         render();
-      },
-      close: () => dispose(true)
+      }
     })));
     if (focused) content.querySelector("input")?.focus();
   };
@@ -2711,10 +2689,6 @@ function openPasscode(options) {
       locale = value;
       render();
     },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
     retry: () => {
       error = void 0;
       render();
@@ -2730,8 +2704,7 @@ var AuthLinkPasscode = defineComponent({
     expiresAt: { type: String, required: true },
     bindingQr: String,
     authLinkOrigin: String,
-    locale: String,
-    variant: String
+    locale: String
   },
   emits: ["verified", "expired", "error", "close"],
   setup(props, { emit }) {
@@ -2753,7 +2726,6 @@ var AuthLinkPasscode = defineComponent({
     });
     watch([() => props.client, () => props.expiresAt, () => props.bindingQr, () => props.authLinkOrigin], open);
     watch(() => props.locale, (value) => modal?.setLocale(value));
-    watch(() => props.variant, (value) => modal?.setVariant(value));
     onBeforeUnmount(() => {
       mounted = false;
       modal?.destroy();
@@ -2819,7 +2791,6 @@ function widget(mode) {
       ticket: { type: Object, required: true },
       client: { type: Object, required: true },
       locale: { type: String, default: defaultLocale },
-      variant: { type: String, default: "A" },
       intervalMs: Number,
       showQr: Boolean,
       className: String,
@@ -2863,7 +2834,6 @@ function widget(mode) {
         () => Boolean(props.onRefresh)
       ], open);
       watch(() => props.locale, (value) => modal?.setLocale(value));
-      watch(() => props.variant, (value) => modal?.setVariant(value));
       onBeforeUnmount(() => {
         mounted = false;
         modal?.destroy();