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

package/dist/user-elements.scss

@@ -4,6 +4,36 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+$overflowSelector: ".flex__overflow";
+
+// Image Position stores the same compass values the image element uses (they map to
+// Sirv's `canvas.position`); these are their CSS object-position equivalents.
+$imagePositions: (
+  "north": center top,
+  "northeast": right top,
+  "northwest": left top,
+  "center": center center,
+  "south": center bottom,
+  "southeast": right bottom,
+  "southwest": left bottom,
+  "east": right center,
+  "west": left center,
+);
+
+// Every divider in this widget is an absolutely positioned pseudo-element, so it takes
+// no space of its own and a thick one used to grow back over the text beside it.
+// Pairing this offset with `dividerGapReserve` on the item itself keeps the whole
+// divider inside the gap at any weight, with half the item spacing clear either side.
+@function dividerGapOffset($spacing-var, $weight-var) {
+  @return calc(
+    -1 * (#{prepareMediaVariable($spacing-var)} / 2) - #{prepareMediaVariable($weight-var)}
+  );
+}
+
+@mixin dividerGapReserve($weight-var, $side: bottom) {
+  margin-#{$side}: prepareMediaVariable($weight-var);
+}
+
 [data-div-type="element"] {
   &[data-element-type="userElements"] {
     // width: var(
@@ -509,23 +539,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
       &[data-display-type="Vertical"] {
         &[data-show-divider="true"] {
+          .user__element__item:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
+          }
+
           .user__element__item:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-            );
+            bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
 
-            height: var(
-              --_ctm-mob-dn-wt-se-dr-wt,
-              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-wt-se-dr-cr,
-              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-            );
+            height: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt);
+            background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr);
           }
         }
 
@@ -622,29 +648,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 width: 100%;
               }
             }
-            .embla__slide:not(:last-child)::before {
-              content: "";
-              position: absolute;
+            // This row divider was drawn unconditionally, so the section's Divider
+            // toggle had nothing to switch off in the maximized layout.
+            &[data-show-divider="true"] {
+              .embla__slide:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt, right);
+              }
 
-              background-color: var(
-                --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
-                var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
-              );
-              right: calc(
-                -1 *
-                  (
-                    var(
-                        --_ctm-mob-lt-qa-im-sg,
-                        var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
-                      ) /
-                      2
-                  )
-              );
-              height: 100%;
-              width: var(
-                --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
-                var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
-              );
+              .embla__slide:not(:last-child)::before {
+                content: "";
+                position: absolute;
+
+                background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
+                right: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+                height: 100%;
+                width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+              }
             }
             .quota_label {
               white-space: nowrap;
@@ -664,30 +683,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             .allowance_label_wrapper {
               flex-shrink: 0;
             }
-            .embla__slide:not(:last-child)::before {
-              content: "";
-              position: absolute;
+            // Same: gated on the section's own Divider toggle.
+            &[data-show-divider="true"] {
+              .embla__slide:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt, right);
+              }
 
-              background-color: var(
-                --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
-                var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
-              );
-              right: calc(
-                -1 *
-                  (
-                    var(
-                        --_ctm-mob-lt-ae-im-sg,
-                        var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
-                      ) /
-                      2
-                  )
-              );
-              height: 100%;
-              width: var(
-                --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
-                var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
-              );
-              left: unset;
+              .embla__slide:not(:last-child)::before {
+                content: "";
+                position: absolute;
+
+                background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
+                right: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+                height: 100%;
+                // Was reading the quota weight, so Allowance > Divider Weight did nothing
+                // and the quota's weight drove this divider instead.
+                width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+                left: unset;
+              }
             }
             .allowance_vertical_scroll_wrapper {
               width: unset;
@@ -781,23 +794,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         &[data-show-divider="true"] {
+          .user__element__item:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
+          }
+
           .user__element__item:not(:last-child)::before {
             content: "";
             position: absolute;
             top: 0;
             bottom: 0;
-            right: calc(
-              -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-            );
+            right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
 
-            width: var(
-              --_ctm-mob-dn-wt-se-dr-wt,
-              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-wt-se-dr-cr,
-              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-            );
+            width: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt);
+            background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr);
           }
         }
       }
