@sc-360-v2/storefront-cms-library 0.5.54 → 0.5.58

package/dist/scroll.scss

@@ -142,6 +142,20 @@ $max-items: 20;
             --_ctm-dn-i#{$i}-ue,
             #{prepareMediaVariable(--_ctm-dn-i1-ue)}
           );
+          // All three inherit, so setting them on the item is enough for the text node
+          // (and the `.scroll-item__text` span the clamp uses) to pick them up.
+          text-transform: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-tt-tm,
+            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
+          );
+          word-wrap: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-wd-wr,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
+          );
+          word-break: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-wd-bk,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
+          );
 
           .icon {
             svg {
@@ -158,6 +172,8 @@ $max-items: 20;
                   --_ctm-dn-i#{$i}-in-c1,
                   #{prepareMediaVariable(--_ctm-dn-i1-in-c1)}
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-i1-se-wh, 1.25);
               }
             }
           }
@@ -178,6 +194,41 @@ $max-items: 20;
         animation-direction: reverse;
       }
 
+      // Vertical scroll. The horizontal marquee translates on X and lays the items out
+      // in a row; both have to flip for a vertical run, so the two vertical directions
+      // share this block and only differ by `animation-direction` below.
+      &[data-scroll-direction="topToBottom"],
+      &[data-scroll-direction="bottomToTop"] {
+        // `nowrap` is what keeps the horizontal run on one line; it fights a column stack.
+        white-space: normal;
+
+        .scrolling {
+          flex-direction: column;
+          animation-name: marquee-vertical;
+          padding-right: 0;
+          padding-bottom: 10px;
+        }
+
+        // The container is sized with `min-height`, which is right for a row (content
+        // never exceeds it) but wrong for a column: the stack would simply grow the box,
+        // nothing would overflow, and the marquee would look frozen. Pin the height.
+        .scroll__container {
+          height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+          align-items: flex-start;
+        }
+      }
+
+      // `marquee-vertical` translates upward, which reads as bottom-to-top on screen —
+      // so that is the `normal` case and top-to-bottom is the reversed one. Same trick
+      // as the horizontal pair above.
+      &[data-scroll-direction="bottomToTop"] .scrolling {
+        animation-direction: normal;
+      }
+
+      &[data-scroll-direction="topToBottom"] .scrolling {
+        animation-direction: reverse;
+      }
+
       &[data-scroll-speed="0.5x"] .scrolling {
         animation-duration: 40s;
       }
@@ -261,6 +312,16 @@ $max-items: 20;
         animation-timing-function: linear;
       }
 
+      // Text Overflow. The item's text sits in its own span so the clamp gets a block
+      // box of its own — clamping `.scroll-item` itself would swap its `display: flex`
+      // for `-webkit-box` and break the icon/text row. `white-space` has to be reset
+      // because `.wrapper` sets `nowrap`, and a clamp on a non-wrapping node can only
+      // ever show one line.
+      .scroll-item__text.flex__overflow {
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        white-space: normal;
+      }
+
       .divider {
         background-color: var(
           --_ctm-mob-dn-dr-se-bd-cr,
@@ -305,6 +366,15 @@ $max-items: 20;
           transform: translateX(var(--_marquee-tx, -50%));
         }
       }
+
+      @keyframes marquee-vertical {
+        0% {
+          transform: translateY(0);
+        }
+        100% {
+          transform: translateY(var(--_marquee-ty, -50%));
+        }
+      }
     }
   }
 }

package/dist/search.scss

@@ -279,6 +279,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-se-wh, 1.25);
             }
           }
         }
@@ -521,6 +523,8 @@
               --_ctm-mob-dn-sh-in-in-c1,
               var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1))
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-sh-in-se-wh, 1.25);
           }
         }
 

package/dist/shipping-payments.scss

@@ -445,6 +445,8 @@ $activeElementSelector: "[data-has-clicked='true']";
                   height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                   path {
                     stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                   }
                 }
                 &:hover {
@@ -2063,6 +2065,8 @@ $activeElementSelector: "[data-has-clicked='true']";
                   height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
                   }
                 }
               }

package/dist/social.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 @use "sass:map";
 @use "sass:list";
 
@@ -127,6 +128,8 @@
         & svg {
           path {
             stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
           }
         }
       }
@@ -218,6 +221,8 @@
         //     --_ctm-mob-dn-im-se-in-c1,
         //     var(--_ctm-tab-dn-im-se-in-c1, var(--_ctm-dn-im-se-in-c1))
         //   );
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
         // }
       }