@lime-bundles/widget 4.6.3 → 4.6.5

package/dist/index.cjs

@@ -257,6 +257,7 @@ function recalcPricing(container, products, formatMoney) {
         savingsPercentEl.textContent = "(" + pct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -2458,7 +2459,7 @@ function seedSelection(eligibleProducts, rulesMap, requiredQty, courtesy) {
     required.push(pick(p, v2, Math.max(1, rule.min)));
   }
   if (required.length || !courtesy?.enabled) return required;
-  const qualifies = (p) => p.available && ruleFor(p.id, rulesMap).min <= requiredQty;
+  const qualifies = (p) => p.available && ruleFor(p.id, rulesMap).min <= requiredQty && firstAvailable(p) !== null;
   const seed = (courtesy.currentProductId != null ? eligibleProducts.find(
     (p) => p.id === courtesy.currentProductId && qualifies(p)
   ) : null) ?? eligibleProducts.find(qualifies);
@@ -2496,6 +2497,7 @@ function el(tag, className, attrs = {}) {
 }
 function buildPickerModal(opts) {
   const titleId = "lb-modal-title-" + opts.domId;
+  const s = opts.strings || {};
   const overlay = el("div", "lb-mix-match__modal-overlay", {
     "data-modal-overlay": "",
     "data-bundle-gid": opts.bundleGid,
@@ -2516,7 +2518,7 @@ function buildPickerModal(opts) {
   const heading = el("div", "lb-mix-match__modal-heading");
   const title = el("h4", "lb-mix-match__modal-title", { id: titleId });
   if (opts.wizard) title.setAttribute("tabindex", "-1");
-  title.textContent = "Add to your bundle";
+  title.textContent = s.addToBundle || "Add to your bundle";
   heading.appendChild(title);
   heading.appendChild(
     el("p", "lb-mix-match__modal-subtitle", { "data-modal-subtitle": "" })
@@ -2525,7 +2527,7 @@ function buildPickerModal(opts) {
   const close = el("button", "lb-mix-match__modal-close", {
     type: "button",
     "data-modal-close": "",
-    "aria-label": "Close"
+    "aria-label": s.closeModal || "Close"
   });
   close.appendChild(
     icon([
@@ -2566,15 +2568,15 @@ function buildPickerModal(opts) {
       type: "text",
       "data-modal-search": "",
       role: "searchbox",
-      "aria-label": "Search products",
-      placeholder: "Search products",
+      "aria-label": s.searchProducts || "Search products",
+      placeholder: s.searchProducts || "Search products",
       autocomplete: "off"
     });
     search.appendChild(input);
     const clear = el("button", "lb-mix-match__modal-search-clear", {
       type: "button",
       "data-modal-search-clear": "",
-      "aria-label": "Clear search",
+      "aria-label": s.clearSearch || "Clear search",
       style: "display: none;"
     });
     clear.appendChild(
@@ -2603,7 +2605,7 @@ function buildPickerModal(opts) {
     style: "display: none;"
   });
   const emptyText = document.createElement("p");
-  emptyText.textContent = "No products match your search";
+  emptyText.textContent = s.noSearchResults || "No products match your search";
   empty.appendChild(emptyText);
   dialog.appendChild(empty);
   dialog.appendChild(
@@ -2622,7 +2624,7 @@ function buildPickerModal(opts) {
       "data-modal-back": "",
       style: "display: none;"
     });
-    back.textContent = "Back";
+    back.textContent = s.back || "Back";
     footer.appendChild(back);
   }
   footer.appendChild(
@@ -2637,7 +2639,7 @@ function buildPickerModal(opts) {
       "data-modal-next": "",
       style: "display: none;"
     });
-    next.textContent = "Next";
+    next.textContent = s.next || "Next";
     footer.appendChild(next);
   }
   const done = el("button", "lb-mix-match__modal-done", {
@@ -2645,7 +2647,7 @@ function buildPickerModal(opts) {
     "data-modal-done": "",
     ...opts.wizard ? { style: "display: none;" } : {}
   });
-  done.textContent = "Done";
+  done.textContent = s.done || "Done";
   footer.appendChild(done);
   dialog.appendChild(footer);
   overlay.appendChild(dialog);
@@ -2963,6 +2965,7 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
         savingsPercentEl.textContent = "(" + savingsPct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -3146,6 +3149,7 @@ function recalcPricing2(container, sides, percent, buyQty, getQty, formatMoney)
         savingsPercentEl.textContent = "(" + pct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -4698,6 +4702,43 @@ a.lb-bundle-product-name:focus-visible {
   gap: 4px;
 }
 
+/* Variant picker select \u2014 styled to match the variant badge aesthetic.
+   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
+   by the group/groups flex gap, not the select itself.
+
+   Lives here, not in bundle-fixed.css, because every widget that renders an
+   option group needs it and only the fixed widget loads that stylesheet: a
+   page carrying just a Buy X Get Y bundle rendered raw browser selects, and
+   the option-group height reservation (sized for the styled control) was
+   wrong by 14px a group, which shifted the row on hydration.
+   The same split applies to the headless package, which injects per type. */
+.lb-bundle-variant-select {
+  display: inline-block;
+  border: var(--lb-border-width) solid var(--lb-border);
+  border-radius: var(--lb-radius);
+  padding: 8px 32px 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text);
+  background: var(--lb-bg);
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: var(--lb-variant-chevron);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 12px;
+  width: 50%;
+  max-width: 50%;
+}
+
+.lb-bundle-variant-select:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
 .lb-bundle-variant-option-label {
   display: block;
   margin: 0;
@@ -5019,6 +5060,16 @@ a.lb-bundle-product-name:focus-visible {
   white-space: nowrap;
 }
 
+/* The savings line is laid out from first paint and revealed on hydration,
+   rather than being display:none until then.
+   Its amounts are money strings the server cannot know, so filling them in
+   place moves whatever shares the line; revealing an already-laid-out box
+   moves nothing. The band around it is vertically centred, so reserving the
+   line costs no height of its own. JS drops the class in updatePricing. */
+.lb-bundle-savings-line.lb-savings-pending {
+  visibility: hidden;
+}
+
 /* A/B test: hide save badge until JS swaps the label (prevents flash of default) */
 .lb-ab-pending {
   visibility: hidden;
@@ -5036,27 +5087,43 @@ a.lb-bundle-product-name:focus-visible {
    The title is the one box NOT reserved this way: text wrapping depends on the
    merchant's font, so it is server-rendered and its height is simply real. */
 
+/* A zero-width space, not a pixel height.
+   These boxes are one line of text once JS fills them, and their height is
+   whatever the merchant's font makes of \`line-height: normal\` \u2014 which the
+   reset at the top of this file forces on every descendant, overriding the
+   per-element line-heights above it. A hardcoded min-height therefore has to
+   guess, and guessed 3px too tall: the row shrank on hydration in every theme.
+   An empty line box measures exactly what the filled one will. */
 .lb-bundle-product-price:empty {
   display: inline-block;
-  min-height: 20px;
 }
 
 .lb-bundle-variant-badge:empty {
   display: block;
-  min-height: 20px;
 }
 
 .lb-bundle-product-unit-price:empty {
   display: block;
-  min-height: 16px;
+}
+
+.lb-bundle-product-price:empty::before,
+.lb-bundle-variant-badge:empty::before,
+.lb-bundle-product-unit-price:empty::before,
+.lb-bundle-qty-inline:empty::before,
+.lb-bundle-sale-price:empty::before,
+.lb-bundle-compare-price:empty::before {
+  content: "\\200B";
 }
 
 /* Label (16) + gap (4) + trigger (8 + 16 + 8 padding/line-height) per group,
    plus the 8px gap between groups. --lb-row-option-count is set per row by
-   Liquid, which knows how many options the product has. */
+   Liquid, which knows how many options the product has.
+
+   The trigger is border-box, so its border is already inside that 52px; the
+   calc used to add it again and reserved 2px per group too much. */
 .lb-bundle-variant-option-groups:empty {
   min-height: calc(
-    var(--lb-row-option-count, 1) * (52px + 2 * var(--lb-border-width)) +
+    var(--lb-row-option-count, 1) * 52px +
       (var(--lb-row-option-count, 1) - 1) * 8px
   );
 }
@@ -5136,36 +5203,6 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-
-/* Variant picker select \u2014 styled to match the variant badge aesthetic.
-   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
-   by the group/groups flex gap, not the select itself. */
-.lb-bundle-variant-select {
-  display: inline-block;
-  border: var(--lb-border-width) solid var(--lb-border);
-  border-radius: var(--lb-radius);
-  padding: 8px 32px 8px 12px;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--lb-text);
-  background: var(--lb-bg);
-  font-family: inherit;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: var(--lb-variant-chevron);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  background-size: 12px;
-  width: 50%;
-  max-width: 50%;
-}
-
-.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 */
 
@@ -6488,6 +6525,15 @@ var BUNDLE_BOGO_CSS = `/* Lime Bundles \u2014 BOGO (Buy X Get Y) bundle styles *
   text-decoration: line-through;
   opacity: 0.6;
 }
+
+/* The reward row's struck original is emitted empty and filled on hydration,
+   so anything sharing its line moves when it appears. The count is the only
+   such thing, and it is a count, not part of the price phrase: pinning it to
+   the row's right edge makes its position independent of the price text \u2014 the
+   same right-slot treatment the fixed widget gives its quantity chip. */
+.lb-bogo .lb-bundle-qty-inline {
+  margin-left: auto;
+}
 `;
 var BUNDLE_MULTI_STEP_CSS = `/**
  * Lime Bundles \u2014 Multi-step bundle widget styles (wizard chrome ONLY).

package/dist/index.js

@@ -256,6 +256,7 @@ function recalcPricing(container, products, formatMoney) {
         savingsPercentEl.textContent = "(" + pct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -2457,7 +2458,7 @@ function seedSelection(eligibleProducts, rulesMap, requiredQty, courtesy) {
     required.push(pick(p, v2, Math.max(1, rule.min)));
   }
   if (required.length || !courtesy?.enabled) return required;
-  const qualifies = (p) => p.available && ruleFor(p.id, rulesMap).min <= requiredQty;
+  const qualifies = (p) => p.available && ruleFor(p.id, rulesMap).min <= requiredQty && firstAvailable(p) !== null;
   const seed = (courtesy.currentProductId != null ? eligibleProducts.find(
     (p) => p.id === courtesy.currentProductId && qualifies(p)
   ) : null) ?? eligibleProducts.find(qualifies);
@@ -2495,6 +2496,7 @@ function el(tag, className, attrs = {}) {
 }
 function buildPickerModal(opts) {
   const titleId = "lb-modal-title-" + opts.domId;
+  const s = opts.strings || {};
   const overlay = el("div", "lb-mix-match__modal-overlay", {
     "data-modal-overlay": "",
     "data-bundle-gid": opts.bundleGid,
@@ -2515,7 +2517,7 @@ function buildPickerModal(opts) {
   const heading = el("div", "lb-mix-match__modal-heading");
   const title = el("h4", "lb-mix-match__modal-title", { id: titleId });
   if (opts.wizard) title.setAttribute("tabindex", "-1");
-  title.textContent = "Add to your bundle";
+  title.textContent = s.addToBundle || "Add to your bundle";
   heading.appendChild(title);
   heading.appendChild(
     el("p", "lb-mix-match__modal-subtitle", { "data-modal-subtitle": "" })
@@ -2524,7 +2526,7 @@ function buildPickerModal(opts) {
   const close = el("button", "lb-mix-match__modal-close", {
     type: "button",
     "data-modal-close": "",
-    "aria-label": "Close"
+    "aria-label": s.closeModal || "Close"
   });
   close.appendChild(
     icon([
@@ -2565,15 +2567,15 @@ function buildPickerModal(opts) {
       type: "text",
       "data-modal-search": "",
       role: "searchbox",
-      "aria-label": "Search products",
-      placeholder: "Search products",
+      "aria-label": s.searchProducts || "Search products",
+      placeholder: s.searchProducts || "Search products",
       autocomplete: "off"
     });
     search.appendChild(input);
     const clear = el("button", "lb-mix-match__modal-search-clear", {
       type: "button",
       "data-modal-search-clear": "",
-      "aria-label": "Clear search",
+      "aria-label": s.clearSearch || "Clear search",
       style: "display: none;"
     });
     clear.appendChild(
@@ -2602,7 +2604,7 @@ function buildPickerModal(opts) {
     style: "display: none;"
   });
   const emptyText = document.createElement("p");
-  emptyText.textContent = "No products match your search";
+  emptyText.textContent = s.noSearchResults || "No products match your search";
   empty.appendChild(emptyText);
   dialog.appendChild(empty);
   dialog.appendChild(
@@ -2621,7 +2623,7 @@ function buildPickerModal(opts) {
       "data-modal-back": "",
       style: "display: none;"
     });
-    back.textContent = "Back";
+    back.textContent = s.back || "Back";
     footer.appendChild(back);
   }
   footer.appendChild(
@@ -2636,7 +2638,7 @@ function buildPickerModal(opts) {
       "data-modal-next": "",
       style: "display: none;"
     });
-    next.textContent = "Next";
+    next.textContent = s.next || "Next";
     footer.appendChild(next);
   }
   const done = el("button", "lb-mix-match__modal-done", {
@@ -2644,7 +2646,7 @@ function buildPickerModal(opts) {
     "data-modal-done": "",
     ...opts.wizard ? { style: "display: none;" } : {}
   });
-  done.textContent = "Done";
+  done.textContent = s.done || "Done";
   footer.appendChild(done);
   dialog.appendChild(footer);
   overlay.appendChild(dialog);
@@ -2969,6 +2971,7 @@ function selectTier(container, allTiers, basePrice, discountType, index, transla
         savingsPercentEl.textContent = "(" + savingsPct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -3152,6 +3155,7 @@ function recalcPricing2(container, sides, percent, buyQty, getQty, formatMoney)
         savingsPercentEl.textContent = "(" + pct + "%)";
       }
       savingsBar.style.display = "";
+      savingsBar.classList.remove("lb-savings-pending");
     } else {
       savingsBar.style.display = "none";
     }
@@ -4708,6 +4712,43 @@ a.lb-bundle-product-name:focus-visible {
   gap: 4px;
 }
 
+/* Variant picker select \u2014 styled to match the variant badge aesthetic.
+   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
+   by the group/groups flex gap, not the select itself.
+
+   Lives here, not in bundle-fixed.css, because every widget that renders an
+   option group needs it and only the fixed widget loads that stylesheet: a
+   page carrying just a Buy X Get Y bundle rendered raw browser selects, and
+   the option-group height reservation (sized for the styled control) was
+   wrong by 14px a group, which shifted the row on hydration.
+   The same split applies to the headless package, which injects per type. */
+.lb-bundle-variant-select {
+  display: inline-block;
+  border: var(--lb-border-width) solid var(--lb-border);
+  border-radius: var(--lb-radius);
+  padding: 8px 32px 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text);
+  background: var(--lb-bg);
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: var(--lb-variant-chevron);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 12px;
+  width: 50%;
+  max-width: 50%;
+}
+
+.lb-bundle-variant-select:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
 .lb-bundle-variant-option-label {
   display: block;
   margin: 0;
@@ -5029,6 +5070,16 @@ a.lb-bundle-product-name:focus-visible {
   white-space: nowrap;
 }
 
+/* The savings line is laid out from first paint and revealed on hydration,
+   rather than being display:none until then.
+   Its amounts are money strings the server cannot know, so filling them in
+   place moves whatever shares the line; revealing an already-laid-out box
+   moves nothing. The band around it is vertically centred, so reserving the
+   line costs no height of its own. JS drops the class in updatePricing. */
+.lb-bundle-savings-line.lb-savings-pending {
+  visibility: hidden;
+}
+
 /* A/B test: hide save badge until JS swaps the label (prevents flash of default) */
 .lb-ab-pending {
   visibility: hidden;
@@ -5046,27 +5097,43 @@ a.lb-bundle-product-name:focus-visible {
    The title is the one box NOT reserved this way: text wrapping depends on the
    merchant's font, so it is server-rendered and its height is simply real. */
 
+/* A zero-width space, not a pixel height.
+   These boxes are one line of text once JS fills them, and their height is
+   whatever the merchant's font makes of \`line-height: normal\` \u2014 which the
+   reset at the top of this file forces on every descendant, overriding the
+   per-element line-heights above it. A hardcoded min-height therefore has to
+   guess, and guessed 3px too tall: the row shrank on hydration in every theme.
+   An empty line box measures exactly what the filled one will. */
 .lb-bundle-product-price:empty {
   display: inline-block;
-  min-height: 20px;
 }
 
 .lb-bundle-variant-badge:empty {
   display: block;
-  min-height: 20px;
 }
 
 .lb-bundle-product-unit-price:empty {
   display: block;
-  min-height: 16px;
+}
+
+.lb-bundle-product-price:empty::before,
+.lb-bundle-variant-badge:empty::before,
+.lb-bundle-product-unit-price:empty::before,
+.lb-bundle-qty-inline:empty::before,
+.lb-bundle-sale-price:empty::before,
+.lb-bundle-compare-price:empty::before {
+  content: "\\200B";
 }
 
 /* Label (16) + gap (4) + trigger (8 + 16 + 8 padding/line-height) per group,
    plus the 8px gap between groups. --lb-row-option-count is set per row by
-   Liquid, which knows how many options the product has. */
+   Liquid, which knows how many options the product has.
+
+   The trigger is border-box, so its border is already inside that 52px; the
+   calc used to add it again and reserved 2px per group too much. */
 .lb-bundle-variant-option-groups:empty {
   min-height: calc(
-    var(--lb-row-option-count, 1) * (52px + 2 * var(--lb-border-width)) +
+    var(--lb-row-option-count, 1) * 52px +
       (var(--lb-row-option-count, 1) - 1) * 8px
   );
 }
@@ -5146,36 +5213,6 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-
-/* Variant picker select \u2014 styled to match the variant badge aesthetic.
-   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
-   by the group/groups flex gap, not the select itself. */
-.lb-bundle-variant-select {
-  display: inline-block;
-  border: var(--lb-border-width) solid var(--lb-border);
-  border-radius: var(--lb-radius);
-  padding: 8px 32px 8px 12px;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--lb-text);
-  background: var(--lb-bg);
-  font-family: inherit;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: var(--lb-variant-chevron);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  background-size: 12px;
-  width: 50%;
-  max-width: 50%;
-}
-
-.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 */
 
@@ -6498,6 +6535,15 @@ var BUNDLE_BOGO_CSS = `/* Lime Bundles \u2014 BOGO (Buy X Get Y) bundle styles *
   text-decoration: line-through;
   opacity: 0.6;
 }
+
+/* The reward row's struck original is emitted empty and filled on hydration,
+   so anything sharing its line moves when it appears. The count is the only
+   such thing, and it is a count, not part of the price phrase: pinning it to
+   the row's right edge makes its position independent of the price text \u2014 the
+   same right-slot treatment the fixed widget gives its quantity chip. */
+.lb-bogo .lb-bundle-qty-inline {
+  margin-left: auto;
+}
 `;
 var BUNDLE_MULTI_STEP_CSS = `/**
  * Lime Bundles \u2014 Multi-step bundle widget styles (wizard chrome ONLY).