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

package/dist/language-selector.scss

@@ -608,6 +608,10 @@ $widgetFontProps:
       .language__name {
         color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
         font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
         font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
         font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
         font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
@@ -655,6 +659,10 @@ $widgetFontProps:
         // the two swap in the markup as soon as an option is picked, so they have to
         // resolve identically or the text would jump on first selection.
         font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
         font-size: var(--_sf-wt-ft-se, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se));
         color: var(--_sf-wt-cr, prepareMediaVariable(--_ctm-dn-wt-pr-tt-cr));
         // color: var(--_gray-600);

package/dist/last-x-orders.scss

@@ -149,6 +149,18 @@
               --_ctm-mob-dn-qa-lt-ft-fy,
               var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
             );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm,
+              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp,
+              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk,
+              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk))
+            );
             font-size: var(
               --_ctm-mob-dn-qa-lt-ft-se,
               var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
@@ -211,6 +223,18 @@
               --_ctm-mob-dn-ds-lt-ft-fy,
               var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm,
+              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp,
+              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk,
+              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk))
+            );
             font-size: var(
               --_ctm-mob-dn-ds-lt-ft-se,
               var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))

package/dist/login.scss

@@ -298,6 +298,18 @@
             --_ctm-mob-dn-te-ft-fy,
             var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-te-tt-tm,
+            var(--_ctm-tab-dn-te-tt-tm, var(--_ctm-dn-te-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-te-wd-wp,
+            var(--_ctm-tab-dn-te-wd-wp, var(--_ctm-dn-te-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-te-wd-bk,
+            var(--_ctm-tab-dn-te-wd-bk, var(--_ctm-dn-te-wd-bk))
+          );
           color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
           font-weight: var(
             --_ctm-mob-dn-te-ft-wt,
@@ -335,6 +347,14 @@
             --_ctm-mob-dn-dn-ft-fy,
             var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-dn-tt-tm,
+            var(--_ctm-tab-dn-dn-tt-tm, var(--_ctm-dn-dn-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-dn-wd-wp,
+            var(--_ctm-tab-dn-dn-wd-wp, var(--_ctm-dn-dn-wd-wp))
+          );
           color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr)));
           font-weight: var(
             --_ctm-mob-dn-dn-ft-wt,
@@ -494,6 +514,19 @@
               --_sf-hr-ft-fy,
               prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy)
             );
+            text-transform: var(
+              --_sf-hr-tt-tm,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-tm)
+            );
+            word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-wp));
+            word-break: var(
+              --_sf-hr-wd-bk,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-bk)
+            );
+            &.flex__overflow {
+              white-space: normal;
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
 
             font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se));
 
@@ -586,6 +619,22 @@
             --_ctm-mob-dn-fm-ll-ft-fy,
             var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-fm-ll-tt-tm,
+            var(--_ctm-tab-dn-fm-ll-tt-tm, var(--_ctm-dn-fm-ll-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-fm-ll-wd-wp,
+            var(--_ctm-tab-dn-fm-ll-wd-wp, var(--_ctm-dn-fm-ll-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-fm-ll-wd-bk,
+            var(--_ctm-tab-dn-fm-ll-wd-bk, var(--_ctm-dn-fm-ll-wd-bk))
+          );
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
           color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr)));
           font-weight: var(
             --_ctm-mob-dn-fm-ll-ft-wt,
@@ -797,6 +846,18 @@
               --_ctm-mob-dn-fm-it-ft-fy,
               var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy))
             );
+            text-transform: var(
+              --_ctm-mob-dn-fm-it-tt-tm,
+              var(--_ctm-tab-dn-fm-it-tt-tm, var(--_ctm-dn-fm-it-tt-tm))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-fm-it-wd-wp,
+              var(--_ctm-tab-dn-fm-it-wd-wp, var(--_ctm-dn-fm-it-wd-wp))
+            );
+            word-break: var(
+              --_ctm-mob-dn-fm-it-wd-bk,
+              var(--_ctm-tab-dn-fm-it-wd-bk, var(--_ctm-dn-fm-it-wd-bk))
+            );
             color: var(
               --_ctm-mob-dn-fm-it-cr,
               var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
@@ -1042,6 +1103,13 @@
           color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr));
 
           font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-fy));
+          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-tm));
+          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-wp));
+          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-bk));
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
 
           font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se));
 
