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

package/dist/add-order.scss

@@ -6,34 +6,35 @@
   &[data-show-shadow="false"] {
     --_show-shadow: none;
   }
-  &[data-icon-position="left"] {
-    .add_order_button {
-      flex-direction: row;
+  // Icon Position. These used to target `.add_order_button`, which no longer exists —
+  // the button is rendered by the shared ButtonComponent as `.btn__with__text`, so none
+  // of these rules matched and the control did nothing. `.btn__with__text` resolves its
+  // direction through `--_sf-jc`, which nothing was setting either, so it fell back to
+  // the initial `row` whatever the control said.
+  &[data-icon-position="left"],
+  &[data-icon-position="center"] {
+    .btn__with__text {
+      --_sf-jc: row;
     }
   }
   &[data-icon-position="right"] {
-    .add_order_button {
-      flex-direction: row-reverse;
-    }
-  }
-  &[data-icon-position="center"] {
-    .add_order_button {
-      flex-direction: row;
+    .btn__with__text {
+      --_sf-jc: row-reverse;
     }
   }
   &[data-element-style="Icon"] {
     &[data-icon-position="left"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: start;
       }
     }
     &[data-icon-position="right"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: end;
       }
     }
     &[data-icon-position="center"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: center;
       }
     }
@@ -144,10 +145,58 @@
           --_ctm-mob-dn-dt-se-in-c1,
           var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
         );
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        // `--_sf-hr-se-wh` is published by the :hover block so the hover state can carry
+        // its own width; it is unset otherwise and the default state's value applies.
+        stroke-width: var(--_sf-hr-se-wh, prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1));
       }
     }
 
     &:hover {
+      // The label lives in a child (`.txt`, from ButtonComponent) which sets its own
+      // typography as `var(--_sf-hr-*, <default state>)`. Declaring color/font directly
+      // on the button below therefore never reached it — the child always won with the
+      // default-state values, which is why the Hover state's text properties appeared
+      // dead. Publishing the hover values as those custom properties is what `.txt`
+      // is written to consume, and matches how product-actions.scss does it.
+      --_sf-hr-cr: var(
+        --_ctm-mob-dn-hr-se-cr,
+        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
+      );
+      --_sf-hr-ft-fy: var(
+        --_ctm-mob-dn-hr-se-ft-fy,
+        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
+      );
+      --_sf-hr-ft-se: var(
+        --_ctm-mob-dn-hr-se-ft-se,
+        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
+      );
+      --_sf-hr-ft-wt: var(
+        --_ctm-mob-dn-hr-se-ft-wt,
+        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
+      );
+      --_sf-hr-ft-se-ic: var(
+        --_ctm-mob-dn-hr-se-ft-se-ic,
+        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
+      );
+      --_sf-hr-tt-an: var(
+        --_ctm-mob-dn-hr-se-tt-an,
+        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
+      );
+      --_sf-hr-lr-sg: var(
+        --_ctm-mob-dn-hr-se-lr-sg,
+        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
+      );
+      --_sf-hr-le-ht: var(
+        --_ctm-mob-dn-hr-se-le-ht,
+        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
+      );
+      --_sf-hr-ue: var(
+        --_ctm-mob-dn-hr-se-ue,
+        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
+      );
+      --_sf-hr-se-wh: prepareMediaVariable(--_ctm-dn-hr-se-se-wh, 1);
+
       background-color: var(
         --_ctm-mob-dn-hr-se-bd-cr,
         var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))

package/dist/brand-basic-elements.scss

