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

package/dist/add-order.scss

@@ -175,10 +175,7 @@
       // default-state values, which is why the Hover state's text properties appeared
       // dead. Publishing the hover values as those custom properties is what `.txt`
       // is written to consume, and matches how product-actions.scss does it.
-      --_sf-hr-cr: var(
-        --_ctm-mob-dn-hr-se-cr,
-        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
-      );
+      --_sf-hr-cr: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
       --_sf-hr-ft-fy: var(
         --_ctm-mob-dn-hr-se-ft-fy,
         var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
@@ -219,10 +216,7 @@
         --_ctm-mob-dn-hr-se-le-ht,
         var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
       );
-      --_sf-hr-ue: var(
-        --_ctm-mob-dn-hr-se-ue,
-        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
-      );
+      --_sf-hr-ue: var(--_ctm-mob-dn-hr-se-ue, var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue)));
 
       background-color: var(
         --_ctm-mob-dn-hr-se-bd-cr,

package/dist/allocation-header-quota-details.scss

@@ -113,22 +113,27 @@ $overflowSelector: ".flex__overflow";
 
       .product__list__item {
         position: relative;
+        // The rule is a pseudo-element and takes no space of its own, so a wide one grew
+        // back over the item beside it — see dividerGapReserve in functions.scss.
+        &:not(:last-child) {
+          @include dividerGapReserve($shapeSize, right);
+        }
         &:not(:last-child)::after {
           content: "";
           width: $shapeSize;
           height: 100%;
           position: absolute;
-          right: calc((-1 * var(--_sf-gp) / 2) - (#{$shapeSize} / 2));
+          right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
           background-color: $shapeColor;
         }
 
         // Divider item (Divider -> Item Style). Same geometry as the standalone
-        // element: the rule's centre sits at -(gap/2) from the item's right edge,
-        // so the marker is pinned there and translated half its own width back.
+        // element: the rule's centre sits at -(gap/2) - (width/2) from the item's right
+        // edge, so the marker is pinned there and translated half its own width back.
         .divider__marker {
           position: absolute;
           top: 50%;
-          right: calc(-1 * var(--_sf-gp, 0px) / 2);
+          right: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
           transform: translate(50%, -50%);
           display: flex;
           align-items: center;

package/dist/allocationDetails.scss

@@ -726,184 +726,187 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           display: flex;
           gap: 12px;
           margin-left: auto;
-          // Grid View Control Style > Layout Style > Vertical Alignment. The
-          // renderer publishes the stored word (top / center / bottom); those are
-          // not align-self keywords, so the mapping is done here rather than
-          // written into every saved element.
-          align-self: center;
-          &[data-vertical-align="top"] {
-            align-self: flex-start;
-          }
-          &[data-vertical-align="center"] {
+            // Grid View Control Style > Layout Style > Vertical Alignment. The
+            // renderer publishes the stored word (top / center / bottom); those are
+            // not align-self keywords, so the mapping is done here rather than
+            // written into every saved element.
             align-self: center;
-          }
-          &[data-vertical-align="bottom"] {
-            align-self: flex-end;
-          }
-        }
-        .product__views {
-          display: flex;
-          // background-color: #fff;
-          // border: 1px solid var(--_gray-300);
-          border-radius: 4px;
-          border-style: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-se, solid);
-          border-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-          border-color: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
-          background-color: prepareMediaVariable(
-            --_ctm-dn-gd-vw-cl-se-lt-se-bd-cr,
-            var(--_base-white)
-          );
-          // height: 40px;
-          // overflow: hidden;
-
-          // Hoisted out of `.btn` so the "Icon + Text" rules further down can size
-          // themselves off the same icon measurement.
-          $size: #{var(
-              --_sf-at-btn-size,
-              #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
-            )};
-
-          .btn {
-            // display: inline-block;
-            // // padding: 8px;
-            // display: flex;
-            // align-items: center;
-            // justify-content: center;
-
-            display: var(--_d-flex);
-            --_width-20: 20px;
-            // $size: var(--_width-40);
-            // The 2x cell is now a floor rather than a fixed size: Padding is
-            // configurable, so the button grows past it once the padding needs more
-            // room than the icon left over. Untouched elements have no padding and
-            // stay exactly 2x, as they always were.
-            min-width: calc(#{$size} * 2);
-            min-height: calc(#{$size} * 2);
-            box-sizing: border-box;
-            padding: var(
-              --_sf-at-btn-pg,
-              #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-pg, 0)}
-            );
-            align-items: center;
-            justify-content: center;
-            background: var(
-              --_sf-at-btn-bd,
-              #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
-            );
-            box-shadow: var(
-              --_sf-at-btn-sw,
-              #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
-            );
-
-            // The renderer reads Show Shadow off whichever state the button is in,
-            // so one attribute covers both.
-            &[data-show-shadow="false"] {
-              box-shadow: none;
+            &[data-vertical-align="top"] {
+              align-self: flex-start;
             }
-
-            cursor: pointer;
-            button {
-              display: flex;
-              // Until these are cleared the button keeps the browser's own
-              // padding and border, which pushed the glyph off the centre of its
-              // cell — that is what made the Grid and List icons sit unevenly
-              // beside each other. Filling the cell and centring here keeps them
-              // on one baseline at every icon size.
-              align-items: center;
-              justify-content: center;
-              width: 100%;
-              height: 100%;
-              padding: 0;
-              border: none;
-              background: transparent;
+            &[data-vertical-align="center"] {
+              align-self: center;
+            }
+            &[data-vertical-align="bottom"] {
+              align-self: flex-end;
             }
+          }
+          .product__views {
+            display: flex;
+            // background-color: #fff;
+            // border: 1px solid var(--_gray-300);
+            border-radius: 4px;
+            border-style: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-se, solid);
+            border-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
+            border-color: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
+            background-color: prepareMediaVariable(
+              --_ctm-dn-gd-vw-cl-se-lt-se-bd-cr,
+              var(--_base-white)
+            );
+            // height: 40px;
+            // overflow: hidden;
+
+            // Hoisted out of `.btn` so the "Icon + Text" rules further down can size
+            // themselves off the same icon measurement.
+            $size: #{var(
+                --_sf-at-btn-size,
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
+              )};
 
-            // The glyph gets its own flex box so the svg sits centred without the
-            // inline-baseline gap a bare `dangerouslySetInnerHTML` span would add.
-            .btn__icon {
-              display: flex;
+            .btn {
+              // display: inline-block;
+              // // padding: 8px;
+              // display: flex;
+              // align-items: center;
+              // justify-content: center;
+
+              display: var(--_d-flex);
+              --_width-20: 20px;
+              // $size: var(--_width-40);
+              // The 2x cell is now a floor rather than a fixed size: Padding is
+              // configurable, so the button grows past it once the padding needs more
+              // room than the icon left over. Untouched elements have no padding and
+              // stay exactly 2x, as they always were.
+              min-width: calc(#{$size} * 2);
+              min-height: calc(#{$size} * 2);
+              box-sizing: border-box;
+              padding: var(--_sf-at-btn-pg, #{prepareMediaVariable(
+                    --_ctm-dn-gd-vw-cl-se-bn-dt-se-pg,
+                    0
+                  )});
               align-items: center;
               justify-content: center;
-              flex-shrink: 0;
+              background: var(
+                --_sf-at-btn-bd,
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
+              );
+              box-shadow: var(
+                --_sf-at-btn-sw,
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0 0)}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
+              );
 
-              // An uploaded icon comes through as an <img> sized to its box, so the
-              // box needs a size of its own — the svg rule further down only reaches
-              // library icons, and a percentage inside a shrink-to-fit parent would
-              // otherwise resolve to nothing.
-              img {
-                width: calc(#{$size} * 1);
-                height: calc(#{$size} * 1);
-                object-fit: contain;
+              // The renderer reads Show Shadow off whichever state the button is in,
+              // so one attribute covers both.
+              &[data-show-shadow="false"] {
+                box-shadow: none;
               }
-            }
 
-            // &:hover {
-            //   background-color: var(--_gray-100);
-            // }
-
-            &.active {
-              // --_sf-at-pt-cl: var(--_gray-700);
-              --_sf-at-btn-size: #{prepareMediaVariable(
-                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-se,
-                  var(--_width-20)
-                )};
-              --_sf-at-pt-cl: #{prepareMediaVariable(
-                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
-                  var(--_gray-700)
-                )};
-              --_sf-at-btn-bd: #{prepareMediaVariable(
-                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
-                  var(--_gray-200)
-                )};
-              // Same re-pointing trick as the icon vars above: the padding and
-              // shadow declarations stay written once and simply re-resolve
-              // against the selected state's values.
-              --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-pg, 0)};
-              --_sf-at-btn-sw: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-ae, 0 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-br, 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-sd, 0)}
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-cr, transparent)};
-              // background: var(--_gray-200);
-            }
-            // &.active {
-            //   background-color: #ced4f6;
-            //   button {
-            //     svg {
-            //       path {
-            //         stroke: var(--_primary-500);
-            //       }
-            //     }
-            //   }
-            // }
-            // &:first-child {
-            //   border-right: 1px solid var(--_gray-200);
-            // }
-
-            svg {
-              width: calc(#{$size} * 1);
-              height: calc(#{$size} * 1);
+              cursor: pointer;
+              button {
+                display: flex;
+                // Until these are cleared the button keeps the browser's own
+                // padding and border, which pushed the glyph off the centre of its
+                // cell — that is what made the Grid and List icons sit unevenly
+                // beside each other. Filling the cell and centring here keeps them
+                // on one baseline at every icon size.
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                border: none;
+                background: transparent;
+              }
 
-              path {
-                stroke: var(
-                  --_sf-at-pt-cl,
-                  #{prepareMediaVariable(--_ctm-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-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
+              // The glyph gets its own flex box so the svg sits centred without the
+              // inline-baseline gap a bare `dangerouslySetInnerHTML` span would add.
+              .btn__icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+
+                // An uploaded icon comes through as an <img> sized to its box, so the
+                // box needs a size of its own — the svg rule further down only reaches
+                // library icons, and a percentage inside a shrink-to-fit parent would
+                // otherwise resolve to nothing.
+                img {
+                  width: calc(#{$size} * 1);
+                  height: calc(#{$size} * 1);
+                  object-fit: contain;
+                }
               }
-            }
 
-            &:first-of-type {
-              border-radius: 4px 0 0 4px;
-            }
-            &:last-of-type {
-              border-radius: 0 4px 4px 0;
+              // &:hover {
+              //   background-color: var(--_gray-100);
+              // }
+
+              &.active {
+                // --_sf-at-pt-cl: var(--_gray-700);
+                --_sf-at-btn-size: #{prepareMediaVariable(
+                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-se,
+                    var(--_width-20)
+                  )};
+                --_sf-at-pt-cl: #{prepareMediaVariable(
+                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+                    var(--_gray-700)
+                  )};
+                --_sf-at-btn-bd: #{prepareMediaVariable(
+                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+                    var(--_gray-200)
+                  )};
+                // Same re-pointing trick as the icon vars above: the padding and
+                // shadow declarations stay written once and simply re-resolve
+                // against the selected state's values.
+                --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-pg, 0)};
+                --_sf-at-btn-sw: #{prepareMediaVariable(
+                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-ae,
+                    0 0
+                  )}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-br, 0)}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-sd, 0)}
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-cr, transparent)};
+                // background: var(--_gray-200);
+              }
+              // &.active {
+              //   background-color: #ced4f6;
+              //   button {
+              //     svg {
+              //       path {
+              //         stroke: var(--_primary-500);
+              //       }
+              //     }
+              //   }
+              // }
+              // &:first-child {
+              //   border-right: 1px solid var(--_gray-200);
+              // }
+
+              svg {
+                width: calc(#{$size} * 1);
+                height: calc(#{$size} * 1);
+
+                path {
+                  stroke: var(
+                    --_sf-at-pt-cl,
+                    #{prepareMediaVariable(--_ctm-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-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
+                }
+              }
+
+              &:first-of-type {
+                border-radius: 4px 0 0 4px;
+              }
+              &:last-of-type {
+                border-radius: 0 4px 4px 0;
+              }
             }
           }
-        }
         // products header styles
         .showcase__header {
           display: flex;

package/dist/allocations-quota-details.scss

@@ -112,22 +112,27 @@ $overflowSelector: ".flex__overflow";
 
       .product__list__item {
         position: relative;
+        // The rule is a pseudo-element and takes no space of its own, so a wide one grew
+        // back over the item beside it — see dividerGapReserve in functions.scss.
+        &:not(:last-child) {
+          @include dividerGapReserve($shapeSize, right);
+        }
         &:not(:last-child)::after {
           content: "";
           width: $shapeSize;
           height: 100%;
           position: absolute;
-          right: calc((-1 * var(--_sf-gp) / 2) - (#{$shapeSize} / 2));
+          right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
           background-color: $shapeColor;
         }
 
         // Divider item (Divider -> Item Style). Same geometry as the standalone
-        // element: the rule's centre sits at -(gap/2) from the item's right edge,
-        // so the marker is pinned there and translated half its own width back.
+        // element: the rule's centre sits at -(gap/2) - (width/2) from the item's right
+        // edge, so the marker is pinned there and translated half its own width back.
         .divider__marker {
           position: absolute;
           top: 50%;
-          right: calc(-1 * var(--_sf-gp, 0px) / 2);
+          right: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
           transform: translate(50%, -50%);
           display: flex;
           align-items: center;

package/dist/allocations.scss

@@ -1602,10 +1602,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               background: transparent;
               color: var(--_sf-bmm-cr, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-cr));
               font-family: var(--_sf-bmm-ft-fy, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-fy));
-              text-transform: var(
-                --_sf-bmm-tt-tm,
-                prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm)
-              );
+              text-transform: var(--_sf-bmm-tt-tm, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm));
               word-wrap: var(--_sf-bmm-wd-wp, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-wp));
               word-break: var(--_sf-bmm-wd-bk, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-bk));
               font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));

