@vio-live/web-sdk 0.21.0 → 0.23.1

package/dist/{chunk-MRJR6DG5.js → chunk-UVDOKFGD.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-WTVGVDZX.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, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope } from './chunk-BRJMT7P4.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -165,6 +165,141 @@ 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 liveAutoIds = (() => {
+  const g = globalThis;
+  return g.__VIO_LIVE_SLOT_IDS__ ?? (g.__VIO_LIVE_SLOT_IDS__ = /* @__PURE__ */ new Map());
+})();
+var SlotRegistration = class {
+  constructor(host, kind) {
+    this.host = host;
+    this.kind = kind;
+    this.identity = null;
+    this.release = null;
+    /** The auto identity held (its number is kept while the element lives). */
+    this.auto = null;
+    /** Set by connect(); the scope label is read then too. */
+    this.connected = false;
+    this.scope = "";
+    this.scopeName = "";
+  }
+  /** The effective slot id ('' before connect / after disconnect). */
+  get effective() {
+    return this.identity?.id ?? "";
+  }
+  /** On connect: read the scope from the DOM, then register. */
+  connect(attrs) {
+    this.connected = true;
+    this.scope = scopeOf(this.host, attrs);
+    this.scopeName = scopeNameOf(this.host, attrs);
+    this.sync(attrs);
+  }
+  /** (Re)register when the attributes changed the identity. */
+  sync(attrs) {
+    if (!this.connected) return;
+    const scope = scopeOf(this.host, attrs);
+    if (scope !== this.scope) {
+      this.scope = scope;
+      this.scopeName = scopeNameOf(this.host, attrs);
+      this.releaseAuto();
+    } else {
+      const scopeName = scopeNameOf(this.host, attrs);
+      if (scopeName !== this.scopeName) this.scopeName = scopeName;
+    }
+    const next = this.resolve(attrs);
+    if (sameIdentity(next, this.identity)) return;
+    this.unregister();
+    if (!next) return;
+    try {
+      this.release = typeof Vio.registerSlot === "function" ? Vio.registerSlot(next.id, next.displayName) : null;
+      this.identity = next;
+    } catch {
+      this.release = null;
+      this.identity = null;
+    }
+  }
+  /** What the identity is for these attributes (null before connect without a host id). */
+  resolve(attrs) {
+    const explicit = normalizeSlotId(attrs.vioSlot);
+    const name = typeof attrs.vioSlotName === "string" && attrs.vioSlotName.trim() ? attrs.vioSlotName.trim() : void 0;
+    if (explicit) {
+      this.releaseAuto();
+      return { id: explicit, displayName: name };
+    }
+    if (!this.connected) return null;
+    const auto = this.claimAuto();
+    return { id: auto.id, displayName: name ?? autoSlotDisplayName(this.kind, auto.number - 1, this.scopeName) };
+  }
+  /** Unregister whatever is registered and free the auto number. */
+  clear() {
+    this.unregister();
+    this.releaseAuto();
+    this.connected = false;
+  }
+  unregister() {
+    try {
+      this.release?.();
+    } catch {
+    }
+    this.release = null;
+    this.identity = null;
+  }
+  /** The element's auto id: the one it already holds, else the first free number. */
+  claimAuto() {
+    if (this.auto && this.auto.scope === this.scope) return this.auto;
+    this.releaseAuto();
+    for (let number = 1; ; number++) {
+      const id = autoSlotId(this.kind, number - 1, this.scope);
+      const holders = liveAutoIds.get(id);
+      if (!holders || holders.size === 0 || holders.size === 1 && holders.has(this.host)) {
+        const set = holders ?? /* @__PURE__ */ new Set();
+        set.add(this.host);
+        liveAutoIds.set(id, set);
+        this.auto = { id, scope: this.scope, number };
+        return this.auto;
+      }
+    }
+  }
+  releaseAuto() {
+    if (!this.auto) return;
+    const holders = liveAutoIds.get(this.auto.id);
+    holders?.delete(this.host);
+    if (holders && holders.size === 0) liveAutoIds.delete(this.auto.id);
+    this.auto = 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) ?? "";
+  return normalizeScope(own) || normalizeScope(closestAcrossShadow(el, `[${SCOPE_DATA_ATTR}]`)?.getAttribute(SCOPE_DATA_ATTR));
+}
+function scopeNameOf(el, attrs) {
+  const own = attrs && typeof attrs.vioScopeName === "string" ? attrs.vioScopeName : typeof el.vioScopeName === "string" ? el.vioScopeName ?? "" : el.getAttribute(SCOPE_NAME_ATTR) ?? "";
+  return own.trim() || (closestAcrossShadow(el, `[${SCOPE_NAME_DATA_ATTR}]`)?.getAttribute(SCOPE_NAME_DATA_ATTR) ?? "").trim();
+}
+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 +310,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 +326,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 = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot).sponsorId : void 0;
+    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 = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId || void 0 }) : { slot: this.effectiveSlot || void 0 };
+    return {
+      ...base,
+      ...this.vioContentId ? { contentId: this.vioContentId } : {},
+      ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host {
@@ -297,14 +469,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 +507,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 +534,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 +623,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 +675,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 +693,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 = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 }) : { slot: this.effectiveSlot || void 0 };
+    return {
+      ...base,
+      ...this.vioContentId ? { contentId: this.vioContentId } : {},
+      ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host {
@@ -626,6 +861,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 +870,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 = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.effectiveSlot || null)?.primarySponsor?.id) : NaN;
+    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 +900,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 +919,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 +952,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 +975,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 +1037,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 +1109,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);
@@ -1083,6 +1365,18 @@ 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), and for which product. */
+    this.eventSlot = "";
+    this.eventContentId = "";
+    this.eventContentTitle = "";
+    this.eventProductId = "";
     this.product = null;
     this.sellerName = null;
     this.sellerSettled = false;
