@lime-bundles/widget 3.2.1 → 3.2.2

package/dist/index.js

@@ -142,6 +142,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 +1052,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 +1203,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 +1585,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 +1699,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 +1724,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 +1745,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 +1849,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 +1857,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 +1878,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 +2529,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 +2984,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 +3062,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 +3130,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 +3182,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 +3263,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 +3292,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 +3428,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 +3483,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 +3542,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 +3660,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 +3675,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 +3824,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"] {