@labyrinthe/otp-widget 0.0.0-stage → 1.2.0

package/dist/index.js

@@ -0,0 +1,875 @@
+// src/i18n.ts
+var fr = {
+  title: "V\xE9rification du num\xE9ro",
+  phoneLabel: "Num\xE9ro de t\xE9l\xE9phone",
+  countryCodeLabel: "Indicatif pays",
+  phonePlaceholder: "81 234 5678",
+  phoneHint: "Vous allez recevoir un code par SMS.",
+  send: "Recevoir le code",
+  sending: "Envoi\u2026",
+  codeLabel: "Code re\xE7u par SMS",
+  codeSentTo: "Code envoy\xE9 au {phone}.",
+  cellLabel: "Caract\xE8re {index} sur {total}",
+  verify: "V\xE9rifier",
+  verifying: "V\xE9rification\u2026",
+  changePhone: "Modifier le num\xE9ro",
+  resend: "Renvoyer le code",
+  resendIn: "Renvoyer le code dans {time}",
+  resendAvailable: "Vous pouvez demander un nouveau code.",
+  attemptsLeftOne: "Il vous reste 1 tentative.",
+  attemptsLeftOther: "Il vous reste {count} tentatives.",
+  success: "Num\xE9ro v\xE9rifi\xE9.",
+  testMode: "Mode test : le code est {code}",
+  retryIn: "R\xE9essayez dans {time}.",
+  errors: {
+    invalid_phone: "Ce num\xE9ro de t\xE9l\xE9phone n\u2019est pas valide.",
+    invalid_code: "Code incorrect.",
+    expired: "Ce code a expir\xE9. Demandez-en un nouveau.",
+    already_used: "Ce code a d\xE9j\xE0 \xE9t\xE9 utilis\xE9. Demandez-en un nouveau.",
+    max_attempts_reached: "Trop d\u2019essais incorrects. Demandez un nouveau code.",
+    resend_too_soon: "Patientez {time} avant de demander un nouveau code.",
+    rate_limited: "Trop de demandes. R\xE9essayez dans quelques minutes.",
+    no_pending_verification: "Votre demande a expir\xE9. Demandez un nouveau code.",
+    forbidden: "Demande refus\xE9e.",
+    invalid_request: "Demande invalide.",
+    service_unavailable: "Le service de v\xE9rification est momentan\xE9ment indisponible.",
+    account_suspended: "La v\xE9rification par SMS n\u2019est pas disponible sur ce site pour le moment.",
+    send_failed: "L\u2019envoi du code n\u2019a pas pu \xEAtre confirm\xE9. Si vous ne le recevez pas d\u2019ici une minute, demandez un nouveau code.",
+    server_error: "Une erreur est survenue. R\xE9essayez.",
+    network_error: "Connexion impossible. V\xE9rifiez votre r\xE9seau et r\xE9essayez.",
+    incomplete_code: "Saisissez les {count} caract\xE8res du code."
+  }
+};
+var en = {
+  title: "Phone verification",
+  phoneLabel: "Phone number",
+  countryCodeLabel: "Country code",
+  phonePlaceholder: "81 234 5678",
+  phoneHint: "We will send you a code by SMS.",
+  send: "Send code",
+  sending: "Sending\u2026",
+  codeLabel: "Code received by SMS",
+  codeSentTo: "Code sent to {phone}.",
+  cellLabel: "Character {index} of {total}",
+  verify: "Verify",
+  verifying: "Verifying\u2026",
+  changePhone: "Change number",
+  resend: "Resend code",
+  resendIn: "Resend code in {time}",
+  resendAvailable: "You can request a new code.",
+  attemptsLeftOne: "1 attempt left.",
+  attemptsLeftOther: "{count} attempts left.",
+  success: "Phone number verified.",
+  testMode: "Test mode: the code is {code}",
+  retryIn: "Try again in {time}.",
+  errors: {
+    invalid_phone: "This phone number is not valid.",
+    invalid_code: "Wrong code.",
+    expired: "This code has expired. Request a new one.",
+    already_used: "This code was already used. Request a new one.",
+    max_attempts_reached: "Too many wrong attempts. Request a new code.",
+    resend_too_soon: "Please wait {time} before requesting a new code.",
+    rate_limited: "Too many requests. Try again in a few minutes.",
+    no_pending_verification: "Your request has expired. Request a new code.",
+    forbidden: "Request refused.",
+    invalid_request: "Invalid request.",
+    service_unavailable: "The verification service is temporarily unavailable.",
+    account_suspended: "SMS verification is not available on this site at the moment.",
+    send_failed: "We could not confirm that the code was sent. If it does not arrive within a minute, ask for a new code.",
+    server_error: "Something went wrong. Please try again.",
+    network_error: "Cannot connect. Check your network and try again.",
+    incomplete_code: "Enter the {count} characters of the code."
+  }
+};
+var LOCALES = { fr, en };
+function resolveTexts(locale, override) {
+  const base = locale?.toLowerCase().startsWith("en") === true ? en : fr;
+  if (override === void 0 || override === null) {
+    return base;
+  }
+  const { errors, ...rest } = override;
+  return { ...base, ...stripUndefined(rest), errors: { ...base.errors, ...stripUndefined(errors ?? {}) } };
+}
+function format(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = values[key];
+    return value === void 0 ? match : String(value);
+  });
+}
+function formatDuration(seconds) {
+  const s = Math.max(0, Math.ceil(seconds));
+  const pad = (n) => String(n).padStart(2, "0");
+  return s >= 3600 ? `${String(Math.floor(s / 3600))}:${pad(Math.floor(s / 60) % 60)}:${pad(s % 60)}` : `${String(Math.floor(s / 60))}:${pad(s % 60)}`;
+}
+function stripUndefined(value) {
+  return Object.fromEntries(Object.entries(value).filter(([, v]) => typeof v === "string"));
+}
+
+// src/phone.ts
+var DEFAULT_COUNTRY_CODE = "243";
+function normalizePhone(raw, defaultCountryCode = DEFAULT_COUNTRY_CODE) {
+  if (!isCountryCode(defaultCountryCode)) {
+    return null;
+  }
+  const input = raw.trim();
+  if (input === "") {
+    return null;
+  }
+  const explicitInternational = input.startsWith("+") || input.startsWith("00");
+  let digits = input.replace(/\D/g, "");
+  if (explicitInternational) {
+    digits = input.startsWith("00") ? digits.slice(2) : digits;
+  } else if (digits.startsWith(defaultCountryCode) && digits.length > 10) ; else if (digits.length >= 11 && !digits.startsWith("0")) ; else {
+    digits = defaultCountryCode + digits.replace(/^0+/, "");
+  }
+  return digits.length >= 8 && digits.length <= 15 ? digits : null;
+}
+function isCountryCode(value) {
+  return /^[1-9]\d{0,2}$/.test(value);
+}
+function maskPhone(phone) {
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length <= 6) {
+    return "\u2022".repeat(digits.length);
+  }
+  return `+${digits.slice(0, 3)} ${digits.slice(3, 5)}${"\u2022".repeat(digits.length - 7)}${digits.slice(-2)}`;
+}
+
+// src/protocol.ts
+var FAILURE_REASONS = ["invalid_code", "expired", "already_used", "max_attempts_reached"];
+
+// src/styles.ts
+var STYLES = `
+:host{--lab-otp-primary:#008374;--lab-otp-primary-contrast:#fff;--lab-otp-accent:#F85A40;--lab-otp-error:#c2381f;
+--lab-otp-success:#008374;--lab-otp-bg:#fff;--lab-otp-fg:#19201e;--lab-otp-muted:#5b6763;--lab-otp-border:#d5dcd9;
+--lab-otp-field:#f8faf9;--lab-otp-radius:10px;--lab-otp-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+--lab-otp-cell-size:44px;--lab-otp-gap:8px;
+display:block;max-width:420px;color:var(--lab-otp-fg);font:14px/1.45 var(--lab-otp-font);color-scheme:light}
+:host([hidden]){display:none}
+:host([theme=dark]){--lab-otp-primary:#2bb3a3;--lab-otp-primary-contrast:#06201c;--lab-otp-accent:#ff7a63;--lab-otp-error:#ff8a75;
+--lab-otp-success:#2bb3a3;--lab-otp-bg:#19201e;--lab-otp-fg:#eef2f0;--lab-otp-muted:#a3b0ab;--lab-otp-border:#38433f;--lab-otp-field:#222b28;color-scheme:dark}
+@media (prefers-color-scheme:dark){:host(:not([theme=light])){--lab-otp-primary:#2bb3a3;--lab-otp-primary-contrast:#06201c;
+--lab-otp-accent:#ff7a63;--lab-otp-error:#ff8a75;--lab-otp-success:#2bb3a3;--lab-otp-bg:#19201e;--lab-otp-fg:#eef2f0;
+--lab-otp-muted:#a3b0ab;--lab-otp-border:#38433f;--lab-otp-field:#222b28;color-scheme:dark}}
+*{box-sizing:border-box}
+.root{background:var(--lab-otp-bg);border:1px solid var(--lab-otp-border);border-radius:var(--lab-otp-radius);padding:20px}
+h2{margin:0 0 12px;font-size:16px;font-weight:600}
+form{display:flex;flex-direction:column;gap:10px;margin:0}
+[hidden]{display:none!important}
+label,.label{font-weight:500}
+.hint,.muted{margin:0;color:var(--lab-otp-muted);font-size:13px}
+.phone{display:flex;gap:var(--lab-otp-gap)}
+input{font:inherit;color:inherit;background:var(--lab-otp-field);border:1px solid var(--lab-otp-border);
+border-radius:calc(var(--lab-otp-radius) - 2px);padding:10px 12px;min-width:0;width:100%}
+input:focus-visible,button:focus-visible{outline:2px solid var(--lab-otp-primary);outline-offset:2px}
+input[aria-invalid=true]{border-color:var(--lab-otp-error)}
+.cc{flex:0 0 5.5em;display:flex;align-items:center;gap:2px;background:var(--lab-otp-field);border:1px solid var(--lab-otp-border);
+border-radius:calc(var(--lab-otp-radius) - 2px);padding-left:10px}
+.cc input{border:0;padding-left:0;background:transparent}
+.cc input:focus-visible{outline-offset:-2px}
+.cells{display:flex;gap:var(--lab-otp-gap);flex-wrap:nowrap}
+.cells input{width:var(--lab-otp-cell-size);height:calc(var(--lab-otp-cell-size) + 8px);padding:0;text-align:center;
+font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;flex:0 1 var(--lab-otp-cell-size)}
+button{font:inherit;font-weight:600;border-radius:calc(var(--lab-otp-radius) - 2px);cursor:pointer;padding:10px 14px;
+border:1px solid transparent}
+button[disabled]{cursor:not-allowed;opacity:.6}
+.primary{background:var(--lab-otp-primary);color:var(--lab-otp-primary-contrast)}
+.primary:hover:not([disabled]){filter:brightness(1.08)}
+.link{background:none;border:0;padding:4px 0;color:var(--lab-otp-primary);text-decoration:underline;text-underline-offset:2px;
+align-self:flex-start;font-weight:500}
+.row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:center}
+.error{margin:0;color:var(--lab-otp-error);font-weight:500}
+.error:empty{display:none}
+.test{margin:0;padding:6px 10px;border-radius:6px;border:1px dashed var(--lab-otp-accent);font-size:13px}
+.success{display:flex;gap:10px;align-items:center;color:var(--lab-otp-success);font-weight:600}
+.success svg{flex:none}
+.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media (max-width:360px){.root{padding:14px}:host{--lab-otp-cell-size:36px;--lab-otp-gap:6px}}
+@media (prefers-reduced-motion:no-preference){button,input{transition:border-color .15s,filter .15s}}
+`;
+
+// src/element.ts
+var TAG_NAME = "labyrinthe-otp";
+var EVENT_SENT = "labyrinthe-otp:sent";
+var EVENT_VERIFIED = "labyrinthe-otp:verified";
+var EVENT_ERROR = "labyrinthe-otp:error";
+var SERVER_CODES = [
+  "invalid_phone",
+  "resend_too_soon",
+  "rate_limited",
+  "no_pending_verification",
+  "forbidden",
+  "invalid_request",
+  "service_unavailable",
+  "account_suspended",
+  "send_failed",
+  "server_error"
+];
+var NEEDS_NEW_CODE = ["expired", "already_used", "max_attempts_reached", "no_pending_verification"];
+var ZERO_WIDTH_SPACE = String.fromCharCode(8203);
+var CHECK_ICON = '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="2"/><path d="M7 12.5l3.2 3.2L17 9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+var TEMPLATE = `<style>${STYLES}</style>
+<div class="root" part="root">
+<h2 id="t" part="title"></h2>
+<form id="pf" part="phone-form" novalidate>
+<label for="pn" id="pl"></label>
+<div class="phone"><span class="cc" part="country-code"><span aria-hidden="true">+</span><input id="cc" inputmode="numeric" autocomplete="tel-country-code" maxlength="3" spellcheck="false"></span>
+<input id="pn" type="tel" inputmode="tel" autocomplete="tel-national" aria-describedby="ph er" part="phone-input"></div>
+<p class="hint" id="ph"></p>
+<button class="primary" type="submit" id="sb" part="button send-button"></button>
+</form>
+<form id="cf" part="code-form" novalidate hidden>
+<div class="row"><p class="muted" id="st"></p><button type="button" class="link" id="chg" part="link change-button"></button></div>
+<span class="label" id="cl"></span>
+<div class="cells" role="group" id="cells" aria-labelledby="cl" aria-describedby="at er" part="cells"></div>
+<p class="muted" id="at"></p>
+<p class="test" id="tc" hidden part="test-code"></p>
+<button class="primary" type="submit" id="vb" part="button verify-button"></button>
+<button type="button" class="link" id="rs" part="link resend-button"></button>
+</form>
+<div class="success" id="ok" hidden tabindex="-1" part="success">${CHECK_ICON}<span id="okt"></span></div>
+<p class="error" id="er" role="alert" part="error"></p>
+<p class="sr" id="lv" aria-live="polite"></p>
+</div>`;
+function createElementClass() {
+  class LabyrintheOtp extends HTMLElement {
+    static observedAttributes = ["locale", "country-code", "phone", "code-length", "code-type", "heading"];
+    #root;
+    #el;
+    #textsOverride = null;
+    #texts = resolveTexts("fr");
+    #requestHeaders = {};
+    #step = "phone";
+    #phoneNumber = "";
+    #phoneMasked = "";
+    #busy = false;
+    #codeLength = 6;
+    #codeType = "numeric";
+    #attemptsLeft = null;
+    #needsNewCode = false;
+    #resendAt = 0;
+    #timer;
+    #webOtp;
+    #lastAutoSubmitted = "";
+    #errorCode = null;
+    #errorValues = {};
+    #maintenance = {};
+    /** Jeton du dernier envoi sans réponse exploitable : réutilisé pour ce numéro (Idempotency-Key côté serveur). */
+    #pendingSend = null;
+    constructor() {
+      super();
+      this.#root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      this.#root.innerHTML = TEMPLATE;
+      const $ = (id) => this.#root.getElementById(id);
+      this.#el = {
+        title: $("t"),
+        phoneForm: $("pf"),
+        phoneLabel: $("pl"),
+        countryCode: $("cc"),
+        phone: $("pn"),
+        phoneHint: $("ph"),
+        sendButton: $("sb"),
+        codeForm: $("cf"),
+        sentTo: $("st"),
+        changeButton: $("chg"),
+        codeLabel: $("cl"),
+        cells: $("cells"),
+        attempts: $("at"),
+        testCode: $("tc"),
+        verifyButton: $("vb"),
+        resendButton: $("rs"),
+        success: $("ok"),
+        successText: $("okt"),
+        error: $("er"),
+        live: $("lv")
+      };
+      this.#el.phoneForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        void this.#submitPhone();
+      });
+      this.#el.codeForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        void this.#submitCode();
+      });
+      this.#el.changeButton.addEventListener("click", () => {
+        this.#goToPhoneStep();
+      });
+      this.#el.resendButton.addEventListener("click", () => {
+        if (!this.#busy && this.#secondsBeforeResend() === 0) {
+          void this.#send(this.#phoneNumber);
+        }
+      });
+      this.#el.phone.addEventListener("input", () => {
+        this.#el.phone.removeAttribute("aria-invalid");
+      });
+      this.#el.cells.addEventListener("input", (event) => {
+        this.#onCellInput(event);
+      });
+      this.#el.cells.addEventListener("keydown", (event) => {
+        this.#onCellKeydown(event);
+      });
+      this.#el.cells.addEventListener("paste", (event) => {
+        this.#onCellPaste(event);
+      });
+      this.#el.cells.addEventListener("focusin", (event) => {
+        const cell = event.target;
+        if (cell instanceof HTMLInputElement) {
+          cell.select();
+        }
+      });
+    }
+    connectedCallback() {
+      if (this.#el.countryCode.value === "") {
+        this.#el.countryCode.value = this.#defaultCountryCode();
+      }
+      const phone = this.getAttribute("phone");
+      if (phone !== null && this.#el.phone.value === "") {
+        this.#el.phone.value = phone;
+      }
+      this.#readCodeAttributes();
+      this.#applyTexts();
+      if (this.#step === "code") {
+        this.#startTimer();
+      }
+    }
+    disconnectedCallback() {
+      this.#stopTimer();
+      this.#stopWebOtp();
+    }
+    attributeChangedCallback(name, oldValue, value) {
+      if (oldValue === value) {
+        return;
+      }
+      if (name === "country-code" && value !== null && isCountryCode(value.replace(/^\+/, ""))) {
+        this.#el.countryCode.value = value.replace(/^\+/, "");
+      } else if (name === "phone" && value !== null && this.#step === "phone") {
+        this.#el.phone.value = value;
+      } else if ((name === "code-length" || name === "code-type") && this.#step === "phone") {
+        this.#readCodeAttributes();
+      }
+      this.#applyTexts();
+    }
+    get step() {
+      return this.#step;
+    }
+    get texts() {
+      return this.#textsOverride;
+    }
+    set texts(value) {
+      this.#textsOverride = value;
+      this.#applyTexts();
+    }
+    get requestHeaders() {
+      return { ...this.#requestHeaders };
+    }
+    set requestHeaders(value) {
+      this.#requestHeaders = { ...value ?? {} };
+    }
+    reset() {
+      this.#needsNewCode = false;
+      this.#attemptsLeft = null;
+      this.#clearCells();
+      this.#goToPhoneStep();
+      this.#el.phone.value = this.getAttribute("phone") ?? "";
+    }
+    focus(options) {
+      const target = this.#step === "phone" ? this.#el.phone : this.#step === "code" ? this.#firstEmptyCell() ?? this.#el.verifyButton : this.#el.success;
+      target.focus(options);
+    }
+    // ----- Étape 1 : numéro -------------------------------------------------
+    async #submitPhone() {
+      if (this.#busy) {
+        return;
+      }
+      const countryCode = this.#el.countryCode.value.replace(/\D/g, "") || this.#defaultCountryCode();
+      const phone = normalizePhone(this.#el.phone.value, countryCode);
+      if (phone === null) {
+        this.#el.phone.setAttribute("aria-invalid", "true");
+        this.#fail("invalid_phone", null);
+        this.#el.phone.focus();
+        return;
+      }
+      await this.#send(phone);
+    }
+    async #send(phone) {
+      this.#setBusy(true);
+      this.#clearError();
+      const locale = this.getAttribute("locale")?.toLowerCase().startsWith("en") === true ? "en" : "fr";
+      if (this.#pendingSend?.phone !== phone) {
+        this.#pendingSend = { phone, id: sendId() };
+      }
+      const result = await this.#post(this.getAttribute("send-url") ?? "/api/otp/send", {
+        phone: `+${phone}`,
+        locale,
+        send_id: this.#pendingSend.id
+      });
+      this.#setBusy(false);
+      if (result === null) {
+        return;
+      }
+      const body = result.body;
+      if (result.status >= 200 && result.status < 300 && body?.sent === true) {
+        this.#pendingSend = null;
+        this.#onSent(phone, body);
+        return;
+      }
+      const { code, retryAfterSeconds, maintenance } = readError(result);
+      if (code === "send_failed") {
+        this.#pendingSend = null;
+      }
+      if (code === "resend_too_soon" && retryAfterSeconds !== void 0) {
+        this.#resendAt = Date.now() + retryAfterSeconds * 1e3;
+        this.#startTimer();
+      }
+      if (code === "invalid_phone" && this.#step === "phone") {
+        this.#el.phone.setAttribute("aria-invalid", "true");
+      }
+      this.#fail(code, result.status, retryAfterSeconds, void 0, maintenance);
+    }
+    #onSent(phone, body) {
+      this.#phoneNumber = phone;
+      this.#phoneMasked = typeof body.phone_masked === "string" ? body.phone_masked : `+${phone}`;
+      const length = body.code_length;
+      if (typeof length === "number" && Number.isInteger(length) && length >= 1 && length <= 20) {
+        this.#codeLength = length;
+      }
+      if (body.code_type === "numeric" || body.code_type === "alphanumeric") {
+        this.#codeType = body.code_type;
+      }
+      const resendAfter = typeof body.resend_after_seconds === "number" ? Math.max(0, body.resend_after_seconds) : 60;
+      const maxAttempts = typeof body.max_attempts === "number" ? body.max_attempts : null;
+      this.#resendAt = Date.now() + resendAfter * 1e3;
+      this.#attemptsLeft = maxAttempts;
+      this.#needsNewCode = false;
+      this.#lastAutoSubmitted = "";
+      const testCode = typeof body.test_code === "string" && body.test_code !== "" ? body.test_code : void 0;
+      this.#el.testCode.hidden = testCode === void 0;
+      this.#el.testCode.textContent = testCode === void 0 ? "" : format(this.#texts.testMode, { code: testCode });
+      this.#step = "code";
+      this.#buildCells();
+      this.#showStep();
+      this.#applyTexts();
+      this.#startTimer();
+      this.#startWebOtp();
+      this.#announce(format(this.#texts.codeSentTo, { phone: this.#phoneMasked }));
+      this.#firstEmptyCell()?.focus();
+      const detail = {
+        phone,
+        phoneMasked: this.#phoneMasked,
+        expiresAt: new Date(typeof body.expires_at === "string" ? body.expires_at : Date.now()),
+        maxAttempts: maxAttempts ?? 0,
+        resendAfterSeconds: resendAfter,
+        ...testCode === void 0 ? {} : { testCode }
+      };
+      this.#emit(EVENT_SENT, detail);
+    }
+    // ----- Étape 2 : code ---------------------------------------------------
+    async #submitCode() {
+      if (this.#busy || this.#needsNewCode) {
+        return;
+      }
+      const code = this.#code();
+      if (code.length < this.#codeLength) {
+        this.#fail("incomplete_code", null);
+        this.#firstEmptyCell()?.focus();
+        return;
+      }
+      this.#setBusy(true);
+      this.#clearError();
+      const result = await this.#post(this.getAttribute("verify-url") ?? "/api/otp/verify", { code });
+      this.#setBusy(false);
+      if (result === null) {
+        this.#lastAutoSubmitted = "";
+        return;
+      }
+      const body = result.body;
+      if (result.status >= 200 && result.status < 300 && body?.verified === true) {
+        this.#onVerified(body.data);
+        return;
+      }
+      if (result.status >= 200 && result.status < 300 && body?.verified === false) {
+        const reason = FAILURE_REASONS.includes(body.reason) ? body.reason : "invalid_code";
+        this.#attemptsLeft = typeof body.attempts_left === "number" ? body.attempts_left : null;
+        this.#onRefused(reason, result.status);
+        return;
+      }
+      const { code: errorCode, retryAfterSeconds, maintenance } = readError(result);
+      if (NEEDS_NEW_CODE.includes(errorCode)) {
+        this.#onRefused(errorCode, result.status);
+        return;
+      }
+      this.#lastAutoSubmitted = "";
+      this.#fail(errorCode, result.status, retryAfterSeconds, void 0, maintenance);
+    }
+    #onRefused(reason, status) {
+      this.#clearCells();
+      this.#lastAutoSubmitted = "";
+      if (NEEDS_NEW_CODE.includes(reason)) {
+        this.#needsNewCode = true;
+        this.#attemptsLeft = null;
+      }
+      this.#applyTexts();
+      this.#fail(reason, status, void 0, this.#attemptsLeft);
+      if (this.#needsNewCode) {
+        (this.#el.resendButton.disabled ? this.#el.changeButton : this.#el.resendButton).focus();
+      } else {
+        this.#firstEmptyCell()?.focus();
+      }
+    }
+    #onVerified(data) {
+      this.#step = "success";
+      this.#stopTimer();
+      this.#stopWebOtp();
+      this.#clearError();
+      this.#showStep();
+      this.#applyTexts();
+      this.#el.success.focus();
+      this.#announce(this.#texts.success);
+      const detail = { phone: this.#phoneNumber, data: data ?? null };
+      this.#emit(EVENT_VERIFIED, detail);
+    }
+    #goToPhoneStep() {
+      this.#step = "phone";
+      this.#stopTimer();
+      this.#stopWebOtp();
+      this.#clearError();
+      this.#readCodeAttributes();
+      this.#showStep();
+      this.#applyTexts();
+      this.#el.phone.focus();
+    }
+    // ----- Cases du code ----------------------------------------------------
+    #buildCells() {
+      const cells = this.#el.cells;
+      cells.textContent = "";
+      for (let i = 0; i < this.#codeLength; i++) {
+        const input = document.createElement("input");
+        input.type = "text";
+        input.inputMode = this.#codeType === "numeric" ? "numeric" : "text";
+        input.autocomplete = i === 0 ? "one-time-code" : "off";
+        input.spellcheck = false;
+        input.setAttribute("autocapitalize", this.#codeType === "numeric" ? "off" : "characters");
+        input.setAttribute("enterkeyhint", "done");
+        input.setAttribute("part", "cell");
+        input.dataset["index"] = String(i);
+        cells.append(input);
+      }
+    }
+    #cells() {
+      return Array.from(this.#el.cells.querySelectorAll("input"));
+    }
+    #code() {
+      return this.#cells().map((cell) => cell.value).join("");
+    }
+    #firstEmptyCell() {
+      const cells = this.#cells();
+      return cells.find((cell) => cell.value === "") ?? cells[cells.length - 1];
+    }
+    #clearCells() {
+      for (const cell of this.#cells()) {
+        cell.value = "";
+      }
+    }
+    #sanitize(value) {
+      return this.#codeType === "numeric" ? value.replace(/\D/g, "") : value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+    }
+    /** Écrit `text` à partir de la case `start` (collage, saisie automatique, Web OTP). */
+    #fillFrom(start, text) {
+      const cells = this.#cells();
+      const chars = this.#sanitize(text);
+      const from = chars.length >= cells.length ? 0 : start;
+      for (let i = 0; i < chars.length && from + i < cells.length; i++) {
+        const cell = cells[from + i];
+        if (cell !== void 0) {
+          cell.value = chars.charAt(i);
+        }
+      }
+      const next = cells.find((cell, index) => index >= from && cell.value === "") ?? cells[Math.min(from + chars.length, cells.length - 1)];
+      next?.focus();
+      this.#afterCodeChange();
+    }
+    #onCellInput(event) {
+      const cell = event.target;
+      if (!(cell instanceof HTMLInputElement)) {
+        return;
+      }
+      const index = Number(cell.dataset["index"]);
+      const value = this.#sanitize(cell.value);
+      if (value.length <= 1) {
+        cell.value = value;
+        if (value !== "") {
+          this.#cells()[index + 1]?.focus();
+        }
+        this.#afterCodeChange();
+        return;
+      }
+      cell.value = "";
+      this.#fillFrom(index, value);
+    }
+    #onCellKeydown(event) {
+      const cell = event.target;
+      if (!(cell instanceof HTMLInputElement)) {
+        return;
+      }
+      const cells = this.#cells();
+      const index = Number(cell.dataset["index"]);
+      let target;
+      if (event.key === "Backspace" && cell.value === "" && index > 0) {
+        target = cells[index - 1];
+        if (target !== void 0) {
+          target.value = "";
+        }
+      } else if (event.key === "ArrowLeft") {
+        target = cells[index - 1];
+      } else if (event.key === "ArrowRight") {
+        target = cells[index + 1];
+      } else if (event.key === "Home") {
+        target = cells[0];
+      } else if (event.key === "End") {
+        target = cells[cells.length - 1];
+      }
+      if (target !== void 0) {
+        event.preventDefault();
+        target.focus();
+      }
+    }
+    #onCellPaste(event) {
+      const cell = event.target;
+      const text = event.clipboardData?.getData("text") ?? "";
+      if (!(cell instanceof HTMLInputElement) || text === "") {
+        return;
+      }
+      event.preventDefault();
+      this.#fillFrom(Number(cell.dataset["index"]), text);
+    }
+    #afterCodeChange() {
+      if (this.#errorCode === "incomplete_code" || this.#errorCode === "invalid_code") {
+        this.#clearError();
+      }
+      const code = this.#code();
+      if (code.length === this.#codeLength && !this.hasAttribute("no-auto-submit") && code !== this.#lastAutoSubmitted && !this.#busy && !this.#needsNewCode) {
+        this.#lastAutoSubmitted = code;
+        void this.#submitCode();
+      }
+    }
+    // ----- Renvoi et Web OTP ------------------------------------------------
+    #secondsBeforeResend() {
+      return Math.max(0, Math.ceil((this.#resendAt - Date.now()) / 1e3));
+    }
+    #startTimer() {
+      this.#stopTimer();
+      this.#renderResend();
+      if (this.#secondsBeforeResend() > 0) {
+        this.#timer = setInterval(() => {
+          this.#renderResend();
+          if (this.#secondsBeforeResend() === 0) {
+            this.#stopTimer();
+            if (this.#step === "code") {
+              this.#announce(this.#texts.resendAvailable);
+            }
+          }
+        }, 1e3);
+      }
+    }
+    #stopTimer() {
+      if (this.#timer !== void 0) {
+        clearInterval(this.#timer);
+        this.#timer = void 0;
+      }
+    }
+    #renderResend() {
+      const seconds = this.#secondsBeforeResend();
+      const button = this.#el.resendButton;
+      button.disabled = seconds > 0 || this.#busy;
+      button.textContent = seconds > 0 ? format(this.#texts.resendIn, { time: formatDuration(seconds) }) : this.#texts.resend;
+      if (this.#step === "phone") {
+        this.#el.sendButton.disabled = this.#busy || this.#errorCode === "resend_too_soon" && seconds > 0;
+      }
+    }
+    #startWebOtp() {
+      this.#stopWebOtp();
+      const credentials = navigator.credentials;
+      if (this.hasAttribute("no-web-otp") || !("OTPCredential" in window) || credentials === void 0) {
+        return;
+      }
+      const controller = new AbortController();
+      this.#webOtp = controller;
+      credentials.get({ otp: { transport: ["sms"] }, signal: controller.signal }).then((credential) => {
+        const code = credential?.code;
+        if (typeof code === "string" && !controller.signal.aborted && this.#step === "code") {
+          this.#fillFrom(0, code);
+        }
+      }).catch(() => {
+      });
+    }
+    #stopWebOtp() {
+      this.#webOtp?.abort();
+      this.#webOtp = void 0;
+    }
+    // ----- Rendu ------------------------------------------------------------
+    #showStep() {
+      this.#el.phoneForm.hidden = this.#step !== "phone";
+      this.#el.codeForm.hidden = this.#step !== "code";
+      this.#el.success.hidden = this.#step !== "success";
+    }
+    #applyTexts() {
+      const t = this.#texts = resolveTexts(this.getAttribute("locale"), this.#textsOverride);
+      const el = this.#el;
+      el.title.textContent = this.getAttribute("heading") ?? t.title;
+      el.title.hidden = this.getAttribute("heading") === "";
+      el.phoneLabel.textContent = t.phoneLabel;
+      el.countryCode.setAttribute("aria-label", t.countryCodeLabel);
+      el.phone.placeholder = t.phonePlaceholder;
+      el.phoneHint.textContent = t.phoneHint;
+      el.sendButton.textContent = this.#busy && this.#step === "phone" ? t.sending : t.send;
+      el.sentTo.textContent = format(t.codeSentTo, { phone: this.#phoneMasked });
+      el.changeButton.textContent = t.changePhone;
+      el.codeLabel.textContent = t.codeLabel;
+      el.verifyButton.textContent = this.#busy && this.#step === "code" ? t.verifying : t.verify;
+      el.successText.textContent = t.success;
+      const cells = this.#cells();
+      cells.forEach((cell, index) => {
+        cell.setAttribute("aria-label", format(t.cellLabel, { index: index + 1, total: cells.length }));
+        cell.disabled = this.#needsNewCode;
+      });
+      el.verifyButton.disabled = this.#busy || this.#needsNewCode;
+      const left = this.#attemptsLeft;
+      el.attempts.textContent = left === null || this.#errorCode !== "invalid_code" ? "" : format(left === 1 ? t.attemptsLeftOne : t.attemptsLeftOther, { count: left });
+      if (this.#errorCode !== null) {
+        const message = this.#errorMessage(this.#errorCode);
+        if (el.error.textContent.replace(ZERO_WIDTH_SPACE, "") !== message) {
+          el.error.textContent = message;
+        }
+      }
+      this.#renderResend();
+    }
+    #setBusy(busy) {
+      this.#busy = busy;
+      const form = this.#step === "phone" ? this.#el.phoneForm : this.#el.codeForm;
+      form.setAttribute("aria-busy", String(busy));
+      this.#el.sendButton.disabled = busy;
+      this.#applyTexts();
+    }
+    #errorMessage(code) {
+      const t = this.#texts;
+      const values = { count: this.#codeLength, ...this.#errorValues };
+      if (code !== "service_unavailable") {
+        return format(t.errors[code], values);
+      }
+      const retry = this.#errorValues["time"] === void 0 ? "" : ` ${format(t.retryIn, values)}`;
+      return (this.#maintenance.adminMessage ?? format(t.errors[code], values)) + retry;
+    }
+    #fail(code, status, retryAfterSeconds, attemptsLeft, maintenance = {}) {
+      this.#errorCode = code;
+      this.#errorValues = retryAfterSeconds === void 0 ? {} : { time: formatDuration(retryAfterSeconds) };
+      this.#maintenance = maintenance;
+      const message = this.#errorMessage(code);
+      this.#el.error.textContent = this.#el.error.textContent === message ? message + ZERO_WIDTH_SPACE : message;
+      this.#applyTexts();
+      const detail = {
+        code,
+        message,
+        status,
+        ...retryAfterSeconds === void 0 ? {} : { retryAfterSeconds },
+        ...attemptsLeft === void 0 ? {} : { attemptsLeft },
+        ...maintenance
+      };
+      this.#emit(EVENT_ERROR, detail);
+    }
+    #clearError() {
+      this.#errorCode = null;
+      this.#errorValues = {};
+      this.#maintenance = {};
+      this.#el.error.textContent = "";
+      this.#el.attempts.textContent = "";
+    }
+    #announce(message) {
+      this.#el.live.textContent = message;
+    }
+    #emit(type, detail) {
+      this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+    }
+    #defaultCountryCode() {
+      const value = (this.getAttribute("country-code") ?? "").replace(/^\+/, "");
+      return isCountryCode(value) ? value : DEFAULT_COUNTRY_CODE;
+    }
+    #readCodeAttributes() {
+      const length = Number(this.getAttribute("code-length") ?? "6");
+      this.#codeLength = Number.isInteger(length) && length >= 1 && length <= 20 ? length : 6;
+      this.#codeType = this.getAttribute("code-type") === "alphanumeric" ? "alphanumeric" : "numeric";
+    }
+    /** POST JSON vers le serveur de l'intégrateur ; null après une erreur réseau (déjà signalée). */
+    async #post(url, body) {
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: { ...this.#requestHeaders, "Content-Type": "application/json", Accept: "application/json" },
+          body: JSON.stringify(body),
+          credentials: this.getAttribute("credentials") === "include" ? "include" : "same-origin"
+        });
+        let json = null;
+        try {
+          json = await response.json();
+        } catch {
+          json = null;
+        }
+        return { status: response.status, body: json };
+      } catch {
+        this.#fail("network_error", null);
+        return null;
+      }
+    }
+  }
+  return LabyrintheOtp;
+}
+function sendId() {
+  return Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
+}
+function readError(result) {
+  const error = result.body?.error;
+  const retry = error?.retry_after_seconds;
+  const retryAfterSeconds = typeof retry === "number" && retry >= 0 ? Math.ceil(retry) : void 0;
+  let code;
+  if (typeof error?.code === "string" && SERVER_CODES.includes(error.code)) {
+    code = error.code;
+  } else if (result.status === 429) {
+    code = "rate_limited";
+  } else if (result.status === 403) {
+    code = "forbidden";
+  } else if (result.status === 503) {
+    code = "service_unavailable";
+  } else {
+    code = "server_error";
+  }
+  const maintenance = {};
+  if (code === "service_unavailable") {
+    if (typeof error?.admin_message === "string" && error.admin_message.trim() !== "") {
+      maintenance.adminMessage = error.admin_message.trim();
+    }
+    const until = typeof error?.until === "string" ? new Date(error.until) : null;
+    if (until !== null && !Number.isNaN(until.getTime())) {
+      maintenance.until = until;
+    }
+  }
+  return retryAfterSeconds === void 0 ? { code, maintenance } : { code, retryAfterSeconds, maintenance };
+}
+
+// src/version.ts
+var VERSION = "1.2.0";
+
+// src/index.ts
+function defineLabyrintheOtp(tagName = TAG_NAME) {
+  if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
+    return void 0;
+  }
+  const existing = customElements.get(tagName);
+  if (existing !== void 0) {
+    return existing;
+  }
+  const ElementClass = createElementClass();
+  customElements.define(tagName, ElementClass);
+  return ElementClass;
+}
+defineLabyrintheOtp();
+
+export { DEFAULT_COUNTRY_CODE, EVENT_ERROR, EVENT_SENT, EVENT_VERIFIED, LOCALES, TAG_NAME, VERSION, defineLabyrintheOtp, maskPhone, normalizePhone, resolveTexts };