@gerege-systems/eid-mongolia-sdk 0.15.2 → 0.15.3

package/README.md

@@ -35,7 +35,7 @@ Smart-ID-тэй RP-үүдийн хэв маяг: хөтөчид **нэг тов
 
 | Хаана | Юу болно |
 |---|---|
-| Desktop хөтөч | Цонх: QR (секунд тутам шинэчлэгдэнэ) + «регистрийн дугаараар утас руу мэдэгдэл» (push), үлдсэн хугацаа, шууд төлөв |
+| Desktop хөтөч | Цонх: QR (секунд тутам шинэчлэгдэнэ) + баталгаажуулах код + «Хүсэлтийн хугацаа m:ss» (сүүлийн 30с анхааруулах өнгө) + «Регистрийн дугаараар нэвтрэх» товч (ижил цонхонд доош дэлгэгдэх push хэсэг), шууд төлөв |
 | Утасны хөтөч | Товч → `start?mode=web2app` → сервер 302 → eID апп (Web2App). Апп баталгаажуулаад `/auth/eid/callback` руу буцаана |
 | Backend | session эхлүүлэх, QR угсрах (`sessionSecret` серверт), poll, `validateAuth` (гинж + ACSP_V2 + `flowType` + Web2App-д `userChallengeVerifier`) → таны `onSuccess` |
 

package/dist/button.cjs

