@lime-bundles/widget 2.0.0 → 2.1.0

package/dist/index.d.cts

@@ -60,7 +60,6 @@ declare class LimeBundleElement extends HTMLElement {
     private setupImpressionFor;
     private renderLoading;
     private renderError;
-    private render;
 }
 
 export { LimeBundleElement };

package/dist/index.d.ts

@@ -60,7 +60,6 @@ declare class LimeBundleElement extends HTMLElement {
     private setupImpressionFor;
     private renderLoading;
     private renderError;
-    private render;
 }
 
 export { LimeBundleElement };

package/dist/index.js

@@ -544,7 +544,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: parseCents(firstVariant.price.amount),
+      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null
+    });
+  }
+  afterMutation();
   function addSelection(product, variant) {
     if (selections.length >= maxQty) return;
     selections.push({
@@ -1089,15 +1102,15 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   if (!variant && wc.outOfStockBehavior === "hide") return;
   const basePriceCents = variant ? 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 {
@@ -1115,7 +1128,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) {
@@ -1216,7 +1231,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 = "";
@@ -1226,7 +1241,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");
@@ -1235,7 +1250,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": ""
@@ -1348,14 +1363,18 @@ function renderCta2(bundle, 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 `-${formatCents(Math.round(tier.discountValue * 100), currency)}`;
+  if (discountType === "fixed_amount") {
+    const amount = tier.amount ?? 0;
+    if (amount > 0) return `-${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;
 }
@@ -1400,6 +1419,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 */
@@ -2464,6 +2487,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
@@ -2513,7 +2633,6 @@ var LimeBundleElement = class extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render();
     this.fetchBundle();
   }
   disconnectedCallback() {
@@ -2868,9 +2987,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>
     `;
   }
@@ -2884,9 +3033,6 @@ var LimeBundleElement = class extends HTMLElement {
       })
     );
   }
-  render() {
-    this.shadow.innerHTML = `<style>${BUNDLE_BASE_CSS}</style>`;
-  }
 };
 
 // src/index.ts