@@ -22,6 +22,12 @@ $overflowSelector: ".flex__overflow";
       )
     );
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // The Height control. brandDescription and brandCode below already had this; only
+    // brandName was missing it, so its own stylesheet never applied the height at all
+    // and the wrapper's `min-height: inherit` had nothing to inherit. It happened to
+    // work because brandName is *also* declared in product-basic-elements.scss, which
+    // does set it — relying on that cross-file declaration is not something to keep.
+    min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -32,7 +38,33 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       // height: 100%;
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+
+      border-color: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
+      );
+      border-style: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
+      );
+      border-width: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
+      );
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
     &[data-show-shadow="false"] {
       --_show-shadow: none;
@@ -48,7 +80,6 @@ $overflowSelector: ".flex__overflow";
     //   // cursor: pointer;
     // }
     .text-element {
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       display: flex;
       flex-direction: column;
@@ -84,7 +115,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
       word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
 
@@ -132,30 +171,12 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-show-border="false"] {
-      --_show-border: none;
-    }
-    // .text-element {
-    //   background: #6d96e4;
-    //   padding: 10px;
-    //   font-weight: 600;
-    //   color: rgba(75, 69, 70, 1);
-    // }
-    .text-element {
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
       border-color: var(
         --_show-border,
         var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -176,6 +197,28 @@ $overflowSelector: ".flex__overflow";
           var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
           var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
       );
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-show-border="false"] {
+      --_show-border: none;
+    }
+    // .text-element {
+    //   background: #6d96e4;
+    //   padding: 10px;
+    //   font-weight: 600;
+    //   color: rgba(75, 69, 70, 1);
+    // }
+    .text-element {
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
@@ -183,7 +226,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -231,30 +282,12 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-show-border="false"] {
-      --_show-border: none;
-    }
-    // .text-element {
-    //   // background: #6d96e4;
-    //   // padding: 10px;
-    //   // font-weight: 600;
-    //   // color: rgba(75, 69, 70, 1);
-    // }
-    .text-element {
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
       border-color: var(
         --_show-border,
         var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -275,6 +308,28 @@ $overflowSelector: ".flex__overflow";
           var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
           var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
       );
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-show-border="false"] {
+      --_show-border: none;
+    }
+    // .text-element {
+    //   // background: #6d96e4;
+    //   // padding: 10px;
+    //   // font-weight: 600;
+    //   // color: rgba(75, 69, 70, 1);
+    // }
+    .text-element {
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
@@ -282,7 +337,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(

package/dist/brand.scss

@@ -109,6 +109,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       --_ctm-mob-bran-dn-br-wh,
       var(--_ctm-tab-bran-dn-br-wh, var(--_ctm-bran-dn-br-wh))
     );
+    // "Show Border" switch. The border above is painted from CSS variables, so the
+    // switch arrives as a data attribute and zeroes the width when it is off.
+    &[data-show-border="false"] {
+      border-width: 0;
+      border-style: none;
+    }
     border-radius: var(
       --_ctm-mob-bran-dn-br-rs,
       var(--_ctm-tab-bran-dn-br-rs, var(--_ctm-bran-dn-br-rs))

package/dist/breadcrumbs.scss

@@ -15,22 +15,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           )
       )
     );
+    min-width: 200px !important;
+
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     & > div {
       &.wrapper {
+        min-width: 200px !important;
         width: 100%;
-      }
-
-      .breadcrumb_item {
-        &[data-show-cursor="true"] {
-          cursor: pointer;
-        }
-      }
-
-      .horizontal_breadcrumb_wrapper {
-        display: inline-flex;
-        align-items: center;
+        background-color: var(
+          --_ctm-mob-dn-bd-ad-fl-bd-cr,
+          var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
+        );
         border-style: var(
           --_ctm-mob-dn-bd-ad-fl-br-se,
           var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
@@ -47,11 +43,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-bd-ad-fl-br-rs,
           var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
         );
-        background-color: var(
-          --_ctm-mob-dn-bd-ad-fl-bd-cr,
-          var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
-        );
-        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
         box-shadow: var(
           --_show-shadow,
           var(
@@ -71,6 +63,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
             )
         );
+      }
+
+      .breadcrumb_item {
+        &[data-show-cursor="true"] {
+          cursor: pointer;
+        }
+      }
+
+      .horizontal_breadcrumb_wrapper {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
         gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
 
         &[overflow-item="Scroll"],
@@ -161,6 +166,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             --_ctm-mob-dn-or-im-se-ue,
             var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
           );
+          text-transform: var(
+            --_ctm-mob-dn-or-im-se-tt-tm,
+            var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-or-im-se-wd-wp,
+            var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
+          );
+          word-break: var(
+            --_ctm-mob-dn-or-im-se-wd-bk,
+            var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
+          );
           box-shadow: var(
               --_ctm-mob-dn-or-im-se-sw-ae,
               var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
@@ -262,6 +279,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-he-pe-im-se-ue,
               var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-he-pe-im-se-tt-tm,
+              var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-he-pe-im-se-wd-wp,
+              var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-he-pe-im-se-wd-bk,
+              var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
+            );
             box-shadow: var(
                 --_ctm-mob-dn-he-pe-im-se-sw-ae,
                 var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
@@ -364,6 +393,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-ct-pe-im-se-ue,
               var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ct-pe-im-se-tt-tm,
+              var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ct-pe-im-se-wd-wp,
+              var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ct-pe-im-se-wd-bk,
+              var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
+            );
             box-shadow: var(
                 --_ctm-mob-dn-ct-pe-im-se-sw-ae,
                 var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
@@ -408,46 +449,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         flex-direction: column;
         height: 120px;
 
-        border-style: var(
-          --_ctm-mob-dn-bd-ad-fl-br-se,
-          var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-dn-bd-ad-fl-br-wh,
-          var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
-        );
-        border-color: var(
-          --_ctm-mob-dn-bd-ad-fl-br-cr,
-          var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
-        );
-        border-radius: var(
-          --_ctm-mob-dn-bd-ad-fl-br-rs,
-          var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
-        );
+        // Background & Fill's border and shadow are painted once, on .wrapper above,
+        // which encloses both the horizontal and the vertical trail. They used to be
+        // repeated here as well, so the vertical layout drew the section's border and
+        // shadow twice — once around the whole widget and again around the inner list.
         background-color: var(
           --_ctm-mob-dn-bd-ad-fl-bd-cr,
           var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
         );
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-bd-ad-fl-sw-ae,
-              var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-br,
-              var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-sd,
-              var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-cr,
-              var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
-            )
-        );
 
         &[overflow-item="Scroll"],
         &[overflow-item="Show More"],
