@sc-360-v2/storefront-cms-library 0.5.54 → 0.5.58

package/dist/category-groups-quota-details.scss

@@ -1,4 +1,4 @@
-@use "./functions.scss" as *;
+@use "./functions.scss" as *;
 
 // Verbatim adaptation of quota-details.scss inner styles, rebound to the
 // Category Groups quotaDetails layout/design CSS-variable paths.
@@ -91,53 +91,117 @@
   .product__hilights {
     display: flex;
     align-items: center;
-    justify-content: var(
-      --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at,
-      var(
-        --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at,
-        var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at)
-      )
+    // Design > Widget Style > alignment, falling back to the Layout panel's own
+    // alignment so cards set up before the design control existed keep theirs.
+    justify-content: prepareMediaVariable(
+      --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-hl-at,
+      prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at)
     );
     gap: var(--_sf-gp);
     width: 100%;
     height: 100%;
 
     &[data-show-dividers="true"] {
+      // See quota-details.scss: Shape Size and Shape Color are the item's only two
+      // controls, Size measuring the marker's diameter or the rule's thickness. The
+      // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
+      // name — the shape vars were written with only one, which is why neither
+      // control did anything.
+      $shapeSize: prepareMediaVariable(
+        --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se,
+        prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
+      );
+      $shapeColor: prepareMediaVariable(
+        --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-cr,
+        prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
+      );
+
       .product__list__item {
         position: relative;
         &:not(:last-child)::after {
           content: "";
-          width: var(
-            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-            var(
-              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh)
-            )
-          );
+          width: $shapeSize;
           height: 100%;
           position: absolute;
-          right: calc(
-            (-1 * var(--_sf-gp) / 2) -
-              (
-                var(
-                    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-                    var(
-                      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-                      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh)
-                    )
-                  ) /
-                  2
-              )
-          );
-          background-color: var(
-            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr,
-            var(
-              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr,
-              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr)
-            )
-          );
+          right: calc((-1 * var(--_sf-gp) / 2) - (#{$shapeSize} / 2));
+          background-color: $shapeColor;
+        }
+
+        // Divider item (Divider -> Item Style). This element embeds the same Quota
+        // Details schema, so its Divider panel offers the same control and needs the
+        // same marker — otherwise it would write to keys nothing here draws.
+        .divider__marker {
+          position: absolute;
+          top: 50%;
+          right: calc(-1 * var(--_sf-gp, 0px) / 2);
+          transform: translate(50%, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1;
+
+          // 8px rather than the rule's thickness when Shape Size is absent: a marker
+          // falling back to a hairline would read as missing.
+          &[data-shape="circle"],
+          &[data-shape="square"] {
+            width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            background-color: $shapeColor;
+          }
+
+          &[data-shape="circle"] {
+            border-radius: 50%;
+          }
+
+          &[data-shape="icon"] {
+            padding-block: 2px;
+            background-color: prepareMediaVariable(
+              --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
+              #ffffff
+            );
+          }
+
+          .icon {
+            display: flex;
+
+            svg {
+              width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
+              height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
+
+              &[stroke]:not([stroke="none"]),
+              [stroke]:not([stroke="none"]) {
+                stroke: prepareMediaVariable(
+                  --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
+                  #e4e7ec
+                );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(
+                  --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-se-wh,
+                  1.25
+                );
+              }
+              &[fill]:not([fill="none"]),
+              [fill]:not([fill="none"]) {
+                fill: prepareMediaVariable(
+                  --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
+                  #e4e7ec
+                );
+              }
+            }
+          }
+        }
+
+        // Rendered inside every item; only the ones carrying a rule show it.
+        &:last-child .divider__marker {
+          display: none;
         }
       }
+
+      // A shape or icon marker REPLACES the rule rather than sitting on it, so the
+      // rule is drawn only while the separator is the plain "divider".
+      &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
+        display: none;
+      }
     }
 
     .product__list__item {
@@ -152,7 +216,10 @@
 
     .quota__left {
       .count {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
           var(
@@ -211,7 +278,10 @@
         );
       }
       .label {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
           var(
@@ -294,6 +364,11 @@
                 var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1)
               )
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(
+              --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-se-wh,
+              1.25
+            );
           }
         }
       }
@@ -301,7 +376,10 @@
 
     .days__left {
       .count {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
           var(
@@ -360,7 +438,10 @@
         );
       }
       .label {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
           var(
@@ -443,6 +524,11 @@
                 var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1)
               )
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(
+              --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-se-wh,
+              1.25
+            );
           }
         }
       }

