@lime-bundles/widget 2.3.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,32 +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.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;
@@ -479,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>
@@ -546,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);
@@ -558,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 }
@@ -587,7 +638,13 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: firstVariant.title,
       imageUrl: firstEligible.product.featuredImage?.url ?? null,
       priceCents: (0, import_core.parseCents)(firstVariant.price.amount),
-      compareCents: firstVariant.compareAtPrice ? (0, import_core.parseCents)(firstVariant.compareAtPrice.amount) : null
+      compareCents: firstVariant.compareAtPrice ? (0, import_core.parseCents)(firstVariant.compareAtPrice.amount) : null,
+      unitPriceLabel: (0, import_core.formatUnitPrice)(
+        firstVariant.unitPrice,
+        firstVariant.unitPriceMeasurement,
+        currency
+      ),
+      quantity: (0, import_core5.resolveBundleQty)(bundle, firstEligible.product.id, firstVariant.id)
     });
   }
   afterMutation();
@@ -600,7 +657,13 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       variantTitle: variant.title,
       imageUrl: product.featuredImage?.url ?? null,
       priceCents: (0, import_core.parseCents)(variant.price.amount),
-      compareCents: variant.compareAtPrice ? (0, import_core.parseCents)(variant.compareAtPrice.amount) : null
+      compareCents: variant.compareAtPrice ? (0, import_core.parseCents)(variant.compareAtPrice.amount) : null,
+      unitPriceLabel: (0, import_core.formatUnitPrice)(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        currency
+      ),
+      quantity: (0, import_core5.resolveBundleQty)(bundle, product.id, variant.id)
     });
     afterMutation();
   }
@@ -767,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");
@@ -777,16 +843,23 @@ 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) {
+    const unitPrice = el("span", "lb-bundle-product-unit-price");
+    unitPrice.textContent = selection.unitPriceLabel;
+    info.appendChild(unitPrice);
+  }
   slot.appendChild(info);
   const remove = document.createElement("button");
   remove.type = "button";
