@lime-bundles/widget 4.5.0 → 4.5.1

package/dist/index.cjs

@@ -3574,6 +3574,8 @@ function mergeCartLines(selections) {
 var ALL_TYPES2 = "__all__";
 var CLOSE_TRANSITION_MS2 = 300;
 var SEARCH_DEBOUNCE_MS2 = 200;
+var STEP_CASCADE_MS = 500;
+var AUTO_ADVANCE_HOLD_MS = 160;
 function createWizard(deps) {
   const { container, steps, selections, t } = deps;
   const overlay = container.querySelector("[data-modal-overlay]");
@@ -3598,6 +3600,8 @@ function createWizard(deps) {
   let modalOpen = false;
   let stepIndex = 0;
   let rows = [];
+  let cascadeTimer = null;
+  let autoAdvanceTimer = null;
   const productsFor = (i) => steps[i].eligibleProducts || [];
   const rowCapacity = {
     remainingSpots: () => stepHeadroom(selections, steps, stepIndex),
@@ -3698,7 +3702,13 @@ function createWizard(deps) {
     if (!deps.autoAdvance) return;
     if (stepIndex >= steps.length - 1) return;
     if (stepHeadroom(selections, steps, stepIndex) !== 0) return;
-    goToStep(stepIndex + 1);
+    const from = stepIndex;
+    if (autoAdvanceTimer !== null) clearTimeout(autoAdvanceTimer);
+    autoAdvanceTimer = setTimeout(() => {
+      autoAdvanceTimer = null;
+      if (!modalOpen) return;
+      goToStep(from + 1);
+    }, AUTO_ADVANCE_HOLD_MS);
   }
   function buildProductList(forStep) {
     if (!modalList) return;
@@ -3886,7 +3896,29 @@ function createWizard(deps) {
     });
   }
   function goToStep(i, opts = {}) {
-    stepIndex = Math.max(0, Math.min(steps.length - 1, i));
+    const target = Math.max(0, Math.min(steps.length - 1, i));
+    if (autoAdvanceTimer !== null) {
+      clearTimeout(autoAdvanceTimer);
+      autoAdvanceTimer = null;
+    }
+    if (modalDialog) {
+      if (cascadeTimer !== null) clearTimeout(cascadeTimer);
+      cascadeTimer = null;
+      modalDialog.removeAttribute("data-step-transition");
+      if (opts.animate !== false && target !== stepIndex) {
+        void modalDialog.offsetHeight;
+        modalDialog.setAttribute(
+          "data-step-transition",
+          target > stepIndex ? "forward" : "back"
+        );
+        const dialog = modalDialog;
+        cascadeTimer = setTimeout(() => {
+          cascadeTimer = null;
+          dialog.removeAttribute("data-step-transition");
+        }, STEP_CASCADE_MS);
+      }
+    }
+    stepIndex = target;
     buildProductList(stepIndex);
     buildFilters(stepIndex);
     activeType = ALL_TYPES2;
@@ -3911,7 +3943,10 @@ function createWizard(deps) {
   function open(atStep) {
     if (!overlay || modalOpen) return;
     modalOpen = true;
-    goToStep(typeof atStep === "number" ? atStep : 0, { skipFocus: true });
+    goToStep(typeof atStep === "number" ? atStep : 0, {
+      skipFocus: true,
+      animate: false
+    });
     overlay.style.display = "";
     void overlay.offsetHeight;
     overlay.classList.add("lb-mix-match__modal-overlay--open");
@@ -3924,6 +3959,14 @@ function createWizard(deps) {
   function close() {
     if (!overlay || !modalOpen) return;
     modalOpen = false;
+    if (autoAdvanceTimer !== null) {
+      clearTimeout(autoAdvanceTimer);
+      autoAdvanceTimer = null;
+    }
+    if (cascadeTimer !== null) {
+      clearTimeout(cascadeTimer);
+      cascadeTimer = null;
+    }
     overlay.classList.remove("lb-mix-match__modal-overlay--open");
     unlock();
     setTimeout(() => {
@@ -4311,11 +4354,18 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   --lb-list-max-height: 360px;
   /* Depth of the soft fade at a scroll list's clipped edge. */
   --lb-edge-fade-size: 20px;
-  /* Derived "small" corner radius for inner controls (thumbnails, variant
-     selects, the qty chip). One step tighter than the global --lb-radius so
-     small elements stay proportionate. Both come from the global radius
-     preset; nothing else sets a radius. */
-  --lb-radius-sm: max(0px, calc(var(--lb-radius) - 4px));
+  /* Derived "small" corner radius for chips and badges \u2014 the low-stock badge,
+     the volume tier badge, the multi-step count chip. Controls and media
+     (thumbnails, selects, steppers, buttons) take the full --lb-radius: they
+     are the elements the merchant is looking at when they pick a preset, and
+     the picker's own help text already promises they follow it.
+
+     Proportional rather than a fixed subtraction. At "subtle" (6px) minus-4px
+     left 2px, which reads as square \u2014 the merchant saw a picker set to Subtle
+     render with sharp corners (issue #363). Two thirds holds the proportion at
+     every preset: none 0, subtle 4px, rounded 8px, round 12px. No max() needed,
+     since 0 \xD7 \u2154 is 0. */
+  --lb-radius-sm: calc(var(--lb-radius) * 2 / 3);
 
   font-family: inherit;
   font-size: 16px;
@@ -4479,7 +4529,7 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
      ratio. Default keeps the historical 1:1 behaviour. */
   aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   background: var(--lb-thumbnail-bg);
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -5029,12 +5079,12 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 .lb-fixed .lb-bundle-thumbnail {
   width: 60px;
   min-width: 60px;
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   box-sizing: border-box;
 }
 
 .lb-fixed .lb-bundle-thumbnail img {
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   border: none;
 }
 
@@ -5051,7 +5101,7 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
   display: var(--lb-product-qty-chip-display, inline-flex);
   align-items: center;
   justify-content: center;
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   background: color-mix(in srgb, var(--lb-text) 7%, transparent);
   color: color-mix(in srgb, var(--lb-text) 75%, transparent);
   font-size: 13px;
@@ -5067,7 +5117,7 @@ var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
 .lb-bundle-variant-select {
   display: inline-block;
   border: var(--lb-border-width) solid var(--lb-border);
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   padding: 8px 32px 8px 12px;
   font-size: 12px;
   line-height: 16px;
@@ -5215,12 +5265,12 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   position: relative;
   width: 60px;
   min-width: 60px;
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   box-sizing: border-box;
 }
 
 .lb-mix-match .lb-bundle-thumbnail img {
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   border: none;
 }
 
@@ -5386,14 +5436,26 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   color: inherit;
 }
 
-/* Derived "small" radius for the picker's inner controls (search, thumbnails,
-   variant select, qty stepper, Add/Done buttons), one step tighter than the
-   modal's --lb-picker-radius \u2014 the picker-scoped mirror of --lb-radius-sm in the
-   main widget. Defined on the overlay so the modal AND the variant listbox
-   (which portals up to [data-modal-overlay]) both inherit it. The modal shell
-   and product tiles keep the full --lb-picker-radius. */
+/* Derived "small" radius for the picker's chips and badges \u2014 the progress
+   segments, the "Added" badge, the close button, the filter pills. The
+   picker-scoped mirror of --lb-radius-sm, and proportional for the same reason
+   (see bundle-base.css).
+
+   Everything the merchant would call a control or an image \u2014 the modal, search,
+   product tiles, thumbnails, variant dropdown, quantity stepper and the
+   buttons \u2014 takes the full --lb-picker-radius instead. That is what the
+   editor's own Borders copy promises them, and the reduced tier had it
+   rendering square at the Subtle preset (issue #363).
+
+   Declared on BOTH hosts the modal can live under. On the storefront it portals
+   to [data-modal-overlay], which the variant listbox portals up to as well. In
+   the admin widget editor there is no overlay at all \u2014 the preview renders the
+   modal directly under .lb-bundle-widget \u2014 so scoping this to the overlay alone
+   left the variable undefined there and every control using it fell back to
+   square corners while the modal and tiles rounded correctly (issue #363). */
+.lb-bundle-widget,
 [data-modal-overlay] {
-  --lb-picker-radius-sm: max(0px, calc(var(--lb-picker-radius) - 4px));
+  --lb-picker-radius-sm: calc(var(--lb-picker-radius) * 2 / 3);
 }
 
 /* === Modal Overlay === */
@@ -5490,7 +5552,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   border: none;
   cursor: pointer;
   color: var(--lb-picker-text);
-  border-radius: 8px;
+  border-radius: var(--lb-picker-radius-sm);
   padding: 0;
   margin: -12px -12px 0 0;
   transition: background 0.25s ease;
@@ -5520,7 +5582,9 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
 .lb-mix-match__filter {
   padding: 6px 14px;
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
-  border-radius: 999px;
+  /* Pills followed the merchant's picker radius as of #363 \u2014 a fixed 999px
+     read as a stray rounded shape in a picker set to None or Subtle. */
+  border-radius: var(--lb-picker-radius-sm);
   background: transparent;
   color: var(--lb-picker-text);
   font-family: inherit;
@@ -5574,7 +5638,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   width: 100%;
   padding: 12px 40px 12px 44px;
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   font-size: 16px;
   line-height: 20px;
   color: var(--lb-picker-text);
@@ -5674,7 +5738,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
      independent from the main widget's thumbnailRatio so a merchant can
      e.g. show tall picker thumbs with square main thumbs. */
   aspect-ratio: var(--lb-picker-thumbnail-aspect-ratio, 1 / 1);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   box-sizing: border-box;
   overflow: hidden;
   background: var(--lb-thumbnail-bg);
@@ -5687,7 +5751,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
      to auto/contain so the image renders uncropped at intrinsic ratio. */
   height: var(--lb-picker-thumbnail-img-height, 100%);
   object-fit: var(--lb-picker-thumbnail-img-fit, cover);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
 }
 
 .lb-mix-match__modal-product-info {
@@ -5762,7 +5826,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   font-size: 12px;
   padding: 4px 24px 4px 8px;
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   background-color: var(--lb-picker-bg);
   background-image: var(--lb-picker-variant-chevron);
   background-repeat: no-repeat;
@@ -5813,7 +5877,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   width: 100%;
   flex-shrink: 0;
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   background-color: var(--lb-picker-bg);
   overflow: hidden;
   box-sizing: border-box;
@@ -5890,7 +5954,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   background: var(--lb-picker-add-bg);
   color: var(--lb-picker-add-label);
   border: var(--lb-picker-add-border-width) solid var(--lb-picker-add-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   box-sizing: border-box;
   font-size: 12px;
   font-weight: 600;
@@ -6031,7 +6095,7 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   background: var(--lb-picker-add-bg);
   color: var(--lb-picker-add-label);
   border: var(--lb-picker-add-border-width) solid var(--lb-picker-add-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   box-sizing: border-box;
   font-family: inherit;
   font-size: 14px;
@@ -6080,7 +6144,9 @@ var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
   .lb-mix-match__modal {
     max-width: 100%;
     max-height: 90vh;
-    border-radius: 16px 16px 0 0;
+    /* Bottom sheet: only the top corners round, but they round to whatever the
+       merchant picked rather than a fixed 16px (issue #363). */
+    border-radius: var(--lb-picker-radius) var(--lb-picker-radius) 0 0;
     transform: translateY(100%);
   }
 
@@ -6347,12 +6413,12 @@ var BUNDLE_BOGO_CSS = `/* Lime Bundles \u2014 BOGO (Buy X Get Y) bundle styles *
 .lb-bogo .lb-bundle-thumbnail {
   width: 60px;
   min-width: 60px;
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   box-sizing: border-box;
 }
 
 .lb-bogo .lb-bundle-thumbnail img {
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   border: none;
 }
 
@@ -6473,6 +6539,13 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   cursor: pointer;
   box-sizing: border-box;
   transition: background-color 0.25s ease;
+  /* Deliberately no border-radius. This row paints the checklist hairline as
+     its own border-top (see the run rule above), and a radius tapers that
+     border into the corner arcs \u2014 the dividers came out visibly curved at the
+     "round" preset (issue #363). A full-bleed list row is meant to be square
+     anyway; the hover tint below spans the card width, so it has no corner to
+     round against. The :focus-visible radius is fine: an outline is a
+     separate paint and never touches the border. */
 }
 
 .lb-multi-step__step-row:hover {
@@ -6620,7 +6693,7 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   padding: 10px 24px;
   background: none;
   border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   box-sizing: border-box;
   color: var(--lb-picker-text);
   font-family: inherit;
@@ -6638,6 +6711,108 @@ var BUNDLE_MULTI_STEP_CSS = `/**
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
 }
+
+/* \u2500\u2500 Step-change transition \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
+   Moving between steps swaps the whole step-scoped region in a single
+   paint, which reads as nothing happening (or as a glitch) rather than
+   as arriving somewhere new \u2014 and worst of all under auto-advance,
+   where the shopper never clicked anything. So the step assembles
+   instead of arriving whole: the step label leads, the filter pills
+   follow, then the product cards one after another. Staging is what
+   makes the change legible; a uniform slide of everything at once only
+   wobbles the card.
+
+   The wizard stamps data-step-transition="forward" | "back" on the
+   dialog on every step change (manual Next/Back and auto-advance
+   alike, never on open, where the modal entrance already carries the
+   motion), and clears it again once the cascade has played \u2014 see
+   STEP_CASCADE_MS in multi-step/wizard.ts. That clear is load-bearing,
+   not tidiness: search and filter hide cards with .lb-hidden
+   (display: none), and restoring display restarts a card's animation,
+   so a live attribute would replay the whole cascade on every
+   keystroke that reveals a card.
+
+   Two elements deliberately hold still. The footer, because Back/Next
+   are the shopper's anchor while everything above them moves. And the
+   progress rail, because it is the one thing that answers "where am I
+   now" \u2014 animating the shopper's only orientation cue is what made the
+   previous version hard to read. Its segment fill carries its own
+   state change already. */
+@keyframes lb-multi-step-cascade-fwd {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+@keyframes lb-multi-step-cascade-back {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-subtitle {
+  animation: lb-multi-step-cascade-fwd 0.2s ease-out both;
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__filters {
+  animation: lb-multi-step-cascade-fwd 0.2s ease-out 0.05s both;
+}
+
+/* Cards stagger 30ms apart, but only the first four: a step can hold
+   dozens of products and the two-column grid shows about four at a
+   time, so past that the stagger is below the fold and would only add
+   lag. Everything from the fifth on shares the fourth's landing. */
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > * {
+  animation: lb-multi-step-cascade-fwd 0.22s ease-out 0.2s both;
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > :nth-child(1) {
+  animation-delay: 0.09s;
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > :nth-child(2) {
+  animation-delay: 0.12s;
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > :nth-child(3) {
+  animation-delay: 0.15s;
+}
+
+.lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > :nth-child(4) {
+  animation-delay: 0.18s;
+}
+
+/* Going back runs the same cascade in the same order \u2014 only the offset
+   flips, so the shopper still reads which way they moved. Overrides
+   the name alone; the staggered delays above must survive. */
+.lb-mix-match__modal[data-step-transition="back"] .lb-mix-match__modal-subtitle,
+.lb-mix-match__modal[data-step-transition="back"] .lb-mix-match__filters,
+.lb-mix-match__modal[data-step-transition="back"] .lb-mix-match__modal-list > * {
+  animation-name: lb-multi-step-cascade-back;
+}
+
+@keyframes lb-multi-step-cascade-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Reduced motion keeps the fade and drops the travel and the stagger:
+   the step change still has to be perceptible, which is the whole
+   point of this block. The card selector is :nth-child(n) rather than
+   * on purpose \u2014 a plain * loses to the :nth-child(1..4) delays above
+   on specificity, which would leave the stagger running with nothing
+   moving. :nth-child(n) matches every child at equal specificity and
+   wins on order. */
+@media (prefers-reduced-motion: reduce) {
+  .lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-subtitle,
+  .lb-mix-match__modal[data-step-transition] .lb-mix-match__filters,
+  .lb-mix-match__modal[data-step-transition] .lb-mix-match__modal-list > :nth-child(n) {
+    animation: lb-multi-step-cascade-fade 0.15s ease-out both;
+  }
+}
 `;
 var BUNDLE_DROPDOWN_CSS = `/**
  * Lime Bundles \u2014 Custom variant-picker dropdown styling.
@@ -6685,7 +6860,7 @@ var BUNDLE_DROPDOWN_CSS = `/**
   gap: 8px;
   width: 100%;
   border: var(--lb-border-width) solid var(--lb-border);
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   padding: 8px 12px;
   font-size: 12px;
   line-height: 16px;
@@ -6748,7 +6923,7 @@ var BUNDLE_DROPDOWN_CSS = `/**
   background: var(--lb-bg);
   color: var(--lb-text);
   border: var(--lb-border-width) solid var(--lb-border);
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   overflow-y: auto;
   overflow-x: hidden;
@@ -6809,6 +6984,10 @@ var BUNDLE_DROPDOWN_CSS = `/**
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--lb-text);
+  /* The active/hover tint below fills the option, so it rounds with the rest
+     of the widget rather than squaring off against the listbox corner it sits
+     in (issue #363). */
+  border-radius: var(--lb-radius-sm);
 }
 
 .lb-dropdown-option[aria-selected="true"] {
@@ -6867,7 +7046,7 @@ var BUNDLE_DROPDOWN_CSS = `/**
 .lb-mix-match__modal .lb-dropdown-trigger {
   border-color: var(--lb-picker-border-color);
   border-width: var(--lb-picker-border-width);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius);
   background: var(--lb-picker-bg);
   color: var(--lb-picker-text);
   /* Match the picker qty stepper + Add button height (border-box so 32px is
@@ -6888,13 +7067,17 @@ var BUNDLE_DROPDOWN_CSS = `/**
 [data-modal-overlay] > .lb-dropdown-listbox {
   border-color: var(--lb-picker-border-color);
   border-width: var(--lb-picker-border-width);
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-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 .lb-dropdown-option {
+  border-radius: var(--lb-picker-radius-sm);
+}
+
 [data-modal-overlay] > .lb-dropdown-listbox::-webkit-scrollbar-track {
   background: color-mix(in srgb, var(--lb-picker-text) 2%, transparent);
   border-radius: 2px;