@sc-360-v2/storefront-cms-library 0.5.68 → 0.5.70

package/dist/filters.scss

@@ -1751,7 +1751,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         // taller than one line of label text, and centring made a wrapped label sit
         // visibly off its box. Starting both at the top keeps the box level with the
         // label's first line at any size.
-        align-items: flex-start;
+        align-items: center;
         gap: 8px;
         position: relative;
         // margin-bottom: 12px;

package/dist/gallery-slider-temp.scss

@@ -353,12 +353,24 @@ $overflowSelector: ".flex__overflow";
       .gallery-slider-element {
         flex-direction: row;
       }
-      .gallery-header {
-        // Text Container Width; fit-content is the previous behaviour.
-        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+      // Child combinator: as a plain descendant this also matched the per-item captions
+      // inside the slides, so the widget's text position resized those too.
+      .gallery-slider-element > .gallery-header {
+        // Beside the slider, Text Container Width is a ceiling rather than a fixed width
+        // (what the schema comment describes). It is always emitted as 100%, so used as
+        // `width` it made the header's flex basis the whole row: no free space for the
+        // slider to grow into and no overflow to shrink anyone, leaving the slider 0px.
+        width: fit-content;
+        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
         min-width: 0;
+        flex-shrink: 1;
         height: 100%;
       }
+      // The slider takes whatever the caption leaves.
+      .gallery-slider-element > .embla {
+        flex: 1 1 0;
+        min-width: 0;
+      }
       &[data-widget-alignment="top"] {
         .gallery-slider-element {
           align-items: flex-start;
@@ -385,12 +397,18 @@ $overflowSelector: ".flex__overflow";
       }
     }
     &[data-text-position="right"] {
-      .gallery-header {
-        // Text Container Width; fit-content is the previous behaviour.
-        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+      // Same pair as the "left" block above — see the comments there.
+      .gallery-slider-element > .gallery-header {
+        width: fit-content;
+        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
         min-width: 0;
+        flex-shrink: 1;
         height: 100%;
       }
+      .gallery-slider-element > .embla {
+        flex: 1 1 0;
+        min-width: 0;
+      }
       .gallery-slider-element {
         flex-direction: row-reverse;
       }
@@ -1483,6 +1501,10 @@ $overflowSelector: ".flex__overflow";
             var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
           );
 
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+
           font-size: var(
             --_ctm-mob-dn-im-se-ft-se,
             var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
@@ -1542,6 +1564,10 @@ $overflowSelector: ".flex__overflow";
             var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
           );
 
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+          }
+
           font-size: var(
             --_ctm-mob-dn-im-se-ft-se-dc,
             var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
@@ -1631,11 +1657,26 @@ $overflowSelector: ".flex__overflow";
         flex-direction: row;
 
         .gallery-header {
-          // Text Container Width; fit-content is the previous behaviour.
-          width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+          // The item's own Text Container Width, not the widget's. This read
+          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
+          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
+          // image was squeezed to 0px and vanished. There is no item-level control yet,
+          // so this falls back to fit-content and the caption sizes to its own text.
+          width: fit-content;
+          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
           min-width: 0;
+          // Beside the image the caption has to be able to give way. The base rule's
+          // flex-shrink 0 is right for the stacked positions, not for these.
+          flex-shrink: 1;
           height: 100%;
         }
+
+        // The image takes whatever the caption leaves. Scoped to the row directions —
+        // in top/bottom the main axis is vertical and a flex-basis here would break it.
+        > img {
+          flex: 1 1 0;
+          min-width: 0;
+        }
         &[data-widget-alignment="top"] {
           align-items: flex-start;
 
@@ -1661,12 +1702,27 @@ $overflowSelector: ".flex__overflow";
       &[data-text-position="right"] {
         flex-direction: row-reverse;
         .gallery-header {
-          // Text Container Width; fit-content is the previous behaviour.
-          width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+          // The item's own Text Container Width, not the widget's. This read
+          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
+          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
+          // image was squeezed to 0px and vanished. There is no item-level control yet,
+          // so this falls back to fit-content and the caption sizes to its own text.
+          width: fit-content;
+          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
           min-width: 0;
+          // Beside the image the caption has to be able to give way. The base rule's
+          // flex-shrink 0 is right for the stacked positions, not for these.
+          flex-shrink: 1;
           height: 100%;
         }
 
+        // The image takes whatever the caption leaves. Scoped to the row directions —
+        // in top/bottom the main axis is vertical and a flex-basis here would break it.
+        > img {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+
         &[data-widget-alignment="top"] {
           align-items: flex-start;
 

package/dist/icon-list.scss

@@ -136,6 +136,13 @@ $pos2: (
         display: var(--_d-flex);
         gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px));
 
+        // Icon Position (layout.iconPosition). Absent on elements saved before
+        // the control existed, which the schema backfills as "left", so they
+        // keep the icon-left / text-right row.
+        &:is(.wrapper[data-icon-position="top"]>*) {
+          flex-direction: column;
+        }
+
         &:hover {
           --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp, 0px)};
           --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
@@ -219,6 +226,38 @@ $pos2: (
                 height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
                 border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
               }
+
+              // Icon on top: the rule that separates it from the text runs across
+              // the top instead of down the side, and divider position slides
+              // along the x-axis.
+              // `.wrapper` is carried in the :is() so this outweighs the
+              // side-divider rules above rather than tying with them.
+              &:is(.wrapper[data-icon-position="top"]>*>*) {
+                margin-inline-start: 0;
+                margin-block-start: calc(var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) + var(--_ctm-mob-dn-tt-cr-dr-wt,
+                      var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))));
+
+                &::before {
+                  top: calc(calc(-1 * var(--_ctm-mob-dn-tt-cr-dr-wt,
+                          var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit)))) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)));
+                  bottom: auto;
+                  left: 0;
+                  right: auto;
+                  transform: none;
+                  width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
+                  height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
+                }
+
+                @each $key, $value in map.get(map.get($pos2, vtl), after) {
+                  &[data-divider-pos="#{$key}"] {
+                    &::before {
+                      @each $key1, $value1 in $value {
+                        #{$key1}: #{$value1};
+                      }
+                    }
+                  }
+                }
+              }
             }
 
             &>.#{$text} {

package/dist/order-status.scss

@@ -273,7 +273,7 @@ $defaultValues: (
           border-radius: 6px;
           border: 1px solid #d0d5dd;
           padding: 12px;
-          margin-bottom: 24px;
+          // margin-bottom: 24px;
 
           .check-icon {
             font-size: 28px;
@@ -1450,7 +1450,7 @@ $defaultValues: (
             --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs,
             var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
           );
-          margin-bottom: 24px;
+          // margin-bottom: 24px;
         }
 
         .item-card {