@@ -397,8 +397,9 @@ var T = {
     loading: "\u0410\u0447\u0430\u0430\u043B\u0436 \u0431\u0430\u0439\u043D\u0430",
     qrAlt: "\u041D\u044D\u0432\u0442\u0440\u044D\u0445 QR \u043A\u043E\u0434 \u2014 \u0443\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 eID Mongolia \u0430\u043F\u043F\u0430\u0430\u0440 \u0443\u043D\u0448\u0443\u0443\u043B\u043D\u0430",
     steps: ["\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 eID Mongolia \u0430\u043F\u043F\u044B\u0433 \u043D\u044D\u044D\u043D\u044D", "QR \u043A\u043E\u0434\u044B\u0433 \u0443\u043D\u0448\u0443\u0443\u043B\u043D\u0430", "PIN1 \u043A\u043E\u0434\u043E\u043E \u043E\u0440\u0443\u0443\u043B\u043D\u0430"],
-    code: "\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434:",
+    vcLabel: "\u0411\u0430\u0442\u0430\u043B\u0433\u0430\u0430\u0436\u0443\u0443\u043B\u0430\u0445 \u043A\u043E\u0434",
     or: "\u044D\u0441\u0432\u044D\u043B",
+    usePush: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440\u0430\u0430\u0440 \u043D\u044D\u0432\u0442\u0440\u044D\u0445",
     idLabel: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440",
     idHint: "\u0423\u0442\u0441\u0430\u043D\u0434 \u0442\u0430\u043D\u044C \u043C\u044D\u0434\u044D\u0433\u0434\u044D\u043B \u043E\u0447\u043D\u043E. \u0418\u0440\u0433\u044D\u043D\u0438\u0439 12 \u043E\u0440\u043E\u043D\u0442\u043E\u0439 \u0434\u0443\u0433\u0430\u0430\u0440\u0430\u0430\u0440 \u0447 \u0431\u043E\u043B\u043D\u043E.",
     idEmpty: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440 \u043E\u0440\u0443\u0443\u043B\u043D\u0430 \u0443\u0443",
@@ -411,7 +412,7 @@ var T = {
     waitText: "\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434 \u0438\u0436\u0438\u043B \u0431\u043E\u043B PIN1 \u043E\u0440\u0443\u0443\u043B\u043D\u0430 \u0443\u0443. \u0418\u0436\u0438\u043B \u0431\u0438\u0448 \u0431\u043E\u043B \u0442\u0430\u0442\u0433\u0430\u043B\u0437\u0430\u043D\u0430 \u0443\u0443.",
     waiting: "\u0425\u04AF\u043B\u044D\u044D\u0436 \u0431\u0430\u0439\u043D\u0430",
     back: "\u0411\u0443\u0446\u0430\u0445",
-    left: "\u04AE\u043B\u0434\u0441\u044D\u043D \u0445\u0443\u0433\u0430\u0446\u0430\u0430",
+    left: "\u0425\u04AF\u0441\u044D\u043B\u0442\u0438\u0439\u043D \u0445\u0443\u0433\u0430\u0446\u0430\u0430:",
     stale: "QR \u043A\u043E\u0434 \u0445\u0443\u0443\u0447\u0438\u0440\u0441\u0430\u043D",
     refresh: "\u0428\u0438\u043D\u044D\u0447\u043B\u044D\u0445",
     offline: "\u0425\u043E\u043B\u0431\u043E\u043B\u0442 \u0442\u0430\u0441\u0430\u0440\u0441\u0430\u043D. \u0418\u043D\u0442\u0435\u0440\u043D\u044D\u0442\u044D\u044D \u0448\u0430\u043B\u0433\u0430\u043D\u0430 \u0443\u0443 \u2014 \u0434\u0430\u0445\u0438\u043D \u0445\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u0445\u044B\u0433 \u043E\u0440\u043E\u043B\u0434\u043E\u0436 \u0431\u0430\u0439\u043D\u0430.",
@@ -425,7 +426,7 @@ var T = {
     retry: "\u0414\u0430\u0445\u0438\u043D \u043E\u0440\u043E\u043B\u0434\u043E\u0445",
     success: "\u0410\u043C\u0436\u0438\u043B\u0442\u0442\u0430\u0439 \u043D\u044D\u0432\u0442\u044D\u0440\u043B\u044D\u044D",
     sent: (vc) => `\u041C\u044D\u0434\u044D\u0433\u0434\u044D\u043B \u0438\u043B\u0433\u044D\u044D\u043B\u044D\u044D. \u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434 ${vc.split("").join(" ")}`,
-    minute: "1 \u043C\u0438\u043D\u0443\u0442 \u04AF\u043B\u0434\u043B\u044D\u044D"
+    minutes: (n) => `${n} \u043C\u0438\u043D\u0443\u0442 \u04AF\u043B\u0434\u043B\u044D\u044D`
   },
   en: {
     button: "Log in with eID",
@@ -434,8 +435,9 @@ var T = {
     loading: "Loading",
     qrAlt: "Login QR code \u2014 scan it with the eID Mongolia app on your phone",
     steps: ["Open the eID Mongolia app on your phone", "Scan the QR code", "Enter your PIN1"],
-    code: "Code on your phone:",
+    vcLabel: "Verification code",
     or: "or",
+    usePush: "Log in with registration number",
     idLabel: "Registration number",
     idHint: "A notification will be sent to your phone. The 12-digit civil ID also works.",
     idEmpty: "Enter your registration number",
@@ -448,7 +450,7 @@ var T = {
     waitText: "If the code on your phone matches, enter PIN1. Otherwise decline.",
     waiting: "Waiting",
     back: "Back",
-    left: "Time left",
+    left: "Request expires in:",
     stale: "QR code expired",
     refresh: "Refresh",
     offline: "Connection lost. Check your internet \u2014 reconnecting.",
@@ -462,7 +464,7 @@ var T = {
     retry: "Try again",
     success: "Logged in",
     sent: (vc) => `Notification sent. Code on your phone ${vc.split("").join(" ")}`,
-    minute: "1 minute left"
+    minutes: (n) => `${n} minute${n === 1 ? "" : "s"} left`
   }
 };
 var EID_COLOR_TOKENS = [
@@ -528,7 +530,8 @@ h2, p, ol { margin: 0; }
 .qr.stale svg { opacity: 0.12; }
 .qr-stale { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
   color: hsl(222 47% 11%); font-weight: 500; }
-.qr-vc { margin-top: 8px; text-align: center; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.qr-vc { margin-top: 12px; text-align: center; }
+.vc-label { font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
 .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--_eid-fg-muted); }
 .steps { margin-top: 16px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
 .steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; }
@@ -536,6 +539,13 @@ h2, p, ol { margin: 0; }
   color: var(--_eid-accent-subtle-fg); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
 .or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--_eid-fg-subtle); font-size: 0.8125rem; }
 .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--_eid-border); }
+.disc-btn .chev { width: 16px; height: 16px; flex: none; transition: transform 200ms cubic-bezier(0,0,0.2,1); }
+.disc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
+.disc { margin: 0 -4px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(0,0,0.2,1); }
+.disc.open { grid-template-rows: 1fr; }
+.disc > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 200ms; }
+.disc.open > div { visibility: visible; transition-delay: 0s; }
+.disc form { padding: 16px 4px 4px; }
 .field { display: grid; gap: 8px; }
 .field label { font-weight: 500; }
 .field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--_eid-border-strong); border-radius: var(--_eid-radius);
