@lime-bundles/widget 2.5.0 → 2.6.0

package/dist/index.cjs

@@ -26,7 +26,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
-var import_core7 = require("@lime-bundles/core");
+var import_core8 = require("@lime-bundles/core");
 
 // src/renderers/fixed.ts
 var import_core5 = require("@lime-bundles/core");
@@ -534,9 +534,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 +601,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) => (0, import_core5.isVariantFulfillable)(v, (0, import_core5.resolveBundleQty)(bundle, product.id, v.id))
+  ) ?? null;
   const eligibleVariants = merchantScoped;
   const isOos = !firstInStock;
   const selected = firstInStock ?? merchantScoped[0] ?? null;
@@ -656,7 +667,7 @@ function deriveHeaderBadge(bundle, totalCents, saleCents, currency) {
   }
   return `-${(0, import_core2.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 +714,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 +735,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 = (0, import_core2.parseCents)(variant.price.amount);
       priceEl.textContent = (0, import_core2.formatCents)(unit, currency);
@@ -752,6 +774,18 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
         thumbImg.alt = nextImage.altText ?? state.product.title;
       }
+      const required = qtyFor(state.product.id, variant.id);
+      if ((0, import_core5.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 +804,7 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
         });
       };
       const isValueAvailable = (optionIndex, value, selected) => state.eligibleVariants.some((v) => {
-        if (!v.availableForSale) return false;
+        if (!(0, import_core5.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 +868,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);
@@ -1412,7 +1442,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) => (0, import_core6.isVariantFulfillable)(v, (0, import_core6.resolveBundleQty)(bundle, ep.product.id, v.id))
+      ) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -1421,7 +1453,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) => (0, import_core6.isVariantFulfillable)(v, (0, import_core6.resolveBundleQty)(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 +1504,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 = (0, import_core6.resolveBundleQty)(bundle, ep.product.id, variant.id);
+        if ((0, import_core6.shouldShowLowStockBadge)(
+          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 +1547,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           });
         };
         const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
-          if (!v.availableForSale) return false;
+          if (!(0, import_core6.isVariantFulfillable)(v, (0, import_core6.resolveBundleQty)(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 +1603,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 +1739,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) => (0, import_core6.isVariantFulfillable)(v, (0, import_core6.resolveBundleQty)(bundle, product.id, v.id))
+    );
     const isOos = available.length === 0;
     if (isOos && oosBehavior === "hide") continue;
     result.push({
@@ -1717,10 +1774,14 @@ function sanitizeId(gid) {
 }
 
 // src/renderers/volume.ts
+var import_core7 = require("@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) => (0, import_core7.isVariantFulfillable)(v, minTierQty)
+  );
   if (!variant && wc.outOfStockBehavior === "hide") return;
   const basePriceCents = variant ? (0, import_core2.parseCents)(variant.price.amount) : 0;
   const currency = variant?.price.currencyCode ?? "USD";
@@ -1819,6 +1880,18 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
       }
     ]);
   });
+  if (variant && (0, import_core7.shouldShowLowStockBadge)(
+    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 +2045,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) => (0, import_core7.isVariantFulfillable)(v, minTierQty)
+  );
   const label = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
   const button = buildCtaButton(label);
   if (!isAvailable) button.disabled = true;
@@ -2014,7 +2090,7 @@ function clamp(n, min, max) {
 }
 
 // src/lime-bundle.ts
-var import_core8 = require("@lime-bundles/core");
+var import_core9 = require("@lime-bundles/core");
 
 // src/utils/input-mode.ts
 var NAV_KEYS = /* @__PURE__ */ new Set([
@@ -2349,15 +2425,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 +2481,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 +2711,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 +2952,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 +3378,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;
 }
@@ -3823,7 +3929,7 @@ var LimeBundleElement = class extends HTMLElement {
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
-    const client = (0, import_core7.createStorefrontClient)({
+    const client = (0, import_core8.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -3848,7 +3954,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const cssPromise = client.query(import_core7.SHOP_CUSTOM_CSS_QUERY, void 0, {
+      const cssPromise = client.query(import_core8.SHOP_CUSTOM_CSS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -3860,8 +3966,8 @@ var LimeBundleElement = class extends HTMLElement {
       }
       const css = await cssPromise;
       if (css?.shop?.metafield?.value) {
-        (0, import_core7.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
-        const sanitized = (0, import_core7.sanitizeCustomCss)(css.shop.metafield.value);
+        (0, import_core8.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
+        const sanitized = (0, import_core8.sanitizeCustomCss)(css.shop.metafield.value);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
       await this.applyABVariants();
@@ -3889,14 +3995,14 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles.map(async (bundle) => {
         if (!bundle.abTestId || !bundle.abVariantB) return bundle;
         try {
-          const assignment = await (0, import_core7.getABTestAssignment)(
+          const assignment = await (0, import_core8.getABTestAssignment)(
             this.appUrl,
             this.shopDomain,
             bundle.abTestId,
             bundle.id
           );
           if (assignment?.variant === "B") {
-            return (0, import_core7.applyABVariantB)(bundle);
+            return (0, import_core8.applyABVariantB)(bundle);
           }
         } catch (err) {
           console.warn(
@@ -3911,7 +4017,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      import_core7.BUNDLE_METAOBJECT_QUERY,
+      import_core8.BUNDLE_METAOBJECT_QUERY,
       { id: this.bundleGid },
       { signal }
     );
@@ -3919,7 +4025,7 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core7.parseMetaobjectBundle)(
+    const parsed = (0, import_core8.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
@@ -3927,7 +4033,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      import_core7.BUNDLES_FOR_PRODUCT_QUERY,
+      import_core8.BUNDLES_FOR_PRODUCT_QUERY,
       { handle: productHandle },
       { signal }
     );
@@ -3938,7 +4044,7 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core7.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core8.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed) bundles.push(parsed);
     }
     this.bundles = bundles;
@@ -3971,7 +4077,7 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core7.createStorefrontClient)({
+    const client = (0, import_core8.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -3982,7 +4088,7 @@ var LimeBundleElement = class extends HTMLElement {
       let checkoutUrl = null;
       if (existingCartId) {
         const res = await client.query(
-          import_core7.CART_LINES_ADD_MUTATION,
+          import_core8.CART_LINES_ADD_MUTATION,
           { cartId: existingCartId, lines }
         );
         const payload = res.cartLinesAdd;
@@ -3994,7 +4100,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core7.CART_CREATE_MUTATION,
+          import_core8.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
@@ -4040,7 +4146,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core7.reportAddToCart)(
+    (0, import_core8.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -4077,7 +4183,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_core8.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      (0, import_core9.applyWidgetConfigVars)(container, bundle.widgetConfig);
       this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
@@ -4113,8 +4219,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core7.observeImpression)(element, () => {
-      (0, import_core7.reportImpression)(
+    const cleanup = (0, import_core8.observeImpression)(element, () => {
+      (0, import_core8.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,