package/dist/checkout.scss

@@ -553,6 +553,8 @@ $dark-color: #343a40;
 
                   path {
                     stroke: var(--_ctm-dn-an-tb-an-hr-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-an-tb-an-hr-se-wh, 1.25);
                   }
                 }
               }
@@ -1401,6 +1403,8 @@ $dark-color: #343a40;
 
                   path {
                     stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                   }
                 }
 
@@ -5618,6 +5622,8 @@ $dark-color: #343a40;
 
                   path {
                     stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
                   }
                 }
               }

package/dist/countdown.scss

@@ -733,6 +733,8 @@ $dividerValues: (
 
           path {
             stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-c1);
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
           }
         }
       }

package/dist/coupon.scss

@@ -172,6 +172,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_ctm-mob-dn-cn-wt-in-c1,
                       var(--_ctm-tab-dn-cn-wt-in-c1, var(--_ctm-dn-cn-wt-in-c1))
                     );
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-cn-wt-se-wh, 1.25);
                   }
                 }
               }
@@ -489,6 +491,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
                 path {
                   stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-se-wh, 1.25);
                 }
               }
             }
@@ -793,6 +797,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_sf-hr-in-c1,
                       prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1)
                     );
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-se-wh, 1.25);
                   }
                 }
               }
@@ -1174,6 +1180,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         --_sf-hr-in-c1,
                         prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-c1)
                       );
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-se-wh, 1.25);
                     }
                   }
                 }

package/dist/embroidery.scss

@@ -186,6 +186,8 @@ $apiLoader: '[data-spinner-state="loading"]';
 
               path {
                 stroke: var(--_sf-icn-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-c1));
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-se-wh, 1.25);
               }
             }
           }

package/dist/employee-bulk-order.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 // .employee_bulk_order_header {
 //   display: flex;
 //   justify-self: end;
@@ -1353,6 +1354,8 @@
                       height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                       path {
                         stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                       }
                     }
                     &:hover {
@@ -2718,6 +2721,8 @@
                       height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                       path {
                         stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
                       }
                     }
                   }

package/dist/faq.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 @use "sass:map";
 @use "sass:list";
 
@@ -314,6 +315,8 @@
                 --_ctm-mob-dn-cd-an-im-in-c1,
                 var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
               );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-cd-an-im-se-wh, 1.25);
             }
           }
         }
@@ -342,6 +345,8 @@
                   --_ctm-mob-dn-io-in-in-c1,
                   var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
               }
             }
           }
@@ -518,6 +523,8 @@
                   --_ctm-mob-dn-ed-an-im-in-c1,
                   var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ed-an-im-se-wh, 1.25);
               }
             }
           }
@@ -546,6 +553,8 @@
                     --_ctm-mob-dn-io-in-in-c1,
                     var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
                 }
               }
             }

package/dist/filters.scss

@@ -1730,6 +1730,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
                 var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1))
               );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-se-wh, 1.25);
             }
           }
         }

package/dist/form-zindex-module.scss

@@ -1,25 +1,25 @@
-@use "sass:map";
-@use "sass:list";
-
-$cls: ".react-grid-item";
-$commonCls: ".grid-item";
-
-$hazZindexList: (
-    ".input.time" : "input:focus",
-    ".input.datetime-local" : "input:focus",
-    ".input.date" : "input:focus",
-    ".select.select": ".open.fb_dropdown_panel"
-);
-
-@mixin FlexFormZindexModuleStyles(){
-    #{$cls}{
-        
-        @each $key, $value in $hazZindexList{
-            &:has(#{$value}){
-                &:has(#{$commonCls}#{$key}){
-                    z-index: 2;
-                }
-            }
-        }
-    }
+@use "sass:map";
+@use "sass:list";
+
+$cls: ".react-grid-item";
+$commonCls: ".grid-item";
+
+$hazZindexList: (
+    ".input.time" : "input:focus",
+    ".input.datetime-local" : "input:focus",
+    ".input.date" : "input:focus",
+    ".select.select": ".open.fb_dropdown_panel"
+);
+
+@mixin FlexFormZindexModuleStyles(){
+    #{$cls}{
+        
+        @each $key, $value in $hazZindexList{
+            &:has(#{$value}){
+                &:has(#{$commonCls}#{$key}){
+                    z-index: 2;
+                }
+            }
+        }
+    }
 }