@lime-bundles/widget 2.2.1 → 2.4.0

package/dist/index.js

@@ -27,7 +27,8 @@ import {
   formatCents,
   percentageDiscountUnit,
   computeFixedPricing,
-  computeBundleSaleCents
+  computeBundleSaleCents,
+  formatUnitPrice
 } from "@lime-bundles/core";
 
 // src/renderers/countdown.ts
@@ -332,6 +333,11 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     prices.appendChild(compare);
     prices.appendChild(priceEl);
     info.appendChild(prices);
+    const unitPriceEl = el("span", "lb-bundle-product-unit-price", {
+      "data-product-unit-price": ""
+    });
+    unitPriceEl.setAttribute("hidden", "");
+    info.appendChild(unitPriceEl);
     const applyVariantToRow = (variant) => {
       const unit = parseCents(variant.price.amount);
       priceEl.textContent = formatCents(unit, currency);
@@ -346,12 +352,24 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       } else {
         compare.setAttribute("hidden", "");
       }
+      const unitText = formatUnitPrice(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        currency
+      );
+      if (unitText) {
+        unitPriceEl.textContent = unitText;
+        unitPriceEl.removeAttribute("hidden");
+      } else {
+        unitPriceEl.setAttribute("hidden", "");
+      }
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
       const select = document.createElement("select");
       select.className = "lb-bundle-variant-select";
       select.setAttribute("data-variant-select", "");
+      select.name = `lb-variant-${state.product.id.replace(/^.*\//, "")}`;
       select.setAttribute(
         "aria-label",
         `Select variant for ${state.product.title}`
@@ -571,7 +589,12 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: firstVariant.title,
       imageUrl: firstEligible.product.featuredImage?.url ?? null,
       priceCents: parseCents(firstVariant.price.amount),
-      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null
+      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null,
+      unitPriceLabel: formatUnitPrice(
+        firstVariant.unitPrice,
+        firstVariant.unitPriceMeasurement,
+        currency
+      )
     });
   }
   afterMutation();
@@ -584,7 +607,12 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: variant.title,
       imageUrl: product.featuredImage?.url ?? null,
       priceCents: parseCents(variant.price.amount),
-      compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null
+      compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null,
+      unitPriceLabel: formatUnitPrice(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        currency
+      )
     });
     afterMutation();
   }
