@sc-360-v2/storefront-cms-library 0.5.69 → 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/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 {