@vio-live/web-sdk 0.19.0 → 0.23.0

package/dist/{chunk-NUNGU6LL.js → chunk-COCHGJ2K.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, autoSlotDisplayName, autoSlotId, normalizeScope } from './chunk-AMDI7KH3.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -165,6 +165,124 @@ function applyVioTheme(overrides, target = typeof document !== "undefined" ? doc
     }
   }
 }
+
+// src/ui/slot-registration.ts
+var SCOPE_ATTR = "vio-scope";
+var SCOPE_NAME_ATTR = "vio-scope-name";
+var SCOPE_DATA_ATTR = "data-vio-scope";
+var SCOPE_NAME_DATA_ATTR = "data-vio-scope-name";
+var SlotRegistration = class {
+  constructor(host, kind) {
+    this.host = host;
+    this.kind = kind;
+    this.identity = null;
+    this.release = null;
+    /** The element's position-based identity, fixed at connect time. */
+    this.position = null;
+  }
+  /** The effective slot id ('' before connect / after disconnect). */
+  get effective() {
+    return this.identity?.id ?? "";
+  }
+  /** The identity in effect, or null. */
+  get current() {
+    return this.identity;
+  }
+  /** On connect: fix scope + ordinal from the element's position, then register. */
+  connect(attrs) {
+    this.position = positionOf(this.host, attrs);
+    this.sync(attrs);
+  }
+  /** (Re)register when the attributes changed the identity. */
+  sync(attrs) {
+    if (this.position && scopeOf(this.host, attrs) !== this.position.scope) {
+      this.position = positionOf(this.host, attrs);
+    }
+    const next = this.resolve(attrs);
+    if (sameIdentity(next, this.identity)) return;
+    this.clear();
+    if (!next) return;
+    try {
+      this.release = Vio.registerSlot(next.id, next.displayName);
+      this.identity = next;
+    } catch {
+      this.release = null;
+      this.identity = null;
+    }
+  }
+  /** What the identity would be for these attributes (null before connect without a host id). */
+  resolve(attrs) {
+    const explicit = typeof attrs.vioSlot === "string" ? attrs.vioSlot.trim() : "";
+    const name = typeof attrs.vioSlotName === "string" && attrs.vioSlotName.trim() ? attrs.vioSlotName.trim() : void 0;
+    if (explicit) return { id: explicit, displayName: name, auto: false, scope: this.position?.scope ?? "" };
+    if (!this.position) return null;
+    const { scope, scopeName, ordinal } = this.position;
+    return {
+      id: autoSlotId(this.kind, ordinal, scope),
+      displayName: name ?? autoSlotDisplayName(this.kind, ordinal, scopeName),
+      auto: true,
+      scope
+    };
+  }
+  /** Unregister whatever is registered. */
+  clear() {
+    try {
+      this.release?.();
+    } catch {
+    }
+    this.release = null;
+    this.identity = null;
+  }
+};
+function sameIdentity(a, b) {
+  if (!a || !b) return a === b;
+  return a.id === b.id && a.displayName === b.displayName;
+}
+function scopeOf(el, attrs) {
+  const own = attrs && typeof attrs.vioScope === "string" ? attrs.vioScope : typeof el.vioScope === "string" ? el.vioScope ?? "" : el.getAttribute(SCOPE_ATTR) ?? "";
+  const value = normalizeScope(own) || normalizeScope(closestAcrossShadow(el, `[${SCOPE_DATA_ATTR}]`)?.getAttribute(SCOPE_DATA_ATTR));
+  return value;
+}
+function scopeNameOf(el, attrs) {
+  const own = attrs && typeof attrs.vioScopeName === "string" ? attrs.vioScopeName : typeof el.vioScopeName === "string" ? el.vioScopeName ?? "" : el.getAttribute(SCOPE_NAME_ATTR) ?? "";
+  const value = own.trim() || (closestAcrossShadow(el, `[${SCOPE_NAME_DATA_ATTR}]`)?.getAttribute(SCOPE_NAME_DATA_ATTR) ?? "").trim();
+  return value;
+}
+function positionOf(host, attrs) {
+  const scope = scopeOf(host, attrs);
+  const scopeName = scopeNameOf(host, attrs);
+  let ordinal = 0;
+  try {
+    const tag = host.tagName.toLowerCase();
+    const root = host.getRootNode();
+    const scopeRoot = root && typeof root.querySelectorAll === "function" ? root : typeof document !== "undefined" ? document : null;
+    if (scopeRoot) {
+      const peers = Array.from(scopeRoot.querySelectorAll(tag)).filter(
+        (el) => el === host || scopeOf(el) === scope
+      );
+      const index = peers.indexOf(host);
+      ordinal = index >= 0 ? index : 0;
+    }
+  } catch {
+    ordinal = 0;
+  }
+  return { scope, scopeName, ordinal };
+}
+function closestAcrossShadow(start, selector) {
+  try {
+    let node = start;
+    while (node) {
+      const found = typeof node.closest === "function" ? node.closest(selector) : null;
+      if (found) return found;
+      const root = node.getRootNode();
+      node = root && root !== node && typeof root.host === "object" ? root.host ?? null : null;
+    }
+  } catch {
+  }
+  return null;
+}
+
+// src/ui/components/vio-product.ts
 var VioProduct = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -175,6 +293,13 @@ var VioProduct = class extends LitElement {
     this.imageUrl = "";
     this.productId = "";
     this.sponsorId = "";
+    this.vioSlot = "";
+    this.vioSlotName = "";
+    this.vioScope = "";
+    this.vioScopeName = "";
+    this.vioContentId = "";
+    this.vioContentTitle = "";
+    this.slotRegistration = new SlotRegistration(this, "card");
     this.hasVariants = false;
     this.variants = void 0;
     this.options = void 0;
@@ -184,6 +309,36 @@ var VioProduct = class extends LitElement {
     this.justAdded = false;
     this.boundCartChange = () => this.updateInCart();
   }
+  /** The slot id in effect: `vio-slot`, else the auto id (`card-N`). Read-only. */
+  get effectiveSlot() {
+    return this.slotRegistration.effective;
+  }
+  /** The slot campaign's sponsor as the string the attributes use ('' when unknown). */
+  sponsorFromAttribution() {
+    const id = Vio.attribution(this.effectiveSlot).sponsorId;
+    return id !== void 0 ? String(id) : "";
+  }
+  slotAttributes() {
+    return {
+      vioSlot: this.vioSlot,
+      vioSlotName: this.vioSlotName,
+      vioScope: this.vioScope,
+      vioScopeName: this.vioScopeName
+    };
+  }
+  /**
+   * What every event carries for attribution (`Vio.attribution`): the place,
+   * its campaign and sponsor, and the content — overridden here when the host
+   * set `vio-content-id` / `vio-content-title` on this card.
+   */
+  attribution() {
+    const base = Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId || void 0 });
+    return {
+      ...base,
+      ...this.vioContentId ? { contentId: this.vioContentId } : {},
+      ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host {
@@ -297,14 +452,19 @@ var VioProduct = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.updateInCart();
+    this.slotRegistration.connect(this.slotAttributes());
     Vio.cart.addEventListener("change", this.boundCartChange);
   }
   disconnectedCallback() {
     Vio.cart.removeEventListener("change", this.boundCartChange);
+    this.slotRegistration.clear();
     super.disconnectedCallback();
   }
   updated(changed) {
     if (changed.has("productId") || changed.has("sponsorId")) this.updateInCart();
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+      this.slotRegistration.sync(this.slotAttributes());
+    }
   }
   /** Reflect whether (and how many units of) this product sit in the cart. */
   updateInCart() {
@@ -330,12 +490,14 @@ var VioProduct = class extends LitElement {
         composed: true,
         detail: {
           productId: this.productId,
-          sponsorId: this.sponsorId,
           brand: this.brand,
           name: this.name,
           price: this.price,
           retailer: this.retailer,
-          imageUrl: this.imageUrl
+          imageUrl: this.imageUrl,
+          ...this.attribution(),
+          // The host's sponsor-id wins; without one, the slot's campaign sponsor.
+          sponsorId: this.sponsorId || this.sponsorFromAttribution()
         }
       })
     );
