@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/repeater-grid-toggle.scss

@@ -19,9 +19,16 @@ $wrapper: ".tgl__wrapper";
         display: var(--_d-flex);
         align-items: center;
         // border: 1px solid var(--_gray-200);
-        border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
-        border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-        border-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
+        // Gated on the Layout Style > Show Border switch; previously the border was
+        // unconditional, so turning the switch off changed nothing.
+        &[data-show-border="true"] {
+          border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
+          border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
+          border-color: prepareMediaVariable(
+            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
+            var(--_gray-200)
+          );
+        }
         --_br-6: 6px;
         --_width-40: 40px;
         --_width-20: 20px;
@@ -39,7 +46,10 @@ $wrapper: ".tgl__wrapper";
               --_sf-at-btn-size,
               #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
             )};
-          width: calc(#{$size} * 2);
+          width: var(
+            --_sf-at-btn-wh,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
+          );
           height: calc(#{$size} * 2);
           align-items: center;
           justify-content: center;
@@ -48,11 +58,98 @@ $wrapper: ".tgl__wrapper";
             #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
           );
 
+          padding: var(
+            --_sf-at-btn-pg,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
+          );
+
+          // Border / radius / shadow now come from the button's own settings. The
+          // first/last radius overrides below only apply while no radius is configured,
+          // so the default pill shape survives an unconfigured toggle.
+          &[data-show-border="true"] {
+            border-color: var(
+              --_sf-at-btn-br-cr,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
+            );
+            border-style: var(
+              --_sf-at-btn-br-se,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
+            );
+            border-width: var(
+              --_sf-at-btn-br-wh,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
+            );
+          }
+
+          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
+          // reach the markup as data attributes and gate the two variables below.
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-show-icon="false"] {
+            --_show-icon: none;
+          }
+
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_sf-at-btn-sw-ae,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-br,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-sd,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-cr,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
+              )
+          );
+
+          // Radius falls back to the pill geometry these two buttons have always had.
+          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
+          // tails with `inherit`, so the variable would always be "set" and the
+          // per-position fallback below would never fire, collapsing the pill to 0.
           &:first-of-type {
-            border-radius: 4px 0 0 4px;
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                4px 0 0 4px
+              )};
           }
           &:last-of-type {
-            border-radius: 0 4px 4px 0;
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                0 4px 4px 0
+              )};
+          }
+
+          // Hover sits between default and selected: it overrides the same
+          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
+          // comes later in source order, so the selected button keeps its own styling
+          // while hovered rather than flipping to the hover look.
+          &:hover {
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
           }
 
           &[data-style-active="true"] {
@@ -70,12 +167,29 @@ $wrapper: ".tgl__wrapper";
                 var(--_gray-200)
               )};
             // background: var(--_gray-200);
+
+            // Selected state overrides the same properties via the --_sf-at-btn-* layer
+            // the default declarations above already read from.
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
           }
 