@@ -1454,6 +1522,22 @@
             --_sf-hr-ft-fy,
             prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-fy)
           );
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-tm)
+          );
+          word-wrap: var(
+            --_sf-hr-wd-wp,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-wp)
+          );
+          word-break: var(
+            --_sf-hr-wd-bk,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-bk)
+          );
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
 
           font-size: var(
             --_sf-hr-ft-se,
@@ -1633,6 +1717,18 @@
           --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-fy,
           var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-fy))
         );
+        text-transform: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-tm,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-tm))
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-wp,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-wp))
+        );
+        word-break: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-bk,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-bk))
+        );
         color: var(
           --_ctm-mob-dn-fm-ft-pd-ll-dt-se-cr,
           var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-cr))
@@ -1684,6 +1780,18 @@
             --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-fy,
             var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-tm,
+            var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-wp,
+            var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-bk,
+            var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-bk))
+          );
           color: var(
             --_ctm-mob-dn-fm-ft-pd-ll-hr-se-cr,
             var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-cr))

package/dist/map.scss

@@ -428,6 +428,18 @@ $data: (
             --_ctm-mob-dn-mp-wt-ft-fy,
             var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
           );
+          text-transform: var(
+            --_ctm-mob-dn-mp-wt-tt-tm,
+            var(--_ctm-tab-dn-mp-wt-tt-tm, var(--_ctm-dn-mp-wt-tt-tm, var(--_tst-dn-mp-wt-tt-tm)))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-mp-wt-wd-wp,
+            var(--_ctm-tab-dn-mp-wt-wd-wp, var(--_ctm-dn-mp-wt-wd-wp, var(--_tst-dn-mp-wt-wd-wp)))
+          );
+          word-break: var(
+            --_ctm-mob-dn-mp-wt-wd-bk,
+            var(--_ctm-tab-dn-mp-wt-wd-bk, var(--_ctm-dn-mp-wt-wd-bk, var(--_tst-dn-mp-wt-wd-bk)))
+          );
           font-size: var(
             --_ctm-mob-dn-mp-wt-ft-se,
             var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
@@ -473,6 +485,27 @@ $data: (
               var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
             )
           );
+          text-transform: var(
+            --_ctm-mob-dn-mp-wt-tt-tm-dc,
+            var(
+              --_ctm-tab-dn-mp-wt-tt-tm-dc,
+              var(--_ctm-dn-mp-wt-tt-tm-dc, var(--_tst-dn-mp-wt-tt-tm-dc))
+            )
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-mp-wt-wd-wp-dc,
+            var(
+              --_ctm-tab-dn-mp-wt-wd-wp-dc,
+              var(--_ctm-dn-mp-wt-wd-wp-dc, var(--_tst-dn-mp-wt-wd-wp-dc))
+            )
+          );
+          word-break: var(
+            --_ctm-mob-dn-mp-wt-wd-bk-dc,
+            var(
+              --_ctm-tab-dn-mp-wt-wd-bk-dc,
+              var(--_ctm-dn-mp-wt-wd-bk-dc, var(--_tst-dn-mp-wt-wd-bk-dc))
+            )
+          );
           font-size: var(
             --_ctm-mob-dn-mp-wt-ft-se-dc,
             var(
@@ -1208,6 +1241,15 @@ $data: (
         width: 100%;
         height: 100%;
         min-width: 0;
+        // design > Map Style. The map box paints its own border from that section's
+        // scope (`--_ctm-dn-mp-se-*`), independent of the widget's border on
+        // `.map-element` and the header's on `.gallery-header`. `overflow: hidden` so a
+        // rounded corner actually clips the tiles inside it.
+        overflow: hidden;
+        border-color: prepareMediaVariable(--_ctm-dn-mp-ie-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-mp-ie-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-mp-ie-br-wh);
+        border-radius: prepareMediaVariable(--_ctm-dn-mp-ie-br-rs);
         img {
           width: 100%;
           height: 100%;
@@ -1241,5 +1283,9 @@ $data: (
     &[data-pin-shadow="false"] .map-element .hotspot__container .hotspot__main .hotspot {
       box-shadow: none;
     }
+    &[data-map-border="false"] .map-element .map {
+      border-width: 0;
+      border-style: none;
+    }
   }
 }

package/dist/mega-menu.scss

@@ -231,6 +231,14 @@ $defaultValues: (
                   --_sf-it-hr-wbk: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-wd-bk)};
                   --_sf-it-hr-in-cr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-in-c1)};
                   --_sf-it-hr-in-se: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-in-se)};
