@lime-bundles/widget 2.0.0 → 2.2.0

package/dist/index.cjs

@@ -75,6 +75,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);
@@ -412,15 +438,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 +539,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) => ({
@@ -546,7 +564,20 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     })
   );
   container.appendChild(root);
-  renderSlots();
+  const firstEligible = eligible.find((ep) => !ep.isOos);
+  const firstVariant = firstEligible?.firstAvailableVariant ?? firstEligible?.variants[0];
+  if (firstEligible && firstVariant) {
+    selections.push({
+      productId: firstEligible.product.id,
+      productTitle: firstEligible.product.title,
+      variantId: firstVariant.id,
+      variantTitle: firstVariant.title,
+      imageUrl: firstEligible.product.featuredImage?.url ?? null,
+      priceCents: (0, import_core.parseCents)(firstVariant.price.amount),
+      compareCents: firstVariant.compareAtPrice ? (0, import_core.parseCents)(firstVariant.compareAtPrice.amount) : null
+    });
+  }
+  afterMutation();
   function addSelection(product, variant) {
     if (selections.length >= maxQty) return;
     selections.push({
@@ -602,10 +633,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");
     }
   }
 }
@@ -1091,15 +1122,15 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   if (!variant && wc.outOfStockBehavior === "hide") return;
   const basePriceCents = variant ? (0, import_core.parseCents)(variant.price.amount) : 0;
   const currency = variant?.price.currencyCode ?? "USD";
