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

package/dist/marchandiserSets.scss

@@ -89,6 +89,40 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     // );
     min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
 
+    // Layout padding, and the design section's border and shadow. None of these were
+    // consumed here before — the schema declares all of them, but this stylesheet only
+    // handled width, margin, min-height and the background, so Padding, Border Style,
+    // Border Radius and Box Shadow each had nothing reading the value they wrote.
+    // Every variable carries an explicit fallback so elements saved before this keep
+    // rendering bare rather than inheriting the parent's border or background.
+    padding: prepareMediaVariable(--_ctm-march-lt-pg, 0);
+    // Padding and border are drawn inside the width and height set in layout instead of
+    // adding to them, so the element keeps the size the user asked for.
+    box-sizing: border-box;
+
+    border-color: prepareMediaVariable(--_ctm-march-dn-br-cr, transparent);
+    border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
+    border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
+    border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
+
+    box-shadow: var(
+      --_show-shadow,
+      prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-br, 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-cr, transparent)
+    );
+
+    // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
+    // element since the properties above are painted from variables.
+    &[data-show-border="false"] {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;
     // }

package/dist/product-actions.scss

@@ -44,6 +44,14 @@
         var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
       );
 
+      // Widget Style's "Show Border" switch. The border above is painted from CSS
+      // variables, so the switch arrives as a data attribute and the width is zeroed
+      // here — same approach as the popover's border switch further down.
+      &[data-widget-border="false"] {
+        border-width: 0;
+        border-style: none;
+      }
+
       box-shadow: var(
         --_show-shadow,
         var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
@@ -286,6 +294,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-se-wh, 1);
               }
             }
           }
@@ -509,6 +518,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-by-nw-dt-se-se-wh, 1);
               }
             }
           }
@@ -726,6 +736,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-wt-dt-se-se-wh, 1);
               }
             }
           }
@@ -942,6 +953,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ce-dt-se-se-wh, 1);
               }
             }
           }
@@ -1167,6 +1179,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-se-wh, 1);
               }
             }
           }
@@ -1425,6 +1438,7 @@
                   --_sf-hr-in-c1,
                   prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1)
                 );
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-se-wh, 1);
               }
             }
           }
@@ -1643,6 +1657,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
               }
             }
           }
@@ -1858,6 +1873,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
               }
             }
           }
@@ -2073,6 +2089,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
               }
             }
           }
@@ -2321,6 +2338,11 @@
         }
       }
 
+      // Horizontal side of the popover, from design > Popover Style > Popover Position.
+      // Only the side changes — the vertical placement below is left to the display
+      // style, so a vertically stacked list still opens beside its trigger and a
+      // horizontal one still opens underneath it. "Right" is the original behaviour and
+      // stays the default, so elements saved before this control are unaffected.
       &[data-display-style="Stack Vertically"] {
         .popover-box {
           left: 100%;
@@ -2328,12 +2350,43 @@
           margin-left: 6px;
           top: 0;
         }
+
+        // Beside the trigger, on its left instead of its right.
+        .popover-container[data-popover-position="Left"] .popover-box {
+          left: auto;
+          right: 100%;
+          margin-left: 0;
+          margin-right: 6px;
+        }
       }
       &[data-display-style="Stack Horizontally"] {
         .popover-box {
           right: 0;
           margin-top: 6px;
         }
+
+        // Under the trigger, aligned to its left edge instead of its right.
+        .popover-container[data-popover-position="Left"] .popover-box {
+          right: auto;
+          left: 0;
+        }
+      }
+
+      // "Show Border" switch for the popover. The border is painted from CSS variables
+      // above, so the switch arrives as a data attribute and the width is zeroed here.
+      // Placed after the .popover-box rules and one attribute deeper, so it wins.
+      .popover-container[data-popover-border="false"] .popover-box {
+        border-width: 0;
+        border-style: none;
+      }
+
+      // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
+      // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
+      .popover-container[data-popover-position="Left"] .popover-arrow {
+        left: auto;
+        right: -5px;
+        box-shadow: 1px 1px 0px
+          var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
       }
     }
   }

package/dist/product-basic-elements.scss

@@ -39,6 +39,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -128,7 +131,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -179,6 +190,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
 
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
@@ -287,7 +301,11 @@ $overflowSelector: ".flex__overflow";
         );
         text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
         letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-        line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+        // Line box guard — see the note on the other groups in this file.
