@lime-bundles/widget 2.4.0 → 2.5.0

package/dist/index.js

@@ -21,6 +21,383 @@ import {
   resolveBundleQty
 } from "@lime-bundles/core";
 
+// src/dropdown/bind-dropdown.ts
+import { dropdown } from "@lime-bundles/core";
+var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = 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/pricing.ts
 import {
   parseCents,
@@ -192,6 +569,8 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
     })
   );
   container.appendChild(root);
+  bindAllDropdowns(root);
+  onCleanup?.(() => unbindAllDropdowns(root));
   updatePricing();
   function updatePricing() {
     const totalCents = rows.reduce((sum, r) => {
@@ -212,12 +591,11 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
 }
 function buildRowState(bundle, product, productIndex) {
   const selectedVariantIds = bundle.selectedVariantIds?.[productIndex] ?? null;
-  const available = product.variants.nodes.filter(
-    (v) => v.availableForSale
-  );
-  const eligibleVariants = selectedVariantIds && selectedVariantIds.length > 0 ? available.filter((v) => selectedVariantIds.includes(v.id)) : available;
-  const isOos = eligibleVariants.length === 0;
-  const selected = eligibleVariants[0] ?? null;
+  const merchantScoped = selectedVariantIds && selectedVariantIds.length > 0 ? product.variants.nodes.filter((v) => selectedVariantIds.includes(v.id)) : product.variants.nodes;
+  const firstInStock = merchantScoped.find((v) => v.availableForSale) ?? null;
+  const eligibleVariants = merchantScoped;
+  const isOos = !firstInStock;
+  const selected = firstInStock ?? merchantScoped[0] ?? null;
   const qty = selected ? resolveBundleQty(bundle, product.id, selected.id) : 1;
   return { product, eligibleVariants, selected, qty, isOos };
 }
@@ -288,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 = transformImageUrl(state.product.featuredImage.url, {
+  const initialThumbImage = state.selected?.image ?? state.product.featuredImage ?? null;
+  let thumbImg = null;
+  if (initialThumbImage) {
+    thumbImg = document.createElement("img");
+    thumbImg.src = transformImageUrl(initialThumbImage.url, {
       width: THUMB_PX,
       height: THUMB_PX,
       crop: "center"
     });
-    img.alt = state.product.featuredImage.altText ?? state.product.title;
-    img.width = THUMB_PX;
-    img.height = THUMB_PX;
-    img.loading = "lazy";
-    thumb.appendChild(img);
+    thumbImg.alt = initialThumbImage.altText ?? state.product.title;
+    thumbImg.width = THUMB_PX;
+    thumbImg.height = THUMB_PX;
+    thumbImg.loading = "lazy";
+    thumb.appendChild(thumbImg);
   } else {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG);
   }
@@ -363,36 +743,97 @@ function renderProductRow(state, currency, qtyFor, onVariantChange) {
       } else {
         unitPriceEl.setAttribute("hidden", "");
       }
+      const nextImage = variant.image ?? state.product.featuredImage;
+      if (thumbImg && nextImage) {
+        thumbImg.src = transformImageUrl(nextImage.url, {
+          width: THUMB_PX,
+          height: THUMB_PX,
+          crop: "center"
+        });
+        thumbImg.alt = nextImage.altText ?? state.product.title;
+      }
     };
     applyVariantToRow(state.selected);
     if (state.eligibleVariants.length > 1) {
-      const select = document.createElement("select");
-      select.className = "lb-bundle-variant-select";
-      select.setAttribute("data-variant-select", "");
-      select.name = `lb-variant-${state.product.id.replace(/^.*\//, "")}`;
-      select.setAttribute(
-        "aria-label",
-        `Select variant for ${state.product.title}`
+      const optionNames = state.eligibleVariants[0].selectedOptions.map(
+        (o) => o.name
       );
-      state.eligibleVariants.forEach((variant) => {
-        const opt = document.createElement("option");
-        opt.value = variant.id;
-        opt.textContent = variant.title;
-        if (variant.id === state.selected?.id) opt.selected = true;
-        select.appendChild(opt);
-      });
-      select.addEventListener("change", () => {
-        const variant = state.eligibleVariants.find(
-          (v) => v.id === select.value
+      const productIdTail = state.product.id.replace(/^.*\//, "");
+      const optionSelects = [];
+      const resolveVariant = (values) => state.eligibleVariants.find(
+        (v) => v.selectedOptions.every((o, i) => o.value === values[i]) && v.selectedOptions.length === values.length
+      ) ?? null;
+      const syncSelectsToVariant = (variant) => {
+        variant.selectedOptions.forEach((o, i) => {
+          const sel = optionSelects[i];
+          if (sel && sel.value !== o.value) sel.value = o.value;
+        });
+      };
+      const isValueAvailable = (optionIndex, value, selected) => state.eligibleVariants.some((v) => {
+        if (!v.availableForSale) return false;
+        if (v.selectedOptions[optionIndex]?.value !== value) return false;
+        return v.selectedOptions.every(
+          (o, i) => i === optionIndex || o.value === selected[i]
         );
-        if (!variant) return;
+      });
+      const recomputeDisabled = (selected) => {
+        optionSelects.forEach((sel, i) => {
+          Array.from(sel.options).forEach((opt) => {
+            opt.disabled = !isValueAvailable(i, opt.value, selected);
+          });
+        });
+      };
+      const handleChange = () => {
+        const values = optionSelects.map((s) => s.value);
+        const variant = resolveVariant(values);
+        if (!variant) {
+          if (state.selected) {
+            syncSelectsToVariant(state.selected);
+            recomputeDisabled(state.selected.selectedOptions.map((o) => o.value));
+          }
+          return;
+        }
         state.selected = variant;
         state.qty = qtyFor(state.product.id, variant.id);
         if (qtyBadgeRef) qtyBadgeRef.textContent = String(state.qty);
         applyVariantToRow(variant);
+        recomputeDisabled(variant.selectedOptions.map((o) => o.value));
         onVariantChange();
+      };
+      const groupsContainer = el("div", "lb-bundle-variant-option-groups");
+      optionNames.forEach((name2, position) => {
+        const group = el("div", "lb-bundle-variant-option-group");
+        const label = el("span", "lb-bundle-variant-option-label");
+        label.textContent = name2;
+        group.appendChild(label);
+        const select = document.createElement("select");
+        select.className = "lb-bundle-variant-select";
+        select.setAttribute("data-variant-option", "");
+        select.setAttribute("data-option-position", String(position + 1));
+        select.name = `lb-variant-${productIdTail}-${position + 1}`;
+        select.setAttribute("aria-label", name2);
+        const seen = /* @__PURE__ */ new Set();
+        state.eligibleVariants.forEach((v) => {
+          const value = v.selectedOptions[position]?.value;
+          if (!value || seen.has(value)) return;
+          seen.add(value);
+          const opt = document.createElement("option");
+          opt.value = value;
+          opt.textContent = value;
+          if (state.selected?.selectedOptions[position]?.value === value) {
+            opt.selected = true;
+          }
+          select.appendChild(opt);
+        });
+        select.addEventListener("change", handleChange);
+        optionSelects.push(select);
+        group.appendChild(select);
+        groupsContainer.appendChild(group);
       });
-      info.appendChild(select);
+      info.appendChild(groupsContainer);
+      if (state.selected) {
+        recomputeDisabled(state.selected.selectedOptions.map((o) => o.value));
+      }
     } else if (state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1) {
       const badge = el("span", "lb-bundle-variant-badge");
       badge.textContent = state.eligibleVariants[0].title;
@@ -481,6 +922,7 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
+import { resolveBundleQty as resolveBundleQty2 } from "@lime-bundles/core";
 var PLACEHOLDER_THUMB_SVG2 = `
 <svg class="lb-bundle-placeholder-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
   <rect x="4" y="4" width="20" height="20" rx="3"></rect>
@@ -548,9 +990,6 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     showSearch: wc.showSearch,
     onAdd: (product, variant) => addSelection(product, variant),
     onRemove: (productId, variantId) => removeSelection(productId, variantId),
-    countFor: (productId, variantId) => selections.filter(
-      (s) => s.productId === productId && s.variantId === variantId
-    ).length,
     isOverMax: () => selections.length >= maxQty
   });
   root.appendChild(modal.el);
@@ -560,7 +999,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 }
@@ -579,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) {
@@ -587,14 +1027,15 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       productTitle: firstEligible.product.title,
       variantId: firstVariant.id,
       variantTitle: firstVariant.title,
-      imageUrl: firstEligible.product.featuredImage?.url ?? null,
+      imageUrl: firstVariant.image?.url ?? firstEligible.product.featuredImage?.url ?? null,
       priceCents: parseCents(firstVariant.price.amount),
       compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null,
       unitPriceLabel: formatUnitPrice(
         firstVariant.unitPrice,
         firstVariant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: resolveBundleQty2(bundle, firstEligible.product.id, firstVariant.id)
     });
   }
   afterMutation();
@@ -605,14 +1046,15 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
       productTitle: product.title,
       variantId: variant.id,
       variantTitle: variant.title,
-      imageUrl: product.featuredImage?.url ?? null,
+      imageUrl: variant.image?.url ?? product.featuredImage?.url ?? null,
       priceCents: parseCents(variant.price.amount),
       compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null,
       unitPriceLabel: formatUnitPrice(
         variant.unitPrice,
         variant.unitPriceMeasurement,
         currency
-      )
+      ),
+      quantity: resolveBundleQty2(bundle, product.id, variant.id)
     });
     afterMutation();
   }
@@ -779,6 +1221,9 @@ function renderFilledSlot(selection, index, currency, onRemove) {
   } else {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
   }
+  const qtyBadge = el("span", "lb-bundle-qty-badge");
+  qtyBadge.textContent = String(selection.quantity);
+  thumb.appendChild(qtyBadge);
   slot.appendChild(thumb);
   const info = el("div", "lb-mix-match__filled-info");
   const title = el("span", "lb-mix-match__filled-title");
@@ -789,14 +1234,16 @@ function renderFilledSlot(selection, index, currency, onRemove) {
     variant.textContent = selection.variantTitle;
     info.appendChild(variant);
   }
+  const linePrice = selection.priceCents * selection.quantity;
+  const lineCompare = selection.compareCents !== null ? selection.compareCents * selection.quantity : null;
   const priceWrap = el("span", "lb-mix-match__filled-price");
-  if (selection.compareCents && selection.compareCents > selection.priceCents) {
+  if (lineCompare !== null && lineCompare > linePrice) {
     const compare = el("span", "lb-mix-match__filled-compare");
-    compare.textContent = formatCents(selection.compareCents, currency);
+    compare.textContent = formatCents(lineCompare, currency);
     priceWrap.appendChild(compare);
   }
   const priceEl = document.createElement("span");
-  priceEl.textContent = formatCents(selection.priceCents, currency);
+  priceEl.textContent = formatCents(linePrice, currency);
   priceWrap.appendChild(priceEl);
   info.appendChild(priceWrap);
   if (selection.unitPriceLabel) {
@@ -837,7 +1284,10 @@ function renderPricingSection(showCompareAtPrice) {
       return;
     }
     wrap.style.display = "";
-    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const totalCents = selections.reduce(
+      (s, sel) => s + sel.priceCents * sel.quantity,
+      0
+    );
     const saleCents = computeBundleSaleCents(totalCents, bundle.discountConfig);
     if (showCompareAtPrice && totalCents > saleCents) {
       compare.textContent = formatCents(totalCents, currency);
@@ -864,7 +1314,10 @@ function renderSavingsBar2() {
       wrap.style.display = "none";
       return;
     }
-    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const totalCents = selections.reduce(
+      (s, sel) => s + sel.priceCents * sel.quantity,
+      0
+    );
     const saleCents = computeBundleSaleCents(totalCents, bundle.discountConfig);
     const savings = Math.max(0, totalCents - saleCents);
     if (savings <= 0) {
@@ -958,8 +1411,8 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
-      const availableVariants = ep.variants.filter((v) => v.availableForSale);
-      const firstAvailVariant = availableVariants[0] ?? ep.firstAvailableVariant ?? ep.variants[0];
+      const availableVariants = ep.variants;
+      const firstAvailVariant = ep.variants.find((v) => v.availableForSale) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -968,23 +1421,28 @@ 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 = transformImageUrl(ep.product.featuredImage.url, {
+      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 = transformImageUrl(initialThumbImage.url, {
           width: THUMB_PX,
           height: THUMB_PX,
           crop: "center"
         });
-        img.alt = ep.product.featuredImage.altText ?? ep.product.title;
-        img.width = THUMB_PX;
-        img.height = THUMB_PX;
-        img.loading = "lazy";
-        thumb.appendChild(img);
+        thumbImg.alt = initialThumbImage.altText ?? ep.product.title;
+        thumbImg.width = THUMB_PX;
+        thumbImg.height = THUMB_PX;
+        thumbImg.loading = "lazy";
+        thumb.appendChild(thumbImg);
       } else {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
       const countBadge = el("span", "lb-bundle-qty-badge");
-      countBadge.style.display = "none";
+      countBadge.textContent = String(
+        resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+      );
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
@@ -993,7 +1451,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       info.appendChild(title);
       const price = el("p", "lb-mix-match__modal-product-price");
       price.textContent = formatCents(
-        parseCents(currentVariant.price.amount),
+        parseCents(currentVariant.price.amount) * resolveBundleQty2(bundle, ep.product.id, currentVariant.id),
         currency
       );
       info.appendChild(price);
@@ -1020,28 +1478,53 @@ function renderModal(bundle, eligible, currency, handlers) {
         }
       };
       if (availableVariants.length > 1) {
-        const select = document.createElement("select");
-        select.className = "lb-mix-match__variant-select";
-        select.setAttribute("data-variant-select", "");
-        select.name = `lb-variant-${ep.product.id.replace(/^.*\//, "")}`;
-        select.setAttribute(
-          "aria-label",
-          `Select variant for ${ep.product.title}`
+        const optionNames = availableVariants[0].selectedOptions.map(
+          (o) => o.name
         );
-        availableVariants.forEach((v) => {
-          const opt = document.createElement("option");
-          opt.value = v.id;
-          opt.textContent = v.title;
-          if (v.id === firstAvailVariant.id) opt.selected = true;
-          select.appendChild(opt);
+        const productIdTail = ep.product.id.replace(/^.*\//, "");
+        const optionSelects = [];
+        const resolveVariant = (values) => availableVariants.find(
+          (v) => v.selectedOptions.length === values.length && v.selectedOptions.every((o, i) => o.value === values[i])
+        ) ?? null;
+        const syncSelectsToVariant = (v) => {
+          v.selectedOptions.forEach((o, i) => {
+            const sel = optionSelects[i];
+            if (sel && sel.value !== o.value) sel.value = o.value;
+          });
+        };
+        const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
+          if (!v.availableForSale) return false;
+          if (v.selectedOptions[optionIndex]?.value !== value) return false;
+          return v.selectedOptions.every(
+            (o, i) => i === optionIndex || o.value === selected[i]
+          );
         });
-        select.addEventListener("change", () => {
-          const next = availableVariants.find((v) => v.id === select.value);
-          if (!next) return;
+        const recomputeDisabled = (selected) => {
+          optionSelects.forEach((sel, i) => {
+            Array.from(sel.options).forEach((opt) => {
+              opt.disabled = !isValueAvailable(i, opt.value, selected);
+            });
+          });
+        };
+        const handleChange = () => {
+          const values = optionSelects.map((s) => s.value);
+          const next = resolveVariant(values);
+          if (!next) {
+            syncSelectsToVariant(currentVariant);
+            recomputeDisabled(
+              currentVariant.selectedOptions.map((o) => o.value)
+            );
+            return;
+          }
           currentVariant = next;
           row.variant = next;
+          const nextQty = resolveBundleQty2(
+            bundle,
+            ep.product.id,
+            currentVariant.id
+          );
           price.textContent = formatCents(
-            parseCents(currentVariant.price.amount),
+            parseCents(currentVariant.price.amount) * nextQty,
             currency
           );
           const nextUnitText = formatUnitPrice(
@@ -1056,9 +1539,52 @@ function renderModal(bundle, eligible, currency, handlers) {
             unitPrice.textContent = "";
             unitPrice.hidden = true;
           }
+          const nextImage = currentVariant.image ?? ep.product.featuredImage;
+          if (thumbImg && nextImage) {
+            thumbImg.src = transformImageUrl(nextImage.url, {
+              width: THUMB_PX,
+              height: THUMB_PX,
+              crop: "center"
+            });
+            thumbImg.alt = nextImage.altText ?? ep.product.title;
+          }
+          recomputeDisabled(next.selectedOptions.map((o) => o.value));
           rowUpdateCount();
+        };
+        const groupsContainer = el("div", "lb-bundle-variant-option-groups");
+        optionNames.forEach((name, position) => {
+          const group = el("div", "lb-bundle-variant-option-group");
+          const label = el("span", "lb-bundle-variant-option-label");
+          label.textContent = name;
+          group.appendChild(label);
+          const select = document.createElement("select");
+          select.className = "lb-mix-match__variant-select";
+          select.setAttribute("data-variant-option", "");
+          select.setAttribute("data-option-position", String(position + 1));
+          select.name = `lb-variant-${productIdTail}-${position + 1}`;
+          select.setAttribute("aria-label", name);
+          const seen = /* @__PURE__ */ new Set();
+          availableVariants.forEach((v) => {
+            const value = v.selectedOptions[position]?.value;
+            if (!value || seen.has(value)) return;
+            seen.add(value);
+            const opt = document.createElement("option");
+            opt.value = value;
+            opt.textContent = value;
+            if (firstAvailVariant.selectedOptions[position]?.value === value) {
+              opt.selected = true;
+            }
+            select.appendChild(opt);
+          });
+          select.addEventListener("change", handleChange);
+          optionSelects.push(select);
+          group.appendChild(select);
+          groupsContainer.appendChild(group);
         });
-        info.appendChild(select);
+        info.appendChild(groupsContainer);
+        recomputeDisabled(
+          firstAvailVariant.selectedOptions.map((o) => o.value)
+        );
       } else if (availableVariants.length === 1 && firstAvailVariant.title !== "Default Title") {
         const variantLabel = el("span", "lb-mix-match__filled-variant");
         variantLabel.textContent = firstAvailVariant.title;
@@ -1071,13 +1597,9 @@ function renderModal(bundle, eligible, currency, handlers) {
       }
       productEl.appendChild(info);
       const rowUpdateCount = () => {
-        const count = handlers.countFor(ep.product.id, currentVariant.id);
-        if (count > 0) {
-          countBadge.textContent = String(count);
-          countBadge.style.display = "";
-        } else {
-          countBadge.style.display = "none";
-        }
+        countBadge.textContent = String(
+          resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+        );
       };
       if (!ep.isOos) {
         const addBtn = document.createElement("button");
@@ -1087,6 +1609,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         addBtn.addEventListener("click", () => {
           if (handlers.isOverMax()) return;
           handlers.onAdd(ep.product, currentVariant);
+          close();
         });
         productEl.appendChild(addBtn);
       }
@@ -1095,6 +1618,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       productRows.push(row);
       list.appendChild(productEl);
     });
+    bindAllDropdowns(list);
     refreshCounts();
   }
   function applySearch() {
@@ -1492,6 +2016,61 @@ function clamp(n, min, max) {
 // src/lime-bundle.ts
 import { applyWidgetConfigVars } from "@lime-bundles/core";
 
+// src/utils/input-mode.ts
+var NAV_KEYS = /* @__PURE__ */ new Set([
+  "Tab",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Enter",
+  " ",
+  "Escape"
+]);
+var targets = /* @__PURE__ */ new Set();
+var listenersAttached = false;
+function setAll(on) {
+  const off = on === "using-mouse" ? "using-keyboard" : "using-mouse";
+  for (const el2 of targets) {
+    el2.classList.add(on);
+    el2.classList.remove(off);
+  }
+}
+function onKeyDown(e) {
+  if (NAV_KEYS.has(e.key)) setAll("using-keyboard");
+}
+function onPointerDown() {
+  setAll("using-mouse");
+}
+function attachListeners() {
+  if (listenersAttached) return;
+  listenersAttached = true;
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("pointerdown", onPointerDown, true);
+}
+function detachListeners() {
+  if (!listenersAttached) return;
+  listenersAttached = false;
+  document.removeEventListener("keydown", onKeyDown, true);
+  document.removeEventListener("pointerdown", onPointerDown, true);
+}
+function trackInputMode(target) {
+  target.classList.add("using-mouse");
+  target.classList.remove("using-keyboard");
+  targets.add(target);
+  attachListeners();
+  return () => {
+    targets.delete(target);
+    target.classList.remove("using-mouse");
+    target.classList.remove("using-keyboard");
+    if (targets.size === 0) detachListeners();
+  };
+}
+
 // src/styles/bundle-css.ts
 var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle widget types */
 
@@ -1505,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;
@@ -1776,6 +2360,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;
@@ -2009,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 */
@@ -2033,9 +2683,10 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   border: none;
 }
 
-/* Variant picker select \u2014 styled to match the variant badge aesthetic */
+/* Variant picker select \u2014 styled to match the variant badge aesthetic.
+   Sits inside .lb-bundle-variant-option-group so vertical spacing is owned
+   by the group/groups flex gap, not the select itself. */
 .lb-bundle-variant-select {
-  margin-top: 8px;
   display: inline-block;
   border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
   border-radius: var(--lb-variant-radius);
@@ -2052,7 +2703,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 {
@@ -2062,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;
@@ -2459,7 +3133,6 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__variant-select {
   font-size: 12px;
-  margin: 4px 0 0;
   padding: 4px 24px 4px 8px;
   border: var(--lb-picker-variant-border-width) solid var(--lb-picker-variant-border-color);
   border-radius: var(--lb-picker-variant-radius);
@@ -2472,7 +3145,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-family: inherit;
   min-height: 32px;
   cursor: pointer;
-  max-width: 120px;
+  width: 50%;
+  max-width: 50%;
   appearance: none;
   -webkit-appearance: none;
 }
@@ -2556,6 +3230,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 === */
@@ -2573,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 {
@@ -2677,6 +3372,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) */
 
@@ -3112,7 +4060,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) {
@@ -3129,6 +4078,7 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
       applyWidgetConfigVars(container, bundle.widgetConfig);
+      this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
       const registerCleanup = (fn) => this.renderCleanups.push(fn);
       switch (bundle.bundleType) {
@@ -3230,6 +4180,7 @@ if (typeof customElements !== "undefined" && !customElements.get("lime-bundle"))
   customElements.define("lime-bundle", LimeBundleElement);
 }
 export {
-  LimeBundleElement
+  LimeBundleElement,
+  trackInputMode
 };
 //# sourceMappingURL=index.js.map