@lime-bundles/widget 4.3.0 → 4.4.0

package/dist/index.cjs

@@ -62,6 +62,14 @@ function toCents(amount) {
   const n = parseFloat(amount);
   return Number.isFinite(n) ? Math.round(n * 100) : 0;
 }
+function imageAspectRatio(image) {
+  const w = image?.width;
+  const h = image?.height;
+  if (typeof w !== "number" || typeof h !== "number" || w <= 0 || h <= 0) {
+    return null;
+  }
+  return w / h;
+}
 function adaptVariant(v, requiredQty, fallbackCurrency) {
   return {
     id: numericId(v.id),
@@ -103,6 +111,7 @@ function adaptProduct(product, bundleId, opts) {
     title: product.title,
     url: product.handle ? "/products/" + product.handle : null,
     featuredImage: product.featuredImage?.url ?? null,
+    featuredImageRatio: imageAspectRatio(product.featuredImage),
     quantity: productQty,
     selectedVariantId: initial ? initial.id : "",
     // Option names come off a variant, since the Storefront product query
@@ -447,7 +456,12 @@ function buildRowSkeleton(product, t, opts) {
   }
   row.setAttribute("data-product-id", String(product.productId));
   if (opts.bogoRole) row.setAttribute("data-bogo-role", opts.bogoRole);
-  row.appendChild(box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" }));
+  const thumb = box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
+  const ratio = product.featuredImageRatio;
+  if (opts.thumbnailRatio === "original" && ratio != null && ratio > 0) {
+    thumb.style.setProperty("--lb-row-thumb-ratio", String(ratio));
+  }
+  row.appendChild(thumb);
   const info = box("div", "lb-bundle-product-info");
   const title = document.createElement(opts.href ? "a" : "span");
   title.className = "lb-bundle-product-name";
@@ -756,6 +770,16 @@ var DEFAULT_STRINGS = {
   chooseMoreComplete: "Choose __COUNT__ more to complete your bundle",
   stepOf: "Step __STEP__ of __TOTAL__",
   stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
+  doorChoose: "Choose your products",
+  doorContinue: "Continue building",
+  doorQuickSteps: {
+    one: "__COUNT__ quick step",
+    other: "__COUNT__ quick steps"
+  },
+  doorStepsToGo: {
+    one: "__COUNT__ step to go",
+    other: "__COUNT__ steps to go"
+  },
   each: " each",
   buyQty: "Buy __COUNT__",
   itemCount: {
@@ -1213,7 +1237,8 @@ function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
     const isOos = !product.variants.some((v) => v.available);
     const row = buildRowSkeleton(product, t, {
       isOos,
-      href: product.url
+      href: product.url,
+      thumbnailRatio: wc.productList?.thumbnailRatio
     });
     shell.products.appendChild(row);
     if (isOos) continue;
@@ -3212,7 +3237,8 @@ function renderBogoBundle(container, bundle, onAddToCart, onCleanup) {
       href: side.url,
       bogoRole: side.role,
       inlineQuantity: isGet ? getQty : buyQty,
-      badgeText: isGet && !isOos ? badgeText : null
+      badgeText: isGet && !isOos ? badgeText : null,
+      thumbnailRatio: wc.productList?.thumbnailRatio
     });
     shell.products.appendChild(row);
     if (isOos) return;
@@ -3278,6 +3304,32 @@ function stepsCompletedLabel(completed, total, t) {
 function moreToGoLabel(remaining, t) {
   return remaining > 0 ? fill(t.moreToGo || "__COUNT__ more to go", { COUNT: remaining }) : t.complete || "Complete";
 }
+function fillPlural(map, count, locale) {
+  const form = new Intl.PluralRules(locale || "en").select(count);
+  return fill(map[form] || map.other || "__COUNT__", { COUNT: count });
+}
+function doorLabel(anyPicks, t) {
+  return anyPicks ? t.doorContinue || "Continue building" : t.doorChoose || "Choose your products";
+}
+function doorSubLabel(anyPicks, remaining, total, t) {
+  if (!anyPicks) {
+    const quick = t.doorQuickSteps;
+    if (typeof quick === "string") return fill(quick, { COUNT: total });
+    return fillPlural(
+      quick || { one: "__COUNT__ quick step", other: "__COUNT__ quick steps" },
+      total,
+      t.locale
+    );
+  }
+  return fillPlural(
+    t.doorStepsToGo || {
+      one: "__COUNT__ step to go",
+      other: "__COUNT__ steps to go"
+    },
+    remaining,
+    t.locale
+  );
+}
 
 // ../render/src/multi-step/rules.ts
 function unitsInStep(selections, i) {
@@ -3339,20 +3391,28 @@ function updateStepGroups(deps) {
   const { container, steps, selections, t } = deps;
   for (let i = 0; i < steps.length; i++) {
     const min = steps[i].minQuantity || 1;
-    const countEl = container.querySelector(
-      '[data-step-count="' + i + '"]'
+    const section = container.querySelector(
+      '[data-step-group="' + i + '"]'
     );
-    if (countEl) {
-      countEl.textContent = ofSelectedLabel(
-        Math.min(unitsInStep(selections, i), min),
-        min,
-        t
-      );
-      countEl.classList.toggle(
-        "lb-multi-step__group-count--met",
-        stepSatisfied(selections, steps, i)
+    if (section) {
+      section.setAttribute(
+        "data-step-mode",
+        selections[i].length > 0 ? "open" : "row"
       );
     }
+    const countLabel = ofSelectedLabel(
+      Math.min(unitsInStep(selections, i), min),
+      min,
+      t
+    );
+    const met = stepSatisfied(selections, steps, i);
+    const countEls = container.querySelectorAll(
+      '[data-step-count="' + i + '"]'
+    );
+    for (let c = 0; c < countEls.length; c++) {
+      countEls[c].textContent = countLabel;
+      countEls[c].classList.toggle("lb-multi-step__group-count--met", met);
+    }
     const slotsWrap = container.querySelector(
       '[data-step-slots="' + i + '"]'
     );
@@ -3374,14 +3434,50 @@ function updateStepGroups(deps) {
       );
     }
   }
-  for (let ti = 0; ti < steps.length; ti++) {
-    const trigger = container.querySelector(
-      '[data-step-trigger="' + ti + '"]'
-    );
-    if (trigger) {
-      trigger.style.display = stepHeadroom(selections, steps, ti) === 0 ? "none" : "";
+}
+function updateDoor(deps) {
+  const { container, steps, selections, t } = deps;
+  const door = container.querySelector("[data-step-door]");
+  if (!door) return;
+  let firstUnsatisfied = -1;
+  let remaining = 0;
+  let anyPicks = false;
+  for (let i = 0; i < steps.length; i++) {
+    if (selections[i].length > 0) anyPicks = true;
+    if (!stepSatisfied(selections, steps, i)) {
+      remaining += 1;
+      if (firstUnsatisfied === -1) firstUnsatisfied = i;
     }
   }
+  if (firstUnsatisfied === -1) {
+    door.style.display = "none";
+    door.classList.add("lb-multi-step__door--hidden");
+    const parent = door.parentElement;
+    if (parent && parent.firstElementChild !== door) {
+      parent.insertBefore(door, parent.firstElementChild);
+    }
+    return;
+  }
+  door.style.display = "";
+  door.classList.remove("lb-multi-step__door--hidden");
+  door.setAttribute("data-step-door", String(firstUnsatisfied));
+  const label = doorLabel(anyPicks, t);
+  const labelEl = door.querySelector(
+    ".lb-mix-match__add-product-label"
+  );
+  if (labelEl) labelEl.textContent = label;
+  const subEl = door.querySelector(".lb-multi-step__door-sub");
+  if (subEl) {
+    subEl.textContent = doorSubLabel(anyPicks, remaining, steps.length, t);
+  }
+  const stepName = steps[firstUnsatisfied].name || "";
+  door.setAttribute("aria-label", stepName ? label + ": " + stepName : label);
+  const target = container.querySelector(
+    '[data-step-group="' + firstUnsatisfied + '"]'
+  );
+  if (target && target.parentElement && target.previousElementSibling !== door) {
+    target.parentElement.insertBefore(door, target);
+  }
 }
 function updatePricing3(deps, data, calcDiscount, paint) {
   const { container, steps, selections } = deps;
@@ -3825,10 +3921,12 @@ function createWizard(deps) {
     setTimeout(() => {
       if (!modalOpen) overlay.style.display = "none";
     }, CLOSE_TRANSITION_MS2);
-    const stepTrigger = container.querySelector(
-      '[data-step-trigger="' + stepIndex + '"]'
-    );
-    const elToFocus = stepTrigger && stepTrigger.offsetParent !== null ? stepTrigger : deps.ctaButton;
+    const visible = (el2) => el2 && el2.offsetParent !== null ? el2 : null;
+    const elToFocus = visible(
+      container.querySelector(
+        '[data-step-row="' + stepIndex + '"]'
+      )
+    ) || visible(container.querySelector("[data-step-door]")) || deps.ctaButton;
     if (elToFocus && typeof elToFocus.focus === "function") {
       setTimeout(() => elToFocus.focus(), 0);
     }
@@ -3881,6 +3979,29 @@ function createWizard(deps) {
 }
 
 // src/renderers/multi-step.ts
+function buildPlusIcon() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("width", "18");
+  svg.setAttribute("height", "18");
+  svg.setAttribute("viewBox", "0 0 18 18");
+  svg.setAttribute("fill", "none");
+  for (const [x1, y1, x2, y2] of [
+    ["9", "3", "9", "15"],
+    ["3", "9", "15", "9"]
+  ]) {
+    const line = document.createElementNS(NS, "line");
+    line.setAttribute("x1", x1);
+    line.setAttribute("y1", y1);
+    line.setAttribute("x2", x2);
+    line.setAttribute("y2", y2);
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    svg.appendChild(line);
+  }
+  return svg;
+}
 function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const t = DEFAULT_STRINGS;
@@ -3935,31 +4056,65 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   shell.products.before(buildProgressBar(steps.length));
   const groups = document.createElement("div");
   groups.className = "lb-multi-step__groups";
+  groups.setAttribute("data-step-groups", "");
+  const door = document.createElement("button");
+  door.type = "button";
+  door.className = "lb-mix-match__add-product lb-multi-step__door";
+  door.setAttribute("data-step-door", "0");
+  const doorIcon = document.createElement("span");
+  doorIcon.className = "lb-mix-match__add-product-icon";
+  doorIcon.setAttribute("aria-hidden", "true");
+  doorIcon.appendChild(buildPlusIcon());
+  door.appendChild(doorIcon);
+  const doorCopy = document.createElement("span");
+  doorCopy.className = "lb-multi-step__door-copy";
+  const doorLabel2 = document.createElement("span");
+  doorLabel2.className = "lb-mix-match__add-product-label";
+  doorCopy.appendChild(doorLabel2);
+  const doorSub = document.createElement("span");
+  doorSub.className = "lb-multi-step__door-sub";
+  doorCopy.appendChild(doorSub);
+  door.appendChild(doorCopy);
+  groups.appendChild(door);
   steps.forEach((step, i) => {
-    const group = document.createElement("div");
+    const group = document.createElement("section");
     group.className = "lb-multi-step__group";
     group.setAttribute("data-step-group", String(i));
+    group.setAttribute("data-step-mode", "row");
+    const buildCount = () => {
+      const count = document.createElement("span");
+      count.className = "lb-multi-step__group-count";
+      count.setAttribute("data-step-count", String(i));
+      return count;
+    };
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "lb-multi-step__step-row";
+    row.setAttribute("data-step-row", String(i));
+    row.setAttribute("aria-label", "Choose products: " + step.name);
+    const ix = document.createElement("span");
+    ix.className = "lb-multi-step__step-ix";
+    ix.setAttribute("aria-hidden", "true");
+    ix.textContent = String(i + 1);
+    row.appendChild(ix);
+    const rowName = document.createElement("span");
+    rowName.className = "lb-multi-step__group-name";
+    rowName.textContent = step.name;
+    row.appendChild(rowName);
+    row.appendChild(buildCount());
+    group.appendChild(row);
     const heading = document.createElement("div");
     heading.className = "lb-multi-step__group-heading";
     const name = document.createElement("span");
     name.className = "lb-multi-step__group-name";
     name.textContent = step.name;
     heading.appendChild(name);
-    const count = document.createElement("span");
-    count.className = "lb-multi-step__group-count";
-    count.setAttribute("data-step-count", String(i));
-    heading.appendChild(count);
+    heading.appendChild(buildCount());
     group.appendChild(heading);
     const slots = document.createElement("div");
-    slots.className = "lb-mix-match__slots lb-edge-fade";
+    slots.className = "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots";
     slots.setAttribute("data-step-slots", String(i));
     group.appendChild(slots);
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "lb-mix-match__add-product";
-    trigger.setAttribute("data-step-trigger", String(i));
-    trigger.textContent = "Add a product";
-    group.appendChild(trigger);
     groups.appendChild(group);
   });
   shell.products.replaceWith(groups);
@@ -3996,6 +4151,7 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
   };
   function updateAll() {
     updateStepGroups(bodyDeps);
+    updateDoor(bodyDeps);
     updatePricing3(
       bodyDeps,
       {
@@ -4042,10 +4198,14 @@ function renderMultiStepBundle(container, bundle, onAddToCart, onCleanup) {
     },
     canRemove: (item) => canRemovePick2(selections, item, rulesMap)
   });
-  shell.root.querySelectorAll("[data-step-trigger]").forEach((el2) => {
+  door.addEventListener("click", () => {
+    if (wizard.isOpen()) return;
+    wizard.open(parseInt(door.getAttribute("data-step-door") ?? "", 10) || 0);
+  });
+  shell.root.querySelectorAll("[data-step-row]").forEach((el2) => {
     el2.addEventListener("click", () => {
       if (wizard.isOpen()) return;
-      wizard.open(parseInt(el2.getAttribute("data-step-trigger") ?? "", 10) || 0);
+      wizard.open(parseInt(el2.getAttribute("data-step-row") ?? "", 10) || 0);
     });
   });
   shell.cta.addEventListener("click", () => {
@@ -6239,12 +6399,19 @@ var BUNDLE_MULTI_STEP_CSS = `/**
  * Canon: WIDGET-DESIGN.md (spacing scale, radius system, chip family).
  */
 
-/* \u2500\u2500 Step groups (widget body) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Step groups (widget body) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   One dashed door + one section per step. A step without picks shows a
+   slim checklist row; a step with picks shows the heading + chosen
+   cards. data-step-mode ("row" | "open") on the section picks the
+   representation \u2014 both are in the markup, CSS hides the other, so the
+   server-rendered untouched state IS the hydrated no-selection state.
+   Spacing is per-pair rather than a flat gap: consecutive rows sit
+   flush (hairline-separated), everything else breathes 16px. */
 
 .lb-multi-step__groups {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
 }
 
 .lb-multi-step__group {
@@ -6253,8 +6420,117 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   gap: 8px;
 }
 
+.lb-multi-step__group + .lb-multi-step__group {
+  margin-top: 16px;
+}
+
+/* A run of empty-step rows reads as one checklist: flush, hairlines
+   between (the first row of a run keeps no border). */
+.lb-multi-step__group[data-step-mode="row"] + .lb-multi-step__group[data-step-mode="row"] {
+  margin-top: 0;
+}
+
+.lb-multi-step__group[data-step-mode="row"]
+  + .lb-multi-step__group[data-step-mode="row"]
+  .lb-multi-step__step-row {
+  border-top: var(--lb-border-width) solid var(--lb-border);
+}
+
+/* Mode switch: a row-mode step hides its open chrome and vice versa. */
+.lb-multi-step__group[data-step-mode="row"] .lb-multi-step__group-heading,
+.lb-multi-step__group[data-step-mode="row"] .lb-multi-step__group-slots {
+  display: none;
+}
+
+.lb-multi-step__group[data-step-mode="open"] .lb-multi-step__step-row {
+  display: none;
+}
+
+/* Checklist row \u2014 the empty step's whole representation, and a tap
+   target that deep-links the wizard to that step. Quiet by design: the
+   door above it is the primary action. */
+.lb-multi-step__step-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 10px 2px;
+  background: none;
+  border: none;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background-color 0.25s ease;
+}
+
+.lb-multi-step__step-row:hover {
+  background: color-mix(in srgb, var(--lb-text) 3%, transparent);
+}
+
+.lb-multi-step__step-row:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: -2px;
+  border-radius: var(--lb-radius-sm);
+}
+
+.lb-multi-step__step-row .lb-multi-step__group-count {
+  margin-left: auto;
+}
+
+/* Step number \u2014 quiet index, tabular so multi-digit lists align. */
+.lb-multi-step__step-ix {
+  width: 18px;
+  min-width: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--lb-text) 45%, transparent);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The door \u2014 the single wizard entry point, reusing the dashed
+   add-product recipe with a two-line label. JS moves it directly above
+   the first unsatisfied step and hides it once every step is met. The
+   add-product recipe's own margin-top is for its mix & match position
+   (below the slot list); here the pair rules own all spacing. */
+.lb-multi-step__door {
+  margin-top: 0;
+}
+
+.lb-multi-step__door + .lb-multi-step__group {
+  margin-top: 12px;
+}
+
+.lb-multi-step__door + .lb-multi-step__group[data-step-mode="row"] {
+  margin-top: 4px;
+}
+
+.lb-multi-step__group + .lb-multi-step__door {
+  margin-top: 16px;
+}
+
+/* A hidden door is parked as the container's first child (updateDoor), so
+   the group after it is really the first visible element \u2014 no door gap. */
+.lb-multi-step__door--hidden:first-child + .lb-multi-step__group {
+  margin-top: 0;
+}
+
+.lb-multi-step__door-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lb-multi-step__door-sub {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--lb-text) 55%, transparent);
+}
+
 /* Heading is a quiet, non-interactive row: step name left, live count
-   chip right. The step's dashed trigger below is the click target. */
+   chip right. The step's chosen cards below are the edit targets. */
 .lb-multi-step__group-heading {
   display: flex;
   align-items: center;