@lime-bundles/widget 2.1.0 → 2.2.0

package/dist/index.js

@@ -70,6 +70,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);
@@ -410,15 +436,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();
@@ -515,12 +537,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) => ({
@@ -613,10 +631,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");
     }
   }
 }
@@ -1351,12 +1369,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();
@@ -1743,9 +1758,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);
@@ -1774,12 +1796,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;