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

package/dist/profile.scss

@@ -29,6 +29,7 @@ $overflowSelector: ".flex__overflow";
       // align-items: center;
       // justify-content: center;
     }
+
     &[data-layout-alignment="horizontal"] {
       .profile__container > .profile__section {
         flex-direction: row;
@@ -38,12 +39,17 @@ $overflowSelector: ".flex__overflow";
     }
 
     &[data-layout-alignment="vertical"] {
+      .profile__container {
+        height: 100%;
+      }
+
       .profile__container > .profile__section {
         flex-direction: column;
         align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);
         justify-content: prepareMediaVariable(--_ctm-lt-an-is, center);
       }
     }
+
     &[data-show-text-avatar-border="true"] {
       .profile__avatar__initials {
         border-color: prepareMediaVariable(--_ctm-dn-tt-ar-br-cr);
@@ -72,6 +78,7 @@ $overflowSelector: ".flex__overflow";
     &[data-widget-shadow="false"] {
       --_show-shadow: none;
     }
+
     .profile__container {
       display: flex;
       justify-content: space-between;
@@ -93,6 +100,7 @@ $overflowSelector: ".flex__overflow";
         var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
       );
       min-height: prepareMediaVariable(--_ctm-lt-ht);
+
       .profile__section {
         position: relative;
         cursor: pointer;
@@ -108,6 +116,7 @@ $overflowSelector: ".flex__overflow";
           width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
           height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
           transition: rotate 0.4s ease-in-out;
+
           svg {
             width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
             height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
@@ -152,6 +161,7 @@ $overflowSelector: ".flex__overflow";
             }
           }
         }
+
         .profile__avatar__initials {
           // width: prepareMediaVariable(--_ctm-lt-tt-ar-se);
           // height: prepareMediaVariable(--_ctm-lt-tt-ar-se);
@@ -162,10 +172,12 @@ $overflowSelector: ".flex__overflow";
           font-family: prepareMediaVariable(--_ctm-dn-tt-ar-ft-fy);
           word-wrap: prepareMediaVariable(--_ctm-dn-tt-ar-wd-wp);
           word-break: prepareMediaVariable(--_ctm-dn-tt-ar-wd-bk);
+
           &.flex__overflow {
             white-space: normal;
             @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
           }
+
           font-size: prepareMediaVariable(--_ctm-dn-tt-ar-ft-se);
           color: prepareMediaVariable(--_ctm-dn-tt-ar-cr);
           font-weight: prepareMediaVariable(--_ctm-dn-tt-ar-ft-wt);
@@ -201,6 +213,7 @@ $overflowSelector: ".flex__overflow";
             }
           }
         }
+
         // svg {
         //   path {
         //     stroke: var(
@@ -218,6 +231,7 @@ $overflowSelector: ".flex__overflow";
           flex-direction: column;
           min-width: 0;
           max-width: 100%;
+
           // list-style: none;
           // line-height: 18px;
           .profile__label {
@@ -268,6 +282,7 @@ $overflowSelector: ".flex__overflow";
               @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
             }
           }
+
           .profile__icon {
             // font-weight: 600;
             // font-size: 16px;
@@ -320,6 +335,7 @@ $overflowSelector: ".flex__overflow";
           }
         }
       }
+
       .expand__icon {
         width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
         height: auto;
@@ -341,11 +357,13 @@ $overflowSelector: ".flex__overflow";
             stroke-width: prepareMediaVariable(--_ctm-dn-ed-in-se-wh);
           }
         }
+
         &.open {
           transform: rotate(180deg);
         }
       }
     }
+
     .add_order_menu {
       display: flex;
       flex-direction: column;
@@ -363,17 +381,20 @@ $overflowSelector: ".flex__overflow";
       overflow: hidden;
       max-height: 200px;
       overflow-y: auto;
+
       &[data-show-items-container-border="true"] {
         border-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-se);
         border-width: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-wh);
       }
+
       &[data-show-items-container-shadow="true"] {
         box-shadow: prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-ae)
           prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-br)
           prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-sd)
           prepareMediaVariable(--_ctm-dn-dn-is-cr-sw-cr);
       }
+
       &.show__panel {
         animation: slideUp 0.4s ease-in-out;
       }
@@ -407,6 +428,7 @@ $overflowSelector: ".flex__overflow";
           }
         }
       }
