@lime-bundles/widget 2.4.1 → 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) => {
@@ -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 = 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);
   }
@@ -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 = 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) {
@@ -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,7 +1027,7 @@ 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(
@@ -655,7 +1046,7 @@ 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(
@@ -1030,18 +1421,21 @@ 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);
       }
@@ -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 = 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();
         };
@@ -1215,6 +1618,7 @@ function renderModal(bundle, eligible, currency, handlers) {
       productRows.push(row);
       list.appendChild(productEl);
     });
+    bindAllDropdowns(list);
     refreshCounts();
   }
   function applySearch() {
@@ -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;
@@ -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 {
@@ -2909,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) */
 
@@ -3344,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) {