@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.62

package/dist/product-highlights.scss

@@ -10,8 +10,12 @@
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
@@ -20,32 +24,27 @@
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       // height: 100%;
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
     &[data-overflow-items="Scroll"] {
       .horizontal {
         width: 100%;
         overflow-x: auto;
-
         .item {
           width: 100%;
           flex-shrink: 0;
         }
       }
-
       .vertical {
         overflow-y: auto;
         max-height: 30%;
       }
     }
-
     .text-element {
       color: #333;
       font-size: 12px;
@@ -54,30 +53,49 @@
       line-height: 18px;
       margin-bottom: 6px;
     }
-
     .highlights__container {
-      background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
-          var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
-
-      border-color: var(--_ctm-mob-dn-wt-se-br-cr,
-          var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
-
-      border-style: var(--_ctm-mob-dn-wt-se-br-se,
-          var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
-
-      border-width: var(--_ctm-mob-dn-wt-se-br-wh,
-          var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
-
-      border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
-          var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
-
-      box-shadow: var(--_show-shadow,
-          var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
+      background-color: var(
+        --_ctm-mob-dn-wt-se-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
+      );
 
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-
-      .stacK {
+      // Must stay lowercase to match `<div className="stack">` in the ProductHighlights
+      // element. Class selectors are case-sensitive in standards mode, so the old `.stacK`
+      // matched nothing on the storefront and took this whole block down with it.
+      // The renderer emits `class="stack"`. This block used to read `.stacK`, so every
+      // rule under it — the item box (Item Style fill/border/radius/shadow), the title
+      // typography and the horizontal/vertical/grid layouts — never matched anything.
+      .stack {
         display: flex;
         flex-direction: column;
         gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);
@@ -87,78 +105,105 @@
           height: prepareMediaVariable(--_ctm-lt-im-ht);
           padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
 
-          background-color: var(--_ctm-mob-dn-im-se-bd-cr,
-              var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
-
-          border-color: var(--_ctm-mob-dn-im-se-br-cr,
-              var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
-
-          border-style: var(--_ctm-mob-dn-im-se-br-se,
-              var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
-
-          border-width: var(--_ctm-mob-dn-im-se-br-wh,
-              var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
-
-          border-radius: var(--_ctm-mob-dn-im-se-br-rs,
-              var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
-
-          box-shadow: var(--_show-shadow,
-              var(--_ctm-mob-dn-im-se-sw-ae,
-                var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br,
-                var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd,
-                var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr,
-                var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
+          background-color: var(
+            --_ctm-mob-dn-im-se-bd-cr,
+            var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+          );
+
+          border-color: var(
+            --_ctm-mob-dn-im-se-br-cr,
+            var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+          );
+
+          border-style: var(
+            --_ctm-mob-dn-im-se-br-se,
+            var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+          );
+
+          border-width: var(
+            --_ctm-mob-dn-im-se-br-wh,
+            var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+          );
+
+          border-radius: var(
+            --_ctm-mob-dn-im-se-br-rs,
+            var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+          );
+
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_ctm-mob-dn-im-se-sw-ae,
+                var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-im-se-sw-br,
+                var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-im-se-sw-sd,
+                var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-im-se-sw-cr,
+                var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
+              )
+          );
 
           position: relative;
-
           img {
             object-fit: cover;
             height: 100%;
             width: 100%;
+            // Item Style > Border Radius rounds the item box, but the image is painted
+            // over its corners. `overflow: hidden` on the item would clip it, except the
+            // divider ::before sits outside the box (see dividerGapOffset) and would go
+            // with it — so round the image itself instead.
+            border-radius: inherit;
           }
         }
-
         .items__container {
           &[data-show-divider="true"] {
             &[data-flex-direction="row"] {
-
               // The divider is a pseudo-element and takes no space of its own, so a thick
               // one grew back over the item beside it — see dividerGapReserve in functions.scss.
               .item:not(:last-child) {
                 @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
               }
-
               .item:not(:last-child)::before {
                 content: "";
                 position: absolute;
                 top: 0;
-                bottom: 0;
-                /* For full height divider */
+                bottom: 0; /* For full height divider */
                 right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                width: var(--_ctm-mob-dn-wt-se-dr-wt,
-                    var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
-                /* Divider thickness */
-                background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
-                    var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
-                /* Divider color */
+                width: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                ); /* Divider thickness */
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                ); /* Divider color */
               }
             }
-
             &[data-flex-direction="column"] {
               .item:not(:last-child) {
                 @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
               }
-
               .item:not(:last-child)::before {
                 content: "";
                 position: absolute;
                 left: 0;
                 right: 0;
                 bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                height: var(--_ctm-mob-dn-wt-se-dr-wt,
-                    var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
-                background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
-                    var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
+                height: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                );
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                );
               }
             }
           }
@@ -166,35 +211,70 @@
 
         .title {
           color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
-          font-family: var(--_ctm-mob-dn-wt-se-ft-fy,
-              var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy)));
-          text-transform: var(--_ctm-mob-dn-wt-se-tt-tm,
-              var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm)));
-          word-wrap: var(--_ctm-mob-dn-wt-se-wd-wp,
-              var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp)));
-          word-break: var(--_ctm-mob-dn-wt-se-wd-bk,
-              var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk)));
-          font-size: var(--_ctm-mob-dn-wt-se-ft-se,
-              var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se)));
-          font-weight: var(--_ctm-mob-dn-wt-se-ft-wt,
-              var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt)));
-          font-style: var(--_ctm-mob-dn-wt-se-ft-se-ic,
-              var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic)));
-          text-align: var(--_ctm-mob-dn-wt-se-tt-an,
-              var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an)));
-          letter-spacing: var(--_ctm-mob-dn-wt-se-lr-sg,
-              var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg)));
-          line-height: var(--_ctm-mob-dn-wt-se-le-ht,
-              var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht)));
-          text-decoration: var(--_ctm-mob-dn-wt-se-ue,
-              var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue)));
+          font-family: var(
+            --_ctm-mob-dn-wt-se-ft-fy,
+            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-wt-se-tt-tm,
+            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-wt-se-wd-wp,
+            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-wt-se-wd-bk,
+            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
+          );
+          font-size: var(
+            --_ctm-mob-dn-wt-se-ft-se,
+            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-wt-se-ft-wt,
+            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-wt-se-ft-se-ic,
+            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-wt-se-tt-an,
+            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-wt-se-lr-sg,
+            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
+          );
+          // Line box guard. The line-height control stores a fixed length (its default is
+          // 1rem), so it does not grow with the font size — at a large size the glyphs
+          // end up taller than their own line box and look cut off. max(..., 1em) keeps
+          // the box at least as tall as the text while still honouring a larger value.
+          line-height: max(
+            var(
+              --_ctm-mob-dn-wt-se-le-ht,
+              var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))
+            ),
+            1em
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-wt-se-ue,
+            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
+          );
           padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
