@lime-bundles/react 7.0.0 → 7.2.0

package/dist/styles.css

@@ -1827,7 +1827,7 @@
 .lb-multi-step__groups {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
 }
 
 .lb-multi-step__group {
@@ -1836,6 +1836,116 @@
   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 — React renders only the active representation, so these
+   are inert here; carried verbatim for theme parity (react-css-drift). */
+.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 — 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 — 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 — the single wizard entry point, reusing the dashed
+   add-product recipe with a two-line label. It renders directly above
+   the first unsatisfied step and disappears once every step is met. The
+   add-product recipe's own margin-top is for its mix & match position;
+   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 — 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. */
 .lb-multi-step__group-heading {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lime-bundles/react",
-  "version": "7.0.0",
+  "version": "7.2.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.0.0"
+    "@lime-bundles/core": "^7.2.0"
   },
   "devDependencies": {
     "@shopify/hydrogen-react": "^2026.4.1",