@gerege-systems/eid-mongolia-sdk 0.15.1 → 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` |
 
@@ -74,6 +74,8 @@ export const eidLogin = createEidLogin({
   // store: redisStore,            // олон instance / serverless бол (анхдагч — процессын санах ой)
   // rateLimit: { start: (key) => redisLimiter.allow(key) }, // анхдагчтай нэгтгэгдэнэ (push 3/мин хэвээр) — доор «Хязгаарлалт»
   trustProxy: 1, // handle(Request)-д клиент IP: nginx/LB нэг hop бол 1 (доор «Клиент IP»)
+  onEvent: ({ kind, sessionId, meta }) => audit.record(`auth.eid_${kind}`, sessionId, meta), // таны аудит
+  // auditKey: process.env.EID_AUDIT_KEY, // pushKey-ийг instance/restart хооронд тогтвортой болгох
 });
 ```
 
@@ -197,7 +199,31 @@ RP талд нэмэлт шалгалт хэрэггүй. Эх сурвалж: e
 - `OK` нь зөвхөн `validateAuth` амжилттай үед: QR → `flowType=QR`, push → `Notification`, утас → `Web2App` + callback-ийн
   `userChallengeVerifier`. Web2App session-ийг poll дуусгахгүй (`WAIT_CALLBACK`). `onSuccess` нэг session-д нэг л удаа
   (store-ийн `delete` атомар байх ёстой — Redis `DEL`).
-- `onSuccess`-ийн `data` хөтөчид очно — нууц бүү оруул. Иргэний бүртгэлтэй эсэхийг push алдаагаар задлахгүй (`eid_unavailable`).
+- `onSuccess`-ийн `data` хөтөчид очно — нууц бүү оруул.
+- **Регистрийн oracle хаалт (decoy + доод хугацаа, анхдагчаар асаалттай).** eID push-ийг дугаарын шалтгаанаар татгалзвал
+  (eID-ийн өөрийн JSON 4xx — танихгүй / ашиглах боломжгүй дугаар) бодит push-тэй **ижил** хариу: `{mode, vc (санамсаргүй
+  5 оронтой — eID-тэй ижил хэлбэр), expiresIn}`, ижил cookie; `status` нь eID-ээс асуулгүй `pollMs`-ийн хугацаанд барьж
+  `PENDING`, TTL-ийн дараа `EXPIRED` — утсаа аваагүй иргэнтэй ялгаагүй (бодит push-ийн CA `TIMEOUT` ч `EXPIRED` болно). Push start-ийн хариу бүр (бодит, decoy, 502)
+  `pushFloorMs`-оос (анхдагч 1000) хурдан гарахгүй — decoy-г цагаар ялгахгүйн тулд (`handle(Request)`-д хүсэлт тасарвал
+  хүлээхгүй; `handleRequest`-д `signal` өг). Хязгаар (`push:<idCode>`, `start:<ip>`) decoy-д ч үйлчилнэ; 429 ба 400
+  (`invalid_id` — хэлбэрийн алдаа, бүртгэлээс хамааралгүй) нь floor-гүй. eID-ийн 5xx, холболтын алдаа, JSON бус 4xx (eID-ийн
+  өмнөх proxy, ж: mTLS татгалзал), 401/403 (RP-ийн нууц/эрх) ба 429 нь **decoy биш** — `502 eid_unavailable` / `429` (eID
+  порталын зан: тасалдлыг decoy-оор нуувал иргэн дуусахгүй spinner харна; эдгээр нь дугаараас хамаардаггүй тул oracle
+  биш). Унтраах: `decoy: false`, `pushFloorMs: 0` — **⚠️** тэгвэл `/start` нь «энэ регистр eID-д бүртгэлтэй эсэх»-ийг
+  нэвтрээгүй хэнд ч хэлнэ; зөвхөн дотоод/тестийн орчинд.
+- **Гэрчилгээний цуцлалт (OCSP, анхдагчаар асаалттай).** `validateAuth`-ийн дараа, `onSuccess`-ийн өмнө иргэний гэрчилгээг
+  түүний AIA-д бичигдсэн OCSP responder-оос асууна (`revocation`, анхдагч `ocspRevocationChecker()`; хариу олгогч эсвэл
+  түүний OCSPSigning responder-ийн гарын үсэгтэй, энэ serial-ийн, thisUpdate ≤ 48 цаг, good-ийг 5 мин кэшлэнэ). `revoked`,
+  мөн `unknown` (олгогч энэ гэрчилгээг олгоогүй) → `FAILED` / `VALIDATION` (500 биш), `onSuccess` дуудагдахгүй. Хариугүй
+  (timeout 2 с, 5xx, AIA алга, шалгалт унасан хариу): `revocationMode` анхдагч `"soft-fail"` — зөвшөөрч `onError`-оор
+  анхааруулна, `identity.revocation = "unchecked"` (eID порталын `EID_OCSP=soft`: CA-ийн responder унавал бүх иргэн
+  түгжигдэхгүй; утас session-ийг батлахад CA секундын өмнө хүрэх боломжтой байсан); `"hard-fail"` → `FAILED` /
+  `VALIDATION`. `revocation: false` — **⚠️** цуцалсан (хулгайлагдсан утасны) гэрчилгээгээр нэвтэрнэ.
+- **Аудит — `onEvent({ kind, sessionId, meta })`** (await хийгдэнэ, алдаа нь `onError` руу): `push_sent` (meta `decoy` —
+  зөвхөн таны аудитад, хөтөч рүү хэзээ ч), `push_limited`, `refused` (иргэн татгалзсан), `expired` (TIMEOUT / eID-д
+  олдохгүй), `unverified` (`reason`: `validation` | `revoked` | `revocation_unavailable`), `flow_refused` (Web2App callback
+  өөр хөтчид), `success` (`flow`, `revocation`), `failed` (бусад `endResult`). meta-д `mode`; токен/нууц, регистрийн дугаар
+  орохгүй — push-д `pushKey` = HMAC-SHA256(`auditKey`, дугаар)-ын 32 hex (`auditKey` алга бол процесс бүрт санамсаргүй).
 - Олон instance / serverless (Vercel г.м.) дээр анхдагч санах ойн store ажиллахгүй — `EidLoginStore` (`get`/`set`/`delete`)-ийг Redis-ээр.
 - `onSuccess` дуудагдахаас ӨМНӨ tx store-оос атомар устгагдана (нэг удаагийн баталгаа) — `onSuccess` дотор store-оос бүү
   унш; хэрэгтэй бүхэн `identity`-д (`sessionId`, `documentNumber`, `certificateDerB64`, …).