@@ -355,18 +517,28 @@ var VioProduct = class extends LitElement {
       this.onClick();
       return;
     }
+    const attribution = this.attribution();
     this.dispatchEvent(
       new CustomEvent("vio:product-add", {
         bubbles: true,
         composed: true,
         detail: {
           productId: this.productId,
-          sponsorId: this.sponsorId,
           brand: this.brand,
           name: this.name,
           price: this.price,
           retailer: this.retailer,
-          imageUrl: this.imageUrl
+          imageUrl: this.imageUrl,
+          ...attribution,
+          // The host's sponsor-id wins; without one, the slot's campaign sponsor.
+          sponsorId: this.sponsorId || this.sponsorFromAttribution(),
+          // The host adds to the cart: pass this through as `origin` so the
+          // purchase is attributed to this place and campaign.
+          origin: {
+            campaignId: attribution.campaignId,
+            slot: attribution.slot,
+            contentId: attribution.contentId
+          }
         }
       })
     );
@@ -434,6 +606,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "sponsor-id" })
 ], VioProduct.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot" })
+], VioProduct.prototype, "vioSlot", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot-name" })
+], VioProduct.prototype, "vioSlotName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope" })
+], VioProduct.prototype, "vioScope", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope-name" })
+], VioProduct.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-id" })
+], VioProduct.prototype, "vioContentId", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-title" })
+], VioProduct.prototype, "vioContentTitle", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "has-variants" })
 ], VioProduct.prototype, "hasVariants", 2);
