@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

package/dist/menu-v2.scss

@@ -218,6 +218,9 @@ $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)};
+                  --_sf-it-hr-ttm: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-tt-tm)};
+                  --_sf-it-hr-wwp: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-wd-wp)};
+                  --_sf-it-hr-wbk: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-wd-bk)};
 
                   // Dropdown icon (size/color) hover overrides — consumed by
                   // the .flex__menu__item__icon svg cascade below.
@@ -247,6 +250,9 @@ $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)};
+                  --_sf-it-at-ttm: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-tt-tm)};
+                  --_sf-it-at-wwp: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-wd-wp)};
+                  --_sf-it-at-wbk: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-wd-bk)};
 
                   // Dropdown icon (size/color) selected-state overrides.
                   --_sf-it-at-isz: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-se)};
@@ -334,6 +340,27 @@ $defaultValues: (
                       --_sf-it-at-lh,
                       var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)})
                     );
+                    text-transform: var(
+                      --_sf-it-at-ttm,
+                      var(
+                        --_sf-it-hr-ttm,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-tm, none)}
+                      )
+                    );
+                    word-wrap: var(
+                      --_sf-it-at-wwp,
+                      var(
+                        --_sf-it-hr-wwp,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-wp, normal)}
+                      )
+                    );
+                    word-break: var(
+                      --_sf-it-at-wbk,
+                      var(
+                        --_sf-it-hr-wbk,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-bk, normal)}
+                      )
+                    );
 
                     &.flex__menu__item__icon {
                       &[data-rotate="true"] {
@@ -367,6 +394,8 @@ $defaultValues: (
                               #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}
                             )
                           );
+                          // Overrides the stroke-width presentation attribute baked into the icon markup.
+                          stroke-width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-se-wh, 1.25);
                         }
                       }
                     }
@@ -563,6 +592,15 @@ $defaultValues: (
                           --_sf-sb-it-hr-lh: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-hr-se-le-ht
                             )};
+                          --_sf-sb-it-hr-ttm: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-tt-tm
+                            )};
+                          --_sf-sb-it-hr-wwp: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-wd-wp
+                            )};
+                          --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-wd-bk
+                            )};
                         }
 
                         &.active {
@@ -620,6 +658,15 @@ $defaultValues: (
                           --_sf-sb-it-at-lh: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-sd-se-le-ht
                             )};
+                          --_sf-sb-it-at-ttm: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-tt-tm
+                            )};
+                          --_sf-sb-it-at-wwp: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-wd-wp
+                            )};
+                          --_sf-sb-it-at-wbk: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-wd-bk
+                            )};
                         }
 
                         & > a {
@@ -696,6 +743,27 @@ $defaultValues: (
                                   #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
                                 )
                               );
+                              text-transform: var(
+                                --_sf-sb-it-at-ttm,
+                                var(
+                                  --_sf-sb-it-hr-ttm,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm, none)}
+                                )
+                              );
+                              word-wrap: var(
+                                --_sf-sb-it-at-wwp,
+                                var(
+                                  --_sf-sb-it-hr-wwp,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp, normal)}
+                                )
+                              );
+                              word-break: var(
+                                --_sf-sb-it-at-wbk,
+                                var(
+                                  --_sf-sb-it-hr-wbk,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk, normal)}
+                                )
+                              );
                               display: -webkit-box;
                               -webkit-line-clamp: 1;
                               -webkit-box-orient: vertical;
@@ -737,11 +805,10 @@ $defaultValues: (
 
             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)};
-              }
+              // Published on the <svg> rather than on <path>: custom properties
+              // inherit, so whatever shapes the glyph is drawn with will read them.
+              --_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)};
@@ -771,7 +838,17 @@ $defaultValues: (
             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)});
 
-            path {
+            // Reaches every stroked shape, not just <path>: the built-in glyphs are
+            // paths, but a custom (Sirv-hosted) hamburger is arbitrary markup and is
+            // inlined by SirvIcon just the same, so <line>/<rect>/<circle> icons have
+            // to pick up Icon Color and Stroke Width too.
+            path,
+            line,
+            polyline,
+            polygon,
+            circle,
+            ellipse,
+            rect {
               stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
               stroke-width: var(
                 --_sf-hm-hr-ic-swh,