@lime-bundles/widget 2.1.0 → 2.2.1

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
@@ -75,6 +78,32 @@ function parseIso(iso) {
   return Number.isFinite(t) ? t : null;
 }
 
+// src/renderers/cta-button.ts
+function buildCtaButton(label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "lb-bundle-cta";
+  button.setAttribute("data-add-bundle", "");
+  const labelSpan = document.createElement("span");
+  labelSpan.className = "lb-cta-label";
+  labelSpan.setAttribute("data-cta-label", "");
+  labelSpan.textContent = label;
+  button.appendChild(labelSpan);
+  const spinnerSpan = document.createElement("span");
+  spinnerSpan.className = "lb-cta-spinner";
+  spinnerSpan.setAttribute("data-cta-spinner", "");
+  spinnerSpan.setAttribute("aria-hidden", "true");
+  spinnerSpan.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 2a10 10 0 0 1 10 10" /></svg>';
+  button.appendChild(spinnerSpan);
+  return button;
+}
+function setCtaLabel(button, text) {
+  const label = button.querySelector("[data-cta-label]");
+  if (label) {
+    label.textContent = text;
+  }
+}
+
 // src/renderers/dom.ts
 function el(tag, className, attrs = {}) {
   const node = document.createElement(tag);
@@ -97,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) => {
@@ -192,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) {
@@ -412,15 +435,11 @@ function renderSavingsBar() {
   };
 }
 function renderCta(bundle, oosCount, onClick) {
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = "lb-bundle-cta";
-  button.setAttribute("data-add-bundle", "");
+  const label = oosCount > 0 ? `${oosCount} item${oosCount === 1 ? "" : "s"} out of stock` : bundle.widgetConfig.cta.ctaText || "Add to cart";
+  const button = buildCtaButton(label);
   if (oosCount > 0) {
     button.disabled = true;
-    button.textContent = `${oosCount} item${oosCount === 1 ? "" : "s"} out of stock`;
   } else {
-    button.textContent = bundle.widgetConfig.cta.ctaText || "Add to cart";
     button.addEventListener("click", () => {
       if (button.disabled) return;
       onClick();
@@ -517,12 +536,8 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     isOverMax: () => selections.length >= maxQty
   });
   root.appendChild(modal.el);
-  const cta = document.createElement("button");
-  cta.type = "button";
-  cta.className = "lb-bundle-cta";
-  cta.setAttribute("data-add-bundle", "");
+  const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
   cta.disabled = true;
-  cta.textContent = `Select ${requiredQty} items to unlock`;
   cta.addEventListener("click", () => {
     if (cta.disabled) return;
     const lines = selections.map((s) => ({
@@ -615,10 +630,10 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     const count = selections.length;
     if (count < requiredQty) {
       cta.disabled = true;
-      cta.textContent = `Select ${requiredQty - count} more to unlock`;
+      setCtaLabel(cta, `Select ${requiredQty - count} more to unlock`);
     } else {
       cta.disabled = false;
-      cta.textContent = wc.cta.ctaText || "Add to cart";
+      setCtaLabel(cta, wc.cta.ctaText || "Add to cart");
     }
   }
 }
@@ -1353,12 +1368,9 @@ function renderSavingsBar3(resolved, selectedIndex, currency) {
 function renderCta2(bundle, onClick) {
   const product = bundle.products[0];
   const isAvailable = product?.variants.nodes.some((v) => v.availableForSale);
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = "lb-bundle-cta";
-  button.setAttribute("data-add-bundle", "");
+  const label = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
+  const button = buildCtaButton(label);
   if (!isAvailable) button.disabled = true;
-  button.textContent = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
   button.addEventListener("click", () => {
     if (button.disabled) return;
     onClick();
@@ -1397,7 +1409,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 */
@@ -1472,11 +1484,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 */
@@ -1745,9 +1766,16 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: none;
 }
 
-/* CTA button */
+/* CTA button.
+ * Label and spinner share a single 1\xD71 grid cell so the button's intrinsic
+ * width/height stays fixed when swapping between them \u2014 no layout shift when
+ * entering the loading state. Visibility (not display) is used so the hidden
+ * child still contributes to the cell's min-content sizing. See the
+ * [data-loading="true"] rules below. */
 .lb-bundle-cta {
-  display: block;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
   width: 100%;
   padding: 16px;
   border: var(--lb-cta-border-width) solid var(--lb-cta-border-color);
@@ -1776,12 +1804,51 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   cursor: not-allowed;
 }
 
+/* Both the label and the spinner occupy grid cell (1, 1). Only one is
+ * visible at a time; the other keeps its box for sizing but is invisible. */
+.lb-cta-label,
+.lb-cta-spinner {
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+.lb-cta-spinner {
+  visibility: hidden;
+}
+
+.lb-cta-spinner svg {
+  width: 20px;
+  height: 20px;
+  animation: lb-cta-spin 0.8s linear infinite;
+}
+
+@keyframes lb-cta-spin {
+  to { transform: rotate(360deg); }
+}
+
 .lb-bundle-cta[data-loading="true"] {
-  opacity: 0.7;
   cursor: wait;
   pointer-events: none;
 }
 
+.lb-bundle-cta[data-loading="true"] .lb-cta-label {
+  visibility: hidden;
+}
+
+.lb-bundle-cta[data-loading="true"] .lb-cta-spinner {
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lb-cta-spinner svg {
+    animation-duration: 2.5s;
+  }
+}
+
 /* Error message */
 .lb-bundle-error {
   font-size: 16px;
@@ -2687,7 +2754,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
     });
@@ -2712,7 +2779,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;
@@ -2724,8 +2791,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();
@@ -2753,14 +2820,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(
@@ -2775,7 +2842,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 }
     );
@@ -2783,7 +2850,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
     );
@@ -2791,7 +2858,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 }
     );
@@ -2802,7 +2869,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;
@@ -2835,7 +2902,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
     });
@@ -2846,7 +2913,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;
@@ -2858,7 +2925,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;
@@ -2904,7 +2971,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,
@@ -2940,7 +3007,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) {
@@ -2975,8 +3042,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,