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

package/dist/gallery-slider-temp.scss

@@ -1,6 +1,9 @@
 @use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
+
+$overflowSelector: ".flex__overflow";
+
 [data-div-type="element"] {
   &[data-element-type="gallerySlider"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -235,6 +238,24 @@
             --_ctm-mob-dn-gy-wt-se-ue,
             var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
           );
+          text-transform: var(
+            --_ctm-mob-dn-gy-wt-se-tt-tm,
+            var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-gy-wt-se-wd-wp,
+            var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal))
+          );
+          word-break: var(
+            --_ctm-mob-dn-gy-wt-se-wd-bk,
+            var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal))
+          );
+
+          // Text Overflow toggle in the typography panel; the line count rides in on
+          // --_sf-line-clamp from the element.
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
         }
 
         & p {
@@ -274,6 +295,22 @@
             --_ctm-mob-dn-gy-wt-se-ue-dc,
             var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
           );
+          text-transform: var(
+            --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
+            var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
+            var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal))
+          );
+          word-break: var(
+            --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
+            var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal))
+          );
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+          }
         }
 
         // h3 {
@@ -595,7 +632,12 @@
         }
       }
       :is(.left-button, .right-button) {
-        background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
+        // background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
+        @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
+
+        &:not(:disabled):hover {
+          @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
+        }
       }
       .left-button {
         padding: 10px;
@@ -690,7 +732,19 @@
         .left-button,
         .right-button {
           // background-color: #f2f5f5;
-          box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+      }
+      &[data-background-shape="None"] {
+        .left-button,
+        .right-button {
+          border-radius: 0;
+        }
+      }
+      &[data-background-shape="Square"] {
+        .left-button,
+        .right-button {
+          border-radius: 4px;
         }
       }
 
@@ -805,6 +859,36 @@
           transform: translateX(-50%);
           width: 75%;
         }
+        // Pagination Dots (design > Pagination Dots). Border and shadow go on the
+        // ::after overlay — that pseudo-element is the visible dot, the button behind it
+        // is only the hit area. There is deliberately no radius control: dots stay
+        // circles, so the 50% is fixed. The Pagination Line variant overrides these.
+        &[data-dots-show-border="false"] {
+          --_show-pn-ds-border: none;
+        }
+        // A transparent shadow rather than `none`, so the selected dot can list this
+        // next to its inset ring without the whole declaration going invalid.
+        &[data-dots-show-shadow="false"] {
+          --_show-pn-ds-shadow: 0 0 0 0 transparent;
+        }
+
+        $pnDsShadow: var(
+          --_show-pn-ds-shadow,
+          var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae)))
+            var(
+              --_ctm-mob-dn-pn-ds-sw-br,
+              var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-pn-ds-sw-sd,
+              var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-pn-ds-sw-cr,
+              var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))
+            )
+        );
+
         .embla__dot {
           -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
           -webkit-appearance: none;
@@ -848,19 +932,59 @@
             var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
           );
 
+          // The overlay is sized to the button, so the border has to grow inwards or the
+          // dot would render larger than its configured Dot Size.
+          box-sizing: border-box;
+          border-color: var(
+            --_show-pn-ds-border,
+            var(
+              --_ctm-mob-dn-pn-ds-br-cr,
+              var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))
+            )
+          );
+          border-style: var(
+            --_show-pn-ds-border,
+            var(
+              --_ctm-mob-dn-pn-ds-br-se,
+              var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))
+            )
+          );
+          border-width: var(
+            --_show-pn-ds-border,
+            var(
+              --_ctm-mob-dn-pn-ds-br-wh,
+              var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))
+            )
+          );
+          box-shadow: $pnDsShadow;
+
           border-radius: 50%;
           display: flex;
           align-items: center;
           content: "";
         }
         .embla__dot--selected:after {
-          box-shadow: inset 0 0 0 1px var(--text-body);
+          // Keeps the existing 1px ring on the active dot and still honours a configured
+          // shadow — this rule would otherwise shadow the one above it entirely.
+          box-shadow: $pnDsShadow;
           background-color: var(
             --_ctm-mob-dn-pn-ds-ct-dt-cr,
             var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
           );
         }
