@lime-bundles/widget 2.4.0 → 2.4.1

package/dist/index.cjs

@@ -20,12 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  LimeBundleElement: () => LimeBundleElement
+  LimeBundleElement: () => LimeBundleElement,
+  trackInputMode: () => trackInputMode
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
-var import_core5 = require("@lime-bundles/core");
+var import_core6 = require("@lime-bundles/core");
 
 // src/renderers/fixed.ts
 var import_core4 = require("@lime-bundles/core");
@@ -211,12 +212,11 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
 }
 function buildRowState(bundle, product, productIndex) {
   const selectedVariantIds = bundle.selectedVariantIds?.[productIndex] ?? null;
-  const available = product.variants.nodes.filter(
-    (v) => v.availableForSale
-  );
-  const eligibleVariants = selectedVariantIds && selectedVariantIds.length > 0 ? available.filter((v) => selectedVariantIds.includes(v.id)) : available;
-  const isOos = eligibleVariants.length === 0;
-  const selected = eligibleVariants[0] ?? 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 eligibleVariants = merchantScoped;
+  const isOos = !firstInStock;
+  const selected = firstInStock ?? merchantScoped[0] ?? null;
   const qty = selected ? (0, import_core4.resolveBundleQty)(bundle, product.id, selected.id) : 1;
   return { product, eligibleVariants, selected, qty, isOos };
 }