+  const discountType = bundle.discountConfig.discountType;
   const resolved = bundle.volumeTiers.map((tier, index) => {
     let perUnit;
-    if (tier.discountType === "fixed_amount") {
-      const amt = Math.round(tier.discountValue * 100);
+    if (discountType === "fixed_amount") {
+      const amt = Math.round((tier.amount ?? 0) * 100);
       perUnit = Math.max(0, basePriceCents - amt);
     } else {
-      const discount = Math.floor(
-        basePriceCents * tier.discountValue / 100
-      );
+      const pct = tier.percentage ?? 0;
+      const discount = Math.floor(basePriceCents * pct / 100);
       perUnit = Math.max(0, basePriceCents - discount);
     }
     return {
@@ -1117,7 +1148,9 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   }
   const popularIndex = wc.popularBadge.tierIndex !== void 0 ? clamp(wc.popularBadge.tierIndex, 0, resolved.length - 1) : bestTierIndex;
   const root = el("div", "lb-volume");
-  root.appendChild(renderHeader3(bundle, resolved, selectedIndex, currency));
+  root.appendChild(
+    renderHeader3(bundle, resolved, selectedIndex, currency, discountType)
+  );
   if (wc.countdown.showCountdown && bundle.endsAt) {
     const countdown = renderCountdown(bundle.endsAt);
     if (countdown) {
@@ -1218,7 +1251,7 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
     }
     const badgeEl = root.querySelector("[data-header-badge]");
     if (badgeEl) {
-      const label = badgeFor(resolved[idx], currency);
+      const label = badgeFor(resolved[idx], currency, discountType);
       if (label) {
         badgeEl.textContent = label;
         badgeEl.style.display = "";
@@ -1228,7 +1261,7 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
     }
   }
 }
-function renderHeader3(bundle, resolved, selectedIndex, currency) {
+function renderHeader3(bundle, resolved, selectedIndex, currency, discountType) {
   const wc = bundle.widgetConfig;
   const header = el("div", "lb-bundle-header");
   const content = el("div", "lb-bundle-header__content");
@@ -1237,7 +1270,7 @@ function renderHeader3(bundle, resolved, selectedIndex, currency) {
   content.appendChild(title);
   header.appendChild(content);
   if (wc.pricing.showSaveBadge) {
-    const badge = badgeFor(resolved[selectedIndex], currency);
+    const badge = badgeFor(resolved[selectedIndex], currency, discountType);
     if (badge) {
       const badgeEl = el("span", "lb-bundle-header__badge", {
         "data-header-badge": ""
@@ -1338,26 +1371,27 @@ 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();
   });
   return button;
 }
-function badgeFor(resolved, currency) {
+function badgeFor(resolved, currency, discountType) {
   if (!resolved) return null;
   const { tier } = resolved;
-  if (tier.discountType === "fixed_amount" && tier.discountValue > 0) {
-    return `-${(0, import_core.formatCents)(Math.round(tier.discountValue * 100), currency)}`;
+  if (discountType === "fixed_amount") {
+    const amount = tier.amount ?? 0;
+    if (amount > 0) return `-${(0, import_core.formatCents)(Math.round(amount * 100), currency)}`;
+    return null;
   }
-  if (tier.discountType === "percentage" && tier.discountValue > 0) {
-    return `-${Math.round(tier.discountValue)}%`;
+  if (discountType === "percentage") {
+    const pct = tier.percentage ?? 0;
+    if (pct > 0) return `-${Math.round(pct)}%`;
+    return null;
   }
   return null;
 }
@@ -1402,6 +1436,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   border-radius: var(--lb-radius);
   padding: var(--lb-widget-pad) var(--lb-widget-pad) 20px;
   box-sizing: border-box;
+  /* Cap the widget at a comfortable reading width on desktop. Below
+     440px viewports the container is already narrower than the cap,
+     so the rule is inert on mobile. */
+  max-width: 440px;
 }
 
 /* Countdown timer bar \u2014 sits below the gradient header */
@@ -1722,9 +1760,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);
@@ -1753,12 +1798,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;
@@ -2466,6 +2550,103 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 }
 
 
+`;
+var BUNDLE_SKELETON_CSS = `/* Lime Bundles \u2014 web-component loading skeleton (not mirrored to theme assets) */
+
+.lb-bundle-widget--loading {
+  display: block;
+  padding: var(--lb-widget-pad, 20px);
+  border: 1px solid var(--lb-border, #E5E5E5);
+  border-radius: var(--lb-radius, 12px);
+  background: var(--lb-bg, #FFFFFF);
+  /* Contain layout/paint so the skeleton doesn't influence ancestor
+     layout once the real content swaps in. */
+  contain: layout paint;
+}
+
+.lb-bundle-widget--loading .lb-skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 0%,
+    rgba(0, 0, 0, 0.10) 50%,
+    rgba(0, 0, 0, 0.06) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 6px;
+  animation: lb-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--title {
+  height: 28px;
+  width: 60%;
+  margin-bottom: 16px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--products {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--row {
+  display: grid;
+  grid-template-columns: 56px 1fr 60px;
+  gap: 12px;
+  align-items: center;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--thumb {
+  height: 56px;
+  width: 56px;
+  border-radius: 8px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--line {
+  height: 14px;
+  border-radius: 4px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--line + .lb-skeleton--line {
+  margin-top: 8px;
+  width: 70%;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--price {
+  height: 20px;
+  width: 60px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--footer {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--lb-border, #E5E5E5);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--total {
+  height: 24px;
+  width: 40%;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--cta {
+  height: 44px;
+  width: 140px;
+  border-radius: var(--lb-cta-radius, 8px);
+}
+
+@keyframes lb-skeleton-pulse {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: -200% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lb-bundle-widget--loading .lb-skeleton {
+    animation: none;
+  }
+}
 `;
 
 // src/lime-bundle.ts
@@ -2515,7 +2696,6 @@ var LimeBundleElement = class extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render();
     this.fetchBundle();
   }
   disconnectedCallback() {
@@ -2870,9 +3050,39 @@ var LimeBundleElement = class extends HTMLElement {
   renderLoading() {
     this.shadow.innerHTML = `
       <style>${BUNDLE_BASE_CSS}</style>
-      <div class="lb-bundle-widget lb-bundle-widget--loading" aria-busy="true">
+      <style>${BUNDLE_SKELETON_CSS}</style>
+      <div class="lb-bundle-widget lb-bundle-widget--loading" aria-busy="true" aria-label="Loading bundle">
         <div class="lb-skeleton lb-skeleton--title"></div>
-        <div class="lb-skeleton lb-skeleton--products"></div>
+        <div class="lb-skeleton--products">
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+        </div>
+        <div class="lb-skeleton--footer">
+          <div class="lb-skeleton lb-skeleton--total"></div>
+          <div class="lb-skeleton lb-skeleton--cta"></div>
+        </div>
       </div>
     `;
   }
@@ -2886,9 +3096,6 @@ var LimeBundleElement = class extends HTMLElement {
       })
     );
   }
-  render() {
-    this.shadow.innerHTML = `<style>${BUNDLE_BASE_CSS}</style>`;
-  }
 };
 
 // src/index.ts