+        // Pagination Line (design > Pagination Line). Border, border radius and shadow
+        // sit on the line itself. The two toggles arrive as data attributes from the
+        // element; `none` short-circuits the whole var chain the way Item Style does.
+        // The 6px radius fallback keeps pages saved before Border Radius existed
+        // looking as they did.
         &[data-slider-control="Pagination Line"] {
+          &[data-line-show-border="false"] {
+            --_show-pn-le-border: none;
+          }
+          &[data-line-show-shadow="false"] {
+            --_show-pn-le-shadow: none;
+          }
+
           .embla__dot {
             width: var(
               --_ctm-mob-dn-pn-le-le-wh,
@@ -870,24 +994,75 @@
               --_ctm-mob-dn-pn-le-le-ht,
               var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
             );
+            // Draw the border inside the configured Line Width / Height rather than
+            // adding to it, so the track stays the size set in the panel.
+            box-sizing: border-box;
             background-color: var(
               --_ctm-mob-dn-pn-le-or-le-cr,
               var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
             );
-            border-radius: 6px;
-          }
 
-          .embla__dot--selected:after {
-            box-shadow: inset 0 0 0 1px var(--text-body);
-            border-radius: 6px;
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            border-color: var(
+              --_show-pn-le-border,
+              var(
+                --_ctm-mob-dn-pn-le-br-cr,
+                var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))
+              )
             );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            border-style: var(
+              --_show-pn-le-border,
+              var(
+                --_ctm-mob-dn-pn-le-br-se,
+                var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))
+              )
+            );
+            border-width: var(
+              --_show-pn-le-border,
+              var(
+                --_ctm-mob-dn-pn-le-br-wh,
+                var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))
+              )
+            );
+            border-radius: var(
+              --_ctm-mob-dn-pn-le-br-rs,
+              var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px))
+            );
+
+            box-shadow: var(
+              --_show-pn-le-shadow,
+              var(
+                  --_ctm-mob-dn-pn-le-sw-ae,
+                  var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-pn-le-sw-br,
+                  var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-pn-le-sw-sd,
+                  var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-pn-le-sw-cr,
+                  var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))
+                )
             );
+          }
+
+          // The Pagination Dots rules above style `.embla__dot:after` unscoped, so the
+          // line's overlay would otherwise inherit the Dots' border, circular radius and
+          // shadow — a second, wrongly-shaped outline on top of the line's own border.
+          // The line carries its border on the track, so the overlay just fills whatever
+          // the border leaves.
+          .embla__dot:after {
+            width: 100%;
+            height: 100%;
+            border: 0;
+            box-shadow: none;
+            border-radius: inherit;
+          }
+
+          .embla__dot--selected:after {
             background-color: var(
               --_ctm-mob-dn-pn-le-ct-le-cr,
               var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
@@ -975,6 +1150,18 @@
             }
           }
         }
+        &[data-background-shape="None"] {
+          .thumb-prev-button,
+          .thumb-next-button {
+            border-radius: 0;
+          }
+        }
+        &[data-background-shape="Square"] {
+          .thumb-prev-button,
+          .thumb-next-button {
+            border-radius: 4px;
+          }
+        }
 
         .embla__thumbs__viewport {
           width: 100%;
@@ -1165,6 +1352,10 @@
         var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
       );
 
+      // Clip the image to the item's border radius; without this the img's
+      // square corners paint over the rounded container.
+      overflow: hidden;
+
       .gallery-header {
         // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
         // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));

package/dist/hotspot.scss

@@ -478,6 +478,8 @@ $data: (
 
                   path {
                     stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-c1));
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-se-wh, 1.25);
                   }
                 }
               }
@@ -732,6 +734,8 @@ $data: (
 
               path {
                 stroke: prepareMediaVariable(--_ctm-dn-ht-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ht-se-se-wh, 1.25);
               }
             }
           }

package/dist/icon-list.scss

@@ -184,6 +184,8 @@ $pos2: (
 
               path {
                 stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-in-dt-se-se-wh, 1.25);
               }
             }
           }

package/dist/kitDetails.scss

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

package/dist/kits.scss

@@ -183,6 +183,8 @@ $dataShowBorder: "[data-sw-br='true']";
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-se-wh, 1.25);
             }
           }
         }

package/dist/language-selector.scss

@@ -10,7 +10,7 @@
 // Deliberately no final fallback inside these chains: an untouched property stays
 // invalid at computed-value time, which is what lets the consumers fall back to
 // `--_ctm-dn-wt-pr-tt-*`. Those come from the retired Widget Placeholder Text
-// section — Widget Style absorbed it, so the fallback exists only for pages saved
+// section — Widget Style absorbed it, so the fallback exists only for pages saved
 // before the merge. Same shape the divider already uses for its
 // hover-falls-back-to-default chain below.
 $widgetFontProps:
@@ -581,7 +581,7 @@ $widgetFontProps:
         min-width: 0;
 
         // Widget Style > padding (was Widget Placeholder Text > padding). It used to sit
-        // on `.value__selected__new` only, which is the *empty* state — as soon as an
+        // on `.value__selected__new` only, which is the *empty* state — as soon as an
         // option was selected the markup switched to this branch and the padding
         // appeared to do nothing.
         padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
@@ -651,7 +651,7 @@ $widgetFontProps:
         // padding: 8px 12px;
         // text-align: left;
         // Same order as `.option_select .language__name` above: Widget Style's per-state
-        // typography first, Widget Placeholder Text second. This is the empty branch —
+        // typography first, Widget Placeholder Text second. This is the empty branch —
         // 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));
@@ -811,7 +811,7 @@ $widgetFontProps:
 
             // Widget Style > Hover > Text Overflow. The clamp pair reaches the DOM as an
             // inline style (it is `controls`, not CSS), so hover cannot be expressed by