-          svg {
+          // `img` covers custom uploaded toggle icons, which render as an <img>.
+          svg,
+          img {
+            display: var(--_show-icon, block);
             width: calc(#{$size} * 1);
             height: calc(#{$size} * 1);
+          }
 
+          svg {
             path {
               stroke: var(
                 --_sf-at-pt-cl,

package/dist/repeater-item.scss

@@ -14,11 +14,15 @@
     // width: 100%;
     // background: var(--_ctm-repe-dn-bd-cr);
 
+    height: 100%;
+    // inline `min-height: 0px` on the element needs !important to be overridden
+    min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
+
     & > div {
       &.wrapper {
         width: 100%;
         height: 100%;
-        min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 0px) !important;
+        min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
         padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
         //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
 

package/dist/repeater.scss

@@ -105,34 +105,49 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
     //   --_ctm-mob-rep-dn-rr-wt-bd-se,
     //   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
     // );
+    &[data-show-border="true"] {
+      border-color: var(
+        --_ctm-mob-rep-dn-rr-wt-br-cr,
+        var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-rep-dn-rr-wt-br-se,
+        var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-rep-dn-rr-wt-br-wh,
+        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))
     );
-    border-color: var(
-      --_ctm-mob-rep-dn-rr-wt-br-cr,
-      var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr))
-    );
-    border-style: var(
-      --_ctm-mob-rep-dn-rr-wt-br-se,
-      var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se))
-    );
-    border-width: var(
-      --_ctm-mob-rep-dn-rr-wt-br-wh,
-      var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh))
-    );
+
+    // The shadow is configured under the Repeater Widget accordion, so its variables
+    // carry that accordion's `rr-wt` segment — without it nothing the builder writes
+    // was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
     box-shadow: var(
-      --_hover-show-shadow,
+      --_show-shadow,
       var(
-        --_sf-hr-bx-sw,
+          --_ctm-mob-rep-dn-rr-wt-sw-ae,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))
+        )
         var(
-          --_show-shadow,
-          var(--_ctm-mob-rep-dn-sw-ae, var(--_ctm-tab-rep-dn-sw-ae, var(--_ctm-rep-dn-sw-ae)))
-            var(--_ctm-mob-rep-dn-sw-br, var(--_ctm-tab-rep-dn-sw-br, var(--_ctm-rep-dn-sw-br)))
-            var(--_ctm-mob-rep-dn-sw-sd, var(--_ctm-tab-rep-dn-sw-sd, var(--_ctm-rep-dn-sw-sd)))
-            var(--_ctm-mob-rep-dn-sw-cr, var(--_ctm-tab-rep-dn-sw-cr, var(--_ctm-rep-dn-sw-cr)))
+          --_ctm-mob-rep-dn-rr-wt-sw-br,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))
+        )
+        var(
+          --_ctm-mob-rep-dn-rr-wt-sw-sd,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))
+        )
+        var(
+          --_ctm-mob-rep-dn-rr-wt-sw-cr,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))
         )
-      )
     );
     padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
 
@@ -315,6 +330,12 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           --_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))
+        );
         // &:is([data-control-type="1"]) {
         //   @include CMSRepeaterEmblaControlStyles(1);
         // }
@@ -406,86 +427,21 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
     }
 
     #{$adSlotElementSelector} {
