@lime-bundles/widget 4.1.0 → 4.2.0

package/dist/index.cjs

@@ -26,7 +26,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
-var import_core5 = require("@lime-bundles/core");
+var import_core6 = require("@lime-bundles/core");
 
 // ../render/src/adapt.ts
 var import_core = require("@lime-bundles/core");
@@ -52,7 +52,10 @@ function adaptVariant(v, requiredQty, fallbackCurrency) {
     price: toCents(v.price?.amount),
     compareAtPrice: toCents(v.compareAtPrice?.amount),
     unitPrice: (0, import_core.formatUnitPrice)(v.unitPrice, v.unitPriceMeasurement, fallbackCurrency),
-    image: v.image?.url ?? null
+    image: v.image?.url ?? null,
+    // Carried so the picker's stepper cap and cross-slot stock guard can
+    // bind on the headless surface; dropping it here left them capless.
+    inventoryQuantity: (0, import_core.stockCapForVariant)(v)
   };
 }
 function adaptProduct(product, bundleId, opts) {
@@ -107,6 +110,14 @@ function findVariant(product, variantId) {
   }
   return product.variants[0];
 }
+function resolveSellableVariant(product) {
+  const seeded = findVariant(product, product.selectedVariantId);
+  if (seeded && seeded.available !== false) return seeded;
+  for (let i = 0; i < product.variants.length; i++) {
+    if (product.variants[i].available !== false) return product.variants[i];
+  }
+  return null;
+}
 function findVariantByOptions(product, optionValues) {
   if (!product.variants || !optionValues) return null;
   for (let i = 0; i < product.variants.length; i++) {
@@ -511,7 +522,7 @@ function buildWidgetShell(typeClass, opts) {
       "data-countdown": ""
     });
     const label2 = box("span", "lb-bundle-countdown-label");
-    label2.textContent = opts.countdownLabel ?? "Ends in";
+    label2.textContent = opts.countdownLabel ?? "Limited time offer";
     countdown.appendChild(label2);
     countdown.appendChild(
       box("span", "lb-bundle-countdown-timer", {
@@ -523,10 +534,12 @@ function buildWidgetShell(typeClass, opts) {
   const products = box("div", typeClass + "__products lb-edge-fade");
   root.appendChild(products);
   root.appendChild(box("div", "lb-bundle-divider"));
-  const summary = box("div", "lb-bundle-summary");
+  const summary = box("div", "lb-bundle-summary", {
+    "data-pricing-section": ""
+  });
   const text = box("div", "lb-bundle-summary__text");
   const label = box("span", "lb-bundle-summary__label");
-  label.textContent = opts.summaryLabel ?? "Bundle price";
+  label.textContent = opts.summaryLabel ?? "Bundle total";
   text.appendChild(label);
   if (opts.withItemCount) {
     label.appendChild(box("span", "", { "data-item-count": "" }));
@@ -557,6 +570,7 @@ function buildWidgetShell(typeClass, opts) {
   summary.appendChild(prices);
   root.appendChild(summary);
   const cta = box("button", "lb-bundle-cta", {
+    "data-cta-text": opts.ctaText,
     type: "button",
     "data-add-bundle": ""
   });
@@ -575,7 +589,9 @@ function buildWidgetShell(typeClass, opts) {
   );
   return { root, products, cta };
 }
-function buildVolumeTiers(tiers, groupLabel) {
+function buildVolumeTiers(tiers, groupLabel, opts = {}) {
+  const showCompare = opts.showCompare !== false;
+  const showPriceEach = opts.showPriceEach !== false;
   const group = box("div", "lb-volume__tiers lb-edge-fade", {
     role: "radiogroup",
     "aria-label": groupLabel,
@@ -600,8 +616,17 @@ function buildVolumeTiers(tiers, groupLabel) {
     label.textContent = tier.label;
     info.appendChild(label);
     const price = box("span", "lb-volume__tier-price");
-    price.appendChild(box("span", "lb-volume__tier-compare"));
-    price.appendChild(box("span", "", { "data-tier-price-each": "" }));
+    if (showCompare && (tier.percent > 0 || tier.amountCents > 0)) {
+      price.appendChild(box("span", "lb-volume__tier-compare"));
+    }
+    if (showPriceEach) {
+      price.appendChild(box("span", "", { "data-tier-price-each": "" }));
+      if (opts.unitLabel) {
+        const unit = box("span", "lb-volume__tier-unit");
+        unit.textContent = opts.unitLabel;
+        price.appendChild(unit);
+      }
+    }
     info.appendChild(price);
     el2.appendChild(info);
     if (tier.badgeLabel || tier.savingsLabel) {
@@ -710,7 +735,10 @@ var DEFAULT_STRINGS = {
   required: "Required",
   soldOut: "Sold out",
   outOfStock: "Out of stock",
-  itemsOutOfStock: "__COUNT__ items out of stock",
+  itemsOutOfStock: {
+    one: "__COUNT__ item out of stock",
+    other: "__COUNT__ items out of stock"
+  },
   quantity: "Quantity",
   increaseQuantity: "Increase quantity",
   decreaseQuantity: "Decrease quantity",
@@ -730,11 +758,26 @@ var DEFAULT_STRINGS = {
   stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
   each: " each",
   buyQty: "Buy __COUNT__",
+  itemCount: {
+    one: "__COUNT__ item",
+    other: "__COUNT__ items"
+  },
   needsSpots: {
     one: "Needs __COUNT__ spot",
     other: "Needs __COUNT__ spots"
   }
 };
+function formatItemsOutOfStock(t, count) {
+  const raw = t.itemsOutOfStock;
+  let tpl;
+  if (raw && typeof raw === "object") {
+    const form = new Intl.PluralRules(t.locale || "en").select(count);
+    tpl = raw[form] || raw.other;
+  } else {
+    tpl = raw;
+  }
+  return (tpl || "__COUNT__ items out of stock").split("__COUNT__").join(String(count));
+}
 
 // ../render/src/dropdown/bind.ts
 var import_core2 = require("@lime-bundles/core");
@@ -1145,12 +1188,11 @@ function bindDropdowns(root) {
 }
 
 // src/renderers/fixed.ts
-function renderFixedBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
+function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const products = adaptProducts(bundle);
   if (!products.length) return;
   const oosProducts = products.filter((p) => !p.variants.some((v) => v.available));
-  if (outOfStockBehavior === "hide" && oosProducts.length > 0) return;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const formatMoney = intlFormatMoney(currency);
   const t = DEFAULT_STRINGS;
@@ -1175,7 +1217,9 @@ function renderFixedBundle(container, bundle, outOfStockBehavior, onAddToCart, o
     });
     shell.products.appendChild(row);
     if (isOos) continue;
-    const selected = findVariant(product, product.selectedVariantId);
+    const sellable = resolveSellableVariant(product);
+    if (sellable) product.selectedVariantId = sellable.id;
+    const selected = sellable ?? findVariant(product, product.selectedVariantId);
     hydrateRowControls(row, product, selected);
     applyVariant(row, selected, product, formatMoney);
     bindVariantSelects(
@@ -1191,7 +1235,7 @@ function renderFixedBundle(container, bundle, outOfStockBehavior, onAddToCart, o
     shell.cta.disabled = true;
     const label = shell.cta.querySelector("[data-cta-label]");
     if (label) {
-      label.textContent = (t.itemsOutOfStock || "__COUNT__ items out of stock").split("__COUNT__").join(String(oosProducts.length));
+      label.textContent = formatItemsOutOfStock(t, oosProducts.length);
     }
   } else {
     shell.cta.addEventListener("click", () => {
@@ -1770,6 +1814,17 @@ function unlock() {
   window.scrollTo(0, savedY);
 }
 
+// ../render/src/picker/sort.ts
+function sinkAddedRows(list, rowEls, isAdded) {
+  const front = [];
+  const back = [];
+  for (let i = 0; i < rowEls.length; i++) {
+    (isAdded(i) ? back : front).push(rowEls[i]);
+  }
+  for (const el2 of front) list.appendChild(el2);
+  for (const el2 of back) list.appendChild(el2);
+}
+
 // ../render/src/mix-match/modal.ts
 var ALL_TYPES = "__all__";
 var CLOSE_TRANSITION_MS = 300;
@@ -1994,12 +2049,22 @@ function createPickerModal(deps) {
     syncActiveFilterPill();
     if (searchInput) searchInput.value = "";
     filterProducts(searchInput ? searchInput.value : "");
+    if (modalList) {
+      const selectedProductIds = /* @__PURE__ */ Object.create(null);
+      for (const it of items) selectedProductIds[String(it.productId)] = true;
+      sinkAddedRows(
+        modalList,
+        rows.map((r) => r.el),
+        (i) => selectedProductIds[String(eligibleProducts[i].id)] === true
+      );
+      modalList.scrollTop = 0;
+    }
     overlay.style.display = "";
     void overlay.offsetHeight;
     overlay.classList.add("lb-mix-match__modal-overlay--open");
     lock();
     setTimeout(() => {
-      if (searchInput) searchInput.focus();
+      if (closeBtn) closeBtn.focus();
       else modalDialog?.focus();
     }, 50);
   }
@@ -2556,17 +2621,17 @@ function buildPickerModal(opts) {
 }
 
 // src/renderers/mix-match.ts
-function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
+function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup, currentProductHandle) {
   const wc = bundle.widgetConfig;
   const t = DEFAULT_STRINGS;
   const requiredQty = bundle.minQuantity || 1;
   const rulesMap = mergeRuleMaps(bundle.productRules, bundle.variantRules);
   const adapted = adaptProducts(bundle);
-  const eligibleProducts = adapted.map((p) => ({
+  const eligibleProducts = adapted.map((p, i) => ({
     id: Number(p.productId),
     title: p.title ?? "",
     url: p.url ?? null,
-    type: "",
+    type: bundle.products[i]?.productType ?? "",
     featuredImage: p.featuredImage ?? null,
     available: p.variants.some((v) => v.available),
     optionNames: p.optionNames,
@@ -2579,12 +2644,12 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
       compareAtPrice: v.compareAtPrice,
       unitPrice: v.unitPrice,
       image: v.image,
-      inventoryQuantity: null
+      inventoryQuantity: v.inventoryQuantity ?? null
     }))
   }));
   if (!eligibleProducts.length) return;
   const poolUnits = eligibleProducts.filter((p) => p.available).length;
-  if (outOfStockBehavior === "hide" && poolUnits === 0) return;
+  if (poolUnits === 0) return;
   const formatMoney = intlFormatMoney(
     bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD"
   );
@@ -2611,16 +2676,21 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
   const overlay = buildPickerModal({
     bundleGid: bundle.id,
     domId: bundle.id.replace(/\D/g, ""),
-    showSearch: true,
-    showTypeFilters: false,
+    showSearch: wc.showSearch !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     segmentCount: requiredQty,
     wizard: false
   });
   shell.root.appendChild(overlay);
+  const currentIdx = currentProductHandle ? bundle.products.findIndex((p) => p.handle === currentProductHandle) : -1;
   const selectedItems = seedSelection(
     eligibleProducts,
     rulesMap,
-    requiredQty
+    requiredQty,
+    {
+      enabled: !!currentProductHandle,
+      currentProductId: currentIdx !== -1 ? eligibleProducts[currentIdx]?.id ?? null : null
+    }
   );
   const rowCapacity = {
     remainingSpots: () => remainingUnits(selectedItems, requiredQty),
@@ -2657,7 +2727,13 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
       shell.root,
       selectedItems,
       requiredQty,
-      bundle,
+      // The shared updater reads the theme data-block shape: discount fields
+      // flat, not nested under discountConfig. Passing the bundle itself left
+      // `discountType` undefined, so the summary never painted.
+      {
+        discountType: bundle.discountConfig.discountType,
+        discountValue: bundle.discountConfig.discountValue
+      },
       (total, type, value) => (0, import_core3.calculateDiscount)(total, type, value),
       updatePricing2(formatMoney)
     );
@@ -2670,7 +2746,7 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
     rulesMap,
     eligibleProducts,
     requiredQty,
-    showQtySelector: true,
+    showQtySelector: wc.mixMatchShowQuantitySelector !== false,
     items: selectedItems,
     formatMoney,
     rowCapacity,
@@ -2733,6 +2809,47 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
   onCleanup?.(bindDropdowns(shell.root));
 }
 
+// src/renderers/volume.ts
+var import_core4 = require("@lime-bundles/core");
+
+// ../render/src/volume/stock.ts
+var TIER_OOS_CLASS = "lb-volume__tier--oos";
+function tierQty(el2) {
+  return parseInt(el2.getAttribute("data-tier-qty") ?? "", 10) || 0;
+}
+function tierUnavailable(el2) {
+  return el2.getAttribute("aria-disabled") === "true";
+}
+function applyTierStockState(tierEls, cap) {
+  for (let i = 0; i < tierEls.length; i++) {
+    const el2 = tierEls[i];
+    const unavailable = cap !== null && tierQty(el2) > cap;
+    if (unavailable) {
+      el2.classList.add(TIER_OOS_CLASS);
+      el2.setAttribute("aria-disabled", "true");
+    } else {
+      el2.classList.remove(TIER_OOS_CLASS);
+      el2.removeAttribute("aria-disabled");
+    }
+  }
+}
+function resolveAvailableTierIndex(tierEls, preferred) {
+  const p = tierEls[preferred];
+  if (p && !tierUnavailable(p)) return preferred;
+  for (let i = 0; i < tierEls.length; i++) {
+    if (!tierUnavailable(tierEls[i])) return i;
+  }
+  return -1;
+}
+function stepToAvailableTier(tierEls, from, direction) {
+  let i = from + direction;
+  while (i >= 0 && i < tierEls.length) {
+    if (!tierUnavailable(tierEls[i])) return i;
+    i += direction;
+  }
+  return from;
+}
+
 // ../render/src/volume/pricing.ts
 function calcTierPrice(basePrice, discountType, tierEl) {
   if (discountType === "fixed_amount") {
@@ -2761,6 +2878,23 @@ function formatItemCount(qty, translations) {
   const tpl = translations.itemCount[form] || translations.itemCount.other || "__COUNT__";
   return " (" + tpl.split("__COUNT__").join(String(qty)) + ")";
 }
+function updateAllTierPrices(allTiers, basePrice, discountType, formatMoney) {
+  for (let i = 0; i < allTiers.length; i++) {
+    const tierEl = allTiers[i];
+    const priceEachEl = tierEl.querySelector(
+      "[data-tier-price-each]"
+    );
+    if (priceEachEl) {
+      priceEachEl.textContent = formatMoney(
+        calcTierPrice(basePrice, discountType, tierEl)
+      );
+    }
+    const compareEl = tierEl.querySelector(
+      ".lb-volume__tier-compare"
+    );
+    if (compareEl) compareEl.textContent = formatMoney(basePrice);
+  }
+}
 function selectTier(container, allTiers, basePrice, discountType, index, translations, formatMoney) {
   for (let i = 0; i < allTiers.length; i++) {
     allTiers[i].setAttribute("aria-checked", i === index ? "true" : "false");
@@ -2805,21 +2939,31 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
 }
 
 // src/renderers/volume.ts
-function renderVolumeBundle(container, bundle, outOfStockBehavior, onAddToCart) {
+function renderVolumeBundle(container, bundle, onAddToCart) {
   const wc = bundle.widgetConfig;
   const product = bundle.products[0];
   if (!product) return;
   const variants = product.variants.nodes;
-  const pricingVariant = variants.find((v) => v.availableForSale) ?? variants[0];
+  const minTierQty = Math.min(
+    ...bundle.volumeTiers.map((tier) => tier.minQuantity)
+  );
+  const pricingVariant = variants.find((v) => (0, import_core4.isVariantFulfillable)(v, minTierQty)) ?? variants.find((v) => v.availableForSale) ?? variants[0];
   if (!pricingVariant) return;
-  const anyAvailable = variants.some((v) => v.availableForSale);
-  if (outOfStockBehavior === "hide" && !anyAvailable) return;
   const basePrice = toCents(pricingVariant.price.amount);
   const discountType = bundle.discountConfig.discountType;
   const formatMoney = intlFormatMoney(product.priceRange.minVariantPrice.currencyCode);
   const t = DEFAULT_STRINGS;
-  const popularIdx = wc.popularBadge?.visible ? Math.floor((bundle.volumeTiers.length - 1) / 2) : -1;
-  const defaultIdx = 0;
+  const bestIdx = (0, import_core4.bestValueTierIndex)(bundle.volumeTiers, discountType);
+  const defaultIdx = (0, import_core4.resolveDefaultTierIndex)(
+    wc.defaultTier,
+    bundle.volumeTiers.length,
+    bestIdx
+  );
+  const popularIdx = (0, import_core4.resolvePopularTierIndex)(
+    wc.popularBadge?.tierIndex,
+    wc.popularBadge?.visible !== false,
+    bestIdx
+  );
   const tiers = bundle.volumeTiers.map((tier, i) => {
     const percent = discountType === "fixed_amount" ? 0 : Math.round(tier.percentage ?? 0);
     const amountCents = discountType === "fixed_amount" ? Math.round((tier.amount ?? 0) * 100) : 0;
@@ -2840,38 +2984,46 @@ function renderVolumeBundle(container, bundle, outOfStockBehavior, onAddToCart)
     title: bundle.title,
     subtitle: bundle.description,
     summaryLabel: "Total",
-    withItemCount: true,
+    withItemCount: wc.pricing?.showItemCount !== false,
     totalPriceSlot: true,
     showSavingsBar: wc.savingsBar?.visible !== false,
     showComparePrice: wc.pricing?.showCompareAtPrice !== false,
     ctaText: wc.cta?.ctaText || t.addToCart || "Add to cart",
     endsAt: wc.countdown?.showCountdown === false ? null : bundle.endsAt
   });
-  const group = buildVolumeTiers(tiers, "Select quantity");
+  const group = buildVolumeTiers(tiers, "Select quantity", {
+    showCompare: wc.pricing?.showComparePrice !== false,
+    showPriceEach: wc.pricing?.showPerUnitPrice !== false,
+    unitLabel: (t.each || "each").trim()
+  });
   shell.products.replaceWith(group);
   const tierEls = group.querySelectorAll("[data-tier-index]");
-  let selectedIndex = defaultIdx;
+  updateAllTierPrices(tierEls, basePrice, discountType, formatMoney);
+  applyTierStockState(tierEls, (0, import_core4.stockCapForVariant)(pricingVariant));
+  let selectedIndex = resolveAvailableTierIndex(tierEls, defaultIdx);
+  const noTierAvailable = selectedIndex === -1;
+  if (noTierAvailable) selectedIndex = defaultIdx;
   const apply = () => selectTier(shell.root, tierEls, basePrice, discountType, selectedIndex, t, formatMoney);
   group.addEventListener("click", (e) => {
     const el2 = e.target.closest("[data-tier-index]");
-    if (!el2) return;
+    if (!el2 || tierUnavailable(el2)) return;
     selectedIndex = parseInt(el2.getAttribute("data-tier-index") ?? "", 10) || 0;
     apply();
   });
   group.addEventListener("keydown", (e) => {
     if (e.key === "ArrowDown" || e.key === "ArrowRight") {
       e.preventDefault();
-      selectedIndex = Math.min(selectedIndex + 1, tierEls.length - 1);
+      selectedIndex = stepToAvailableTier(tierEls, selectedIndex, 1);
       apply();
       tierEls[selectedIndex].focus();
     } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
       e.preventDefault();
-      selectedIndex = Math.max(selectedIndex - 1, 0);
+      selectedIndex = stepToAvailableTier(tierEls, selectedIndex, -1);
       apply();
       tierEls[selectedIndex].focus();
     }
   });
-  if (!anyAvailable) {
+  if (noTierAvailable) {
     shell.cta.disabled = true;
     const label = shell.cta.querySelector("[data-cta-label]");
     if (label) label.textContent = t.outOfStock || "Out of stock";
@@ -2999,7 +3151,14 @@ function buildBogoCartItems(sides, percent, buyQty, getQty) {
 }
 
 // src/renderers/bogo.ts
-function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
+function buildBogoPlus() {
+  const plus = document.createElement("div");
+  plus.className = "lb-bogo__plus";
+  plus.setAttribute("aria-hidden", "true");
+  plus.innerHTML = '<svg width="12" height="12" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><line x1="9" y1="3" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+  return plus;
+}
+function renderBogoBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const buyProduct = bundle.products.find((p) => p.id === bundle.buyProductId);
   const getProduct = bundle.products.find((p) => p.id === bundle.getProductId);
@@ -3028,7 +3187,6 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
     }
   ];
   const oosCount = sides.filter((s) => !s.variants.some((v) => v.available)).length;
-  if (outOfStockBehavior === "hide" && oosCount > 0) return;
   const formatMoney = intlFormatMoney(
     buyProduct.priceRange.minVariantPrice.currencyCode
   );
@@ -3047,6 +3205,7 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
   const badgeText = percent >= 100 ? "Free" : percent + "% off";
   sides.forEach((side, i) => {
     const isGet = i === 1;
+    if (isGet) shell.products.appendChild(buildBogoPlus());
     const isOos = !side.variants.some((v) => v.available);
     const row = buildRowSkeleton(side, t, {
       isOos,
@@ -3075,7 +3234,7 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
     shell.cta.disabled = true;
     const label = shell.cta.querySelector("[data-cta-label]");
     if (label) {
-      label.textContent = (t.itemsOutOfStock || "__COUNT__ items out of stock").split("__COUNT__").join(String(oosCount));
+      label.textContent = formatItemsOutOfStock(t, oosCount);
     }
   } else {
     shell.cta.addEventListener("click", () => {
@@ -3095,7 +3254,7 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
 }
 
 // src/renderers/multi-step.ts
-var import_core4 = require("@lime-bundles/core");
+var import_core5 = require("@lime-bundles/core");
 
 // ../render/src/multi-step/i18n.ts
 function stepOfLabel(i, total, t) {
@@ -3460,6 +3619,14 @@ function createWizard(deps) {
       rows.push(row);
       modalList.appendChild(row.el);
     }
+    const stepPicks = selections[forStep] || [];
+    const selectedProductIds = /* @__PURE__ */ Object.create(null);
+    for (const it of stepPicks) selectedProductIds[String(it.productId)] = true;
+    sinkAddedRows(
+      modalList,
+      rows.map((r) => r.el),
+      (i) => selectedProductIds[String(pool[i].id)] === true
+    );
     deps.dropdown?.bindAll(modalList);
   }
   function onListClick(e) {
@@ -3622,6 +3789,7 @@ function createWizard(deps) {
     syncActiveFilterPill();
     if (searchInput) searchInput.value = "";
     filterProducts("");
+    if (modalList) modalList.scrollTop = 0;
     buildStepSegments(stepIndex);
     refresh();
     if (modalLive) {
@@ -3645,7 +3813,7 @@ function createWizard(deps) {
     overlay.classList.add("lb-mix-match__modal-overlay--open");
     lock();
     setTimeout(() => {
-      if (searchInput) searchInput.focus();
+      if (closeBtn) closeBtn.focus();
       else modalDialog?.focus();
     }, 50);
   }
@@ -3713,7 +3881,7 @@ function createWizard(deps) {
 }
 
 // src/renderers/multi-step.ts
-function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
+function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const t = DEFAULT_STRINGS;
   const rulesMap = mergeRuleMaps(bundle.productRules, bundle.variantRules);
@@ -3724,7 +3892,7 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
     variantQuantities: bundle.variantQuantities
   };
   const pools = steps.map(
-    (_, i) => (0, import_core4.productsForStep)(bundle, i).map((product) => {
+    (_, i) => (0, import_core5.productsForStep)(bundle, i).map((product) => {
       const p = adaptProduct(product, bundle.id, {
         quantities,
         allowedVariantIds: null
@@ -3746,13 +3914,13 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
           compareAtPrice: v.compareAtPrice,
           unitPrice: v.unitPrice,
           image: v.image,
-          inventoryQuantity: null
+          inventoryQuantity: v.inventoryQuantity ?? null
         }))
       };
     })
   );
-  const anyPickable = pools.some((pool) => pool.some((p) => p.available));
-  if (outOfStockBehavior === "hide" && !anyPickable) return;
+  const everyStepPickable = pools.length > 0 && pools.every((pool) => pool.some((p) => p.available));
+  if (!everyStepPickable) return;
   const formatMoney = intlFormatMoney(
     bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD"
   );
@@ -3798,8 +3966,8 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
   const overlay = buildPickerModal({
     bundleGid: bundle.id,
     domId: bundle.id.replace(/\D/g, ""),
-    showSearch: true,
-    showTypeFilters: true,
+    showSearch: wc.showSearch !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     segmentCount: null,
     wizard: true
   });
@@ -3834,7 +4002,7 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
         discountType: bundle.discountConfig.discountType,
         discountValue: bundle.discountConfig.discountValue
       },
-      (total, type, value) => (0, import_core4.calculateDiscount)(total, type, value),
+      (total, type, value) => (0, import_core5.calculateDiscount)(total, type, value),
       updatePricing2(formatMoney)
     );
     updateProgress2(bodyDeps);
@@ -3846,8 +4014,8 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
     selections,
     t,
     rulesMap,
-    showQtySelector: true,
-    showTypeFilters: true,
+    showQtySelector: wc.mixMatchShowQuantitySelector !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     formatMoney,
     dropdown: void 0,
     portalTarget: null,
@@ -3897,7 +4065,7 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
 }
 
 // src/lime-bundle.ts
-var import_core6 = require("@lime-bundles/core");
+var import_core7 = require("@lime-bundles/core");
 
 // src/utils/input-mode.ts
 var NAV_KEYS = /* @__PURE__ */ new Set([
@@ -5564,7 +5732,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
 }
 
-.lb-mix-match__modal-add:hover {
+.lb-mix-match__modal-add:hover:not(:disabled) {
   opacity: 0.9;
 }
 
@@ -5679,8 +5847,15 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   color: color-mix(in srgb, var(--lb-picker-text) 70%, transparent);
 }
 
-/* "Done" reuses the picker Add-button styling so it matches the Add buttons. */
+/* "Done" reuses the picker Add-button styling so it matches the Add buttons.
+   The flex centring + min-height pin the footer-button silhouette: the wizard
+   Back (bundle-multi-step.css) copies these metrics so the pair stays
+   equal-height whatever border widths the merchant's picker tokens set. */
 .lb-mix-match__modal-done {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
   padding: 10px 24px;
   transition: opacity 0.25s ease;
   background: var(--lb-picker-add-bg);
@@ -5694,7 +5869,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   cursor: pointer;
 }
 
-.lb-mix-match__modal-done:hover {
+.lb-mix-match__modal-done:hover:not(:disabled) {
   opacity: 0.9;
 }
 
@@ -5704,6 +5879,16 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   box-shadow: none;
 }
 
+/* Disabled Next/Done (wizard step minimum not met) \u2014 same washed-out
+   treatment as a disabled row Add, so an unfinished step reads at a
+   glance. Hover is gated off above; the solid button returns the moment
+   the requirement is met. */
+.lb-mix-match__modal-done:disabled {
+  background: color-mix(in srgb, var(--lb-picker-add-bg) 35%, var(--lb-picker-bg));
+  color: color-mix(in srgb, var(--lb-picker-add-label) 85%, transparent);
+  cursor: not-allowed;
+}
+
 /* Hidden utility for search filtering */
 .lb-hidden {
   display: none !important;
@@ -5960,6 +6145,13 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
+
+/* Tier the selected variant can't cover \u2014 same greyed treatment as an
+   out-of-stock product row, and not selectable. */
+.lb-volume__tier--oos {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 `;
 var BUNDLE_BOGO_CSS = `/* Lime Bundles \u2014 BOGO (Buy X Get Y) bundle styles */
 
@@ -6128,14 +6320,23 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   justify-self: end;
 }
 
-/* Back \u2014 secondary treatment beside the primary Next/Done (which reuse
-   .lb-mix-match__modal-done). */
+/* Back \u2014 secondary (outlined) treatment beside the primary Next/Done
+   (which reuse .lb-mix-match__modal-done). Same silhouette as Next \u2014
+   metrics copied from the modal-done recipe (padding, type, radius,
+   min-height) \u2014 and picker tokens only: the modal is portaled out of the
+   widget, so the widget vars (--lb-text, --lb-border-*) it previously
+   used don't reliably resolve here and break palette isolation. */
 .lb-multi-step__modal-back {
-  padding: 10px 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 10px 24px;
   background: none;
-  border: var(--lb-border-width) solid var(--lb-border-color);
-  border-radius: var(--lb-radius-sm);
-  color: var(--lb-text);
+  border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
+  border-radius: var(--lb-picker-radius-sm);
+  box-sizing: border-box;
+  color: var(--lb-picker-text);
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
@@ -6144,7 +6345,7 @@ var BUNDLE_MULTI_STEP_CSS = `/**
 }
 
 .lb-multi-step__modal-back:hover {
-  background: color-mix(in srgb, var(--lb-text) 5%, transparent);
+  background: color-mix(in srgb, var(--lb-picker-text) 5%, transparent);
 }
 
 .lb-multi-step__modal-back:focus-visible {
@@ -6553,6 +6754,13 @@ var LimeBundleElement = class extends HTMLElement {
   buyer = void 0;
   shadow;
   bundles = [];
+  /**
+   * The product handle this embed is standing on, when one can be resolved
+   * (attribute → meta tag → /products/<handle> path). The mix-and-match
+   * courtesy seed uses it to pre-add the current product the way the theme
+   * widget does; null on pages with no product context.
+   */
+  currentProductHandle = null;
   abortController = null;
   impressionCleanups = [];
   /**
@@ -6567,12 +6775,6 @@ var LimeBundleElement = class extends HTMLElement {
    * `.lb-bundle-widget { ... }` reach the widget's DOM.
    */
   shopCustomCss = null;
-  /**
-   * Shop-wide out-of-stock behaviour, resolved from the `$app` shop metafield
-   * before the first render. Defaults to `show_greyed_out` so a failed or
-   * missing fetch degrades to "bundles still render".
-   */
-  outOfStockBehavior = import_core5.DEFAULT_OUT_OF_STOCK_BEHAVIOR;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -6634,13 +6836,13 @@ var LimeBundleElement = class extends HTMLElement {
    * no buyer/country/language is set.
    */
   wrapQueryForContext(query) {
-    return (0, import_core5.hasInContext)({
+    return (0, import_core6.hasInContext)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken,
       country: this.country,
       language: this.language,
       buyer: this.buyer
-    }) ? (0, import_core5.withInContext)(query) : query;
+    }) ? (0, import_core6.withInContext)(query) : query;
   }
   /**
    * Returns true if this bundle should be hidden for the current market.
@@ -6649,7 +6851,7 @@ var LimeBundleElement = class extends HTMLElement {
    * marketIds doesn't include the configured market.
    */
   isMarketHidden(bundle) {
-    return !(0, import_core5.isVisibleInMarket)(bundle, this.marketId);
+    return !(0, import_core6.isVisibleInMarket)(bundle, this.marketId);
   }
   async fetchBundle() {
     if (!this.shopDomain || !this.storefrontToken) {
@@ -6662,7 +6864,7 @@ var LimeBundleElement = class extends HTMLElement {
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
-    const client = (0, import_core5.createStorefrontClient)({
+    const client = (0, import_core6.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken,
       country: this.country,
@@ -6672,11 +6874,12 @@ var LimeBundleElement = class extends HTMLElement {
     try {
       let bundlePromise;
       let singleBundleMode = false;
+      this.currentProductHandle = resolveProductHandle(this.productHandleAttr);
       if (this.bundleGid) {
         singleBundleMode = true;
         bundlePromise = this.fetchSingleBundle(client, controller.signal);
       } else {
-        const handle = resolveProductHandle(this.productHandleAttr);
+        const handle = this.currentProductHandle;
         if (!handle) {
           this.teardownImpressions();
           this.renderError(
@@ -6690,7 +6893,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const shopSettingsPromise = client.query(import_core5.SHOP_SETTINGS_QUERY, void 0, {
+      const shopSettingsPromise = client.query(import_core6.SHOP_SETTINGS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -6703,13 +6906,10 @@ var LimeBundleElement = class extends HTMLElement {
       const shopSettings = await shopSettingsPromise;
       const customCss = shopSettings?.shop?.customCss?.value;
       if (customCss) {
-        (0, import_core5.injectCustomCss)(this.shopDomain, customCss);
-        const sanitized = (0, import_core5.sanitizeCustomCss)(customCss);
+        (0, import_core6.injectCustomCss)(this.shopDomain, customCss);
+        const sanitized = (0, import_core6.sanitizeCustomCss)(customCss);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
-      this.outOfStockBehavior = (0, import_core5.parseOutOfStockBehavior)(
-        shopSettings?.shop?.outOfStockBehavior?.value
-      );
       this.renderBundles();
     } catch (err) {
       if (controller.signal.aborted) return;
@@ -6722,7 +6922,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      this.wrapQueryForContext(import_core5.BUNDLE_METAOBJECT_QUERY),
+      this.wrapQueryForContext(import_core6.BUNDLE_METAOBJECT_QUERY),
       { id: this.bundleGid },
       { signal }
     );
@@ -6730,7 +6930,7 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core5.parseMetaobjectBundle)(
+    const parsed = (0, import_core6.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
@@ -6738,7 +6938,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      this.wrapQueryForContext(import_core5.BUNDLES_FOR_PRODUCT_QUERY),
+      this.wrapQueryForContext(import_core6.BUNDLES_FOR_PRODUCT_QUERY),
       { handle: productHandle },
       { signal }
     );
@@ -6749,10 +6949,10 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core5.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core6.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed && !this.isMarketHidden(parsed)) bundles.push(parsed);
     }
-    this.bundles = (0, import_core5.resolveAbTests)(bundles, (0, import_core5.getVisitorId)());
+    this.bundles = (0, import_core6.resolveAbTests)(bundles, (0, import_core6.getVisitorId)());
   }
   /**
    * Dispatch add-to-cart with a cancelable event, then — unless a listener
@@ -6782,33 +6982,59 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core5.createStorefrontClient)({
+    const client = (0, import_core6.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
     const storage = window.localStorage;
     const key = cartStorageKey(this.shopDomain);
     const existingCartId = 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) => {
+      this.dispatchEvent(
+        new CustomEvent("lime-bundle:error", {
+          detail: { message, code: "CART_ERROR" },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
     try {
       let checkoutUrl = null;
       if (existingCartId) {
         const res = await client.query(
-          import_core5.CART_LINES_ADD_MUTATION,
+          import_core6.CART_LINES_ADD_MUTATION,
           { cartId: existingCartId, lines }
         );
         const payload = res.cartLinesAdd;
         if (payload?.userErrors?.length) {
+          if (!isStaleCartError(payload.userErrors)) {
+            fail(payload.userErrors[0].message);
+            return;
+          }
           storage?.removeItem(key);
+        } else if (stockCapped(payload?.warnings)) {
+          fail("Some items in this bundle are out of stock.");
+          return;
         } else if (payload?.cart) {
           checkoutUrl = payload.cart.checkoutUrl;
         }
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core5.CART_CREATE_MUTATION,
+          import_core6.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
+        if (payload?.userErrors?.length) {
+          fail(payload.userErrors[0].message);
+          return;
+        }
+        if (stockCapped(payload?.warnings)) {
+          fail("Some items in this bundle are out of stock.");
+          return;
+        }
         if (payload?.cart) {
           storage?.setItem(key, payload.cart.id);
           checkoutUrl = payload.cart.checkoutUrl;
@@ -6817,13 +7043,7 @@ var LimeBundleElement = class extends HTMLElement {
       if (checkoutUrl) {
         window.location.assign(checkoutUrl);
       } else {
-        this.dispatchEvent(
-          new CustomEvent("lime-bundle:error", {
-            detail: { message: "Cart creation failed", code: "CART_ERROR" },
-            bubbles: true,
-            composed: true
-          })
-        );
+        fail("Cart creation failed");
       }
     } catch (err) {
       this.dispatchEvent(
@@ -6851,7 +7071,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core5.reportAddToCart)(
+    (0, import_core6.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -6890,49 +7110,32 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("aria-label", bundle.title);
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
-      (0, import_core6.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      if (bundle.endsAt) container.setAttribute("data-ends-at", bundle.endsAt);
+      (0, import_core7.applyWidgetConfigVars)(container, bundle.widgetConfig);
       this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
       switch (bundle.bundleType) {
         case "fixed":
-          renderFixedBundle(
-            container,
-            bundle,
-            this.outOfStockBehavior,
-            dispatch,
-            registerCleanup
-          );
+          renderFixedBundle(container, bundle, dispatch, registerCleanup);
           break;
         case "mix_match":
           renderMixMatchBundle(
             container,
             bundle,
-            this.outOfStockBehavior,
             dispatch,
-            registerCleanup
+            registerCleanup,
+            this.currentProductHandle
           );
           break;
         case "volume":
-          renderVolumeBundle(container, bundle, this.outOfStockBehavior, dispatch);
+          renderVolumeBundle(container, bundle, dispatch);
           break;
         case "bogo":
-          renderBogoBundle(
-            container,
-            bundle,
-            this.outOfStockBehavior,
-            dispatch,
-            registerCleanup
-          );
+          renderBogoBundle(container, bundle, dispatch, registerCleanup);
           break;
         case "multi_step":
-          renderMultiStepBundle(
-            container,
-            bundle,
-            this.outOfStockBehavior,
-            dispatch,
-            registerCleanup
-          );
+          renderMultiStepBundle(container, bundle, dispatch, registerCleanup);
           break;
       }
       this.shadow.appendChild(container);
@@ -6956,8 +7159,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core5.observeImpression)(element, () => {
-      (0, import_core5.reportImpression)(
+    const cleanup = (0, import_core6.observeImpression)(element, () => {
+      (0, import_core6.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,