@eudi-verify/embed 0.1.0

package/dist/eudi-verify.cjs

@@ -0,0 +1,962 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CSS_VARIABLES: () => CSS_VARIABLES,
+  EudiVerifyElement: () => EudiVerifyElement,
+  STATE_MESSAGES: () => STATE_MESSAGES,
+  VERSION: () => VERSION,
+  announce: () => announce,
+  clearAnnouncement: () => clearAnnouncement,
+  createFocusTrap: () => createFocusTrap,
+  createStyles: () => createStyles,
+  getFocusableElements: () => getFocusableElements,
+  getStateId: () => getStateId,
+  renderWidget: () => renderWidget,
+  updateWidgetState: () => updateWidgetState
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/element.ts
+var import_client = require("@eudi-verify/client");
+
+// src/styles.ts
+var CSS_VARIABLES = {
+  "--eudi-primary": "#003399",
+  "--eudi-text": "#1a1a1a",
+  "--eudi-background": "#ffffff",
+  "--eudi-border-radius": "8px",
+  "--eudi-font-family": "system-ui, sans-serif",
+  "--eudi-error": "#d32f2f"
+};
+function createStyles() {
+  return (
+    /* css */
+    `
+    :host {
+      display: block;
+      font-family: var(--eudi-font-family, ${CSS_VARIABLES["--eudi-font-family"]});
+      color: var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]});
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    .eudi-widget {
+      background: var(--eudi-background, ${CSS_VARIABLES["--eudi-background"]});
+      border: 1px solid color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 20%, transparent);
+      border-radius: var(--eudi-border-radius, ${CSS_VARIABLES["--eudi-border-radius"]});
+      padding: 24px;
+      text-align: center;
+      min-width: 280px;
+      max-width: 400px;
+      margin-inline: auto;
+    }
+
+    /* State containers - only one visible at a time */
+    .eudi-state {
+      display: none;
+    }
+
+    .eudi-state[data-active] {
+      display: block;
+    }
+
+    /* Start button */
+    .eudi-start-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px 24px;
+      font-size: 16px;
+      font-weight: 500;
+      font-family: inherit;
+      color: #ffffff;
+      background: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      border: none;
+      border-radius: var(--eudi-border-radius, ${CSS_VARIABLES["--eudi-border-radius"]});
+      cursor: pointer;
+      transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    .eudi-start-btn:hover {
+      background: color-mix(in srgb, var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]}) 85%, black);
+    }
+
+    .eudi-start-btn:focus-visible {
+      outline: 2px solid var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      outline-offset: 2px;
+    }
+
+    .eudi-start-btn:active {
+      transform: scale(0.98);
+    }
+
+    /* EU stars icon */
+    .eudi-icon {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+    }
+
+    /* Loading state */
+    .eudi-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0;
+    }
+
+    .eudi-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid color-mix(in srgb, var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]}) 20%, transparent);
+      border-top-color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      border-radius: 50%;
+      animation: eudi-spin 0.8s linear infinite;
+    }
+
+    @keyframes eudi-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .eudi-spinner {
+        animation: none;
+        border-top-color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+        border-right-color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      }
+
+      .eudi-start-btn {
+        transition: none;
+      }
+    }
+
+    /* QR code state */
+    .eudi-qr {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .eudi-qr-img {
+      width: 200px;
+      height: 200px;
+      border: 1px solid color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 15%, transparent);
+      border-radius: 4px;
+    }
+
+    .eudi-qr-text {
+      margin: 0;
+      font-size: 14px;
+      color: color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 80%, transparent);
+    }
+
+    .eudi-cancel-btn {
+      margin-top: 8px;
+      padding: 8px 16px;
+      font-size: 14px;
+      font-family: inherit;
+      color: var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]});
+      background: transparent;
+      border: 1px solid color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 30%, transparent);
+      border-radius: var(--eudi-border-radius, ${CSS_VARIABLES["--eudi-border-radius"]});
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .eudi-cancel-btn:hover {
+      background: color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 5%, transparent);
+    }
+
+    .eudi-cancel-btn:focus-visible {
+      outline: 2px solid var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      outline-offset: 2px;
+    }
+
+    /* Waiting for wallet */
+    .eudi-waiting {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0;
+    }
+
+    .eudi-waiting-icon {
+      width: 48px;
+      height: 48px;
+      color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+    }
+
+    .eudi-waiting-text {
+      margin: 0;
+      font-size: 16px;
+    }
+
+    /* Success state */
+    .eudi-success {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0;
+    }
+
+    .eudi-success-icon {
+      width: 48px;
+      height: 48px;
+      color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+    }
+
+    .eudi-success-text {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+    }
+
+    /* Error/rejected/expired states */
+    .eudi-error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0;
+    }
+
+    .eudi-error-icon {
+      width: 48px;
+      height: 48px;
+      color: var(--eudi-error, ${CSS_VARIABLES["--eudi-error"]});
+    }
+
+    .eudi-error-text {
+      margin: 0;
+      font-size: 16px;
+      color: var(--eudi-error, ${CSS_VARIABLES["--eudi-error"]});
+    }
+
+    .eudi-error-detail {
+      margin: 0;
+      font-size: 14px;
+      color: color-mix(in srgb, var(--eudi-text, ${CSS_VARIABLES["--eudi-text"]}) 70%, transparent);
+    }
+
+    .eudi-retry-btn {
+      margin-top: 8px;
+      padding: 10px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      color: #ffffff;
+      background: var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      border: none;
+      border-radius: var(--eudi-border-radius, ${CSS_VARIABLES["--eudi-border-radius"]});
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .eudi-retry-btn:hover {
+      background: color-mix(in srgb, var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]}) 85%, black);
+    }
+
+    .eudi-retry-btn:focus-visible {
+      outline: 2px solid var(--eudi-primary, ${CSS_VARIABLES["--eudi-primary"]});
+      outline-offset: 2px;
+    }
+
+    /* Screen reader only */
+    .eudi-sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Demo mode banner */
+    .eudi-demo-banner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 8px 12px;
+      margin-bottom: 16px;
+      font-size: 13px;
+      color: #7c5c00;
+      background: #fef3cd;
+      border: 1px solid #ffe69c;
+      border-radius: 4px;
+    }
+
+    .eudi-demo-banner[hidden] {
+      display: none;
+    }
+
+    .eudi-warning-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      color: #7c5c00;
+    }
+  `
+  );
+}
+
+// src/render.ts
+var EU_STARS_ICON = (
+  /* html */
+  `
+<svg class="eudi-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
+  <g fill="currentColor">
+    <polygon points="12,4 12.5,5.5 14,5.5 12.75,6.5 13.25,8 12,7 10.75,8 11.25,6.5 10,5.5 11.5,5.5"/>
+    <polygon points="17,6.5 17.35,7.6 18.5,7.6 17.6,8.3 17.9,9.4 17,8.7 16.1,9.4 16.4,8.3 15.5,7.6 16.65,7.6"/>
+    <polygon points="19,11 19.35,12.1 20.5,12.1 19.6,12.8 19.9,13.9 19,13.2 18.1,13.9 18.4,12.8 17.5,12.1 18.65,12.1"/>
+    <polygon points="17,15.5 17.35,16.6 18.5,16.6 17.6,17.3 17.9,18.4 17,17.7 16.1,18.4 16.4,17.3 15.5,16.6 16.65,16.6"/>
+    <polygon points="12,18 12.35,19.1 13.5,19.1 12.6,19.8 12.9,20.9 12,20.2 11.1,20.9 11.4,19.8 10.5,19.1 11.65,19.1"/>
+    <polygon points="7,15.5 7.35,16.6 8.5,16.6 7.6,17.3 7.9,18.4 7,17.7 6.1,18.4 6.4,17.3 5.5,16.6 6.65,16.6"/>
+    <polygon points="5,11 5.35,12.1 6.5,12.1 5.6,12.8 5.9,13.9 5,13.2 4.1,13.9 4.4,12.8 3.5,12.1 4.65,12.1"/>
+    <polygon points="7,6.5 7.35,7.6 8.5,7.6 7.6,8.3 7.9,9.4 7,8.7 6.1,9.4 6.4,8.3 5.5,7.6 6.65,7.6"/>
+  </g>
+</svg>
+`
+);
+var SUCCESS_ICON = (
+  /* html */
+  `
+<svg class="eudi-success-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+  <path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+);
+var ERROR_ICON = (
+  /* html */
+  `
+<svg class="eudi-error-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+  <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`
+);
+var EXPIRED_ICON = (
+  /* html */
+  `
+<svg class="eudi-error-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+  <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`
+);
+var WALLET_ICON = (
+  /* html */
+  `
+<svg class="eudi-waiting-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <rect x="2" y="6" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
+  <path d="M2 10h20" stroke="currentColor" stroke-width="2"/>
+  <circle cx="17" cy="14" r="1.5" fill="currentColor"/>
+</svg>
+`
+);
+var WARNING_ICON = (
+  /* html */
+  `
+<svg class="eudi-warning-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path d="M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+);
+function getStateId(status) {
+  return `eudi-state-${status}`;
+}
+function renderIdle() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("idle")}" class="eudi-state" data-active>
+      <button class="eudi-start-btn" type="button" data-action="start">
+        ${EU_STARS_ICON}
+        <span>Verify with EU Wallet</span>
+      </button>
+    </div>
+  `
+  );
+}
+function renderLoading() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("loading")}" class="eudi-state">
+      <div class="eudi-loading">
+        <div class="eudi-spinner" aria-hidden="true"></div>
+        <p>Loading...</p>
+      </div>
+    </div>
+  `
+  );
+}
+function renderShowQR() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("showQR")}" class="eudi-state">
+      <div class="eudi-qr">
+        <img class="eudi-qr-img" src="" alt="Scan with EUDI Wallet" />
+        <p class="eudi-qr-text">Scan with your EU Digital Identity Wallet</p>
+        <button class="eudi-cancel-btn" type="button" data-action="cancel">Cancel</button>
+      </div>
+    </div>
+  `
+  );
+}
+function renderWaitingForWallet() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("waitingForWallet")}" class="eudi-state">
+      <div class="eudi-waiting">
+        ${WALLET_ICON}
+        <p class="eudi-waiting-text">Waiting for wallet approval...</p>
+        <button class="eudi-cancel-btn" type="button" data-action="cancel">Cancel</button>
+      </div>
+    </div>
+  `
+  );
+}
+function renderVerified() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("verified")}" class="eudi-state">
+      <div class="eudi-success">
+        ${SUCCESS_ICON}
+        <p class="eudi-success-text">Verified</p>
+      </div>
+    </div>
+  `
+  );
+}
+function renderRejected() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("rejected")}" class="eudi-state">
+      <div class="eudi-error">
+        ${ERROR_ICON}
+        <p class="eudi-error-text">Verification declined</p>
+        <p class="eudi-error-detail"></p>
+        <button class="eudi-retry-btn" type="button" data-action="reset">Try again</button>
+      </div>
+    </div>
+  `
+  );
+}
+function renderExpired() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("expired")}" class="eudi-state">
+      <div class="eudi-error">
+        ${EXPIRED_ICON}
+        <p class="eudi-error-text">Session expired</p>
+        <button class="eudi-retry-btn" type="button" data-action="reset">Try again</button>
+      </div>
+    </div>
+  `
+  );
+}
+function renderError() {
+  return (
+    /* html */
+    `
+    <div id="${getStateId("error")}" class="eudi-state">
+      <div class="eudi-error">
+        ${ERROR_ICON}
+        <p class="eudi-error-text">Verification failed</p>
+        <p class="eudi-error-detail"></p>
+        <button class="eudi-retry-btn" type="button" data-action="reset">Try again</button>
+      </div>
+    </div>
+  `
+  );
+}
+function renderDemoBanner() {
+  return (
+    /* html */
+    `
+    <div class="eudi-demo-banner" role="status" aria-live="polite" hidden>
+      ${WARNING_ICON}
+      <span>Demo mode \u2014 credentials are simulated</span>
+    </div>
+  `
+  );
+}
+function renderWidget() {
+  return (
+    /* html */
+    `
+    <div class="eudi-widget" role="region" aria-label="Identity verification">
+      <div class="eudi-sr-only" aria-live="polite" aria-atomic="true"></div>
+      ${renderDemoBanner()}
+      ${renderIdle()}
+      ${renderLoading()}
+      ${renderShowQR()}
+      ${renderWaitingForWallet()}
+      ${renderVerified()}
+      ${renderRejected()}
+      ${renderExpired()}
+      ${renderError()}
+    </div>
+  `
+  );
+}
+function updateWidgetState(container, state) {
+  const stateContainers = container.querySelectorAll(".eudi-state");
+  for (const stateEl of stateContainers) {
+    if (stateEl.id === getStateId(state.status)) {
+      stateEl.setAttribute("data-active", "");
+    } else {
+      stateEl.removeAttribute("data-active");
+    }
+  }
+  if (state.status === "showQR") {
+    const img = container.querySelector(".eudi-qr-img");
+    if (img && "qrDataUrl" in state) {
+      img.src = state.qrDataUrl;
+    }
+  }
+  if (state.status === "rejected" && "error" in state && state.error) {
+    const detail = container.querySelector(`#${getStateId("rejected")} .eudi-error-detail`);
+    if (detail) {
+      detail.textContent = state.error;
+    }
+  }
+  if (state.status === "error" && "error" in state) {
+    const detail = container.querySelector(`#${getStateId("error")} .eudi-error-detail`);
+    if (detail) {
+      detail.textContent = state.error;
+    }
+  }
+}
+
+// src/a11y.ts
+var FOCUSABLE_SELECTORS = [
+  "button:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "a[href]",
+  "input:not([disabled])"
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS));
+}
+function createFocusTrap(container) {
+  let previouslyFocused = null;
+  function handleKeyDown(event) {
+    if (event.key !== "Tab") return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0) return;
+    const firstElement = focusable[0];
+    const lastElement = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === firstElement) {
+      event.preventDefault();
+      lastElement.focus();
+    } else if (!event.shiftKey && document.activeElement === lastElement) {
+      event.preventDefault();
+      firstElement.focus();
+    }
+  }
+  function activate() {
+    previouslyFocused = document.activeElement;
+    container.addEventListener("keydown", handleKeyDown);
+    const focusable = getFocusableElements(container);
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+  }
+  function deactivate() {
+    container.removeEventListener("keydown", handleKeyDown);
+    if (previouslyFocused && typeof previouslyFocused.focus === "function") {
+      previouslyFocused.focus();
+    }
+  }
+  activate();
+  return deactivate;
+}
+function announce(liveRegion, message, priority = "polite") {
+  liveRegion.setAttribute("aria-live", priority);
+  liveRegion.textContent = "";
+  requestAnimationFrame(() => {
+    liveRegion.textContent = message;
+  });
+}
+function clearAnnouncement(liveRegion) {
+  liveRegion.textContent = "";
+}
+var STATE_MESSAGES = {
+  idle: "",
+  loading: "Loading verification session...",
+  showQR: "QR code ready. Scan with your EU Digital Identity Wallet.",
+  waitingForWallet: "Waiting for wallet approval...",
+  verified: "Identity verified successfully.",
+  rejected: "Verification was declined.",
+  expired: "Verification session expired.",
+  error: "Verification error occurred."
+};
+function getAnnouncementPriority(status) {
+  switch (status) {
+    case "verified":
+    case "rejected":
+    case "expired":
+    case "error":
+      return "assertive";
+    default:
+      return "polite";
+  }
+}
+
+// src/element.ts
+var OBSERVED_ATTRIBUTES = ["api-url", "request", "auto-start"];
+var EudiVerifyElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+  #shadow;
+  #verification = null;
+  #unsubscribe = null;
+  #container = null;
+  #liveRegion = null;
+  #lastStatus = null;
+  #isDemo = null;
+  #demoBanner = null;
+  constructor() {
+    super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+  }
+  /**
+   * Get the API URL attribute.
+   */
+  get apiUrl() {
+    return this.getAttribute("api-url") ?? "";
+  }
+  /**
+   * Set the API URL attribute.
+   */
+  set apiUrl(value) {
+    this.setAttribute("api-url", value);
+  }
+  /**
+   * Get the request attribute (JSON string).
+   */
+  get request() {
+    return this.getAttribute("request") ?? "";
+  }
+  /**
+   * Set the request attribute (JSON string).
+   */
+  set request(value) {
+    this.setAttribute("request", value);
+  }
+  /**
+   * Check if auto-start is enabled.
+   */
+  get autoStart() {
+    return this.hasAttribute("auto-start");
+  }
+  /**
+   * Set auto-start attribute.
+   */
+  set autoStart(value) {
+    if (value) {
+      this.setAttribute("auto-start", "");
+    } else {
+      this.removeAttribute("auto-start");
+    }
+  }
+  /**
+   * Current verification state (read-only).
+   */
+  get state() {
+    return this.#verification?.state ?? null;
+  }
+  connectedCallback() {
+    this.#render();
+    this.#setupEventListeners();
+    if (this.autoStart && this.apiUrl && this.request) {
+      this.start();
+    }
+  }
+  disconnectedCallback() {
+    this.#cleanup();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "api-url" && this.#verification) {
+      this.#cleanup();
+    }
+  }
+  /**
+   * Start the verification flow.
+   */
+  start() {
+    if (!this.apiUrl) {
+      console.error("[eudi-verify] api-url attribute is required");
+      return;
+    }
+    let requestObj;
+    try {
+      requestObj = this.request ? JSON.parse(this.request) : {};
+    } catch {
+      console.error("[eudi-verify] Invalid JSON in request attribute");
+      this.#dispatchError("Invalid verification request");
+      return;
+    }
+    this.#ensureVerification();
+    this.#verification.start(requestObj);
+  }
+  /**
+   * Cancel the current verification.
+   */
+  cancel() {
+    this.#verification?.cancel();
+  }
+  /**
+   * Reset to idle state.
+   */
+  reset() {
+    this.#cleanup();
+    this.#updateState({ status: "idle" });
+  }
+  #render() {
+    this.#shadow.innerHTML = `
+      <style>${createStyles()}</style>
+      ${renderWidget()}
+    `;
+    this.#container = this.#shadow.querySelector(".eudi-widget");
+    this.#liveRegion = this.#shadow.querySelector("[aria-live]");
+    this.#demoBanner = this.#shadow.querySelector(".eudi-demo-banner");
+  }
+  #setupEventListeners() {
+    this.#shadow.addEventListener("click", (event) => {
+      const target = event.target;
+      const button = target.closest("[data-action]");
+      if (!button) return;
+      const action = button.dataset.action;
+      switch (action) {
+        case "start":
+          this.start();
+          break;
+        case "cancel":
+          this.cancel();
+          break;
+        case "reset":
+          this.reset();
+          this.start();
+          break;
+      }
+    });
+  }
+  #ensureVerification() {
+    if (this.#verification) return;
+    this.#verification = (0, import_client.createVerification)({
+      apiUrl: this.apiUrl
+    });
+    this.#unsubscribe = this.#verification.subscribe((state) => {
+      this.#handleStateChange(state);
+    });
+    this.#detectDemoMode();
+  }
+  async #detectDemoMode() {
+    if (this.#isDemo !== null || !this.apiUrl) return;
+    try {
+      const response = await fetch(`${this.apiUrl}/sessions`, {
+        method: "HEAD"
+      });
+      const mode = response.headers.get("X-Eudi-Mode");
+      this.#isDemo = mode === "demo";
+      this.#updateDemoBanner();
+    } catch {
+      this.#isDemo = false;
+    }
+  }
+  #updateDemoBanner() {
+    if (!this.#demoBanner) return;
+    if (this.#isDemo === true) {
+      this.#demoBanner.removeAttribute("hidden");
+    } else {
+      this.#demoBanner.setAttribute("hidden", "");
+    }
+  }
+  #handleStateChange(state) {
+    this.#updateState(state);
+    this.#dispatchStateChange(state);
+    switch (state.status) {
+      case "verified":
+        if ("token" in state && "claims" in state) {
+          this.#dispatchVerified(state.token, state.claims);
+        }
+        break;
+      case "rejected":
+        this.#dispatchRejected("error" in state ? state.error : void 0);
+        break;
+      case "expired":
+        this.#dispatchExpired();
+        break;
+      case "error":
+        if ("error" in state) {
+          this.#dispatchError(state.error);
+        }
+        break;
+    }
+  }
+  #updateState(state) {
+    if (!this.#container) return;
+    updateWidgetState(this.#container, state);
+    if (this.#liveRegion && state.status !== this.#lastStatus) {
+      const message = STATE_MESSAGES[state.status];
+      if (message) {
+        const priority = getAnnouncementPriority(state.status);
+        announce(this.#liveRegion, message, priority);
+      }
+    }
+    this.#lastStatus = state.status;
+    this.#manageFocus(state);
+  }
+  #manageFocus(state) {
+    if (!this.#container) return;
+    switch (state.status) {
+      case "showQR": {
+        const cancelBtn = this.#container.querySelector("#eudi-state-showQR .eudi-cancel-btn");
+        cancelBtn?.focus();
+        break;
+      }
+      case "verified":
+      case "rejected":
+      case "expired":
+      case "error": {
+        const retryBtn = this.#container.querySelector(
+          `#eudi-state-${state.status} .eudi-retry-btn`
+        );
+        retryBtn?.focus();
+        break;
+      }
+    }
+  }
+  #dispatchVerified(token, claims) {
+    this.dispatchEvent(
+      new CustomEvent("verified", {
+        bubbles: true,
+        composed: true,
+        detail: { token, claims }
+      })
+    );
+  }
+  #dispatchRejected(error) {
+    this.dispatchEvent(
+      new CustomEvent("rejected", {
+        bubbles: true,
+        composed: true,
+        detail: { error }
+      })
+    );
+  }
+  #dispatchExpired() {
+    this.dispatchEvent(
+      new CustomEvent("expired", {
+        bubbles: true,
+        composed: true,
+        detail: {}
+      })
+    );
+  }
+  #dispatchError(error) {
+    this.dispatchEvent(
+      new CustomEvent("error", {
+        bubbles: true,
+        composed: true,
+        detail: { error }
+      })
+    );
+  }
+  #dispatchStateChange(state) {
+    this.dispatchEvent(
+      new CustomEvent("state-change", {
+        bubbles: true,
+        composed: true,
+        detail: { state }
+      })
+    );
+  }
+  #cleanup() {
+    if (this.#unsubscribe) {
+      this.#unsubscribe();
+      this.#unsubscribe = null;
+    }
+    if (this.#verification) {
+      this.#verification.destroy();
+      this.#verification = null;
+    }
+    if (this.#liveRegion) {
+      clearAnnouncement(this.#liveRegion);
+    }
+    this.#lastStatus = null;
+  }
+};
+
+// src/index.ts
+var VERSION = "0.1.0";
+if (typeof customElements !== "undefined" && !customElements.get("eudi-verify")) {
+  customElements.define("eudi-verify", EudiVerifyElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSS_VARIABLES,
+  EudiVerifyElement,
+  STATE_MESSAGES,
+  VERSION,
+  announce,
+  clearAnnouncement,
+  createFocusTrap,
+  createStyles,
+  getFocusableElements,
+  getStateId,
+  renderWidget,
+  updateWidgetState
+});
+//# sourceMappingURL=eudi-verify.cjs.map