@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

package/dist/product-sizechart.scss

@@ -231,6 +231,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-se-ct-dt-se-se-wh, 1.25);
             }
           }
         }
@@ -403,6 +405,8 @@
                   --_ctm-mob-dn-me-se-ct-dt-se-in-c1,
                   var(--_ctm-tab-dn-me-se-ct-dt-se-in-c1, var(--_ctm-dn-me-se-ct-dt-se-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-me-se-ct-dt-se-se-wh, 1.25);
               }
             }
           }

package/dist/profile.scss

@@ -109,6 +109,8 @@
                 --_ctm-mob-dn-ce-in-in-c1,
                 var(--_ctm-tab-dn-ce-in-cr, var(--_ctm-dn-ce-in-in-c1))
               );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-ce-in-se-wh, 1.25);
             }
           }
         }
@@ -180,6 +182,8 @@
 
             path {
               stroke: prepareMediaVariable(--_ctm-dn-pe-wt-in-c1);
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-pe-wt-se-wh, 1.25);
             }
           }
         }
@@ -189,6 +193,8 @@
         //       --_ctm-mob-dn-ct-in-in-cr,
         //       var(--_ctm-tab-dn-ct-in-in-cr, var(--_ctm-dn-ct-in-in-cr))
         //     );
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        stroke-width: prepareMediaVariable(--_ctm-dn-ct-in-se-wh, 1.25);
         //   }
         // }
 
@@ -361,6 +367,8 @@
 
           path {
             stroke: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-c1);
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-se-wh, 1.25);
           }
         }
       }

package/dist/quantity-selector.scss

@@ -669,6 +669,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-se-wh, 1.25);
             }
           }
         }
@@ -886,6 +888,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-de-bn-dt-se-se-wh, 1.25);
             }
           }
         }

package/dist/quick-inventory-check.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 @use "sass:map";
 @use "sass:list";
 
@@ -193,6 +194,8 @@
                   --_ctm-mob-dn-qa-lt-in-c1,
                   var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-qa-lt-se-wh, 1.25);
               }
             }
           }
@@ -253,6 +256,8 @@
                   --_ctm-mob-dn-ds-lt-in-c1,
                   var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ds-lt-se-wh, 1.25);
               }
             }
           }

package/dist/quick-order-pad.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 // Colors
 $gray-400: #ccc;
 $gray-800: #444;
@@ -356,6 +357,8 @@ $input-padding: 10px 12px;
                       //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                       //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                       // );
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
                       stroke: var(--_thm-cs-be-se-1);
                     }
                   }
