@lime-bundles/widget 2.2.1 → 2.3.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,6 +352,17 @@ 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) {
@@ -956,6 +973,19 @@ function renderModal(bundle, eligible, currency, handlers) {
       const price = el("span", "lb-mix-match__modal-product-price");
       price.textContent = formatCents(parseCents(variant.price.amount), currency);
       info.appendChild(price);
+      const unitPriceText = formatUnitPrice(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        currency
+      );
+      if (unitPriceText) {
+        const unitPrice = el(
+          "span",
+          "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+        );
+        unitPrice.textContent = unitPriceText;
+        info.appendChild(unitPrice);
+      }
       if (ep.isOos) {
         const soldOut = el("span", "lb-mix-match__modal-sold-out-label");
         soldOut.textContent = "Sold out";
@@ -1421,7 +1451,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 +1473,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 +1569,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;
 }
 
@@ -1609,7 +1638,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-thumbnail svg {
   width: 28px;
   height: 28px;
-  color: #BBBBBB;
+  color: color-mix(in srgb, var(--lb-text) 35%, transparent);
 }
 
 .lb-bundle-product-info {
@@ -1664,6 +1693,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: 11px;
+  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 +1716,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 +1778,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;
 }
@@ -1878,7 +1923,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;
 }
@@ -2295,7 +2340,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   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
@@ -2336,6 +2381,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;