-        }
 
+          // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as
+          // a variable — the renderer adds `.flex__overflow` and publishes the line count
+          // as `--_sf-line-clamp`.
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+        }
         .horizontal {
           display: flex;
           gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-
           .item {
             flex-shrink: 0;
           }
@@ -202,12 +282,10 @@
           &[data-overflow-items="Wrap"] {
             flex-wrap: wrap;
           }
-
           &[data-overflow-items="Scroll"] {
             width: 100%;
             overflow-x: auto;
           }
-
           &[data-overflow-items="Hidden"] {
             overflow-x: hidden;
           }
@@ -215,16 +293,13 @@
           &[items-content-alignement="right"] {
             justify-content: flex-end;
           }
-
           &[items-content-alignement="left"] {
             justify-content: flex-start;
           }
-
           &[items-content-alignement="center"] {
             justify-content: center;
           }
         }
-
         .vertical {
           display: flex;
           flex-direction: column;
@@ -235,7 +310,6 @@
           &[data-overflow-items="Scroll"] {
             overflow-y: auto;
           }
-
           &[data-overflow-items="Hidden"] {
             overflow-y: hidden;
           }
@@ -243,34 +317,29 @@
           &[items-content-alignement="right"] {
             align-items: flex-end;
           }
-
           &[items-content-alignement="left"] {
             align-items: flex-start;
           }
-
           &[items-content-alignement="center"] {
             align-items: center;
           }
         }
-
         .grid {
           display: grid;
           grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
-          grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-              minmax(auto, 1fr));
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+            minmax(auto, 1fr)
+          );
           gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
           max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-
           &[data-overflow-items="Scroll"] {
             overflow-y: auto;
           }
-
           &[data-overflow-items="Hidden"] {
             overflow-y: hidden;
           }
-
           margin: 0px;
-
           .item {
             width: auto;
           }
@@ -278,4 +347,4 @@
       }
     }
   }
-}
+}