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

package/dist/lightbox.scss

@@ -1,78 +1,78 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="lightbox"] {
-    width: var(
-      --_ctm-mob-el-wh-st-mx,
-      var(
-        --_ctm-tab-el-wh-st-mx,
-        var(
-          --_ctm-el-wh-st-mx,
-          calc(
-            1% *
-              var(
-                --_ctm-mob-ele-nw-wh-vl,
-                var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-              )
-          )
-        )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-    & > .wrapper {
-      width: 100%;
-      height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    .modal__content__container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      .content__left {
-        background-image: url("https://res.cloudinary.com/dg78ao4vi/image/upload/v1733726837/unsplash_bBiuSdck8tU_ssntkv.png");
-        background-size: cover;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: start;
-        gap: 10px;
-        color: white;
-        width: 60%;
-        padding: 20px 40px;
-        p {
-          font-size: 20px;
-          color: white;
-          font-weight: 200;
-        }
-        .left__button {
-          background-color: white;
-          color: black;
-          border-radius: 10px;
-          float: left;
-          margin-top: 20px;
-          width: 150px;
-          height: 40px;
-          font-size: 15px;
-        }
-      }
-      .content__right {
-        width: 40%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="lightbox"] {
+    width: var(
+      --_ctm-mob-el-wh-st-mx,
+      var(
+        --_ctm-tab-el-wh-st-mx,
+        var(
+          --_ctm-el-wh-st-mx,
+          calc(
+            1% *
+              var(
+                --_ctm-mob-ele-nw-wh-vl,
+                var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+              )
+          )
+        )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    & > .wrapper {
+      width: 100%;
+      height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    .modal__content__container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      .content__left {
+        background-image: url("https://res.cloudinary.com/dg78ao4vi/image/upload/v1733726837/unsplash_bBiuSdck8tU_ssntkv.png");
+        background-size: cover;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: start;
+        gap: 10px;
+        color: white;
+        width: 60%;
+        padding: 20px 40px;
+        p {
+          font-size: 20px;
+          color: white;
+          font-weight: 200;
+        }
+        .left__button {
+          background-color: white;
+          color: black;
+          border-radius: 10px;
+          float: left;
+          margin-top: 20px;
+          width: 150px;
+          height: 40px;
+          font-size: 15px;
+        }
+      }
+      .content__right {
+        width: 40%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}

package/dist/line.scss

@@ -2,16 +2,9 @@
 
 [data-div-type="element"][data-element-type="line"] {
   // width: 100%;
-  width: var(
-    --_sf-el-wh-st-mx,
-    calc(
-      1% *
-        var(
-          --_ctm-mob-ele-nw-wh-vl,
-          var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-        )
-    )
-  );
+  width: var(--_sf-el-wh-st-mx,
+      calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
+          var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
   height: var(--_ctm-lt-ht);
 
   margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
@@ -35,14 +28,10 @@
     align-items: center;
     justify-content: center;
 
-    background-color: var(
-      --_ctm-mob-dn-le-wt-bd-cr,
-      var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
-    );
-    border-radius: var(
-      --_ctm-mob-dn-le-wt-br-rs,
-      var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
-    );
+    background-color: var(--_ctm-mob-dn-le-wt-bd-cr,
+        var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr)));
+    border-radius: var(--_ctm-mob-dn-le-wt-br-rs,
+        var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs)));
 
     .line__core {
       display: block;
@@ -53,30 +42,19 @@
 
   &[data-widget-border="true"] {
     .line__container {
-      border-color: var(
-        --_ctm-mob-dn-le-wt-br-cr,
-        var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-le-wt-br-se,
-        var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-le-wt-br-wh,
-        var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
-      );
+      border-color: var(--_ctm-mob-dn-le-wt-br-cr,
+          var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr)));
+      border-style: var(--_ctm-mob-dn-le-wt-br-se,
+          var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se)));
+      border-width: var(--_ctm-mob-dn-le-wt-br-wh,
+          var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh)));
     }
   }
 
   &[data-widget-shadow="true"] {
     .line__container {
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
-          var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
-          var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
-          var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
-      );
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae))) var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br))) var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd))) var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr))));
     }
   }
 
