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

package/dist/user-elements.scss

@@ -20,19 +20,8 @@ $imagePositions: (
   "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);
-}
+// `dividerGapOffset` / `dividerGapReserve` moved to functions.scss — every widget draws
+// its dividers as absolutely positioned pseudo-elements and hit the same overlap.
 
 [data-div-type="element"] {
   &[data-element-type="userElements"] {
@@ -738,7 +727,11 @@ $imagePositions: (
               flex-direction: column;
               justify-content: flex-start;
               width: 100%;
-              height: 44px;
+              // A wrapping value (a long shipping address with Text Overflow off) used to spill
+              // out of this cell and past the element, because the cell was a fixed 44px. A
+              // floor keeps the short cells aligned and lets a tall one grow the section -
+              // every ancestor up to the element root is already height:auto.
+              min-height: 44px;
             }
           }
           @media (max-width: 1024px) {
@@ -1113,6 +1106,16 @@ $imagePositions: (
           display: flex;
           flex-direction: column;
           min-width: 109px;
+
+          // Heading font size must not size the dropdown.
+          // This wrapper is a flex column, so its width comes from its widest child — the
+          // heading — and a stretched dropdown grew with it every time the heading's font
+          // size went up. Size the dropdown to its own content and cap it at the wrapper so
+          // a long profile name still cannot overflow.
+          .language__conatiner {
+            align-self: flex-start;
+            max-width: 100%;
+          }
           gap: 4px;
 
           .quota_label {
@@ -1144,10 +1147,6 @@ $imagePositions: (
             text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
             word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
             word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk);
-            &.flex__overflow {
-              white-space: normal;
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
             font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
             font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
             font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1173,9 +1172,14 @@ $imagePositions: (
             display: flex;
             gap: 12px;
             justify-content: space-between;
+            // Flex items default to min-width:auto and refuse to shrink below their text,
+            // so a long quota name pushed the row out of the widget instead of wrapping
+            // inside it.
+            min-width: 0;
             .quota_name_wrapper {
               display: flex;
               flex-direction: column;
+              min-width: 0;
               // gap: 6px;
 
               .quota_name {
@@ -1186,10 +1190,6 @@ $imagePositions: (
                 text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
                 word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
                 word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk);
-                &.flex__overflow {
-                  white-space: normal;
-                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-                }
                 font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
                 font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
                 font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1207,10 +1207,6 @@ $imagePositions: (
                 text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-tm);
                 word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-wp);
                 word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-bk);
-                &.flex__overflow {
-                  white-space: normal;
-                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-                }
                 font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
                 font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
                 font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
@@ -1223,6 +1219,7 @@ $imagePositions: (
 
             .quota_inventory_parent {
               display: flex;
+              min-width: 0;
             }
             .hilighted {
               color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr);
@@ -1248,10 +1245,6 @@ $imagePositions: (
               text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-tm);
               word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-wp);
               word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-bk);
-              &.flex__overflow {
-                white-space: normal;
-                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-              }
               font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
               font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
               font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
@@ -1361,6 +1354,16 @@ $imagePositions: (
           display: flex;
           flex-direction: column;
           min-width: 109px;
+
+          // Heading font size must not size the dropdown.
+          // This wrapper is a flex column, so its width comes from its widest child — the
+          // heading — and a stretched dropdown grew with it every time the heading's font
+          // size went up. Size the dropdown to its own content and cap it at the wrapper so
+          // a long profile name still cannot overflow.
+          .language__conatiner {
+            align-self: flex-start;
+            max-width: 100%;
+          }
           // align-items: center;
           gap: 4px;
 
@@ -1395,10 +1398,6 @@ $imagePositions: (
             text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
             word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
             word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk);
-            &.flex__overflow {
-              white-space: normal;
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
             font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
             font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
             font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1423,9 +1422,13 @@ $imagePositions: (
           .allowance_info_wrapper {
             display: flex;
             gap: 12px;
+            // Same as the quota rows: without this the name refuses to shrink and
+            // overflows the widget.
+            min-width: 0;
             .allowance_name_wrapper {
               display: flex;
               flex-direction: column;
+              min-width: 0;
               gap: 6px;
 
               .allowance_name {
@@ -1436,10 +1439,6 @@ $imagePositions: (
                 text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
                 word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
                 word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk);
-                &.flex__overflow {
-                  white-space: normal;
-                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-                }
                 font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
                 font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
                 font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1457,10 +1456,6 @@ $imagePositions: (
                 text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-tm);
                 word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-wp);
                 word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-bk);
-                &.flex__overflow {
-                  white-space: normal;
-                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-                }
                 font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
                 font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
                 font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
@@ -1480,10 +1475,6 @@ $imagePositions: (
               text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-tm);
               word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-wp);
               word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-bk);
-              &.flex__overflow {
-                white-space: normal;
-                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-              }
               font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
               font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
               font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
@@ -1952,20 +1943,17 @@ $imagePositions: (
           position: relative;
         }
         &[data-show-divider="true"] {
+          .child:not(:last-child) {
+            @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
+          }
           .child:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-ur-io-sy-im-sg,
-                      var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
-                    ) /
-                    2
-                )
+            bottom: dividerGapOffset(
+              --_ctm-lt-ur-io-sy-im-sg,
+              --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
             );
 
             height: var(
@@ -1984,17 +1972,17 @@ $imagePositions: (
             );
           }
           &[data-content-alignment="Horizontal"] {
+            // Side by side, so the thickness has to be reserved horizontally instead.
+            .child:not(:last-child) {
+              margin-bottom: 0;
+              @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right);
+            }
             .child:not(:last-child)::before {
-              // right: calc(
-              //   -1 *
-              //     (
-              //       var(
-              //           --_ctm-mob-lt-ur-io-sy-im-sg,
-              //           var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
-              //         ) /
-              //         2
-              //     )
-              // );
+              right: dividerGapOffset(
+                --_ctm-lt-ur-io-sy-im-sg,
+                --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
+              );
+              bottom: unset;
               top: 0;
 
               width: var(
@@ -2008,19 +1996,18 @@ $imagePositions: (
               left: unset;
             }
             @media (max-width: 768px) {
+              // Back to stacked below the breakpoint, so the reserve goes back under the item.
+              .child:not(:last-child) {
+                margin-right: 0;
+                @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
+              }
               .child:not(:last-child)::before {
                 top: unset;
                 left: 0;
                 right: 0;
-                bottom: calc(
-                  -1 *
-                    (
-                      var(
-                          --_ctm-mob-lt-ur-io-sy-im-sg,
-                          var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
-                        ) /
-                        2
-                    )
+                bottom: dividerGapOffset(
+                  --_ctm-lt-ur-io-sy-im-sg,
+                  --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
                 );
                 height: var(
                   --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
@@ -2037,20 +2024,15 @@ $imagePositions: (
             .secondary_label_wrapper {
               width: 100%;
               position: relative;
+              @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
               &::after {
                 content: "";
                 position: absolute;
                 left: 0;
                 right: 0;
-                bottom: calc(
-                  -1 *
-                    (
-                      var(
-                          --_ctm-mob-lt-ur-io-sy-im-sg,
-                          var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
-                        ) /
-                        2
-                    )
+                bottom: dividerGapOffset(
+                  --_ctm-lt-ur-io-sy-im-sg,
+                  --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
                 );
                 height: var(
                   --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
@@ -2681,10 +2663,8 @@ $imagePositions: (
         align-items: center;
         position: relative;
         .language__name {
-          // 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;
+          // No caret clearance needed anymore: the caret is an in-flow sibling, spaced
+          // by Widget Style > Item Gap.
           font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
           word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp);
           word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk);
@@ -2739,24 +2719,64 @@ $imagePositions: (
       }
 
       //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.
+      // The placeholder shown while nothing is selected. It reads the Widget Placeholder
+      // Text section, the same one that styles the selected value in `.option_select
+      // .language__name` — the two swap in the markup on first selection, so they have to
+      // resolve identically or the text would jump. Widget Style's own typography is kept
+      // only as the fallback: its Text tab has been removed from the panel, so the values
+      // exist solely on pages saved while that tab was still there.
       .value__selected__new {
         width: 100%;
         // padding: 8px 12px;
         text-align: left;
-        font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
-        word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp);
-        word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk);
-        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);
+        font-family: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-ft-fy,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy)
+        );
+        word-wrap: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-wd-wp,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp)
+        );
+        word-break: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-wd-bk,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk)
+        );
+        font-size: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-ft-se,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se)
+        );
+        color: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-cr,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr)
+        );
+        font-weight: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-ft-wt,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt)
+        );
+        font-style: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-ft-se-ic,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic)
+        );
+        text-decoration: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-ue,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue)
+        );
+        text-align: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-tt-an,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an)
+        );
+        letter-spacing: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-lr-sg,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg)
+        );
+        line-height: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-le-ht,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht)
+        );
+        text-transform: prepareMediaVariable(
+          --_ctm-dn-dn-se-wt-pr-tt-tt-tm,
+          prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm)
+        );
 
         &#{$overflowSelector} {
           @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -2799,12 +2819,21 @@ $imagePositions: (
             // 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);
+            // The caret is the button's second item, so it has to stay in flow for the
+            // gap above to have anything to space; `space-between` keeps it at the far
+            // end, where the old `position: absolute` used to pin it.
+            justify-content: space-between;
+
+            .option_select,
+            .value__selected__new {
+              flex: 1 1 auto;
+              min-width: 0;
+            }
           }
 
           .est__dropdown__icon {
-            position: absolute;
-            // top: 10px;
-            right: 10px;
+            display: flex;
+            flex: 0 0 auto;
             transition: all 200ms ease-in;
             &.open {
               transform: rotate(180deg);

package/dist/variant-picker.scss

@@ -3173,10 +3173,7 @@ $minWidth: 70px;
         .language__name {
           color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
           font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
-          text-transform: var(
-            --_sf-hr-tt-tm,
-            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
-          );
+          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
           word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
           word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
           font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));