@@ -822,6 +831,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .user_elements_user_name_wrapper {
           display: flex;
           gap: 6px;
+          // Keeps the avatar and the trailing icon on the name's centre line instead of
+          // stretching them to the row height.
+          align-items: center;
           &[data-has-link="true"] {
             cursor: pointer;
             &:hover {
@@ -839,6 +851,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
             text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
             text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
+            text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-tm);
+          }
+
+          // The user's avatar, driven by its own User Logo design section.
+          .user_elements_user_logo {
+            width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-wh);
+            height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-ht);
+            flex-shrink: 0;
+            object-fit: cover;
+            // Padding is part of the configured size rather than added on top of it.
+            box-sizing: border-box;
+            padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-pg);
+            background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-bd-cr);
+            border-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-cr);
+            border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
+            border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
+            border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
+            box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae)
+              prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br)
+              prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd)
+              prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
+            // Which part of the picture survives the crop to the configured box. The
+            // control stores the image element's compass values, so they are mapped to
+            // their CSS equivalents here.
+            @each $point, $position in $imagePositions {
+              &[data-object-position="#{$point}"] {
+                object-position: $position;
+              }
+            }
+
+            // Mirroring. Both axes are separate attributes, so the combined case needs
+            // its own rule or the second transform would replace the first.
+            &[data-flip-x="true"] {
+              transform: scaleX(-1);
+            }
+
+            &[data-flip-y="true"] {
+              transform: scaleY(-1);
+            }
+
+            &[data-flip-x="true"][data-flip-y="true"] {
+              transform: scale(-1, -1);
+            }
           }
 
           .icon {
@@ -848,6 +903,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
               path {
                 stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-se-wh, 1.25);
               }
             }
           }
@@ -878,6 +935,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
               text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
               text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
+              text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-tm);
 
               .icon {
                 cursor: pointer;
@@ -886,6 +944,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
                   path {
                     stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -905,6 +965,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
               text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
               text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
+              text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-tm);
 
               .icon {
                 cursor: pointer;
@@ -913,6 +974,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
                   path {
                     stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -932,6 +995,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
               text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
               text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
+              text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-tm);
 
               .icon {
                 cursor: pointer;
@@ -940,6 +1004,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
                   path {
                     stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -954,39 +1020,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             content: "";
             margin-left: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2);
             // margin-top: 3px;
-            width: 6px;
-            height: 6px;
-            // width: var(--line-w, 1px);
-            // height: 20px;
-            background-color: var(
-              --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
-              var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
-            );
+            // The divider is a dot, so Divider Weight is its diameter. Both sizes were
+            // fixed here, which is why the Divider Weight control did nothing.
+            width: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt);
+            height: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt);
+            flex-shrink: 0;
+            background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr);
             margin-block: auto;
+            // Divider Shape. Round is the shape the widget has always used, so it is
+            // what an element without the setting still gets.
             border-radius: 50%;
-            // content: "";
-            // position: absolute;
-            // left: 0;
-            // right: 0;
-            // bottom: calc(
-            //   -1 *
-            //     (
-            //       var(
-            //           --_ctm-mob-lt-ur-io-im-sg,
-            //           var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
-            //         ) /
-            //         2
-            //     )
-            // );
+          }
 
-            // height: var(
-            //   --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
-            //   var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
-            // );
-            // background-color: var(
-            //   --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
-            //   var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
-            // );
+          // Divider Shape: a plain rule spanning the row instead of a dot. Weight is
+          // its thickness, so only the cross-axis size changes.
+          &[data-divider-shape="Divider"] .child:not(:last-child)::after {
+            height: auto;
+            align-self: stretch;
+            margin-block: 0;
+            border-radius: 0;
           }
           // .user_elements_user_name_wrapper {
           //   width: 100%;
