@lime-bundles/widget 2.4.0 → 2.4.1

package/dist/index.d.cts

@@ -62,4 +62,25 @@ declare class LimeBundleElement extends HTMLElement {
     private renderError;
 }
 
-export { LimeBundleElement };
+/**
+ * Input-mode tracker — toggles `using-mouse` / `using-keyboard` classes on a
+ * target element so CSS can scope focus styles by the customer's current
+ * input device. Default is mouse; the first keyboard-navigation keypress
+ * (Tab, arrow keys, Enter, Space, Escape, Home/End/PageUp/PageDown) flips
+ * to keyboard mode, and the next pointer click flips back.
+ *
+ * Multiple targets share one pair of document-level listeners — installed
+ * on the first `trackInputMode` call, removed when the last target is
+ * released. Safe to call across every widget instance on a page without
+ * stacking listeners.
+ *
+ * CSS shape (see bundle-base.css):
+ *   .using-mouse .lb-bundle-widget :focus { outline: none; }
+ *
+ * The Liquid theme mirrors this behaviour from `bundle-widget.js` against
+ * `document.documentElement` so classic and headless storefronts render the
+ * same focus rings.
+ */
+declare function trackInputMode(target: HTMLElement): () => void;
+
+export { LimeBundleElement, trackInputMode };

package/dist/index.d.ts

@@ -62,4 +62,25 @@ declare class LimeBundleElement extends HTMLElement {
     private renderError;
 }
 
-export { LimeBundleElement };
+/**
+ * Input-mode tracker — toggles `using-mouse` / `using-keyboard` classes on a
+ * target element so CSS can scope focus styles by the customer's current
+ * input device. Default is mouse; the first keyboard-navigation keypress
+ * (Tab, arrow keys, Enter, Space, Escape, Home/End/PageUp/PageDown) flips
+ * to keyboard mode, and the next pointer click flips back.
+ *
+ * Multiple targets share one pair of document-level listeners — installed
+ * on the first `trackInputMode` call, removed when the last target is
+ * released. Safe to call across every widget instance on a page without
+ * stacking listeners.
+ *
+ * CSS shape (see bundle-base.css):
+ *   .using-mouse .lb-bundle-widget :focus { outline: none; }
+ *
+ * The Liquid theme mirrors this behaviour from `bundle-widget.js` against
+ * `document.documentElement` so classic and headless storefronts render the
+ * same focus rings.
+ */
+declare function trackInputMode(target: HTMLElement): () => void;
+
+export { LimeBundleElement, trackInputMode };

package/dist/index.js

@@ -212,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 ? resolveBundleQty(bundle, product.id, selected.id) : 1;
   return { product, eligibleVariants, selected, qty, isOos };
 }
@@ -366,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;
@@ -481,6 +532,7 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
+import { resolveBundleQty as resolveBundleQty2 } from "@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>
@@ -548,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);
@@ -560,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 }
@@ -594,7 +643,8 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         firstVariant.unitPrice,
         firstVariant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: resolveBundleQty2(bundle, firstEligible.product.id, firstVariant.id)
     });
   }
   afterMutation();
@@ -612,7 +662,8 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         variant.unitPrice,
         variant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: resolveBundleQty2(bundle, product.id, variant.id)
     });
     afterMutation();
   }
@@ -779,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");
@@ -789,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 = formatCents(selection.compareCents, currency);
+    compare.textContent = formatCents(lineCompare, currency);
     priceWrap.appendChild(compare);
   }
   const priceEl = document.createElement("span");
-  priceEl.textContent = formatCents(selection.priceCents, currency);
+  priceEl.textContent = formatCents(linePrice, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
   if (selection.unitPriceLabel) {
@@ -837,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 = computeBundleSaleCents(totalCents, bundle.discountConfig);
     if (showCompareAtPrice && totalCents > saleCents) {
       compare.textContent = formatCents(totalCents, currency);
@@ -864,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 = computeBundleSaleCents(totalCents, bundle.discountConfig);
     const savings = Math.max(0, totalCents - saleCents);
     if (savings <= 0) {
@@ -958,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(
@@ -984,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(
+        resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+      );
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
@@ -993,7 +1057,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       info.appendChild(title);
       const price = el("p", "lb-mix-match__modal-product-price");
       price.textContent = formatCents(
-        parseCents(currentVariant.price.amount),
+        parseCents(currentVariant.price.amount) * resolveBundleQty2(bundle, ep.product.id, currentVariant.id),
         currency
       );
       info.appendChild(price);
@@ -1020,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 = resolveBundleQty2(
+            bundle,
+            ep.product.id,
+            currentVariant.id
+          );
           price.textContent = formatCents(
-            parseCents(currentVariant.price.amount),
+            parseCents(currentVariant.price.amount) * nextQty,
             currency
           );
           const nextUnitText = formatUnitPrice(
@@ -1056,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;
@@ -1071,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(
+          resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+        );
       };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
@@ -1087,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);
       }
@@ -1492,6 +1612,61 @@ function clamp(n, min, max) {
 // src/lime-bundle.ts
 import { applyWidgetConfigVars } from "@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 */
 
@@ -1776,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;
@@ -2033,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);
@@ -2052,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 {
@@ -2459,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);
@@ -2472,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;
 }
@@ -2556,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 === */
@@ -3129,6 +3361,7 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
       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) {
@@ -3230,6 +3463,7 @@ if (typeof customElements !== "undefined" && !customElements.get("lime-bundle"))
   customElements.define("lime-bundle", LimeBundleElement);
 }
 export {
-  LimeBundleElement
+  LimeBundleElement,
+  trackInputMode
 };
 //# sourceMappingURL=index.js.map