@@ -820,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);
@@ -847,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) {
@@ -941,8 +1020,10 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
-      const variant = ep.firstAvailableVariant ?? ep.variants[0];
-      if (!variant) return;
+      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(
         "div",
         ep.isOos ? "lb-mix-match__modal-product lb-mix-match__modal-product--sold-out" : "lb-mix-match__modal-product",
@@ -964,26 +1045,147 @@ function renderModal(bundle, eligible, currency, handlers) {
       } else {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
+      const countBadge = el("span", "lb-bundle-qty-badge");
+      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");
-      const title = el("span", "lb-mix-match__modal-product-title");
+      const title = el("p", "lb-mix-match__modal-product-title");
       title.textContent = ep.product.title;
       info.appendChild(title);
-      const price = el("span", "lb-mix-match__modal-product-price");
-      price.textContent = (0, import_core.formatCents)((0, import_core.parseCents)(variant.price.amount), currency);
+      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_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id),
+        currency
+      );
       info.appendChild(price);
-      const unitPriceText = (0, import_core.formatUnitPrice)(
-        variant.unitPrice,
-        variant.unitPriceMeasurement,
+      const unitPrice = el(
+        "p",
+        "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+      );
+      const initialUnitText = (0, import_core.formatUnitPrice)(
+        currentVariant.unitPrice,
+        currentVariant.unitPriceMeasurement,
         currency
       );
-      if (unitPriceText) {
-        const unitPrice = el(
-          "span",
-          "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
+      if (initialUnitText) {
+        unitPrice.textContent = initialUnitText;
+      } else {
+        unitPrice.hidden = true;
+      }
+      info.appendChild(unitPrice);
+      const row = {
+        el: productEl,
+        product: ep.product,
+        variant: firstAvailVariant,
+        updateCount: () => {
+        }
+      };
+      if (availableVariants.length > 1) {
+        const optionNames = availableVariants[0].selectedOptions.map(
+          (o) => o.name
         );
-        unitPrice.textContent = unitPriceText;
-        info.appendChild(unitPrice);
+        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]
+          );
+        });
+        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) * nextQty,
+            currency
+          );
+          const nextUnitText = (0, import_core.formatUnitPrice)(
+            currentVariant.unitPrice,
+            currentVariant.unitPriceMeasurement,
+            currency
+          );
+          if (nextUnitText) {
+            unitPrice.textContent = nextUnitText;
+            unitPrice.hidden = false;
+          } else {
+            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(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;
+        info.appendChild(variantLabel);
       }
       if (ep.isOos) {
         const soldOut = el("span", "lb-mix-match__modal-sold-out-label");
@@ -991,56 +1193,26 @@ function renderModal(bundle, eligible, currency, handlers) {
         info.appendChild(soldOut);
       }
       productEl.appendChild(info);
+      const rowUpdateCount = () => {
+        countBadge.textContent = String(
+          (0, import_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
+        );
+      };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
-        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
-        addBtn.innerHTML = PLUS_ICON_SVG;
-        const countBadge = el("span", "lb-bundle-qty-badge");
-        countBadge.style.display = "none";
-        addBtn.appendChild(countBadge);
+        addBtn.textContent = "Add";
         addBtn.addEventListener("click", () => {
           if (handlers.isOverMax()) return;
-          handlers.onAdd(ep.product, variant);
+          handlers.onAdd(ep.product, currentVariant);
+          close();
         });
         productEl.appendChild(addBtn);
-        const removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className = "lb-mix-match__slot-remove";
-        removeBtn.setAttribute("aria-label", `Remove one ${ep.product.title}`);
-        removeBtn.style.display = "none";
-        removeBtn.innerHTML = CLOSE_ICON_SVG;
-        removeBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          handlers.onRemove(ep.product.id, variant.id);
-        });
-        productEl.appendChild(removeBtn);
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-            const count = handlers.countFor(ep.product.id, variant.id);
-            if (count > 0) {
-              countBadge.textContent = String(count);
-              countBadge.style.display = "";
-              removeBtn.style.display = "";
-            } else {
-              countBadge.style.display = "none";
-              removeBtn.style.display = "none";
-            }
-          }
-        });
-      } else {
-        productRows.push({
-          el: productEl,
-          product: ep.product,
-          variant,
-          updateCount: () => {
-          }
-        });
       }
+      row.updateCount = ep.isOos ? () => {
+      } : rowUpdateCount;
+      productRows.push(row);
       list.appendChild(productEl);
     });
     refreshCounts();