+
+                  // Per-item leading icon hover overrides.
+                  --_sf-it-hr-in-cr-im: #{prepareMediaVariable(
+                      --_ctm-meg-dn-mu-im-se-hr-se-in-c1-im
+                    )};
+                  --_sf-it-hr-in-se-im: #{prepareMediaVariable(
+                      --_ctm-meg-dn-mu-im-se-hr-se-in-se-im
+                    )};
                 }
                 &.active {
                   --_sf-it-at-pd: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-pg)};
@@ -259,6 +267,14 @@ $defaultValues: (
                   --_sf-it-at-wbk: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-wd-bk)};
                   --_sf-it-at-in-cr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-in-c1)};
                   --_sf-it-at-in-se: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-in-se)};
+
+                  // Per-item leading icon selected-state overrides.
+                  --_sf-it-at-in-cr-im: #{prepareMediaVariable(
+                      --_ctm-meg-dn-mu-im-se-sd-se-in-c1-im
+                    )};
+                  --_sf-it-at-in-se-im: #{prepareMediaVariable(
+                      --_ctm-meg-dn-mu-im-se-sd-se-in-se-im
+                    )};
                 }
 
                 &[data-show-border="true"] {
@@ -323,6 +339,10 @@ $defaultValues: (
                         #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ft-fy)}
                       )
                     );
+                    &.flex__overflow {
+                      white-space: normal;
+                      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                    }
                     font-size: var(
                       --_sf-it-at-fs,
                       var(
@@ -398,6 +418,47 @@ $defaultValues: (
                       )
                     );
 
+                    // The item's own leading glyph, sized and coloured from the
+                    // `Item`-suffixed vars so it stays independent of the caret.
+                    &.flex__menu__item__leading__icon {
+                      flex: 0 0 auto;
+                      margin-inline-end: prepareMediaVariable(
+                        --_ctm-meg-dn-mu-im-se-dt-se-in-gp-im,
+                        0px
+                      );
+
+                      svg {
+                        width: var(
+                          --_sf-it-at-in-se-im,
+                          var(
+                            --_sf-it-hr-in-se-im,
+                            #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-se-im)}
+                          )
+                        );
+                        height: var(
+                          --_sf-it-at-in-se-im,
+                          var(
+                            --_sf-it-hr-in-se-im,
+                            #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-se-im)}
+                          )
+                        );
+
+                        path {
+                          stroke: var(
+                            --_sf-it-at-in-cr-im,
+                            var(
+                              --_sf-it-hr-in-cr-im,
+                              #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-c1-im)}
+                            )
+                          );
+                          stroke-width: prepareMediaVariable(
+                            --_ctm-meg-dn-mu-im-se-dt-se-se-wh-im,
+                            1.25
+                          );
+                        }
+                      }
+                    }
+
                     &.flex__menu__item__icon {
                       pointer-events: all;
                       &[data-rotate="true"] {
@@ -439,6 +500,12 @@ $defaultValues: (
                       }
                     }
                   }
+
+                  // Let the label absorb the free space when a leading icon is
+                  // present, so `space-between` does not spread the three children.
+                  & > .flex__menu__item__leading__icon + span {
+                    flex: 1 1 auto;
+                  }
                 }
 
                 & > #{$es} {

package/dist/menu-v2.scss

@@ -226,6 +226,10 @@ $defaultValues: (
                   // 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)};
+
+                  // Same, for the per-item leading icon.
+                  --_sf-it-hr-isz-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-se-im)};
+                  --_sf-it-hr-icr-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-c1-im)};
                 }
 
                 &.active {
@@ -257,6 +261,10 @@ $defaultValues: (
                   // 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)};
+
+                  // Same, for the per-item leading icon.
+                  --_sf-it-at-isz-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-se-im)};
+                  --_sf-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-c1-im)};
                 }
 
                 &[data-show-border="true"] {
@@ -305,6 +313,10 @@ $defaultValues: (
                       --_sf-it-at-ff,
                       var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)})
                     );
+                    &.flex__overflow {
+                      white-space: normal;
+                      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                    }
                     font-size: var(
                       --_sf-it-at-fs,
                       var(--_sf-it-hr-fs, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se)})
