@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

package/dist/repeater-embla-controls.scss

@@ -3,26 +3,22 @@
 @use "./functions.scss" as *;
 
 @mixin CMSRepeaterEmblaControlStyles($type: 1) {
-  @if ($type ==1) {
-
+  @if ($type == 1) {
     &:is(body[data-iframe-body="true"] *),
     &:hover {
       --_sf-nv-ic-vt: visible;
       --_sf-nv-ic-op: 1;
     }
   }
-
   @include emblaBtnStylesV1($type);
   @include emblaDotsStylesV1($type);
 
-  @if ($type ==2 or $type ==3) {
-
+  @if ($type == 2 or $type == 3) {
     &:is(body[data-iframe-body="true"] *),
     &:hover {
       --_sf-pg-ic-vt: visible;
       --_sf-pg-ic-op: 1;
     }
-
     .repeater__control__element {
       position: absolute;
       bottom: var(--_sf-t3-bt-bl-v2, 20px);
@@ -30,14 +26,11 @@
       transform: var(--_sf-t3-tr-bl-v2, translateX(-50%));
       // z-index: calc(var(--_higher-zIndex, 99999) - 2);
       z-index: 2;
-
-      @if ($type !=3) {
+      @if ($type != 3) {
         visibility: var(--_sf-pg-ic-vt, hidden);
         opacity: var(--_sf-pg-ic-op, 0);
         transition: all 0.45s ease;
-      }
-
-      @else {
+      } @else {
         // min-height: var(
         //   --_ctm-mob-rep-lt-aw-in-se,
         //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
@@ -60,11 +53,10 @@
 }
 
 @mixin emblaBtnStylesV1($type: 1) {
-
   // Navigation
   button {
     &.embla__btn {
-      @if ($type ==1) {
+      @if ($type == 1) {
         position: absolute;
         // z-index: calc(var(--_higher-zIndex, 99999) - 2);
         z-index: 2;
@@ -73,16 +65,13 @@
         visibility: var(--_sf-nv-ic-vt, hidden);
         opacity: var(--_sf-nv-ic-op, 0);
         transition: all 0.45s ease;
-
         &.embla__prev {
           left: var(--_sf-nv-lt-vl, 10px);
         }
-
         &.embla__next {
           right: var(--_sf-nv-lt-vl, 10px);
         }
       }
-
       // --_sf-ic-sz-nn: var(
       //   --_ctm-mob-rep-lt-aw-in-se,
       //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
@@ -92,14 +81,12 @@
       height: var(--_sf-ic-sz-nn);
       border-radius: var(--_sf-nv-ic-br, 50%);
 
-      @if ($type ==3) {
+      @if ($type == 3) {
         --_sf-dd-vl-bg-t3: transparent;
-
         &:is(body[data-iframe-body="true"] *) {
           pointer-events: none !important;
         }
       }
-
       background: var(--_sf-nv-ic-bg, var(--_sf-dd-vl-bg-t3, #fff));
 
       &:hover:not(:disabled) {
@@ -112,7 +99,6 @@
           }
         }
       }
-
       &:disabled {
         opacity: 0.45;
         cursor: auto;
@@ -121,8 +107,8 @@
       // Custom (Sirv-hosted) arrow icons are fetched at runtime and land inside a
       // `.icon` span instead of directly on the button, so they need the same sizing
       // and stroke as the inlined built-in chevrons.
-      &>svg,
-      &>.icon>svg {
+      & > svg,
+      & > .icon > svg {
         width: calc(var(--_sf-ic-sz-nn) * 0.5);
         height: calc(var(--_sf-ic-sz-nn) * 0.5);
         display: flex;
@@ -135,7 +121,6 @@
           stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
         }
       }
-
       display: flex;
       justify-content: center;
       align-items: center;
@@ -145,7 +130,7 @@
 
 @mixin emblaDotsStylesV1($type: 1) {
   :is(.pagination__v1) {
-    @if ($type ==1) {
+    @if ($type == 1) {
       position: absolute;
       // z-index: calc(var(--_higher-zIndex, 99999) - 2);
       z-index: 2;
@@ -154,7 +139,7 @@
       bottom: var(--_sf-nv-tp-vl, 10px);
     }
 
-    @if ($type ==3) {
+    @if ($type == 3) {
       --_sf-dt-wh-t3: 16px;
       --_sf-dt-ht-t3: 2px;
       // --_sf-dt-br-t3: 100px;
@@ -171,14 +156,13 @@
     gap: var(--_sf-dt-gp-vl, 8px);
     max-width: 200px;
 
-    &>button {
+    & > button {
       &.embla__dot {
-
         // --_sf-ed-vl-sz: var(
         //   --_ctm-mob-rep-lt-dt-se,
         //   var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
         // );
-        @if ($type !=3) {
+        @if ($type != 3) {
           transition: all 0.45s ease;
           width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
           height: var(--_sf-ed-vl-sz, 10px);
@@ -191,9 +175,7 @@
           &:not(.embla__dot--selected) {
             border: 1px solid color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 30%, transparent);
           }
-        }
-
-        @else if($type ==3) {
+        } @else if($type == 3) {
           width: var(--_sf-dt-at-wh-t3, var(--_sf-dt-wh-t3, 10px));
           height: var(--_sf-dt-at-ht-t3, var(--_sf-dt-ht-t3, 10px));
           border-radius: var(--_sf-dt-at-br-t3, var(--_sf-dt-bt-at, 0px));
@@ -201,11 +183,9 @@
 
           &:not(.embla__dot--selected) {
             --_sf-br-vl-t3: 16px;
-
             &:nth-of-type(1) {
               --_sf-dt-bt-at: var(--_sf-br-vl-t3) 0px 0px var(--_sf-br-vl-t3);
             }
-
             &:last-of-type {
               --_sf-dt-bt-at: 0px var(--_sf-br-vl-t3) var(--_sf-br-vl-t3) 0px;
             }
@@ -219,7 +199,7 @@
           --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);
           --_sf-nv-pg-sz-ac: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
 
-          @if ($type ==3) {
+          @if ($type == 3) {
             --_sf-dt-at-wh-t3: calc(2 * var(--_sf-dt-wh-t3));
             --_sf-dt-at-ht-t3: 6px;
             --_sf-dt-at-br-t3: var(--_sf-dt-at-ht-t3);
@@ -228,4 +208,4 @@
       }
     }
   }
-}
+}

package/dist/repeater-grid-toggle.scss

@@ -14,183 +14,193 @@ $wrapper: ".tgl__wrapper";
     bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
     top: var(--_sf-rp-gt-t3-top-vl, 0px);
 
-    &>div {
+    & > div {
       &#{$wrapper} {
         display: var(--_d-flex);
         align-items: center;
-
         // border: 1px solid 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));
+          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;
         border-radius: 4px;
         // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
-        background-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
-          var(--_base-white));
+        background-color: prepareMediaVariable(
+          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
+          var(--_base-white)
+        );
 
-        &>button {
+        & > button {
           display: var(--_d-flex);
           // $size: var(--_width-40);
           $size: #{var(
- --_sf-at-btn-size,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))})
+              --_sf-at-btn-size,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
+            )};
+          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;
+          background: var(
+            --_sf-at-btn-bd,
+            #{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: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                4px 0 0 4px
+              )};
+          }
+          &:last-of-type {
+            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"] {
+            // --_sf-at-pt-cl: var(--_gray-700);
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+                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)};
+          }
+
+          // `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,
+                #{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);
+            }
+          }
         }
-
-        ;
-        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;
-      background: var(--_sf-at-btn-bd,
-        #{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: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-        4px 0 0 4px)
       }
-
-      ;
-    }
-
-    &:last-of-type {
-      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"] {
-  // --_sf-at-pt-cl: var(--_gray-700);
-  --_sf-at-btn-size: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
-  var(--_width-20))
-}
-
-;
---_sf-at-pt-cl: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
-var(--_gray-700))
-}
-
-;
---_sf-at-btn-bd: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
-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)};
-}
-
-// `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,
-      #{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-item.scss

@@ -25,7 +25,7 @@
       --_sf-repe-show-shadow: none;
     }
 
