@lime-bundles/widget 2.2.0 → 2.3.0

package/dist/index.cjs

@@ -25,6 +25,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
+var import_core5 = require("@lime-bundles/core");
+
+// src/renderers/fixed.ts
 var import_core4 = require("@lime-bundles/core");
 
 // src/renderers/pricing.ts
@@ -123,11 +126,7 @@ var PLACEHOLDER_THUMB_SVG = `
 </svg>`;
 function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
-  const qtyFor = (productId, variantId) => {
-    const vq = bundle.variantQuantities[variantId];
-    if (vq !== void 0) return vq;
-    return bundle.productQuantities[productId] ?? 1;
-  };
+  const qtyFor = (productId, variantId) => (0, import_core4.resolveBundleQty)(bundle, productId, variantId);
   const rows = [];
   let oosCount = 0;
   bundle.products.forEach((product, idx) => {
@@ -218,9 +217,7 @@ function buildRowState(bundle, product, productIndex) {
   const eligibleVariants = selectedVariantIds && selectedVariantIds.length > 0 ? available.filter((v) => selectedVariantIds.includes(v.id)) : available;
   const isOos = eligibleVariants.length === 0;
   const selected = eligibleVariants[0] ?? null;
-  const productQty = bundle.productQuantities[product.id] ?? 1;
-  const variantQty = selected ? bundle.variantQuantities[selected.id] : void 0;
-  const qty = variantQty ?? productQty;
+  const qty = selected ? (0, import_core4.resolveBundleQty)(bundle, product.id, selected.id) : 1;
   return { product, eligibleVariants, selected, qty, isOos };
 }
 function renderHeader(bundle, currency) {
@@ -335,6 +332,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 = (0, import_core.parseCents)(variant.price.amount);
       priceEl.textContent = (0, import_core.formatCents)(unit, currency);
@@ -349,6 +351,17 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       } else {
         compare.setAttribute("hidden", "");
       }
+      const unitText = (0, import_core.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) {
@@ -959,6 +972,19 @@ function renderModal(bundle, eligible, currency, handlers) {
       const price = el("span", "lb-mix-match__modal-product-price");
       price.textContent = (0, import_core.formatCents)((0, import_core.parseCents)(variant.price.amount), currency);
       info.appendChild(price);
+      const unitPriceText = (0, import_core.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";
@@ -1412,7 +1438,7 @@ function clamp(n, min, max) {
 }
 
 // src/lime-bundle.ts
-var import_core5 = require("@lime-bundles/core");
+var import_core6 = require("@lime-bundles/core");
 
 // src/styles/bundle-css.ts
 var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle widget types */
@@ -1424,7 +1450,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);
@@ -1447,7 +1472,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;
@@ -1487,11 +1512,20 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: none;
 }
 
-/* Adjacent widget spacing \u2014 separates multiple bundles on the same product page */
-.lb-bundle-widget + .lb-bundle-widget {
+/* Sibling widget spacing \u2014 separates multiple bundles on the same product page.
+   Uses \`~\` (general sibling) rather than \`+\` (adjacent) because each Liquid
+   loop iteration emits a {% style %} block before its widget div, so the
+   rendered DOM alternates <style><widget><style><widget>. The \`+\` combinator
+   requires immediate adjacency and would match nothing; \`~\` matches every
+   widget after the first regardless of elements between. Single-widget pages
+   stay unaffected (no prior \`.lb-bundle-widget\` sibling to match against).
+   Only \`margin-top\` \u2014 do NOT override \`padding-top\` here. The gradient header
+   uses \`margin-top: calc(-1 * var(--lb-widget-pad))\` to reach the widget's
+   inner border edge, assuming padding-top == --lb-widget-pad. Changing
+   padding-top on the subsequent widget breaks that math and leaves a visible
+   gap above the header. */
+.lb-bundle-widget ~ .lb-bundle-widget {
   margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid var(--lb-border);
 }
 
 /* Header \u2014 gradient banner with title + savings badge */
@@ -1534,7 +1568,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;
 }
 
@@ -1603,7 +1637,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 {
@@ -1658,6 +1692,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);
@@ -1665,14 +1715,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;
 }
@@ -1727,7 +1777,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;
 }
@@ -1872,7 +1922,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;
 }
@@ -2289,7 +2339,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
@@ -2330,6 +2380,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;
@@ -2748,7 +2809,7 @@ var LimeBundleElement = class extends HTMLElement {
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
-    const client = (0, import_core4.createStorefrontClient)({
+    const client = (0, import_core5.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -2773,7 +2834,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const cssPromise = client.query(import_core4.SHOP_CUSTOM_CSS_QUERY, void 0, {
+      const cssPromise = client.query(import_core5.SHOP_CUSTOM_CSS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -2785,8 +2846,8 @@ var LimeBundleElement = class extends HTMLElement {
       }
       const css = await cssPromise;
       if (css?.shop?.metafield?.value) {
-        (0, import_core4.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
-        const sanitized = (0, import_core4.sanitizeCustomCss)(css.shop.metafield.value);
+        (0, import_core5.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
+        const sanitized = (0, import_core5.sanitizeCustomCss)(css.shop.metafield.value);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
       await this.applyABVariants();
@@ -2814,14 +2875,14 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles.map(async (bundle) => {
         if (!bundle.abTestId || !bundle.abVariantB) return bundle;
         try {
-          const assignment = await (0, import_core4.getABTestAssignment)(
+          const assignment = await (0, import_core5.getABTestAssignment)(
             this.appUrl,
             this.shopDomain,
             bundle.abTestId,
             bundle.id
           );
           if (assignment?.variant === "B") {
-            return (0, import_core4.applyABVariantB)(bundle);
+            return (0, import_core5.applyABVariantB)(bundle);
           }
         } catch (err) {
           console.warn(
@@ -2836,7 +2897,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      import_core4.BUNDLE_METAOBJECT_QUERY,
+      import_core5.BUNDLE_METAOBJECT_QUERY,
       { id: this.bundleGid },
       { signal }
     );
@@ -2844,7 +2905,7 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core4.parseMetaobjectBundle)(
+    const parsed = (0, import_core5.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
@@ -2852,7 +2913,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      import_core4.BUNDLES_FOR_PRODUCT_QUERY,
+      import_core5.BUNDLES_FOR_PRODUCT_QUERY,
       { handle: productHandle },
       { signal }
     );
@@ -2863,7 +2924,7 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core4.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core5.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed) bundles.push(parsed);
     }
     this.bundles = bundles;
@@ -2896,7 +2957,7 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core4.createStorefrontClient)({
+    const client = (0, import_core5.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -2907,7 +2968,7 @@ var LimeBundleElement = class extends HTMLElement {
       let checkoutUrl = null;
       if (existingCartId) {
         const res = await client.query(
-          import_core4.CART_LINES_ADD_MUTATION,
+          import_core5.CART_LINES_ADD_MUTATION,
           { cartId: existingCartId, lines }
         );
         const payload = res.cartLinesAdd;
@@ -2919,7 +2980,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core4.CART_CREATE_MUTATION,
+          import_core5.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
@@ -2965,7 +3026,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core4.reportAddToCart)(
+    (0, import_core5.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -3001,7 +3062,7 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("aria-label", bundle.title);
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
-      (0, import_core5.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      (0, import_core6.applyWidgetConfigVars)(container, bundle.widgetConfig);
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
       switch (bundle.bundleType) {
@@ -3036,8 +3097,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core4.observeImpression)(element, () => {
-      (0, import_core4.reportImpression)(
+    const cleanup = (0, import_core5.observeImpression)(element, () => {
+      (0, import_core5.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,