@@ -365,33 +365,85 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
-      const select = document.createElement("select");
-      select.className = "lb-bundle-variant-select";
-      select.setAttribute("data-variant-select", "");
-      select.name = `lb-variant-${state.product.id.replace(/^.*\//, "")}`;
-      select.setAttribute(
-        "aria-label",
-        `Select variant for ${state.product.title}`
+      const optionNames = state.eligibleVariants[0].selectedOptions.map(
+        (o) => o.name
       );
-      state.eligibleVariants.forEach((variant) => {
-        const opt = document.createElement("option");
-        opt.value = variant.id;
-        opt.textContent = variant.title;
-        if (variant.id === state.selected?.id) opt.selected = true;
-        select.appendChild(opt);
-      });
-      select.addEventListener("change", () => {
-        const variant = state.eligibleVariants.find(
-          (v) => v.id === select.value
+      const productIdTail = state.product.id.replace(/^.*\//, "");
+      const optionSelects = [];
+      const resolveVariant = (values) => state.eligibleVariants.find(
+        (v) => v.selectedOptions.every((o, i) => o.value === values[i]) && v.selectedOptions.length === values.length
+      ) ?? null;
+      const syncSelectsToVariant = (variant) => {
+        variant.selectedOptions.forEach((o, i) => {
+          const sel = optionSelects[i];
+          if (sel && sel.value !== o.value) sel.value = o.value;
+        });
+      };
+      const isValueAvailable = (optionIndex, value, selected) => state.eligibleVariants.some((v) => {
+        if (!v.availableForSale) return false;
+        if (v.selectedOptions[optionIndex]?.value !== value) return false;
+        return v.selectedOptions.every(
+          (o, i) => i === optionIndex || o.value === selected[i]
         );
-        if (!variant) return;
+      });
+      const recomputeDisabled = (selected) => {
+        optionSelects.forEach((sel, i) => {
+          Array.from(sel.options).forEach((opt) => {
+            opt.disabled = !isValueAvailable(i, opt.value, selected);
+          });
+        });
+      };
+      const handleChange = () => {
+        const values = optionSelects.map((s) => s.value);
+        const variant = resolveVariant(values);
+        if (!variant) {
+          if (state.selected) {
+            syncSelectsToVariant(state.selected);
+            recomputeDisabled(state.selected.selectedOptions.map((o) => o.value));
+          }
+          return;
+        }
         state.selected = variant;
         state.qty = qtyFor(state.product.id, variant.id);
         if (qtyBadgeRef) qtyBadgeRef.textContent = String(state.qty);
         applyVariantToRow(variant);
+        recomputeDisabled(variant.selectedOptions.map((o) => o.value));
         onVariantChange();
+      };
+      const groupsContainer = el("div", "lb-bundle-variant-option-groups");
+      optionNames.forEach((name2, position) => {
+        const group = el("div", "lb-bundle-variant-option-group");
+        const label = el("span", "lb-bundle-variant-option-label");
+        label.textContent = name2;
+        group.appendChild(label);
+        const select = document.createElement("select");
+        select.className = "lb-bundle-variant-select";
+        select.setAttribute("data-variant-option", "");
+        select.setAttribute("data-option-position", String(position + 1));
+        select.name = `lb-variant-${productIdTail}-${position + 1}`;
+        select.setAttribute("aria-label", name2);
+        const seen = /* @__PURE__ */ new Set();
+        state.eligibleVariants.forEach((v) => {
+          const value = v.selectedOptions[position]?.value;
+          if (!value || seen.has(value)) return;
+          seen.add(value);
+          const opt = document.createElement("option");
+          opt.value = value;
+          opt.textContent = value;
+          if (state.selected?.selectedOptions[position]?.value === value) {
+            opt.selected = true;
+          }
+          select.appendChild(opt);
+        });
+        select.addEventListener("change", handleChange);
+        optionSelects.push(select);
+        group.appendChild(select);
+        groupsContainer.appendChild(group);
       });
-      info.appendChild(select);
+      info.appendChild(groupsContainer);
+      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;
@@ -480,6 +532,7 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
+var import_core5 = require("@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>
@@ -547,9 +600,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     showSearch: wc.showSearch,
     onAdd: (product, variant) => addSelection(product, variant),
     onRemove: (productId, variantId) => removeSelection(productId, variantId),
-    countFor: (productId, variantId) => selections.filter(
-      (s) => s.productId === productId && s.variantId === variantId
-    ).length,
     isOverMax: () => selections.length >= maxQty
   });
   root.appendChild(modal.el);
@@ -559,7 +609,7 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     if (cta.disabled) return;
     const lines = selections.map((s) => ({
       merchandiseId: s.variantId,
-      quantity: 1,
+      quantity: s.quantity,
       attributes: [
         { key: "_lime_bundle_gid", value: bundle.id },
         { key: "_lime_bundle_type", value: bundle.bundleType }
@@ -593,7 +643,8 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         firstVariant.unitPrice,
         firstVariant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: (0, import_core5.resolveBundleQty)(bundle, firstEligible.product.id, firstVariant.id)
     });
   }
   afterMutation();
@@ -611,7 +662,8 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         variant.unitPrice,
         variant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: (0, import_core5.resolveBundleQty)(bundle, product.id, variant.id)
     });
     afterMutation();
   }
@@ -778,6 +830,9 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   } else {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
   }
+  const qtyBadge = el("span", "lb-bundle-qty-badge");
+  qtyBadge.textContent = String(selection.quantity);
+  thumb.appendChild(qtyBadge);
   slot.appendChild(thumb);
   const info = el("div", "lb-mix-match__filled-info");
   const title = el("span", "lb-mix-match__filled-title");
@@ -788,14 +843,16 @@ function renderFilledSlot(selection, index, currency, onRemove) {
     variant.textContent = selection.variantTitle;
     info.appendChild(variant);
   }
+  const linePrice = selection.priceCents * selection.quantity;
+  const lineCompare = selection.compareCents !== null ? selection.compareCents * selection.quantity : null;
   const priceWrap = el("span", "lb-mix-match__filled-price");
-  if (selection.compareCents && selection.compareCents > selection.priceCents) {
+  if (lineCompare !== null && lineCompare > linePrice) {
     const compare = el("span", "lb-mix-match__filled-compare");
-    compare.textContent = (0, import_core.formatCents)(selection.compareCents, currency);
+    compare.textContent = (0, import_core.formatCents)(lineCompare, currency);
     priceWrap.appendChild(compare);
   }
   const priceEl = document.createElement("span");
-  priceEl.textContent = (0, import_core.formatCents)(selection.priceCents, currency);
+  priceEl.textContent = (0, import_core.formatCents)(linePrice, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
   if (selection.unitPriceLabel) {
@@ -836,7 +893,10 @@ function renderPricingSection(showCompareAtPrice) {
       return;
     }
     wrap.style.display = "";
-    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const totalCents = selections.reduce(
+      (s, sel) => s + sel.priceCents * sel.quantity,
+      0
+    );
     const saleCents = (0, import_core.computeBundleSaleCents)(totalCents, bundle.discountConfig);
     if (showCompareAtPrice && totalCents > saleCents) {
       compare.textContent = (0, import_core.formatCents)(totalCents, currency);
@@ -863,7 +923,10 @@ function renderSavingsBar2() {
       wrap.style.display = "none";
       return;
     }
-    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const totalCents = selections.reduce(
+      (s, sel) => s + sel.priceCents * sel.quantity,
+      0
+    );
     const saleCents = (0, import_core.computeBundleSaleCents)(totalCents, bundle.discountConfig);
     const savings = Math.max(0, totalCents - saleCents);
     if (savings <= 0) {
@@ -957,8 +1020,8 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
-      const availableVariants = ep.variants.filter((v) => v.availableForSale);
-      const firstAvailVariant = availableVariants[0] ?? ep.firstAvailableVariant ?? ep.variants[0];
+      const availableVariants = ep.variants;
+      const firstAvailVariant = ep.variants.find((v) => v.availableForSale) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -983,7 +1046,9 @@ function renderModal(bundle, eligible, currency, handlers) {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
       const countBadge = el("span", "lb-bundle-qty-badge");
-      countBadge.style.display = "none";
+      countBadge.textContent = String(
+        (0, import_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
+      );
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
@@ -992,7 +1057,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       info.appendChild(title);
       const price = el("p", "lb-mix-match__modal-product-price");
       price.textContent = (0, import_core.formatCents)(
-        (0, import_core.parseCents)(currentVariant.price.amount),
+        (0, import_core.parseCents)(currentVariant.price.amount) * (0, import_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id),
         currency
       );
       info.appendChild(price);
@@ -1019,28 +1084,53 @@ function renderModal(bundle, eligible, currency, handlers) {
         }
       };
       if (availableVariants.length > 1) {
-        const select = document.createElement("select");
-        select.className = "lb-mix-match__variant-select";
-        select.setAttribute("data-variant-select", "");
-        select.name = `lb-variant-${ep.product.id.replace(/^.*\//, "")}`;
-        select.setAttribute(
-          "aria-label",
-          `Select variant for ${ep.product.title}`
+        const optionNames = availableVariants[0].selectedOptions.map(
+          (o) => o.name
         );
-        availableVariants.forEach((v) => {
-          const opt = document.createElement("option");
-          opt.value = v.id;
-          opt.textContent = v.title;
-          if (v.id === firstAvailVariant.id) opt.selected = true;
-          select.appendChild(opt);
+        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;
+        const syncSelectsToVariant = (v) => {
+          v.selectedOptions.forEach((o, i) => {
+            const sel = optionSelects[i];
+            if (sel && sel.value !== o.value) sel.value = o.value;
+          });
+        };
+        const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
+          if (!v.availableForSale) return false;
+          if (v.selectedOptions[optionIndex]?.value !== value) return false;
+          return v.selectedOptions.every(
+            (o, i) => i === optionIndex || o.value === selected[i]
+          );
         });
-        select.addEventListener("change", () => {
-          const next = availableVariants.find((v) => v.id === select.value);
-          if (!next) return;
+        const recomputeDisabled = (selected) => {
+          optionSelects.forEach((sel, i) => {
+            Array.from(sel.options).forEach((opt) => {
+              opt.disabled = !isValueAvailable(i, opt.value, selected);
+            });
+          });
+        };
+        const handleChange = () => {
+          const values = optionSelects.map((s) => s.value);
+          const next = resolveVariant(values);
+          if (!next) {
+            syncSelectsToVariant(currentVariant);
+            recomputeDisabled(
+              currentVariant.selectedOptions.map((o) => o.value)
+            );
+            return;
+          }
           currentVariant = next;
           row.variant = next;
+          const nextQty = (0, import_core5.resolveBundleQty)(
+            bundle,
+            ep.product.id,
+            currentVariant.id
+          );
           price.textContent = (0, import_core.formatCents)(
-            (0, import_core.parseCents)(currentVariant.price.amount),
+            (0, import_core.parseCents)(currentVariant.price.amount) * nextQty,
             currency
           );
           const nextUnitText = (0, import_core.formatUnitPrice)(
@@ -1055,9 +1145,43 @@ function renderModal(bundle, eligible, currency, handlers) {
             unitPrice.textContent = "";
             unitPrice.hidden = true;
           }
+          recomputeDisabled(next.selectedOptions.map((o) => o.value));
           rowUpdateCount();
+        };
+        const groupsContainer = el("div", "lb-bundle-variant-option-groups");
+        optionNames.forEach((name, position) => {
+          const group = el("div", "lb-bundle-variant-option-group");
+          const label = el("span", "lb-bundle-variant-option-label");
+          label.textContent = name;
+          group.appendChild(label);
+          const select = document.createElement("select");
+          select.className = "lb-mix-match__variant-select";
+          select.setAttribute("data-variant-option", "");
+          select.setAttribute("data-option-position", String(position + 1));
+          select.name = `lb-variant-${productIdTail}-${position + 1}`;
+          select.setAttribute("aria-label", name);
+          const seen = /* @__PURE__ */ new Set();
+          availableVariants.forEach((v) => {
+            const value = v.selectedOptions[position]?.value;
+            if (!value || seen.has(value)) return;
+            seen.add(value);
+            const opt = document.createElement("option");
+            opt.value = value;
+            opt.textContent = value;
+            if (firstAvailVariant.selectedOptions[position]?.value === value) {
+              opt.selected = true;
+            }
+            select.appendChild(opt);
+          });
+          select.addEventListener("change", handleChange);
+          optionSelects.push(select);
+          group.appendChild(select);
+          groupsContainer.appendChild(group);
         });
-        info.appendChild(select);
+        info.appendChild(groupsContainer);
+        recomputeDisabled(
+          firstAvailVariant.selectedOptions.map((o) => o.value)
+        );
       } else if (availableVariants.length === 1 && firstAvailVariant.title !== "Default Title") {
         const variantLabel = el("span", "lb-mix-match__filled-variant");
         variantLabel.textContent = firstAvailVariant.title;
@@ -1070,13 +1194,9 @@ function renderModal(bundle, eligible, currency, handlers) {
       }
       productEl.appendChild(info);
       const rowUpdateCount = () => {
-        const count = handlers.countFor(ep.product.id, currentVariant.id);
-        if (count > 0) {
-          countBadge.textContent = String(count);
-          countBadge.style.display = "";
-        } else {
-          countBadge.style.display = "none";
-        }
+        countBadge.textContent = String(
+          (0, import_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
+        );
       };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
@@ -1086,6 +1206,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         addBtn.addEventListener("click", () => {
           if (handlers.isOverMax()) return;
           handlers.onAdd(ep.product, currentVariant);
+          close();
         });
         productEl.appendChild(addBtn);
       }
@@ -1489,7 +1610,62 @@ function clamp(n, min, max) {
 }
 
 // src/lime-bundle.ts
-var import_core6 = require("@lime-bundles/core");
+var import_core7 = require("@lime-bundles/core");
+
+// src/utils/input-mode.ts
+var NAV_KEYS = /* @__PURE__ */ new Set([
+  "Tab",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Enter",
+  " ",
+  "Escape"
+]);
+var targets = /* @__PURE__ */ new Set();
+var listenersAttached = false;
+function setAll(on) {
+  const off = on === "using-mouse" ? "using-keyboard" : "using-mouse";
+  for (const el2 of targets) {
+    el2.classList.add(on);
+    el2.classList.remove(off);
+  }
+}
+function onKeyDown(e) {
+  if (NAV_KEYS.has(e.key)) setAll("using-keyboard");
+}
+function onPointerDown() {
+  setAll("using-mouse");
+}
+function attachListeners() {
+  if (listenersAttached) return;
+  listenersAttached = true;
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("pointerdown", onPointerDown, true);
+}
+function detachListeners() {
+  if (!listenersAttached) return;
+  listenersAttached = false;
+  document.removeEventListener("keydown", onKeyDown, true);
+  document.removeEventListener("pointerdown", onPointerDown, true);
+}
+function trackInputMode(target) {
+  target.classList.add("using-mouse");
+  target.classList.remove("using-keyboard");
+  targets.add(target);
+  attachListeners();
+  return () => {
+    targets.delete(target);
+    target.classList.remove("using-mouse");
+    target.classList.remove("using-keyboard");
+    if (targets.size === 0) detachListeners();
+  };
+}
 
 // src/styles/bundle-css.ts
 var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle widget types */
@@ -1775,6 +1951,56 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   margin-top: 8px;
 }
 
+/* Per-option variant pickers. Each option's label + select sit inside a
+   .lb-bundle-variant-option-group (flex column, 2px gap between label and
+   select); the groups stack inside a .lb-bundle-variant-option-groups
+   parent (flex column, 12px gap between groups). The parent owns the top
+   offset from the preceding unit-price line, so individual labels and
+   selects don't carry their own vertical margins. */
+.lb-bundle-variant-option-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.lb-bundle-variant-option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lb-bundle-variant-option-label {
+  display: block;
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+}
+
+.lb-mix-match__modal-product-info .lb-bundle-variant-option-groups {
+  margin-top: 4px;
+}
+
+/* Focus-ring suppression for mouse users. A small JS helper \u2014 see
+   packages/widget/src/utils/input-mode.ts and bundle-widget.js \u2014 toggles
+   .using-mouse / .using-keyboard on the widget root (or html in the Liquid
+   path) based on the customer's current input device. Default is mouse, so
+   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 {
+  outline: none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .lb-bundle-quantity {
   font-size: 12px;
   line-height: 16px;
@@ -2032,9 +2258,10 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   border: none;
 }
 
-/* Variant picker select \u2014 styled to match the variant badge aesthetic */
+/* Variant picker select \u2014 styled to match the variant badge aesthetic.
+   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
+   by the group/groups flex gap, not the select itself. */
 .lb-bundle-variant-select {
-  margin-top: 8px;
   display: inline-block;
   border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
   border-radius: var(--lb-variant-radius);
@@ -2051,7 +2278,8 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   background-repeat: no-repeat;
   background-position: right 8px center;
   background-size: 12px;
-  max-width: 100%;
+  width: 50%;
+  max-width: 50%;
 }
 
 .lb-bundle-variant-select:focus-visible {
@@ -2458,7 +2686,6 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__variant-select {
   font-size: 12px;
-  margin: 4px 0 0;
   padding: 4px 24px 4px 8px;
   border: var(--lb-picker-variant-border-width) solid var(--lb-picker-variant-border-color);
   border-radius: var(--lb-picker-variant-radius);
@@ -2471,7 +2698,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-family: inherit;
   min-height: 32px;
   cursor: pointer;
-  max-width: 120px;
+  width: 50%;
+  max-width: 50%;
   appearance: none;
   -webkit-appearance: none;
 }
@@ -2555,6 +2783,11 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   .lb-mix-match__modal-overlay--open .lb-mix-match__modal {
     transform: translateY(0);
   }
+
+  .lb-mix-match__variant-select {
+    width: 80%;
+    max-width: 80%;
+  }
 }
 
 /* === Reduced Motion === */
@@ -2874,7 +3107,7 @@ var LimeBundleElement = class extends HTMLElement {
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
-    const client = (0, import_core5.createStorefrontClient)({
+    const client = (0, import_core6.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -2899,7 +3132,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const cssPromise = client.query(import_core5.SHOP_CUSTOM_CSS_QUERY, void 0, {
+      const cssPromise = client.query(import_core6.SHOP_CUSTOM_CSS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -2911,8 +3144,8 @@ var LimeBundleElement = class extends HTMLElement {
       }
       const css = await cssPromise;
       if (css?.shop?.metafield?.value) {
-        (0, import_core5.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
-        const sanitized = (0, import_core5.sanitizeCustomCss)(css.shop.metafield.value);
+        (0, import_core6.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
+        const sanitized = (0, import_core6.sanitizeCustomCss)(css.shop.metafield.value);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
       await this.applyABVariants();
@@ -2940,14 +3173,14 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles.map(async (bundle) => {
         if (!bundle.abTestId || !bundle.abVariantB) return bundle;
         try {
-          const assignment = await (0, import_core5.getABTestAssignment)(
+          const assignment = await (0, import_core6.getABTestAssignment)(
             this.appUrl,
             this.shopDomain,
             bundle.abTestId,
             bundle.id
           );
           if (assignment?.variant === "B") {
-            return (0, import_core5.applyABVariantB)(bundle);
+            return (0, import_core6.applyABVariantB)(bundle);
           }
         } catch (err) {
           console.warn(
@@ -2962,7 +3195,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      import_core5.BUNDLE_METAOBJECT_QUERY,
+      import_core6.BUNDLE_METAOBJECT_QUERY,
       { id: this.bundleGid },
       { signal }
     );
@@ -2970,7 +3203,7 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core5.parseMetaobjectBundle)(
+    const parsed = (0, import_core6.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
@@ -2978,7 +3211,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      import_core5.BUNDLES_FOR_PRODUCT_QUERY,
+      import_core6.BUNDLES_FOR_PRODUCT_QUERY,
       { handle: productHandle },
       { signal }
     );
@@ -2989,7 +3222,7 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core5.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core6.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed) bundles.push(parsed);
     }
     this.bundles = bundles;
@@ -3022,7 +3255,7 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core5.createStorefrontClient)({
+    const client = (0, import_core6.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -3033,7 +3266,7 @@ var LimeBundleElement = class extends HTMLElement {
       let checkoutUrl = null;
       if (existingCartId) {
         const res = await client.query(
-          import_core5.CART_LINES_ADD_MUTATION,
+          import_core6.CART_LINES_ADD_MUTATION,
           { cartId: existingCartId, lines }
         );
         const payload = res.cartLinesAdd;
@@ -3045,7 +3278,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core5.CART_CREATE_MUTATION,
+          import_core6.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
@@ -3091,7 +3324,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core5.reportAddToCart)(
+    (0, import_core6.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -3127,7 +3360,8 @@ 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_core6.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      (0, import_core7.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
       switch (bundle.bundleType) {
@@ -3162,8 +3396,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core5.observeImpression)(element, () => {
-      (0, import_core5.reportImpression)(
+    const cleanup = (0, import_core6.observeImpression)(element, () => {
+      (0, import_core6.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,
@@ -3230,6 +3464,7 @@ if (typeof customElements !== "undefined" && !customElements.get("lime-bundle"))
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LimeBundleElement
+  LimeBundleElement,
+  trackInputMode
 });
 //# sourceMappingURL=index.cjs.map