-            // the variable cascade above — the element publishes both pairs on the label
+            // the variable cascade above — the element publishes both pairs on the label
             // and this rule chooses the hovered one, falling back to the default pair.
             // Safe to scope on the wrapper: the options list is its sibling, not a
             // descendant, so option labels keep their own Item Style clamp.
@@ -864,6 +864,8 @@ $widgetFontProps:
                   --_ctm-mob-dn-te-in-in-c1,
                   var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
               }
             }
           }

package/dist/last-x-orders.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 @use "sass:map";
 @use "sass:list";
 
@@ -193,6 +194,8 @@
                   --_ctm-mob-dn-qa-lt-in-c1,
                   var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-qa-lt-se-wh, 1.25);
               }
             }
           }
@@ -253,6 +256,8 @@
                   --_ctm-mob-dn-ds-lt-in-c1,
                   var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ds-lt-se-wh, 1.25);
               }
             }
           }

package/dist/login.scss

@@ -537,6 +537,8 @@
                   --_sf-hr-in-c1,
                   prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1)
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-se-wh, 1.25);
               }
             }
           }
@@ -701,6 +703,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
             }
           }
 
@@ -718,6 +722,8 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
               }
             }
           }
@@ -748,6 +754,8 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
               }
             }
           }
@@ -855,6 +863,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25);
             }
           }
         }
@@ -1057,6 +1067,8 @@
 
             path {
               stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-se-wh, 1.25);
             }
           }
         }
@@ -1494,6 +1506,8 @@
                 --_sf-hr-in-c1,
                 prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-c1)
               );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-se-wh, 1.25);
             }
           }
         }

package/dist/map.scss

@@ -674,6 +674,8 @@ $data: (
               }
               path[stroke] {
                 stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
               }
             }
 
@@ -934,6 +936,8 @@ $data: (
       //             --_ctm-mob-dn-pn-se-in-c1,
       //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
       //           );
+      // Overrides the stroke-width presentation attribute baked into the icon markup.
+      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
       //           fill: var(
       //             --_ctm-mob-dn-pn-se-in-c1,
       //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
@@ -1041,6 +1045,8 @@ $data: (
       //             --_ctm-mob-dn-pn-se-in-c1,
       //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
       //           );
+      // Overrides the stroke-width presentation attribute baked into the icon markup.
+      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
       //         }
       //       }
       //     }

package/dist/mega-menu.scss

@@ -226,6 +226,9 @@ $defaultValues: (
                   --_sf-it-hr-tae: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-tt-an)};
                   --_sf-it-hr-ls: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-lr-sg)};
                   --_sf-it-hr-lh: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-le-ht)};
+                  --_sf-it-hr-ttm: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-tt-tm)};
+                  --_sf-it-hr-wwp: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-wd-wp)};
+                  --_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)};
                 }
@@ -251,6 +254,9 @@ $defaultValues: (
                   --_sf-it-at-tae: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-tt-an)};
                   --_sf-it-at-ls: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-lr-sg)};
                   --_sf-it-at-lh: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-le-ht)};
+                  --_sf-it-at-ttm: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-tt-tm)};
+                  --_sf-it-at-wwp: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-wd-wp)};
+                  --_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)};
                 }
@@ -370,6 +376,27 @@ $defaultValues: (
                         #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-le-ht)}
                       )
                     );
+                    text-transform: var(
+                      --_sf-it-at-ttm,
+                      var(
+                        --_sf-it-hr-ttm,
+                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-tt-tm, none)}
+                      )
+                    );
+                    word-wrap: var(
+                      --_sf-it-at-wwp,
+                      var(
+                        --_sf-it-hr-wwp,
+                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-wd-wp, normal)}
+                      )
+                    );
+                    word-break: var(
+                      --_sf-it-at-wbk,
+                      var(
+                        --_sf-it-hr-wbk,
+                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-wd-bk, keep-all)}
+                      )
+                    );
 
                     &.flex__menu__item__icon {
                       pointer-events: all;
@@ -403,6 +430,11 @@ $defaultValues: (
                               #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-c1)}
                             )
                           );
+                          // Overrides the stroke-width presentation attribute baked into the icon markup.
+                          stroke-width: prepareMediaVariable(
+                            --_ctm-meg-dn-mu-im-se-dt-se-se-wh,
+                            1.25
+                          );
                         }
                       }
                     }
@@ -807,6 +839,7 @@ $defaultValues: (
           &:hover {
             --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-se)};
             --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-c1)};
+            --_sf-hm-hr-ic-swh: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-se-wh)};
 
             --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-pg)};
             --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-br-rs)};
@@ -840,6 +873,14 @@ $defaultValues: (
                 --_sf-hm-hr-ic-clr,
                 #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-in-c1)}
               );
+              // Overrides the stroke-width presentation attribute baked into the icon
+              // markup. `--_sf-hm-hr-ic-swh` is published by the :hover block so the
+              // hover state carries its own width; unset otherwise, so the default
+              // state's value applies.
+              stroke-width: var(
+                --_sf-hm-hr-ic-swh,
+                #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-se-wh)}
+              );
             }
           }
         }