@akinon/pz-theme 2.0.37-beta.0 → 2.0.37

package/src/blocks/__tests__/variant-selector-golden.json

@@ -0,0 +1,20 @@
+{
+  "defaults": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "defaults-designer": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "dropdown": "<div data-variant-selector=\"\" data-variant-layout=\"dropdown\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><select data-variant-dropdown=\"\" data-part=\"dropdown\" aria-label=\"Color\" style=\"width: 100%; padding: 8px 10px; background: transparent;\"><option value=\"/p/blue\">Blue</option><option value=\"/p/red\">Red</option></select></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><select data-variant-dropdown=\"\" data-part=\"dropdown\" aria-label=\"Size\" style=\"width: 100%; padding: 8px 10px; background: transparent;\"><option value=\"/p/s\">S</option><option value=\"/p/m\">M</option><option value=\"/p/l\" disabled=\"\">L</option><option value=\"\" disabled=\"\">XL</option></select></div></div>",
+  "diagonal": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">L<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"></line></svg></span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">XL<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"></line></svg></span></div></div></div>",
+  "diagonal-w3": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">L<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"3\" vector-effect=\"non-scaling-stroke\"></line></svg></span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">XL<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"3\" vector-effect=\"non-scaling-stroke\"></line></svg></span></div></div></div>",
+  "nomark": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "lowstock": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer; position: relative;\">Red<span data-part=\"low-stock\" role=\"img\" aria-label=\"Low stock\" style=\"position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;\"></span></a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer; position: relative;\">M<span data-part=\"low-stock\" role=\"img\" aria-label=\"Low stock\" style=\"position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;\"></span></a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "lowstock-label": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer; position: relative;\">Red<span data-part=\"low-stock\" role=\"img\" aria-label=\"Few left\" style=\"position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;\"></span></a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer; position: relative;\">M<span data-part=\"low-stock\" role=\"img\" aria-label=\"Few left\" style=\"position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;\"></span></a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "chip": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-variant-group-layout=\"chip\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" aria-label=\"Blue\" title=\"Blue\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\"><span data-part=\"swatch\" style=\"display: block; width: 32px; height: 32px; background: rgb(0, 0, 255);\"></span></a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "chip-image": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-variant-group-layout=\"chip\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "text-layout": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-variant-group-layout=\"text\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; text-decoration: underline; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "group-dropdown": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-variant-group-layout=\"dropdown\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><select data-variant-dropdown=\"\" data-part=\"dropdown\" aria-label=\"Size\" style=\"width: 100%; padding: 8px 10px; background: transparent;\"><option value=\"/p/s\">S</option><option value=\"/p/m\">M</option><option value=\"/p/l\" disabled=\"\">L</option><option value=\"\" disabled=\"\">XL</option></select></div></div>",
+  "selected-value": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color: <span data-variant-selected-value=\"\" data-part=\"selected-value\" style=\"opacity: 1;\">Blue</span></span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size: <span data-variant-selected-value=\"\" data-part=\"selected-value\" style=\"opacity: 1;\">M</span></span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "selected-sep": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color - <span data-variant-selected-value=\"\" data-part=\"selected-value\" style=\"opacity: 1;\">Blue</span></span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size - <span data-variant-selected-value=\"\" data-part=\"selected-value\" style=\"opacity: 1;\">M</span></span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "no-label": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "gaps": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 4px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 20px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Blue</a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 20px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "swatchsize": "<div data-variant-selector=\"\" data-variant-layout=\"swatch\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-variant-group-layout=\"chip\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/blue\" data-variant-option=\"selected\" aria-current=\"true\" aria-label=\"Blue\" title=\"Blue\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\"><span data-part=\"swatch\" style=\"display: block; width: 48px; height: 48px; background: rgb(0, 0, 255);\"></span></a><a href=\"/p/red\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; padding: 2px; text-decoration: none; opacity: 1; cursor: pointer;\">Red</a></div></div><div data-variant-group=\"size\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">M</a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">L</span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: line-through; opacity: 0.4; cursor: not-allowed;\">XL</span></div></div></div>",
+  "combo": "<div data-variant-selector=\"\" data-variant-layout=\"dropdown\" style=\"display: flex; flex-direction: column; gap: 16px; width: 100%;\"><div data-variant-group=\"color\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Color</span><select data-variant-dropdown=\"\" data-part=\"dropdown\" aria-label=\"Color\" style=\"width: 100%; padding: 8px 10px; background: transparent;\"><option value=\"/p/blue\">Blue</option><option value=\"/p/red\">Red</option></select></div><div data-variant-group=\"size\" data-variant-group-layout=\"box\" data-part=\"group\"><span data-variant-group-label=\"\" data-part=\"label\" style=\"display: block; margin-bottom: 6px; font-size: 0.85em; opacity: 0.75;\">Size</span><div data-part=\"option-list\" style=\"display: flex; flex-wrap: wrap; gap: 8px;\"><a href=\"/p/s\" data-variant-option=\"default\" aria-current=\"false\" data-part=\"option\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer;\">S</a><a href=\"/p/m\" data-variant-option=\"selected\" aria-current=\"true\" data-part=\"option\" data-state=\"selected\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 1; cursor: pointer; position: relative;\">M<span data-part=\"low-stock\" role=\"img\" aria-label=\"Low stock\" style=\"position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;\"></span></a><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">L<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"></line></svg></span><span data-variant-option=\"disabled\" aria-disabled=\"true\" data-part=\"option\" data-state=\"disabled\" style=\"display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; text-decoration: none; opacity: 0.4; cursor: not-allowed; position: relative;\">XL<svg data-part=\"strike\" aria-hidden=\"true\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;\"><line x1=\"0\" y1=\"100\" x2=\"100\" y2=\"0\" stroke=\"currentColor\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"></line></svg></span></div></div></div>"
+}

