@lime-bundles/widget 2.5.0 → 2.6.0

package/dist/index.js

@@ -18,7 +18,9 @@ import {
 
 // src/renderers/fixed.ts
 import {
-  resolveBundleQty
+  resolveBundleQty,
+  isVariantFulfillable,
+  shouldShowLowStockBadge
 } from "@lime-bundles/core";
 
 // src/dropdown/bind-dropdown.ts
@@ -534,9 +536,18 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
   const list = el("div", "lb-fixed__products");
   const rowHandles = [];
   rows.forEach((rowState) => {
-    const handle = renderProductRow(rowState, currency, qtyFor, () => {
-      updatePricing();
-    });
+    const handle = renderProductRow(
+      rowState,
+      currency,
+      qtyFor,
+      {
+        enabled: wc.showLowStockBadge,
+        threshold: wc.lowStockThreshold
+      },
+      () => {
+        updatePricing();
+      }
+    );
     rowHandles.push(handle);
     list.appendChild(handle.el);
   });
@@ -592,7 +603,9 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
 function buildRowState(bundle, product, productIndex) {
   const selectedVariantIds = bundle.selectedVariantIds?.[productIndex] ?? null;
   const merchantScoped = selectedVariantIds && selectedVariantIds.length > 0 ? product.variants.nodes.filter((v) => selectedVariantIds.includes(v.id)) : product.variants.nodes;
-  const firstInStock = merchantScoped.find((v) => v.availableForSale) ?? null;
+  const firstInStock = merchantScoped.find(
+    (v) => isVariantFulfillable(v, resolveBundleQty(bundle, product.id, v.id))
+  ) ?? null;
   const eligibleVariants = merchantScoped;
   const isOos = !firstInStock;
   const selected = firstInStock ?? merchantScoped[0] ?? null;
@@ -656,7 +669,7 @@ function deriveHeaderBadge(bundle, totalCents, saleCents, currency) {
   }
   return `-${formatCents(savings, currency)}`;
 }
-function renderProductRow(state, currency, qtyFor, onVariantChange) {
+function renderProductRow(state, currency, qtyFor, lowStock, onVariantChange) {
   const rowEl = el(
     "div",
     state.isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
@@ -703,6 +716,12 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     oosLabel.textContent = "Out of stock";
     info.appendChild(oosLabel);
   } else if (state.selected) {
+    const isSinglePinnedVariant = state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1;
+    if (isSinglePinnedVariant) {
+      const badge = el("span", "lb-bundle-variant-badge");
+      badge.textContent = state.eligibleVariants[0].title;
+      info.appendChild(badge);
+    }
     const prices = el("span", "lb-bundle-product-prices");
     const compare = el("span", "lb-bundle-product-compare-price", {
       "data-product-compare-price": ""
@@ -718,6 +737,11 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     });
     unitPriceEl.setAttribute("hidden", "");
     info.appendChild(unitPriceEl);
+    const lowStockEl = el("span", "lb-bundle-low-stock-badge", {
+      "data-low-stock-badge": ""
+    });
+    lowStockEl.setAttribute("hidden", "");
+    info.appendChild(lowStockEl);
     const applyVariantToRow = (variant) => {
       const unit = parseCents(variant.price.amount);
       priceEl.textContent = formatCents(unit, currency);
@@ -752,6 +776,18 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
         thumbImg.alt = nextImage.altText ?? state.product.title;
       }
+      const required = qtyFor(state.product.id, variant.id);
+      if (shouldShowLowStockBadge(
+        variant,
+        required,
+        lowStock.threshold,
+        lowStock.enabled
+      )) {
+        lowStockEl.textContent = `Only ${variant.quantityAvailable} left`;
+        lowStockEl.removeAttribute("hidden");
+      } else {
+        lowStockEl.setAttribute("hidden", "");
+      }
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
@@ -770,7 +806,7 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
       };
       const isValueAvailable = (optionIndex, value, selected) => state.eligibleVariants.some((v) => {
-        if (!v.availableForSale) return false;
+        if (!isVariantFulfillable(v, qtyFor(state.product.id, v.id))) return false;
         if (v.selectedOptions[optionIndex]?.value !== value) return false;
         return v.selectedOptions.every(
           (o, i) => i === optionIndex || o.value === selected[i]
@@ -834,10 +870,6 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       if (state.selected) {
         recomputeDisabled(state.selected.selectedOptions.map((o) => o.value));
       }
-    } else if (state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1) {
-      const badge = el("span", "lb-bundle-variant-badge");
-      badge.textContent = state.eligibleVariants[0].title;
-      info.appendChild(badge);
     }
   }
   rowEl.appendChild(info);
@@ -922,7 +954,7 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
-import { resolveBundleQty as resolveBundleQty2 } from "@lime-bundles/core";
+import { resolveBundleQty as resolveBundleQty2, isVariantFulfillable as isVariantFulfillable2, shouldShowLowStockBadge as shouldShowLowStockBadge2 } from "@lime-bundles/core";
 var PLACEHOLDER_THUMB_SVG2 = `
 <svg class="lb-bundle-placeholder-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
   <rect x="4" y="4" width="20" height="20" rx="3"></rect>
@@ -1412,7 +1444,9 @@ function renderModal(bundle, eligible, currency, handlers) {
     list.innerHTML = "";
     eligible.forEach((ep) => {
       const availableVariants = ep.variants;
-      const firstAvailVariant = ep.variants.find((v) => v.availableForSale) ?? ep.firstAvailableVariant ?? ep.variants[0];
+      const firstAvailVariant = ep.variants.find(
+        (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))
+      ) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -1421,7 +1455,9 @@ function renderModal(bundle, eligible, currency, handlers) {
         { "data-product-id": ep.product.id.replace(/^.*\//, "") }
       );
       const thumb = el("div", "lb-mix-match__modal-product-thumb");
-      const initialThumbVariant = ep.variants.find((v) => v.availableForSale) ?? ep.variants[0] ?? null;
+      const initialThumbVariant = ep.variants.find(
+        (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))
+      ) ?? ep.variants[0] ?? null;
       const initialThumbImage = initialThumbVariant?.image ?? ep.product.featuredImage ?? null;
       let thumbImg = null;
       if (initialThumbImage) {
@@ -1470,6 +1506,26 @@ function renderModal(bundle, eligible, currency, handlers) {
         unitPrice.hidden = true;
       }
       info.appendChild(unitPrice);
+      const lowStockBadge = el("span", "lb-bundle-low-stock-badge", {
+        "data-low-stock-badge": ""
+      });
+      lowStockBadge.hidden = true;
+      info.appendChild(lowStockBadge);
+      const refreshLowStockBadge = (variant) => {
+        const required = resolveBundleQty2(bundle, ep.product.id, variant.id);
+        if (shouldShowLowStockBadge2(
+          variant,
+          required,
+          bundle.widgetConfig.lowStockThreshold,
+          bundle.widgetConfig.showLowStockBadge
+        )) {
+          lowStockBadge.textContent = `Only ${variant.quantityAvailable} left`;
+          lowStockBadge.hidden = false;
+        } else {
+          lowStockBadge.hidden = true;
+        }
+      };
+      refreshLowStockBadge(currentVariant);
       const row = {
         el: productEl,
         product: ep.product,
@@ -1493,7 +1549,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           });
         };
         const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
-          if (!v.availableForSale) return false;
+          if (!isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))) return false;
           if (v.selectedOptions[optionIndex]?.value !== value) return false;
           return v.selectedOptions.every(
             (o, i) => i === optionIndex || o.value === selected[i]
@@ -1549,6 +1605,7 @@ function renderModal(bundle, eligible, currency, handlers) {
             thumbImg.alt = nextImage.altText ?? ep.product.title;
           }
           recomputeDisabled(next.selectedOptions.map((o) => o.value));
+          refreshLowStockBadge(currentVariant);
           rowUpdateCount();
         };
         const groupsContainer = el("div", "lb-bundle-variant-option-groups");
@@ -1684,7 +1741,9 @@ function buildEligibleProducts(bundle, oosBehavior) {
   for (const product of bundle.products) {
     if (seen.has(product.id)) continue;
     seen.add(product.id);
-    const available = product.variants.nodes.filter((v) => v.availableForSale);
+    const available = product.variants.nodes.filter(
+      (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, product.id, v.id))
+    );
     const isOos = available.length === 0;
     if (isOos && oosBehavior === "hide") continue;
     result.push({
@@ -1717,10 +1776,14 @@ function sanitizeId(gid) {
 }
 
 // src/renderers/volume.ts
+import { isVariantFulfillable as isVariantFulfillable3, shouldShowLowStockBadge as shouldShowLowStockBadge3 } from "@lime-bundles/core";
 function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const product = bundle.products[0];
-  const variant = product?.variants.nodes.find((v) => v.availableForSale);
+  const minTierQty = bundle.volumeTiers[0]?.minQuantity ?? 1;
+  const variant = product?.variants.nodes.find(
+    (v) => isVariantFulfillable3(v, minTierQty)
+  );
   if (!variant && wc.outOfStockBehavior === "hide") return;
   const basePriceCents = variant ? parseCents(variant.price.amount) : 0;
   const currency = variant?.price.currencyCode ?? "USD";
@@ -1819,6 +1882,18 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
       }
     ]);
   });
+  if (variant && shouldShowLowStockBadge3(
+    variant,
+    minTierQty,
+    wc.lowStockThreshold,
+    wc.showLowStockBadge
+  )) {
+    const lowStock = el("span", "lb-bundle-low-stock-badge", {
+      "data-low-stock-badge": ""
+    });
+    lowStock.textContent = `Only ${variant.quantityAvailable} left`;
+    root.appendChild(lowStock);
+  }
   root.appendChild(cta);
   root.appendChild(
     el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
@@ -1972,7 +2047,10 @@ function renderSavingsBar3(resolved, selectedIndex, currency) {
 }
 function renderCta2(bundle, onClick) {
   const product = bundle.products[0];
-  const isAvailable = product?.variants.nodes.some((v) => v.availableForSale);
+  const minTierQty = bundle.volumeTiers[0]?.minQuantity ?? 1;
+  const isAvailable = product?.variants.nodes.some(
+    (v) => isVariantFulfillable3(v, minTierQty)
+  );
   const label = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
   const button = buildCtaButton(label);
   if (!isAvailable) button.disabled = true;
@@ -2349,15 +2427,19 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: none;
 }
 
-.lb-bundle-variant-badge {
-  display: inline-block;
-  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
-  border-radius: var(--lb-variant-radius);
-  padding: 8px 12px;
+/* Read-only variant text shown below the product title when only one
+   variant is in scope (single-variant product, or merchant pinned a
+   single variant). Same visual treatment as the mix-match filled
+   slot's variant text \u2014 see .lb-mix-match__filled-variant in
+   bundle-mix-match.css. Both share this rule via the comma selector
+   so the storefront UX stays consistent across bundle types. */
+.lb-bundle-variant-badge,
+.lb-mix-match__slot--filled .lb-mix-match__filled-variant {
+  display: block;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 20px;
+  margin-top: 2px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
-  margin-top: 8px;
 }
 
 /* Per-option variant pickers. Each option's label + select sit inside a
@@ -2401,10 +2483,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
    click-to-focus doesn't leave a keyboard-style ring. The modal overlay
    gets its own selector because the Liquid path reparents it to body,
    outside the widget root. */
-.using-mouse .lb-bundle-widget :focus,
-.using-mouse .lb-bundle-widget :focus-visible,
-.using-mouse .lb-mix-match__modal-overlay :focus,
-.using-mouse .lb-mix-match__modal-overlay :focus-visible {
+.using-mouse .lb-bundle-widget :focus:not([aria-checked="true"]),
+.using-mouse .lb-bundle-widget :focus-visible:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus-visible:not([aria-checked="true"]) {
   outline: none;
   outline-offset: 0;
   box-shadow: none;
@@ -2631,6 +2713,24 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   margin-left: auto;
 }
 
+/* "Only X left" low-stock badge \u2014 appears alongside product/variant
+   info when ProductVariant.quantityAvailable falls at or below
+   wc.lowStockThreshold. Hidden when quantityAvailable is unknown
+   (Storefront token without read_product_inventory). */
+.lb-bundle-low-stock-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--lb-low-stock-text);
+  background-color: var(--lb-low-stock-bg);
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
 /* A/B test: hide save badge until JS swaps the label (prevents flash of default) */
 .lb-ab-pending {
   visibility: hidden;
@@ -2854,12 +2954,9 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   text-decoration: underline;
 }
 
-.lb-mix-match__slot--filled .lb-mix-match__filled-variant {
-  font-size: 12px;
-  line-height: 20px;
-  margin-top: 2px;
-  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
-}
+/* .lb-mix-match__filled-variant \u2014 styled jointly with
+   .lb-bundle-variant-badge above to keep the variant text consistent
+   across mix-match and fixed bundle widgets. */
 
 .lb-mix-match__filled-price {
   /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
@@ -3283,10 +3380,21 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 }
 
 .lb-volume__tier:hover {
-  border-color: color-mix(in srgb, var(--lb-tier-border-color) 50%, black);
+  border-color: var(--lb-tier-selected-border-color);
+}
+
+/* Suppress the UA default focus outline so a freshly-clicked selected
+   tier doesn't briefly show the 1px focus ring on top of (or in place of)
+   the custom selected-state outline below. Keyboard focus is still
+   indicated by the :focus-visible rule. */
+.lb-volume__tier:focus {
+  outline: none;
 }
 
-.lb-volume__tier:focus-visible {
+/* Keyboard focus indicator \u2014 explicitly excludes the selected tier so
+   the selected-state outline rule below has full ownership of the
+   outline property when both states apply at once. */
+.lb-volume__tier:focus-visible:not([aria-checked="true"]) {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
 }