@lime-bundles/widget 3.2.1 → 3.3.0

package/README.md

@@ -61,11 +61,30 @@ document.querySelector("lime-bundle").addEventListener(
 | `app-url` |  | Enables impression + add-to-cart analytics when set. |
 | `analytics` |  | `"false"` suppresses analytics even when `app-url` is set. |
 | `locale` |  | BCP-47 tag forwarded to the Storefront API. |
+| `country` |  | ISO-3166 alpha-2 (e.g. `"US"`). Adds `@inContext(country:)` to Storefront queries — Markets pricing + currency. |
+| `language` |  | ISO-639-1 (e.g. `"EN"`). Adds `@inContext(language:)`. |
+| `market-id` |  | Current visitor's Market GID. Hides market-restricted bundles whose allow-list doesn't include this market. |
 
 **Product resolution** (when `bundle-gid` is absent): explicit `product-handle` → `<meta name="shopify:product-handle">` → `/products/<handle>` URL segment.
 
 Changing any attribute at runtime re-fetches and re-renders.
 
+### B2B buyer identity (programmatic property only)
+
+`buyer` is **not** an HTML attribute. Set it on the element after creation so the customer access token never lands in DOM-snapshot tools (Sentry, analytics, browser extensions) or Referer headers:
+
+```js
+const el = document.querySelector("lime-bundle");
+el.buyer = async () => {
+  // Resolved per request — no token in static markup
+  return { customerAccessToken: await fetchToken(), companyLocationId: "gid://shopify/CompanyLocation/9" };
+};
+```
+
+The Customer Account API PKCE flow is the canonical token source. See https://shopify.dev/docs/api/customer/latest.
+
+Buyer-contextual Storefront responses MUST be `Cache-Control: private` — never share across users.
+
 ## Events
 
 All events bubble and pierce shadow-DOM boundaries (`composed: true`), so you can listen on any ancestor.

package/dist/index.cjs

@@ -150,6 +150,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 : "";
@@ -1044,20 +1045,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" })
@@ -1189,12 +1196,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);
@@ -1569,12 +1578,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;
@@ -1683,7 +1692,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,
@@ -1702,12 +1717,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");
@@ -1716,12 +1738,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);
@@ -1817,6 +1842,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));
   }
@@ -1824,8 +1850,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();
@@ -1845,7 +1871,11 @@ function renderQtyStepper(opts) {
       current = clamp2(qty, opts.getBounds());
       paint();
     },
-    refresh: paint
+    refresh: paint,
+    setExternallyDisabled(disabled) {
+      externallyDisabled = disabled;
+      paint();
+    }
   };
 }
 function buildEligibleProducts(bundle, oosBehavior) {
@@ -2492,6 +2522,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);
@@ -2940,6 +2977,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 */
@@ -3017,7 +3055,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;
 }
 
@@ -3084,6 +3123,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. */
@@ -3129,7 +3175,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 === */
@@ -3209,7 +3256,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 === */
@@ -3237,9 +3285,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 {
@@ -3372,6 +3421,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.
@@ -3426,13 +3476,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 {
@@ -3488,6 +3535,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 {
@@ -3605,12 +3653,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
@@ -3618,7 +3668,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"] {
@@ -3766,6 +3817,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"] {
@@ -4078,8 +4130,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;
@@ -4142,6 +4205,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 (0, import_core8.hasInContext)({
+      shopDomain: this.shopDomain,
+      accessToken: this.storefrontToken,
+      country: this.country,
+      language: this.language,
+      buyer: this.buyer
+    }) ? (0, import_core8.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(
@@ -4155,7 +4252,10 @@ var LimeBundleElement = class extends HTMLElement {
     this.renderLoading();
     const client = (0, import_core8.createStorefrontClient)({
       shopDomain: this.shopDomain,
-      accessToken: this.storefrontToken
+      accessToken: this.storefrontToken,
+      country: this.country,
+      language: this.language,
+      buyer: this.buyer
     });
     try {
       let bundlePromise;
@@ -4239,7 +4339,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      import_core8.BUNDLE_METAOBJECT_QUERY,
+      this.wrapQueryForContext(import_core8.BUNDLE_METAOBJECT_QUERY),
       { id: this.bundleGid },
       { signal }
     );
@@ -4251,11 +4351,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(
-      import_core8.BUNDLES_FOR_PRODUCT_QUERY,
+      this.wrapQueryForContext(import_core8.BUNDLES_FOR_PRODUCT_QUERY),
       { handle: productHandle },
       { signal }
     );
@@ -4267,7 +4367,7 @@ var LimeBundleElement = class extends HTMLElement {
     const bundles = [];
     for (const ref of refs) {
       const parsed = (0, import_core8.parseMetaobjectBundle)(ref.id, ref.fields);
-      if (parsed) bundles.push(parsed);
+      if (parsed && !this.isMarketHidden(parsed)) bundles.push(parsed);
     }
     this.bundles = bundles;
   }