@@ -771,6 +799,11 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   priceEl.textContent = formatCents(selection.priceCents, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
+  if (selection.unitPriceLabel) {
+    const unitPrice = el("span", "lb-bundle-product-unit-price");
+    unitPrice.textContent = selection.unitPriceLabel;
+    info.appendChild(unitPrice);
+  }
   slot.appendChild(info);
   const remove = document.createElement("button");
   remove.type = "button";
@@ -925,8 +958,10 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
-      const variant = ep.firstAvailableVariant ?? ep.variants[0];
-      if (!variant) return;
+      const availableVariants = ep.variants.filter((v) => v.availableForSale);
+      const firstAvailVariant = availableVariants[0] ?? ep.firstAvailableVariant ?? ep.variants[0];
+      if (!firstAvailVariant) return;
+      let currentVariant = firstAvailVariant;
       const productEl = el(
         "div",
         ep.isOos ? "lb-mix-match__modal-product lb-mix-match__modal-product--sold-out" : "lb-mix-match__modal-product",
@@ -948,70 +983,116 @@ function renderModal(bundle, eligible, currency, handlers) {
       } else {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
+      const countBadge = el("span", "lb-bundle-qty-badge");
+      countBadge.style.display = "none";
+      thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
-      const title = el("span", "lb-mix-match__modal-product-title");
+      const title = el("p", "lb-mix-match__modal-product-title");
       title.textContent = ep.product.title;
       info.appendChild(title);
-      const price = el("span", "lb-mix-match__modal-product-price");
-      price.textContent = formatCents(parseCents(variant.price.amount), currency);
+      const price = el("p", "lb-mix-match__modal-product-price");
+      price.textContent = formatCents(
+        parseCents(currentVariant.price.amount),
+        currency
+      );
       info.appendChild(price);
+      const unitPrice = el(
+        "p",
+        "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+      );
+      const initialUnitText = formatUnitPrice(
+        currentVariant.unitPrice,
+        currentVariant.unitPriceMeasurement,
+        currency
+      );
+      if (initialUnitText) {
+        unitPrice.textContent = initialUnitText;
+      } else {
+        unitPrice.hidden = true;
+      }
+      info.appendChild(unitPrice);
+      const row = {
+        el: productEl,
+        product: ep.product,
+        variant: firstAvailVariant,
+        updateCount: () => {
+        }
+      };
+      if (availableVariants.length > 1) {
+        const select = document.createElement("select");
+        select.className = "lb-mix-match__variant-select";
+        select.setAttribute("data-variant-select", "");
+        select.name = `lb-variant-${ep.product.id.replace(/^.*\//, "")}`;
+        select.setAttribute(
+          "aria-label",
+          `Select variant for ${ep.product.title}`
+        );
+        availableVariants.forEach((v) => {
+          const opt = document.createElement("option");
+          opt.value = v.id;
+          opt.textContent = v.title;
+          if (v.id === firstAvailVariant.id) opt.selected = true;
+          select.appendChild(opt);
+        });
+        select.addEventListener("change", () => {
+          const next = availableVariants.find((v) => v.id === select.value);
+          if (!next) return;
+          currentVariant = next;
+          row.variant = next;
+          price.textContent = formatCents(
+            parseCents(currentVariant.price.amount),
+            currency
+          );
+          const nextUnitText = formatUnitPrice(
+            currentVariant.unitPrice,
+            currentVariant.unitPriceMeasurement,
+            currency
+          );
+          if (nextUnitText) {
+            unitPrice.textContent = nextUnitText;
+            unitPrice.hidden = false;
+          } else {
+            unitPrice.textContent = "";
+            unitPrice.hidden = true;
+          }
+          rowUpdateCount();
+        });
+        info.appendChild(select);
+      } else if (availableVariants.length === 1 && firstAvailVariant.title !== "Default Title") {
+        const variantLabel = el("span", "lb-mix-match__filled-variant");
+        variantLabel.textContent = firstAvailVariant.title;
+        info.appendChild(variantLabel);
+      }
       if (ep.isOos) {
         const soldOut = el("span", "lb-mix-match__modal-sold-out-label");
         soldOut.textContent = "Sold out";
         info.appendChild(soldOut);
       }
       productEl.appendChild(info);
+      const rowUpdateCount = () => {
+        const count = handlers.countFor(ep.product.id, currentVariant.id);
+        if (count > 0) {
+          countBadge.textContent = String(count);
+          countBadge.style.display = "";
+        } else {
+          countBadge.style.display = "none";
+        }
+      };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
-        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
-        addBtn.innerHTML = PLUS_ICON_SVG;
-        const countBadge = el("span", "lb-bundle-qty-badge");
-        countBadge.style.display = "none";
-        addBtn.appendChild(countBadge);
+        addBtn.textContent = "Add";
         addBtn.addEventListener("click", () => {
           if (handlers.isOverMax()) return;
-          handlers.onAdd(ep.product, variant);
+          handlers.onAdd(ep.product, currentVariant);
         });
         productEl.appendChild(addBtn);
-        const removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className = "lb-mix-match__slot-remove";
-        removeBtn.setAttribute("aria-label", `Remove one ${ep.product.title}`);
-        removeBtn.style.display = "none";
-        removeBtn.innerHTML = CLOSE_ICON_SVG;
-        removeBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          handlers.onRemove(ep.product.id, variant.id);
-        });
-        productEl.appendChild(removeBtn);
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-            const count = handlers.countFor(ep.product.id, variant.id);
-            if (count > 0) {
-              countBadge.textContent = String(count);
-              countBadge.style.display = "";
-              removeBtn.style.display = "";
-            } else {
-              countBadge.style.display = "none";
-              removeBtn.style.display = "none";
-            }
-          }
-        });
-      } else {
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-          }
-        });
       }
+      row.updateCount = ep.isOos ? () => {
+      } : rowUpdateCount;
+      productRows.push(row);
       list.appendChild(productEl);
     });
     refreshCounts();
@@ -1421,7 +1502,6 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 
 .lb-bundle-widget {
   /* Internal CSS-only vars (not merchant-configurable). */
-  --lb-text-muted: #666666;
   --lb-thumbnail-bg: #F0F0F0;
   --lb-widget-pad: 20px;
   --lb-progress-color: var(--lb-primary-color);
@@ -1444,7 +1524,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   margin: 0 calc(-1 * var(--lb-widget-pad)) 20px;
   padding: 12px 20px;
   background: var(--lb-countdown-bg);
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-top: 1px solid color-mix(in srgb, var(--lb-text) 6%, transparent);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1540,7 +1620,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   font-size: 16px;
   font-weight: 400;
   line-height: 20px;
-  color: var(--lb-text-muted);
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   margin: 4px 0 0;
 }
 