+      // The Ad Style > Image Controls schema was dropped, so these are plain values
+      // rather than custom properties — they reproduce what that schema defaulted to
+      // (full-bleed, centred, no border or shadow).
       a {
         width: 100%;
         display: var(--_d-flex);
         height: 100%;
-        &:is(.lst_vw[data-element-type="repeater"] *) {
-          --_sf-bm-sjst-vlo-pp: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-jy-ct)};
-          --_sf-bm-salg-vlo-pp: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-an-is)};
-        }
-        justify-content: var(
-          --_sf-bm-sjst-vlo-pp,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-jy-ct)}
-        );
-        align-items: var(
-          --_sf-bm-sjst-vlo-pp,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-an-is)}
-        );
+        justify-content: center;
+        align-items: center;
       }
       img {
         max-width: 100%;
         max-height: 100%;
-        border-color: var(
-          --_sf-bm-img-brr-clrrr,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-br-cr)}
-        );
-        border-style: var(
-          --_sf-bm-img-brr-sty,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-br-se)}
-        );
-        border-width: var(
-          --_sf-bm-img-brr-wdt,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-br-wh, 0px)}
-        );
-        border-radius: var(
-          --_sf-bm-img-brr-br,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-br-rs)}
-        );
-        box-shadow: var(
-            --_sf-bm-img-bx-sdw,
-            #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-sw-ae)}
-          )
-          var(
-            --_sf-bm-img-bx-sdw-blr,
-            #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-sw-br)}
-          )
-          var(
-            --_sf-bm-img-bx-sdw-sprd,
-            #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-sw-sd)}
-          )
-          var(
-            --_sf-bm-img-bx-sdw-clr,
-            #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-sw-cr)}
-          );
-        // height: 100%;
-        // width: 100%;
-        // min-height: var(--_sf-img-mn-ht, 500px);
-        // max-height: 100%;
-        &:is(.lst_vw[data-element-type="repeater"] *) {
-          --_sf-bm-swtdh-vlo-pp: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-wh)};
-          --_sf-bm-sht-vlo-pp: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-ht)};
-          --_sf-bm-img-brr-clrrr: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-br-cr)};
-          --_sf-bm-img-brr-sty: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-br-se)};
-          --_sf-bm-img-brr-wdt: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-br-wh)};
-          --_sf-bm-img-brr-br: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-br-rs)};
-          --_sf-bm-img-bx-sdw: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-sw-ae)};
-          --_sf-bm-img-bx-sdw-blr: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-sw-br)};
-          --_sf-bm-img-bx-sdw-sprd: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-sw-sd)};
-          --_sf-bm-img-bx-sdw-clr: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-lt-vw-sw-cr)};
-        }
-        &:not(.lst_vw[data-element-type="repeater"] *) {
-          --_sf-ht-vl: max(#{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-ht)}, auto);
-        }
-
-        width: var(
-          --_sf-bm-swtdh-vlo-pp,
-          #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-wh)}
-        );
-        height: var(
-          --_sf-bm-sht-vlo-pp,
-          var(--_sf-ht-vl, #{prepareMediaVariable(--_ctm-rep-dn-ad-se-ie-cs-gd-vw-ht)})
-        );
+        width: 100%;
+        height: 100%;
         object-fit: cover;
         object-position: center top;
       }
@@ -507,16 +463,19 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
           justify-content: center;
           padding: 0;
           z-index: 2;
-          --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 28x)};
-          --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, blue)};
-          width: var(--_sf-wdt-vl-v2, 28px);
-          height: var(--_sf-wdt-vl-v2, 28px);
+          // The Ad Style > Slider Controls schema was dropped, so the custom properties
+          // only resolve on pages saved before that. The fallbacks reproduce what that
+          // schema defaulted to (32px arrows, black).
+          --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
+          --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
+          width: var(--_sf-wdt-vl-v2, 32px);
+          height: var(--_sf-wdt-vl-v2, 32px);
           background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);
 
           svg {
             --_perc: 0.5;
-            width: calc(var(--_sf-wdt-vl-v2, 28px) * var(--_perc));
-            height: calc(var(--_sf-wdt-vl-v2, 28px) * var(--_perc));
+            width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
+            height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
 
             path {
               stroke: var(--_sf-bgr-clr-vl-v2);
@@ -713,10 +672,18 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
 
       border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
 
-      box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae))
-        var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br))
-        var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd))
-        var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr));
+      // Routed through the two gate variables the Show Shadow switches set above,
+      // otherwise turning the switch off left the shadow on screen.
+      box-shadow: var(
+        --_hover-show-shadow,
+        var(
+          --_show-shadow,
+          var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))
+        )
+      );
 
       &[data-show-border="true"] {
         border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));

package/dist/review-cart.scss

@@ -90,10 +90,16 @@
           background: #ffd700;
           border-radius: 4px;
           left: 15px;
-          padding: 2px;
+          // Width bounds only; the existing padding is left as-is.
+          min-width: 20px;
+          max-width: 80px;
+          box-sizing: border-box;
+          padding: 12px 4px;
           line-height: normal;
           color: #1f1930;
           font-weight: 400;
