@lime-bundles/widget 2.5.1 → 3.0.0

package/dist/index.js

@@ -18,7 +18,9 @@ import {
 
 // src/renderers/fixed.ts
 import {
-  resolveBundleQty
+  resolveBundleQty,
+  isVariantFulfillable,
+  shouldShowLowStockBadge
 } from "@lime-bundles/core";
 
 // src/dropdown/bind-dropdown.ts
@@ -67,6 +69,20 @@ function firstEnabled(opts) {
   for (let i = 0; i < opts.length; i++) if (!opts[i].disabled) return i;
   return -1;
 }
+function findScrollableAncestor(el2) {
+  const win = el2.ownerDocument?.defaultView;
+  if (!win) return null;
+  let cur = el2.parentElement;
+  while (cur && cur !== el2.ownerDocument.body) {
+    const style = win.getComputedStyle(cur);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "hidden") {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
 var VARIANT_SELECT_CLASSES = [
   "lb-bundle-variant-select",
   "lb-mix-match__variant-select"
@@ -172,6 +188,11 @@ function bindDropdown(select) {
     if (rect.width === 0) return false;
     const visibleCount = Math.min(optionEls.length || 1, MAX_VISIBLE_ITEMS);
     const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    const scrollable = listbox.hasAttribute("data-lb-dropdown-portal") ? null : findScrollableAncestor(trigger);
+    const clip = scrollable ? (() => {
+      const r = scrollable.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom };
+    })() : void 0;
     const result = computePosition({
       trigger: {
         top: rect.top,
@@ -180,7 +201,8 @@ function bindDropdown(select) {
         width: rect.width
       },
       viewportHeight: window.innerHeight,
-      desiredHeight
+      desiredHeight,
+      clip
     });
     listbox.setAttribute("data-placement", result.placement);
     listbox.style.maxHeight = `${result.maxHeight}px`;
@@ -534,9 +556,18 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
   const list = el("div", "lb-fixed__products");
   const rowHandles = [];
   rows.forEach((rowState) => {
-    const handle = renderProductRow(rowState, currency, qtyFor, () => {
-      updatePricing();
-    });
+    const handle = renderProductRow(
+      rowState,
+      currency,
+      qtyFor,
+      {
+        enabled: wc.showLowStockBadge,
+        threshold: wc.lowStockThreshold
+      },
+      () => {
+        updatePricing();
+      }
+    );
     rowHandles.push(handle);
     list.appendChild(handle.el);
   });
@@ -592,7 +623,9 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
 function buildRowState(bundle, product, productIndex) {
   const selectedVariantIds = bundle.selectedVariantIds?.[productIndex] ?? null;
   const merchantScoped = selectedVariantIds && selectedVariantIds.length > 0 ? product.variants.nodes.filter((v) => selectedVariantIds.includes(v.id)) : product.variants.nodes;
-  const firstInStock = merchantScoped.find((v) => v.availableForSale) ?? null;
+  const firstInStock = merchantScoped.find(
+    (v) => isVariantFulfillable(v, resolveBundleQty(bundle, product.id, v.id))
+  ) ?? null;
   const eligibleVariants = merchantScoped;
   const isOos = !firstInStock;
   const selected = firstInStock ?? merchantScoped[0] ?? null;
@@ -656,7 +689,7 @@ function deriveHeaderBadge(bundle, totalCents, saleCents, currency) {
   }
   return `-${formatCents(savings, currency)}`;
 }
-function renderProductRow(state, currency, qtyFor, onVariantChange) {
+function renderProductRow(state, currency, qtyFor, lowStock, onVariantChange) {
   const rowEl = el(
     "div",
     state.isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
@@ -703,6 +736,12 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     oosLabel.textContent = "Out of stock";
     info.appendChild(oosLabel);
   } else if (state.selected) {
+    const isSinglePinnedVariant = state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1;
+    if (isSinglePinnedVariant) {
+      const badge = el("span", "lb-bundle-variant-badge");
+      badge.textContent = state.eligibleVariants[0].title;
+      info.appendChild(badge);
+    }
     const prices = el("span", "lb-bundle-product-prices");
     const compare = el("span", "lb-bundle-product-compare-price", {
       "data-product-compare-price": ""
@@ -718,6 +757,11 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     });
     unitPriceEl.setAttribute("hidden", "");
     info.appendChild(unitPriceEl);
+    const lowStockEl = el("span", "lb-bundle-low-stock-badge", {
+      "data-low-stock-badge": ""
+    });
+    lowStockEl.setAttribute("hidden", "");
+    info.appendChild(lowStockEl);
     const applyVariantToRow = (variant) => {
       const unit = parseCents(variant.price.amount);
       priceEl.textContent = formatCents(unit, currency);
@@ -752,6 +796,18 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
         thumbImg.alt = nextImage.altText ?? state.product.title;
       }
+      const required = qtyFor(state.product.id, variant.id);
+      if (shouldShowLowStockBadge(
+        variant,
+        required,
+        lowStock.threshold,
+        lowStock.enabled
+      )) {
+        lowStockEl.textContent = `Only ${variant.quantityAvailable} left`;
+        lowStockEl.removeAttribute("hidden");
+      } else {
+        lowStockEl.setAttribute("hidden", "");
+      }
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
@@ -770,7 +826,7 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
       };
       const isValueAvailable = (optionIndex, value, selected) => state.eligibleVariants.some((v) => {
-        if (!v.availableForSale) return false;
+        if (!isVariantFulfillable(v, qtyFor(state.product.id, v.id))) return false;
         if (v.selectedOptions[optionIndex]?.value !== value) return false;
         return v.selectedOptions.every(
           (o, i) => i === optionIndex || o.value === selected[i]
@@ -834,10 +890,6 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       if (state.selected) {
         recomputeDisabled(state.selected.selectedOptions.map((o) => o.value));
       }
-    } else if (state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1) {
-      const badge = el("span", "lb-bundle-variant-badge");
-      badge.textContent = state.eligibleVariants[0].title;
-      info.appendChild(badge);
     }
   }
   rowEl.appendChild(info);
@@ -922,7 +974,12 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
-import { resolveBundleQty as resolveBundleQty2 } from "@lime-bundles/core";
+import {
+  DEFAULT_PRODUCT_RULE,
+  isVariantFulfillable as isVariantFulfillable2,
+  maxAddableQuantity,
+  shouldShowLowStockBadge as shouldShowLowStockBadge2
+} from "@lime-bundles/core";
 var PLACEHOLDER_THUMB_SVG2 = `
 <svg class="lb-bundle-placeholder-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
   <rect x="4" y="4" width="20" height="20" rx="3"></rect>
@@ -943,18 +1000,36 @@ var SEARCH_CLEAR_ICON_SVG = `
 <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
   <path d="M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z"/>
 </svg>`;
+var STEPPER_MINUS_SVG = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="3" y1="7" x2="11" y2="7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+var STEPPER_PLUS_SVG = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="7" y1="3" x2="7" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <line x1="3" y1="7" x2="11" y2="7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+function ruleFor(bundle, productId) {
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE;
+}
+function alreadyInBundleFor(selections, productId, variantId) {
+  let sum = 0;
+  for (const s of selections) {
+    if (s.productId === productId && s.variantId === variantId) sum += s.quantity;
+  }
+  return sum;
+}
 function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const requiredQty = bundle.minQuantity ?? 1;
-  const maxQty = bundle.maxQuantity ?? requiredQty;
+  const showQtySelector = wc.mixMatchShowQuantitySelector !== false;
   const eligible = buildEligibleProducts(bundle, wc.outOfStockBehavior);
   const inStockCount = eligible.filter((e) => !e.isOos).length;
   if (inStockCount < requiredQty) return;
   const selections = [];
   const root = el("div", "lb-mix-match", {
-    "data-required-quantity": String(requiredQty),
-    "data-max-quantity": String(maxQty)
+    "data-required-quantity": String(requiredQty)
   });
   const header = renderHeader2(bundle);
   root.appendChild(header);
@@ -988,24 +1063,17 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   root.appendChild(placeholder);
   const modal = renderModal(bundle, eligible, currency, {
     showSearch: wc.showSearch,
-    onAdd: (product, variant) => addSelection(product, variant),
-    onRemove: (productId, variantId) => removeSelection(productId, variantId),
-    isOverMax: () => selections.length >= maxQty
+    showQtySelector,
+    selections,
+    onAdd: (product, variant, quantity) => addSelection(product, variant, quantity),
+    isComplete: () => selections.length >= requiredQty
   });
   root.appendChild(modal.el);
   const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
   cta.disabled = true;
   cta.addEventListener("click", () => {
     if (cta.disabled) return;
-    const lines = selections.map((s) => ({
-      merchandiseId: s.variantId,
-      quantity: s.quantity,
-      attributes: [
-        { key: "_lime_bundle_gid", value: bundle.id },
-        { key: "_lime_bundle_type", value: bundle.bundleType }
-      ]
-    }));
-    onAddToCart(lines);
+    onAddToCart(buildCartLines(selections, bundle));
   });
   root.appendChild(cta);
   root.appendChild(
@@ -1019,28 +1087,17 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   );
   container.appendChild(root);
   onCleanup?.(() => unbindAllDropdowns(root));
-  const firstEligible = eligible.find((ep) => !ep.isOos);
-  const firstVariant = firstEligible?.firstAvailableVariant ?? firstEligible?.variants[0];
-  if (firstEligible && firstVariant) {
-    selections.push({
-      productId: firstEligible.product.id,
-      productTitle: firstEligible.product.title,
-      variantId: firstVariant.id,
-      variantTitle: firstVariant.title,
-      imageUrl: firstVariant.image?.url ?? firstEligible.product.featuredImage?.url ?? null,
-      priceCents: parseCents(firstVariant.price.amount),
-      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null,
-      unitPriceLabel: formatUnitPrice(
-        firstVariant.unitPrice,
-        firstVariant.unitPriceMeasurement,
-        currency
-      ),
-      quantity: resolveBundleQty2(bundle, firstEligible.product.id, firstVariant.id)
-    });
-  }
   afterMutation();
-  function addSelection(product, variant) {
-    if (selections.length >= maxQty) return;
+  function addSelection(product, variant, quantity) {
+    if (selections.length >= requiredQty) return;
+    const rule = ruleFor(bundle, product.id);
+    const cap = maxAddableQuantity(
+      variant,
+      rule.max,
+      alreadyInBundleFor(selections, product.id, variant.id)
+    );
+    if (cap < rule.min) return;
+    const clamped = Math.max(rule.min, Math.min(quantity, cap));
     selections.push({
       productId: product.id,
       productTitle: product.title,
@@ -1054,18 +1111,10 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         variant.unitPriceMeasurement,
         currency
       ),
-      quantity: resolveBundleQty2(bundle, product.id, variant.id)
+      quantity: clamped
     });
     afterMutation();
   }
-  function removeSelection(productId, variantId) {
-    const idx = selections.findIndex(
-      (s) => s.productId === productId && s.variantId === variantId
-    );
-    if (idx === -1) return;
-    selections.splice(idx, 1);
-    afterMutation();
-  }
   function removeSlotAt(index) {
     if (index < 0 || index >= selections.length) return;
     selections.splice(index, 1);
@@ -1107,6 +1156,26 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     }
   }
 }
+function buildCartLines(selections, bundle) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const s of selections) {
+    const key = `${s.productId}::${s.variantId}`;
+    const existing = grouped.get(key);
+    if (existing) {
+      existing.quantity += s.quantity;
+    } else {
+      grouped.set(key, { variantId: s.variantId, quantity: s.quantity });
+    }
+  }
+  return Array.from(grouped.values()).map((line) => ({
+    merchandiseId: line.variantId,
+    quantity: line.quantity,
+    attributes: [
+      { key: "_lime_bundle_gid", value: bundle.id },
+      { key: "_lime_bundle_type", value: bundle.bundleType }
+    ]
+  }));
+}
 function renderHeader2(bundle) {
   const wc = bundle.widgetConfig;
   const header = el("div", "lb-bundle-header");
@@ -1222,7 +1291,7 @@ function renderFilledSlot(selection, index, currency, onRemove) {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
   }
   const qtyBadge = el("span", "lb-bundle-qty-badge");
-  qtyBadge.textContent = String(selection.quantity);
+  qtyBadge.textContent = `\xD7${selection.quantity}`;
   thumb.appendChild(qtyBadge);
   slot.appendChild(thumb);
   const info = el("div", "lb-mix-match__filled-info");
@@ -1411,8 +1480,9 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
+      const rule = ruleFor(bundle, ep.product.id);
       const availableVariants = ep.variants;
-      const firstAvailVariant = ep.variants.find((v) => v.availableForSale) ?? ep.firstAvailableVariant ?? ep.variants[0];
+      const firstAvailVariant = ep.variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -1421,7 +1491,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         { "data-product-id": ep.product.id.replace(/^.*\//, "") }
       );
       const thumb = el("div", "lb-mix-match__modal-product-thumb");
-      const initialThumbVariant = ep.variants.find((v) => v.availableForSale) ?? ep.variants[0] ?? null;
+      const initialThumbVariant = ep.variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? ep.variants[0] ?? null;
       const initialThumbImage = initialThumbVariant?.image ?? ep.product.featuredImage ?? null;
       let thumbImg = null;
       if (initialThumbImage) {
@@ -1440,9 +1510,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
       const countBadge = el("span", "lb-bundle-qty-badge");
-      countBadge.textContent = String(
-        resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
-      );
+      countBadge.hidden = true;
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
@@ -1450,10 +1518,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       title.textContent = ep.product.title;
       info.appendChild(title);
       const price = el("p", "lb-mix-match__modal-product-price");
-      price.textContent = formatCents(
-        parseCents(currentVariant.price.amount) * resolveBundleQty2(bundle, ep.product.id, currentVariant.id),
-        currency
-      );
+      price.textContent = formatCents(parseCents(currentVariant.price.amount), currency);
       info.appendChild(price);
       const unitPrice = el(
         "p",
@@ -1470,11 +1535,59 @@ function renderModal(bundle, eligible, currency, handlers) {
         unitPrice.hidden = true;
       }
       info.appendChild(unitPrice);
+      const lowStockBadge = el("span", "lb-bundle-low-stock-badge", {
+        "data-low-stock-badge": ""
+      });
+      lowStockBadge.hidden = true;
+      info.appendChild(lowStockBadge);
+      const refreshLowStockBadge = (variant) => {
+        if (shouldShowLowStockBadge2(
+          variant,
+          rule.min,
+          bundle.widgetConfig.lowStockThreshold,
+          bundle.widgetConfig.showLowStockBadge
+        )) {
+          lowStockBadge.textContent = `Only ${variant.quantityAvailable} left`;
+          lowStockBadge.hidden = false;
+        } else {
+          lowStockBadge.hidden = true;
+        }
+      };
+      refreshLowStockBadge(currentVariant);
+      const computeStepperBounds = () => {
+        const already = alreadyInBundleFor(
+          handlers.selections,
+          ep.product.id,
+          currentVariant.id
+        );
+        const cap = maxAddableQuantity(currentVariant, rule.max, already);
+        const max = Math.max(rule.min, cap);
+        return { min: rule.min, max, cap };
+      };
+      let stepper = null;
+      if (!ep.isOos && handlers.showQtySelector) {
+        const qtyGroup = el(
+          "div",
+          "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group"
+        );
+        const qtyLabel = el("span", "lb-bundle-variant-option-label");
+        qtyLabel.textContent = "Quantity";
+        qtyGroup.appendChild(qtyLabel);
+        stepper = renderQtyStepper({
+          initial: rule.min,
+          getBounds: () => {
+            const { min, max } = computeStepperBounds();
+            return { min, max };
+          }
+        });
+        qtyGroup.appendChild(stepper.el);
+        info.appendChild(qtyGroup);
+      }
       const row = {
         el: productEl,
         product: ep.product,
         variant: firstAvailVariant,
-        updateCount: () => {
+        refreshFromSelections: () => {
         }
       };
       if (availableVariants.length > 1) {
@@ -1493,7 +1606,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           });
         };
         const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
-          if (!v.availableForSale) return false;
+          if (!isVariantFulfillable2(v, rule.min)) return false;
           if (v.selectedOptions[optionIndex]?.value !== value) return false;
           return v.selectedOptions.every(
             (o, i) => i === optionIndex || o.value === selected[i]
@@ -1518,15 +1631,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
           currentVariant = next;
           row.variant = next;
-          const nextQty = resolveBundleQty2(
-            bundle,
-            ep.product.id,
-            currentVariant.id
-          );
-          price.textContent = formatCents(
-            parseCents(currentVariant.price.amount) * nextQty,
-            currency
-          );
+          price.textContent = formatCents(parseCents(currentVariant.price.amount), currency);
           const nextUnitText = formatUnitPrice(
             currentVariant.unitPrice,
             currentVariant.unitPriceMeasurement,
@@ -1549,7 +1654,8 @@ function renderModal(bundle, eligible, currency, handlers) {
             thumbImg.alt = nextImage.altText ?? ep.product.title;
           }
           recomputeDisabled(next.selectedOptions.map((o) => o.value));
-          rowUpdateCount();
+          refreshLowStockBadge(currentVariant);
+          row.refreshFromSelections();
         };
         const groupsContainer = el("div", "lb-bundle-variant-option-groups");
         optionNames.forEach((name, position) => {
@@ -1596,25 +1702,45 @@ function renderModal(bundle, eligible, currency, handlers) {
         info.appendChild(soldOut);
       }
       productEl.appendChild(info);
-      const rowUpdateCount = () => {
-        countBadge.textContent = String(
-          resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+      let addBtn = null;
+      const refreshAddState = () => {
+        if (!addBtn) return;
+        const { cap } = computeStepperBounds();
+        const already = alreadyInBundleFor(
+          handlers.selections,
+          ep.product.id,
+          currentVariant.id
         );
+        if (already > 0) {
+          countBadge.textContent = String(already);
+          countBadge.hidden = false;
+        } else {
+          countBadge.hidden = true;
+        }
+        addBtn.disabled = handlers.isComplete() || cap < rule.min;
       };
       if (!ep.isOos) {
-        const addBtn = document.createElement("button");
+        const actions = el("div", "lb-mix-match__modal-product-actions");
+        addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
         addBtn.textContent = "Add";
         addBtn.addEventListener("click", () => {
-          if (handlers.isOverMax()) return;
-          handlers.onAdd(ep.product, currentVariant);
+          if (!addBtn || addBtn.disabled) return;
+          if (handlers.isComplete()) return;
+          const qty = stepper ? stepper.value() : rule.min;
+          handlers.onAdd(ep.product, currentVariant, qty);
+          if (stepper) stepper.reset(rule.min);
           close();
         });
-        productEl.appendChild(addBtn);
+        actions.appendChild(addBtn);
+        productEl.appendChild(actions);
       }
-      row.updateCount = ep.isOos ? () => {
-      } : rowUpdateCount;
+      row.refreshFromSelections = () => {
+        if (stepper) stepper.refresh();
+        refreshAddState();
+      };
+      row.refreshFromSelections();
       productRows.push(row);
       list.appendChild(productEl);
     });
@@ -1649,7 +1775,7 @@ function renderModal(bundle, eligible, currency, handlers) {
   let isOpen = false;
   function open() {
     if (isOpen) return;
-    if (handlers.isOverMax()) return;
+    if (handlers.isComplete()) return;
     isOpen = true;
     buildRows();
     lastFocused = overlay.getRootNode().activeElement;
@@ -1674,17 +1800,73 @@ function renderModal(bundle, eligible, currency, handlers) {
     if (e.target === overlay) close();
   }
   function refreshCounts() {
-    productRows.forEach((r) => r.updateCount());
+    productRows.forEach((r) => r.refreshFromSelections());
   }
   return { el: overlay, open, close, refreshCounts };
 }
+function renderQtyStepper(opts) {
+  const wrap = el("div", "lb-mix-match__qty-stepper", {
+    role: "group",
+    "aria-label": "Quantity"
+  });
+  const minus = document.createElement("button");
+  minus.type = "button";
+  minus.className = "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--minus";
+  minus.setAttribute("aria-label", "Decrease quantity");
+  minus.innerHTML = STEPPER_MINUS_SVG;
+  wrap.appendChild(minus);
+  const valueEl = el("span", "lb-mix-match__qty-stepper-value", {
+    "aria-live": "polite"
+  });
+  wrap.appendChild(valueEl);
+  const plus = document.createElement("button");
+  plus.type = "button";
+  plus.className = "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--plus";
+  plus.setAttribute("aria-label", "Increase quantity");
+  plus.innerHTML = STEPPER_PLUS_SVG;
+  wrap.appendChild(plus);
+  let current = clamp2(opts.initial, opts.getBounds());
+  function clamp2(n, b) {
+    return Math.max(b.min, Math.min(b.max, n));
+  }
+  function paint() {
+    const b = opts.getBounds();
+    current = clamp2(current, b);
+    valueEl.textContent = String(current);
+    minus.disabled = current <= b.min;
+    plus.disabled = current >= b.max;
+  }
+  minus.addEventListener("click", () => {
+    const b = opts.getBounds();
+    current = clamp2(current - 1, b);
+    paint();
+  });
+  plus.addEventListener("click", () => {
+    const b = opts.getBounds();
+    current = clamp2(current + 1, b);
+    paint();
+  });
+  paint();
+  return {
+    el: wrap,
+    value: () => current,
+    reset(qty) {
+      current = clamp2(qty, opts.getBounds());
+      paint();
+    },
+    refresh: paint
+  };
+}
 function buildEligibleProducts(bundle, oosBehavior) {
   const result = [];
   const seen = /* @__PURE__ */ new Set();
   for (const product of bundle.products) {
     if (seen.has(product.id)) continue;
     seen.add(product.id);
-    const available = product.variants.nodes.filter((v) => v.availableForSale);
+    const rule = ruleFor(bundle, product.id);
+    const available = product.variants.nodes.filter(
+      (v) => isVariantFulfillable2(v, rule.min)
+    );
     const isOos = available.length === 0;
     if (isOos && oosBehavior === "hide") continue;
     result.push({
@@ -1717,10 +1899,14 @@ function sanitizeId(gid) {
 }
 
 // src/renderers/volume.ts
+import { isVariantFulfillable as isVariantFulfillable3, shouldShowLowStockBadge as shouldShowLowStockBadge3 } from "@lime-bundles/core";
 function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const product = bundle.products[0];
-  const variant = product?.variants.nodes.find((v) => v.availableForSale);
+  const minTierQty = bundle.volumeTiers[0]?.minQuantity ?? 1;
+  const variant = product?.variants.nodes.find(
+    (v) => isVariantFulfillable3(v, minTierQty)
+  );
   if (!variant && wc.outOfStockBehavior === "hide") return;
   const basePriceCents = variant ? parseCents(variant.price.amount) : 0;
   const currency = variant?.price.currencyCode ?? "USD";
@@ -1819,6 +2005,18 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
       }
     ]);
   });
+  if (variant && shouldShowLowStockBadge3(
+    variant,
+    minTierQty,
+    wc.lowStockThreshold,
+    wc.showLowStockBadge
+  )) {
+    const lowStock = el("span", "lb-bundle-low-stock-badge", {
+      "data-low-stock-badge": ""
+    });
+    lowStock.textContent = `Only ${variant.quantityAvailable} left`;
+    root.appendChild(lowStock);
+  }
   root.appendChild(cta);
   root.appendChild(
     el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
@@ -1972,7 +2170,10 @@ function renderSavingsBar3(resolved, selectedIndex, currency) {
 }
 function renderCta2(bundle, onClick) {
   const product = bundle.products[0];
-  const isAvailable = product?.variants.nodes.some((v) => v.availableForSale);
+  const minTierQty = bundle.volumeTiers[0]?.minQuantity ?? 1;
+  const isAvailable = product?.variants.nodes.some(
+    (v) => isVariantFulfillable3(v, minTierQty)
+  );
   const label = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
   const button = buildCtaButton(label);
   if (!isAvailable) button.disabled = true;
@@ -2349,15 +2550,19 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: none;
 }
 
-.lb-bundle-variant-badge {
-  display: inline-block;
-  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
-  border-radius: var(--lb-variant-radius);
-  padding: 8px 12px;
+/* Read-only variant text shown below the product title when only one
+   variant is in scope (single-variant product, or merchant pinned a
+   single variant). Same visual treatment as the mix-match filled
+   slot's variant text \u2014 see .lb-mix-match__filled-variant in
+   bundle-mix-match.css. Both share this rule via the comma selector
+   so the storefront UX stays consistent across bundle types. */
+.lb-bundle-variant-badge,
+.lb-mix-match__slot--filled .lb-mix-match__filled-variant {
+  display: block;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 20px;
+  margin-top: 2px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
-  margin-top: 8px;
 }
 
 /* Per-option variant pickers. Each option's label + select sit inside a
@@ -2631,6 +2836,24 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   margin-left: auto;
 }
 
+/* "Only X left" low-stock badge \u2014 appears alongside product/variant
+   info when ProductVariant.quantityAvailable falls at or below
+   wc.lowStockThreshold. Hidden when quantityAvailable is unknown
+   (Storefront token without read_product_inventory). */
+.lb-bundle-low-stock-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--lb-low-stock-text);
+  background-color: var(--lb-low-stock-bg);
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
 /* A/B test: hide save badge until JS swaps the label (prevents flash of default) */
 .lb-ab-pending {
   visibility: hidden;
@@ -2854,12 +3077,9 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   text-decoration: underline;
 }
 
-.lb-mix-match__slot--filled .lb-mix-match__filled-variant {
-  font-size: 12px;
-  line-height: 20px;
-  margin-top: 2px;
-  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
-}
+/* .lb-mix-match__filled-variant \u2014 styled jointly with
+   .lb-bundle-variant-badge above to keep the variant text consistent
+   across mix-match and fixed bundle widgets. */
 
 .lb-mix-match__filled-price {
   /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
@@ -3067,8 +3287,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-product-thumb {
   position: relative;
-  width: 48px;
-  min-width: 48px;
+  width: 60px;
+  min-width: 60px;
   /* Modal picker thumbs follow the merchant's pickerThumbnailRatio \u2014
      independent from the main widget's thumbnailRatio so a merchant can
      e.g. show tall picker thumbs with square main thumbs. */
@@ -3117,7 +3337,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-size: 12px;
   line-height: 20px;
   color: inherit;
-  margin: 4px 0 0;
+  margin: 2px 0 0;
 }
 
 .lb-mix-match__modal-product-unit-price {
@@ -3156,6 +3376,86 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   outline-offset: 2px;
 }
 
+/* Per-pick quantity stepper inside the picker modal product row.
+   Three flex cells (\u2212 / number / +) sharing a single outer border \u2014
+   the same picker-variant border vars the variant select uses, so
+   the two pieces visually agree even when the merchant tweaks
+   --lb-picker-variant-border-width / -color / -radius. The cell
+   dividers come from a 1px border on the centre value rather than
+   per-button borders, so the rounded outer corners stay clean.
+   Mirrors extensions/bundle-theme/assets/bundle-mix-match.css so
+   the headless web component matches the Liquid theme widget. */
+/* Quantity label + stepper sit together in a .lb-bundle-variant-option-group
+   wrapper so the label-to-stepper gap inherits the same 2px the variant
+   pickers use. The wrapper carries the margin-top that spaces the qty
+   group from the unit-price / low-stock-badge above; the stepper itself
+   has no top margin so the group can be repositioned without coupling. */
+.lb-mix-match__qty-stepper-group {
+  margin-top: 8px;
+  /* Group is a flex column; without an explicit width it stretches to
+     fill the info column so the \u2212/value/+ cells get pulled apart. Pin
+     to fit-content so the wrapper hugs the stepper's natural width. */
+  width: fit-content;
+}
+
+.lb-mix-match__qty-stepper {
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 32px;
+  border: var(--lb-picker-variant-border-width) solid var(--lb-picker-variant-border-color);
+  border-radius: var(--lb-picker-variant-radius);
+  background-color: var(--lb-picker-bg);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.lb-mix-match__qty-stepper-button {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: 28px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--lb-picker-text);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lb-mix-match__qty-stepper-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--lb-picker-text) 6%, transparent);
+}
+
+.lb-mix-match__qty-stepper-button:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: -2px;
+}
+
+.lb-mix-match__qty-stepper-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.lb-mix-match__qty-stepper-value {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  padding: 0 8px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lb-picker-text);
+  box-sizing: border-box;
+}
+
 .lb-mix-match__modal-add {
   padding: 8px 20px;
   background: var(--lb-picker-add-bg);