@@ -147,6 +125,7 @@
     }
 
     &[data-show-line-end-points="true"] {
+
       .line__container::before,
       .line__container::after {
         content: "";
@@ -178,22 +157,11 @@
         //   --_ctm-mob-dn-le-ed-ps-cr-br-wh,
         //   var(--_ctm-tab-dn-le-ed-ps-cr-br-wh, var(--_ctm-dn-le-ed-ps-cr-br-wh))
         // );
-        box-shadow: var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-ae,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-br,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-sd,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-cr,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr))
-          );
+        box-shadow: var(--_ctm-mob-dn-le-ed-ps-cr-sw-ae,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-br,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-sd,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-cr,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr)));
       }
 
       .line__container::after {
@@ -215,22 +183,11 @@
         //   --_ctm-mob-dn-le-ed-ps-cr-br-wh,
         //   var(--_ctm-tab-dn-le-ed-ps-cr-br-wh, var(--_ctm-dn-le-ed-ps-cr-br-wh))
         // );
-        box-shadow: var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-ae,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-br,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-sd,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))
-          )
-          var(
-            --_ctm-mob-dn-le-ed-ps-cr-sw-cr,
-            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr))
-          );
+        box-shadow: var(--_ctm-mob-dn-le-ed-ps-cr-sw-ae,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-ae, var(--_ctm-dn-le-ed-ps-cr-sw-ae))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-br,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-br, var(--_ctm-dn-le-ed-ps-cr-sw-br))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-sd,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-sd, var(--_ctm-dn-le-ed-ps-cr-sw-sd))) var(--_ctm-mob-dn-le-ed-ps-cr-sw-cr,
+            var(--_ctm-tab-dn-le-ed-ps-cr-sw-cr, var(--_ctm-dn-le-ed-ps-cr-sw-cr)));
       }
 
       &[data-line-end-points="square"] .line__container::before,
@@ -310,6 +267,7 @@
     }
 
     &[data-show-line-end-points="true"] {
+
       .line__container::before,
       .line__container::after {
         content: "";
@@ -343,6 +301,7 @@
   // ─── End Point Border ────────────────────
   // Kept last so it wins over the per-direction end point rules above.
   &[data-show-line-end-points="true"][data-show-line-end-points-border="true"] {
+
     .line__container::before,
     .line__container::after {
       // keeps the end point at its configured size once a border is added
@@ -352,4 +311,4 @@
       border-width: prepareMediaVariable(--_ctm-dn-le-ed-ps-cr-br-wh);
     }
   }
-}
+}

package/dist/loader.scss

@@ -1,37 +1,37 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="loader"] {
-    // width: var(
-    //   --_ctm-mob-ele-nw-wh-st-mx,
-    //   var(
-    //     --_ctm-tab-ele-nw-wh-st-mx,
-    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
-    //   )
-    // );
-
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-
-    // aspect-ratio: var(
-    //   --_ctm-mob-aspect-ratio,
-    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
-    // );
-
-    position: relative;
-
-    & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="loader"] {
+    // width: var(
+    //   --_ctm-mob-ele-nw-wh-st-mx,
+    //   var(
+    //     --_ctm-tab-ele-nw-wh-st-mx,
+    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
+    //   )
+    // );
+
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+
+    // aspect-ratio: var(
+    //   --_ctm-mob-aspect-ratio,
+    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
+    // );
+
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/login.scss

@@ -50,6 +50,14 @@
       --_show-shadow: none;
     }
 
+    // Form > Icons > show/hide. Scoped to the fields' leading icons: the password
+    // field's eye is a control, not a designed icon, so it stays visible and keeps
+    // its own styling. A dedicated variable (not `--_show-icon`) keeps this clear of
+    // the Login button's icon, which reads that one.
+    &[data-field-icon="false"] {
+      --_field-icon-display: none;
+    }
+
     .auth-container {
       .logn__main__div {
         height: var(--_height-100-dvh);
@@ -185,28 +193,11 @@
         justify-content: center;
         align-items: center;
         // margin: var(--_ctm-lt-mn);
-        padding: var(--_ctm-lt-pg);
-      }
-
-      // Login Box
-      .loginBox {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        gap: prepareMediaVariable(
-          --_ctm-dn-ln-wt-im-gp,
-          prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px)
-        );
+        padding: prepareMediaVariable(--_ctm-lt-pg);
         background-color: prepareMediaVariable(
           --_ctm-dn-ln-wt-bd-cr,
           prepareMediaVariable(--_ctm-dn-wt-bd-cr, transparent)
         );
-        padding: prepareMediaVariable(
-          --_ctm-dn-ln-wt-pg,
-          prepareMediaVariable(--_ctm-dn-wt-pg, 0px)
-        );
-
         border-color: prepareMediaVariable(
           --_ctm-dn-ln-wt-br-cr,
           prepareMediaVariable(--_ctm-dn-wt-br-cr, transparent)
@@ -245,6 +236,24 @@
         );
       }
 