+
       // font-size: 15px;
       // font-weight: 500;
       // color: #1f2937;
@@ -437,6 +459,7 @@ $overflowSelector: ".flex__overflow";
       &[data-dropdown-items-default-overflow="true"] .add_order_item__label {
         @include restrictToLinesShow(#{var(--_sf-dropdown-line-clamp, 1)});
       }
+
       &[data-dropdown-items-default-border="true"] {
         border-color: var(
           --_sf-hr-br-cr,
@@ -460,6 +483,7 @@ $overflowSelector: ".flex__overflow";
           )
         );
       }
+
       &[data-dropdown-items-default-shadow="true"] {
         box-shadow: var(
           --_show-shadow-clear-all,
@@ -481,6 +505,7 @@ $overflowSelector: ".flex__overflow";
             )
         );
       }
+
       // background-color: #f5f7ff;
       // color: #3b49df;
 
@@ -544,6 +569,7 @@ $overflowSelector: ".flex__overflow";
           var(--_ctm-tab-dn-dn-is-dt-se-wd-bk, var(--_ctm-dn-dn-is-dt-se-wd-bk))
         )
       );
+
       &.flex__overflow {
         white-space: normal;
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -628,6 +654,7 @@ $overflowSelector: ".flex__overflow";
             )
           );
         }
+
         &[data-dropdown-items-hover-shadow="true"] {
           box-shadow: var(
             --_show-shadow-clear-all,
@@ -649,6 +676,7 @@ $overflowSelector: ".flex__overflow";
               )
           );
         }
+
         // background-color: #f5f7ff;
         // color: #3b49df;
 

package/dist/quick-inventory-check.scss

@@ -101,6 +101,11 @@
         &[data-show-dividers="true"] {
           .product__list__item {
             position: relative;
+            // The divider is a pseudo-element and takes no space of its own, so a thick
+            // one grew back over the item beside it — see dividerGapReserve in functions.scss.
+            &:not(:last-child) {
+              @include dividerGapReserve(--_ctm-dn-dr-dr-wh, right);
+            }
             &:not(:last-child)::after {
               content: "";
               width: var(
@@ -109,19 +114,7 @@
               );
               height: 100%;
               position: absolute;
-              right: calc(
-                (
-                    -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
-                      2
-                  ) -
-                  (
-                    var(
-                        --_ctm-mob-dn-dr-dr-wh,
-                        var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-                      ) /
-                      2
-                  )
-              );
+              right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-dr-dr-wh);
               background-color: var(
                 --_ctm-mob-dn-dr-dr-cr,
                 var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))

package/dist/quick-links.scss

@@ -547,6 +547,10 @@
           width: fit-content;
           border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
 
+          &[data-has-link="true"] {
+            cursor: pointer;
+          }
+
           &:hover {
             font-family: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-fy);
             text-transform: prepareMediaVariable(--_ctm-dn-im-se-hr-se-tt-tm);

package/dist/quick-order-pad.scss

@@ -378,8 +378,8 @@ $input-padding: 10px 12px;
                       //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                       //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                       // );
-                      // Overrides the stroke-width presentation attribute baked into the icon markup.
-                      stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
+  // Overrides the stroke-width presentation attribute baked into the icon markup.
+  stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
                       stroke: var(--_thm-cs-be-se-1);
                     }
                   }

package/dist/quota-details.scss

@@ -132,32 +132,28 @@ $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(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
-                      2
-                  ) -
-                  (#{$shapeSize} / 2)
-              );
+              right: dividerGapOffset(--_ctm-lt-im-sg, $shapeSize);
               background-color: $shapeColor;
             }
 
-            // Divider item (Divider -> Item Style). The rule above spans from
-            // `right: R` for `dividerWidth`, with R = -(gap/2) - (width/2), so its
-            // centre sits at -(gap/2) — the marker is pinned there and translated
-            // half its own width back, leaving it centred on the rule.
+            // Divider item (Divider -> Item Style). The rule above spans the width it was
+            // given starting half the item spacing past the item, so its centre sits at
+            // -(gap/2) - (width/2) — the marker is pinned there and translated half its
+            // own width back, leaving it centred on the rule.
             .divider__marker {
               position: absolute;
               top: 50%;
-              right: calc(
-                -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 0px))) /
-                  2
-              );
+              right: dividerMarkerOffset(--_ctm-lt-im-sg, $shapeSize);
               transform: translate(50%, -50%);
               display: flex;
               align-items: center;