@@ -362,6 +374,48 @@ $defaultValues: (
                       )
                     );
 
+                    // The item's own leading glyph. Styled from the `Item`-suffixed
+                    // vars so it is sized and coloured independently of the caret
+                    // below, which shares this parent but reads the unsuffixed set.
+                    &.flex__menu__item__leading__icon {
+                      flex: 0 0 auto;
+                      margin-inline-end: prepareMediaVariable(
+                        --_ctm-dn-mu-im-se-dt-se-in-gp-im,
+                        0px
+                      );
+
+                      svg {
+                        width: var(
+                          --_sf-it-at-isz-im,
+                          var(
+                            --_sf-it-hr-isz-im,
+                            #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}
+                          )
+                        );
+                        height: var(
+                          --_sf-it-at-isz-im,
+                          var(
+                            --_sf-it-hr-isz-im,
+                            #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}
+                          )
+                        );
+
+                        path {
+                          stroke: var(
+                            --_sf-it-at-icr-im,
+                            var(
+                              --_sf-it-hr-icr-im,
+                              #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1-im)}
+                            )
+                          );
+                          stroke-width: prepareMediaVariable(
+                            --_ctm-dn-mu-im-se-dt-se-se-wh-im,
+                            1.25
+                          );
+                        }
+                      }
+                    }
+
                     &.flex__menu__item__icon {
                       &[data-rotate="true"] {
                         --_sf-svg-tr: 180deg;
@@ -400,6 +454,13 @@ $defaultValues: (
                       }
                     }
                   }
+
+                  // The row is `space-between`, so a third child would otherwise
+                  // spread all three apart. Letting the label absorb the free space
+                  // keeps the glyph beside it and the caret out at the edge.
+                  & > .flex__menu__item__leading__icon + span {
+                    flex: 1 1 auto;
+                  }
                 }
 
                 // Sub Item Container
@@ -601,6 +662,14 @@ $defaultValues: (
                           --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-hr-se-wd-bk
                             )};
+
+                          // Per-item leading icon hover overrides.
+                          --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-in-se-im
+                            )};
+                          --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-in-c1-im
+                            )};
                         }
 
                         &.active {
@@ -667,6 +736,14 @@ $defaultValues: (
                           --_sf-sb-it-at-wbk: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-sd-se-wd-bk
                             )};
