@lime-bundles/widget 2.4.1 → 2.5.1

package/dist/index.cjs

@@ -26,16 +26,393 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lime-bundle.ts
-var import_core6 = require("@lime-bundles/core");
+var import_core7 = require("@lime-bundles/core");
 
 // src/renderers/fixed.ts
-var import_core4 = require("@lime-bundles/core");
+var import_core5 = require("@lime-bundles/core");
 
-// src/renderers/pricing.ts
+// src/dropdown/bind-dropdown.ts
 var import_core = require("@lime-bundles/core");
+var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = import_core.dropdown;
+var ITEM_HEIGHT_PX = 32;
+var LIST_PAD_Y = 8;
+var MAX_VISIBLE_ITEMS = 8;
+var openInstances = [];
+function closeOutsideEvent(event) {
+  const path = event.composedPath();
+  for (let i = openInstances.length - 1; i >= 0; i--) {
+    const inst = openInstances[i];
+    if (!path.includes(inst.shell) && !path.includes(inst.listbox)) {
+      inst.close();
+    }
+  }
+}
+function onDocResize() {
+  for (let i = openInstances.length - 1; i >= 0; i--) openInstances[i].close();
+}
+var docListenersAttached = false;
+function attachDocumentListeners() {
+  if (docListenersAttached) return;
+  document.addEventListener("pointerdown", closeOutsideEvent, true);
+  window.addEventListener("scroll", closeOutsideEvent, true);
+  window.addEventListener("resize", onDocResize);
+  docListenersAttached = true;
+}
+function detachDocumentListeners() {
+  if (!docListenersAttached || openInstances.length > 0) return;
+  document.removeEventListener("pointerdown", closeOutsideEvent, true);
+  window.removeEventListener("scroll", closeOutsideEvent, true);
+  window.removeEventListener("resize", onDocResize);
+  docListenersAttached = false;
+}
+function readOptions(select) {
+  const out = [];
+  for (let i = 0; i < select.options.length; i++) {
+    const o = select.options[i];
+    out.push({ disabled: o.disabled, label: o.textContent || o.value });
+  }
+  return out;
+}
+function firstEnabled(opts) {
+  for (let i = 0; i < opts.length; i++) if (!opts[i].disabled) return i;
+  return -1;
+}
+var VARIANT_SELECT_CLASSES = [
+  "lb-bundle-variant-select",
+  "lb-mix-match__variant-select"
+];
+var BIND_SELECTOR = VARIANT_SELECT_CLASSES.map(
+  (c) => `select.${c}:not(.lb-dropdown-state)`
+).join(", ");
+function bindDropdown(select) {
+  const slot = select;
+  if (select.classList.contains("lb-dropdown-state")) {
+    return slot.__lbDropdownInstance ?? null;
+  }
+  const doc = select.ownerDocument;
+  const rootNode = select.getRootNode();
+  const labelText = select.getAttribute("aria-label") ?? "";
+  const idBase = `lb-dd-${Math.random().toString(36).slice(2, 9)}`;
+  select.classList.add("lb-dropdown-state");
+  select.setAttribute("aria-hidden", "true");
+  select.setAttribute("tabindex", "-1");
+  const shell = doc.createElement("div");
+  shell.className = "lb-dropdown";
+  shell.setAttribute("data-lb-dropdown", "");
+  const trigger = doc.createElement("button");
+  trigger.type = "button";
+  trigger.className = "lb-dropdown-trigger";
+  trigger.setAttribute("role", "combobox");
+  trigger.setAttribute("aria-haspopup", "listbox");
+  trigger.setAttribute("aria-expanded", "false");
+  const listboxId = `${idBase}-listbox`;
+  trigger.setAttribute("aria-controls", listboxId);
+  if (labelText) trigger.setAttribute("aria-label", labelText);
+  const triggerLabel = doc.createElement("span");
+  triggerLabel.className = "lb-dropdown-trigger-value";
+  const chevron = doc.createElement("span");
+  chevron.className = "lb-dropdown-chevron";
+  chevron.setAttribute("aria-hidden", "true");
+  trigger.appendChild(triggerLabel);
+  trigger.appendChild(chevron);
+  const listbox = doc.createElement("ul");
+  listbox.id = listboxId;
+  listbox.className = "lb-dropdown-listbox";
+  listbox.setAttribute("role", "listbox");
+  if (labelText) listbox.setAttribute("aria-label", labelText);
+  listbox.hidden = true;
+  shell.appendChild(trigger);
+  select.parentNode?.insertBefore(shell, select.nextSibling);
+  const modalOverlay = select.closest("[data-modal-overlay]");
+  if (modalOverlay) {
+    modalOverlay.appendChild(listbox);
+    listbox.setAttribute("data-lb-dropdown-portal", "");
+  } else {
+    shell.appendChild(listbox);
+  }
+  let isOpen = false;
+  let activeIndex = -1;
+  let typeAhead = emptyTypeAheadState();
+  let optionEls = [];
+  let instance;
+  function syncFromSelect() {
+    const opts = readOptions(select);
+    const idx = select.selectedIndex;
+    triggerLabel.textContent = idx >= 0 && opts[idx] ? opts[idx].label : "";
+    while (listbox.firstChild) listbox.removeChild(listbox.firstChild);
+    optionEls = [];
+    for (let i = 0; i < opts.length; i++) {
+      const li = doc.createElement("li");
+      li.id = `${idBase}-opt-${i}`;
+      li.className = "lb-dropdown-option";
+      li.setAttribute("role", "option");
+      li.setAttribute("aria-selected", i === idx ? "true" : "false");
+      if (opts[i].disabled) li.setAttribute("aria-disabled", "true");
+      li.setAttribute("data-value", select.options[i].value);
+      li.setAttribute("data-index", String(i));
+      li.textContent = opts[i].label;
+      listbox.appendChild(li);
+      optionEls.push(li);
+    }
+  }
+  function setActive(newIndex) {
+    if (activeIndex >= 0 && optionEls[activeIndex]) {
+      optionEls[activeIndex].classList.remove("is-active");
+    }
+    activeIndex = newIndex;
+    if (newIndex >= 0 && optionEls[newIndex]) {
+      const li = optionEls[newIndex];
+      li.classList.add("is-active");
+      trigger.setAttribute("aria-activedescendant", li.id);
+      const liTop = li.offsetTop;
+      const liBottom = liTop + li.offsetHeight;
+      const visTop = listbox.scrollTop;
+      const visBottom = visTop + listbox.clientHeight;
+      if (liTop < visTop) {
+        listbox.scrollTop = liTop;
+      } else if (liBottom > visBottom) {
+        listbox.scrollTop = liBottom - listbox.clientHeight;
+      }
+    } else {
+      trigger.setAttribute("aria-activedescendant", "");
+    }
+  }
+  function position() {
+    const rect = trigger.getBoundingClientRect();
+    if (rect.width === 0) return false;
+    const visibleCount = Math.min(optionEls.length || 1, MAX_VISIBLE_ITEMS);
+    const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    const result = computePosition({
+      trigger: {
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width
+      },
+      viewportHeight: window.innerHeight,
+      desiredHeight
+    });
+    listbox.setAttribute("data-placement", result.placement);
+    listbox.style.maxHeight = `${result.maxHeight}px`;
+    if (listbox.hasAttribute("data-lb-dropdown-portal")) {
+      listbox.style.top = `${result.offsetTop}px`;
+      listbox.style.left = `${result.offsetLeft}px`;
+      listbox.style.width = `${result.width}px`;
+    }
+    return true;
+  }
+  function open() {
+    if (isOpen) return;
+    for (let i = openInstances.length - 1; i >= 0; i--) {
+      if (openInstances[i] !== instance) openInstances[i].close();
+    }
+    isOpen = true;
+    listbox.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    if (!position()) {
+      requestAnimationFrame(() => position());
+    }
+    const opts = readOptions(select);
+    const selIdx = select.selectedIndex;
+    if (selIdx >= 0 && opts[selIdx] && !opts[selIdx].disabled) {
+      setActive(selIdx);
+    } else {
+      setActive(firstEnabled(opts));
+    }
+    openInstances.push(instance);
+    if (openInstances.length === 1) attachDocumentListeners();
+  }
+  function close(restoreFocus) {
+    if (!isOpen) return;
+    isOpen = false;
+    listbox.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-activedescendant", "");
+    if (activeIndex >= 0 && optionEls[activeIndex]) {
+      optionEls[activeIndex].classList.remove("is-active");
+    }
+    activeIndex = -1;
+    const idx = openInstances.indexOf(instance);
+    if (idx >= 0) openInstances.splice(idx, 1);
+    if (openInstances.length === 0) detachDocumentListeners();
+    if (restoreFocus) trigger.focus();
+  }
+  function commit(index) {
+    const opt = select.options[index];
+    if (!opt || opt.disabled) return;
+    if (select.value !== opt.value) {
+      select.value = opt.value;
+      const event = new Event("change", { bubbles: true });
+      select.dispatchEvent(event);
+    }
+    syncFromSelect();
+    close(true);
+  }
+  function applyAction(action) {
+    switch (action.type) {
+      case "open":
+        open();
+        if (action.activeIndex >= 0) setActive(action.activeIndex);
+        return;
+      case "close":
+        close(action.restoreFocus);
+        return;
+      case "move-active":
+        setActive(action.activeIndex);
+        return;
+      case "commit":
+        commit(action.index);
+        return;
+      case "type-ahead": {
+        const opts = readOptions(select);
+        const result = pushTypeAheadChar(
+          typeAhead,
+          action.char,
+          Date.now(),
+          opts
+        );
+        typeAhead = result.newState;
+        if (result.matchedIndex !== null) {
+          if (!isOpen) open();
+          setActive(result.matchedIndex);
+        }
+        return;
+      }
+      case "passthrough":
+        return;
+      default: {
+        const _exhaustive = action;
+        void _exhaustive;
+      }
+    }
+  }
+  function onKeydown(event) {
+    const opts = readOptions(select);
+    const action = handleKey(
+      {
+        key: event.key,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey
+      },
+      {
+        isOpen,
+        activeIndex,
+        selectedIndex: select.selectedIndex,
+        options: opts
+      }
+    );
+    if (action.preventDefault) event.preventDefault();
+    applyAction(action);
+  }
+  function onTriggerClick(event) {
+    event.preventDefault();
+    if (isOpen) close(false);
+    else open();
+  }
+  function onListboxClick(event) {
+    let target = event.target;
+    while (target && target !== listbox) {
+      if (target.classList?.contains("lb-dropdown-option")) {
+        const idx = parseInt(target.getAttribute("data-index") ?? "", 10);
+        if (!Number.isNaN(idx)) {
+          commit(idx);
+          return;
+        }
+      }
+      target = target.parentElement;
+    }
+  }
+  function onListboxMousemove(event) {
+    let target = event.target;
+    while (target && target !== listbox) {
+      if (target.classList?.contains("lb-dropdown-option")) {
+        if (target.getAttribute("aria-disabled") === "true") return;
+        const idx = parseInt(target.getAttribute("data-index") ?? "", 10);
+        if (!Number.isNaN(idx) && idx !== activeIndex) setActive(idx);
+        return;
+      }
+      target = target.parentElement;
+    }
+  }
+  function onShellFocusout() {
+    setTimeout(() => {
+      if (!isOpen) return;
+      const active = rootNode.activeElement ?? doc.activeElement;
+      if (!shell.contains(active)) close(false);
+    }, 0);
+  }
+  function onSelectChange() {
+    syncFromSelect();
+  }
+  const observer = new MutationObserver(() => {
+    syncFromSelect();
+  });
+  observer.observe(select, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["disabled", "value", "selected"]
+  });
+  const onListboxMousedown = (event) => event.preventDefault();
+  trigger.addEventListener("click", onTriggerClick);
+  trigger.addEventListener("keydown", onKeydown);
+  shell.addEventListener("focusout", onShellFocusout);
+  listbox.addEventListener("mousedown", onListboxMousedown);
+  listbox.addEventListener("click", onListboxClick);
+  listbox.addEventListener("mousemove", onListboxMousemove);
+  select.addEventListener("change", onSelectChange);
+  function destroy() {
+    if (isOpen) close(false);
+    observer.disconnect();
+    trigger.removeEventListener("click", onTriggerClick);
+    trigger.removeEventListener("keydown", onKeydown);
+    shell.removeEventListener("focusout", onShellFocusout);
+    listbox.removeEventListener("mousedown", onListboxMousedown);
+    listbox.removeEventListener("click", onListboxClick);
+    listbox.removeEventListener("mousemove", onListboxMousemove);
+    select.removeEventListener("change", onSelectChange);
+    if (shell.parentNode) shell.parentNode.removeChild(shell);
+    if (listbox.parentNode) listbox.parentNode.removeChild(listbox);
+    select.classList.remove("lb-dropdown-state");
+    select.removeAttribute("aria-hidden");
+    select.removeAttribute("tabindex");
+    delete slot.__lbDropdownInstance;
+  }
+  instance = {
+    shell,
+    listbox,
+    select,
+    close: () => close(false),
+    destroy
+  };
+  slot.__lbDropdownInstance = instance;
+  syncFromSelect();
+  return instance;
+}
+function bindAllDropdowns(root) {
+  const selects = root.querySelectorAll(BIND_SELECTOR);
+  const instances = [];
+  selects.forEach((sel) => {
+    const inst = bindDropdown(sel);
+    if (inst) instances.push(inst);
+  });
+  return instances;
+}
+function unbindAllDropdowns(root) {
+  const bound = root.querySelectorAll("select.lb-dropdown-state");
+  bound.forEach((sel) => {
+    const inst = sel.__lbDropdownInstance;
+    if (inst) inst.destroy();
+  });
+}
 
