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

package/dist/repeater-embla-controls.scss

@@ -35,7 +35,9 @@
         //   --_ctm-mob-rep-lt-aw-in-se,
         //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
         // );
-        min-height: var(-_sf-ic-sz-nn);
+        // Was `var(-_sf-ic-sz-nn)` — one dash short, so the declaration was dropped and
+        // the type-3 control bar had no reserved height.
+        min-height: var(--_sf-ic-sz-nn);
         --_sf-t3-lt-vl-v2: var(--_sf-rp-ct-t3-left-vl, 50%);
         --_sf-t3-bt-bl-v2: var(--_sf-rp-ct-t3-bottom-vl, 20px);
         --_sf-t3-tr-bl-v2: var(--_sf-rp-ct-t3-transform-vl, translateX(-50%));
@@ -108,6 +110,12 @@
         display: flex;
         justify-content: center;
         align-items: center;
+
+        // Overrides the stroke hardcoded in the chevron icon markup. Lower specificity
+        // than the :hover rule above, so hover still wins with the active colour.
+        path {
+          stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
+        }
       }
       display: flex;
       justify-content: center;

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;
@@ -74,22 +81,34 @@ $wrapper: ".tgl__wrapper";
             );
           }
 
+          // 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(
-              --_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)}
-            )
+            --_show-shadow,
             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)}
-            );
+                --_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
@@ -162,10 +181,15 @@ $wrapper: ".tgl__wrapper";
             --_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.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/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))

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 {

package/dist/tab-container.scss

@@ -96,18 +96,20 @@
           --_ctm-mob-tbsco-dn-br-rs,
           var(--_ctm-tab-tbsco-dn-br-rs, var(--_ctm-tbsco-dn-br-rs))
         );
-        border-color: var(
-          --_ctm-mob-tbsco-dn-br-cr,
-          var(--_ctm-tab-tbsco-dn-br-cr, var(--_ctm-tbsco-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-tbsco-dn-br-se,
-          var(--_ctm-tab-tbsco-dn-br-se, var(--_ctm-tbsco-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-tbsco-dn-br-wh,
-          var(--_ctm-tab-tbsco-dn-br-wh, var(--_ctm-tbsco-dn-br-wh))
-        );
+        &:is([data-show-border="true"] > *).wrapper {
+          border-color: var(
+            --_ctm-mob-tbsco-dn-br-cr,
+            var(--_ctm-tab-tbsco-dn-br-cr, var(--_ctm-tbsco-dn-br-cr))
+          );
+          border-style: var(
+            --_ctm-mob-tbsco-dn-br-se,
+            var(--_ctm-tab-tbsco-dn-br-se, var(--_ctm-tbsco-dn-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-tbsco-dn-br-wh,
+            var(--_ctm-tab-tbsco-dn-br-wh, var(--_ctm-tbsco-dn-br-wh))
+          );
+        }
         box-shadow: var(
           --_hover-show-shadow,
           var(