@@ -468,6 +658,13 @@ var VioProductCarousel = class extends LitElement {
     this.sponsorId = 0;
     this.productRefs = "";
     this.currency = "NOK";
+    this.vioSlot = "";
+    this.vioSlotName = "";
+    this.vioScope = "";
+    this.vioScopeName = "";
+    this.vioContentId = "";
+    this.vioContentTitle = "";
+    this.slotRegistration = new SlotRegistration(this, "carousel");
     this.fetched = null;
     this.isLoading = false;
     this.fetchError = "";
@@ -479,6 +676,27 @@ var VioProductCarousel = class extends LitElement {
     this.impressed = false;
     this.listTracked = false;
   }
+  /** The slot id in effect: `vio-slot`, else the auto id (`carousel-N`). Read-only. */
+  get effectiveSlot() {
+    return this.slotRegistration.effective;
+  }
+  slotAttributes() {
+    return {
+      vioSlot: this.vioSlot,
+      vioSlotName: this.vioSlotName,
+      vioScope: this.vioScope,
+      vioScopeName: this.vioScopeName
+    };
+  }
+  /** Attribution every analytics event of this carousel carries (`Vio.attribution` + the content overrides). */
+  attribution() {
+    const base = Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 });
+    return {
+      ...base,
+      ...this.vioContentId ? { contentId: this.vioContentId } : {},
+      ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host {
@@ -626,6 +844,7 @@ var VioProductCarousel = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.slotRegistration.connect(this.slotAttributes());
     this.observeForAnalytics();
     if (this.productRefs.trim() || this.productIds.trim()) {
       void this.autoFetch();
@@ -634,14 +853,28 @@ var VioProductCarousel = class extends LitElement {
   disconnectedCallback() {
     this.unobserveImpression?.();
     this.unobserveImpression = null;
+    this.slotRegistration.clear();
     super.disconnectedCallback();
   }
   updated(changed) {
-    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+      this.slotRegistration.sync(this.slotAttributes());
+    }
+    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId") || changed.has("vioSlot");
     if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
       void this.autoFetch();
     }
   }
+  /**
+   * The sponsor of this carousel: the host's `sponsor-id`, else the primary
+   * sponsor of the campaign the slot shows (ADR-0034 — "the campaign of the
+   * block is its sponsor"), else 0 (unknown).
+   */
+  effectiveSponsorId() {
+    if (this.sponsorId > 0) return this.sponsorId;
+    const fromSlot = Number(Vio.campaignForSlot(this.effectiveSlot || null)?.primarySponsor?.id);
+    return Number.isFinite(fromSlot) && fromSlot > 0 ? fromSlot : 0;
+  }
   async autoFetch() {
     if (!Vio.isInitialized) {
       this.fetchError = "Vio not initialized \u2014 call Vio.init({ apiKey }) first";
@@ -650,7 +883,14 @@ var VioProductCarousel = class extends LitElement {
     this.isLoading = true;
     this.fetchError = "";
     try {
-      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId: this.sponsorId, productId: id }));
+      if (this.productRefs.trim() === "" && !this.commerceKey && this.sponsorId <= 0 && !Vio.bootstrapCache) {
+        try {
+          await Vio.bootstrap();
+        } catch {
+        }
+      }
+      const sponsorId = this.effectiveSponsorId();
+      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId, productId: id }));
       if (refs.length === 0) {
         this.fetched = [];
         return;
@@ -662,23 +902,23 @@ var VioProductCarousel = class extends LitElement {
         bySponsor.set(r.sponsorId, arr);
       }
       const fetched = await Promise.all(
-        Array.from(bySponsor.entries()).map(async ([sponsorId, ids]) => {
-          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId);
+        Array.from(bySponsor.entries()).map(async ([sponsorId2, ids]) => {
+          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId2);
           const products = await commerce.channel.product.getByIds({
             product_ids: ids,
             currency: this.currency,
             image_size: "large"
           });
-          return { sponsorId, products };
+          return { sponsorId: sponsorId2, products };
         })
       );
       const lookup = /* @__PURE__ */ new Map();
-      for (const { sponsorId, products } of fetched) {
-        for (const p of products) lookup.set(`${sponsorId}:${p.id}`, p);
+      for (const { sponsorId: sponsorId2, products } of fetched) {
+        for (const p of products) lookup.set(`${sponsorId2}:${p.id}`, p);
       }
-      this.fetched = refs.map(({ sponsorId, productId }) => {
-        const product = lookup.get(`${sponsorId}:${productId}`);
-        return product ? { product, sponsorId } : null;
+      this.fetched = refs.map(({ sponsorId: sponsorId2, productId }) => {
+        const product = lookup.get(`${sponsorId2}:${productId}`);
+        return product ? { product, sponsorId: sponsorId2 } : null;
       }).filter((x) => x !== null);
       this.maybeTrackList();
     } catch (err) {
@@ -695,10 +935,12 @@ var VioProductCarousel = class extends LitElement {
         {
           sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
           componentTemplateId: "product-carousel",
-          locationId: this.label || void 0
+          // The slot is the real location id; the label only stands in for it.
+          locationId: this.effectiveSlot || this.label || void 0,
+          ...this.attribution()
         },
         {
-          key: `carousel:${this.label || this.productIds || this.productRefs || "default"}`,
+          key: `carousel:${this.effectiveSlot || this.label || this.productIds || this.productRefs || "default"}`,
           onImpression: () => {
             this.impressed = true;
             this.maybeTrackList();
@@ -716,14 +958,16 @@ var VioProductCarousel = class extends LitElement {
     if (entries.length === 0) return;
     this.listTracked = true;
     try {
+      const sponsorId = this.effectiveSponsorId();
       Vio.analytics.track("view_item_list", {
         context: {
-          sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+          sponsorId: sponsorId > 0 ? sponsorId : void 0,
           componentTemplateId: "product-carousel",
-          locationId: this.label || void 0
+          locationId: this.effectiveSlot || this.label || void 0,
+          ...this.attribution()
         },
         commerce: {
-          items: entries.map(({ product, sponsorId }) => ({
+          items: entries.map(({ product, sponsorId: sponsorId2 }) => ({
             productId: product.id,
             name: product.title,
             price: Number(product.price?.amount_incl_taxes ?? product.price?.amount) || void 0
@@ -776,6 +1020,9 @@ var VioProductCarousel = class extends LitElement {
             retailer=${retailer}
             image-url=${img}
             ?has-variants=${(p.variants?.length ?? 0) > 1}
+            .vioSlot=${this.effectiveSlot}
+            .vioContentId=${this.vioContentId}
+            .vioContentTitle=${this.vioContentTitle}
           ></vio-product>
         `;
       })}`;
@@ -845,6 +1092,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], VioProductCarousel.prototype, "currency", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot" })
+], VioProductCarousel.prototype, "vioSlot", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot-name" })
+], VioProductCarousel.prototype, "vioSlotName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope" })
+], VioProductCarousel.prototype, "vioScope", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope-name" })
+], VioProductCarousel.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-id" })
+], VioProductCarousel.prototype, "vioContentId", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-title" })
+], VioProductCarousel.prototype, "vioContentTitle", 2);
 __decorateClass([
   query(".scroller")
 ], VioProductCarousel.prototype, "scroller", 2);
@@ -885,6 +1150,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>'
@@ -897,6 +1348,17 @@ var VioProductDetail = class extends LitElement {
     this.sponsorId = 0;
     this.autoOpen = true;
     this.currency = "NOK";
+    this.vioSlot = "";
+    this.vioSlotName = "";
+    this.vioScope = "";
+    this.vioScopeName = "";
+    this.vioContentId = "";
+    this.vioContentTitle = "";
+    this.slotRegistration = new SlotRegistration(this, "detail");
+    /** What the click that opened the detail carried ('' when nothing). */
+    this.eventSlot = "";
+    this.eventContentId = "";
+    this.eventContentTitle = "";
     this.product = null;
     this.sellerName = null;
     this.sellerSettled = false;
@@ -916,13 +1378,27 @@ 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;
       const productIdNum = parseInt(ev.detail.productId, 10);
       if (Number.isNaN(productIdNum)) return;
-      const sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
-      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) return;
+      const slot = typeof ev.detail.slot === "string" ? ev.detail.slot.trim() : "";
+      let sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
+      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) {
+        const fromSlot = Number(Vio.campaignForSlot(slot || this.effectiveSlot || null)?.primarySponsor?.id);
+        if (!Number.isFinite(fromSlot) || fromSlot <= 0) return;
+        sponsorIdNum = fromSlot;
+      }
+      this.eventSlot = slot;
+      this.eventContentId = ev.detail.contentId !== void 0 && ev.detail.contentId !== null ? String(ev.detail.contentId).trim() : "";
+      this.eventContentTitle = typeof ev.detail.contentTitle === "string" ? ev.detail.contentTitle.trim() : "";
       this.productId = ev.detail.productId;
       this.sponsorId = sponsorIdNum;
       this.currency = ev.detail.currency || getGlobalCurrency();
@@ -930,6 +1406,33 @@ var VioProductDetail = class extends LitElement {
       void this.fetchProduct();
     };
   }
+  /** The slot id in effect for this element: `vio-slot`, else the auto id (`detail-N`). Read-only. */
+  get effectiveSlot() {
+    return this.slotRegistration.effective;
+  }
+  /** The slot the open product is attributed to: the opening card's, else this element's. */
+  get activeSlot() {
+    return this.eventSlot || this.effectiveSlot;
+  }
+  slotAttributes() {
+    return {
+      vioSlot: this.vioSlot,
+      vioSlotName: this.vioSlotName,
+      vioScope: this.vioScope,
+      vioScopeName: this.vioScopeName
+    };
+  }
+  /** Attribution every event of the open product carries (`Vio.attribution` of the opening card's slot, else this element's). */
+  attribution() {
+    const base = Vio.attribution(this.activeSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 });
+    const contentId = this.eventContentId || this.vioContentId;
+    const contentTitle = this.eventContentTitle || this.vioContentTitle;
+    return {
+      ...base,
+      ...contentId ? { contentId } : {},
+      ...contentTitle ? { contentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host { display: contents; }
@@ -959,6 +1462,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 +1472,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 +1486,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 +1851,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; }
@@ -1375,13 +1880,21 @@ var VioProductDetail = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.slotRegistration.connect(this.slotAttributes());
     void this.loadVippsButton();
     document.addEventListener("vio:product-click", this.boundProductClick);
   }
   disconnectedCallback() {
     document.removeEventListener("vio:product-click", this.boundProductClick);
+    this.slotRegistration.clear();
     super.disconnectedCallback();
   }
+  updated(changed) {
+    if (changed.has("open")) this.dialogFocus.update(this.open);
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+      this.slotRegistration.sync(this.slotAttributes());
+    }
+  }
   show() {
     this.open = true;
   }
@@ -1447,7 +1960,8 @@ var VioProductDetail = class extends LitElement {
         Vio.analytics.track("view_item", {
           context: {
             sponsorId: this.sponsorId > 0 ? Number(this.sponsorId) : void 0,
-            componentTemplateId: "product-detail"
+            componentTemplateId: "product-detail",
+            ...this.attribution()
           },
           commerce: {
             items: [
@@ -1487,7 +2001,7 @@ var VioProductDetail = class extends LitElement {
   }
   /** Which buy buttons to render — backend-configured per sponsor. */
   async loadAvailablePaymentMethods() {
-    const spId = this.sponsorId || globalThis.__VIO_SPONSOR_ID__;
+    const spId = this.sponsorId || Number(Vio.campaignForSlot(this.activeSlot || null)?.primarySponsor?.id) || globalThis.__VIO_SPONSOR_ID__;
     if (!spId) return;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
@@ -1769,12 +2283,14 @@ var VioProductDetail = class extends LitElement {
     const sponsor = Vio.bootstrapCache?.primarySponsor;
     const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
     const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
+    const { campaignId, slot, contentId } = this.attribution();
     Vio.cart.addProduct({
       product: this.product,
       sponsorId: this.sponsorId,
       sponsorName,
       quantity: this.quantity,
-      variantId: variant?.id
+      variantId: variant?.id,
+      origin: { campaignId, slot, contentId }
     });
     return variant?.id;
   }
@@ -1791,7 +2307,8 @@ var VioProductDetail = class extends LitElement {
             productId: this.product.id,
             sponsorId: this.sponsorId,
             quantity: this.quantity,
-            variantId
+            variantId,
+            ...this.attribution()
           }
         })
       );
@@ -1816,7 +2333,7 @@ var VioProductDetail = class extends LitElement {
         new CustomEvent("vio:checkout-open", {
           bubbles: true,
           composed: true,
-          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true }
+          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true, ...this.attribution() }
         })
       );
     } finally {
@@ -1846,7 +2363,7 @@ var VioProductDetail = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, express: false }
+        detail: { sponsorId: this.sponsorId, express: false, ...this.attribution() }
       })
     );
   }
@@ -1882,7 +2399,7 @@ var VioProductDetail = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false }
+        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false, ...this.attribution() }
       })
     );
   }