package/dist/animation-control.scss

@@ -1,23 +1,23 @@
-@use "sass:map";
-@use "sass:list";
-
-$animSelector: ".animate__animated";
-$animCommonSelector: "[data-anim-id='flex-animation-element']";
-
-@mixin FlexAnimationModuleStyles() {
-  @media (prefers-reduced-motion: reduce) {
-    #{$animSelector} {
-      animation: none !important;
-    }
-  }
-  #{$animCommonSelector} {
-    &:not(#{$animSelector}) {
-      opacity: 0;
-    }
-
-    &#{$animSelector} {
-      animation-fill-mode: backwards;
-      animation-delay: calc(1ms * var(--_ctm-flex-anim-delay, 1));
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$animSelector: ".animate__animated";
+$animCommonSelector: "[data-anim-id='flex-animation-element']";
+
+@mixin FlexAnimationModuleStyles() {
+  @media (prefers-reduced-motion: reduce) {
+    #{$animSelector} {
+      animation: none !important;
+    }
+  }
+  #{$animCommonSelector} {
+    &:not(#{$animSelector}) {
+      opacity: 0;
+    }
+
+    &#{$animSelector} {
+      animation-fill-mode: backwards;
+      animation-delay: calc(1ms * var(--_ctm-flex-anim-delay, 1));
+    }
+  }
+}