@@ -1113,8 +1407,17 @@ var VioProductDetail = class extends LitElement {
       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 = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(slot || this.effectiveSlot || null)?.primarySponsor?.id) : NaN;
+        if (!Number.isFinite(fromSlot) || fromSlot <= 0) return;
+        sponsorIdNum = fromSlot;
+      }
+      this.eventSlot = slot;
+      this.eventProductId = String(ev.detail.productId);
+      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();
@@ -1122,6 +1425,37 @@ var VioProductDetail = class extends LitElement {
       void this.fetchProduct();
     };
   }
+  /** The card's context applies to the product it opened — not to one the host opened by hand later. */
+  get fromCard() {
+    return this.eventProductId !== "" && this.eventProductId === String(this.productId);
+  }
+  /** 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.fromCard && 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 = typeof Vio.attribution === "function" ? Vio.attribution(this.activeSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 }) : { slot: this.activeSlot || void 0 };
+    const contentId = this.fromCard && this.eventContentId || this.vioContentId;
+    const contentTitle = this.fromCard && this.eventContentTitle || this.vioContentTitle;
+    return {
+      ...base,
+      ...contentId ? { contentId } : {},
+      ...contentTitle ? { contentTitle } : {}
+    };
+  }
   static {
     this.styles = css`
     :host { display: contents; }
@@ -1569,15 +1903,20 @@ 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;
@@ -1586,6 +1925,10 @@ var VioProductDetail = class extends LitElement {
     this.open = false;
     setTimeout(() => {
       if (!this.open) {
+        this.eventSlot = "";
+        this.eventContentId = "";
+        this.eventContentTitle = "";
+        this.eventProductId = "";
         this.product = null;
         this.sellerName = null;
         this.sellerSettled = false;
@@ -1644,7 +1987,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: [
@@ -1684,7 +2028,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 || (typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.activeSlot || null)?.primarySponsor?.id) : 0) || globalThis.__VIO_SPONSOR_ID__;
     if (!spId) return;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
@@ -1966,12 +2310,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;
   }
@@ -1988,7 +2334,8 @@ var VioProductDetail = class extends LitElement {
             productId: this.product.id,
             sponsorId: this.sponsorId,
             quantity: this.quantity,
-            variantId
+            variantId,
+            ...this.attribution()
           }
         })
       );
@@ -2013,7 +2360,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 {
@@ -2043,7 +2390,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() }
       })
     );
   }
@@ -2079,7 +2426,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() }
       })
     );
   }
@@ -2092,7 +2439,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() }
       })
     );
   }
@@ -2375,6 +2722,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);
@@ -3001,6 +3366,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;
@@ -3042,11 +3408,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);
@@ -6665,5 +7034,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-MRJR6DG5.js.map
-//# sourceMappingURL=chunk-MRJR6DG5.js.map
+//# sourceMappingURL=chunk-UVDOKFGD.js.map
+//# sourceMappingURL=chunk-UVDOKFGD.js.map