@@ -684,6 +687,8 @@ $input-padding: 10px 12px;
               --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
               var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25);
           }
         }
         &:hover {

package/dist/quota-details.scss

@@ -100,21 +100,41 @@ $overflowSelector: ".flex__overflow";
       .product__hilights {
         display: flex;
         align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
-        justify-content: var(--_ctm-mob-lt-hl-at, var(--_ctm-tab-lt-hl-at, var(--_ctm-lt-hl-at)));
+        // Design > Widget Style > alignment, falling back to the Layout panel's own
+        // alignment so elements set up before the design control existed keep theirs.
+        justify-content: prepareMediaVariable(
+          --_ctm-dn-wt-se-hl-at,
+          prepareMediaVariable(--_ctm-lt-hl-at)
+        );
         gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
         width: 100%;
 
         height: 100%;
 
         &[data-show-dividers="true"] {
+          // Divider > Shape Size and Shape Color are the only two controls the panel
+          // offers for the item: Size is the marker's diameter for circle and square
+          // and the rule's thickness for the plain line, Color paints all three. The
+          // keys the panel used to expose (Divider Height / Divider Color) stay as
+          // fallbacks so a divider styled before the change keeps its look.
+          //
+          // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
+          // the second the `divider…` property name. These two vars were written with
+          // only one, which is exactly why neither control did anything.
+          $shapeSize: prepareMediaVariable(
+            --_ctm-dn-dr-dr-se-se,
+            prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
+          );
+          $shapeColor: prepareMediaVariable(
+            --_ctm-dn-dr-dr-se-cr,
+            prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
+          );
+
           .product__list__item {
             position: relative;
             &:not(:last-child)::after {
               content: "";
-              width: var(
-                --_ctm-mob-dn-dr-dr-wh,
-                var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-              );
+              width: $shapeSize;
               height: 100%;
               position: absolute;
               right: calc(
@@ -122,20 +142,84 @@ $overflowSelector: ".flex__overflow";
                     -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
                       2
                   ) -
-                  (
-                    var(
-                        --_ctm-mob-dn-dr-dr-wh,
-                        var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-                      ) /
-                      2
-                  )
+                  (#{$shapeSize} / 2)
               );
-              background-color: var(
-                --_ctm-mob-dn-dr-dr-cr,
-                var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
+              background-color: $shapeColor;
+            }
+
+            // Divider item (Divider -> Item Style). The rule above spans from
+            // `right: R` for `dividerWidth`, with R = -(gap/2) - (width/2), so its
+            // centre sits at -(gap/2) — the marker is pinned there and translated
+            // half its own width back, leaving it centred on the rule.
+            .divider__marker {
+              position: absolute;
+              top: 50%;
+              right: calc(
+                -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 0px))) /
+                  2
               );
+              transform: translate(50%, -50%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              z-index: 1;
+
+              // 8px rather than the rule's thickness when Shape Size is absent: a
+              // marker falling back to a hairline would read as missing.
+              &[data-shape="circle"],
+              &[data-shape="square"] {
+                width: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
+                height: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
+                background-color: $shapeColor;
+              }
+
+              &[data-shape="circle"] {
+                border-radius: 50%;
+              }
+
+              // Paints the widget background behind itself, so the rule breaks
+              // around the icon instead of striking through it.
+              &[data-shape="icon"] {
+                padding-block: 2px;
+                background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr, #ffffff);
+              }
+
+              .icon {
+                display: flex;
+
+                svg {
+                  width: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
+                  height: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
+
+                  // Colour whether the icon is drawn with strokes or fills (skipping
+                  // parts explicitly set to "none") — the default "dot" is filled,
+                  // most others are stroked.
+                  &[stroke]:not([stroke="none"]),
+                  [stroke]:not([stroke="none"]) {
+                    stroke: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
+                  }
+                  &[fill]:not([fill="none"]),
+                  [fill]:not([fill="none"]) {
+                    fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
+                  }
+                }
+              }
+            }
+
+            // The marker is rendered inside every item; only the ones that carry a
+            // rule show it, so it can never trail off the end of the row.
+            &:last-child .divider__marker {
+              display: none;
             }
           }
+
+          // A shape or icon marker REPLACES the rule rather than sitting on it, so the
+          // rule is drawn only while the separator is the plain "divider".
+          &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
+            display: none;
+          }
         }
         .product__list__item {
           display: flex;

package/dist/repeater copy.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 @use "sass:map";
 @use "sass:list";
 @use "./repeater-embla-controls.scss" as *;
@@ -428,6 +429,8 @@ $rai: "repeater-advertise-item";
                     --_ctm-mob-dn-by-nw-dt-se-in-c1,
                     var(--_ctm-tab-dn-by-nw-dt-se-in-c1, var(--_ctm-dn-by-nw-dt-se-in-c1))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-by-nw-dt-se-se-wh, 1.25);
                 }
               }
             }

package/dist/repeater-grid-toggle.scss

@@ -195,6 +195,8 @@ $wrapper: ".tgl__wrapper";
                 --_sf-at-pt-cl,
                 #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
               );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
             }
           }
         }

package/dist/repeater.scss

@@ -726,6 +726,8 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
 
           path {
             stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
           }
         }
       }

package/dist/rfqs.scss

@@ -267,6 +267,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-in-as-sd-me-in-in-cr,
                     var(--_ctm-tab-dn-in-as-sd-me-in-in-cr, var(--_ctm-dn-in-as-sd-me-in-in-cr))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-sd-me-in-se-wh, 1.25);
                 }
 
                 width: var(
@@ -284,6 +286,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-in-as-dd-in-in-cr,
                     var(--_ctm-tab-dn-in-as-dd-in-in-cr, var(--_ctm-dn-in-as-dd-in-in-cr))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-dd-in-se-wh, 1.25);
                 }
 
                 width: var(
@@ -301,6 +305,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-in-as-pt-in-in-cr,
                     var(--_ctm-tab-dn-in-as-pt-in-in-cr, var(--_ctm-dn-in-as-pt-in-in-cr))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-pt-in-se-wh, 1.25);
                 }
 
                 width: var(
@@ -318,6 +324,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-in-as-vw-in-in-cr,
                     var(--_ctm-tab-dn-in-as-vw-in-in-cr, var(--_ctm-dn-in-as-vw-in-in-cr))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-vw-in-se-wh, 1.25);
                 }
 
                 width: var(
@@ -335,6 +343,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-in-as-cl-in-in-cr,
                     var(--_ctm-tab-dn-in-as-cl-in-in-cr, var(--_ctm-dn-in-as-cl-in-in-cr))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-cl-in-se-wh, 1.25);
                 }
 
                 width: var(

package/dist/scroll.scss

@@ -158,6 +158,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 +180,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;
       }
@@ -305,6 +342,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);
         // }
       }