@syntrologie/adapt-product 2.56.0 → 2.57.0

package/dist/{chunk-QNZXBFP5.js → chunk-YEW72FVW.js}

@@ -1,4 +1,5 @@
 import {
+  IMAGE_STANDIN_BACKGROUND,
   VISIBLE_FACT_KEYS,
   ViewportClassController,
   __privateAdd,
@@ -14,10 +15,11 @@ import {
   gridSchema,
   heroSchema,
   recoSchema,
+  standinInitial,
   stripMountPlumbing,
   takeoverPlanSchema,
   watchLivePrice
-} from "./chunk-RUE5UUEN.js";
+} from "./chunk-E2PP64GL.js";
 
 // src/presets-store.ts
 function presetsWindow() {
@@ -4897,9 +4899,8 @@ function sanitizeProductDescription(html32) {
 
 // src/widgets/imageStandin.ts
 import { html as html7 } from "lit";
-var IMAGE_STANDIN_BACKGROUND = "linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22)), var(--sc-color-primary, #3a3a3a)";
 function standinMonogram(name) {
-  const initial = ([...name.trim()][0] ?? "?").toUpperCase();
+  const initial = standinInitial(name) ?? "?";
   return html7`<span
     data-standin-monogram
     style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 2.4rem/1 var(--sc-font-family, inherit);color:var(--sc-launcher-color, #ffffff);opacity:0.85;letter-spacing:0.02em;user-select:none;"
@@ -7800,20 +7801,31 @@ var ProductRecoCarouselLit = class extends LitElement13 {
     return html14`
       <section class="sc-reco" style="box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:2px var(--sc-reco-inset,12px) var(--sc-reco-inset,12px);">
         <div class="sc-reco__carousel" role="list" style="display:flex;align-items:stretch;gap:8px;flex:1 1 auto;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;">
-          ${items.map(
-      (it) => html14`
+          ${items.map((it) => {
+      const shownPrice = it.product_id && this._live[it.product_id] || it.price;
+      const label = [it.name, shownPrice, it.hook].filter(Boolean).join(", ");
+      return html14`
             <div role="listitem" style="display:contents;">
               <a data-reco-item data-product-cta="primary" href=${it.pdp_href}
+                 aria-label=${label || nothing9}
                  style=${styleMap2({ position: "relative", flex: "0 0 auto", aspectRatio: "4 / 5", minHeight: "var(--sc-reco-item-min-h, 162px)", maxHeight: "var(--sc-reco-item-max-h, 340px)", borderRadius: "12px", overflow: "hidden", scrollSnapAlign: "start", textDecoration: "none", display: "block", background: "#e5e7eb" })}>
-                ${it.image_url ? html14`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : nothing9}
+                ${it.image_url ? html14`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : (
+        // No photo from the store: the same branded stand-in the
+        // card and comparison paint (imageStandin.ts), never a
+        // flat grey box. Decorative: the product name is shown as
+        // text below it. Nothing to name it by -> no monogram (a
+        // '?' reads as broken).
+        html14`<div data-product-image-standin aria-hidden="true" style="position:absolute;inset:0;background:${IMAGE_STANDIN_BACKGROUND};">${it.name || it.hook ? standinMonogram(it.name || it.hook) : nothing9}</div>`
+      )}
                 <span style="position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(0,0,0,.62));"></span>
                 <span style="position:absolute;left:8px;right:8px;bottom:8px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);">
-                  ${it.product_id && this._live[it.product_id] || it.price ? html14`<span style="display:block;font-weight:700;font-size:0.9rem;">${it.product_id && this._live[it.product_id] || it.price}</span>` : nothing9}
+                  ${!it.image_url && it.name ? html14`<span data-reco-name style="display:block;font-weight:700;font-size:0.82rem;line-height:1.2;margin-bottom:2px;">${it.name}</span>` : nothing9}
+                  ${shownPrice ? html14`<span style="display:block;font-weight:700;font-size:0.9rem;">${shownPrice}</span>` : nothing9}
                   ${it.hook ? html14`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing9}
                 </span>
               </a>
-            </div>`
-    )}
+            </div>`;
+    })}
         </div>
       </section>`;
   }
@@ -12044,4 +12056,4 @@ export {
   runtime,
   runtime_default
 };
-//# sourceMappingURL=chunk-QNZXBFP5.js.map
+//# sourceMappingURL=chunk-YEW72FVW.js.map