@@ -1438,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 */
@@ -1611,15 +1838,18 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 /* Product rows */
 .lb-bundle-product-row {
   display: flex;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
 }
 
 .lb-bundle-thumbnail {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Aspect-ratio comes from the merchant \`thumbnailRatio\` enum via Liquid;
+     "original" sets it to \`auto\` so the box sizes to the image's intrinsic
+     ratio. Default keeps the historical 1:1 behaviour. */
+  aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   background: var(--lb-thumbnail-bg);
   border-radius: 8px;
   overflow: hidden;
@@ -1630,8 +1860,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 
 .lb-bundle-thumbnail img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from the same merchant enum; "original" sets them to
+     \`auto\` / \`contain\` so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-thumbnail-img-height, 100%);
+  object-fit: var(--lb-thumbnail-img-fit, cover);
 }
 
 .lb-bundle-thumbnail svg {
@@ -1662,7 +1894,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .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);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: var(--lb-text);
@@ -1679,7 +1911,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
 .lb-bundle-product-compare-price {
   /* --lb-product-compare-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
   display: var(--lb-product-compare-display, inline);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
@@ -1698,7 +1930,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
    secondary text beneath the price row so it doesn't compete visually. */
 .lb-bundle-product-unit-price {
   display: block;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   margin-top: 2px;
@@ -1719,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;
@@ -1821,7 +2103,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   width: 100%;
-  padding: 16px;
+  padding: 12px 16px;
   border: var(--lb-cta-border-width) solid var(--lb-cta-border-color);
   border-radius: var(--lb-cta-radius);
   font-size: 16px;
@@ -1956,14 +2238,14 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 
 /* Fixed bundles: product rows */
 .lb-fixed .lb-bundle-product-row {
-  gap: 16px;
+  gap: 20px;
   align-items: center;
 }
 
-/* Fixed bundles: larger thumbnails */
+/* Fixed bundles: larger thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-fixed .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -1976,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);
@@ -1995,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 {
@@ -2064,7 +2348,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   width: 60px;
   height: 60px;
   min-width: 60px;
-  border: var(--lb-image-border-width) dashed color-mix(in srgb, var(--lb-text) 20%, transparent);
+  /* 2px border is intentionally independent of --lb-image-border-width \u2014
+     empty slots always need a visible dashed outline as an affordance,
+     regardless of how the merchant has styled populated thumbnails. */
+  border: 2px dashed color-mix(in srgb, var(--lb-text) 35%, transparent);
   border-radius: var(--lb-image-border-radius);
   box-sizing: border-box;
   display: flex;
@@ -2084,9 +2371,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   cursor: default;
 }
 
+/* Mix-match thumbnails. Height comes from --lb-thumbnail-aspect-ratio
+   (set on .lb-bundle-widget via Liquid / applyWidgetConfigVars). */
 .lb-mix-match .lb-bundle-thumbnail {
   width: 60px;
-  height: 60px;
   min-width: 60px;
   border-radius: var(--lb-image-border-radius);
   border: var(--lb-image-border-width) solid var(--lb-image-border-color);
@@ -2321,7 +2609,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 20px;
   padding: 12px 0;
   border-bottom: 1px solid color-mix(in srgb, var(--lb-picker-text) 7%, transparent);
 }
@@ -2333,8 +2621,11 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__modal-product-thumb {
   position: relative;
   width: 48px;
-  height: 48px;
   min-width: 48px;
+  /* Modal picker thumbs follow the merchant's pickerThumbnailRatio \u2014
+     independent from the main widget's thumbnailRatio so a merchant can
+     e.g. show tall picker thumbs with square main thumbs. */
+  aspect-ratio: var(--lb-picker-thumbnail-aspect-ratio, 1 / 1);
   border-radius: var(--lb-picker-product-radius);
   border: var(--lb-picker-product-border-width) solid var(--lb-picker-product-border-color);
   box-sizing: border-box;
@@ -2355,8 +2646,10 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-product-thumb img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* Height + fit come from pickerThumbnailRatio \u2014 "original" sets both
+     to auto/contain so the image renders uncropped at intrinsic ratio. */
+  height: var(--lb-picker-thumbnail-img-height, 100%);
+  object-fit: var(--lb-picker-thumbnail-img-fit, cover);
   border-radius: max(0px, calc(var(--lb-picker-product-radius) - var(--lb-picker-product-border-width)));
 }
 
@@ -2393,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);
@@ -2406,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;
 }
@@ -2490,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 === */
@@ -2591,7 +2889,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 .lb-volume__tier-price {
   grid-column: 1 / -1;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--lb-text);
 }
@@ -2603,7 +2901,7 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 
 /* Compare-at (strikethrough) price */
 .lb-volume__tier-compare {
-  font-size: 12px;
+  font-size: 14px;
   line-height: 16px;
   color: color-mix(in srgb, var(--lb-text) 60%, transparent);
   text-decoration: line-through;
@@ -2809,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
     });
@@ -2834,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;
@@ -2846,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();
@@ -2875,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(
@@ -2897,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 }
     );
@@ -2905,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
     );
@@ -2913,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 }
     );
@@ -2924,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;
@@ -2957,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
     });
@@ -2968,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;
@@ -2980,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;
@@ -3026,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,
@@ -3062,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) {
@@ -3097,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,
@@ -3165,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