@lime-bundles/react 6.2.0 → 7.0.0

package/dist/styles.css

@@ -997,7 +997,7 @@
   max-height: 32px;
 }
 
-.lb-mix-match__modal-add:hover {
+.lb-mix-match__modal-add:hover:not(:disabled) {
   opacity: 0.9;
 }
 
@@ -1099,7 +1099,14 @@
   color: color-mix(in srgb, var(--lb-picker-text, var(--lb-text, var(--lb-primary-color))) 70%, transparent);
 }
 
+/* The flex centring + min-height pin the footer-button silhouette: the wizard
+   Back copies these metrics so the pair stays equal-height whatever border
+   widths the merchant's picker tokens set. */
 .lb-mix-match__modal-done {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
   padding: 10px 24px;
   background: var(--lb-picker-add-bg, var(--lb-primary-color));
   color: var(--lb-picker-add-label, #fff);
@@ -1112,10 +1119,19 @@
   cursor: pointer;
 }
 
-.lb-mix-match__modal-done:hover {
+.lb-mix-match__modal-done:hover:not(:disabled) {
   opacity: 0.9;
 }
 
+/* Disabled Next/Done (wizard step minimum not met) — same washed-out
+   treatment as a disabled row Add, no hover reaction; the solid button
+   returns the moment the requirement is met. */
+.lb-mix-match__modal-done:disabled {
+  background: color-mix(in srgb, var(--lb-picker-add-bg, var(--lb-primary-color)) 35%, var(--lb-picker-bg, var(--lb-bg, var(--lb-background))));
+  color: color-mix(in srgb, var(--lb-picker-add-label, #fff) 85%, transparent);
+  cursor: not-allowed;
+}
+
 .lb-mix-match__modal-done:focus-visible {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
@@ -1285,6 +1301,13 @@
   border-width: 2px;
 }
 
+/* Tier the selected variant can't cover — same greyed treatment as an
+   out-of-stock product row, and not selectable. */
+.lb-bundle__tier--oos {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .lb-bundle__tier-radio {
   width: 20px;
   height: 20px;
@@ -1879,11 +1902,16 @@
 }
 
 .lb-multi-step__modal-back {
-  padding: 10px 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 10px 24px;
   background: none;
-  border: var(--lb-border-width) solid var(--lb-border-color);
-  border-radius: var(--lb-radius-sm);
-  color: var(--lb-text);
+  border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
+  border-radius: var(--lb-picker-radius-sm);
+  box-sizing: border-box;
+  color: var(--lb-picker-text);
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
@@ -1892,7 +1920,7 @@
 }
 
 .lb-multi-step__modal-back:hover {
-  background: color-mix(in srgb, var(--lb-text) 5%, transparent);
+  background: color-mix(in srgb, var(--lb-picker-text) 5%, transparent);
 }
 
 .lb-multi-step__modal-back:focus-visible {

package/package.json

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