@lime-bundles/react 7.3.0 → 7.4.0

package/dist/styles.css

@@ -42,7 +42,7 @@
    Falls back to --lb-border-radius until the bundle config has loaded, matching
    the rest of this stylesheet. */
 .lb-bundle {
-  --lb-radius-sm: max(0px, calc(var(--lb-radius, var(--lb-border-radius)) - 4px));
+  --lb-radius-sm: calc(var(--lb-radius, var(--lb-border-radius)) * 2 / 3);
 }
 
 /* Edge fade — the shared treatment for inset scroll lists (fixed products,
@@ -184,7 +184,7 @@
   aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   object-fit: var(--lb-thumbnail-img-fit, cover);
   /* Thumbnails carry only the derived corner radius — no border. */
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   box-sizing: border-box;
   flex-shrink: 0;
 }
@@ -233,7 +233,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   background: color-mix(in srgb, var(--lb-text, var(--lb-primary-color)) 7%, transparent);
   color: color-mix(in srgb, var(--lb-text, var(--lb-primary-color)) 75%, transparent);
   font-size: 14px;
@@ -310,7 +310,7 @@
   line-height: 1.4;
   color: var(--lb-low-stock-text, var(--lb-error-color));
   background-color: var(--lb-low-stock-bg, #fef3c7);
-  border-radius: 4px;
+  border-radius: var(--lb-radius-sm);
   white-space: nowrap;
 }
 
@@ -428,7 +428,7 @@
   width: 60px;
   min-width: 60px;
   /* Thumbnails carry only the derived corner radius — no border. */
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   box-sizing: border-box;
   flex-shrink: 0;
 }
@@ -437,7 +437,7 @@
   width: 100%;
   aspect-ratio: var(--lb-thumbnail-aspect-ratio, 1 / 1);
   object-fit: var(--lb-thumbnail-img-fit, cover);
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   border: none;
   display: block;
 }
@@ -603,7 +603,7 @@
    product tiles keep the full --lb-picker-radius. Falls back to 16px to match
    the rest of the picker rules until the bundle config has loaded. */
 [data-modal-overlay] {
-  --lb-picker-radius-sm: max(0px, calc(var(--lb-picker-radius, 16px) - 4px));
+  --lb-picker-radius-sm: calc(var(--lb-picker-radius, 16px) * 2 / 3);
 }
 
 /* === Modal overlay ===================================================== */
@@ -700,7 +700,7 @@
   border: none;
   cursor: pointer;
   color: var(--lb-picker-text, var(--lb-text, var(--lb-primary-color)));
-  border-radius: 8px;
+  border-radius: var(--lb-picker-radius-sm);
   padding: 0;
   margin: -12px -12px 0 0;
 }
@@ -723,7 +723,9 @@
 .lb-mix-match__filter {
   padding: 6px 14px;
   border: var(--lb-picker-border-width, 0px) solid var(--lb-picker-border-color, var(--lb-border-color));
-  border-radius: 999px;
+  /* Pills follow the merchant's picker radius (parity with the theme widget) —
+     a fixed 999px read as a stray rounded shape at None or Subtle. */
+  border-radius: var(--lb-picker-radius-sm);
   background: transparent;
   color: var(--lb-picker-text, var(--lb-text, var(--lb-primary-color)));
   font-family: inherit;
@@ -770,7 +772,7 @@
   width: 100%;
   padding: 12px 40px 12px 44px;
   border: var(--lb-picker-border-width, 0px) solid var(--lb-picker-border-color, var(--lb-border-color));
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius, 16px);
   font-size: 16px;
   line-height: 20px;
   color: var(--lb-picker-text, var(--lb-text, var(--lb-primary-color)));
@@ -848,7 +850,7 @@
   width: 100%;
   aspect-ratio: var(--lb-picker-thumbnail-aspect-ratio, 1 / 1);
   /* Thumbnails carry only the picker corner radius — no border. */
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius, 16px);
   box-sizing: border-box;
   overflow: hidden;
   background: var(--lb-thumbnail-bg, transparent);
