@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

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/menu-v2.scss

@@ -34,6 +34,7 @@ $defaultValues: (
   position: relative;
   display: var(--_d-flex);
   justify-content: prepareMediaVariable(--_ctm-dn-hr-os-vl-at);
+
   & > div {
     &#{$wrapper} {
       position: absolute;
@@ -73,6 +74,7 @@ $defaultValues: (
         width: 100%;
         flex-direction: column;
         gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
+
         & > #{$subMenuContainer} {
           width: 100% !important;
           position: static !important;
@@ -161,12 +163,14 @@ $defaultValues: (
               border-width: prepareMediaVariable(--_ctm-dn-mu-cr-br-wh);
               border-style: prepareMediaVariable(--_ctm-dn-mu-cr-br-se);
             }
+
             &:is([data-show-boxshadow="true"] > *) {
               box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae)
                 prepareMediaVariable(--_ctm-dn-mu-cr-sw-br)
                 prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd)
                 prepareMediaVariable(--_ctm-dn-mu-cr-sw-cr);
             }
+
             & > div {
               &#{$menuItem} {
                 position: relative;
@@ -184,11 +188,13 @@ $defaultValues: (
                 );
                 display: var(--_d-flex);
                 align-items: center;
+
                 &:is(#{$vtl} *) {
                   align-items: flex-start;
                   flex-direction: column;
                   gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
                 }
+
                 &:hover {
                   --_sf-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-pg)};
                   --_sf-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-bd-cr)};
@@ -212,7 +218,13 @@ $defaultValues: (
                   --_sf-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-tt-an)};
                   --_sf-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-lr-sg)};
                   --_sf-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-le-ht)};
+
+                  // Dropdown icon (size/color) hover overrides — consumed by
+                  // the .flex__menu__item__icon svg cascade below.
+                  --_sf-it-hr-isz: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-se)};
+                  --_sf-it-hr-icr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-c1)};
                 }
+
                 &.active {
                   --_sf-it-at-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-pg)};
                   --_sf-it-at-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-bd-cr)};
@@ -235,6 +247,10 @@ $defaultValues: (
                   --_sf-it-at-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-tt-an)};
                   --_sf-it-at-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-lr-sg)};
                   --_sf-it-at-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-le-ht)};
+
+                  // Dropdown icon (size/color) selected-state overrides.
+                  --_sf-it-at-isz: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-se)};
+                  --_sf-it-at-icr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-c1)};
                 }
 
                 &[data-show-border="true"] {
@@ -251,6 +267,7 @@ $defaultValues: (
                     var(--_sf-it-hr-bs, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-se))
                   );
                 }
+
                 &[data-show-boxshadow="true"] {
                   box-shadow: var(
                       --_sf-it-at-bsa,
@@ -275,6 +292,7 @@ $defaultValues: (
                   justify-content: space-between;
                   align-items: center;
                   gap: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp);
+
                   & > span {
                     display: var(--_d-flex);
                     font-family: var(
@@ -321,15 +339,34 @@ $defaultValues: (
                       &[data-rotate="true"] {
                         --_sf-svg-tr: 180deg;
                       }
+
                       svg {
-                        width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se);
-                        height: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se);
+                        width: var(
+                          --_sf-it-at-isz,
+                          var(
+                            --_sf-it-hr-isz,
+                            #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}
+                          )
+                        );
+                        height: var(
+                          --_sf-it-at-isz,
+                          var(
+                            --_sf-it-hr-isz,
+                            #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}
+                          )
+                        );
                         transform: rotate(#{var(--_sf-svg-tr, 0deg)});
                         transition: transform var(--_transition-duration)
                           var(--_transition-timing-function);
 
                         path {
-                          stroke: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1);
+                          stroke: var(
+                            --_sf-it-at-icr,
+                            var(
+                              --_sf-it-hr-icr,
+                              #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}
+                            )
+                          );
                         }
                       }
                     }
@@ -356,6 +393,7 @@ $defaultValues: (
                       transform: translateX(-50%);
                       z-index: 2;
                     }
+
                     &:is(#{$vtl} *) {
                       width: 100%;
                     }
@@ -379,6 +417,7 @@ $defaultValues: (
                       border-color: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-cr);
                       border-style: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-se);
                     }
+
                     &[data-show-boxshadow="true"] {
                       box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
                         prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
@@ -436,6 +475,7 @@ $defaultValues: (
                             )
                           );
                         }
+
                         &[data-show-boxshadow="true"] {
                           box-shadow: var(
                               --_sf-sb-it-at-bsa,
@@ -524,6 +564,7 @@ $defaultValues: (
                               --_ctm-dn-sb-mu-im-se-hr-se-le-ht
                             )};
                         }
+
                         &.active {
                           --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
                           --_sf-sb-it-at-bd: #{prepareMediaVariable(
@@ -590,6 +631,8 @@ $defaultValues: (
                             display: var(--_d-flex);
 
                             &#{$subMenuItemText} {
+                              width: 100%;
+                              flex: 1 1 auto;
                               font-family: var(
                                 --_sf-it-at-ff,
                                 var(
@@ -668,6 +711,7 @@ $defaultValues: (
             }
           }
         }
+
         & > #{$hamburger} {
           display: var(--_d-none);
           padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-pg)});
@@ -690,13 +734,16 @@ $defaultValues: (
           &:hover {
             & > span {
             }
+
             svg {
               --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
+
               path {
                 --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
                 --_sf-hm-hr-ic-swh: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-se-wh)};
               }
             }
+
             // --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
             // --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
 
@@ -719,6 +766,7 @@ $defaultValues: (
             align-items: center;
             justify-content: center;
           }
+
           svg {
             width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
             height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});