@lime-bundles/widget 2.6.0 → 3.0.0

package/dist/index.js

@@ -69,6 +69,20 @@ function firstEnabled(opts) {
   for (let i = 0; i < opts.length; i++) if (!opts[i].disabled) return i;
   return -1;
 }
+function findScrollableAncestor(el2) {
+  const win = el2.ownerDocument?.defaultView;
+  if (!win) return null;
+  let cur = el2.parentElement;
+  while (cur && cur !== el2.ownerDocument.body) {
+    const style = win.getComputedStyle(cur);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "hidden") {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
 var VARIANT_SELECT_CLASSES = [
   "lb-bundle-variant-select",
   "lb-mix-match__variant-select"
@@ -174,6 +188,11 @@ function bindDropdown(select) {
     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 scrollable = listbox.hasAttribute("data-lb-dropdown-portal") ? null : findScrollableAncestor(trigger);
+    const clip = scrollable ? (() => {
+      const r = scrollable.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom };
+    })() : void 0;
     const result = computePosition({
       trigger: {
         top: rect.top,
@@ -182,7 +201,8 @@ function bindDropdown(select) {
         width: rect.width
       },
       viewportHeight: window.innerHeight,
-      desiredHeight
+      desiredHeight,
+      clip
     });
     listbox.setAttribute("data-placement", result.placement);
     listbox.style.maxHeight = `${result.maxHeight}px`;
@@ -954,7 +974,12 @@ function computeSale(totalCents, discount, rows) {
 }
 
 // src/renderers/mix-match.ts
-import { resolveBundleQty as resolveBundleQty2, isVariantFulfillable as isVariantFulfillable2, shouldShowLowStockBadge as shouldShowLowStockBadge2 } from "@lime-bundles/core";
+import {
+  DEFAULT_PRODUCT_RULE,
+  isVariantFulfillable as isVariantFulfillable2,
+  maxAddableQuantity,
+  shouldShowLowStockBadge as shouldShowLowStockBadge2
+} 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>
@@ -975,18 +1000,36 @@ var SEARCH_CLEAR_ICON_SVG = `
 <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
   <path d="M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z"/>
 </svg>`;
+var STEPPER_MINUS_SVG = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="3" y1="7" x2="11" y2="7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+var STEPPER_PLUS_SVG = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="7" y1="3" x2="7" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <line x1="3" y1="7" x2="11" y2="7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+function ruleFor(bundle, productId) {
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE;
+}
+function alreadyInBundleFor(selections, productId, variantId) {
+  let sum = 0;
+  for (const s of selections) {
+    if (s.productId === productId && s.variantId === variantId) sum += s.quantity;
+  }
+  return sum;
+}
 function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const requiredQty = bundle.minQuantity ?? 1;
-  const maxQty = bundle.maxQuantity ?? requiredQty;
+  const showQtySelector = wc.mixMatchShowQuantitySelector !== false;
   const eligible = buildEligibleProducts(bundle, wc.outOfStockBehavior);
   const inStockCount = eligible.filter((e) => !e.isOos).length;
   if (inStockCount < requiredQty) return;
   const selections = [];
   const root = el("div", "lb-mix-match", {
-    "data-required-quantity": String(requiredQty),
-    "data-max-quantity": String(maxQty)
+    "data-required-quantity": String(requiredQty)
   });
   const header = renderHeader2(bundle);
   root.appendChild(header);
@@ -1020,24 +1063,17 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
   root.appendChild(placeholder);
   const modal = renderModal(bundle, eligible, currency, {
     showSearch: wc.showSearch,
-    onAdd: (product, variant) => addSelection(product, variant),
-    onRemove: (productId, variantId) => removeSelection(productId, variantId),
-    isOverMax: () => selections.length >= maxQty
+    showQtySelector,
+    selections,
+    onAdd: (product, variant, quantity) => addSelection(product, variant, quantity),
+    isComplete: () => selections.length >= requiredQty
   });
   root.appendChild(modal.el);
   const cta = buildCtaButton(`Select ${requiredQty} items to unlock`);
   cta.disabled = true;
   cta.addEventListener("click", () => {
     if (cta.disabled) return;
-    const lines = selections.map((s) => ({
-      merchandiseId: s.variantId,
-      quantity: s.quantity,
-      attributes: [
-        { key: "_lime_bundle_gid", value: bundle.id },
-        { key: "_lime_bundle_type", value: bundle.bundleType }
-      ]
-    }));
-    onAddToCart(lines);
+    onAddToCart(buildCartLines(selections, bundle));
   });
   root.appendChild(cta);
   root.appendChild(
@@ -1051,28 +1087,17 @@ 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) {
-    selections.push({
-      productId: firstEligible.product.id,
-      productTitle: firstEligible.product.title,
-      variantId: firstVariant.id,
-      variantTitle: firstVariant.title,
-      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();
-  function addSelection(product, variant) {
-    if (selections.length >= maxQty) return;
+  function addSelection(product, variant, quantity) {
+    if (selections.length >= requiredQty) return;
+    const rule = ruleFor(bundle, product.id);
+    const cap = maxAddableQuantity(
+      variant,
+      rule.max,
+      alreadyInBundleFor(selections, product.id, variant.id)
+    );
+    if (cap < rule.min) return;
+    const clamped = Math.max(rule.min, Math.min(quantity, cap));
     selections.push({
       productId: product.id,
       productTitle: product.title,
@@ -1086,18 +1111,10 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
         variant.unitPriceMeasurement,
         currency
       ),
-      quantity: resolveBundleQty2(bundle, product.id, variant.id)
+      quantity: clamped
     });
     afterMutation();
   }
-  function removeSelection(productId, variantId) {
-    const idx = selections.findIndex(
-      (s) => s.productId === productId && s.variantId === variantId
-    );
-    if (idx === -1) return;
-    selections.splice(idx, 1);
-    afterMutation();
-  }
   function removeSlotAt(index) {
     if (index < 0 || index >= selections.length) return;
     selections.splice(index, 1);
@@ -1139,6 +1156,26 @@ function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
     }
   }
 }
+function buildCartLines(selections, bundle) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const s of selections) {
+    const key = `${s.productId}::${s.variantId}`;
+    const existing = grouped.get(key);
+    if (existing) {
+      existing.quantity += s.quantity;
+    } else {
+      grouped.set(key, { variantId: s.variantId, quantity: s.quantity });
+    }
+  }
+  return Array.from(grouped.values()).map((line) => ({
+    merchandiseId: line.variantId,
+    quantity: line.quantity,
+    attributes: [
+      { key: "_lime_bundle_gid", value: bundle.id },
+      { key: "_lime_bundle_type", value: bundle.bundleType }
+    ]
+  }));
+}
 function renderHeader2(bundle) {
   const wc = bundle.widgetConfig;
   const header = el("div", "lb-bundle-header");
@@ -1254,7 +1291,7 @@ function renderFilledSlot(selection, index, currency, onRemove) {
     thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
   }
   const qtyBadge = el("span", "lb-bundle-qty-badge");
-  qtyBadge.textContent = String(selection.quantity);
+  qtyBadge.textContent = `\xD7${selection.quantity}`;
   thumb.appendChild(qtyBadge);
   slot.appendChild(thumb);
   const info = el("div", "lb-mix-match__filled-info");
@@ -1443,10 +1480,9 @@ function renderModal(bundle, eligible, currency, handlers) {
     rowsBuilt = true;
     list.innerHTML = "";
     eligible.forEach((ep) => {
+      const rule = ruleFor(bundle, ep.product.id);
       const availableVariants = ep.variants;
-      const firstAvailVariant = ep.variants.find(
-        (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))
-      ) ?? ep.firstAvailableVariant ?? ep.variants[0];
+      const firstAvailVariant = ep.variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? ep.firstAvailableVariant ?? ep.variants[0];
       if (!firstAvailVariant) return;
       let currentVariant = firstAvailVariant;
       const productEl = el(
@@ -1455,9 +1491,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         { "data-product-id": ep.product.id.replace(/^.*\//, "") }
       );
       const thumb = el("div", "lb-mix-match__modal-product-thumb");
-      const initialThumbVariant = ep.variants.find(
-        (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))
-      ) ?? ep.variants[0] ?? null;
+      const initialThumbVariant = ep.variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? ep.variants[0] ?? null;
       const initialThumbImage = initialThumbVariant?.image ?? ep.product.featuredImage ?? null;
       let thumbImg = null;
       if (initialThumbImage) {
@@ -1476,9 +1510,7 @@ function renderModal(bundle, eligible, currency, handlers) {
         thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
       }
       const countBadge = el("span", "lb-bundle-qty-badge");
-      countBadge.textContent = String(
-        resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
-      );
+      countBadge.hidden = true;
       thumb.appendChild(countBadge);
       productEl.appendChild(thumb);
       const info = el("div", "lb-mix-match__modal-product-info");
@@ -1486,10 +1518,7 @@ 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 = formatCents(
-        parseCents(currentVariant.price.amount) * resolveBundleQty2(bundle, ep.product.id, currentVariant.id),
-        currency
-      );
+      price.textContent = formatCents(parseCents(currentVariant.price.amount), currency);
       info.appendChild(price);
       const unitPrice = el(
         "p",
@@ -1512,10 +1541,9 @@ function renderModal(bundle, eligible, currency, handlers) {
       lowStockBadge.hidden = true;
       info.appendChild(lowStockBadge);
       const refreshLowStockBadge = (variant) => {
-        const required = resolveBundleQty2(bundle, ep.product.id, variant.id);
         if (shouldShowLowStockBadge2(
           variant,
-          required,
+          rule.min,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
         )) {
@@ -1526,11 +1554,40 @@ function renderModal(bundle, eligible, currency, handlers) {
         }
       };
       refreshLowStockBadge(currentVariant);
+      const computeStepperBounds = () => {
+        const already = alreadyInBundleFor(
+          handlers.selections,
+          ep.product.id,
+          currentVariant.id
+        );
+        const cap = maxAddableQuantity(currentVariant, rule.max, already);
+        const max = Math.max(rule.min, cap);
+        return { min: rule.min, max, cap };
+      };
+      let stepper = null;
+      if (!ep.isOos && handlers.showQtySelector) {
+        const qtyGroup = el(
+          "div",
+          "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group"
+        );
+        const qtyLabel = el("span", "lb-bundle-variant-option-label");
+        qtyLabel.textContent = "Quantity";
+        qtyGroup.appendChild(qtyLabel);
+        stepper = renderQtyStepper({
+          initial: rule.min,
+          getBounds: () => {
+            const { min, max } = computeStepperBounds();
+            return { min, max };
+          }
+        });
+        qtyGroup.appendChild(stepper.el);
+        info.appendChild(qtyGroup);
+      }
       const row = {
         el: productEl,
         product: ep.product,
         variant: firstAvailVariant,
-        updateCount: () => {
+        refreshFromSelections: () => {
         }
       };
       if (availableVariants.length > 1) {
@@ -1549,7 +1606,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           });
         };
         const isValueAvailable = (optionIndex, value, selected) => availableVariants.some((v) => {
-          if (!isVariantFulfillable2(v, resolveBundleQty2(bundle, ep.product.id, v.id))) return false;
+          if (!isVariantFulfillable2(v, rule.min)) return false;
           if (v.selectedOptions[optionIndex]?.value !== value) return false;
           return v.selectedOptions.every(
             (o, i) => i === optionIndex || o.value === selected[i]
@@ -1574,15 +1631,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
           currentVariant = next;
           row.variant = next;
-          const nextQty = resolveBundleQty2(
-            bundle,
-            ep.product.id,
-            currentVariant.id
-          );
-          price.textContent = formatCents(
-            parseCents(currentVariant.price.amount) * nextQty,
-            currency
-          );
+          price.textContent = formatCents(parseCents(currentVariant.price.amount), currency);
           const nextUnitText = formatUnitPrice(
             currentVariant.unitPrice,
             currentVariant.unitPriceMeasurement,
@@ -1606,7 +1655,7 @@ function renderModal(bundle, eligible, currency, handlers) {
           }
           recomputeDisabled(next.selectedOptions.map((o) => o.value));
           refreshLowStockBadge(currentVariant);
-          rowUpdateCount();
+          row.refreshFromSelections();
         };
         const groupsContainer = el("div", "lb-bundle-variant-option-groups");
         optionNames.forEach((name, position) => {
@@ -1653,25 +1702,45 @@ function renderModal(bundle, eligible, currency, handlers) {
         info.appendChild(soldOut);
       }
       productEl.appendChild(info);
-      const rowUpdateCount = () => {
-        countBadge.textContent = String(
-          resolveBundleQty2(bundle, ep.product.id, currentVariant.id)
+      let addBtn = null;
+      const refreshAddState = () => {
+        if (!addBtn) return;
+        const { cap } = computeStepperBounds();
+        const already = alreadyInBundleFor(
+          handlers.selections,
+          ep.product.id,
+          currentVariant.id
         );
+        if (already > 0) {
+          countBadge.textContent = String(already);
+          countBadge.hidden = false;
+        } else {
+          countBadge.hidden = true;
+        }
+        addBtn.disabled = handlers.isComplete() || cap < rule.min;
       };
       if (!ep.isOos) {
-        const addBtn = document.createElement("button");
+        const actions = el("div", "lb-mix-match__modal-product-actions");
+        addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.className = "lb-mix-match__modal-add";
         addBtn.textContent = "Add";
         addBtn.addEventListener("click", () => {
-          if (handlers.isOverMax()) return;
-          handlers.onAdd(ep.product, currentVariant);
+          if (!addBtn || addBtn.disabled) return;
+          if (handlers.isComplete()) return;
+          const qty = stepper ? stepper.value() : rule.min;
+          handlers.onAdd(ep.product, currentVariant, qty);
+          if (stepper) stepper.reset(rule.min);
           close();
         });
-        productEl.appendChild(addBtn);
+        actions.appendChild(addBtn);
+        productEl.appendChild(actions);
       }
-      row.updateCount = ep.isOos ? () => {
-      } : rowUpdateCount;
+      row.refreshFromSelections = () => {
+        if (stepper) stepper.refresh();
+        refreshAddState();
+      };
+      row.refreshFromSelections();
       productRows.push(row);
       list.appendChild(productEl);
     });
@@ -1706,7 +1775,7 @@ function renderModal(bundle, eligible, currency, handlers) {
   let isOpen = false;
   function open() {
     if (isOpen) return;
-    if (handlers.isOverMax()) return;
+    if (handlers.isComplete()) return;
     isOpen = true;
     buildRows();
     lastFocused = overlay.getRootNode().activeElement;
@@ -1731,18 +1800,72 @@ function renderModal(bundle, eligible, currency, handlers) {
     if (e.target === overlay) close();
   }
   function refreshCounts() {
-    productRows.forEach((r) => r.updateCount());
+    productRows.forEach((r) => r.refreshFromSelections());
   }
   return { el: overlay, open, close, refreshCounts };
 }
+function renderQtyStepper(opts) {
+  const wrap = el("div", "lb-mix-match__qty-stepper", {
+    role: "group",
+    "aria-label": "Quantity"
+  });
+  const minus = document.createElement("button");
+  minus.type = "button";
+  minus.className = "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--minus";
+  minus.setAttribute("aria-label", "Decrease quantity");
+  minus.innerHTML = STEPPER_MINUS_SVG;
+  wrap.appendChild(minus);
+  const valueEl = el("span", "lb-mix-match__qty-stepper-value", {
+    "aria-live": "polite"
+  });
+  wrap.appendChild(valueEl);
+  const plus = document.createElement("button");
+  plus.type = "button";
+  plus.className = "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--plus";
+  plus.setAttribute("aria-label", "Increase quantity");
+  plus.innerHTML = STEPPER_PLUS_SVG;
+  wrap.appendChild(plus);
+  let current = clamp2(opts.initial, opts.getBounds());
+  function clamp2(n, b) {
+    return Math.max(b.min, Math.min(b.max, n));
+  }
+  function paint() {
+    const b = opts.getBounds();
+    current = clamp2(current, b);
+    valueEl.textContent = String(current);
+    minus.disabled = current <= b.min;
+    plus.disabled = current >= b.max;
+  }
+  minus.addEventListener("click", () => {
+    const b = opts.getBounds();
+    current = clamp2(current - 1, b);
+    paint();
+  });
+  plus.addEventListener("click", () => {
+    const b = opts.getBounds();
+    current = clamp2(current + 1, b);
+    paint();
+  });
+  paint();
+  return {
+    el: wrap,
+    value: () => current,
+    reset(qty) {
+      current = clamp2(qty, opts.getBounds());
+      paint();
+    },
+    refresh: paint
+  };
+}
 function buildEligibleProducts(bundle, oosBehavior) {
   const result = [];
   const seen = /* @__PURE__ */ new Set();
   for (const product of bundle.products) {
     if (seen.has(product.id)) continue;
     seen.add(product.id);
+    const rule = ruleFor(bundle, product.id);
     const available = product.variants.nodes.filter(
-      (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, product.id, v.id))
+      (v) => isVariantFulfillable2(v, rule.min)
     );
     const isOos = available.length === 0;
     if (isOos && oosBehavior === "hide") continue;
@@ -3164,8 +3287,8 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 
 .lb-mix-match__modal-product-thumb {
   position: relative;
-  width: 48px;
-  min-width: 48px;
+  width: 60px;
+  min-width: 60px;
   /* Modal picker thumbs follow the merchant's pickerThumbnailRatio \u2014
      independent from the main widget's thumbnailRatio so a merchant can
      e.g. show tall picker thumbs with square main thumbs. */
@@ -3214,7 +3337,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-size: 12px;
   line-height: 20px;
   color: inherit;
-  margin: 4px 0 0;
+  margin: 2px 0 0;
 }
 
 .lb-mix-match__modal-product-unit-price {
@@ -3253,6 +3376,86 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   outline-offset: 2px;
 }
 
+/* Per-pick quantity stepper inside the picker modal product row.
+   Three flex cells (\u2212 / number / +) sharing a single outer border \u2014
+   the same picker-variant border vars the variant select uses, so
+   the two pieces visually agree even when the merchant tweaks
+   --lb-picker-variant-border-width / -color / -radius. The cell
+   dividers come from a 1px border on the centre value rather than
+   per-button borders, so the rounded outer corners stay clean.
+   Mirrors extensions/bundle-theme/assets/bundle-mix-match.css so
+   the headless web component matches the Liquid theme widget. */
+/* Quantity label + stepper sit together in a .lb-bundle-variant-option-group
+   wrapper so the label-to-stepper gap inherits the same 2px the variant
+   pickers use. The wrapper carries the margin-top that spaces the qty
+   group from the unit-price / low-stock-badge above; the stepper itself
+   has no top margin so the group can be repositioned without coupling. */
+.lb-mix-match__qty-stepper-group {
+  margin-top: 8px;
+  /* Group is a flex column; without an explicit width it stretches to
+     fill the info column so the \u2212/value/+ cells get pulled apart. Pin
+     to fit-content so the wrapper hugs the stepper's natural width. */
+  width: fit-content;
+}
+
+.lb-mix-match__qty-stepper {
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 32px;
+  border: var(--lb-picker-variant-border-width) solid var(--lb-picker-variant-border-color);
+  border-radius: var(--lb-picker-variant-radius);
+  background-color: var(--lb-picker-bg);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.lb-mix-match__qty-stepper-button {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: 28px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--lb-picker-text);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lb-mix-match__qty-stepper-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--lb-picker-text) 6%, transparent);
+}
+
+.lb-mix-match__qty-stepper-button:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: -2px;
+}
+
+.lb-mix-match__qty-stepper-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.lb-mix-match__qty-stepper-value {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  padding: 0 8px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lb-picker-text);
+  box-sizing: border-box;
+}
+
 .lb-mix-match__modal-add {
   padding: 8px 20px;
   background: var(--lb-picker-add-bg);