+      // Login Box
+      .loginBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        gap: prepareMediaVariable(
+          --_ctm-dn-ln-wt-im-gp,
+          prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px)
+        );
+
+        padding: prepareMediaVariable(
+          --_ctm-dn-ln-wt-pg,
+          prepareMediaVariable(--_ctm-dn-wt-pg, 0px)
+        );
+      }
+
       .login_box_header {
         display: flex;
         flex-direction: column;
@@ -613,8 +622,8 @@
         flex-direction: column;
 
         .input__label {
-          display: flex;
-          align-items: center;
+          // display: flex;
+          // align-items: center;
           font-family: var(
             --_ctm-mob-dn-fm-ll-ft-fy,
             var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
@@ -746,23 +755,17 @@
           }
 
           // position: relative;
-          svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-
-            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);
-            }
-          }
+          // Deliberately no blanket `svg` rule here. It also matched the password
+          // field's eye button, so Icons > Size / Color / Stroke Width restyled a
+          // control that section does not own. The icons Icons DOES own carry the
+          // vars on their own classes below.
 
           .placeholder_icon_start_login {
             // position: absolute;
             z-index: 10;
             // top: 12px;
             // left: 10px;
-            display: flex;
+            display: var(--_field-icon-display, flex);
             align-items: center;
 
             svg {
@@ -792,7 +795,7 @@
           .placeholder_icon_start {
             // position: absolute;
             z-index: 10;
-            display: flex;
+            display: var(--_field-icon-display, flex);
             align-items: center;
             // top: 11px;
             // left: 10px;
@@ -886,10 +889,11 @@
               --_ctm-mob-dn-fm-it-ft-se-ic,
               var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic))
             );
-            text-align: var(
-              --_ctm-mob-dn-fm-it-tt-an,
-              var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an))
-            );
+            // Always left, never the Input section's Text Align. What the shopper is
+            // typing has to sit where the caret starts and next to the field's leading
+            // icon; centred or right-aligned entry reads as broken, and the alignment
+            // control is there for the label and button text, not for live input.
+            text-align: left;
             // border-color: var(--_ctm-mob-dn-fm-it-br-cr,
             //     var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr)));
             // border-radius: var(--_ctm-mob-dn-fm-it-br-rs,
@@ -910,6 +914,11 @@
           }
         }
 
+        // Show/hide password. A control rather than a designed icon, so it is fixed at
+        // a readable size and the Show Icon toggle leaves it alone — hiding it would
+        // strand anyone who needs to check what they typed. Color is the exception: it
+        // follows the field glyph beside it, so an editor recoloring the form's icons
+        // does not leave this one stranded in gray.
         .view__icon {
           // position: absolute;
           z-index: 10;
@@ -919,13 +928,12 @@
           align-items: center;
 
           svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            width: 20px;
+            height: 20px;
 
             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);
+              stroke: prepareMediaVariable(--_ctm-dn-fm-is-in-c1, var(--_gray-500));
+              stroke-width: 1.25;
             }
           }
         }

package/dist/map.scss

@@ -203,8 +203,11 @@ $data: (
         // Beside the map the header sizes to its content and the map takes the rest;
         // stacked above/below it keeps spanning the full width.
         > .gallery-header {
-          width: auto;
-          flex: 0 0 auto;
+          // Text Container Width. `auto` (the default) is the previous behaviour.
+          width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, auto);
+          // Shrinkable: the width defaults to 100%, which beside the map is a ceiling —
+          // without this the header would take the whole row and collapse the map.
+          flex: 0 1 auto;
         }
         > .map {
           flex: 1 1 auto;
@@ -382,7 +385,15 @@ $data: (
           var(--_ctm-tab-dn-mp-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-bd-cr))
         );
 
-        width: 100%;
+        // Text Container Width. 100% is the previous behaviour, so an unset width
+        // still spans the container.
+        width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, 100%);
+        // Lets it shrink to that width beside the map — a flex item defaults to
+        // min-width:auto and refuses to go below its longest word.
+        min-width: 0;
+        // Never shrink below the wrapped text — the map absorbs the remaining height
+        // instead, so a taller heading does not overflow the widget.
+        flex: 0 0 auto;
         border-color: var(
           --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
           var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
@@ -434,7 +445,7 @@ $data: (
           );
           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)))
+            var(--_ctm-tab-dn-mp-wt-wd-wp, var(--_ctm-dn-mp-wt-wd-wp, break-word))
           );
           word-break: var(
             --_ctm-mob-dn-mp-wt-wd-bk,
@@ -496,7 +507,7 @@ $data: (
             --_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))
+              var(--_ctm-dn-mp-wt-wd-wp-dc, break-word)
             )
           );
           word-break: var(
@@ -969,8 +980,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);
+  // 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))
@@ -1078,8 +1089,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);
+  // Overrides the stroke-width presentation attribute baked into the icon markup.
+  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
       //         }
       //       }
       //     }
@@ -1241,6 +1252,9 @@ $data: (
         width: 100%;
         height: 100%;
         min-width: 0;
+        // Yields height to the heading rather than demanding the full 100%.
+        flex: 1 1 auto;
+        min-height: 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

package/dist/mega-menu.scss

@@ -492,10 +492,7 @@ $defaultValues: (
                             )
                           );
                           // 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
-                          );
+                          stroke-width: prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-se-wh, 1.25);
                         }
                       }
                     }