@lime-bundles/widget 3.2.1 → 3.3.0

package/dist/index.d.cts

@@ -1,5 +1,64 @@
+import { BuyerResolver } from '@lime-bundles/core';
+
+/**
+ * <lime-bundle> Web Component — renders Lime Bundles on any storefront.
+ *
+ * ## The two modes
+ *
+ * Single-bundle (pinned):
+ *   <lime-bundle
+ *     shop-domain="my-shop.myshopify.com"
+ *     storefront-token="shpat_..."
+ *     bundle-gid="gid://shopify/Metaobject/42"
+ *   ></lime-bundle>
+ *
+ * Product-aware (matches classic Liquid theme block behaviour — one snippet
+ * on the product page renders every active bundle configured against that
+ * product):
+ *   <lime-bundle
+ *     shop-domain="my-shop.myshopify.com"
+ *     storefront-token="shpat_..."
+ *   ></lime-bundle>
+ *
+ * Product resolution cascade (when no `bundle-gid` is set):
+ *   1. explicit `product-handle` attribute
+ *   2. <meta name="shopify:product-handle" content="..."> on the page
+ *   3. /products/<handle> segment of window.location.pathname
+ *   4. fallthrough: renders nothing, fires `lime-bundle:error`
+ *
+ * ## Add-to-cart behaviour
+ *
+ * Merchants who do nothing get a default: the widget calls Shopify's
+ * Storefront Cart API (tokenless — no extra scopes required) and redirects
+ * the browser to the returned checkoutUrl. One-click-to-checkout is the
+ * right UX for most merchants pasting the widget into Webflow / Wix /
+ * Squarespace / static HTML.
+ *
+ * Merchants with their own cart state (Hydrogen's useCart, a custom cart
+ * drawer, etc.) opt out by attaching a listener that calls
+ * `event.preventDefault()`:
+ *
+ *   document.querySelector("lime-bundle").addEventListener(
+ *     "lime-bundle:add-to-cart",
+ *     (ev) => {
+ *       ev.preventDefault();           // suppress the default redirect
+ *       myCart.linesAdd(ev.detail.lines);
+ *     },
+ *   );
+ *
+ * The event is always dispatched; only the default action is conditional.
+ */
+
 declare class LimeBundleElement extends HTMLElement {
     static observedAttributes: string[];
+    /**
+     * B2B buyer identity. Set programmatically — `element.buyer = {...}` or
+     * `element.buyer = () => fetchToken()`. NEVER expose as an HTML attribute
+     * because the customer access token would land in DOM snapshots (Sentry,
+     * analytics, browser extensions) and Referer headers. See the package
+     * README ("Markets & B2B").
+     */
+    buyer: BuyerResolver | undefined;
     private shadow;
     private bundles;
     private abortController;
@@ -28,6 +87,22 @@ declare class LimeBundleElement extends HTMLElement {
     private get productHandleAttr();
     private get appUrl();
     private get analyticsEnabled();
+    private get country();
+    private get language();
+    private get marketId();
+    /**
+     * Returns the @inContext-wrapped query when any context field is set;
+     * otherwise the plain query. Keeps responses publicly cacheable when
+     * no buyer/country/language is set.
+     */
+    private wrapQueryForContext;
+    /**
+     * Returns true if this bundle should be hidden for the current market.
+     * For "all" bundles, always returns false (visible). For "specific"
+     * bundles, returns true when no marketId was set or when the bundle's
+     * marketIds doesn't include the configured market.
+     */
+    private isMarketHidden;
     private fetchBundle;
     /**
      * Resolve the visitor's A/B bucket for every bundle with an active test

package/dist/index.d.ts

@@ -1,5 +1,64 @@
+import { BuyerResolver } from '@lime-bundles/core';
+
+/**
+ * <lime-bundle> Web Component — renders Lime Bundles on any storefront.
+ *
+ * ## The two modes
+ *
+ * Single-bundle (pinned):
+ *   <lime-bundle
+ *     shop-domain="my-shop.myshopify.com"
+ *     storefront-token="shpat_..."
+ *     bundle-gid="gid://shopify/Metaobject/42"
+ *   ></lime-bundle>
+ *
+ * Product-aware (matches classic Liquid theme block behaviour — one snippet
+ * on the product page renders every active bundle configured against that
+ * product):
+ *   <lime-bundle
+ *     shop-domain="my-shop.myshopify.com"
+ *     storefront-token="shpat_..."
+ *   ></lime-bundle>
+ *
+ * Product resolution cascade (when no `bundle-gid` is set):
+ *   1. explicit `product-handle` attribute
+ *   2. <meta name="shopify:product-handle" content="..."> on the page
+ *   3. /products/<handle> segment of window.location.pathname
+ *   4. fallthrough: renders nothing, fires `lime-bundle:error`
+ *
+ * ## Add-to-cart behaviour
+ *
+ * Merchants who do nothing get a default: the widget calls Shopify's
+ * Storefront Cart API (tokenless — no extra scopes required) and redirects
+ * the browser to the returned checkoutUrl. One-click-to-checkout is the
+ * right UX for most merchants pasting the widget into Webflow / Wix /
+ * Squarespace / static HTML.
+ *
+ * Merchants with their own cart state (Hydrogen's useCart, a custom cart
+ * drawer, etc.) opt out by attaching a listener that calls
+ * `event.preventDefault()`:
+ *
+ *   document.querySelector("lime-bundle").addEventListener(
+ *     "lime-bundle:add-to-cart",
+ *     (ev) => {
+ *       ev.preventDefault();           // suppress the default redirect
+ *       myCart.linesAdd(ev.detail.lines);
+ *     },
+ *   );
+ *
+ * The event is always dispatched; only the default action is conditional.
+ */
+
 declare class LimeBundleElement extends HTMLElement {
     static observedAttributes: string[];
+    /**
+     * B2B buyer identity. Set programmatically — `element.buyer = {...}` or
+     * `element.buyer = () => fetchToken()`. NEVER expose as an HTML attribute
+     * because the customer access token would land in DOM snapshots (Sentry,
+     * analytics, browser extensions) and Referer headers. See the package
+     * README ("Markets & B2B").
+     */
+    buyer: BuyerResolver | undefined;
     private shadow;
     private bundles;
     private abortController;
@@ -28,6 +87,22 @@ declare class LimeBundleElement extends HTMLElement {
     private get productHandleAttr();
     private get appUrl();
     private get analyticsEnabled();
+    private get country();
+    private get language();
+    private get marketId();
+    /**
+     * Returns the @inContext-wrapped query when any context field is set;
+     * otherwise the plain query. Keeps responses publicly cacheable when
+     * no buyer/country/language is set.
+     */
+    private wrapQueryForContext;
+    /**
+     * Returns true if this bundle should be hidden for the current market.
+     * For "all" bundles, always returns false (visible). For "specific"
+     * bundles, returns true when no marketId was set or when the bundle's
+     * marketIds doesn't include the configured market.
+     */
+    private isMarketHidden;
     private fetchBundle;
     /**
      * Resolve the visitor's A/B bucket for every bundle with an active test

package/dist/index.js

@@ -13,7 +13,9 @@ import {
   injectCustomCss,
   sanitizeCustomCss,
   getABTestAssignment,
-  applyABVariantB
+  applyABVariantB,
+  hasInContext,
+  withInContext
 } from "@lime-bundles/core";
 
 // src/renderers/fixed.ts
@@ -142,6 +144,7 @@ function bindDropdown(select) {
   let optionEls = [];
   let instance;
   function syncFromSelect() {
+    trigger.disabled = select.disabled;
     const opts = readOptions(select);
     const idx = select.selectedIndex;
     triggerLabel.textContent = idx >= 0 && opts[idx] ? opts[idx].label : "";
@@ -1051,20 +1054,26 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   root.appendChild(pricingSection.el);
   const savingsBar = wc.savingsBar.visible ? renderSavingsBar2() : null;
   if (savingsBar) root.appendChild(savingsBar.el);
+  const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
+  cta.disabled = true;
+  cta.addEventListener("click", () => {
+    if (cta.disabled) return;
+    onAddToCart(buildCartLines(selections, bundle));
+  });
   const modal = renderModal(bundle, eligible, currency, {
     showSearch: wc.showSearch,
     showQtySelector,
     selections,
     onAdd: (product, variant, quantity) => addSelection(product, variant, quantity),
-    isComplete: () => selections.length >= requiredQty
+    isComplete: () => selections.length >= requiredQty,
+    getFocusAfterAdd: () => {
+      const empty = slotsContainer.querySelector(
+        ".lb-mix-match__slot--empty"
+      );
+      return empty ?? cta;
+    }
   });
   root.appendChild(modal.el);
-  const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
-  cta.disabled = true;
-  cta.addEventListener("click", () => {
-    if (cta.disabled) return;
-    onAddToCart(buildCartLines(selections, bundle));
-  });
   root.appendChild(cta);
   root.appendChild(
     el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
@@ -1196,12 +1205,14 @@ function renderProgress(requiredQty) {
   const wrap = el("div", "lb-mix-match__progress");
   const labels = el("div", "lb-mix-match__progress-labels");
   const count = el("span", "lb-mix-match__progress-count", {
-    "data-progress-count": ""
+    "data-progress-count": "",
+    "aria-live": "polite"
   });
   count.textContent = `0 of ${requiredQty} selected`;
   labels.appendChild(count);
   const remaining = el("span", "lb-mix-match__progress-remaining", {
-    "data-progress-remaining": ""
+    "data-progress-remaining": "",
+    "aria-live": "polite"
   });
   remaining.textContent = `${requiredQty} more to go`;
   labels.appendChild(remaining);
@@ -1576,12 +1587,12 @@ function renderModal(bundle, eligible, currency, handlers) {
         refreshFromSelections: () => {
         }
       };
+      const optionSelects = [];
       if (availableVariants.length > 1) {
         const optionNames = availableVariants[0].selectedOptions.map(
           (o) => o.name
         );
         const productIdTail = ep.product.id.replace(/^.*\//, "");
-        const optionSelects = [];
         const resolveVariant = (values) => availableVariants.find(
           (v) => v.selectedOptions.length === values.length && v.selectedOptions.every((o, i) => o.value === values[i])
         ) ?? null;
@@ -1690,7 +1701,13 @@ function renderModal(bundle, eligible, currency, handlers) {
       productEl.appendChild(info);
       let addBtn = null;
       const refreshAddState = () => {
-        if (!addBtn) return;
+        if (!addBtn) {
+          optionSelects.forEach((sel) => {
+            sel.disabled = true;
+          });
+          if (stepper) stepper.setExternallyDisabled(true);
+          return;
+        }
         const { cap } = computeStepperBounds();
         const already = alreadyInBundleFor(
           handlers.selections,
@@ -1709,12 +1726,19 @@ function renderModal(bundle, eligible, currency, handlers) {
         if (productInBundle) {
           addBtn.disabled = true;
           addBtn.textContent = "Added";
+          addBtn.setAttribute("aria-label", `Added ${ep.product.title}`);
           productEl.classList.add("lb-mix-match__modal-product--in-bundle");
         } else {
           addBtn.textContent = "Add";
+          addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
           productEl.classList.remove("lb-mix-match__modal-product--in-bundle");
           addBtn.disabled = handlers.isComplete() || cap < rule.min;
         }
+        const rowDisabled = addBtn.disabled;
+        optionSelects.forEach((sel) => {
+          sel.disabled = rowDisabled;
+        });
+        if (stepper) stepper.setExternallyDisabled(rowDisabled);
       };
       if (!ep.isOos) {
         const actions = el("div", "lb-mix-match__modal-product-actions");
@@ -1723,12 +1747,15 @@ function renderModal(bundle, eligible, currency, handlers) {
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
         addBtn.textContent = "Add";
+        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
         addBtn.addEventListener("click", () => {
           if (!addBtn || addBtn.disabled) return;
           if (handlers.isComplete()) return;
           const qty = stepper ? stepper.value() : rule.min;
           handlers.onAdd(ep.product, currentVariant, qty);
           if (stepper) stepper.reset(rule.min);
+          const nextFocus = handlers.getFocusAfterAdd();
+          if (nextFocus) lastFocused = nextFocus;
           close();
         });
         actions.appendChild(addBtn);
@@ -1824,6 +1851,7 @@ function renderQtyStepper(opts) {
   plus.innerHTML = STEPPER_PLUS_SVG;
   wrap.appendChild(plus);
   let current = clamp2(opts.initial, opts.getBounds());
+  let externallyDisabled = false;
   function clamp2(n, b) {
     return Math.max(b.min, Math.min(b.max, n));
   }
@@ -1831,8 +1859,8 @@ function renderQtyStepper(opts) {
     const b = opts.getBounds();
     current = clamp2(current, b);
     valueEl.textContent = String(current);
-    minus.disabled = current <= b.min;
-    plus.disabled = current >= b.max;
+    minus.disabled = externallyDisabled || current <= b.min;
+    plus.disabled = externallyDisabled || current >= b.max;
   }
   minus.addEventListener("click", () => {
     const b = opts.getBounds();
@@ -1852,7 +1880,11 @@ function renderQtyStepper(opts) {
       current = clamp2(qty, opts.getBounds());
       paint();
     },
-    refresh: paint
+    refresh: paint,
+    setExternallyDisabled(disabled) {
+      externallyDisabled = disabled;
+      paint();
+    }
   };
 }
 function buildEligibleProducts(bundle, oosBehavior) {
@@ -2499,6 +2531,13 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   text-decoration: underline;
 }
 
+a.lb-bundle-product-name:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 0;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
 .lb-bundle-product-price {
   /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-price-display, block);
@@ -2947,6 +2986,7 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 .lb-bundle-variant-select:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 `;
 var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
@@ -3024,7 +3064,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__slot--empty:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: -2px;
+  box-shadow: none;
   border-radius: 8px;
 }
 
@@ -3091,6 +3132,13 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   text-decoration: underline;
 }
 
+.lb-mix-match__slot--filled a.lb-mix-match__filled-title:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
 /* .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. */
@@ -3136,7 +3184,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__slot-remove:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: -2px;
+  box-shadow: none;
 }
 
 /* === Modal Overlay === */
@@ -3216,7 +3265,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-close:focus-visible {
   outline: 2px solid var(--lb-primary-color);
-  outline-offset: 2px;
+  outline-offset: 0;
+  box-shadow: none;
 }
 
 /* === Modal Search === */
@@ -3244,9 +3294,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   color: color-mix(in srgb, var(--lb-picker-text) 50%, transparent);
 }
 
-.lb-mix-match__modal-search-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--lb-primary-color);
+.lb-mix-match__modal-search-input:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-mix-match__modal-search-clear {
@@ -3379,6 +3430,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__variant-select:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 /* Per-pick quantity stepper inside the picker modal product row.
@@ -3433,13 +3485,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   justify-content: center;
 }
 
-.lb-mix-match__qty-stepper-button:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--lb-picker-text) 6%, transparent);
-}
-
 .lb-mix-match__qty-stepper-button:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: -2px;
+  box-shadow: none;
 }
 
 .lb-mix-match__qty-stepper-button:disabled {
@@ -3495,6 +3544,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-add:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-mix-match__modal-add:disabled {
@@ -3612,12 +3662,14 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
   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. */
+/* Suppress the UA default focus outline + Dawn's focus shadow so a
+   freshly-clicked selected tier doesn't briefly show the 1px focus ring
+   or shadow 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;
+  box-shadow: none;
 }
 
 /* Keyboard focus indicator \u2014 explicitly excludes the selected tier so
@@ -3625,7 +3677,8 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
    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;
+  outline-offset: -2px;
+  box-shadow: none;
 }
 
 .lb-volume__tier[aria-checked="true"] {
@@ -3773,6 +3826,7 @@ var BUNDLE_DROPDOWN_CSS = `/**
 .lb-dropdown-trigger:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
+  box-shadow: none;
 }
 
 .lb-dropdown-trigger[aria-expanded="true"] {
@@ -4085,8 +4139,19 @@ var LimeBundleElement = class extends HTMLElement {
     "product-handle",
     "app-url",
     "analytics",
-    "locale"
+    "locale",
+    "country",
+    "language",
+    "market-id"
   ];
+  /**
+   * B2B buyer identity. Set programmatically — `element.buyer = {...}` or
+   * `element.buyer = () => fetchToken()`. NEVER expose as an HTML attribute
+   * because the customer access token would land in DOM snapshots (Sentry,
+   * analytics, browser extensions) and Referer headers. See the package
+   * README ("Markets & B2B").
+   */
+  buyer = void 0;
   shadow;
   bundles = [];
   abortController = null;
@@ -4149,6 +4214,40 @@ var LimeBundleElement = class extends HTMLElement {
   get analyticsEnabled() {
     return this.getAttribute("analytics") !== "false";
   }
+  get country() {
+    return this.getAttribute("country") ?? void 0;
+  }
+  get language() {
+    return this.getAttribute("language") ?? void 0;
+  }
+  get marketId() {
+    return this.getAttribute("market-id") ?? void 0;
+  }
+  /**
+   * Returns the @inContext-wrapped query when any context field is set;
+   * otherwise the plain query. Keeps responses publicly cacheable when
+   * no buyer/country/language is set.
+   */
+  wrapQueryForContext(query) {
+    return hasInContext({
+      shopDomain: this.shopDomain,
+      accessToken: this.storefrontToken,
+      country: this.country,
+      language: this.language,
+      buyer: this.buyer
+    }) ? withInContext(query) : query;
+  }
+  /**
+   * Returns true if this bundle should be hidden for the current market.
+   * For "all" bundles, always returns false (visible). For "specific"
+   * bundles, returns true when no marketId was set or when the bundle's
+   * marketIds doesn't include the configured market.
+   */
+  isMarketHidden(bundle) {
+    if (bundle.marketVisibility !== "specific") return false;
+    if (!this.marketId) return true;
+    return !bundle.marketIds.includes(this.marketId);
+  }
   async fetchBundle() {
     if (!this.shopDomain || !this.storefrontToken) {
       this.renderError(
@@ -4162,7 +4261,10 @@ var LimeBundleElement = class extends HTMLElement {
     this.renderLoading();
     const client = createStorefrontClient({
       shopDomain: this.shopDomain,
-      accessToken: this.storefrontToken
+      accessToken: this.storefrontToken,
+      country: this.country,
+      language: this.language,
+      buyer: this.buyer
     });
     try {
       let bundlePromise;
@@ -4246,7 +4348,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      BUNDLE_METAOBJECT_QUERY,
+      this.wrapQueryForContext(BUNDLE_METAOBJECT_QUERY),
       { id: this.bundleGid },
       { signal }
     );
@@ -4258,11 +4360,11 @@ var LimeBundleElement = class extends HTMLElement {
       data.metaobject.id,
       data.metaobject.fields
     );
-    this.bundles = parsed ? [parsed] : [];
+    this.bundles = parsed && !this.isMarketHidden(parsed) ? [parsed] : [];
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      BUNDLES_FOR_PRODUCT_QUERY,
+      this.wrapQueryForContext(BUNDLES_FOR_PRODUCT_QUERY),
       { handle: productHandle },
       { signal }
     );
@@ -4274,7 +4376,7 @@ var LimeBundleElement = class extends HTMLElement {
     const bundles = [];
     for (const ref of refs) {
       const parsed = parseMetaobjectBundle(ref.id, ref.fields);
-      if (parsed) bundles.push(parsed);
+      if (parsed && !this.isMarketHidden(parsed)) bundles.push(parsed);
     }
     this.bundles = bundles;
   }