+          white-space: nowrap;
+          overflow: hidden;
         }
       }
       .cart_content {

package/dist/scroll.scss

@@ -23,6 +23,21 @@ $max-items: 20;
       overflow: hidden;
       white-space: nowrap;
 
+      // The Scroll Container's shadow used to be painted here as well as on
+      // `.scroll__container` below. This wrapper is a separate, square box that sits
+      // outside the container, so the second copy was drawn around the wrapper with
+      // square corners — the shadow appearing "outside the element" and ignoring the
+      // corner radius. Only `.scroll__container` paints it now, and it carries the
+      // matching border-radius.
+      //
+      // The wrapper clips (`overflow: hidden`), so it needs the same radius or its
+      // square clip cuts the container's rounded corners back off — and the shadow
+      // below, which is painted here, then follows the rounded shape too.
+      border-radius: var(
+        --_ctm-mob-dn-sl-cr-br-rs,
+        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
+      );
+
       &[data-widget-shadow="true"] {
         box-shadow: var(
             --_ctm-mob-dn-sl-cr-sw-ae,
@@ -65,6 +80,32 @@ $max-items: 20;
             --_ctm-dn-i#{$i}-br-rs,
             #{prepareMediaVariable(--_ctm-dn-i1-br-rs)}
           );
+          // Each item's schema has carried showShadow/shadowColor/angle/spread/blur all
+          // along, but nothing ever read them — the only box-shadow declarations in this
+          // file were the container's. `--_show-item-shadow` is set to `none` by the
+          // item's own Show Shadow switch below.
+          box-shadow: var(
+            --_show-item-shadow,
+            prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-ae,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-br,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-sd,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-cr,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}
+              )
+          );
+          &[data-item-shadow="false"] {
+            --_show-item-shadow: none;
+          }
           color: prepareMediaVariable(
             --_ctm-dn-i#{$i}-cr,
             #{prepareMediaVariable(--_ctm-dn-i1-cr)}
@@ -158,17 +199,17 @@ $max-items: 20;
       }
     }
 