@@ -1157,58 +1209,33 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         &[data-show-divider="true"] {
+          .quote_item_wrapper:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+          }
+
           .quote_item_wrapper:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-qa-im-sg,
-                      var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
-                    ) /
-                    2
-                )
-            );
+            bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
 
-            height: var(
-              --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
-              var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
-              var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
-            );
+            height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+            background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
           }
           &[data-content-alignment="Vertical"] {
             .quota_label_wrapper {
               width: 100%;
               position: relative;
+              @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
               &::after {
                 content: "";
                 position: absolute;
                 left: 0;
                 right: 0;
-                bottom: calc(
-                  -1 *
-                    (
-                      var(
-                          --_ctm-mob-lt-qa-im-sg,
-                          var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
-                        ) /
-                        2
-                    )
-                );
-                height: var(
-                  --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
-                  var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
-                );
-                background-color: var(
-                  --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
-                  var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
-                );
+                bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+                height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
+                background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
               }
             }
           }
@@ -1371,59 +1398,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
         &[data-show-divider="true"] {
+          .allowance_item_wrapper:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+          }
+
           .allowance_item_wrapper:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-ae-im-sg,
-                      var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
-                    ) /
-                    2
-                )
-            );
+            bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
 
-            height: var(
-              --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
-              var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
-              var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
-            );
+            height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+            background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
           }
           &[data-content-alignment="Vertical"] {
             .allowance_label_wrapper {
               width: 100%;
               position: relative;
               gap: 10px;
+              @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
               &::after {
                 content: "";
                 position: absolute;
                 left: 0;
                 right: 0;
-                bottom: calc(
-                  -1 *
-                    (
-                      var(
-                          --_ctm-mob-lt-ae-im-sg,
-                          var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
-                        ) /
-                        2
-                    )
-                );
-                height: var(
-                  --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
-                  var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
-                );
-                background-color: var(
-                  --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
-                  var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
-                );
+                bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+                height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
+                background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
               }
             }
           }
@@ -1505,6 +1507,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
           text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
           text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
+          text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-tm);
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
         }
 
         .label {
@@ -1517,6 +1524,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
           text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
           text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
+          text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-tm);
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
         }
         .value {
           color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
@@ -1528,6 +1540,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
           text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
           text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
+          text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm);
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
         }
 
         .secondary_info_divider {
@@ -1802,6 +1819,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
                     )
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25);
                 }
               }
             }
@@ -2138,10 +2157,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
       );
 
-      border-width: var(
-        --_ctm-mob-dn-dn-se-wt-se-br-wh,
-        var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
-      );
+      // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
+      border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
 
       // border: 1px solid
       //   var(
@@ -2179,9 +2196,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       //   var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg))
       // );
       display: flex;
-      gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
 
       .option:hover {
+        --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
         --_sf-hr-bd-cr: var(
           --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
           var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
@@ -2206,11 +2223,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
           var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
         );
-        --_sf-hr-im-gp: var(
-          --_ctm-mob-dn-dn-se-im-se-hr-se-im-gp,
-          var(--_ctm-tab-dn-dn-se-im-se-hr-se-im-gp, var(--_ctm-dn-dn-se-im-se-hr-se-im-gp))
-        );
-
         // for shadow
         --_sf-hr-sw-ae: var(
           --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
@@ -2271,6 +2283,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .option[data-selected="true"] {
+        --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
         --_sf-sd-bd-cr: var(
           --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
           var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
@@ -2371,8 +2384,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         position: relative;
         box-sizing: border-box;
 
+        // An option holds a single label, so Item Style has no items to space — the
+        // gap was dropped from the schema rather than left as a control doing nothing.
         padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
-        gap: var(--_sf-hr-im-gp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-im-gp));
         border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
 
         background-color: var(
@@ -2443,6 +2457,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
             );
             text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
+            text-transform: var(
+              --_sf-sd-txt-tr,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
+            );
           }
         }
       }
