@vio-live/web-sdk 0.19.0 → 0.21.0

package/dist/{chunk-NUNGU6LL.js → chunk-MRJR6DG5.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError } from './chunk-CMNTHF66.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError } from './chunk-WTVGVDZX.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -885,6 +885,192 @@ function isMethodEnabled(available, ...names) {
   );
 }
 
+// src/ui/dialog-focus.ts
+var DialogFocus = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.opener = null;
+    this.active = false;
+    /** The element inside the dialog that had focus last — where a pull-back continues from. */
+    this.lastInside = null;
+    this.onKeydown = (e) => {
+      if (e.defaultPrevented) return;
+      if (e.key === "Escape" || e.key === "Esc") {
+        if (this.opts.canClose && !this.opts.canClose()) return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.opts.close();
+        return;
+      }
+      if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+      const container = this.opts.container();
+      if (!container) return;
+      const items = tabbableIn(container);
+      if (items.length === 0) {
+        e.preventDefault();
+        focusElement(container);
+        return;
+      }
+      const active = deepActiveElement();
+      const index = active ? items.indexOf(active) : -1;
+      e.preventDefault();
+      const count = items.length;
+      const next = index === -1 ? e.shiftKey ? count - 1 : 0 : (index + (e.shiftKey ? -1 : 1) + count) % count;
+      focusElement(items[next]);
+    };
+    /**
+     * Focus moved somewhere. Inside the dialog: remember where. Into another
+     * open Vio dialog: theirs. Onto the page: the browser walked out of the
+     * dialog on its own (Safari leaving a widget iframe) — continue from the
+     * element that had focus, backwards when the page element sits before
+     * the host in document order.
+     */
+    this.onFocusIn = (e) => {
+      if (!this.opts.host.isConnected) return;
+      const path = e.composedPath();
+      if (path.includes(this.opts.host)) {
+        const active = deepActiveElement();
+        this.lastInside = active instanceof HTMLElement ? active : null;
+        return;
+      }
+      if (path.some((n) => isOpenVioDialog(n, this.opts.host))) return;
+      const container = this.opts.container();
+      if (!container) return;
+      const items = tabbableIn(container);
+      if (items.length === 0) {
+        focusElement(container);
+        return;
+      }
+      const target = e.target instanceof Node ? e.target : null;
+      const backwards = !!target && precedes(target, this.opts.host);
+      const index = this.lastInside ? items.indexOf(this.lastInside) : -1;
+      const count = items.length;
+      const next = backwards ? index <= 0 ? count - 1 : index - 1 : index === -1 || index === count - 1 ? 0 : index + 1;
+      focusElement(items[next]);
+    };
+    /** Tab pressed while focus is on the page (or the body): enter the dialog. */
+    this.onDocumentKeydown = (e) => {
+      if (!this.opts.host.isConnected) return;
+      if (e.defaultPrevented || e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+      const active = deepActiveElement();
+      if (active && isWithin(active, this.opts.host)) return;
+      if (active && hasOpenVioDialogAbove(active, this.opts.host)) return;
+      const container = this.opts.container();
+      if (!container) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const items = tabbableIn(container);
+      focusElement(items.length === 0 ? container : e.shiftKey ? items[items.length - 1] : items[0]);
+    };
+  }
+  /**
+   * Call from `updated()` when `open` changed. Lit reports `open` as changed
+   * on the first render too (from undefined to its initial value): with the
+   * same value twice this is a no-op, so that first call does nothing.
+   */
+  update(open) {
+    if (open === this.active) return;
+    this.active = open;
+    if (open) this.opened();
+    else this.closed();
+  }
+  opened() {
+    this.opener = deepActiveElement();
+    this.lastInside = null;
+    this.opts.host.addEventListener("keydown", this.onKeydown);
+    document.addEventListener("focusin", this.onFocusIn, true);
+    document.addEventListener("keydown", this.onDocumentKeydown, true);
+    const container = this.opts.container();
+    if (container) focusInto(container);
+  }
+  closed() {
+    this.opts.host.removeEventListener("keydown", this.onKeydown);
+    document.removeEventListener("focusin", this.onFocusIn, true);
+    document.removeEventListener("keydown", this.onDocumentKeydown, true);
+    const opener = this.opener;
+    this.opener = null;
+    const active = deepActiveElement();
+    if (!active || !isWithin(active, this.opts.host)) return;
+    if (opener && opener.isConnected && isRestorable(opener)) {
+      focusElement(opener);
+    } else if (active instanceof HTMLElement) {
+      active.blur();
+    }
+  }
+};
+function isOpenVioDialog(node, host) {
+  return node instanceof Element && node !== host && node.tagName.startsWith("VIO-") && node.hasAttribute("open");
+}
+function hasOpenVioDialogAbove(node, host) {
+  let n = node;
+  while (n) {
+    if (isOpenVioDialog(n, host)) return true;
+    n = n.parentNode ?? (n instanceof ShadowRoot ? n.host : null);
+  }
+  return false;
+}
+function precedes(a, b) {
+  return (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+}
+function deepActiveElement() {
+  if (typeof document === "undefined") return null;
+  let el = document.activeElement;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+  return el;
+}
+var TABBABLE_CANDIDATES = "a[href], area[href], button, input, select, textarea, iframe, summary, [tabindex], [contenteditable]";
+function tabbableIn(container) {
+  const out = [];
+  walkChildren(container, out);
+  return out;
+}
+function walkChildren(parent, out) {
+  for (const child of Array.from(parent.children)) {
+    if (child instanceof HTMLSlotElement) {
+      const assigned = child.assignedElements({ flatten: true });
+      if (assigned.length > 0) {
+        for (const el of assigned) visit(el, out);
+        continue;
+      }
+    }
+    visit(child, out);
+  }
+}
+function visit(el, out) {
+  if (isTabbable(el)) out.push(el);
+  if (el.shadowRoot) walkChildren(el.shadowRoot, out);
+  else walkChildren(el, out);
+}
+function isTabbable(el) {
+  if (!(el instanceof HTMLElement) || !el.matches(TABBABLE_CANDIDATES)) return false;
+  const tabindex = el.getAttribute("tabindex");
+  if (tabindex !== null && Number(tabindex) < 0) return false;
+  if (el.hasAttribute("disabled")) return false;
+  if (el instanceof HTMLInputElement && el.type === "hidden") return false;
+  if (el.getAttribute("contenteditable") === "false" && !el.matches("a[href], button, input, select, textarea, iframe, [tabindex]")) return false;
+  if (el.hidden || el.getAttribute("aria-hidden") === "true") return false;
+  if (typeof el.checkVisibility === "function" && !el.checkVisibility()) return false;
+  return true;
+}
+function focusInto(container) {
+  const first = tabbableIn(container)[0];
+  focusElement(first ?? container);
+}
+function focusElement(el) {
+  el.focus({ preventScroll: true });
+}
+function isRestorable(el) {
+  return el instanceof HTMLElement && el !== document.body && el !== document.documentElement;
+}
+function isWithin(node, ancestor) {
+  let n = node;
+  while (n) {
+    if (n === ancestor) return true;
+    n = n.parentNode ?? (n instanceof ShadowRoot ? n.host : null);
+  }
+  return false;
+}
+
 // src/ui/components/vio-product-detail.ts
 var STRIPE_LOGO_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
@@ -916,6 +1102,12 @@ var VioProductDetail = class extends LitElement {
     this.optMapCache = /* @__PURE__ */ new WeakMap();
     /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
     this.applePayHandle = null;
+    /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
+    this.dialogFocus = new DialogFocus({
+      host: this,
+      container: () => this.renderRoot.querySelector(".modal"),
+      close: () => this.close()
+    });
     this.boundProductClick = (e) => {
       if (!this.autoOpen) return;
       const ev = e;
@@ -959,6 +1151,8 @@ var VioProductDetail = class extends LitElement {
       overflow-y: auto;
     }
     :host([open]) .modal { transform: translateY(0); }
+    /* Focus lands on the panel itself only as a fallback — no ring for it. */
+    .modal:focus { outline: none; }
 
     .handle { display: none; }
 
@@ -967,7 +1161,7 @@ var VioProductDetail = class extends LitElement {
       .modal {
         top: auto;
         height: 92vh;
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
       }
       .handle {
@@ -981,7 +1175,7 @@ var VioProductDetail = class extends LitElement {
         width: 40px;
         height: 4px;
         background: var(--vio-color-border, #e5e5e5);
-        border-radius: 2px;
+        border-radius: var(--vio-radius-sm, 2px);
       }
     }
 
@@ -1346,9 +1540,9 @@ var VioProductDetail = class extends LitElement {
       );
       background-size: 200% 100%;
       animation: vio-skeleton-shimmer 1.4s ease-in-out infinite;
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
     }
-    .sk-image { width: 100%; aspect-ratio: 1; border-radius: 12px; }
+    .sk-image { width: 100%; aspect-ratio: 1; border-radius: var(--vio-radius-lg, 12px); }
     .sk-line { height: 14px; }
     .sk-brand { width: 38%; height: 10px; margin-top: 6px; }
     .sk-title { width: 85%; height: 26px; }
@@ -1382,6 +1576,9 @@ var VioProductDetail = class extends LitElement {
     document.removeEventListener("vio:product-click", this.boundProductClick);
     super.disconnectedCallback();
   }
+  updated(changed) {
+    if (changed.has("open")) this.dialogFocus.update(this.open);
+  }
   show() {
     this.open = true;
   }
@@ -1938,7 +2135,7 @@ var VioProductDetail = class extends LitElement {
   render() {
     return html`
       <div class="backdrop" @click=${this.close}></div>
-      <div class="modal" role="dialog" aria-label="Produkt">
+      <div class="modal" role="dialog" aria-modal="true" aria-label="Produkt" tabindex="-1">
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar">
           <span class="topbar-brand">${this.headerName()}</span>
@@ -2247,6 +2444,12 @@ var VioCart = class extends LitElement {
     this.preparedTotal = -1;
     /** In-flight guard for loadAvailablePaymentMethods. */
     this.loadingPaymentMethods = false;
+    /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
+    this.dialogFocus = new DialogFocus({
+      host: this,
+      container: () => this.renderRoot.querySelector(".drawer"),
+      close: () => this.close()
+    });
     this.boundOnCartChange = (e) => {
       const detail = e.detail;
       this.carts = detail.cartsBySponsor;
@@ -2289,6 +2492,8 @@ var VioCart = class extends LitElement {
       box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
     }
     :host([open]) .drawer { transform: translateX(0); }
+    /* Focus lands on the drawer itself only as a fallback — no ring for it. */
+    .drawer:focus { outline: none; }
 
     .handle { display: none; }
 
@@ -2301,7 +2506,7 @@ var VioCart = class extends LitElement {
         bottom: 0;
         width: 100%;
         height: 88vh;
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         transform: translateY(100%);
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
       }
@@ -2316,7 +2521,7 @@ var VioCart = class extends LitElement {
         width: 40px;
         height: 4px;
         background: var(--vio-color-border, #e5e5e5);
-        border-radius: 2px;
+        border-radius: var(--vio-radius-sm, 2px);
       }
     }
 
@@ -2409,7 +2614,7 @@ var VioCart = class extends LitElement {
       height: 24px;
       border: 1px solid var(--vio-color-border, #e5e5e5);
       background: #fff;
-      border-radius: 2px;
+      border-radius: var(--vio-radius-sm, 2px);
       cursor: pointer;
       font-size: 12px;
       color: var(--vio-color-text, #0a0a0a);
@@ -2466,7 +2671,7 @@ var VioCart = class extends LitElement {
       background: #000;
       color: #fff;
       border: none;
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       font-size: 19px;
       font-weight: 500;
       line-height: 1;
@@ -2488,7 +2693,7 @@ var VioCart = class extends LitElement {
       background: #ffb3c7;
       color: #0a0a0a;
       border: none;
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
@@ -2509,7 +2714,7 @@ var VioCart = class extends LitElement {
       background: #ff5b24;
       color: #fff;
       border: none;
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -2533,7 +2738,7 @@ var VioCart = class extends LitElement {
       background: #635bff;
       color: #fff;
       border: none;
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
@@ -2671,6 +2876,7 @@ var VioCart = class extends LitElement {
     return isMethodEnabled(this.availableMethods, ...names);
   }
   updated(changed) {
+    if (changed.has("open")) this.dialogFocus.update(this.open);
     if (changed.has("open") && this.open) {
       this.confirmedOrder = null;
       this.preparedTotal = -1;
@@ -2850,7 +3056,7 @@ var VioCart = class extends LitElement {
     const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
       <div class="backdrop" @click=${this.close}></div>
-      <aside class="drawer" role="dialog" aria-label=${this.heading}>
+      <aside class="drawer" role="dialog" aria-modal="true" aria-label=${this.heading} tabindex="-1">
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
         <div class="header">
           <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
@@ -3044,6 +3250,38 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioCart.prototype, "confirmedOrder", 2);
+
+// src/ui/checkout-errors.ts
+var EMPTY_CART_MESSAGE = "Handlekurven er tom. Legg til et produkt og pr\xF8v igjen.";
+var CART_CHANGED_MESSAGE = "Handlekurven ble endret i en annen fane. Last siden p\xE5 nytt og pr\xF8v igjen.";
+var CART_PAID_MESSAGE = "Denne handlekurven er allerede betalt. Start en ny handlekurv.";
+var PAYMENT_START_FAILED_MESSAGE = "Betalingen kunne ikke startes. Pr\xF8v igjen, eller velg en annen betalingsm\xE5te.";
+var SHIPS_APART = "kan ikke sendes sammen";
+function friendlyPaymentError(raw, method) {
+  const text = String(raw ?? "");
+  const lower = text.toLowerCase();
+  if (lower.includes("got 0") || lower.includes("amount must be a positive")) {
+    return EMPTY_CART_MESSAGE;
+  }
+  if (lower.includes("replaced by a newer") || text.includes("CHECKOUT_SUPERSEDED")) {
+    return CART_CHANGED_MESSAGE;
+  }
+  if (lower.includes("already been paid") || text.includes("CART_ALREADY_PAID")) {
+    return CART_PAID_MESSAGE;
+  }
+  if (text.includes(SHIPS_APART)) return norwegianSentence(text);
+  return PAYMENT_START_FAILED_MESSAGE;
+}
+function norwegianSentence(text) {
+  const at = text.indexOf(SHIPS_APART);
+  const prefixEnd = text.lastIndexOf(": ", at);
+  return (prefixEnd === -1 ? text : text.slice(prefixEnd + 2)).trim();
+}
+function errorText(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+
+// src/ui/components/vio-checkout.ts
 var STRIPE_LOGO_SRC3 = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
 );
@@ -3155,6 +3393,16 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     };
     /** In-flight guard for loadAvailablePaymentMethods. */
     this.loadingPaymentMethods = false;
+    /**
+     * Keyboard and focus while open: Escape closes — not while a payment is
+     * in flight — Tab stays inside, focus returns to the opener.
+     */
+    this.dialogFocus = new DialogFocus({
+      host: this,
+      container: () => this.renderRoot.querySelector(".modal"),
+      close: () => this.close(),
+      canClose: () => !this.paymentInFlight
+    });
     this.paymentMethodsResolved = false;
     /** Guards `autoSelectSoleMethod` to ONE attempt per opening — see there. */
     this.autoSelectAttempted = false;
@@ -3233,10 +3481,17 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     };
     this.boundOnPaymentError = (e) => {
       const detail = e.detail;
-      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] payment-error:", detail.method, detail.error);
+      }
+      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : friendlyPaymentError(detail.error, detail.method);
       this.open = true;
     };
   }
+  /** A payment is being started or confirmed right now: the overlay must not close under it. */
+  get paymentInFlight() {
+    return this.stripePaying || this.stripeLoading || this.vippsLoading || this.klarnaAuthorizing || this.applePayInProgress;
+  }
   static {
     this.styles = css`
     :host { display: contents; }
@@ -3265,6 +3520,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       overflow-y: auto;
     }
     :host([open]) .modal { transform: translateY(0); }
+    /* Focus lands on the panel itself only as a fallback — no ring for it. */
+    .modal:focus { outline: none; }
 
     /* Confirmation drawer — compact bottom sheet, not the full-screen overlay. */
     .modal.as-drawer {
@@ -3894,6 +4151,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         const vippsStatus = await Vio.checkout.getVippsStatus(checkoutId, sponsorId || void 0);
         const state6 = String(vippsStatus?.state ?? "").toUpperCase();
         sawStatus = true;
+        if (vippsStatus?.duplicate_of) return { outcome: "duplicate", sawStatus };
         if (state6 === "AUTHORIZED") return { outcome: "paid", sawStatus };
         if (state6 === "CREATED") continue;
         return { outcome: "failed", sawStatus };
@@ -3926,6 +4184,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
           detail: { method: vioMethod, sponsorId, orderId: checkoutId }
         })
       );
+    } else if (outcome === "duplicate") {
+      this.paymentError = CART_PAID_MESSAGE;
+      this.open = true;
     } else if (outcome === "failed") {
       this.paymentError = "Betalingen ble avbrutt eller feilet. Vennligst pr\xF8v igjen.";
       this.open = true;
@@ -3996,7 +4257,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
           this.verifyingReturn = null;
           if (order?.status === "checkout_complete" && order.html_snippet) {
             const spId = this.checkoutState?.sponsorId ?? 0;
-            this.showProviderReceipt("kustom", spId, order);
+            this.showProviderReceipt("kustom", spId, order, kustomReturn.checkoutId);
             await this.updateComplete;
             const container = this.lightContainer("vio-kustom-checkout-container", "vio-kustom");
             Vio.checkout.renderKustomSnippet(container, order.html_snippet);
@@ -4042,12 +4303,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
             const result = { order: { orderId: order.order_id }, chargedTotal: order.total_price };
             this.qliroMountedOrderId = order.order_id;
             if (order.html_snippet) {
-              this.showProviderReceipt("qliro", spId, result);
+              this.showProviderReceipt("qliro", spId, result, checkoutId);
               await this.updateComplete;
               const container = this.lightContainer("vio-qliro-checkout-container", "vio-qliro");
               Vio.checkout.renderKustomSnippet(container, order.html_snippet);
             } else {
-              this.confirmOrder("qliro", spId, result);
+              this.confirmOrder("qliro", spId, result, checkoutId);
             }
           } else if (order?.html_snippet) {
             this.qliroMountedOrderId = order.order_id;
@@ -4098,9 +4359,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
               Vio.checkout.renderKustomSnippet(container, order.html_snippet);
             }
             if (order.status === "PurchaseCompleted") {
-              this.showProviderReceipt("walley", this.checkoutState?.sponsorId ?? 0, {
-                orderId: order.order_id
-              });
+              this.showProviderReceipt(
+                "walley",
+                this.checkoutState?.sponsorId ?? 0,
+                { orderId: order.order_id },
+                checkoutId
+              );
             }
           }
         } catch (err) {
@@ -4196,6 +4460,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
               const checkout = await Vio.checkout.getCheckout(checkoutId, sponsorId || void 0);
               const status = String(checkout?.status ?? "").toLowerCase();
               sawStatus = true;
+              if (checkout?.duplicate_of) {
+                outcome = "duplicate";
+                break;
+              }
               if (_VioCheckout.FAILED_STATUSES.has(status)) {
                 outcome = "failed";
                 break;
@@ -4260,6 +4528,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     super.disconnectedCallback();
   }
   updated(changed) {
+    if (changed.has("open")) this.dialogFocus.update(this.open);
     if (changed.has("open") && this.open && this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
@@ -4518,7 +4787,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (typeof console !== "undefined") {
         console.warn("[VioCheckout] Klarna Payments mount failed:", err);
       }
-      this.paymentError = `Kunne ikke laste Klarna: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
     } finally {
       this.klarnaMounting = false;
     }
@@ -4701,7 +4970,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       }
       this.stripeLoading = true;
       void Vio.checkout.startStripePayment(this.checkoutState?.sponsorId, this.form).catch((err) => {
-        this.paymentError = `Kunne ikke starte Stripe-betaling: ${err instanceof Error ? err.message : String(err)}`;
+        if (typeof console !== "undefined") {
+          console.warn("[VioCheckout] Stripe payment could not start:", err);
+        }
+        this.paymentError = friendlyPaymentError(errorText(err));
       }).finally(() => {
         this.stripeLoading = false;
       });
@@ -4709,7 +4981,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (method === "vipps") {
       this.vippsLoading = true;
       void this.startVippsFromCheckout().catch((err) => {
-        this.paymentError = `Kunne ikke starte Vipps-betaling: ${err instanceof Error ? err.message : String(err)}`;
+        if (typeof console !== "undefined") {
+          console.warn("[VioCheckout] Vipps payment could not start:", err);
+        }
+        this.paymentError = friendlyPaymentError(errorText(err));
       }).finally(() => {
         this.vippsLoading = false;
       });
@@ -4744,11 +5019,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
    * the confirmation screen, emits `vio:payment-success`, and clears the
    * paid sponsor's cart so the badge + drawer reflect the purchase.
    */
-  confirmOrder(method, sponsorId, result) {
+  confirmOrder(method, sponsorId, result, returnCheckoutId) {
     const r = result ?? {};
     const shippingPrice = this.shippingMajor();
     const email = String(this.form.email ?? "").trim();
-    const checkoutId = this.checkoutState?.checkoutId;
+    const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
     const providerOrderId = r.order?.orderId != null ? String(r.order.orderId) : "";
     this.confirmedOrder = {
       items: [...this.items],
@@ -4765,7 +5040,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        detail: { method, sponsorId, result }
+        // `checkoutId` is Vio's own reference for the purchase — what the
+        // redirect path already sends as `orderId`; analytics falls back to it
+        // when the provider's result carries no order id.
+        detail: { method, sponsorId, result, checkoutId }
       })
     );
     Vio.cart.clearSponsorCart(sponsorId);
@@ -4877,7 +5155,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       <div
         class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
         role="dialog"
+        aria-modal="true"
         aria-label=${this.heading}
+        tabindex="-1"
       >
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar">
@@ -4913,15 +5193,16 @@ var _VioCheckout = class _VioCheckout extends LitElement {
    * sponsor's cart cleared — but the screen is the provider's receipt, not our
    * "Takk!": two receipts for one purchase is one too many.
    */
-  showProviderReceipt(method, sponsorId, result) {
+  showProviderReceipt(method, sponsorId, result, returnCheckoutId) {
     this.providerReceipt = method;
     this.confirmedMethod = method;
     this.open = true;
+    const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
     this.dispatchEvent(
       new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        detail: { method, sponsorId, result }
+        detail: { method, sponsorId, result, checkoutId }
       })
     );
     if (sponsorId) {
@@ -5090,7 +5371,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (typeof console !== "undefined") {
         console.warn("[VioCheckout] Kustom mount failed:", err);
       }
-      this.paymentError = `Kunne ikke laste Kustom: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
       Vio.checkout.selectPaymentMethod("");
     } finally {
       this.kustomMounting = false;
@@ -5210,7 +5491,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (typeof console !== "undefined") {
         console.warn("[VioCheckout] Qliro mount failed:", err);
       }
-      this.paymentError = `Kunne ikke laste Qliro: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
       Vio.checkout.selectPaymentMethod("");
     } finally {
       this.qliroMounting = false;
@@ -5267,7 +5548,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (typeof console !== "undefined") {
         console.warn("[VioCheckout] Walley mount failed:", err);
       }
-      this.paymentError = `Kunne ikke laste Walley: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
       Vio.checkout.selectPaymentMethod("");
     } finally {
       this.walleyMounting = false;
@@ -5342,7 +5623,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (typeof console !== "undefined") {
         console.warn("[VioCheckout] Nexi mount failed:", err);
       }
-      this.paymentError = `Kunne ikke laste Nexi: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
       Vio.checkout.selectPaymentMethod("");
     } finally {
       this.nexiMounting = false;
@@ -5529,7 +5810,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.adyenMountedKey = this.embedPurchaseKey();
     } catch (err) {
       this.unmountAdyen();
-      this.paymentError = err instanceof AdyenOriginError ? "Betaling er ikke aktivert for denne siden enn\xE5. Ta kontakt med butikken." : `Kunne ikke laste betaling: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = err instanceof AdyenOriginError ? "Betaling er ikke aktivert for denne siden enn\xE5. Ta kontakt med butikken." : friendlyPaymentError(errorText(err));
       if (typeof console !== "undefined") console.warn("[VioCheckout] Adyen mount failed:", err);
     } finally {
       this.adyenMounting = false;
@@ -5639,7 +5920,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         },
         onLoadError: (message) => {
           this.unmountStripe();
-          this.paymentError = `Kunne ikke laste betaling: ${message}`;
+          if (typeof console !== "undefined") {
+            console.warn("[VioCheckout] Stripe Payment Element failed to load:", message);
+          }
+          this.paymentError = friendlyPaymentError(message, "stripe");
         }
       });
       if (this.embedSession() !== mountedFor || this.checkoutState?.paymentMethod !== "stripe" || !this.open) {
@@ -5658,7 +5942,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.stripeMountedKey = this.embedPurchaseKey();
     } catch (err) {
       this.unmountStripe();
-      this.paymentError = `Kunne ikke laste betaling: ${err instanceof Error ? err.message : String(err)}`;
+      this.paymentError = friendlyPaymentError(errorText(err));
       if (typeof console !== "undefined") console.warn("[VioCheckout] Stripe mount failed:", err);
     } finally {
       this.stripeMounting = false;
@@ -5687,6 +5971,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       const settled = checkoutId ? await this.waitForStripeOrder(checkoutId, spId) : "pending";
       if (settled === "paid") {
         this.confirmOrder("stripe", spId, { chargedTotal: charged });
+      } else if (settled === "duplicate") {
+        this.stripeSettled = false;
+        this.paymentError = CART_PAID_MESSAGE;
       } else if (settled === "failed") {
         this.stripeSettled = false;
         this.paymentError = "Betalingen ble avbrutt eller feilet. Vennligst pr\xF8v igjen.";
@@ -5712,6 +5999,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       try {
         const checkout = await Vio.checkout.getCheckout(checkoutId, sponsorId || void 0);
         const status = String(checkout?.status ?? "").toLowerCase();
+        if (checkout?.duplicate_of) return "duplicate";
         if (_VioCheckout.FAILED_STATUSES.has(status)) return "failed";
         if (_VioCheckout.PAID_STATUSES.has(status)) return "paid";
       } catch (err) {
@@ -6377,5 +6665,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-NUNGU6LL.js.map
-//# sourceMappingURL=chunk-NUNGU6LL.js.map
+//# sourceMappingURL=chunk-MRJR6DG5.js.map
+//# sourceMappingURL=chunk-MRJR6DG5.js.map