@@ -482,6 +508,11 @@ const reg = await eid.registerSignature(registrationFromCompleted(req.body, {
 reply({ verifyUrl: reg.verifyUrl });
 ```
 
+- `reg.created` — `true` 201 (шинэ), `false` 200 (ижил биеийн давталт). Өмнөх гарын үсэг CA-ийн угсарсан (горим A) бол
+  `complete().priorRevisionSha256`-ийг (`sha256(doc[0 : ByteRange[2]+ByteRange[3]])`) `registrationFromCompleted`
+  `priorSignatures` болгож дамжуулна; `registerSignature` 409 `PRIOR_MISMATCH`-ийн дараа өөрөө revision-оор тааруулна
+  (`priorRevisionSha256`-г гараар өгвөл оролдохгүй). Хөтчөөс JSON-оор дамжуулахдаа `priorRevisionSha256`-ийг ч явуул.
+
 ### Зөвхөн Node (backend бүгдийг хийнэ)
 
 ```ts
@@ -626,7 +657,8 @@ OK ирж болзошгүй. Иймд `ResponseValidator`:
      хүссэн session-д `ecdsa-with-SHA256` хариу ирвэл хуурамч гэж татгалзана.
 
 5. Цуцлалт — `trust.revocation` (OCSP/CRL hook) → `checkRevocation`, эсвэл `checkRevocationStatus` (`"good"` /
-   `"unchecked"` (soft-fail) / `"skipped"` (hook алга)).
+   `"unchecked"` (soft-fail) / `"skipped"` (hook алга)). Бэлэн hook: `ocspRevocationChecker()` — гэрчилгээний AIA OCSP
+   (revoked/unknown → `"revoked"`; хариугүй → `"unknown"`, горим шийднэ). Өөр checker/горимоор нэг удаа: `checkRevocationWith`.
 6. Нэмэлт (сонголттой): `allowedIssuerSkis: [CITIZEN_ISSUING_CA_SKI]` — зөвхөн иргэний Issuing CA (04)-ийн гэрчилгээ;
    `checkKeyUsage: true` — auth → clientAuth, sign → nonRepudiation (CA-ийн профайл); `schemeName` — CA-ийн
    `acsp_scheme_name` (анхдагч `smart-id`).

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();