package/src/blocks/account-menu-block.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { usePathname } from 'next/navigation';
+import { signOut } from 'next-auth/react';
+import { useLogoutMutation } from '@akinon/next/data/client/user';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * The order the menu has always shipped in. Also the fallback when the order
+ * property is blank, so clearing the field cannot empty the menu.
+ */
+const DEFAULT_ITEM_ORDER = [
+  'orders',
+  'addresses',
+  'profile',
+  'favourites',
+  'coupons'
+];
+
+/**
+ * Functional account block: account area navigation.
+ *
+ * Account routes are brand-defined (@theme/routes), and pz-theme cannot
+ * import the brand alias, so every target is an editor property. The
+ * defaults are the conventional '/account/...' paths — brands whose ROUTES
+ * differ (superstep uses '/users/orders' for orders) override them here.
+ * Properties: showLogout, itemOrder, orientation, activeMatch, emptyLabel,
+ * ordersHref, addressesHref, profileHref, favouritesHref, couponsHref,
+ * logoutLabel and the matching *Label keys.
+ * Parts: menu, item (selected), logout, empty.
+ */
+const AccountMenuBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) => {
+    const raw = getResponsiveValue(
+      block.properties?.[key],
+      currentBreakpoint,
+      fallback
+    );
+
+    if (typeof raw === 'boolean') return raw;
+
+    return String(raw) === 'true';
+  };
+
+  const showLogout = boolProp('showLogout', true);
+  const orientation =
+    prop('orientation', 'vertical') === 'horizontal' ? 'horizontal' : 'vertical';
+  const activeMatch =
+    prop('activeMatch', 'exact') === 'startsWith' ? 'startsWith' : 'exact';
+  const emptyLabel = prop('emptyLabel', '');
+
+  const pathname = usePathname();
+  const [logout, { isLoading: isLoggingOut }] = useLogoutMutation();
+
+  const definitions: Record<
+    string,
+    { key: string; href: string; label: string }
+  > = {
+    orders: {
+      key: 'orders',
+      href: prop('ordersHref', '/account/orders'),
+      label: prop('ordersLabel', 'Orders')
+    },
+    addresses: {
+      key: 'addresses',
+      href: prop('addressesHref', '/account/address'),
+      label: prop('addressesLabel', 'Addresses')
+    },
+    profile: {
+      key: 'profile',
+      href: prop('profileHref', '/account/profile'),
+      label: prop('profileLabel', 'Profile')
+    },
+    favourites: {
+      key: 'favourites',
+      href: prop('favouritesHref', '/account/favourite-products'),
+      label: prop('favouritesLabel', 'Favourites')
+    },
+    coupons: {
+      key: 'coupons',
+      href: prop('couponsHref', '/account/coupons'),
+      label: prop('couponsLabel', 'Coupons')
+    }
+  };
+
+  const requestedOrder = prop('itemOrder', DEFAULT_ITEM_ORDER.join(','))
+    .split(',')
+    .map((key) => key.trim())
+    .filter(Boolean);
+  // A repeated key would render the same route twice and collide on the React
+  // key, so the list is de-duplicated before it is resolved.
+  const resolvedOrder = Array.from(
+    new Set(requestedOrder.length > 0 ? requestedOrder : DEFAULT_ITEM_ORDER)
+  );
+
+  const items = resolvedOrder
+    .map((key) => definitions[key])
+    .filter((item) => Boolean(item?.href) && Boolean(item?.label));
+
+  const isActive = (href: string) => {
+    if (!pathname || !href) return false;
+    if (activeMatch === 'startsWith') {
+      return (
+        pathname === href || pathname.startsWith(`${href.replace(/\/$/, '')}/`)
+      );
+    }
+
+    return pathname === href;
+  };
+
+  const handleLogout = async () => {
+    if (isDesigner) return;
+
+    // The commerce session must be dropped before the next-auth session,
+    // otherwise next-auth can immediately re-authenticate from osessionid.
+    try {
+      await logout().unwrap();
+    } catch {
+      // A failed commerce logout must not trap the user in a signed-in state.
+    }
+
+    signOut({ callbackUrl: prop('logoutRedirect', '/') });
+  };
+
+  if (items.length === 0 && !showLogout) {
+    if (isDesigner) {
+      return (
+        <div
+          data-account-menu=""
+          data-account-menu-state="empty"
+          {...partAttrs('empty', { empty: true })}
+        >
+          {emptyLabel || 'Account menu (no items)'}
+        </div>
+      );
+    }
+
+    // Without an empty message the block stays absent, which is what every
+    // published composition renders today.
+    if (!emptyLabel) return null;
+
+    return (
+      <div
+        data-account-menu=""
+        data-account-menu-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  // Navigating inside the designer iframe would drop the author out of the
+  // page they are editing, so the menu links are inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const linkStyle = (active: boolean): React.CSSProperties => ({
+    display: 'block',
+    padding: '8px 0',
+    color: 'inherit',
+    textDecoration: 'none',
+    fontWeight: active ? 600 : 400
+  });
+
+  // Both spellings of each field are published so a designer can bind either
+  // the generic name a text/link block defaults to (`item.url`) or the one the
+  // menu itself uses (`item.href`).
+  const itemRows = items.map((item) => ({
+    key: item.key,
+    name: item.label,
+    label: item.label,
+    href: item.href,
+    url: item.href,
+    active: isActive(item.href)
+  }));
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per menu entry; otherwise the built-in link renders unchanged.
+  const customItems = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={itemRows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      designerPlaceholderCount={items.length || 5}
+    />
+  ) : null;
+
+  return (
+    <nav
+      data-account-menu=""
+      data-account-menu-orientation={orientation}
+      {...partAttrs('menu')}
+      style={{
+        display: 'flex',
+        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+        ...(orientation === 'horizontal' ? { flexWrap: 'wrap' } : null),
+        gap: 'var(--account-menu-gap, 4px)'
+      }}
+    >
+      {customItems ??
+        items.map((item) => {
+          const active = isActive(item.href);
+
+          return (
+            <NextLink
+              key={item.key}
+              href={isDesigner ? '#' : item.href}
+              onClick={guard}
+              data-account-menu-item={item.key}
+              aria-current={active ? 'page' : undefined}
+              {...partAttrs('item', { selected: active })}
+              style={linkStyle(active)}
+            >
+              {item.label}
+            </NextLink>
+          );
+        })}
+
+      {showLogout && (
+        <button
+          type="button"
+          data-account-menu-item="logout"
+          disabled={isLoggingOut}
+          onClick={handleLogout}
+          {...partAttrs('logout', { loading: isLoggingOut })}
+          style={{
+            ...linkStyle(false),
+            textAlign: 'left',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            font: 'inherit'
+          }}
+        >
+          {prop('logoutLabel', 'Log out')}
+        </button>
+      )}
+    </nav>
+  );
+};
+
+export default AccountMenuBlock;