-    &>div {
+    & > div {
       &.wrapper {
         width: 100%;
         height: 100%;
@@ -57,14 +57,22 @@
         //   --_ctm-mob-repe-dn-bd-se,
         //   var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
         // );
-        border-radius: var(--_ctm-mob-repe-dn-br-rs,
-            var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs)));
-        border-color: var(--_ctm-mob-repe-dn-br-cr,
-            var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr)));
-        border-style: var(--_ctm-mob-repe-dn-br-se,
-            var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se)));
-        border-width: var(--_ctm-mob-repe-dn-br-wh,
-            var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh)));
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
         // The four shadow variables read `repe-se-*`, but the design section is
         // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
         // `repe-se-*` variable is ever defined, which made the whole var() chain
@@ -79,13 +87,23 @@
         //
         // Per-part fallbacks match repeater.scss: without them a single unset part would
         // invalidate the whole declaration again.
-        box-shadow: var(--_sf-repe-show-shadow,
-            var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0))) var(--_ctm-mob-repe-dn-sw-br,
-              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))) var(--_ctm-mob-repe-dn-sw-sd,
-              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))) var(--_ctm-mob-repe-dn-sw-cr,
-              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))));
+        box-shadow: var(
+          --_sf-repe-show-shadow,
+          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
+            var(
+              --_ctm-mob-repe-dn-sw-br,
+              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-sd,
+              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-cr,
+              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
+            )
+        );
       }
-
       &:is([data-background-type="color"] > *).wrapper {
         background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
       }
@@ -93,37 +111,42 @@
       &:is([data-background-type="gradient"] > *).wrapper {
         --_sf-repe-gradient-angle: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ae, 90)} * 1deg);
         --_sf-repe-gradient-start-color: #{prepareMediaVariable(
- --_ctm-repe-dn-gt-st-cr,
-        transparent)
+            --_ctm-repe-dn-gt-st-cr,
+            transparent
+          )};
+        --_sf-repe-gradient-start-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%
+        );
+        --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
+        --_sf-repe-gradient-end-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%
+        );
+        --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
       }
 
-      ;
-      --_sf-repe-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%);
-      --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
-      --_sf-repe-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%);
-      --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
-    }
-
-    &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
-      background-image: linear-gradient(var(--_sf-repe-gradient-angle),
+      &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+        background-image: linear-gradient(
+          var(--_sf-repe-gradient-angle),
           var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position));
-    }
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
 
-    &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
-      background-image: radial-gradient(circle at var(--_sf-repe-gradient-position),
+      &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-repe-gradient-position),
           var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position));
-    }
-
-    &:is([data-background-type="image"] > *).wrapper {
-      background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
+      &:is([data-background-type="image"] > *).wrapper {
+        background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
+        background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
+        background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
+        background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
+        background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
+        background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
+      }
     }
   }
 }
-}