@lime-bundles/widget 4.6.1 → 4.6.3

package/dist/index.cjs

@@ -26,7 +26,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
-var import_core6 = require("@lime-bundles/core");
+var import_core7 = require("@lime-bundles/core");
 
 // ../render/src/host.ts
 function intlFormatMoney(currencyCode) {
@@ -537,11 +537,13 @@ function buildWidgetShell(typeClass, opts) {
     const countdown = box("div", "lb-bundle-countdown", {
       "data-countdown": ""
     });
-    const label2 = box("span", "lb-bundle-countdown-label");
-    label2.textContent = opts.countdownLabel ?? "Limited time offer";
+    const label2 = box("div", "lb-bundle-countdown__label");
+    const labelText = document.createElement("span");
+    labelText.textContent = opts.countdownLabel ?? "Limited time offer";
+    label2.appendChild(labelText);
     countdown.appendChild(label2);
     countdown.appendChild(
-      box("span", "lb-bundle-countdown-timer", {
+      box("span", "lb-bundle-countdown__timer", {
         "data-countdown-timer": ""
       })
     );
@@ -761,7 +763,7 @@ var DEFAULT_STRINGS = {
   allTypes: "All",
   editSelection: "Edit selection",
   addToCart: "Add to cart",
-  bundlePrice: "Bundle price",
+  bundlePrice: "Bundle total",
   save: "Save",
   complete: "Complete",
   ofSelected: "__COUNT__ of __TOTAL__ added",
@@ -2297,6 +2299,7 @@ function buildSlotCard(item, trans, formatMoney, removable, onRemove, onEdit) {
 }
 
 // ../render/src/mix-match/slots.ts
+var import_core3 = require("@lime-bundles/core");
 function updateSlotUI(cont, items, reqQty, d, deps) {
   const trans = d.translations || {};
   const slotsWrap = cont.querySelector("[data-selection-slots]");
@@ -2329,7 +2332,7 @@ function updateSlotUI(cont, items, reqQty, d, deps) {
     }
   }
 }
-function updatePricing(cont, items, reqQty, d, calcDiscount, paint) {
+function updatePricing(cont, items, reqQty, d, paint) {
   const pricingSection = cont.querySelector(
     "[data-pricing-section]"
   );
@@ -2338,14 +2341,19 @@ function updatePricing(cont, items, reqQty, d, calcDiscount, paint) {
     return;
   }
   if (pricingSection) pricingSection.style.display = "";
+  const lines = items.map((item) => ({
+    unitCents: item.price,
+    quantity: item.quantity || 1
+  }));
   let totalPrice = 0;
-  for (let i = 0; i < items.length; i++) {
-    totalPrice += items[i].price * (items[i].quantity || 1);
-  }
+  for (const line of lines) totalPrice += line.unitCents * line.quantity;
   if (totalPrice > 0 && d.discountType) {
     paint(
       cont,
-      calcDiscount(totalPrice, d.discountType, d.discountValue ?? 0),
+      (0, import_core3.bundleSaleCents)(lines, {
+        discountType: d.discountType,
+        discountValue: d.discountValue ?? 0
+      }),
       totalPrice
     );
   }
@@ -2384,9 +2392,6 @@ function updateProgress(cont, overlay, items, reqQty, trans) {
   }
 }
 
-// src/renderers/mix-match.ts
-var import_core3 = require("@lime-bundles/core");
-
 // src/renderers/pricing-paint.ts
 function updatePricing2(formatMoney) {
   return (container, salePrice, comparePrice) => {
@@ -2761,7 +2766,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup, current
         discountType: bundle.discountConfig.discountType,
         discountValue: bundle.discountConfig.discountValue
       },
-      (total, type, value) => (0, import_core3.calculateDiscount)(total, type, value),
       updatePricing2(formatMoney)
     );
     updateProgress(shell.root, modal.overlay, selectedItems, requiredQty, t);
@@ -3290,6 +3294,9 @@ function renderBogoBundle(container, bundle, onAddToCart, onCleanup) {
 }
 
 // src/renderers/multi-step.ts
+var import_core6 = require("@lime-bundles/core");
+
+// ../render/src/multi-step/body.ts
 var import_core5 = require("@lime-bundles/core");
 
 // ../render/src/multi-step/i18n.ts
@@ -3489,7 +3496,7 @@ function updateDoor(deps) {
     target.parentElement.insertBefore(door, target);
   }
 }
-function updatePricing3(deps, data, calcDiscount, paint) {
+function updatePricing3(deps, data, paint) {
   const { container, steps, selections } = deps;
   const pricingSection = container.querySelector(
     "[data-pricing-section]"
@@ -3499,14 +3506,22 @@ function updatePricing3(deps, data, calcDiscount, paint) {
     return;
   }
   if (pricingSection) pricingSection.style.display = "";
+  const lines = [];
   let totalPrice = 0;
   for (const step of selections) {
-    for (const pick of step) totalPrice += pick.price * (pick.quantity || 1);
+    for (const pick of step) {
+      const line = { unitCents: pick.price, quantity: pick.quantity || 1 };
+      lines.push(line);
+      totalPrice += line.unitCents * line.quantity;
+    }
   }
   if (totalPrice > 0 && data.discountType) {
     paint(
       container,
-      calcDiscount(totalPrice, data.discountType, data.discountValue ?? 0),
+      (0, import_core5.bundleSaleCents)(lines, {
+        discountType: data.discountType,
+        discountValue: data.discountValue ?? 0
+      }),
       totalPrice
     );
   }
@@ -4074,7 +4089,7 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
     variantQuantities: bundle.variantQuantities
   };
   const pools = steps.map(
-    (_, i) => (0, import_core5.productsForStep)(bundle, i).map((product) => {
+    (_, i) => (0, import_core6.productsForStep)(bundle, i).map((product) => {
       const p = adaptProduct(product, bundle.id, {
         quantities,
         allowedVariantIds: null
@@ -4219,7 +4234,6 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
         discountType: bundle.discountConfig.discountType,
         discountValue: bundle.discountConfig.discountValue
       },
-      (total, type, value) => (0, import_core5.calculateDiscount)(total, type, value),
       updatePricing2(formatMoney)
     );
     updateProgress2(bodyDeps);
@@ -4288,7 +4302,7 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
 }
 
 // src/lime-bundle.ts
-var import_core7 = require("@lime-bundles/core");
+var import_core8 = require("@lime-bundles/core");
 
 // src/utils/input-mode.ts
 var NAV_KEYS = /* @__PURE__ */ new Set([
@@ -4362,8 +4376,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
      internally (with the .lb-edge-fade treatment) when content exceeds
      this. */
   --lb-list-max-height: 360px;
-  /* Depth of the soft fade at a scroll list's clipped edge. */
-  --lb-edge-fade-size: 20px;
+  /* Depth of the soft fade at a scroll list's clipped edge. Sized to dim
+     roughly half of the peeking product row (~90px tall): at 20px shoppers
+     read the cut as the end of the list and missed the products below. */
+  --lb-edge-fade-size: 48px;
   /* Derived "small" corner radius for chips and badges \u2014 the low-stock badge,
      the volume tier badge, the multi-step count chip. Controls and media
      (thumbnails, selects, steppers, buttons) take the full --lb-radius: they
@@ -7338,13 +7354,13 @@ var LimeBundleElement = class extends HTMLElement {
    * no buyer/country/language is set.
    */
   wrapQueryForContext(query) {
-    return (0, import_core6.hasInContext)({
+    return (0, import_core7.hasInContext)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken,
       country: this.country,
       language: this.language,
       buyer: this.buyer
-    }) ? (0, import_core6.withInContext)(query) : query;
+    }) ? (0, import_core7.withInContext)(query) : query;
   }
   /** Buyer resolved once per fetch so the market gate can read the
    *  company location without invoking a callback resolver twice. */
@@ -7358,7 +7374,7 @@ var LimeBundleElement = class extends HTMLElement {
    * locations (B2B markets), or a legacy `market-id` match.
    */
   isMarketHidden(bundle) {
-    return !(0, import_core6.isVisibleToBuyer)(bundle, {
+    return !(0, import_core7.isVisibleToBuyer)(bundle, {
       marketId: this.marketId,
       countryCode: this.country,
       companyLocationId: this.resolvedBuyer?.companyLocationId
@@ -7380,7 +7396,7 @@ var LimeBundleElement = class extends HTMLElement {
     } catch {
       this.resolvedBuyer = void 0;
     }
-    const client = (0, import_core6.createStorefrontClient)({
+    const client = (0, import_core7.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken,
       country: this.country,
@@ -7409,7 +7425,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const shopSettingsPromise = client.query(import_core6.SHOP_SETTINGS_QUERY, void 0, {
+      const shopSettingsPromise = client.query(import_core7.SHOP_SETTINGS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -7422,8 +7438,8 @@ var LimeBundleElement = class extends HTMLElement {
       const shopSettings = await shopSettingsPromise;
       const customCss = shopSettings?.shop?.customCss?.value;
       if (customCss) {
-        (0, import_core6.injectCustomCss)(this.shopDomain, customCss);
-        const sanitized = (0, import_core6.sanitizeCustomCss)(customCss);
+        (0, import_core7.injectCustomCss)(this.shopDomain, customCss);
+        const sanitized = (0, import_core7.sanitizeCustomCss)(customCss);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
       this.renderBundles();
@@ -7438,7 +7454,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      this.wrapQueryForContext(import_core6.BUNDLE_METAOBJECT_QUERY),
+      this.wrapQueryForContext(import_core7.BUNDLE_METAOBJECT_QUERY),
       { id: this.bundleGid },
       { signal }
     );
@@ -7446,15 +7462,15 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core6.parseMetaobjectBundle)(
+    const parsed = (0, import_core7.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
-    this.bundles = parsed && !this.isMarketHidden(parsed) ? [(0, import_core6.convertBundleToPresentment)(parsed, this.currencyRate)] : [];
+    this.bundles = parsed && !this.isMarketHidden(parsed) ? [(0, import_core7.convertBundleToPresentment)(parsed, this.currencyRate)] : [];
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      this.wrapQueryForContext(import_core6.BUNDLES_FOR_PRODUCT_QUERY),
+      this.wrapQueryForContext(import_core7.BUNDLES_FOR_PRODUCT_QUERY),
       { handle: productHandle },
       { signal }
     );
@@ -7465,12 +7481,12 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core6.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core7.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed && !this.isMarketHidden(parsed)) {
-        bundles.push((0, import_core6.convertBundleToPresentment)(parsed, this.currencyRate));
+        bundles.push((0, import_core7.convertBundleToPresentment)(parsed, this.currencyRate));
       }
     }
-    this.bundles = (0, import_core6.resolveAbTests)(bundles, (0, import_core6.getVisitorId)());
+    this.bundles = (0, import_core7.resolveAbTests)(bundles, (0, import_core7.getVisitorId)());
   }
   /**
    * Dispatch add-to-cart with a cancelable event, then — unless a listener
@@ -7500,7 +7516,7 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core6.createStorefrontClient)({
+    const client = (0, import_core7.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -7529,7 +7545,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (cartId) {
         const res = await client.query(
-          import_core6.CART_LINES_ADD_MUTATION,
+          import_core7.CART_LINES_ADD_MUTATION,
           { cartId, lines }
         );
         const payload = res.cartLinesAdd;
@@ -7548,7 +7564,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core6.CART_CREATE_MUTATION,
+          import_core7.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
@@ -7598,7 +7614,7 @@ var LimeBundleElement = class extends HTMLElement {
    * checkout matches the shopper's current build.
    */
   async clearAbandonedBundleLines(client, cartId, dropSavedCart) {
-    const res = await client.query(import_core6.CART_LINES_QUERY, {
+    const res = await client.query(import_core7.CART_LINES_QUERY, {
       cartId
     });
     if (!res.cart) {
@@ -7610,7 +7626,7 @@ var LimeBundleElement = class extends HTMLElement {
     ).map((line) => line.id);
     if (abandonedLineIds.length === 0) return cartId;
     const removal = await client.query(
-      import_core6.CART_LINES_REMOVE_MUTATION,
+      import_core7.CART_LINES_REMOVE_MUTATION,
       { cartId, lineIds: abandonedLineIds }
     );
     if (removal.cartLinesRemove?.userErrors?.length) {
@@ -7632,7 +7648,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core6.reportAddToCart)(
+    (0, import_core7.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -7672,7 +7688,7 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
       if (bundle.endsAt) container.setAttribute("data-ends-at", bundle.endsAt);
-      (0, import_core7.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      (0, import_core8.applyWidgetConfigVars)(container, bundle.widgetConfig);
       this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
@@ -7723,8 +7739,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core6.observeImpression)(element, () => {
-      (0, import_core6.reportImpression)(
+    const cleanup = (0, import_core7.observeImpression)(element, () => {
+      (0, import_core7.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,

package/dist/index.js

@@ -536,11 +536,13 @@ function buildWidgetShell(typeClass, opts) {
     const countdown = box("div", "lb-bundle-countdown", {
       "data-countdown": ""
     });
-    const label2 = box("span", "lb-bundle-countdown-label");
-    label2.textContent = opts.countdownLabel ?? "Limited time offer";
+    const label2 = box("div", "lb-bundle-countdown__label");
+    const labelText = document.createElement("span");
+    labelText.textContent = opts.countdownLabel ?? "Limited time offer";
+    label2.appendChild(labelText);
     countdown.appendChild(label2);
     countdown.appendChild(
-      box("span", "lb-bundle-countdown-timer", {
+      box("span", "lb-bundle-countdown__timer", {
         "data-countdown-timer": ""
       })
     );
@@ -760,7 +762,7 @@ var DEFAULT_STRINGS = {
   allTypes: "All",
   editSelection: "Edit selection",
   addToCart: "Add to cart",
-  bundlePrice: "Bundle price",
+  bundlePrice: "Bundle total",
   save: "Save",
   complete: "Complete",
   ofSelected: "__COUNT__ of __TOTAL__ added",
@@ -2296,6 +2298,7 @@ function buildSlotCard(item, trans, formatMoney, removable, onRemove, onEdit) {
 }
 
 // ../render/src/mix-match/slots.ts
+import { bundleSaleCents } from "@lime-bundles/core";
 function updateSlotUI(cont, items, reqQty, d, deps) {
   const trans = d.translations || {};
   const slotsWrap = cont.querySelector("[data-selection-slots]");
@@ -2328,7 +2331,7 @@ function updateSlotUI(cont, items, reqQty, d, deps) {
     }
   }
 }
-function updatePricing(cont, items, reqQty, d, calcDiscount, paint) {
+function updatePricing(cont, items, reqQty, d, paint) {
   const pricingSection = cont.querySelector(
     "[data-pricing-section]"
   );
@@ -2337,14 +2340,19 @@ function updatePricing(cont, items, reqQty, d, calcDiscount, paint) {
     return;
   }
   if (pricingSection) pricingSection.style.display = "";
+  const lines = items.map((item) => ({
+    unitCents: item.price,
+    quantity: item.quantity || 1
+  }));
   let totalPrice = 0;
-  for (let i = 0; i < items.length; i++) {
-    totalPrice += items[i].price * (items[i].quantity || 1);
-  }
+  for (const line of lines) totalPrice += line.unitCents * line.quantity;
   if (totalPrice > 0 && d.discountType) {
     paint(
       cont,
-      calcDiscount(totalPrice, d.discountType, d.discountValue ?? 0),
+      bundleSaleCents(lines, {
+        discountType: d.discountType,
+        discountValue: d.discountValue ?? 0
+      }),
       totalPrice
     );
   }
@@ -2383,9 +2391,6 @@ function updateProgress(cont, overlay, items, reqQty, trans) {
   }
 }
 
-// src/renderers/mix-match.ts
-import { calculateDiscount } from "@lime-bundles/core";
-
 // src/renderers/pricing-paint.ts
 function updatePricing2(formatMoney) {
   return (container, salePrice, comparePrice) => {
@@ -2760,7 +2765,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup, current
         discountType: bundle.discountConfig.discountType,
         discountValue: bundle.discountConfig.discountValue
       },
-      (total, type, value) => calculateDiscount(total, type, value),
       updatePricing2(formatMoney)
     );
     updateProgress(shell.root, modal.overlay, selectedItems, requiredQty, t);
@@ -3297,10 +3301,14 @@ function renderBogoBundle(container, bundle, onAddToCart, onCleanup) {
 
 // src/renderers/multi-step.ts
 import {
-  calculateDiscount as calculateDiscount2,
   productsForStep
 } from "@lime-bundles/core";
 
+// ../render/src/multi-step/body.ts
+import {
+  bundleSaleCents as bundleSaleCents2
+} from "@lime-bundles/core";
+
 // ../render/src/multi-step/i18n.ts
 function stepOfLabel(i, total, t) {
   return fill(t.stepOf || "Step __STEP__ of __TOTAL__", {
@@ -3498,7 +3506,7 @@ function updateDoor(deps) {
     target.parentElement.insertBefore(door, target);
   }
 }
-function updatePricing3(deps, data, calcDiscount, paint) {
+function updatePricing3(deps, data, paint) {
   const { container, steps, selections } = deps;
   const pricingSection = container.querySelector(
     "[data-pricing-section]"
@@ -3508,14 +3516,22 @@ function updatePricing3(deps, data, calcDiscount, paint) {
     return;
   }
   if (pricingSection) pricingSection.style.display = "";
+  const lines = [];
   let totalPrice = 0;
   for (const step of selections) {
-    for (const pick of step) totalPrice += pick.price * (pick.quantity || 1);
+    for (const pick of step) {
+      const line = { unitCents: pick.price, quantity: pick.quantity || 1 };
+      lines.push(line);
+      totalPrice += line.unitCents * line.quantity;
+    }
   }
   if (totalPrice > 0 && data.discountType) {
     paint(
       container,
-      calcDiscount(totalPrice, data.discountType, data.discountValue ?? 0),
+      bundleSaleCents2(lines, {
+        discountType: data.discountType,
+        discountValue: data.discountValue ?? 0
+      }),
       totalPrice
     );
   }
@@ -4228,7 +4244,6 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
         discountType: bundle.discountConfig.discountType,
         discountValue: bundle.discountConfig.discountValue
       },
-      (total, type, value) => calculateDiscount2(total, type, value),
       updatePricing2(formatMoney)
     );
     updateProgress2(bodyDeps);
@@ -4371,8 +4386,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
      internally (with the .lb-edge-fade treatment) when content exceeds
      this. */
   --lb-list-max-height: 360px;
-  /* Depth of the soft fade at a scroll list's clipped edge. */
-  --lb-edge-fade-size: 20px;
+  /* Depth of the soft fade at a scroll list's clipped edge. Sized to dim
+     roughly half of the peeking product row (~90px tall): at 20px shoppers
+     read the cut as the end of the list and missed the products below. */
+  --lb-edge-fade-size: 48px;
   /* Derived "small" corner radius for chips and badges \u2014 the low-stock badge,
      the volume tier badge, the multi-step count chip. Controls and media
      (thumbnails, selects, steppers, buttons) take the full --lb-radius: they