+        line-height: max(
+          var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+          1em
+        );
         text-decoration: var(
           --_sf-hr-tt-dn,
           var(
@@ -329,6 +347,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -402,7 +423,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -453,6 +482,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -526,7 +558,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -577,6 +617,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -696,6 +739,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       // height: 100%;
 
       border-color: var(

package/dist/productDetails.scss

@@ -97,6 +97,39 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     // );
     min-height: var(--_ctm-mob-prod-lt-ht, var(--_ctm-tab-prod-lt-ht, var(--_ctm-prod-lt-ht)));
 
+    // Layout padding, and the design section's border and shadow. None of these were
+    // consumed here before — the schema declares all of them, but this stylesheet only
+    // handled width, margin, min-height and the background, so Padding, Border Style,
+    // Border Radius and Box Shadow each had nothing reading the value they wrote.
+    // Every variable carries an explicit fallback so elements saved before this keep
+    // rendering bare rather than inheriting the parent's border or background.
+    padding: prepareMediaVariable(--_ctm-prod-lt-pg, 0);
+    // Padding and border are drawn inside the width and height set in layout instead of
+    // adding to them, so the element keeps the size the user asked for.
+    box-sizing: border-box;
+
+    border-color: prepareMediaVariable(--_ctm-prod-dn-br-cr, transparent);
+    border-style: prepareMediaVariable(--_ctm-prod-dn-br-se, none);
+    border-width: prepareMediaVariable(--_ctm-prod-dn-br-wh, 0);
+    border-radius: prepareMediaVariable(--_ctm-prod-dn-br-rs, 0);
+
+    box-shadow: var(
+      --_show-shadow,
+      prepareMediaVariable(--_ctm-prod-dn-sw-ae, 0 0) prepareMediaVariable(--_ctm-prod-dn-sw-br, 0)
+        prepareMediaVariable(--_ctm-prod-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-prod-dn-sw-cr, transparent)
+    );
+
+    // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
+    // element since the properties above are painted from variables.
+    &[data-show-border="false"] {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;
     // }

package/dist/quick-links.scss

@@ -78,7 +78,6 @@
         border-width: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh);
         border-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se);
-        border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
       }
     }
 
@@ -94,7 +93,6 @@
         border-width: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-wh);
         border-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-se);
-        border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
       }
     }
 
@@ -185,6 +183,7 @@
         gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
       }
     }
+
     &[data-display-style="Wrap Horizontal"] {
       .quick__links__container .items__container {
         display: flex;
@@ -199,45 +198,54 @@
         flex-direction: column;
       }
     }
+
     &[data-text-position="bottom"] {
       .quick__links__container {
         flex-direction: column-reverse;
       }
     }
+
     &[data-text-position="left"] {
       .quick__links__container {
         flex-direction: row;
       }
+
       &[data-widget-alignment="top"] {
         .quick__links__container {
           align-items: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .quick__links__container {
           align-items: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .quick__links__container {
           align-items: flex-end;
         }
       }
     }
+
     &[data-text-position="right"] {
       .quick__links__container {
         flex-direction: row-reverse;
       }
+
       &[data-widget-alignment="top"] {
         .quick__links__container {
           align-items: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .quick__links__container {
           align-items: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .quick__links__container {
           align-items: flex-end;
@@ -297,11 +305,13 @@
     &[data-content-shadow="false"] {
       --_show-text-content-shadow: none;
     }
+
     &[data-icon-background-shape="circle"] {
       .video__icon {
         border-radius: 50%;
       }
     }
+
     &[data-icon-background-shape="rectange"] {
       .video__icon {
         border-radius: 6px;
@@ -398,6 +408,7 @@
               var(--_ctm-tab-dn-qk-ls-tt-cr-dn-sw-cr, var(--_ctm-dn-qk-ls-tt-cr-dn-sw-cr))
             )
         );
+
         h3 {
           font-family: prepareMediaVariable(--_ctm-dn-qk-ls-wt-dn-ft-fy);
           font-size: prepareMediaVariable(--_ctm-dn-qk-ls-wt-dn-ft-se);
@@ -502,6 +513,10 @@
       }
 
       .items__container {
+        .dropdown__container {
+          width: prepareMediaVariable(--_ctm-lt-dn-wh);
+        }
+
         .links__item,
         .dropdown__container .est__dropdown__main .est__dropdown .list .list__option {
           display: block;
@@ -517,6 +532,7 @@
           background-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr);
           padding: prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg);
           width: fit-content;
+          border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
 
           &:hover {
             font-family: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-fy);
@@ -530,9 +546,11 @@
             line-height: prepareMediaVariable(--_ctm-dn-im-se-hr-se-le-ht);
             background-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-bd-cr);
             padding: prepareMediaVariable(--_ctm-dn-im-se-hr-se-pg);
+            border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
           }
         }
       }
+
       .placeholder__text {
         display: flex !important;
         justify-content: space-between !important;
@@ -543,12 +561,14 @@
         background-color: #fff !important;
         width: 100% !important;
       }
+
       .est__dropdown .list {
         gap: var(
           --_ctm-mob-lt-dn-gp-bn-is,
           var(--_ctm-tab-lt-dn-gp-bn-is, var(--_ctm-lt-dn-gp-bn-is))
         );
       }
+
       .items__container {
         .dropdown__container {
           .est__dropdown__main {
@@ -561,6 +581,7 @@
                   padding: 0px !important;
                   background-color: transparent;
                 }
+
                 .list {
                   width: var(
                     --_ctm-mob-lt-dn-wh,