@@ -546,7 +556,8 @@ h2, p, ol { margin: 0; }
 .err { font-size: 0.8125rem; color: var(--_eid-danger-fg); font-weight: 500; }
 .push { margin-top: 16px; }
 .center { text-align: center; }
-.vc { font: 600 2.25rem/2.5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; padding-left: 0.16em; }
+.vc { font: 700 2rem/2.5rem ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.16em;
+  padding-left: 0.16em; color: var(--_eid-fg); }
 .vc:focus, h2:focus { outline: none; }
 .text { margin-top: 12px; color: var(--_eid-fg-muted); }
 .pending { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--_eid-fg-muted); }
@@ -555,7 +566,8 @@ h2, p, ol { margin: 0; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .netwarn { margin-top: 16px; padding: 8px 12px; border: 1px solid var(--_eid-warning-border); border-radius: var(--_eid-radius); background: var(--_eid-warning-bg);
   color: var(--_eid-warning-fg); font-size: 0.8125rem; }
-.meta { margin-top: 16px; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.meta { margin-top: 4px; text-align: center; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.meta.low, .meta.low .mono { color: var(--_eid-warning-fg); }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; }
   .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }
 `;
@@ -578,6 +590,24 @@ function el(tag, attrs = {}, text) {
   if (text != null) e.textContent = text;
   return e;
 }
+function chevron() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  for (const [k, v] of Object.entries({
+    class: "chev",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true"
+  })) svg.setAttribute(k, v);
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", "m6 9 6 6 6-6");
+  svg.append(path);
+  return svg;
+}
 var Base = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
 var EidLoginButton = class extends Base {
@@ -710,7 +740,7 @@ var EidLoginButton = class extends Base {
       return;
     }
     if (e.key !== "Tab" || !this.backdrop) return;
-    const items = Array.from(this.backdrop.querySelectorAll(FOCUSABLE)).filter((n) => !n.closest("[hidden]"));
+    const items = Array.from(this.backdrop.querySelectorAll(FOCUSABLE)).filter((n) => !n.closest("[hidden], [inert]"));
     if (items.length === 0) return;
     const first = items[0];
     const last = items[items.length - 1];
@@ -792,21 +822,22 @@ var EidLoginButton = class extends Base {
     if (s.qr) this.drawQr(s.qr);
     const nodes = [this.qrBox];
     if (s.vc) {
-      const vc = el("p", { class: "qr-vc" }, t.code + " ");
-      vc.append(el("span", { class: "mono" }, s.vc));
+      const vc = el("div", { class: "qr-vc" });
+      vc.append(el("p", { class: "vc-label", id: "eid-vc-label" }, t.vcLabel), el("p", { class: "vc" }, s.vc));
       nodes.push(vc);
     }
+    nodes.push(this.meta());
     const steps = el("ol", { class: "steps" });
     for (const st of t.steps) steps.append(el("li", {}, st));
-    nodes.push(steps, el("div", { class: "or", role: "separator", "aria-label": t.or }, t.or), this.pushForm());
+    nodes.push(steps, el("div", { class: "or", role: "separator", "aria-label": t.or }, t.or), ...this.pushToggle());
     this.netwarn = el("p", { class: "netwarn", role: "status", hidden: "" }, t.offline);
-    nodes.push(this.netwarn, this.meta());
+    nodes.push(this.netwarn);
     this.view(...nodes);
   }
   leftEl = null;
   meta() {
     const p = el("p", { class: "meta" }, this.t.left + " ");
-    this.leftEl = el("span", { class: "mono", role: "timer", "aria-live": "off" }, "--:--");
+    this.leftEl = el("span", { class: "mono", role: "timer", "aria-live": "off" }, "-:--");
     p.append(this.leftEl);
     if (this.left < 0) p.hidden = true;
     return p;
@@ -819,8 +850,9 @@ var EidLoginButton = class extends Base {
       this.leftEl.parentElement.hidden = false;
       const m = Math.floor(this.left / 60);
       const s = this.left % 60;
-      this.leftEl.textContent = `${m < 10 ? "0" : ""}${m}:${s < 10 ? "0" : ""}${s}`;
-      if (this.left === 60) this.say(this.t.minute);
+      this.leftEl.textContent = `${m}:${s < 10 ? "0" : ""}${s}`;
+      this.leftEl.parentElement.classList.toggle("low", this.left <= 30);
+      if (this.left > 0 && s === 0 && this.left !== seconds) this.say(this.t.minutes(m));
     };
     render();
     if (seconds < 0) return;
@@ -830,6 +862,24 @@ var EidLoginButton = class extends Base {
       if (this.left <= 0) this.end("expired");
     }, 1e3);
   }
+  /** «Регистрийн дугаараар нэвтрэх» товч + ижил цонхонд доошоо дэлгэгдэх push хэсэг (QR, код харагдсаар; QR poll үргэлжилнэ). */
+  pushToggle() {
+    const toggle = el("button", { type: "button", class: "btn btn-outline disc-btn", "aria-expanded": "false", "aria-controls": "eid-push" });
+    toggle.append(el("span", {}, this.t.usePush), chevron());
+    const disc = el("div", { class: "disc", id: "eid-push" });
+    const inner = el("div", { inert: "" });
+    const form = this.pushForm();
+    inner.append(form);
+    disc.append(inner);
+    toggle.addEventListener("click", () => {
+      const open = toggle.getAttribute("aria-expanded") !== "true";
+      toggle.setAttribute("aria-expanded", String(open));
+      disc.classList.toggle("open", open);
+      inner.toggleAttribute("inert", !open);
+      if (open) form.querySelector("input")?.focus();
+    });
+    return [toggle, disc];
+  }
   pushForm() {
     const t = this.t;
     const form = el("form", { novalidate: "" });
@@ -898,14 +948,14 @@ var EidLoginButton = class extends Base {
   showWait(s) {
     const t = this.t;
     const c = el("div", { class: "center" });
-    c.append(el("h2", { class: "sr-only" }, t.waiting));
-    const vc = el("p", { class: "vc", tabindex: "-1", "aria-describedby": "eid-wait" }, s.vc ?? "");
+    c.append(el("h2", { class: "sr-only" }, t.waiting), el("p", { class: "vc-label", id: "eid-vc-label" }, t.vcLabel));
+    const vc = el("p", { class: "vc", tabindex: "-1", "aria-labelledby": "eid-vc-label", "aria-describedby": "eid-wait" }, s.vc ?? "");
     const pending = el("p", { class: "pending" });
     pending.append(el("span", { class: "spinner", "aria-hidden": "true" }), el("span", {}, t.waiting));
     const back = el("button", { type: "button", class: "btn btn-outline" }, t.back);
     back.addEventListener("click", () => this.open());
     this.netwarn = el("p", { class: "netwarn", role: "status", hidden: "" }, t.offline);
-    c.append(vc, el("p", { class: "text", id: "eid-wait" }, t.waitText), pending, back, this.netwarn, this.meta());
+    c.append(vc, this.meta(), el("p", { class: "text", id: "eid-wait" }, t.waitText), pending, back, this.netwarn);
     this.view(c);
     this.startTimer(s.expiresIn ?? -1);
     vc.focus();

package/dist/button.d.cts

@@ -78,6 +78,8 @@ declare class EidLoginButton extends Base {
     private leftEl;
     private meta;
     private startTimer;
+    /** «Регистрийн дугаараар нэвтрэх» товч + ижил цонхонд доошоо дэлгэгдэх push хэсэг (QR, код харагдсаар; QR poll үргэлжилнэ). */
+    private pushToggle;
     private pushForm;
     private showWait;
     private schedule;

package/dist/button.d.ts

@@ -78,6 +78,8 @@ declare class EidLoginButton extends Base {
     private leftEl;
     private meta;
     private startTimer;
+    /** «Регистрийн дугаараар нэвтрэх» товч + ижил цонхонд доошоо дэлгэгдэх push хэсэг (QR, код харагдсаар; QR poll үргэлжилнэ). */
+    private pushToggle;
     private pushForm;
     private showWait;
     private schedule;

package/dist/button.js

@@ -368,8 +368,9 @@ var T = {
     loading: "\u0410\u0447\u0430\u0430\u043B\u0436 \u0431\u0430\u0439\u043D\u0430",
     qrAlt: "\u041D\u044D\u0432\u0442\u0440\u044D\u0445 QR \u043A\u043E\u0434 \u2014 \u0443\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 eID Mongolia \u0430\u043F\u043F\u0430\u0430\u0440 \u0443\u043D\u0448\u0443\u0443\u043B\u043D\u0430",
     steps: ["\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 eID Mongolia \u0430\u043F\u043F\u044B\u0433 \u043D\u044D\u044D\u043D\u044D", "QR \u043A\u043E\u0434\u044B\u0433 \u0443\u043D\u0448\u0443\u0443\u043B\u043D\u0430", "PIN1 \u043A\u043E\u0434\u043E\u043E \u043E\u0440\u0443\u0443\u043B\u043D\u0430"],
-    code: "\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434:",
+    vcLabel: "\u0411\u0430\u0442\u0430\u043B\u0433\u0430\u0430\u0436\u0443\u0443\u043B\u0430\u0445 \u043A\u043E\u0434",
     or: "\u044D\u0441\u0432\u044D\u043B",
+    usePush: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440\u0430\u0430\u0440 \u043D\u044D\u0432\u0442\u0440\u044D\u0445",
     idLabel: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440",
     idHint: "\u0423\u0442\u0441\u0430\u043D\u0434 \u0442\u0430\u043D\u044C \u043C\u044D\u0434\u044D\u0433\u0434\u044D\u043B \u043E\u0447\u043D\u043E. \u0418\u0440\u0433\u044D\u043D\u0438\u0439 12 \u043E\u0440\u043E\u043D\u0442\u043E\u0439 \u0434\u0443\u0433\u0430\u0430\u0440\u0430\u0430\u0440 \u0447 \u0431\u043E\u043B\u043D\u043E.",
     idEmpty: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0439\u043D \u0434\u0443\u0433\u0430\u0430\u0440 \u043E\u0440\u0443\u0443\u043B\u043D\u0430 \u0443\u0443",
@@ -382,7 +383,7 @@ var T = {
     waitText: "\u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434 \u0438\u0436\u0438\u043B \u0431\u043E\u043B PIN1 \u043E\u0440\u0443\u0443\u043B\u043D\u0430 \u0443\u0443. \u0418\u0436\u0438\u043B \u0431\u0438\u0448 \u0431\u043E\u043B \u0442\u0430\u0442\u0433\u0430\u043B\u0437\u0430\u043D\u0430 \u0443\u0443.",
     waiting: "\u0425\u04AF\u043B\u044D\u044D\u0436 \u0431\u0430\u0439\u043D\u0430",
     back: "\u0411\u0443\u0446\u0430\u0445",
-    left: "\u04AE\u043B\u0434\u0441\u044D\u043D \u0445\u0443\u0433\u0430\u0446\u0430\u0430",
+    left: "\u0425\u04AF\u0441\u044D\u043B\u0442\u0438\u0439\u043D \u0445\u0443\u0433\u0430\u0446\u0430\u0430:",
     stale: "QR \u043A\u043E\u0434 \u0445\u0443\u0443\u0447\u0438\u0440\u0441\u0430\u043D",
     refresh: "\u0428\u0438\u043D\u044D\u0447\u043B\u044D\u0445",
     offline: "\u0425\u043E\u043B\u0431\u043E\u043B\u0442 \u0442\u0430\u0441\u0430\u0440\u0441\u0430\u043D. \u0418\u043D\u0442\u0435\u0440\u043D\u044D\u0442\u044D\u044D \u0448\u0430\u043B\u0433\u0430\u043D\u0430 \u0443\u0443 \u2014 \u0434\u0430\u0445\u0438\u043D \u0445\u043E\u043B\u0431\u043E\u0433\u0434\u043E\u0445\u044B\u0433 \u043E\u0440\u043E\u043B\u0434\u043E\u0436 \u0431\u0430\u0439\u043D\u0430.",
@@ -396,7 +397,7 @@ var T = {
     retry: "\u0414\u0430\u0445\u0438\u043D \u043E\u0440\u043E\u043B\u0434\u043E\u0445",
     success: "\u0410\u043C\u0436\u0438\u043B\u0442\u0442\u0430\u0439 \u043D\u044D\u0432\u0442\u044D\u0440\u043B\u044D\u044D",
     sent: (vc) => `\u041C\u044D\u0434\u044D\u0433\u0434\u044D\u043B \u0438\u043B\u0433\u044D\u044D\u043B\u044D\u044D. \u0423\u0442\u0441\u0430\u043D \u0434\u044D\u044D\u0440\u0445 \u043A\u043E\u0434 ${vc.split("").join(" ")}`,
-    minute: "1 \u043C\u0438\u043D\u0443\u0442 \u04AF\u043B\u0434\u043B\u044D\u044D"
+    minutes: (n) => `${n} \u043C\u0438\u043D\u0443\u0442 \u04AF\u043B\u0434\u043B\u044D\u044D`
   },
   en: {
     button: "Log in with eID",
@@ -405,8 +406,9 @@ var T = {
     loading: "Loading",
     qrAlt: "Login QR code \u2014 scan it with the eID Mongolia app on your phone",
     steps: ["Open the eID Mongolia app on your phone", "Scan the QR code", "Enter your PIN1"],
-    code: "Code on your phone:",
+    vcLabel: "Verification code",
     or: "or",
+    usePush: "Log in with registration number",
     idLabel: "Registration number",
     idHint: "A notification will be sent to your phone. The 12-digit civil ID also works.",
     idEmpty: "Enter your registration number",
@@ -419,7 +421,7 @@ var T = {
     waitText: "If the code on your phone matches, enter PIN1. Otherwise decline.",
     waiting: "Waiting",
     back: "Back",
-    left: "Time left",
+    left: "Request expires in:",
     stale: "QR code expired",
     refresh: "Refresh",
     offline: "Connection lost. Check your internet \u2014 reconnecting.",
@@ -433,7 +435,7 @@ var T = {
     retry: "Try again",
     success: "Logged in",
     sent: (vc) => `Notification sent. Code on your phone ${vc.split("").join(" ")}`,
-    minute: "1 minute left"
+    minutes: (n) => `${n} minute${n === 1 ? "" : "s"} left`
   }
 };
 var EID_COLOR_TOKENS = [
@@ -499,7 +501,8 @@ h2, p, ol { margin: 0; }
 .qr.stale svg { opacity: 0.12; }
 .qr-stale { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
   color: hsl(222 47% 11%); font-weight: 500; }
-.qr-vc { margin-top: 8px; text-align: center; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.qr-vc { margin-top: 12px; text-align: center; }
+.vc-label { font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
 .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--_eid-fg-muted); }
 .steps { margin-top: 16px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
 .steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; }
@@ -507,6 +510,13 @@ h2, p, ol { margin: 0; }
   color: var(--_eid-accent-subtle-fg); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
 .or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--_eid-fg-subtle); font-size: 0.8125rem; }
 .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--_eid-border); }
+.disc-btn .chev { width: 16px; height: 16px; flex: none; transition: transform 200ms cubic-bezier(0,0,0.2,1); }
+.disc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
+.disc { margin: 0 -4px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(0,0,0.2,1); }
+.disc.open { grid-template-rows: 1fr; }
+.disc > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 200ms; }
+.disc.open > div { visibility: visible; transition-delay: 0s; }
+.disc form { padding: 16px 4px 4px; }
 .field { display: grid; gap: 8px; }
 .field label { font-weight: 500; }
 .field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--_eid-border-strong); border-radius: var(--_eid-radius);
@@ -517,7 +527,8 @@ h2, p, ol { margin: 0; }
 .err { font-size: 0.8125rem; color: var(--_eid-danger-fg); font-weight: 500; }
 .push { margin-top: 16px; }
 .center { text-align: center; }
-.vc { font: 600 2.25rem/2.5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; padding-left: 0.16em; }
+.vc { font: 700 2rem/2.5rem ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.16em;
+  padding-left: 0.16em; color: var(--_eid-fg); }
 .vc:focus, h2:focus { outline: none; }
 .text { margin-top: 12px; color: var(--_eid-fg-muted); }
 .pending { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--_eid-fg-muted); }
@@ -526,7 +537,8 @@ h2, p, ol { margin: 0; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .netwarn { margin-top: 16px; padding: 8px 12px; border: 1px solid var(--_eid-warning-border); border-radius: var(--_eid-radius); background: var(--_eid-warning-bg);
   color: var(--_eid-warning-fg); font-size: 0.8125rem; }
-.meta { margin-top: 16px; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.meta { margin-top: 4px; text-align: center; font-size: 0.8125rem; color: var(--_eid-fg-subtle); }
+.meta.low, .meta.low .mono { color: var(--_eid-warning-fg); }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; }
   .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }
 `;
@@ -549,6 +561,24 @@ function el(tag, attrs = {}, text) {
   if (text != null) e.textContent = text;
   return e;
 }
+function chevron() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  for (const [k, v] of Object.entries({
+    class: "chev",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true"
+  })) svg.setAttribute(k, v);
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", "m6 9 6 6 6-6");
+  svg.append(path);
+  return svg;
+}
 var Base = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
 var EidLoginButton = class extends Base {
@@ -681,7 +711,7 @@ var EidLoginButton = class extends Base {
       return;
     }
     if (e.key !== "Tab" || !this.backdrop) return;
-    const items = Array.from(this.backdrop.querySelectorAll(FOCUSABLE)).filter((n) => !n.closest("[hidden]"));
+    const items = Array.from(this.backdrop.querySelectorAll(FOCUSABLE)).filter((n) => !n.closest("[hidden], [inert]"));
     if (items.length === 0) return;
     const first = items[0];
     const last = items[items.length - 1];
@@ -763,21 +793,22 @@ var EidLoginButton = class extends Base {
     if (s.qr) this.drawQr(s.qr);
     const nodes = [this.qrBox];
     if (s.vc) {
-      const vc = el("p", { class: "qr-vc" }, t.code + " ");
-      vc.append(el("span", { class: "mono" }, s.vc));
+      const vc = el("div", { class: "qr-vc" });
+      vc.append(el("p", { class: "vc-label", id: "eid-vc-label" }, t.vcLabel), el("p", { class: "vc" }, s.vc));
       nodes.push(vc);
     }
+    nodes.push(this.meta());
     const steps = el("ol", { class: "steps" });
     for (const st of t.steps) steps.append(el("li", {}, st));
-    nodes.push(steps, el("div", { class: "or", role: "separator", "aria-label": t.or }, t.or), this.pushForm());
+    nodes.push(steps, el("div", { class: "or", role: "separator", "aria-label": t.or }, t.or), ...this.pushToggle());
     this.netwarn = el("p", { class: "netwarn", role: "status", hidden: "" }, t.offline);
-    nodes.push(this.netwarn, this.meta());
+    nodes.push(this.netwarn);
     this.view(...nodes);
   }
   leftEl = null;
   meta() {
     const p = el("p", { class: "meta" }, this.t.left + " ");
-    this.leftEl = el("span", { class: "mono", role: "timer", "aria-live": "off" }, "--:--");
+    this.leftEl = el("span", { class: "mono", role: "timer", "aria-live": "off" }, "-:--");
     p.append(this.leftEl);
     if (this.left < 0) p.hidden = true;
     return p;
@@ -790,8 +821,9 @@ var EidLoginButton = class extends Base {
       this.leftEl.parentElement.hidden = false;
       const m = Math.floor(this.left / 60);
       const s = this.left % 60;
-      this.leftEl.textContent = `${m < 10 ? "0" : ""}${m}:${s < 10 ? "0" : ""}${s}`;
-      if (this.left === 60) this.say(this.t.minute);
+      this.leftEl.textContent = `${m}:${s < 10 ? "0" : ""}${s}`;
+      this.leftEl.parentElement.classList.toggle("low", this.left <= 30);
+      if (this.left > 0 && s === 0 && this.left !== seconds) this.say(this.t.minutes(m));
     };
     render();
     if (seconds < 0) return;
@@ -801,6 +833,24 @@ var EidLoginButton = class extends Base {
       if (this.left <= 0) this.end("expired");
     }, 1e3);
   }
