@lime-bundles/widget 3.1.0 → 3.2.1

package/dist/index.cjs

@@ -196,7 +196,7 @@ 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 scrollable = findScrollableAncestor(trigger);
     const clip = scrollable ? (() => {
       const r = scrollable.getBoundingClientRect();
       return { top: r.top, bottom: r.bottom };
@@ -1044,16 +1044,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   root.appendChild(pricingSection.el);
   const savingsBar = wc.savingsBar.visible ? renderSavingsBar2() : null;
   if (savingsBar) root.appendChild(savingsBar.el);
-  const placeholder = el("div", "lb-mix-match__price-placeholder", {
-    "data-price-placeholder": ""
-  });
-  const placeholderText = el(
-    "span",
-    "lb-mix-match__price-placeholder-text"
-  );
-  placeholderText.textContent = `Select ${requiredQty} items to see price`;
-  placeholder.appendChild(placeholderText);
-  root.appendChild(placeholder);
   const modal = renderModal(bundle, eligible, currency, {
     showSearch: wc.showSearch,
     showQtySelector,
@@ -1118,7 +1108,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     progress.update(selections.length);
     pricingSection.update(selections, bundle, currency);
     if (savingsBar) savingsBar.update(selections, bundle, currency);
-    placeholder.style.display = selections.length === 0 ? "" : "none";
     modal.refreshCounts();
     updateCta();
   }
@@ -1558,14 +1547,12 @@ function renderModal(bundle, eligible, currency, handlers) {
         return { min: rule.min, max, cap };
       };
       let stepper = null;
+      let qtyGroup = null;
       if (!ep.isOos && handlers.showQtySelector) {
-        const qtyGroup = el(
+        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: () => {
@@ -1574,7 +1561,6 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
         });
         qtyGroup.appendChild(stepper.el);
-        info.appendChild(qtyGroup);
       }
       const row = {
         el: productEl,
@@ -1710,10 +1696,22 @@ function renderModal(bundle, eligible, currency, handlers) {
         } else {
           countBadge.hidden = true;
         }
-        addBtn.disabled = handlers.isComplete() || cap < rule.min;
+        const productInBundle = handlers.selections.some(
+          (s) => s.productId === ep.product.id
+        );
+        if (productInBundle) {
+          addBtn.disabled = true;
+          addBtn.textContent = "Added";
+          productEl.classList.add("lb-mix-match__modal-product--in-bundle");
+        } else {
+          addBtn.textContent = "Add";
+          productEl.classList.remove("lb-mix-match__modal-product--in-bundle");
+          addBtn.disabled = handlers.isComplete() || cap < rule.min;
+        }
       };
       if (!ep.isOos) {
         const actions = el("div", "lb-mix-match__modal-product-actions");
+        if (qtyGroup) actions.appendChild(qtyGroup);
         addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
@@ -1727,7 +1725,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           close();
         });
         actions.appendChild(addBtn);
-        productEl.appendChild(actions);
+        info.appendChild(actions);
       }
       row.refreshFromSelections = () => {
         if (stepper) stepper.refresh();
@@ -2567,7 +2565,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-variant-option-groups {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   margin-top: 8px;
 }
 
@@ -2589,7 +2587,23 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 }
 
 .lb-mix-match__modal-product-info .lb-bundle-variant-option-groups {
-  margin-top: 4px;
+  margin-top: 8px;
+}
+
+/* Desktop: lay variant option groups in a wrapping row inside the modal
+   (Size + Color side-by-side). Mobile keeps the column stack from the
+   base rule above. The 768px breakpoint mirrors bundle-mix-match.css. */
+@media (min-width: 768px) {
+  .lb-mix-match__modal-product-info .lb-bundle-variant-option-groups {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  /* Direct children only \u2014 the qty-stepper-group is also a
+     .lb-bundle-variant-option-group but lives in the actions wrapper
+     and must keep its natural width. */
+  .lb-mix-match__modal-product-info .lb-bundle-variant-option-groups > .lb-bundle-variant-option-group {
+    flex: 1;
+  }
 }
 
 /* Focus-ring suppression for mouse users. A small JS helper \u2014 see
@@ -3118,17 +3132,6 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   outline-offset: 2px;
 }
 
-/* Price placeholder */
-.lb-mix-match__price-placeholder {
-  padding: 4px 0 16px;
-  text-align: center;
-}
-
-.lb-mix-match__price-placeholder-text {
-  font-size: 16px;
-  color: var(--lb-text);
-}
-
 /* === Modal Overlay === */
 .lb-mix-match__modal-overlay {
   position: fixed;
@@ -3157,7 +3160,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
   box-sizing: border-box;
   width: 100%;
-  max-width: 480px;
+  max-width: 520px;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
@@ -3267,10 +3270,12 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 }
 
 .lb-mix-match__modal-product {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 12px 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  column-gap: 20px;
+  padding-top: 20px;
+  padding-bottom: 16px;
   border-bottom: 1px solid color-mix(in srgb, var(--lb-picker-text) 7%, transparent);
 }
 
@@ -3371,11 +3376,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 /* 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.
+   driven by its own --lb-picker-qty-stepper-* variables so merchants
+   can style the stepper independently of the variant dropdown. 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
@@ -3384,10 +3388,11 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
    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. */
+  /* Override the base .lb-bundle-variant-option-group column flex so the
+     stepper child stretches on the cross-axis (vertical) \u2014 this is what
+     lets the group track the Add button's height in the action row
+     without pinning a fixed pixel value. */
+  flex-direction: row;
   width: fit-content;
 }
 
@@ -3395,9 +3400,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   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);
+  border: var(--lb-picker-qty-stepper-border-width) solid var(--lb-picker-qty-stepper-border-color);
+  border-radius: var(--lb-picker-qty-stepper-radius);
   background-color: var(--lb-picker-bg);
   overflow: hidden;
   box-sizing: border-box;
@@ -3449,8 +3453,24 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   box-sizing: border-box;
 }
 
+/* Action row \u2014 qty stepper (left) + Add button (right). Sits at the
+   bottom of the info column with a 12px top margin so it visually
+   separates from the variant pickers / price block above. When the
+   stepper is hidden, Add fills the row via flex: 1 below.
+   align-items: stretch so the stepper-group tracks the Add button's
+   height (driven by font size + button padding) without a pinned px. */
+.lb-mix-match__modal-product-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  row-gap: 12px;
+  column-gap: 8px;
+  margin-top: 12px;
+}
+
 .lb-mix-match__modal-add {
-  padding: 8px 20px;
+  flex: 1;
+  padding: 10px 20px;
   background: var(--lb-picker-add-bg);
   color: var(--lb-picker-add-label);
   border: var(--lb-picker-add-border-width) solid var(--lb-picker-add-border-color);
@@ -3459,8 +3479,6 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
 }
 
 .lb-mix-match__modal-add:hover {
@@ -3483,6 +3501,14 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   opacity: 0.5;
 }
 
+/* Already in a slot \u2014 prevents shoppers from filling multiple slots
+   with the same product (which wouldn't qualify the discount: it
+   counts distinct products, not slot occupancy). The thumb keeps
+   its qty badge so the shopper sees what's already in the bundle. */
+.lb-mix-match__modal-product--in-bundle {
+  opacity: 0.5;
+}
+
 .lb-mix-match__modal-product--sold-out .lb-mix-match__modal-sold-out-label {
   font-size: 12px;
   color: inherit;