@lime-bundles/widget 3.2.0 → 3.2.2

package/dist/index.cjs

@@ -150,6 +150,7 @@ function bindDropdown(select) {
   let optionEls = [];
   let instance;
   function syncFromSelect() {
+    trigger.disabled = select.disabled;
     const opts = readOptions(select);
     const idx = select.selectedIndex;
     triggerLabel.textContent = idx >= 0 && opts[idx] ? opts[idx].label : "";
@@ -196,7 +197,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,30 +1045,26 @@ 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 cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
+  cta.disabled = true;
+  cta.addEventListener("click", () => {
+    if (cta.disabled) return;
+    onAddToCart(buildCartLines(selections, bundle));
   });
-  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,
     selections,
     onAdd: (product, variant, quantity) => addSelection(product, variant, quantity),
-    isComplete: () => selections.length >= requiredQty
+    isComplete: () => selections.length >= requiredQty,
+    getFocusAfterAdd: () => {
+      const empty = slotsContainer.querySelector(
+        ".lb-mix-match__slot--empty"
+      );
+      return empty ?? cta;
+    }
   });
   root.appendChild(modal.el);
-  const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
-  cta.disabled = true;
-  cta.addEventListener("click", () => {
-    if (cta.disabled) return;
-    onAddToCart(buildCartLines(selections, bundle));
-  });
   root.appendChild(cta);
   root.appendChild(
     el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
@@ -1118,7 +1115,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();
   }
@@ -1200,12 +1196,14 @@ function renderProgress(requiredQty) {
   const wrap = el("div", "lb-mix-match__progress");
   const labels = el("div", "lb-mix-match__progress-labels");
   const count = el("span", "lb-mix-match__progress-count", {
-    "data-progress-count": ""
+    "data-progress-count": "",
+    "aria-live": "polite"
   });
   count.textContent = `0 of ${requiredQty} selected`;
   labels.appendChild(count);
   const remaining = el("span", "lb-mix-match__progress-remaining", {
-    "data-progress-remaining": ""
+    "data-progress-remaining": "",
+    "aria-live": "polite"
   });
   remaining.textContent = `${requiredQty} more to go`;
   labels.appendChild(remaining);
@@ -1558,14 +1556,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 +1570,6 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
         });
         qtyGroup.appendChild(stepper.el);