@@ -533,6 +543,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-he-pe-im-se-ue,
                 var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
               );
+              text-transform: var(
+                --_ctm-mob-dn-he-pe-im-se-tt-tm,
+                var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
+              );
+              word-wrap: var(
+                --_ctm-mob-dn-he-pe-im-se-wd-wp,
+                var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
+              );
+              word-break: var(
+                --_ctm-mob-dn-he-pe-im-se-wd-bk,
+                var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
+              );
               box-shadow: var(
                   --_ctm-mob-dn-he-pe-im-se-sw-ae,
                   var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
@@ -634,6 +656,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-or-im-se-ue,
               var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-or-im-se-tt-tm,
+              var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-or-im-se-wd-wp,
+              var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-or-im-se-wd-bk,
+              var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
+            );
             box-shadow: var(
                 --_ctm-mob-dn-or-im-se-sw-ae,
                 var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
@@ -735,6 +769,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-ct-pe-im-se-ue,
                 var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
               );
+              text-transform: var(
+                --_ctm-mob-dn-ct-pe-im-se-tt-tm,
+                var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
+              );
+              word-wrap: var(
+                --_ctm-mob-dn-ct-pe-im-se-wd-wp,
+                var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
+              );
+              word-break: var(
+                --_ctm-mob-dn-ct-pe-im-se-wd-bk,
+                var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
+              );
               box-shadow: var(
                   --_ctm-mob-dn-ct-pe-im-se-sw-ae,
                   var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
@@ -797,6 +843,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
 
+      // The Collapsed layout's expand/collapse toggle had no rules at all, so the Expand
+      // Icon design section had nothing to paint and the toggle rendered as an unsized,
+      // uncoloured, non-clickable box. It takes the same `ed-in` (expand icon) variables
+      // the Show More button already uses.
+      .collapse_btn,
       .show_more_btn {
         white-space: nowrap;
         background-color: var(
@@ -804,6 +855,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
         );
         .icon {
+          display: flex;
           svg {
             width: var(
               --_ctm-mob-dn-ed-in-in-se,
@@ -822,6 +874,60 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
+      .collapse_btn {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        cursor: pointer;
+      }
+    }
+
+    // "Show Border" switches. Each design section paints its border from CSS variables,
+    // so the switch reaches the stylesheet as a data attribute and the matching
+    // border-width is zeroed here. Kept at the end of the block and matched to the same
+    // selector depth as the rules above — anywhere earlier and the section rules would
+    // win the tie on source order. The item gates carry :not(:first-of-type)
+    // /:not(:last-of-type) so switching "Other Item Style" off doesn't also strip the
+    // home and current items, which have their own borders and their own switches.
+    // Background & Fill's border lives on .wrapper, which is where both trail layouts
+    // now take it from — so the switch has to target that, not the inner trail wrappers.
+    &[data-trail-border="false"] > div.wrapper {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-other-border="false"]
+      > div
+      .horizontal_breadcrumb_wrapper
+      .breadcrumb_item:not(:first-of-type):not(:last-of-type),
+    &[data-other-border="false"]
+      > div
+      .vertical_breadcrumb_wrapper
+      .item_wrapper:not(:first-of-type):not(:last-of-type)
+      .breadcrumb_item {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-home-border="false"] > div .horizontal_breadcrumb_wrapper .breadcrumb_item:first-of-type,
+    &[data-home-border="false"]
+      > div
+      .vertical_breadcrumb_wrapper
+      .item_wrapper:first-of-type
+      .breadcrumb_item {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-current-border="false"]
+      > div
+      .horizontal_breadcrumb_wrapper
+      .breadcrumb_item:last-of-type,
+    &[data-current-border="false"]
+      > div
+      .vertical_breadcrumb_wrapper
+      .item_wrapper:last-of-type
+      .breadcrumb_item {
+      border-width: 0;
+      border-style: none;
     }
   }
 }