-// src/renderers/countdown.ts
+// src/renderers/pricing.ts
 var import_core2 = require("@lime-bundles/core");
+
+// src/renderers/countdown.ts
+var import_core3 = require("@lime-bundles/core");
 function renderCountdown(endsAtIso) {
   const parsed = parseIso(endsAtIso);
   if (parsed === null) return null;
@@ -62,7 +439,7 @@ function renderCountdown(endsAtIso) {
       stop();
       return;
     }
-    timer.textContent = (0, import_core2.formatCountdown)(msLeft);
+    timer.textContent = (0, import_core3.formatCountdown)(msLeft);
   }
   function stop() {
     if (intervalId !== null) {
@@ -116,7 +493,7 @@ function el(tag, className, attrs = {}) {
 }
 
 // src/renderers/image.ts
-var import_core3 = require("@lime-bundles/core");
+var import_core4 = require("@lime-bundles/core");
 
 // src/renderers/fixed.ts
 var PLACEHOLDER_THUMB_SVG = `
@@ -127,7 +504,7 @@ var PLACEHOLDER_THUMB_SVG = `
 </svg>`;
 function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
-  const qtyFor = (productId, variantId) => (0, import_core4.resolveBundleQty)(bundle, productId, variantId);
+  const qtyFor = (productId, variantId) => (0, import_core5.resolveBundleQty)(bundle, productId, variantId);
   const rows = [];
   let oosCount = 0;
   bundle.products.forEach((product, idx) => {
@@ -192,11 +569,13 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
     })
   );
   container.appendChild(root);
+  bindAllDropdowns(root);
+  onCleanup?.(() => unbindAllDropdowns(root));
   updatePricing();
   function updatePricing() {
     const totalCents = rows.reduce((sum, r) => {
       if (!r.selected) return sum;
-      const unit = (0, import_core.parseCents)(r.selected.price.amount);
+      const unit = (0, import_core2.parseCents)(r.selected.price.amount);
       return sum + unit * r.qty;
     }, 0);
     const saleCents = computeSale(totalCents, bundle.discountConfig, rows);
@@ -217,7 +596,7 @@ function buildRowState(bundle, product, productIndex) {
   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;
+  const qty = selected ? (0, import_core5.resolveBundleQty)(bundle, product.id, selected.id) : 1;
   return { product, eligibleVariants, selected, qty, isOos };
 }
 function renderHeader(bundle, currency) {
@@ -237,7 +616,7 @@ function renderHeader(bundle, currency) {
     "data-header-badge": ""
   });
   header.appendChild(badgeEl);
-  const initialPricing = (0, import_core.computeFixedPricing)(
+  const initialPricing = (0, import_core2.computeFixedPricing)(
     bundle,
     bundle.productQuantities,
     wc.pricing.showSaveBadge
@@ -273,9 +652,9 @@ function deriveHeaderBadge(bundle, totalCents, saleCents, currency) {
     return `-${Math.round(dc.discountValue)}%`;
   }
   if (dc.discountType === "fixed_amount" && dc.discountValue > 0) {
-    return `-${(0, import_core.formatCents)(Math.round(dc.discountValue * 100), currency)}`;
+    return `-${(0, import_core2.formatCents)(Math.round(dc.discountValue * 100), currency)}`;
   }
-  return `-${(0, import_core.formatCents)(savings, currency)}`;
+  return `-${(0, import_core2.formatCents)(savings, currency)}`;
 }
 function renderProductRow(state, currency, qtyFor, onVariantChange) {
   const rowEl = el(
@@ -287,18 +666,20 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     }
   );
   const thumb = el("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
-  if (state.product.featuredImage) {
-    const img = document.createElement("img");
-    img.src = (0, import_core3.transformImageUrl)(state.product.featuredImage.url, {
-      width: import_core3.THUMB_PX,
-      height: import_core3.THUMB_PX,
+  const initialThumbImage = state.selected?.image ?? state.product.featuredImage ?? null;
+  let thumbImg = null;
+  if (initialThumbImage) {
+    thumbImg = document.createElement("img");
+    thumbImg.src = (0, import_core4.transformImageUrl)(initialThumbImage.url, {
+      width: import_core4.THUMB_PX,
+      height: import_core4.THUMB_PX,
       crop: "center"
     });
-    img.alt = state.product.featuredImage.altText ?? state.product.title;
-    img.width = import_core3.THUMB_PX;
-    img.height = import_core3.THUMB_PX;
-    img.loading = "lazy";
-    thumb.appendChild(img);
+    thumbImg.alt = initialThumbImage.altText ?? state.product.title;
+    thumbImg.width = import_core4.THUMB_PX;
+    thumbImg.height = import_core4.THUMB_PX;
+    thumbImg.loading = "lazy";
+    thumb.appendChild(thumbImg);
   } else {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG);
   }
@@ -338,12 +719,12 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
     unitPriceEl.setAttribute("hidden", "");
     info.appendChild(unitPriceEl);
     const applyVariantToRow = (variant) => {
-      const unit = (0, import_core.parseCents)(variant.price.amount);
-      priceEl.textContent = (0, import_core.formatCents)(unit, currency);
+      const unit = (0, import_core2.parseCents)(variant.price.amount);
+      priceEl.textContent = (0, import_core2.formatCents)(unit, currency);
       if (variant.compareAtPrice) {
-        const cmp = (0, import_core.parseCents)(variant.compareAtPrice.amount);
+        const cmp = (0, import_core2.parseCents)(variant.compareAtPrice.amount);
         if (cmp > unit) {
-          compare.textContent = (0, import_core.formatCents)(cmp, currency);
+          compare.textContent = (0, import_core2.formatCents)(cmp, currency);
           compare.removeAttribute("hidden");
         } else {
           compare.setAttribute("hidden", "");
@@ -351,7 +732,7 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       } else {
         compare.setAttribute("hidden", "");
       }
-      const unitText = (0, import_core.formatUnitPrice)(
+      const unitText = (0, import_core2.formatUnitPrice)(
         variant.unitPrice,
         variant.unitPriceMeasurement,
         currency
@@ -362,6 +743,15 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       } else {
         unitPriceEl.setAttribute("hidden", "");
       }
+      const nextImage = variant.image ?? state.product.featuredImage;
+      if (thumbImg && nextImage) {
+        thumbImg.src = (0, import_core4.transformImageUrl)(nextImage.url, {
+          width: import_core4.THUMB_PX,
+          height: import_core4.THUMB_PX,
+          crop: "center"
+        });
+        thumbImg.alt = nextImage.altText ?? state.product.title;
+      }
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
@@ -472,9 +862,9 @@ function renderPricingRow(bundle) {
   return {
     el: row,
     update({ totalCents, saleCents, savingsCents, currency }) {
-      sale.textContent = (0, import_core.formatCents)(saleCents, currency);
+      sale.textContent = (0, import_core2.formatCents)(saleCents, currency);
       if (bundle.widgetConfig.pricing.showCompareAtPrice && savingsCents > 0) {
-        compare.textContent = (0, import_core.formatCents)(totalCents, currency);
+        compare.textContent = (0, import_core2.formatCents)(totalCents, currency);
         compare.style.display = "";
       } else {
         compare.style.display = "none";
@@ -499,7 +889,7 @@ function renderSavingsBar() {
         return;
       }
       bar.style.display = "";
-      amount.textContent = (0, import_core.formatCents)(savingsCents, currency);
+      amount.textContent = (0, import_core2.formatCents)(savingsCents, currency);
     }
   };
 }
@@ -521,7 +911,7 @@ function computeSale(totalCents, discount, rows) {
     let saleCents = 0;
     for (const r of rows) {
       if (!r.selected) continue;
-      const unit = (0, import_core.parseCents)(r.selected.price.amount);
+      const unit = (0, import_core2.parseCents)(r.selected.price.amount);
       const off = Math.floor(unit * discount.discountValue / 100);
       const perUnit = Math.max(0, unit - off);
       saleCents += perUnit * r.qty;
@@ -532,7 +922,7 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
-var import_core5 = require("@lime-bundles/core");
+var import_core6 = 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>
@@ -628,6 +1018,7 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     })
   );
   container.appendChild(root);
+  onCleanup?.(() => unbindAllDropdowns(root));
   const firstEligible = eligible.find((ep) => !ep.isOos);
   const firstVariant = firstEligible?.firstAvailableVariant ?? firstEligible?.variants[0];
   if (firstEligible && firstVariant) {
@@ -636,15 +1027,15 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       productTitle: firstEligible.product.title,
       variantId: firstVariant.id,
       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,
-      unitPriceLabel: (0, import_core.formatUnitPrice)(
+      imageUrl: firstVariant.image?.url ?? firstEligible.product.featuredImage?.url ?? null,
+      priceCents: (0, import_core2.parseCents)(firstVariant.price.amount),
+      compareCents: firstVariant.compareAtPrice ? (0, import_core2.parseCents)(firstVariant.compareAtPrice.amount) : null,
+      unitPriceLabel: (0, import_core2.formatUnitPrice)(
         firstVariant.unitPrice,
         firstVariant.unitPriceMeasurement,
         currency
       ),
-      quantity: (0, import_core5.resolveBundleQty)(bundle, firstEligible.product.id, firstVariant.id)
+      quantity: (0, import_core6.resolveBundleQty)(bundle, firstEligible.product.id, firstVariant.id)
     });
   }
   afterMutation();
@@ -655,15 +1046,15 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       productTitle: product.title,
       variantId: variant.id,
       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,
-      unitPriceLabel: (0, import_core.formatUnitPrice)(
+      imageUrl: variant.image?.url ?? product.featuredImage?.url ?? null,
+      priceCents: (0, import_core2.parseCents)(variant.price.amount),
+      compareCents: variant.compareAtPrice ? (0, import_core2.parseCents)(variant.compareAtPrice.amount) : null,
+      unitPriceLabel: (0, import_core2.formatUnitPrice)(
         variant.unitPrice,
         variant.unitPriceMeasurement,
         currency
       ),
-      quantity: (0, import_core5.resolveBundleQty)(bundle, product.id, variant.id)
+      quantity: (0, import_core6.resolveBundleQty)(bundle, product.id, variant.id)
     });
     afterMutation();
   }
@@ -730,7 +1121,7 @@ function renderHeader2(bundle) {
     if (discountType === "percentage" && discountValue > 0) {
       label = `-${Math.round(discountValue)}%`;
     } else if (discountType === "fixed_amount" && discountValue > 0) {
-      label = `-${(0, import_core.formatCents)(
+      label = `-${(0, import_core2.formatCents)(
         Math.round(discountValue * 100),
         bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD"
       )}`;
@@ -817,14 +1208,14 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   const thumb = el("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
   if (selection.imageUrl) {
     const img = document.createElement("img");
-    img.src = (0, import_core3.transformImageUrl)(selection.imageUrl, {
-      width: import_core3.THUMB_PX,
-      height: import_core3.THUMB_PX,
+    img.src = (0, import_core4.transformImageUrl)(selection.imageUrl, {
+      width: import_core4.THUMB_PX,
+      height: import_core4.THUMB_PX,
       crop: "center"
     });
     img.alt = selection.productTitle;
-    img.width = import_core3.THUMB_PX;
-    img.height = import_core3.THUMB_PX;
+    img.width = import_core4.THUMB_PX;
+    img.height = import_core4.THUMB_PX;
     img.loading = "lazy";
     thumb.appendChild(img);
   } else {
@@ -848,11 +1239,11 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   const priceWrap = el("span", "lb-mix-match__filled-price");
   if (lineCompare !== null && lineCompare > linePrice) {
     const compare = el("span", "lb-mix-match__filled-compare");
-    compare.textContent = (0, import_core.formatCents)(lineCompare, currency);
+    compare.textContent = (0, import_core2.formatCents)(lineCompare, currency);
     priceWrap.appendChild(compare);
   }
   const priceEl = document.createElement("span");
-  priceEl.textContent = (0, import_core.formatCents)(linePrice, currency);
+  priceEl.textContent = (0, import_core2.formatCents)(linePrice, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
   if (selection.unitPriceLabel) {
@@ -897,14 +1288,14 @@ function renderPricingSection(showCompareAtPrice) {
       (s, sel) => s + sel.priceCents * sel.quantity,
       0
     );
-    const saleCents = (0, import_core.computeBundleSaleCents)(totalCents, bundle.discountConfig);
+    const saleCents = (0, import_core2.computeBundleSaleCents)(totalCents, bundle.discountConfig);
     if (showCompareAtPrice && totalCents > saleCents) {
-      compare.textContent = (0, import_core.formatCents)(totalCents, currency);
+      compare.textContent = (0, import_core2.formatCents)(totalCents, currency);
       compare.style.display = "";
     } else {
       compare.style.display = "none";
     }
-    sale.textContent = (0, import_core.formatCents)(saleCents, currency);
+    sale.textContent = (0, import_core2.formatCents)(saleCents, currency);
   }
   return { el: wrap, update };
 }
@@ -927,14 +1318,14 @@ function renderSavingsBar2() {
       (s, sel) => s + sel.priceCents * sel.quantity,
       0
     );
-    const saleCents = (0, import_core.computeBundleSaleCents)(totalCents, bundle.discountConfig);
+    const saleCents = (0, import_core2.computeBundleSaleCents)(totalCents, bundle.discountConfig);
     const savings = Math.max(0, totalCents - saleCents);
     if (savings <= 0) {
       wrap.style.display = "none";
       return;
     }
     wrap.style.display = "";
-    amount.textContent = (0, import_core.formatCents)(savings, currency);
+    amount.textContent = (0, import_core2.formatCents)(savings, currency);
   }
   return { el: wrap, update };
 }
@@ -1030,24 +1421,27 @@ function renderModal(bundle, eligible, currency, handlers) {
         { "data-product-id": ep.product.id.replace(/^.*\//, "") }
       );
       const thumb = el("div", "lb-mix-match__modal-product-thumb");
-      if (ep.product.featuredImage) {
-        const img = document.createElement("img");
-        img.src = (0, import_core3.transformImageUrl)(ep.product.featuredImage.url, {
-          width: import_core3.THUMB_PX,
-          height: import_core3.THUMB_PX,
+      const initialThumbVariant = ep.variants.find((v) => v.availableForSale) ?? ep.variants[0] ?? null;
+      const initialThumbImage = initialThumbVariant?.image ?? ep.product.featuredImage ?? null;
+      let thumbImg = null;
+      if (initialThumbImage) {
+        thumbImg = document.createElement("img");
+        thumbImg.src = (0, import_core4.transformImageUrl)(initialThumbImage.url, {
+          width: import_core4.THUMB_PX,
+          height: import_core4.THUMB_PX,
           crop: "center"
         });
-        img.alt = ep.product.featuredImage.altText ?? ep.product.title;
-        img.width = import_core3.THUMB_PX;
-        img.height = import_core3.THUMB_PX;
-        img.loading = "lazy";
-        thumb.appendChild(img);
+        thumbImg.alt = initialThumbImage.altText ?? ep.product.title;
+        thumbImg.width = import_core4.THUMB_PX;
+        thumbImg.height = import_core4.THUMB_PX;
+        thumbImg.loading = "lazy";
+        thumb.appendChild(thumbImg);
       } 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)
+        (0, import_core6.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
       );
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
@@ -1056,8 +1450,8 @@ function renderModal(bundle, eligible, currency, handlers) {
       title.textContent = ep.product.title;
       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_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id),
+      price.textContent = (0, import_core2.formatCents)(
+        (0, import_core2.parseCents)(currentVariant.price.amount) * (0, import_core6.resolveBundleQty)(bundle, ep.product.id, currentVariant.id),
         currency
       );
       info.appendChild(price);
@@ -1065,7 +1459,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         "p",
         "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price"
       );
-      const initialUnitText = (0, import_core.formatUnitPrice)(
+      const initialUnitText = (0, import_core2.formatUnitPrice)(
         currentVariant.unitPrice,
         currentVariant.unitPriceMeasurement,
         currency
@@ -1124,16 +1518,16 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
           currentVariant = next;
           row.variant = next;
-          const nextQty = (0, import_core5.resolveBundleQty)(
+          const nextQty = (0, import_core6.resolveBundleQty)(
             bundle,
             ep.product.id,
             currentVariant.id
           );
-          price.textContent = (0, import_core.formatCents)(
-            (0, import_core.parseCents)(currentVariant.price.amount) * nextQty,
+          price.textContent = (0, import_core2.formatCents)(
+            (0, import_core2.parseCents)(currentVariant.price.amount) * nextQty,
             currency
           );
-          const nextUnitText = (0, import_core.formatUnitPrice)(
+          const nextUnitText = (0, import_core2.formatUnitPrice)(
             currentVariant.unitPrice,
             currentVariant.unitPriceMeasurement,
             currency
@@ -1145,6 +1539,15 @@ function renderModal(bundle, eligible, currency, handlers) {
             unitPrice.textContent = "";
             unitPrice.hidden = true;
           }
+          const nextImage = currentVariant.image ?? ep.product.featuredImage;
+          if (thumbImg && nextImage) {
+            thumbImg.src = (0, import_core4.transformImageUrl)(nextImage.url, {
+              width: import_core4.THUMB_PX,
+              height: import_core4.THUMB_PX,
+              crop: "center"
+            });
+            thumbImg.alt = nextImage.altText ?? ep.product.title;
+          }
           recomputeDisabled(next.selectedOptions.map((o) => o.value));
           rowUpdateCount();
         };
@@ -1195,7 +1598,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       productEl.appendChild(info);
       const rowUpdateCount = () => {
         countBadge.textContent = String(
-          (0, import_core5.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
+          (0, import_core6.resolveBundleQty)(bundle, ep.product.id, currentVariant.id)
         );
       };
       if (!ep.isOos) {
@@ -1215,6 +1618,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       productRows.push(row);
       list.appendChild(productEl);
     });
+    bindAllDropdowns(list);
     refreshCounts();
   }
   function applySearch() {
@@ -1318,7 +1722,7 @@ function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
   const product = bundle.products[0];
   const variant = product?.variants.nodes.find((v) => v.availableForSale);
   if (!variant && wc.outOfStockBehavior === "hide") return;
-  const basePriceCents = variant ? (0, import_core.parseCents)(variant.price.amount) : 0;
+  const basePriceCents = variant ? (0, import_core2.parseCents)(variant.price.amount) : 0;
   const currency = variant?.price.currencyCode ?? "USD";
   const discountType = bundle.discountConfig.discountType;
   const resolved = bundle.volumeTiers.map((tier, index) => {
@@ -1497,13 +1901,13 @@ function renderTierCard(r, isSelected, currency, popularLabel, showComparePrice,
   const price = el("span", "lb-volume__tier-price");
   if (showComparePrice && r.pricePerUnitCents < r.basePricePerUnitCents) {
     const compare = el("span", "lb-volume__tier-compare");
-    compare.textContent = (0, import_core.formatCents)(r.basePricePerUnitCents, currency);
+    compare.textContent = (0, import_core2.formatCents)(r.basePricePerUnitCents, currency);
     price.appendChild(compare);
   }
   if (showPerUnitPrice) {
     const each = document.createElement("span");
     each.setAttribute("data-tier-price-each", "");
-    each.textContent = (0, import_core.formatCents)(r.pricePerUnitCents, currency);
+    each.textContent = (0, import_core2.formatCents)(r.pricePerUnitCents, currency);
     price.appendChild(each);
     const unit = el("span", "lb-volume__tier-unit");
     unit.textContent = " each";
@@ -1542,11 +1946,11 @@ function renderPricingRow2(resolved, selectedIndex, currency, showItemCount, sho
     const compare = el("span", "lb-bundle-compare-price", {
       "data-compare-price": ""
     });
-    compare.textContent = (0, import_core.formatCents)(undiscountedCents, currency);
+    compare.textContent = (0, import_core2.formatCents)(undiscountedCents, currency);
     prices.appendChild(compare);
   }
   const sale = el("span", "lb-bundle-sale-price", { "data-total-price": "" });
-  sale.textContent = (0, import_core.formatCents)(totalCents, currency);
+  sale.textContent = (0, import_core2.formatCents)(totalCents, currency);
   prices.appendChild(sale);
   row.appendChild(prices);
   return row;
@@ -1562,7 +1966,7 @@ function renderSavingsBar3(resolved, selectedIndex, currency) {
   labelEl.textContent = "You save";
   bar.appendChild(labelEl);
   const amount = el("span", "", { "data-savings-amount": "" });
-  amount.textContent = (0, import_core.formatCents)(savings, currency);
+  amount.textContent = (0, import_core2.formatCents)(savings, currency);
   bar.appendChild(amount);
   return bar;
 }
@@ -1583,7 +1987,7 @@ function badgeFor(resolved, currency, discountType) {
   const { tier } = resolved;
   if (discountType === "fixed_amount") {
     const amount = tier.amount ?? 0;
-    if (amount > 0) return `-${(0, import_core.formatCents)(Math.round(amount * 100), currency)}`;
+    if (amount > 0) return `-${(0, import_core2.formatCents)(Math.round(amount * 100), currency)}`;
     return null;
   }
   if (discountType === "percentage") {
@@ -1610,7 +2014,7 @@ function clamp(n, min, max) {
 }
 
 // src/lime-bundle.ts
-var import_core7 = require("@lime-bundles/core");
+var import_core8 = require("@lime-bundles/core");
 
 // src/utils/input-mode.ts
 var NAV_KEYS = /* @__PURE__ */ new Set([
@@ -1680,6 +2084,11 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   --lb-thumbnail-bg: #F0F0F0;
   --lb-widget-pad: 20px;
   --lb-progress-color: var(--lb-primary-color);
+  /* Cap on the per-bundle product/slot/tier list height \u2014 keeps long
+     bundles from pushing the CTA off-screen. The list scrolls
+     internally with the same custom 4px scrollbar as the variant
+     dropdown when content exceeds this. */
+  --lb-list-max-height: 360px;
 
   font-family: inherit;
   font-size: 16px;
@@ -1992,10 +2401,10 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
    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 {
+.using-mouse .lb-bundle-widget :focus:not([aria-checked="true"]),
+.using-mouse .lb-bundle-widget :focus-visible:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus-visible:not([aria-checked="true"]) {
   outline: none;
   outline-offset: 0;
   box-shadow: none;
@@ -2234,6 +2643,22 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   flex-direction: column;
   gap: 0;
   margin: 0;
+  max-height: var(--lb-list-max-height);
+  overflow-y: auto;
+  /* Custom scrollbar \u2014 text colour at 15% opacity (thumb) and 5% (track). */
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--lb-text) 15%, transparent)
+    color-mix(in srgb, var(--lb-text) 2%, transparent);
+}
+
+.lb-fixed__products::-webkit-scrollbar { width: 4px; }
+.lb-fixed__products::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--lb-text) 2%, transparent);
+  border-radius: 2px;
+}
+.lb-fixed__products::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--lb-text) 15%, transparent);
+  border-radius: 2px;
 }
 
 /* Fixed bundles: product rows */
@@ -2289,6 +2714,28 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 `;
 var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
+/* === Slot list ============================================================
+   Caps the height of the slot stack so long bundles don't push the CTA off
+   the page. Internal scroll with the same custom 4px scrollbar as the
+   variant dropdown panel. */
+.lb-mix-match__slots {
+  max-height: var(--lb-list-max-height);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--lb-text) 15%, transparent)
+    color-mix(in srgb, var(--lb-text) 2%, transparent);
+}
+
+.lb-mix-match__slots::-webkit-scrollbar { width: 4px; }
+.lb-mix-match__slots::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--lb-text) 2%, transparent);
+  border-radius: 2px;
+}
+.lb-mix-match__slots::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--lb-text) 15%, transparent);
+  border-radius: 2px;
+}
+
 /* === Progress Bar === */
 .lb-mix-match__progress {
   margin-bottom: 16px;
@@ -2805,6 +3252,22 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
   display: flex;
   flex-direction: column;
   gap: 12px;
+  max-height: var(--lb-list-max-height);
+  overflow-y: auto;
+  /* Custom scrollbar \u2014 text colour at 15% opacity (thumb) and 5% (track). */
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--lb-text) 15%, transparent)
+    color-mix(in srgb, var(--lb-text) 2%, transparent);
+}
+
+.lb-volume__tiers::-webkit-scrollbar { width: 4px; }
+.lb-volume__tiers::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--lb-text) 2%, transparent);
+  border-radius: 2px;
+}
+.lb-volume__tiers::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--lb-text) 15%, transparent);
+  border-radius: 2px;
 }
 
 .lb-volume__tier {
@@ -2820,10 +3283,21 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 }
 
 .lb-volume__tier:hover {
-  border-color: color-mix(in srgb, var(--lb-tier-border-color) 50%, black);
+  border-color: var(--lb-tier-selected-border-color);
 }
 
-.lb-volume__tier:focus-visible {
+/* Suppress the UA default focus outline so a freshly-clicked selected
+   tier doesn't briefly show the 1px focus ring on top of (or in place of)
+   the custom selected-state outline below. Keyboard focus is still
+   indicated by the :focus-visible rule. */
+.lb-volume__tier:focus {
+  outline: none;
+}
+
+/* Keyboard focus indicator \u2014 explicitly excludes the selected tier so
+   the selected-state outline rule below has full ownership of the
+   outline property when both states apply at once. */
+.lb-volume__tier:focus-visible:not([aria-checked="true"]) {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
 }
@@ -2909,6 +3383,259 @@ var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles
 }
 
 
+`;
+var BUNDLE_DROPDOWN_CSS = `/**
+ * Lime Bundles \u2014 Custom variant-picker dropdown styling.
+ *
+ * Reuses existing CSS variables: no new merchant-configurable surface.
+ *   --lb-variant-border-{width,color}, --lb-variant-radius, --lb-variant-chevron
+ *   --lb-bg, --lb-text, --lb-primary-color
+ *
+ * Mix-match modal context overrides via .lb-mix-match__modal scope to use
+ * --lb-picker-variant-* and --lb-picker-bg.
+ */
+
+/* Hide the native <select> while keeping it form-serializable and focusable
+   programmatically. The .lb-dropdown-state marker is added by JS at bind
+   time, so this rule matches every variant-select class (main widget,
+   mix-match modal, future bundle types). aria-hidden + tabindex=-1
+   (also set in JS) remove it from the accessibility tree. */
+.lb-dropdown-state {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Shell fills its parent column. */
+.lb-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  font-family: inherit;
+}
+
+/* Trigger styled identically to the closed-state native select */
+.lb-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
+  border-radius: var(--lb-variant-radius);
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text);
+  background: var(--lb-bg);
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: start;
+  transition: border-color 120ms ease;
+}
+
+.lb-dropdown-trigger:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+.lb-dropdown-trigger[aria-expanded="true"] {
+  border-color: var(--lb-text);
+}
+
+.lb-dropdown-trigger-value {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: start;
+}
+
+.lb-dropdown-chevron {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 12px;
+  background: var(--lb-variant-chevron) center / contain no-repeat;
+  transition: transform 120ms ease;
+}
+
+.lb-dropdown-trigger[aria-expanded="true"] .lb-dropdown-chevron {
+  transform: rotate(180deg);
+}
+
+/* Popover panel \u2014 position: absolute against the .lb-dropdown shell
+   (already position: relative). Top/left/width come from CSS so we
+   never depend on JS having set inline coords by the time the panel
+   becomes visible. JS only sets max-height. */
+.lb-dropdown-listbox {
+  position: absolute;
+  left: 0;
+  /* Default to below-trigger placement so the panel doesn't overlap the
+     trigger if data-placement is missing for any reason. The explicit
+     [data-placement="down"|"up"] rules below override this. */
+  top: calc(100% + 4px);
+  width: 100%;
+  z-index: 9999;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: var(--lb-bg);
+  color: var(--lb-text);
+  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
+  border-radius: var(--lb-variant-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Custom scrollbar \u2014 text colour at 15% opacity (thumb) and 5% (track). */
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--lb-text) 15%, transparent)
+    color-mix(in srgb, var(--lb-text) 2%, transparent);
+  animation: lb-dropdown-in-down 120ms ease-out;
+  transform-origin: top center;
+}
+
+.lb-dropdown-listbox[data-placement="down"] {
+  top: calc(100% + 4px);
+}
+
+.lb-dropdown-listbox[data-placement="up"] {
+  top: auto;
+  bottom: calc(100% + 4px);
+  animation-name: lb-dropdown-in-up;
+  transform-origin: bottom center;
+}
+
+/* When portaled out of the .lb-dropdown shell (mix-match modal context:
+   .lb-mix-match__modal applies translateY which would otherwise trap
+   position:fixed), switch to fixed and let JS set viewport coords. */
+.lb-dropdown-listbox[data-lb-dropdown-portal] {
+  position: fixed;
+  top: auto;
+  left: auto;
+  bottom: auto;
+  width: auto;
+}
+
+/* Custom scrollbar \u2014 Webkit/Blink: exact 4px width */
+.lb-dropdown-listbox::-webkit-scrollbar {
+  width: 4px;
+}
+.lb-dropdown-listbox::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--lb-text) 2%, transparent);
+  border-radius: 2px;
+}
+.lb-dropdown-listbox::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--lb-text) 15%, transparent);
+  border-radius: 2px;
+}
+
+/* Options */
+.lb-dropdown-option {
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--lb-text);
+}
+
+.lb-dropdown-option[aria-selected="true"] {
+  font-weight: 600;
+}
+
+.lb-dropdown-option.is-active,
+.lb-dropdown-option:hover:not([aria-disabled="true"]) {
+  background: color-mix(in srgb, var(--lb-text) 2%, transparent);
+}
+
+.lb-dropdown-option[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Animations */
+@keyframes lb-dropdown-in-down {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)    scale(1);    }
+}
+
+@keyframes lb-dropdown-in-up {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)   scale(1);    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lb-dropdown-listbox { animation: none; }
+  .lb-dropdown-chevron { transition: none; }
+  .lb-dropdown-trigger { transition: none; }
+}
+
+/* Forced-colors mode (Windows high-contrast) */
+@media (forced-colors: active) {
+  .lb-dropdown-trigger {
+    border-color: ButtonBorder;
+    color: ButtonText;
+    background: ButtonFace;
+  }
+  .lb-dropdown-listbox {
+    border-color: ButtonBorder;
+    background: Canvas;
+    color: CanvasText;
+  }
+  .lb-dropdown-option.is-active {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* Mix-match modal context \u2014 use picker-scoped variables.
+   No CSS fallbacks: --lb-picker-* are always emitted by bundle-widget.liquid
+   because WidgetConfig.parse() fully hydrates the merchant config.
+   See docs/solutions/ui-bugs/widget-css-single-source-defaults.md. */
+.lb-mix-match__modal .lb-dropdown-trigger {
+  border-color: var(--lb-picker-variant-border-color);
+  border-width: var(--lb-picker-variant-border-width);
+  border-radius: var(--lb-picker-variant-radius);
+  background: var(--lb-picker-bg);
+  color: var(--lb-picker-text);
+}
+
+.lb-mix-match__modal .lb-dropdown-chevron {
+  background-image: var(--lb-picker-variant-chevron);
+}
+
+/* Listbox is portaled out of the transformed .lb-mix-match__modal up to
+   its [data-modal-overlay] parent, so picker-scoped rules anchor on the
+   overlay attribute, not the modal class. */
+[data-modal-overlay] > .lb-dropdown-listbox {
+  border-color: var(--lb-picker-variant-border-color);
+  border-width: var(--lb-picker-variant-border-width);
+  border-radius: var(--lb-picker-variant-radius);
+  background: var(--lb-picker-bg);
+  color: var(--lb-picker-text);
+  scrollbar-color: color-mix(in srgb, var(--lb-picker-text) 15%, transparent)
+    color-mix(in srgb, var(--lb-picker-text) 2%, transparent);
+}
+
+[data-modal-overlay] > .lb-dropdown-listbox::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--lb-picker-text) 2%, transparent);
+  border-radius: 2px;
+}
+[data-modal-overlay] > .lb-dropdown-listbox::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--lb-picker-text) 15%, transparent);
+}
 `;
 var BUNDLE_SKELETON_CSS = `/* Lime Bundles \u2014 web-component loading skeleton (not mirrored to theme assets) */
 
@@ -3107,7 +3834,7 @@ var LimeBundleElement = class extends HTMLElement {
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
-    const client = (0, import_core6.createStorefrontClient)({
+    const client = (0, import_core7.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -3132,7 +3859,7 @@ var LimeBundleElement = class extends HTMLElement {
           handle
         );
       }
-      const cssPromise = client.query(import_core6.SHOP_CUSTOM_CSS_QUERY, void 0, {
+      const cssPromise = client.query(import_core7.SHOP_CUSTOM_CSS_QUERY, void 0, {
         signal: controller.signal
       }).catch(() => null);
       await bundlePromise;
@@ -3144,8 +3871,8 @@ var LimeBundleElement = class extends HTMLElement {
       }
       const css = await cssPromise;
       if (css?.shop?.metafield?.value) {
-        (0, import_core6.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
-        const sanitized = (0, import_core6.sanitizeCustomCss)(css.shop.metafield.value);
+        (0, import_core7.injectCustomCss)(this.shopDomain, css.shop.metafield.value);
+        const sanitized = (0, import_core7.sanitizeCustomCss)(css.shop.metafield.value);
         if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
       await this.applyABVariants();
@@ -3173,14 +3900,14 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles.map(async (bundle) => {
         if (!bundle.abTestId || !bundle.abVariantB) return bundle;
         try {
-          const assignment = await (0, import_core6.getABTestAssignment)(
+          const assignment = await (0, import_core7.getABTestAssignment)(
             this.appUrl,
             this.shopDomain,
             bundle.abTestId,
             bundle.id
           );
           if (assignment?.variant === "B") {
-            return (0, import_core6.applyABVariantB)(bundle);
+            return (0, import_core7.applyABVariantB)(bundle);
           }
         } catch (err) {
           console.warn(
@@ -3195,7 +3922,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
-      import_core6.BUNDLE_METAOBJECT_QUERY,
+      import_core7.BUNDLE_METAOBJECT_QUERY,
       { id: this.bundleGid },
       { signal }
     );
@@ -3203,7 +3930,7 @@ var LimeBundleElement = class extends HTMLElement {
       this.bundles = [];
       return;
     }
-    const parsed = (0, import_core6.parseMetaobjectBundle)(
+    const parsed = (0, import_core7.parseMetaobjectBundle)(
       data.metaobject.id,
       data.metaobject.fields
     );
@@ -3211,7 +3938,7 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchProductBundles(client, signal, productHandle) {
     const data = await client.query(
-      import_core6.BUNDLES_FOR_PRODUCT_QUERY,
+      import_core7.BUNDLES_FOR_PRODUCT_QUERY,
       { handle: productHandle },
       { signal }
     );
@@ -3222,7 +3949,7 @@ var LimeBundleElement = class extends HTMLElement {
     const refs = data.product.metafield?.references?.nodes ?? [];
     const bundles = [];
     for (const ref of refs) {
-      const parsed = (0, import_core6.parseMetaobjectBundle)(ref.id, ref.fields);
+      const parsed = (0, import_core7.parseMetaobjectBundle)(ref.id, ref.fields);
       if (parsed) bundles.push(parsed);
     }
     this.bundles = bundles;
@@ -3255,7 +3982,7 @@ var LimeBundleElement = class extends HTMLElement {
    */
   async defaultAddToCart(lines) {
     if (typeof window === "undefined") return;
-    const client = (0, import_core6.createStorefrontClient)({
+    const client = (0, import_core7.createStorefrontClient)({
       shopDomain: this.shopDomain,
       accessToken: this.storefrontToken
     });
@@ -3266,7 +3993,7 @@ var LimeBundleElement = class extends HTMLElement {
       let checkoutUrl = null;
       if (existingCartId) {
         const res = await client.query(
-          import_core6.CART_LINES_ADD_MUTATION,
+          import_core7.CART_LINES_ADD_MUTATION,
           { cartId: existingCartId, lines }
         );
         const payload = res.cartLinesAdd;
@@ -3278,7 +4005,7 @@ var LimeBundleElement = class extends HTMLElement {
       }
       if (!checkoutUrl) {
         const res = await client.query(
-          import_core6.CART_CREATE_MUTATION,
+          import_core7.CART_CREATE_MUTATION,
           { input: { lines } }
         );
         const payload = res.cartCreate;
@@ -3324,7 +4051,7 @@ var LimeBundleElement = class extends HTMLElement {
       const price = variant ? parseFloat(variant.price.amount) : 0;
       return sum + price * line.quantity;
     }, 0);
-    (0, import_core6.reportAddToCart)(
+    (0, import_core7.reportAddToCart)(
       { shopDomain: this.shopDomain, appUrl: this.appUrl },
       {
         bundleGid: bundle.id,
@@ -3344,7 +4071,8 @@ var LimeBundleElement = class extends HTMLElement {
       BUNDLE_BASE_CSS,
       BUNDLE_FIXED_CSS,
       BUNDLE_MIX_MATCH_CSS,
-      BUNDLE_VOLUME_CSS
+      BUNDLE_VOLUME_CSS,
+      BUNDLE_DROPDOWN_CSS
     ].join("\n");
     this.shadow.appendChild(style);
     if (this.shopCustomCss) {
@@ -3360,7 +4088,7 @@ 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_core7.applyWidgetConfigVars)(container, bundle.widgetConfig);
+      (0, import_core8.applyWidgetConfigVars)(container, bundle.widgetConfig);
       this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
@@ -3396,8 +4124,8 @@ var LimeBundleElement = class extends HTMLElement {
   }
   setupImpressionFor(bundle, element) {
     if (!this.analyticsEnabled || !this.appUrl) return;
-    const cleanup = (0, import_core6.observeImpression)(element, () => {
-      (0, import_core6.reportImpression)(
+    const cleanup = (0, import_core7.observeImpression)(element, () => {
+      (0, import_core7.reportImpression)(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
           bundleGid: bundle.id,