+  /** «Регистрийн дугаараар нэвтрэх» товч + ижил цонхонд доошоо дэлгэгдэх push хэсэг (QR, код харагдсаар; QR poll үргэлжилнэ). */
+  pushToggle() {
+    const toggle = el("button", { type: "button", class: "btn btn-outline disc-btn", "aria-expanded": "false", "aria-controls": "eid-push" });
+    toggle.append(el("span", {}, this.t.usePush), chevron());
+    const disc = el("div", { class: "disc", id: "eid-push" });
+    const inner = el("div", { inert: "" });
+    const form = this.pushForm();
+    inner.append(form);
+    disc.append(inner);
+    toggle.addEventListener("click", () => {
+      const open = toggle.getAttribute("aria-expanded") !== "true";
+      toggle.setAttribute("aria-expanded", String(open));
+      disc.classList.toggle("open", open);
+      inner.toggleAttribute("inert", !open);
+      if (open) form.querySelector("input")?.focus();
+    });
+    return [toggle, disc];
+  }
   pushForm() {
     const t = this.t;
     const form = el("form", { novalidate: "" });
@@ -869,14 +919,14 @@ var EidLoginButton = class extends Base {
   showWait(s) {
     const t = this.t;
     const c = el("div", { class: "center" });
-    c.append(el("h2", { class: "sr-only" }, t.waiting));
-    const vc = el("p", { class: "vc", tabindex: "-1", "aria-describedby": "eid-wait" }, s.vc ?? "");
+    c.append(el("h2", { class: "sr-only" }, t.waiting), el("p", { class: "vc-label", id: "eid-vc-label" }, t.vcLabel));
+    const vc = el("p", { class: "vc", tabindex: "-1", "aria-labelledby": "eid-vc-label", "aria-describedby": "eid-wait" }, s.vc ?? "");
     const pending = el("p", { class: "pending" });
     pending.append(el("span", { class: "spinner", "aria-hidden": "true" }), el("span", {}, t.waiting));
     const back = el("button", { type: "button", class: "btn btn-outline" }, t.back);
     back.addEventListener("click", () => this.open());
     this.netwarn = el("p", { class: "netwarn", role: "status", hidden: "" }, t.offline);
-    c.append(vc, el("p", { class: "text", id: "eid-wait" }, t.waitText), pending, back, this.netwarn, this.meta());
+    c.append(vc, this.meta(), el("p", { class: "text", id: "eid-wait" }, t.waitText), pending, back, this.netwarn);
     this.view(c);
     this.startTimer(s.expiresIn ?? -1);
     vc.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gerege-systems/eid-mongolia-sdk",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "e-ID Mongolia Relying Party SDK — иргэнээр утсаар нь нэвтрэлт ба хууль ёсны цахим гарын үсэг (RP-API v3, Smart-ID нийцтэй).",
   "license": "MIT",
   "type": "module",