@@ -2458,57 +2476,39 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       &[data-flex-direction="row"] {
         overflow-x: auto;
       }
+      // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
+      // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
+      // never emitted. The calc was invalid, so the divider never positioned at all.
+      // The list's own item gap is the spacing these options actually sit in.
       &[data-show-divider="true"] {
         &[data-flex-direction="row"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt, right);
+          }
+
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             top: 0;
             bottom: 0; /* For full height divider */
-            right: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
-                      var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
-                    ) /
-                    2
-                )
-            ); /* Half of your gap, assuming divider is centered in the gap */
-            width: var(
-              --_ctm-mob-dn-dn-se-wt-se-dr-wt,
-              var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
-            ); /* Divider thickness */
-            background-color: var(
-              --_ctm-mob-dn-dn-se-wt-se-dr-cr,
-              var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
-            ); /* Divider color */
+            right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
+            width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */
+            background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */
           }
         }
         &[data-flex-direction="column"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
+          }
+
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
-                      var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
-                    ) /
-                    2
-                )
-            );
-            height: var(
-              --_ctm-mob-dn-dn-se-wt-se-dr-wt,
-              var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-dn-se-wt-se-dr-cr,
-              var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
-            );
+            bottom: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
+            height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt);
+            background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr);
           }
         }
       }
@@ -2519,7 +2519,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         align-items: center;
         position: relative;
         .language__name {
-          padding-right: 20px;
+          // Clearance for the absolutely positioned caret. It was `padding-right`,
+          // which the section's own padding would have had to fight with; as a margin
+          // the Padding control owns all four sides cleanly.
+          margin-right: 20px;
           font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
           font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
           color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
@@ -2529,6 +2532,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an);
           letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg);
           line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-le-ht);
+          // Padding and Text Transform were declared in the schema but read nowhere.
+          padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-pg);
+          text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm);
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
         }
       }
 
@@ -2548,14 +2558,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         );
         line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
         text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
+        text-transform: var(
+          --_sf-hr-txt-tr,
+          prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
+        );
         white-space: nowrap;
+
+        // Item Style clamps the option label. `white-space: nowrap` above would stop
+        // the box ever wrapping, so the clamp resets it.
+        &#{$overflowSelector} {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
       }
 
       //Dropdown
+      // The placeholder shown while nothing is selected. Widget Style's typography tab
+      // is labelled "Placeholder Text" and drives it — none of it was read before.
       .value__selected__new {
         width: 100%;
         // padding: 8px 12px;
         text-align: left;
+        font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
+        font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
+        color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
+        font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
+        font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic);
+        text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue);
+        text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg);
+        line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht);
+        text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm);
+
+        &#{$overflowSelector} {
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
       }
       .est__dropdown__main {
         position: relative;
@@ -2590,6 +2627,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             align-items: center;
             width: 100%;
             padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg);
+            // Item Gap used to sit on `.language__conatiner`, which wraps a single
+            // child, so it spaced nothing. The button is where the widget's own items
+            // (icon and label) sit — same place the variant picker applies it.
+            gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
           }
 
           .est__dropdown__icon {
@@ -2624,10 +2665,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh);
             border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se);
             border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
-            // margin-top: var(
-            //   --_ctm-mob-lt-gp-bn-is,
-            //   var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-            // );
+            // Gap between the trigger box (Widget Style) and this panel, from
+            // Widget Dropdown > Top Spacing. The offset used to borrow the layout's
+            // option/label spacing, which is a different concept and is no longer
+            // emitted at all.
+            margin-top: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-tp-sg);
             gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
             // padding: 2px;
             // border-radius: 4px;