+
+                          // Per-item leading icon selected-state overrides.
+                          --_sf-sb-it-at-isz-im: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-in-se-im
+                            )};
+                          --_sf-sb-it-at-icr-im: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-in-c1-im
+                            )};
                         }
 
                         & > a {
@@ -677,6 +754,47 @@ $defaultValues: (
                           & > span {
                             display: var(--_d-flex);
 
+                            // Per-item leading glyph, styled from the sub-menu item
+                            // scope's own `Item` vars.
+                            &.flex__sub__menu__item__leading__icon {
+                              flex: 0 0 auto;
+                              margin-inline-end: prepareMediaVariable(
+                                --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
+                                0px
+                              );
+
+                              svg {
+                                width: var(
+                                  --_sf-sb-it-at-isz-im,
+                                  var(
+                                    --_sf-sb-it-hr-isz-im,
+                                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
+                                  )
+                                );
+                                height: var(
+                                  --_sf-sb-it-at-isz-im,
+                                  var(
+                                    --_sf-sb-it-hr-isz-im,
+                                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
+                                  )
+                                );
+
+                                path {
+                                  stroke: var(
+                                    --_sf-sb-it-at-icr-im,
+                                    var(
+                                      --_sf-sb-it-hr-icr-im,
+                                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
+                                    )
+                                  );
+                                  stroke-width: prepareMediaVariable(
+                                    --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
+                                    1.25
+                                  );
+                                }
+                              }
+                            }
+
                             &#{$subMenuItemText} {
                               width: 100%;
                               flex: 1 1 auto;
@@ -687,6 +805,10 @@ $defaultValues: (
                                   #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}
                                 )
                               );
+                              &.flex__overflow {
+                                white-space: normal;
+                                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                              }
                               font-size: var(
                                 --_sf-sb-it-at-fs,
                                 var(

package/dist/menu.scss

@@ -127,6 +127,18 @@
             --_ctm-mob-dn-mu-im-se-ft-fy,
             var(--_ctm-tab-dn-mu-im-se-ft-fy, var(--_ctm-dn-mu-im-se-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-mu-im-se-tt-tm,
+            var(--_ctm-tab-dn-mu-im-se-tt-tm, var(--_ctm-dn-mu-im-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-mu-im-se-wd-wp,
+            var(--_ctm-tab-dn-mu-im-se-wd-wp, var(--_ctm-dn-mu-im-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-mu-im-se-wd-bk,
+            var(--_ctm-tab-dn-mu-im-se-wd-bk, var(--_ctm-dn-mu-im-se-wd-bk))
+          );
           font-size: var(
             --_ctm-mob-dn-mu-im-se-ft-se,
             var(--_ctm-tab-dn-mu-im-se-ft-se, var(--_ctm-dn-mu-im-se-ft-se))

package/dist/my-templates.scss

@@ -202,6 +202,9 @@ $defaultValues: (
                   // color: var(--_gray-900);
                   color: var(--_thm-ty-p1-tt-cr);
                   font-family: var(--_thm-ty-p1-ft-fy);
+                  text-transform: var(--_thm-ty-p1-tt-tm);
+                  word-wrap: var(--_thm-ty-p1-wd-wp);
+                  word-break: var(--_thm-ty-p1-wd-bk);
                   font-size: var(--_thm-ty-p2-ft-se);
                   font-weight: var(--_thm-ty-p1-bd);
                   margin-left: -15px;

package/dist/option-bar.scss

@@ -156,6 +156,18 @@
             --_ctm-mob-dn-tb-hr-se-ft-fy,
             var(--_ctm-tab-dn-tb-hr-se-ft-fy, var(--_ctm-dn-tb-hr-se-ft-fy))
           );
+          --_sf-hr-tt-tm: var(
+            --_ctm-mob-dn-tb-hr-se-tt-tm,
+            var(--_ctm-tab-dn-tb-hr-se-tt-tm, var(--_ctm-dn-tb-hr-se-tt-tm))
+          );
+          --_sf-hr-wd-wp: var(
+            --_ctm-mob-dn-tb-hr-se-wd-wp,
+            var(--_ctm-tab-dn-tb-hr-se-wd-wp, var(--_ctm-dn-tb-hr-se-wd-wp))
+          );
+          --_sf-hr-wd-bk: var(
+            --_ctm-mob-dn-tb-hr-se-wd-bk,
+            var(--_ctm-tab-dn-tb-hr-se-wd-bk, var(--_ctm-dn-tb-hr-se-wd-bk))
+          );
           --_sf-hr-ft-se: var(
             --_ctm-mob-dn-tb-hr-se-ft-se,
             var(--_ctm-tab-dn-tb-hr-se-ft-se, var(--_ctm-dn-tb-hr-se-ft-se))
@@ -249,6 +261,13 @@
         color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));
 
         font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy));
+        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
+        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
+        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
 
         font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));
 
@@ -327,6 +346,18 @@
             --_ctm-mob-dn-tb-sd-se-ft-fy,
             var(--_ctm-tab-dn-tb-sd-se-ft-fy, var(--_ctm-dn-tb-sd-se-ft-fy))
           );
+          --_sf-sd-tt-tm: var(
+            --_ctm-mob-dn-tb-sd-se-tt-tm,
+            var(--_ctm-tab-dn-tb-sd-se-tt-tm, var(--_ctm-dn-tb-sd-se-tt-tm))
+          );
+          --_sf-sd-wd-wp: var(
+            --_ctm-mob-dn-tb-sd-se-wd-wp,
+            var(--_ctm-tab-dn-tb-sd-se-wd-wp, var(--_ctm-dn-tb-sd-se-wd-wp))
+          );
+          --_sf-sd-wd-bk: var(
+            --_ctm-mob-dn-tb-sd-se-wd-bk,
+            var(--_ctm-tab-dn-tb-sd-se-wd-bk, var(--_ctm-dn-tb-sd-se-wd-bk))
+          );
           --_sf-sd-ft-se: var(
             --_ctm-mob-dn-tb-sd-se-ft-se,
             var(--_ctm-tab-dn-tb-sd-se-ft-se, var(--_ctm-dn-tb-sd-se-ft-se))
@@ -416,6 +447,13 @@
           color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));
 
           font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy));
+          text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
+          word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
+          word-break: var(--_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
 
           font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));