@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.61

package/dist/prefix-list.scss

@@ -1,86 +1,86 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./functions.scss" as *;
-
-$dataElementType: "data-element-type";
-$elementSelector: "[data-div-type='element']";
-$dataLayerElementType: "data-layer-element-type";
-
-$prefixList: (
-  section: sec,
-  grid: gri,
-  container: con,
-  stack: sta,
-  repeater: rep,
-  repeater-item: repe,
-  product: pro,
-  category: cat,
-  categoryWidget: cate,
-  brand: bran,
-  subCategory: subc,
-  productDetails: prod,
-  categoryDetails: categ,
-  lightboxv2: lig,
-  layouter: lay,
-  layouter-item: layo,
-  layouter-pro: layou,
-  layouter-pro-item: layout,
-  tbs-v2: tbs,
-  tbsContainer: tbsco,
-  marchandiserSets: march,
-  buyForWithTabs: buy,
-  buyForTabsContainer: buyFo,
-  spotlight: spo,
-  categoryGroups: catego,
-  mega-menu: meg,
-  mgContainer: mgcon,
-  cartWrapper: cartw,
-);
-
-$VariableTypes: (
-  width: "lt-wh",
-  maxHeight: "lt-mx-ht",
-  transform: "trsnf-vl",
-);
-
-@function convertListToCommaSeparateString($list) {
-  $items: ();
-  @each $key, $value in $list {
-    $sl: "[#{$dataElementType}=#{$key}]";
-    $items: list.append($items, $sl, comma);
-  }
-
-  @return $items;
-}
-
-@function convertIntoActualVariable($prefix, $type) {
-  // $types: (
-  //   width: "lt-wh",
-  //   maxHeight: "lt-mx-ht",
-  //   transform: "trsnf-vl",
-  // );
-  $suffix: map.get($VariableTypes, $type);
-  @return --_ctm-#{$prefix}-#{$suffix};
-}
-
-@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
-  $selector: "";
-  @if ($isLayer == false) {
-    $selector: $dataElementType;
-  } @else {
-    $selector: $dataLayerElementType;
-  }
-  @each $key, $value in $prefixList {
-    &[#{$selector}="#{$key}"] {
-      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
-    }
-  }
-  @if ($type != maxHeight) {
-    &#{$elementSelector} {
-      &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
-        #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+
+$dataElementType: "data-element-type";
+$elementSelector: "[data-div-type='element']";
+$dataLayerElementType: "data-layer-element-type";
+
+$prefixList: (
+  section: sec,
+  grid: gri,
+  container: con,
+  stack: sta,
+  repeater: rep,
+  repeater-item: repe,
+  product: pro,
+  category: cat,
+  categoryWidget: cate,
+  brand: bran,
+  subCategory: subc,
+  productDetails: prod,
+  categoryDetails: categ,
+  lightboxv2: lig,
+  layouter: lay,
+  layouter-item: layo,
+  layouter-pro: layou,
+  layouter-pro-item: layout,
+  tbs-v2: tbs,
+  tbsContainer: tbsco,
+  marchandiserSets: march,
+  buyForWithTabs: buy,
+  buyForTabsContainer: buyFo,
+  spotlight: spo,
+  categoryGroups: catego,
+  mega-menu: meg,
+  mgContainer: mgcon,
+  cartWrapper: cartw,
+);
+
+$VariableTypes: (
+  width: "lt-wh",
+  maxHeight: "lt-mx-ht",
+  transform: "trsnf-vl",
+);
+
+@function convertListToCommaSeparateString($list) {
+  $items: ();
+  @each $key, $value in $list {
+    $sl: "[#{$dataElementType}=#{$key}]";
+    $items: list.append($items, $sl, comma);
+  }
+
+  @return $items;
+}
+
+@function convertIntoActualVariable($prefix, $type) {
+  // $types: (
+  //   width: "lt-wh",
+  //   maxHeight: "lt-mx-ht",
+  //   transform: "trsnf-vl",
+  // );
+  $suffix: map.get($VariableTypes, $type);
+  @return --_ctm-#{$prefix}-#{$suffix};
+}
+
+@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
+  $selector: "";
+  @if ($isLayer == false) {
+    $selector: $dataElementType;
+  } @else {
+    $selector: $dataLayerElementType;
+  }
+  @each $key, $value in $prefixList {
+    &[#{$selector}="#{$key}"] {
+      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
+    }
+  }
+  @if ($type != maxHeight) {
+    &#{$elementSelector} {
+      &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
+        #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
+      }
+    }
+  }
+}

package/dist/product-actions.scss

@@ -276,10 +276,7 @@
             color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr));
 
             font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-fy));
-            text-transform: var(
-              --_sf-hr-tt-tm,
-              prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-tm)
-            );
+            text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-tm));
             word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-wp));
             word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wd-bk));
             &.flex__overflow {
@@ -1240,10 +1237,7 @@
             color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr));
 
             font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-fy));
-            text-transform: var(
-              --_sf-hr-tt-tm,
-              prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-tm)
-            );
+            text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-tm));
             word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-wp));
             word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wd-bk));
             &.flex__overflow {
@@ -1513,7 +1507,10 @@
               --_sf-hr-tt-tm,
               prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-tm)
             );
-            word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-wp));
+            word-wrap: var(
+              --_sf-hr-wd-wp,
+              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-wp)
+            );
             word-break: var(
               --_sf-hr-wd-bk,
               prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wd-bk)

package/dist/product-highlights.scss

@@ -89,7 +89,13 @@
 
       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);
@@ -149,20 +155,27 @@
             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 */
-                right: calc(
-                  -1 *
-                    (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-                ); /* Half of your gap + 1px offset */
+                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))
@@ -174,15 +187,15 @@
               }
             }
             &[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: calc(
-                  -1 *
-                    (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-                );
+                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))
@@ -234,15 +247,30 @@
             --_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))
+          // 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;

package/dist/product-image-bundles.scss

@@ -204,35 +204,20 @@
 
     border-color: var(
       --_show-gy-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
-        var(
-          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
-          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr)
-        )
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr)))
     );
 
     border-style: var(
       --_show-gy-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
-        var(
-          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
-          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se)
-        )
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se)))
     );
 
     border-width: var(
       --_show-gy-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
-        var(
-          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
-          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh)
-        )
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh)))
     );
 
     border-radius: var(
@@ -1022,24 +1007,18 @@
 
     border-color: var(
       --_show-im-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-cr,
-        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-cr))
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-cr,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-cr)))
     );
     border-style: var(
       --_show-im-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-se,
-        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-se))
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-se,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-se)))
     );
     border-width: var(
       --_show-im-border,
-      var(
-        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-wh,
-        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-wh))
-      )
+      var(--_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-wh,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-wh)))
     );
     border-radius: var(
       --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-rs,