@@ -1583,15 +1663,18 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 /* Product rows */
 .lb-bundle-product-row {
   display: flex;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
 }
 
 .lb-bundle-thumbnail {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Aspect-ratio comes from the merchant \`thumbnailRatio\` enum via Liquid;
+     "original" sets it to \`auto\` so the box sizes to the image's intrinsic
+     ratio. Default keeps the historical 1:1 behaviour. */
+  aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   background: var(--lb-thumbnail-bg);
   border-radius: 8px;
   overflow: hidden;
@@ -1602,14 +1685,16 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 
 .lb-bundle-thumbnail img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from the same merchant enum; "original" sets them to
+     \`auto\` / \`contain\` so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-thumbnail-img-height, 100%);
+  object-fit: var(--lb-thumbnail-img-fit, cover);
 }
 
 .lb-bundle-thumbnail svg {
   width: 28px;
   height: 28px;
-  color: #BBBBBB;
+  color: color-mix(in srgb, var(--lb-text) 35%, transparent);
 }
 
 .lb-bundle-product-info {
@@ -1634,7 +1719,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .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);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: var(--lb-text);
@@ -1651,7 +1736,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-product-compare-price {
   /* --lb-product-compare-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-compare-display, inline);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
@@ -1664,6 +1749,22 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: none;
 }
 
+/* Unit price (e.g. "$0.50/100ml") \u2014 only rendered when the merchant has
+   configured unit pricing on the variant in the Shopify admin. No merchant
+   toggle: present in admin \u2192 shown; absent \u2192 hidden. Styled as muted
+   secondary text beneath the price row so it doesn't compete visually. */
+.lb-bundle-product-unit-price {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  margin-top: 2px;
+}
+
+.lb-bundle-product-unit-price[hidden] {
+  display: none;
+}
+
 .lb-bundle-variant-badge {
   display: inline-block;
   border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
@@ -1671,14 +1772,14 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   padding: 8px 12px;
   font-size: 12px;
   line-height: 16px;
-  color: var(--lb-text-muted);
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   margin-top: 8px;
 }
 
 .lb-bundle-quantity {
   font-size: 12px;
   line-height: 16px;
-  color: var(--lb-text-muted);
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   margin-left: 8px;
   white-space: nowrap;
 }
@@ -1733,7 +1834,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   font-size: 16px;
   font-weight: 600;
   line-height: 20px;
-  padding: 12px 16px;
+  padding: 8px 12px;
   border-radius: var(--lb-savings-bar-radius);
   margin-bottom: 12px;
 }
@@ -1777,7 +1878,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   width: 100%;
-  padding: 16px;
+  padding: 12px 16px;
   border: var(--lb-cta-border-width) solid var(--lb-cta-border-color);
   border-radius: var(--lb-cta-radius);
   font-size: 16px;
@@ -1878,7 +1979,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-placeholder-icon {
   width: 28px;
   height: 28px;
-  stroke: #BBBBBB;
+  stroke: color-mix(in srgb, var(--lb-text) 35%, transparent);
   stroke-width: 1.5;
   fill: none;
 }
@@ -1912,14 +2013,14 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 
 /* Fixed bundles: product rows */
 .lb-fixed .lb-bundle-product-row {
-  gap: 16px;
+  gap: 20px;
   align-items: center;
 }
 
-/* Fixed bundles: larger thumbnails */
+/* Fixed bundles: larger thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-fixed .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -2020,7 +2121,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   width: 60px;
   height: 60px;
   min-width: 60px;
-  border: var(--lb-image-border-width) dashed color-mix(in srgb, var(--lb-text) 20%, transparent);
+  /* 2px border is intentionally independent of --lb-image-border-width \u2014
+     empty slots always need a visible dashed outline as an affordance,
+     regardless of how the merchant has styled populated thumbnails. */
+  border: 2px dashed color-mix(in srgb, var(--lb-text) 35%, transparent);
   border-radius: var(--lb-image-border-radius);
   box-sizing: border-box;
   display: flex;
@@ -2040,9 +2144,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   cursor: default;
 }
 
+/* Mix-match thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-mix-match .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -2277,7 +2382,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
   border-bottom: 1px solid color-mix(in srgb, var(--lb-picker-text) 7%, transparent);
 }
@@ -2289,13 +2394,16 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product-thumb {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Modal picker thumbs follow the merchant's pickerThumbnailRatio \u2014
+     independent from the main widget's thumbnailRatio so a merchant can
+     e.g. show tall picker thumbs with square main thumbs. */
+  aspect-ratio: var(--lb-picker-thumbnail-aspect-ratio, 1 / 1);
   border-radius: var(--lb-picker-product-radius);
   border: var(--lb-picker-product-border-width) solid var(--lb-picker-product-border-color);
   box-sizing: border-box;
   overflow: visible;
-  background: #F0F0F0;
+  background: var(--lb-thumbnail-bg);
 }
 
 /* Qty badge inside the picker modal inherits picker-product border (width + color) plus
@@ -2311,8 +2419,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-product-thumb img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from pickerThumbnailRatio \u2014 "original" sets both
+     to auto/contain so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-picker-thumbnail-img-height, 100%);
+  object-fit: var(--lb-picker-thumbnail-img-fit, cover);
   border-radius: max(0px, calc(var(--lb-picker-product-radius) - var(--lb-picker-product-border-width)));
 }
 
@@ -2336,6 +2446,17 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   margin: 4px 0 0;
 }
 
+.lb-mix-match__modal-product-unit-price {
+  font-size: 11px;
+  line-height: 16px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  margin: 2px 0 0;
+}
+
+.lb-mix-match__modal-product-unit-price[hidden] {
+  display: none;
+}
+
 .lb-mix-match__variant-select {
   font-size: 12px;
   margin: 4px 0 0;
@@ -2536,7 +2657,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 .lb-volume__tier-price {
   grid-column: 1 / -1;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--lb-text);
 }
@@ -2548,7 +2669,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 /* Compare-at (strikethrough) price */
 .lb-volume__tier-compare {
-  font-size: 12px;
+  font-size: 14px;
   line-height: 16px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   text-decoration: line-through;