package/dist/repeater copy.scss

@@ -445,6 +445,18 @@ $rai: "repeater-advertise-item";
                 --_ctm-mob-dn-by-nw-dt-se-ft-fy,
                 var(--_ctm-tab-dn-by-nw-dt-se-ft-fy, var(--_ctm-dn-by-nw-dt-se-ft-fy))
               );
+              text-transform: var(
+                --_ctm-mob-dn-by-nw-dt-se-tt-tm,
+                var(--_ctm-tab-dn-by-nw-dt-se-tt-tm, var(--_ctm-dn-by-nw-dt-se-tt-tm))
+              );
+              word-wrap: var(
+                --_ctm-mob-dn-by-nw-dt-se-wd-wp,
+                var(--_ctm-tab-dn-by-nw-dt-se-wd-wp, var(--_ctm-dn-by-nw-dt-se-wd-wp))
+              );
+              word-break: var(
+                --_ctm-mob-dn-by-nw-dt-se-wd-bk,
+                var(--_ctm-tab-dn-by-nw-dt-se-wd-bk, var(--_ctm-dn-by-nw-dt-se-wd-bk))
+              );
               font-size: var(
                 --_ctm-mob-dn-by-nw-dt-se-ft-se,
                 var(--_ctm-tab-dn-by-nw-dt-se-ft-se, var(--_ctm-dn-by-nw-dt-se-ft-se))
@@ -584,6 +596,18 @@ $rai: "repeater-advertise-item";
                     --_ctm-mob-dn-by-nw-hr-se-ft-fy,
                     var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
                   );
+                  text-transform: var(
+                    --_ctm-mob-dn-by-nw-hr-se-tt-tm,
+                    var(--_ctm-tab-dn-by-nw-hr-se-tt-tm, var(--_ctm-dn-by-nw-hr-se-tt-tm))
+                  );
+                  word-wrap: var(
+                    --_ctm-mob-dn-by-nw-hr-se-wd-wp,
+                    var(--_ctm-tab-dn-by-nw-hr-se-wd-wp, var(--_ctm-dn-by-nw-hr-se-wd-wp))
+                  );
+                  word-break: var(
+                    --_ctm-mob-dn-by-nw-hr-se-wd-bk,
+                    var(--_ctm-tab-dn-by-nw-hr-se-wd-bk, var(--_ctm-dn-by-nw-hr-se-wd-bk))
+                  );
                   font-size: var(
                     --_ctm-mob-dn-by-nw-hr-se-ft-se,
                     var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))

package/dist/repeater-embla-controls.scss

@@ -104,7 +104,11 @@
         cursor: auto;
       }
 
-      & > svg {
+      // 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 {
         width: calc(var(--_sf-ic-sz-nn) * 0.5);
         height: calc(var(--_sf-ic-sz-nn) * 0.5);
         display: flex;
@@ -163,7 +167,10 @@
           width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
           height: var(--_sf-ed-vl-sz, 10px);
           border-radius: var(--_sf-dt-bt-at, 50%);
-          background: var(--_sf-nv-pg-bg, #fff);
+          // Inactive dot fill. `--_sf-dt-ie-bg` is the per-element hook (the layouter
+          // sets it from its Pagination Dots section); unset everywhere else, which
+          // leaves the original default.
+          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, #fff));
 
           &:not(.embla__dot--selected) {
             border: 1px solid color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 30%, transparent);
@@ -172,7 +179,7 @@
           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));
-          background: var(--_sf-nv-pg-bg, var(--_dt-in-active-color));
+          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, var(--_dt-in-active-color)));
 
           &:not(.embla__dot--selected) {
             --_sf-br-vl-t3: 16px;
@@ -186,7 +193,9 @@
         }
 
         &.embla__dot--selected {
-          --_sf-nv-pg-bg: var(--_sf-sl-ct-ic-dt-at-cl, #162578);
+          // Selected dot fill. `--_sf-dt-ae-bg` is the per-element hook; without it the
+          // dot keeps following Control Active Color as before.
+          --_sf-nv-pg-bg: var(--_sf-dt-ae-bg, var(--_sf-sl-ct-ic-dt-at-cl, #162578));
           --_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);