-        info.appendChild(qtyGroup);
       }
       const row = {
         el: productEl,
@@ -1583,12 +1578,12 @@ function renderModal(bundle, eligible, currency, handlers) {
         refreshFromSelections: () => {
         }
       };
+      const optionSelects = [];
       if (availableVariants.length > 1) {
         const optionNames = availableVariants[0].selectedOptions.map(
           (o) => o.name
         );
         const productIdTail = ep.product.id.replace(/^.*\//, "");
-        const optionSelects = [];
         const resolveVariant = (values) => availableVariants.find(
           (v) => v.selectedOptions.length === values.length && v.selectedOptions.every((o, i) => o.value === values[i])
         ) ?? null;
@@ -1697,7 +1692,13 @@ function renderModal(bundle, eligible, currency, handlers) {
       productEl.appendChild(info);
       let addBtn = null;
       const refreshAddState = () => {
-        if (!addBtn) return;
+        if (!addBtn) {
+          optionSelects.forEach((sel) => {
+            sel.disabled = true;
+          });
+          if (stepper) stepper.setExternallyDisabled(true);
+          return;
+        }
         const { cap } = computeStepperBounds();
         const already = alreadyInBundleFor(
           handlers.selections,
@@ -1710,24 +1711,46 @@ 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";
+          addBtn.setAttribute("aria-label", `Added ${ep.product.title}`);
+          productEl.classList.add("lb-mix-match__modal-product--in-bundle");
+        } else {
+          addBtn.textContent = "Add";
+          addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
+          productEl.classList.remove("lb-mix-match__modal-product--in-bundle");
+          addBtn.disabled = handlers.isComplete() || cap < rule.min;
+        }
+        const rowDisabled = addBtn.disabled;
+        optionSelects.forEach((sel) => {
+          sel.disabled = rowDisabled;
+        });
+        if (stepper) stepper.setExternallyDisabled(rowDisabled);
       };
       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";
         addBtn.textContent = "Add";
+        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
         addBtn.addEventListener("click", () => {
           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);
+          const nextFocus = handlers.getFocusAfterAdd();
+          if (nextFocus) lastFocused = nextFocus;
           close();
         });
         actions.appendChild(addBtn);
-        productEl.appendChild(actions);
+        info.appendChild(actions);
       }
       row.refreshFromSelections = () => {
         if (stepper) stepper.refresh();
@@ -1819,6 +1842,7 @@ function renderQtyStepper(opts) {
   plus.innerHTML = STEPPER_PLUS_SVG;
   wrap.appendChild(plus);
   let current = clamp2(opts.initial, opts.getBounds());
+  let externallyDisabled = false;
   function clamp2(n, b) {
     return Math.max(b.min, Math.min(b.max, n));
   }
@@ -1826,8 +1850,8 @@ function renderQtyStepper(opts) {
     const b = opts.getBounds();
     current = clamp2(current, b);
     valueEl.textContent = String(current);
-    minus.disabled = current <= b.min;
-    plus.disabled = current >= b.max;
+    minus.disabled = externallyDisabled || current <= b.min;
+    plus.disabled = externallyDisabled || current >= b.max;
   }
   minus.addEventListener("click", () => {
     const b = opts.getBounds();
@@ -1847,7 +1871,11 @@ function renderQtyStepper(opts) {
       current = clamp2(qty, opts.getBounds());
       paint();
     },
-    refresh: paint
+    refresh: paint,
+    setExternallyDisabled(disabled) {
+      externallyDisabled = disabled;
+      paint();
+    }
   };
 }
 function buildEligibleProducts(bundle, oosBehavior) {
@@ -2494,6 +2522,13 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   text-decoration: underline;
 }
 
+a.lb-bundle-product-name:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 0;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
 .lb-bundle-product-price {
   /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-price-display, block);
@@ -2567,7 +2602,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 +2624,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
@@ -2926,6 +2977,7 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 .lb-bundle-variant-select:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 `;
 var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
@@ -3003,7 +3055,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__slot--empty:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: -2px;
+  box-shadow: none;
   border-radius: 8px;
 }
 
@@ -3070,6 +3123,13 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   text-decoration: underline;
 }
 
+.lb-mix-match__slot--filled a.lb-mix-match__filled-title:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
 /* .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. */
@@ -3115,18 +3175,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__slot-remove:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  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);
+  outline-offset: -2px;
+  box-shadow: none;
 }
 
 /* === Modal Overlay === */
@@ -3157,7 +3207,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;
@@ -3206,7 +3256,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-close:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: 0;
+  box-shadow: none;
 }
 
 /* === Modal Search === */
@@ -3234,9 +3285,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   color: color-mix(in srgb, var(--lb-picker-text) 50%, transparent);
 }
 
-.lb-mix-match__modal-search-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--lb-primary-color);
+.lb-mix-match__modal-search-input:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-mix-match__modal-search-clear {
@@ -3267,10 +3319,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);
 }
 
@@ -3367,6 +3421,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__variant-select:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 /* Per-pick quantity stepper inside the picker modal product row.
@@ -3383,10 +3438,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;
 }
 
@@ -3394,7 +3450,6 @@ 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-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);
@@ -3421,13 +3476,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   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;
+  box-shadow: none;
 }
 
 .lb-mix-match__qty-stepper-button:disabled {
@@ -3448,8 +3500,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);
@@ -3458,8 +3526,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 {
@@ -3469,6 +3535,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-add:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-mix-match__modal-add:disabled {
@@ -3482,6 +3549,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;
@@ -3578,12 +3653,14 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
   border-color: var(--lb-tier-selected-border-color);
 }
 
-/* Suppress the UA default focus outline so a freshly-clicked selected
-   tier doesn't briefly show the 1px focus ring on top of (or in place of)
-   the custom selected-state outline below. Keyboard focus is still
-   indicated by the :focus-visible rule. */
+/* Suppress the UA default focus outline + Dawn's focus shadow so a
+   freshly-clicked selected tier doesn't briefly show the 1px focus ring
+   or shadow on top of (or in place of) the custom selected-state
+   outline below. Keyboard focus is still indicated by the
+   :focus-visible rule. */
 .lb-volume__tier:focus {
   outline: none;
+  box-shadow: none;
 }
 
 /* Keyboard focus indicator \u2014 explicitly excludes the selected tier so
@@ -3591,7 +3668,8 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
    outline property when both states apply at once. */
 .lb-volume__tier:focus-visible:not([aria-checked="true"]) {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: -2px;
+  box-shadow: none;
 }
 
 .lb-volume__tier[aria-checked="true"] {
@@ -3739,6 +3817,7 @@ var BUNDLE_DROPDOWN_CSS = `/**
 .lb-dropdown-trigger:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-dropdown-trigger[aria-expanded="true"] {