-    &[data-widget-shadow="true"] .scroll__container {
-      box-shadow: var(
-          --_ctm-mob-dn-sl-cr-sw-ae,
-          var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
-        )
-        var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
-        var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
-        var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
-    }
-
-    &[data-widget-shadow="false"] .scroll__container {
+    // The Scroll Container's shadow is painted on `.wrapper` rather than on
+    // `.scroll__container`: the container fills the wrapper, and the wrapper clips
+    // (`overflow: hidden`), so a shadow on the container would be clipped away. An
+    // element's own box-shadow is never clipped by its own overflow, so the wrapper is
+    // the right box for it — and it carries the matching border-radius (see above) so
+    // the shadow follows the rounded shape instead of drawing a square glow.
+    //
+    // These were previously written as `&[data-widget-shadow=...]`, which targets the
+    // element root, but the attribute is emitted on `.wrapper` (unlike
+    // `data-widget-border`, which is on the root) — so neither rule ever matched.
+    & > .wrapper[data-widget-shadow="false"] {
       box-shadow: none;
     }
 

package/dist/search.scss

@@ -320,7 +320,7 @@
       align-items: center;
       width: 100%;
       height: 100%;
-      border: 1px solid var(--_gray-200);
+      // border: 1px solid var(--_gray-200);
       background-color: var(
         --_ctm-mob-dn-sh-br-bd-cr,
         var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
@@ -378,6 +378,7 @@
         outline: none;
         // padding: 8px;
         background: transparent;
+        padding: var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)));
         color: var(
           --_ctm-mob-dn-sh-br-cr,
           var(--_ctm-tab-dn-sh-br-cr, var(--_ctm-dn-sh-br-cr, #333))
@@ -457,12 +458,51 @@
       }
 
       .search-button {
-        color: var(--_base-white);
-        border: none;
-        // padding-left: 10px;
-        border-radius: 4px;
-        // cursor: pointer;
         transition: 0.3s;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        background-color: var(
+          --_ctm-mob-dn-sh-in-bd-cr,
+          var(--_ctm-tab-dn-sh-in-bd-cr, var(--_ctm-dn-sh-in-bd-cr))
+        );
+        border-color: var(
+          --_ctm-mob-dn-sh-in-br-cr,
+          var(--_ctm-tab-dn-sh-in-br-cr, var(--_ctm-dn-sh-in-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-sh-in-br-se,
+          var(--_ctm-tab-dn-sh-in-br-se, var(--_ctm-dn-sh-in-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-sh-in-br-wh,
+          var(--_ctm-tab-dn-sh-in-br-wh, var(--_ctm-dn-sh-in-br-wh))
+        );
+        border-radius: var(
+          --_ctm-mob-dn-sh-in-br-rs,
+          var(--_ctm-tab-dn-sh-in-br-rs, var(--_ctm-dn-sh-in-br-rs))
+        );
+        box-shadow: var(
+          --_show-text-content-shadow,
+          var(
+              --_ctm-mob-dn-sh-in-sw-ae,
+              var(--_ctm-tab-dn-sh-in-sw-ae, var(--_ctm-dn-sh-in-sw-ae, none))
+            )
+            var(
+              --_ctm-mob-dn-sh-in-sw-br,
+              var(--_ctm-tab-dn-sh-in-sw-br, var(--_ctm-dn-sh-in-sw-br, none))
+            )
+            var(
+              --_ctm-mob-dn-sh-in-sw-sd,
+              var(--_ctm-tab-dn-sh-in-sw-sd, var(--_ctm-dn-sh-in-sw-sd, none))
+            )
+            var(
+              --_ctm-mob-dn-sh-in-sw-cr,
+              var(--_ctm-tab-dn-sh-in-sw-cr, var(--_ctm-dn-sh-in-sw-cr, none))
+            )
+        );
+        padding: var(--_ctm-mob-dn-sh-in-pg, var(--_ctm-tab-dn-sh-in-pg, var(--_ctm-dn-sh-in-pg)));
         .icon {
           display: flex;
         }

package/dist/skeleton.scss

@@ -1,38 +1,27 @@
-.skeleton__element {
-  background-color: var(--_gray-300);
-  border-radius: 6px;
-  position: var(--_p-relative);
-  overflow: hidden;
-  display: inline-block;
-  min-height: 12px;
-  &.rounded {
-    border-radius: 50%;
-  }
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%
-    );
-    animation: skeleton-shimmer 1.5s infinite ease-in-out;
-  }
-}
-
-@keyframes skeleton-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
+// `.skeleton__element` and `@keyframes skeleton-shimmer` are NOT defined here.
+//
+// They used to be — a copy of the library's old skeleton.scss. But global-styles.scss
+// also defines them (mirrored from storefront-websites globals, which is what the
+// shared elements are written against), and both files load into the builder. The two
+// definitions did not replace each other, they stacked:
+//
+//   old rule  -> .skeleton__element::before  { absolute gradient + shimmer }
+//   new rule  -> .skeleton__element::after   { absolute gradient + shimmer }
+//
+// so every skeleton ran TWO shimmer sweeps at once (0.6 alpha over 0.4), which read as
+// a flicker in the builder canvas. The old `border-radius: 6px` also leaked through,
+// since the new rules never set one — corners the same skeleton does not have on the
+// storefront. Confirmed in the browser on the cms-builder page: both pseudo-elements
+// had `animation-name: skeleton-shimmer` and the box computed `border-radius: 6px`.
+//
+// global-styles.scss is now the single definition, so the builder and the storefront
+// render these skeletons identically. Everything the old block set that still matters
+// (`display: block`, `min-height`, background) is already there. Nothing in the CMS
+// used `.skeleton__element.rounded` — the dashboard Skeleton is a CSS module with its
+// own scoped class, and the shared Skeleton component sets its radius inline.
+//
+// If a skeleton style needs changing, change it in ONE of the two mirrored files
+// (globals.scss in storefront-websites, global-styles.scss here) and copy it across.
 
 // dropdown skeletons
 .dpd_skeleton {