@lime-bundles/widget 4.2.0 → 4.4.0

package/README.md

@@ -58,6 +58,7 @@ document.querySelector("lime-bundle").addEventListener(
 | `storefront-token` | ✓ | Storefront Access Token from `/app/settings/headless`. |
 | `bundle-gid` |  | Render one specific bundle. Overrides auto-detect. |
 | `product-handle` |  | Render bundles for this handle. Overrides URL detection. |
+| `product-id` |  | The product this embed is standing on — full GID or bare numeric id. Volume bundles price and sell this product; falls back to the handle cascade, then the bundle's first product. |
 | `app-url` |  | Enables impression + add-to-cart analytics when set. |
 | `analytics` |  | `"false"` suppresses analytics even when `app-url` is set. |
 | `locale` |  | BCP-47 tag forwarded to the Storefront API. |
@@ -67,6 +68,8 @@ document.querySelector("lime-bundle").addEventListener(
 
 **Product resolution** (when `bundle-gid` is absent): explicit `product-handle` → `<meta name="shopify:product-handle">` → `/products/<handle>` URL segment.
 
+**Multi-product binding**: a volume bundle can span several products, and the widget prices and sells the one the shopper is looking at: explicit `product-id` → the handle cascade above → the bundle's first product. On a pinned `bundle-gid` embed outside a `/products/<handle>` URL, set `product-id` (or `product-handle`) or the first product is what gets sold.
+
 Changing any attribute at runtime re-fetches and re-renders.
 
 ### B2B buyer identity (programmatic property only)

package/dist/index.cjs

@@ -28,6 +28,28 @@ module.exports = __toCommonJS(index_exports);
 // src/lime-bundle.ts
 var import_core6 = require("@lime-bundles/core");
 
+// ../render/src/host.ts
+function intlFormatMoney(currencyCode) {
+  return (cents) => {
+    try {
+      return new Intl.NumberFormat(void 0, {
+        style: "currency",
+        currency: currencyCode
+      }).format(cents / 100);
+    } catch {
+      return currencyCode + " " + (cents / 100).toFixed(2);
+    }
+  };
+}
+var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
+var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
+function bundleLineAttributes(bundleGid, bundleType) {
+  return [
+    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
+    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
+  ];
+}
+
 // ../render/src/adapt.ts
 var import_core = require("@lime-bundles/core");
 function numericId(gid) {
@@ -40,6 +62,14 @@ function toCents(amount) {
   const n = parseFloat(amount);
   return Number.isFinite(n) ? Math.round(n * 100) : 0;
 }
+function imageAspectRatio(image) {
+  const w = image?.width;
+  const h = image?.height;
+  if (typeof w !== "number" || typeof h !== "number" || w <= 0 || h <= 0) {
+    return null;
+  }
+  return w / h;
+}
 function adaptVariant(v, requiredQty, fallbackCurrency) {
   return {
     id: numericId(v.id),
@@ -81,6 +111,7 @@ function adaptProduct(product, bundleId, opts) {
     title: product.title,
     url: product.handle ? "/products/" + product.handle : null,
     featuredImage: product.featuredImage?.url ?? null,
+    featuredImageRatio: imageAspectRatio(product.featuredImage),
     quantity: productQty,
     selectedVariantId: initial ? initial.id : "",
     // Option names come off a variant, since the Storefront product query
@@ -230,28 +261,6 @@ function recalcPricing(container, products, formatMoney) {
   }
 }
 
-// ../render/src/host.ts
-function intlFormatMoney(currencyCode) {
-  return (cents) => {
-    try {
-      return new Intl.NumberFormat(void 0, {
-        style: "currency",
-        currency: currencyCode
-      }).format(cents / 100);
-    } catch {
-      return currencyCode + " " + (cents / 100).toFixed(2);
-    }
-  };
-}
-var BUNDLE_GID_ATTRIBUTE = "_lime_bundle_gid";
-var BUNDLE_TYPE_ATTRIBUTE = "_lime_bundle_type";
-function bundleLineAttributes(bundleGid, bundleType) {
-  return [
-    { key: BUNDLE_GID_ATTRIBUTE, value: bundleGid },
-    { key: BUNDLE_TYPE_ATTRIBUTE, value: bundleType }
-  ];
-}
-
 // ../render/src/product/option-selects.ts
 function bindVariantSelects(row, getProduct, onSelected) {
   const optionSelects = row.querySelectorAll("[data-variant-option]");
@@ -447,7 +456,12 @@ function buildRowSkeleton(product, t, opts) {
   }
   row.setAttribute("data-product-id", String(product.productId));
   if (opts.bogoRole) row.setAttribute("data-bogo-role", opts.bogoRole);
-  row.appendChild(box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" }));
+  const thumb = box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
+  const ratio = product.featuredImageRatio;
+  if (opts.thumbnailRatio === "original" && ratio != null && ratio > 0) {
+    thumb.style.setProperty("--lb-row-thumb-ratio", String(ratio));
+  }
+  row.appendChild(thumb);
   const info = box("div", "lb-bundle-product-info");
   const title = document.createElement(opts.href ? "a" : "span");
   title.className = "lb-bundle-product-name";
@@ -756,6 +770,16 @@ var DEFAULT_STRINGS = {
   chooseMoreComplete: "Choose __COUNT__ more to complete your bundle",
   stepOf: "Step __STEP__ of __TOTAL__",
   stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
+  doorChoose: "Choose your products",
+  doorContinue: "Continue building",
+  doorQuickSteps: {
+    one: "__COUNT__ quick step",
+    other: "__COUNT__ quick steps"
+  },
+  doorStepsToGo: {
+    one: "__COUNT__ step to go",
+    other: "__COUNT__ steps to go"
+  },
   each: " each",
   buyQty: "Buy __COUNT__",
   itemCount: {
@@ -1213,7 +1237,8 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
     const isOos = !product.variants.some((v) => v.available);
     const row = buildRowSkeleton(product, t, {
       isOos,
-      href: product.url
+      href: product.url,
+      thumbnailRatio: wc.productList?.thumbnailRatio
     });
     shell.products.appendChild(row);
     if (isOos) continue;
@@ -2939,9 +2964,9 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
 }
 
 // src/renderers/volume.ts
-function renderVolumeBundle(container, bundle, onAddToCart) {
+function renderVolumeBundle(container, bundle, onAddToCart, productContext) {
   const wc = bundle.widgetConfig;
-  const product = bundle.products[0];
+  const product = (0, import_core4.resolveContextProduct)(bundle.products, productContext);
   if (!product) return;
   const variants = product.variants.nodes;
   const minTierQty = Math.min(
@@ -3212,7 +3237,8 @@ function renderBogoBundle(container, bundle, onAddToCart, onCleanup) {
       href: side.url,
       bogoRole: side.role,
       inlineQuantity: isGet ? getQty : buyQty,
-      badgeText: isGet && !isOos ? badgeText : null
+      badgeText: isGet && !isOos ? badgeText : null,
+      thumbnailRatio: wc.productList?.thumbnailRatio
     });
     shell.products.appendChild(row);
     if (isOos) return;
@@ -3278,6 +3304,32 @@ function stepsCompletedLabel(completed, total, t) {
 function moreToGoLabel(remaining, t) {
   return remaining > 0 ? fill(t.moreToGo || "__COUNT__ more to go", { COUNT: remaining }) : t.complete || "Complete";
 }
+function fillPlural(map, count, locale) {
+  const form = new Intl.PluralRules(locale || "en").select(count);
+  return fill(map[form] || map.other || "__COUNT__", { COUNT: count });
+}
+function doorLabel(anyPicks, t) {
+  return anyPicks ? t.doorContinue || "Continue building" : t.doorChoose || "Choose your products";
+}
+function doorSubLabel(anyPicks, remaining, total, t) {
+  if (!anyPicks) {
+    const quick = t.doorQuickSteps;
+    if (typeof quick === "string") return fill(quick, { COUNT: total });
+    return fillPlural(
+      quick || { one: "__COUNT__ quick step", other: "__COUNT__ quick steps" },
+      total,
+      t.locale
+    );
+  }
+  return fillPlural(
+    t.doorStepsToGo || {
+      one: "__COUNT__ step to go",
+      other: "__COUNT__ steps to go"
+    },
+    remaining,
+    t.locale
+  );
+}
 
 // ../render/src/multi-step/rules.ts
 function unitsInStep(selections, i) {
@@ -3339,20 +3391,28 @@ function updateStepGroups(deps) {
   const { container, steps, selections, t } = deps;
   for (let i = 0; i < steps.length; i++) {
     const min = steps[i].minQuantity || 1;
-    const countEl = container.querySelector(
-      '[data-step-count="' + i + '"]'
+    const section = container.querySelector(
+      '[data-step-group="' + i + '"]'
     );
-    if (countEl) {
-      countEl.textContent = ofSelectedLabel(
-        Math.min(unitsInStep(selections, i), min),
-        min,
-        t
-      );
-      countEl.classList.toggle(
-        "lb-multi-step__group-count--met",
-        stepSatisfied(selections, steps, i)
+    if (section) {
+      section.setAttribute(
+        "data-step-mode",
+        selections[i].length > 0 ? "open" : "row"
       );
     }
+    const countLabel = ofSelectedLabel(
+      Math.min(unitsInStep(selections, i), min),
+      min,
+      t
+    );
+    const met = stepSatisfied(selections, steps, i);
+    const countEls = container.querySelectorAll(
+      '[data-step-count="' + i + '"]'
+    );
+    for (let c = 0; c < countEls.length; c++) {
+      countEls[c].textContent = countLabel;
+      countEls[c].classList.toggle("lb-multi-step__group-count--met", met);
+    }
     const slotsWrap = container.querySelector(
       '[data-step-slots="' + i + '"]'
     );
@@ -3374,14 +3434,50 @@ function updateStepGroups(deps) {
       );
     }
   }
-  for (let ti = 0; ti < steps.length; ti++) {
-    const trigger = container.querySelector(
-      '[data-step-trigger="' + ti + '"]'
-    );
-    if (trigger) {
-      trigger.style.display = stepHeadroom(selections, steps, ti) === 0 ? "none" : "";
+}
+function updateDoor(deps) {
+  const { container, steps, selections, t } = deps;
+  const door = container.querySelector("[data-step-door]");
+  if (!door) return;
+  let firstUnsatisfied = -1;
+  let remaining = 0;
+  let anyPicks = false;
+  for (let i = 0; i < steps.length; i++) {
+    if (selections[i].length > 0) anyPicks = true;
+    if (!stepSatisfied(selections, steps, i)) {
+      remaining += 1;
+      if (firstUnsatisfied === -1) firstUnsatisfied = i;
     }
   }
+  if (firstUnsatisfied === -1) {
+    door.style.display = "none";
+    door.classList.add("lb-multi-step__door--hidden");
+    const parent = door.parentElement;
+    if (parent && parent.firstElementChild !== door) {
+      parent.insertBefore(door, parent.firstElementChild);
+    }
+    return;
+  }
+  door.style.display = "";
+  door.classList.remove("lb-multi-step__door--hidden");
+  door.setAttribute("data-step-door", String(firstUnsatisfied));
+  const label = doorLabel(anyPicks, t);
+  const labelEl = door.querySelector(
+    ".lb-mix-match__add-product-label"
+  );
+  if (labelEl) labelEl.textContent = label;
+  const subEl = door.querySelector(".lb-multi-step__door-sub");
+  if (subEl) {
+    subEl.textContent = doorSubLabel(anyPicks, remaining, steps.length, t);
+  }
+  const stepName = steps[firstUnsatisfied].name || "";
+  door.setAttribute("aria-label", stepName ? label + ": " + stepName : label);
+  const target = container.querySelector(
+    '[data-step-group="' + firstUnsatisfied + '"]'
+  );
+  if (target && target.parentElement && target.previousElementSibling !== door) {
+    target.parentElement.insertBefore(door, target);
+  }
 }
 function updatePricing3(deps, data, calcDiscount, paint) {
   const { container, steps, selections } = deps;
@@ -3825,10 +3921,12 @@ function createWizard(deps) {
     setTimeout(() => {
       if (!modalOpen) overlay.style.display = "none";
     }, CLOSE_TRANSITION_MS2);
-    const stepTrigger = container.querySelector(
-      '[data-step-trigger="' + stepIndex + '"]'
-    );
-    const elToFocus = stepTrigger && stepTrigger.offsetParent !== null ? stepTrigger : deps.ctaButton;
+    const visible = (el2) => el2 && el2.offsetParent !== null ? el2 : null;
+    const elToFocus = visible(
+      container.querySelector(
+        '[data-step-row="' + stepIndex + '"]'
+      )
+    ) || visible(container.querySelector("[data-step-door]")) || deps.ctaButton;
     if (elToFocus && typeof elToFocus.focus === "function") {
       setTimeout(() => elToFocus.focus(), 0);
     }
@@ -3881,6 +3979,29 @@ function createWizard(deps) {
 }
 
 // src/renderers/multi-step.ts
+function buildPlusIcon() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("width", "18");
+  svg.setAttribute("height", "18");
+  svg.setAttribute("viewBox", "0 0 18 18");
+  svg.setAttribute("fill", "none");
+  for (const [x1, y1, x2, y2] of [
+    ["9", "3", "9", "15"],
+    ["3", "9", "15", "9"]
+  ]) {
+    const line = document.createElementNS(NS, "line");
+    line.setAttribute("x1", x1);
+    line.setAttribute("y1", y1);
+    line.setAttribute("x2", x2);
+    line.setAttribute("y2", y2);
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    svg.appendChild(line);
+  }
+  return svg;
+}
 function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const t = DEFAULT_STRINGS;
@@ -3935,31 +4056,65 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   shell.products.before(buildProgressBar(steps.length));
   const groups = document.createElement("div");
   groups.className = "lb-multi-step__groups";
+  groups.setAttribute("data-step-groups", "");
+  const door = document.createElement("button");
+  door.type = "button";
+  door.className = "lb-mix-match__add-product lb-multi-step__door";
+  door.setAttribute("data-step-door", "0");
+  const doorIcon = document.createElement("span");
+  doorIcon.className = "lb-mix-match__add-product-icon";
+  doorIcon.setAttribute("aria-hidden", "true");
+  doorIcon.appendChild(buildPlusIcon());
+  door.appendChild(doorIcon);
+  const doorCopy = document.createElement("span");
+  doorCopy.className = "lb-multi-step__door-copy";
+  const doorLabel2 = document.createElement("span");
+  doorLabel2.className = "lb-mix-match__add-product-label";
+  doorCopy.appendChild(doorLabel2);
+  const doorSub = document.createElement("span");
+  doorSub.className = "lb-multi-step__door-sub";
+  doorCopy.appendChild(doorSub);
+  door.appendChild(doorCopy);
+  groups.appendChild(door);
   steps.forEach((step, i) => {
-    const group = document.createElement("div");
+    const group = document.createElement("section");
     group.className = "lb-multi-step__group";
     group.setAttribute("data-step-group", String(i));
+    group.setAttribute("data-step-mode", "row");
+    const buildCount = () => {
+      const count = document.createElement("span");
+      count.className = "lb-multi-step__group-count";
+      count.setAttribute("data-step-count", String(i));
+      return count;
+    };
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "lb-multi-step__step-row";
+    row.setAttribute("data-step-row", String(i));
+    row.setAttribute("aria-label", "Choose products: " + step.name);
+    const ix = document.createElement("span");
+    ix.className = "lb-multi-step__step-ix";
+    ix.setAttribute("aria-hidden", "true");
+    ix.textContent = String(i + 1);
+    row.appendChild(ix);
+    const rowName = document.createElement("span");
+    rowName.className = "lb-multi-step__group-name";
+    rowName.textContent = step.name;
+    row.appendChild(rowName);
+    row.appendChild(buildCount());
+    group.appendChild(row);
     const heading = document.createElement("div");
     heading.className = "lb-multi-step__group-heading";
     const name = document.createElement("span");
     name.className = "lb-multi-step__group-name";
     name.textContent = step.name;
     heading.appendChild(name);
-    const count = document.createElement("span");
-    count.className = "lb-multi-step__group-count";
-    count.setAttribute("data-step-count", String(i));
-    heading.appendChild(count);
+    heading.appendChild(buildCount());
     group.appendChild(heading);
     const slots = document.createElement("div");
-    slots.className = "lb-mix-match__slots lb-edge-fade";
+    slots.className = "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots";
     slots.setAttribute("data-step-slots", String(i));
     group.appendChild(slots);
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "lb-mix-match__add-product";
-    trigger.setAttribute("data-step-trigger", String(i));
-    trigger.textContent = "Add a product";
-    group.appendChild(trigger);
     groups.appendChild(group);
   });
   shell.products.replaceWith(groups);
@@ -3996,6 +4151,7 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   };
   function updateAll() {
     updateStepGroups(bodyDeps);
+    updateDoor(bodyDeps);
     updatePricing3(
       bodyDeps,
       {
@@ -4042,10 +4198,14 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
     },
     canRemove: (item) => canRemovePick2(selections, item, rulesMap)
   });
-  shell.root.querySelectorAll("[data-step-trigger]").forEach((el2) => {
+  door.addEventListener("click", () => {
+    if (wizard.isOpen()) return;
+    wizard.open(parseInt(door.getAttribute("data-step-door") ?? "", 10) || 0);
+  });
+  shell.root.querySelectorAll("[data-step-row]").forEach((el2) => {
     el2.addEventListener("click", () => {
       if (wizard.isOpen()) return;
-      wizard.open(parseInt(el2.getAttribute("data-step-trigger") ?? "", 10) || 0);
+      wizard.open(parseInt(el2.getAttribute("data-step-row") ?? "", 10) || 0);
     });
   });
   shell.cta.addEventListener("click", () => {
@@ -6239,12 +6399,19 @@ var BUNDLE_MULTI_STEP_CSS = `/**
  * Canon: WIDGET-DESIGN.md (spacing scale, radius system, chip family).
  */
 
-/* \u2500\u2500 Step groups (widget body) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Step groups (widget body) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   One dashed door + one section per step. A step without picks shows a
+   slim checklist row; a step with picks shows the heading + chosen
+   cards. data-step-mode ("row" | "open") on the section picks the
+   representation \u2014 both are in the markup, CSS hides the other, so the
+   server-rendered untouched state IS the hydrated no-selection state.
+   Spacing is per-pair rather than a flat gap: consecutive rows sit
+   flush (hairline-separated), everything else breathes 16px. */
 
 .lb-multi-step__groups {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
 }
 
 .lb-multi-step__group {
@@ -6253,8 +6420,117 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   gap: 8px;
 }
 
+.lb-multi-step__group + .lb-multi-step__group {
+  margin-top: 16px;
+}
+
+/* A run of empty-step rows reads as one checklist: flush, hairlines
+   between (the first row of a run keeps no border). */
+.lb-multi-step__group[data-step-mode="row"] + .lb-multi-step__group[data-step-mode="row"] {
+  margin-top: 0;
+}
+
+.lb-multi-step__group[data-step-mode="row"]
+  + .lb-multi-step__group[data-step-mode="row"]
+  .lb-multi-step__step-row {
+  border-top: var(--lb-border-width) solid var(--lb-border);
+}
+
+/* Mode switch: a row-mode step hides its open chrome and vice versa. */
+.lb-multi-step__group[data-step-mode="row"] .lb-multi-step__group-heading,
+.lb-multi-step__group[data-step-mode="row"] .lb-multi-step__group-slots {
+  display: none;
+}
+
+.lb-multi-step__group[data-step-mode="open"] .lb-multi-step__step-row {
+  display: none;
+}
+
+/* Checklist row \u2014 the empty step's whole representation, and a tap
+   target that deep-links the wizard to that step. Quiet by design: the
+   door above it is the primary action. */
+.lb-multi-step__step-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 10px 2px;
+  background: none;
+  border: none;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background-color 0.25s ease;
+}
+
+.lb-multi-step__step-row:hover {
+  background: color-mix(in srgb, var(--lb-text) 3%, transparent);
+}
+
+.lb-multi-step__step-row:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: -2px;
+  border-radius: var(--lb-radius-sm);
+}
+
+.lb-multi-step__step-row .lb-multi-step__group-count {
+  margin-left: auto;
+}
+
+/* Step number \u2014 quiet index, tabular so multi-digit lists align. */
+.lb-multi-step__step-ix {
+  width: 18px;
+  min-width: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--lb-text) 45%, transparent);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The door \u2014 the single wizard entry point, reusing the dashed
+   add-product recipe with a two-line label. JS moves it directly above
+   the first unsatisfied step and hides it once every step is met. The
+   add-product recipe's own margin-top is for its mix & match position
+   (below the slot list); here the pair rules own all spacing. */
+.lb-multi-step__door {
+  margin-top: 0;
+}
+
+.lb-multi-step__door + .lb-multi-step__group {
+  margin-top: 12px;
+}
+
+.lb-multi-step__door + .lb-multi-step__group[data-step-mode="row"] {
+  margin-top: 4px;
+}
+
+.lb-multi-step__group + .lb-multi-step__door {
+  margin-top: 16px;
+}
+
+/* A hidden door is parked as the container's first child (updateDoor), so
+   the group after it is really the first visible element \u2014 no door gap. */
+.lb-multi-step__door--hidden:first-child + .lb-multi-step__group {
+  margin-top: 0;
+}
+
+.lb-multi-step__door-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lb-multi-step__door-sub {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--lb-text) 55%, transparent);
+}
+
 /* Heading is a quiet, non-interactive row: step name left, live count
-   chip right. The step's dashed trigger below is the click target. */
+   chip right. The step's chosen cards below are the edit targets. */
 .lb-multi-step__group-heading {
   display: flex;
   align-items: center;
@@ -6737,6 +7013,7 @@ var LimeBundleElement = class extends HTMLElement {
     "storefront-token",
     "bundle-gid",
     "product-handle",
+    "product-id",
     "app-url",
     "analytics",
     "locale",
@@ -6797,7 +7074,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.isConnected) return;
-    if (name === "bundle-gid" || name === "product-handle" || name === "shop-domain" || name === "storefront-token") {
+    if (name === "bundle-gid" || name === "product-handle" || name === "product-id" || name === "shop-domain" || name === "storefront-token") {
       if (this.shopDomain && this.storefrontToken) {
         this.fetchBundle();
       }
@@ -6815,6 +7092,16 @@ var LimeBundleElement = class extends HTMLElement {
   get productHandleAttr() {
     return this.getAttribute("product-handle") ?? "";
   }
+  /**
+   * The current product's id — full GID (`gid://shopify/Product/123`) or
+   * bare numeric id. Tells multi-product renderers (volume) which of the
+   * bundle's products this embed is standing on; takes precedence over the
+   * handle cascade. Without it (and with no resolvable handle) they bind to
+   * the bundle's first product.
+   */
+  get productIdAttr() {
+    return this.getAttribute("product-id") ?? "";
+  }
   get appUrl() {
     return this.getAttribute("app-url") ?? "";
   }
@@ -6988,7 +7275,7 @@ var LimeBundleElement = class extends HTMLElement {
     });
     const storage = window.localStorage;
     const key = cartStorageKey(this.shopDomain);
-    const existingCartId = storage?.getItem(key) ?? null;
+    let cartId = storage?.getItem(key) ?? null;
     const isStaleCartError = (errors) => errors.length > 0 && errors.every((e) => (e.field ?? []).includes("cartId"));
     const stockCapped = (warnings) => (warnings ?? []).some((w) => w.code === "MERCHANDISE_NOT_ENOUGH_STOCK");
     const fail = (message) => {
@@ -7002,10 +7289,17 @@ var LimeBundleElement = class extends HTMLElement {
     };
     try {
       let checkoutUrl = null;
-      if (existingCartId) {
+      if (cartId) {
+        cartId = await this.clearAbandonedBundleLines(
+          client,
+          cartId,
+          () => storage?.removeItem(key)
+        );
+      }
+      if (cartId) {
         const res = await client.query(
           import_core6.CART_LINES_ADD_MUTATION,
-          { cartId: existingCartId, lines }
+          { cartId, lines }
         );
         const payload = res.cartLinesAdd;
         if (payload?.userErrors?.length) {
@@ -7058,6 +7352,42 @@ var LimeBundleElement = class extends HTMLElement {
       );
     }
   }
+  /**
+   * Remove this widget's own earlier lines — the ones tagged with the
+   * `_lime_bundle_gid` attribute — from the saved cart, so a shopper who
+   * clicked add three times while deciding checks out with only what they
+   * just built. Lines without the tag were put in the cart by something
+   * else (the host site, a previous non-widget purchase flow) and are
+   * left alone.
+   *
+   * Returns the cart id when the cart is still usable. Returns null after
+   * calling `dropSavedCart` when it isn't: either the id no longer
+   * resolves (expired or merged on Shopify's side), or the removal itself
+   * failed — in both cases a fresh cart is the only way to guarantee the
+   * checkout matches the shopper's current build.
+   */
+  async clearAbandonedBundleLines(client, cartId, dropSavedCart) {
+    const res = await client.query(import_core6.CART_LINES_QUERY, {
+      cartId
+    });
+    if (!res.cart) {
+      dropSavedCart();
+      return null;
+    }
+    const abandonedLineIds = res.cart.lines.nodes.filter(
+      (line) => line.attributes.some((attr) => attr.key === BUNDLE_GID_ATTRIBUTE)
+    ).map((line) => line.id);
+    if (abandonedLineIds.length === 0) return cartId;
+    const removal = await client.query(
+      import_core6.CART_LINES_REMOVE_MUTATION,
+      { cartId, lineIds: abandonedLineIds }
+    );
+    if (removal.cartLinesRemove?.userErrors?.length) {
+      dropSavedCart();
+      return null;
+    }
+    return cartId;
+  }
   reportAddToCartEvent(bundle, lines) {
     if (!this.analyticsEnabled || !this.appUrl) return;
     const quantity = lines.reduce((sum, l) => sum + l.quantity, 0);
@@ -7129,7 +7459,10 @@ var LimeBundleElement = class extends HTMLElement {
           );
           break;
         case "volume":
-          renderVolumeBundle(container, bundle, dispatch);
+          renderVolumeBundle(container, bundle, dispatch, {
+            productId: this.productIdAttr || null,
+            productHandle: this.currentProductHandle
+          });
           break;
         case "bogo":
           renderBogoBundle(container, bundle, dispatch, registerCleanup);