@lime-bundles/widget 4.6.5 → 4.6.6

package/dist/index.cjs

@@ -381,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) {
@@ -391,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 = "";
@@ -411,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]");
@@ -461,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");
@@ -1427,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";
@@ -1648,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();
@@ -2231,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");
@@ -4536,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);
@@ -4574,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;
@@ -5020,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;

package/dist/index.js

@@ -380,6 +380,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 +439,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 +463,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 +516,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 +1485,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 +1714,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 +2292,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");
@@ -4546,6 +4610,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);
@@ -4584,11 +4657,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;
@@ -5030,15 +5098,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;