@@ -859,7 +861,7 @@
   width: 100%;
   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, 16px);
   display: block;
 }
 
@@ -918,7 +920,7 @@
   width: 100%;
   flex-shrink: 0;
   border: var(--lb-picker-border-width, 0px) solid var(--lb-picker-border-color, var(--lb-border-color));
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius, 16px);
   background-color: var(--lb-picker-bg, var(--lb-bg, var(--lb-background)));
   overflow: hidden;
   box-sizing: border-box;
@@ -987,7 +989,7 @@
   background: var(--lb-picker-add-bg, var(--lb-primary-color));
   color: var(--lb-picker-add-label, #fff);
   border: var(--lb-picker-add-border-width, 0px) solid var(--lb-picker-add-border-color, var(--lb-primary-color));
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius, 16px);
   box-sizing: border-box;
   font-family: inherit;
   font-size: 12px;
@@ -1111,7 +1113,7 @@
   background: var(--lb-picker-add-bg, var(--lb-primary-color));
   color: var(--lb-picker-add-label, #fff);
   border: var(--lb-picker-add-border-width, 0px) solid var(--lb-picker-add-border-color, var(--lb-primary-color));
-  border-radius: var(--lb-picker-radius-sm);
+  border-radius: var(--lb-picker-radius, 16px);
   box-sizing: border-box;
   font-family: inherit;
   font-size: 14px;
@@ -1158,7 +1160,10 @@
   .lb-mix-match__modal {
     max-width: 100%;
     max-height: 90vh;
-    border-radius: 16px 16px 0 0;
+    /* Bottom sheet: only the top corners round, but to whatever the merchant
+       picked rather than a fixed 16px (parity with the theme widget). */
+    border-radius: var(--lb-picker-radius, 16px) var(--lb-picker-radius, 16px) 0
+      0;
     transform: translateY(100%);
   }
 
@@ -1589,7 +1594,7 @@
   gap: 8px;
   width: 100%;
   border: var(--lb-border-width, 1px) solid var(--lb-border, var(--lb-border-color));
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   padding: 8px 12px;
   font-size: 12px;
   line-height: 16px;
@@ -1647,7 +1652,7 @@
   background: var(--lb-bg, var(--lb-background));
   color: var(--lb-text, var(--lb-primary-color));
   border: var(--lb-border-width, 1px) solid var(--lb-border, var(--lb-border-color));
-  border-radius: var(--lb-radius-sm);
+  border-radius: var(--lb-radius, var(--lb-border-radius));
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   overflow-y: auto;
   overflow-x: hidden;
@@ -1696,6 +1701,15 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--lb-text, var(--lb-primary-color));
+  /* 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. */
+  border-radius: var(--lb-radius-sm);
+}
+
+/* Inside the picker modal the option follows the picker preset, like the
+   trigger and listbox around it. */
+.lb-mix-match__modal-overlay .lb-dropdown-option {
+  border-radius: var(--lb-picker-radius-sm);
 }
 
 .lb-dropdown-option[aria-selected="true"] {
@@ -1880,6 +1894,8 @@
   cursor: pointer;
   box-sizing: border-box;
   transition: background-color 0.25s ease;
+  /* The hover tint below is a filled shape, so it needs the widget's radius
+     the same way the focus ring does. */
 }
 
 .lb-multi-step__step-row:hover {
@@ -2019,7 +2035,7 @@
   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;
@@ -2037,3 +2053,105 @@
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
 }
+
+/* ── Step-change transition ────────────────────────────────────
+   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 — 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 — 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" — 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 — 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 — 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;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lime-bundles/react",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "React components and hooks for the Lime Bundles Shopify app. Use on Hydrogen, Next.js, Vite, or any React-based headless storefront.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,7 +52,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@lime-bundles/core": "^7.3.0"
+    "@lime-bundles/core": "^7.4.0"
   },
   "devDependencies": {
     "@shopify/hydrogen-react": "^2026.4.1",