@lime-bundles/widget 4.6.4 → 4.6.6

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";
     }
@@ -380,6 +381,55 @@ function buildOptionGroups(container, product, selected) {
   }
 }
 
+// ../render/src/product/placeholder.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var PLACEHOLDER_ATTR = "data-lb-placeholder";
+var PLACEHOLDER_CLASS = "lb-thumb--placeholder";
+function builtInMark() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "lb-bundle-placeholder-icon");
+  svg.setAttribute("viewBox", "0 0 48 48");
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", "15");
+  rect.setAttribute("y", "15");
+  rect.setAttribute("width", "18");
+  rect.setAttribute("height", "18");
+  rect.setAttribute("rx", "2");
+  svg.appendChild(rect);
+  const dot = document.createElementNS(SVG_NS, "circle");
+  dot.setAttribute("cx", "20.5");
+  dot.setAttribute("cy", "20.5");
+  dot.setAttribute("r", "1.5");
+  svg.appendChild(dot);
+  const ridge = document.createElementNS(SVG_NS, "path");
+  ridge.setAttribute("d", "M33 27l-5-5L17 33");
+  svg.appendChild(ridge);
+  return svg;
+}
+var make = builtInMark;
+function mark() {
+  const node = make();
+  const el2 = node.nodeType === 1 ? node : null;
+  if (el2) {
+    el2.setAttribute(PLACEHOLDER_ATTR, "");
+    el2.setAttribute("aria-hidden", "true");
+    el2.setAttribute("focusable", "false");
+  }
+  return node;
+}
+function showThumbnailPlaceholder(box2) {
+  const img = box2.querySelector("img");
+  if (img) img.remove();
+  box2.classList.add(PLACEHOLDER_CLASS);
+  if (box2.querySelector("[" + PLACEHOLDER_ATTR + "]")) return;
+  box2.appendChild(mark());
+}
+function hideThumbnailPlaceholder(box2) {
+  const existing = box2.querySelector("[" + PLACEHOLDER_ATTR + "]");
+  if (existing) existing.remove();
+  box2.classList.remove(PLACEHOLDER_CLASS);
+}
+
 // ../render/src/product/row.ts
 var productImgSrc = /* @__PURE__ */ new WeakMap();
 function updateThumbnail(row, variant, productImage) {
@@ -390,8 +440,12 @@ function updateThumbnail(row, variant, productImage) {
     const seed = productImage || (img ? img.src : null);
     if (seed) productImgSrc.set(row, seed);
   }
-  const nextSrc = variant.image || productImgSrc.get(row) || null;
-  if (!nextSrc) return;
+  const nextSrc = variant && variant.image || productImgSrc.get(row) || null;
+  if (!nextSrc) {
+    showThumbnailPlaceholder(thumb);
+    return;
+  }
+  hideThumbnailPlaceholder(thumb);
   if (img) {
     img.src = nextSrc;
     img.srcset = "";
@@ -410,7 +464,10 @@ function updateInlineQuantity(row, qty) {
   el2.textContent = "\xD7" + qty;
 }
 function applyVariant(row, variant, product, formatMoney) {
-  if (!variant) return;
+  if (!variant) {
+    updateThumbnail(row, null, product.featuredImage);
+    return;
+  }
   updateThumbnail(row, variant, product.featuredImage);
   updateInlineQuantity(row, variant.quantity || product.quantity || 1);
   const priceEl = row.querySelector("[data-product-price]");
@@ -460,8 +517,11 @@ function buildRowSkeleton(product, t, opts) {
   if (opts.bogoRole) row.setAttribute("data-bogo-role", opts.bogoRole);
   const thumb = box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
   const ratio = product.featuredImageRatio;
-  if (opts.thumbnailRatio === "original" && ratio != null && ratio > 0) {
-    thumb.style.setProperty("--lb-row-thumb-ratio", String(ratio));
+  if (opts.thumbnailRatio === "original") {
+    thumb.style.setProperty(
+      "--lb-row-thumb-ratio",
+      String(ratio != null && ratio > 0 ? ratio : 1)
+    );
   }
   row.appendChild(thumb);
   const info = box("div", "lb-bundle-product-info");
@@ -1426,17 +1486,25 @@ function buildPickerRow(p, rowIndex, ctx) {
   addedBadge.textContent = t.addedItem || "Added";
   addedBadge.hidden = true;
   thumbDiv.appendChild(addedBadge);
+  const paintThumb = (src) => {
+    if (!src) {
+      showThumbnailPlaceholder(thumbDiv);
+      return;
+    }
+    hideThumbnailPlaceholder(thumbDiv);
+    let img = thumbDiv.querySelector("img");
+    if (!img) {
+      img = document.createElement("img");
+      img.sizes = PICKER_SIZES;
+      img.alt = p.title;
+      img.loading = "lazy";
+      thumbDiv.appendChild(img);
+    }
+    img.src = imgWidth(src, PICKER_BASE_WIDTH);
+    img.srcset = srcset(src, PICKER_WIDTHS);
+  };
   const firstAvailable = p.variants.find((v) => v.available) ?? null;
-  const initialThumbSrc = firstAvailable && firstAvailable.image || p.featuredImage;
-  if (initialThumbSrc) {
-    const img = document.createElement("img");
-    img.src = imgWidth(initialThumbSrc, PICKER_BASE_WIDTH);
-    img.srcset = srcset(initialThumbSrc, PICKER_WIDTHS);
-    img.sizes = PICKER_SIZES;
-    img.alt = p.title;
-    img.loading = "lazy";
-    thumbDiv.appendChild(img);
-  }
+  paintThumb(firstAvailable && firstAvailable.image || p.featuredImage);
   row.appendChild(thumbDiv);
   const infoDiv = document.createElement("div");
   infoDiv.className = "lb-mix-match__modal-product-info";
@@ -1647,12 +1715,7 @@ function buildPickerRow(p, rowIndex, ctx) {
         unitPriceEl.textContent = "";
         unitPriceEl.hidden = true;
       }
-      const rowImg = thumbDiv.querySelector("img");
-      const imgSrc = v.image || p.featuredImage;
-      if (rowImg && imgSrc) {
-        rowImg.src = imgWidth(imgSrc, PICKER_BASE_WIDTH);
-        rowImg.srcset = srcset(imgSrc, PICKER_WIDTHS);
-      }
+      paintThumb(v.image || p.featuredImage);
       setBoundsForVariant?.(v, capacity.variantUnitsElsewhere(v.id));
       if (v.options) recomputeDisabled(v.options);
       refresh();
@@ -2230,6 +2293,8 @@ function buildSlotCard(item, trans, formatMoney, removable, onRemove, onEdit) {
     img.alt = item.title;
     img.loading = "lazy";
     thumb.appendChild(img);
+  } else {
+    showThumbnailPlaceholder(thumb);
   }
   card.appendChild(thumb);
   const info = document.createElement("div");
@@ -2458,7 +2523,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 +2561,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 +2582,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 +2591,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 +2632,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 +2669,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 +2688,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 +2703,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 +2711,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 +3029,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 +3213,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";
     }
@@ -4532,6 +4600,15 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: block;
 }
 
+/* Same reset, one more victim. A thumbnail is emitted empty and filled at
+   hydration, so between the two it matched \`div:empty\` and vanished \u2014 taking
+   the row's gap with it and starting that title 72px left of every other
+   row's (issue #552). The box holds its place either way now: the product's
+   image lands in it, or the placeholder mark does. */
+.lb-bundle-thumbnail:empty {
+  display: flex;
+}
+
 /* Divider */
 .lb-bundle-divider {
   height: var(--lb-border-width);
@@ -4570,11 +4647,6 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   object-fit: var(--lb-thumbnail-img-fit, cover);
 }
 
-.lb-bundle-thumbnail svg {
-  width: 28px;
-  height: 28px;
-  color: color-mix(in srgb, var(--lb-text) 35%, transparent);
-}
 
 .lb-bundle-product-info {
   flex: 1;
@@ -4698,6 +4770,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;
@@ -4979,15 +5088,33 @@ a.lb-bundle-product-name:focus-visible {
   border: 0 !important;
 }
 
-/* Placeholder SVG icon for missing images */
+/* Missing-image placeholder.
+   Two marks share these rules: Shopify's own \`placeholder_svg_tag\`
+   illustration, which the theme scripts clone out of the <template> in
+   bundle-widget.liquid, and the line glyph the headless renderer falls back to
+   when there is no Liquid to supply one. */
+.lb-thumb--placeholder > [data-lb-placeholder] {
+  display: block;
+  width: 100%;
+  /* The mark carries the box's height, not the other way round: the
+     "original" thumbnail ratio sizes a box to its image's proportions and an
+     imageless row has no image, so without this the box would be 60px by
+     nothing. A box that already has a ratio caps the mark instead. */
+  height: auto;
+  max-height: 100%;
+  aspect-ratio: 1 / 1;
+}
+
 .lb-bundle-placeholder-icon {
-  width: 28px;
-  height: 28px;
   stroke: color-mix(in srgb, var(--lb-text) 35%, transparent);
   stroke-width: 1.5;
   fill: none;
 }
 
+.lb-bundle-placeholder-svg {
+  fill: color-mix(in srgb, var(--lb-text) 22%, transparent);
+}
+
 /* Out-of-stock product row */
 .lb-bundle-product-row--oos {
   opacity: 0.5;
@@ -5019,6 +5146,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 +5173,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 +5289,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 +6611,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).