@@ -1895,7 +2412,7 @@ var VioProductDetail = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, paymentMethod: "stripe", express: false }
+        detail: { sponsorId: this.sponsorId, paymentMethod: "stripe", express: false, ...this.attribution() }
       })
     );
   }
@@ -1938,7 +2455,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>
@@ -2178,6 +2695,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], VioProductDetail.prototype, "currency", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot" })
+], VioProductDetail.prototype, "vioSlot", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-slot-name" })
+], VioProductDetail.prototype, "vioSlotName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope" })
+], VioProductDetail.prototype, "vioScope", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-scope-name" })
+], VioProductDetail.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-id" })
+], VioProductDetail.prototype, "vioContentId", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-content-title" })
+], VioProductDetail.prototype, "vioContentTitle", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "product", 2);
@@ -2247,6 +2782,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 +2830,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 +2844,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 +2859,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 +2952,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 +3009,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 +3031,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 +3052,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 +3076,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 +3214,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;
@@ -2795,6 +3339,7 @@ var VioCart = class extends LitElement {
   async startVippsExpressOrCheckout(sponsorId) {
     let fallback = true;
     try {
+      await Vio.cart.waitForCartMutations(sponsorId);
       if (!await Vio.checkout.getVippsExpressEnabled(sponsorId)) throw new Error("express off");
       const res = await Vio.checkout.startVippsExpress(sponsorId);
       fallback = !res?.payment_url;
@@ -2836,11 +3381,14 @@ var VioCart = class extends LitElement {
     for (const cart of this.carts.values()) return cart.currency;
     return "NOK";
   }
+  // A delta on the manager's live quantity, not a target computed from this
+  // render's snapshot: two clicks before Lit re-renders used to ask for the
+  // same quantity twice (Alan, 2026-10-15).
   onIncrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
+    Vio.cart.adjustQuantity(item.id, item.sponsorId, 1);
   }
   onDecrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
+    Vio.cart.adjustQuantity(item.id, item.sponsorId, -1);
   }
   onRemove(item) {
     Vio.cart.removeItem(item.id, item.sponsorId);
@@ -2850,7 +3398,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 +3592,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 +3735,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 +3823,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 +3862,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 +4493,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 +4526,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 +4599,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 +4645,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 +4701,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 +4802,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 +4870,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 +5129,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 +5312,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 +5323,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 +5361,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 +5382,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 +5497,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 +5535,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 +5713,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 +5833,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 +5890,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 +5965,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 +6152,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 +6262,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 +6284,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 +6313,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 +6341,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 +7007,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-NUNGU6LL.js.map
-//# sourceMappingURL=chunk-NUNGU6LL.js.map
+//# sourceMappingURL=chunk-COCHGJ2K.js.map
+//# sourceMappingURL=chunk-COCHGJ2K.js.map