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

package/dist/repeater.scss

@@ -9,6 +9,7 @@ $adSlotSliderSelector: ".repeater-ad-slot__inner";
 $sliderControlDragging: "[flex-slider-control-moving='true']";
 $rai: "repeater-advertise-item";
 $listViewSlector: '.lst_vw[data-element-type="repeater"]';
+
 [data-div-type="element"] {
   &[data-element-type="repeater"] {
     // width: var(--_sf-con-nw-wh);
@@ -20,6 +21,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))
         )
     );
+
     // width: 100%;
     &:not([data-view-state="full"]) {
       min-height: var(
@@ -27,6 +29,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht))))
       );
     }
+
     min-height: var();
     margin: var(
       --_ctm-mob-rep-lt-mn,
@@ -119,6 +122,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh))
       );
     }
+
     border-radius: var(
       --_ctm-mob-rep-dn-rr-wt-br-rs,
       var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs))
@@ -130,6 +134,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     box-shadow: var(
       --_show-shadow,
       var(
@@ -192,6 +197,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         }
       }
     }
+
     &:not(.lst_vw) {
       &.grd {
         & > div {
@@ -240,11 +246,13 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
             // min-height: 100px !important;
           }
         }
+
         &:not(.stimsfrRws) {
           // we are not using
           & > div {
             &.wrapper {
               justify-content: center;
+
               & > div {
                 &#{$childItemSelector},
                 &#{$adSlotElementSelector},
@@ -272,6 +280,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           & > div {
             &.wrapper {
               align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;
+
               & > div {
                 &#{$childItemSelector},
                 &#{$adSlotElementSelector},
@@ -321,33 +330,159 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           }
         }
       }
+
       &.sld {
         &:is(:not(#{$sliderControlDragging} *)) {
           overflow: clip;
         }
+
         height: auto;
         --_sf-sl-ct-ic-dt-at-cl: var(
           --_ctm-mob-rep-lt-cl-ae-cr,
           var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
         );
-        // Resting arrow colour (Layout > Slider Settings > Arrow Icon Color). Fallback is
-        // the colour baked into the chevron icons, so untouched repeaters look the same.
-        --_sf-sl-ct-aw-in-cl: var(
-          --_ctm-mob-rep-lt-aw-in-cr,
-          var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085))
-        );
+
+        // Design > Pagination Arrows.
+        //
+        // Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so the
+        // design value wins and the layout value is the fallback — a repeater saved before
+        // this section existed has no `dn-pn-as-aw-se` var and keeps its `lt-aw-in-se`
+        // size. Both schema defaults are 40px.
+        --_sf-ic-sz-nn: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-as-aw-se,
+            var(
+              --_ctm-mob-rep-lt-aw-in-se,
+              var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
+            )
+          )};
+        // Resting arrow colour. Design > Pagination Arrows > Arrow Color replaces the
+        // layout tab's Arrow Icon Color, which stays as the fallback; the last fallback is
+        // the colour baked into the chevron icons. Hover still switches to Control Active
+        // Color.
+        --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-as-aw-cr,
+            var(
+              --_ctm-mob-rep-lt-aw-in-cr,
+              var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085))
+            )
+          )};
+        // Background Color, as the gallery slider and the layouter use it: the button is a
+        // 10% tint of the chosen colour and 20% on hover (see the hover rule further down),
+        // not the flat colour. Kept in its own variable so both tints read the same source.
+        --_sf-rep-as-bg-cr: #{prepareMediaVariable(--_ctm-rep-dn-pn-as-bd-cr, #fff)};
+        --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-rep-as-bg-cr) 10%, transparent);
+
+        // Design > Pagination Dots (control templates 1 and 2). Dot Size replaces the
+        // layout tab's Dot Size the same way Arrow Size replaces Arrow Icon Size, with the
+        // old var as fallback for repeaters saved before the section existed. The two
+        // colours had no layout equivalent: the selected dot used to follow Control Active
+        // Color, which still colours the arrow hover and the unselected dot border.
+        --_sf-ed-vl-sz: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-ds-dt-se,
+            var(
+              --_ctm-mob-rep-lt-dt-se,
+              var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
+            )
+          )};
+        --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-ct-dt-cr, #162578)};
+        --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-or-dt-cr, #fff)};
+
+        // Background Shape of the arrow buttons, matching the gallery slider's mapping:
+        // Round is the mixin's own 50% default, None squares the button off and Square
+        // rounds the corners slightly. Repeaters without this section have no attribute at
+        // all and stay round.
+        button.embla__btn {
+          &[data-background-shape="None"] {
+            --_sf-nv-ic-br: 0px;
+          }
+
+          &[data-background-shape="Square"] {
+            --_sf-nv-ic-br: 4px;
+          }
+        }
+
         // &:is([data-control-type="1"]) {
         //   @include CMSRepeaterEmblaControlStyles(1);
         // }
         @for $i from 1 through 3 {
           &:is([data-control-type="#{$i}"]) {
-            @if ($i == 3) {
+            @if ($i ==3) {
               overflow-y: visible;
             }
+
             @include CMSRepeaterEmblaControlStyles($i);
           }
         }
 
+        // Overrides of the shared control mixin. `:is([data-control-type])` matches the
+        // specificity of the rules being replaced, and this block comes after the @include,
+        // so on the tie these win.
+        &:is([data-control-type]) {
+          // Hover of the arrow buttons. The mixin tints them with Control Active Color,
+          // which ignores the Background Color the Pagination Arrows section sets; the
+          // gallery slider instead deepens that same colour from 10% to 20%. The icon
+          // stroke still switches to Control Active Color — the mixin's own rule.
+          button.embla__btn:hover:not(:disabled) {
+            @include BgColorLighter(var(--_sf-rep-as-bg-cr), 20%);
+          }
+
+          // Design > Pagination Dots > Border and Shadow.
+          //
+          // Both are gated on the container attributes the control components publish from
+          // the Show Border / Show Shadow toggles: with the border off the dots keep the
+          // hairline the mixin derives from Control Active Color, and with it on these
+          // longhands take over.
+          .pagination__v1[data-show-border="true"] > button.embla__dot {
+            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-wh, 0px)};
+            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-se, solid)};
+            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-cr, transparent)};
+          }
+
+          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
+            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-ae, 0px 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-br, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-sd, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-cr, transparent)};
+          }
+        }
+
+        // Design > Pagination Line — template 3 only, which draws the same pagination
+        // buttons as bars and so reads its own section instead of Pagination Dots.
+        &:is([data-control-type="3"]) {
+          // The type-3 sizes and the inactive grey are set on `.pagination__v1` by the
+          // shared control mixin, so they have to be overridden at that level rather than
+          // on the container. Same specificity, later in the file, so these win. Defaults
+          // are exactly what the mixin hardcodes.
+          .pagination__v1 {
+            --_sf-dt-wh-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-wh, 16px)};
+            --_sf-dt-ht-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-ht, 2px)};
+            // Also overrides the dots section's Other Dot Color, which the container sets
+            // on `--_sf-dt-ie-bg` and would otherwise take precedence over the grey.
+            --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-or-le-cr, #d6d6d6)};
+            --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-ct-le-cr, #162578)};
+
+            // The mixin pins the active bar to 6px regardless of the others' height. Kept
+            // as a floor rather than a fixed value so Line Height above 6px applies to the
+            // active bar too, while the default (2px) leaves it at 6px as before.
+            > button.embla__dot.embla__dot--selected {
+              --_sf-dt-at-ht-t3: max(6px, var(--_sf-dt-ht-t3));
+            }
+          }
+
+          .pagination__v1[data-show-border="true"] > button.embla__dot {
+            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-wh, 0px)};
+            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-se, solid)};
+            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-cr, transparent)};
+          }
+
+          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
+            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-ae, 0px 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-br, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-sd, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-cr, transparent)};
+          }
+        }
+
         & > div {
           &.wrapper {
             &.embla__container {
@@ -365,6 +500,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
               // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
               width: 100%;
               height: 100%;
+
               & > .embla__slide {
                 --_sf-cl-vl: calc(
                   (100% / var(--_embla-col-count, 3)) -
@@ -394,11 +530,13 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           }
         }
       }
+
       & > div {
         &.wrapper {
           &:is(.sld > *) {
             gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
           }
+
           &:is(:not(.sld > *)) {
             column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
             row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
@@ -412,10 +550,12 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         }
       }
     }
+
     .repeater-advertise-item {
       display: flex;
       justify-content: center;
       align-items: center;
+
       img {
         // width: 100%;
         // height: 100%;
@@ -437,6 +577,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         justify-content: center;
         align-items: center;
       }
+
       img {
         max-width: 100%;
         max-height: 100%;
@@ -450,6 +591,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         position: relative;
         width: 100%;
         height: 100%;
+
         & > button {
           position: absolute;
           top: 50%;
@@ -516,9 +658,11 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
       &[data-button-alignment-hover-state="flex-start"]:hover {
         justify-content: flex-start;
       }
+
       &[data-button-alignment-hover-state="center"]:hover {
         justify-content: center;
       }
+
       &[data-button-alignment-hover-state="flex-end"]:hover {
         justify-content: flex-end;
       }
@@ -526,18 +670,23 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
 
     .btn__with__text[data-btn-name="loadmoreButton"] {
       justify-content: center;
+
       &[data-show-shadow="false"] {
         --_show-shadow: none;
       }
+
       &[data-icon-position="left"] {
         --_sf-fd-bn: row;
       }
+
       &[data-icon-position="right"] {
         --_sf-fd-bn: row-reverse;
       }
+
       &[data-icon-position="center"] {
         --_sf-fd-bn: row;
       }
+
       // &:has(p) {
       //   width: auto;
       // }
@@ -667,10 +816,12 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         &[data-hover-show-shadow="false"] {
           --_hover-show-shadow: none;
         }
+
         &[data-hover-show-icon="false"] {
           --_hover-show-icon: none;
         }
       }
+
       background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
 
       padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
@@ -714,6 +865,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
         text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
         word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
         word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));
+
         &.flex__overflow {
           white-space: normal;
           @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -739,6 +891,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
 
       .icon {
         display: var(--_hover-show-icon, var(--_show-icon, flex));
+
         svg {
           width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
           height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
@@ -750,6 +903,7 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           }
         }
       }
+
       [data-element-style="Text"] {
         display: inline-block;
         width: 100%;

package/dist/responsive-behaviour.scss

@@ -1,29 +1,29 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./prefix-list.scss" as *;
-@use "./functions.scss" as *;
-
-$rb_cls: ".flx__rb__fxd";
-$elementSelector: '[data-div-type="element"]';
-$elementDragging: "[data-cms-new-element-dragging-v2='true']";
-$dataResizerTrue: '[data-cms-element-resizer="true"]';
-$fullView: '[data-view-state="full"]';
-$var: "--_sf-width-rb-vl";
-$selector: "[data-element-type='layouter-pro']";
-
-@mixin FlexElementResponsiveBehaviourStyles() {
-  #{$elementSelector} {
-    &#{$rb_cls} {
-      &:not(#{$fullView, $elementDragging, $dataResizerTrue}) {
-        @include FlexUpdatedPrefixCSSVariable(#{$var});
-        &:is(#{$selector}) {
-          width: min(var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}), 100%) !important;
-        }
-        &:is(:not(#{$selector})) {
-          width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./prefix-list.scss" as *;
+@use "./functions.scss" as *;
+
+$rb_cls: ".flx__rb__fxd";
+$elementSelector: '[data-div-type="element"]';
+$elementDragging: "[data-cms-new-element-dragging-v2='true']";
+$dataResizerTrue: '[data-cms-element-resizer="true"]';
+$fullView: '[data-view-state="full"]';
+$var: "--_sf-width-rb-vl";
+$selector: "[data-element-type='layouter-pro']";
+
+@mixin FlexElementResponsiveBehaviourStyles() {
+  #{$elementSelector} {
+    &#{$rb_cls} {
+      &:not(#{$fullView, $elementDragging, $dataResizerTrue}) {
+        @include FlexUpdatedPrefixCSSVariable(#{$var});
+        &:is(#{$selector}) {
+          width: min(var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}), 100%) !important;
+        }
+        &:is(:not(#{$selector})) {
+          width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
+        }
+      }
+    }
+  }
+}

package/dist/scroll.scss

@@ -177,7 +177,10 @@ $max-items: 20;
                   #{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);
+                stroke-width: prepareMediaVariable(
+                  --_ctm-dn-i#{$i}-se-wh,
+                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
+                );
               }
             }
           }
@@ -208,11 +211,29 @@ $max-items: 20;
 
         .scrolling {
           flex-direction: column;
+          // Full width so the items have room to sit left, centre or right inside the
+          // container. Left to size itself, the track is only as wide as its widest
+          // item and Horizontal Alignment would have no space to move anything in.
+          width: 100%;
           animation-name: marquee-vertical;
           padding-right: 0;
           padding-bottom: 10px;
         }
 
+        // Horizontal Alignment. The track is a column here, so its cross axis is the
+        // horizontal one and `align-items` is what places the items across it.
+        &[data-horizontal-alignment="left"] .scrolling {
+          align-items: flex-start;
+        }
+
+        &[data-horizontal-alignment="center"] .scrolling {
+          align-items: center;
+        }
+
+        &[data-horizontal-alignment="right"] .scrolling {
+          align-items: flex-end;
+        }
+
         // 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.
@@ -362,6 +383,15 @@ $max-items: 20;
         }
       }
 
+      // Divider Style > Stroke Width. Scoped to the dividers, which sit as direct
+      // children of the track — the items' own icons carry the same `.icon` class, so
+      // declaring this in the block above would let the divider's setting retune every
+      // item icon too. The value overrides the stroke-width baked into the icon markup;
+      // 1.25 matches the schema default.
+      > .scrolling > .icon svg path {
+        stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
+      }
+
       @keyframes marquee {
         0% {
           transform: translateX(0);