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

package/dist/flex-text-editor.scss

@@ -1,271 +1,271 @@
-@use "sass:map";
-@use "sass:list";
-
-$editorMain: ".flex__text__editor__main";
-$editorWrapper: ".flx__txt__edt__wrapper";
-$editor: '[contenteditable="true"]';
-$suggestionsMain: ".flex__suggestions__box";
-$textElement: '[data-element-type="text"]';
-$textElementV2: '[data-custom-type="custom__text"]';
-$dataBodyShowFalse: '[data-body-show="false"]';
-$titleDiv: ".ttl__dv";
-$bodyDiv: ".bd__dv";
-$macroDiv: ".mcr__dv";
-$macroChip: ".macro__chip__v2";
-$previewMode: '[data-text-type="preview-mode"]';
-$dataDecoded: '[data-decoded="true"]';
-$dataDecodedV2: '[data-decoded-v2="true"]';
-$editorIframe: '[data-iframe-body="true"]';
-$width: 225px;
-$height: 300px;
-
-#{$textElement},
-#{$textElementV2} {
-  #{$editorMain} {
-    position: var(--_p-relative);
-
-    #{$editor} {
-      word-wrap: break-word;
-    }
-    #{$suggestionsMain} {
-      position: var(--_p-fixed);
-      left: var(--_sf-lt-vl-sg);
-      top: var(--_sf-tp-vl-sg);
-      z-index: calc(var(--_higher-zIndex) + var(--_it-gl-zIndex) + 1);
-      border: 1px solid var(--_gray-200);
-      background: var(--_base-white);
-      box-shadow: 0px 1px 6px -2px var(--_gray-300);
-      border-radius: 6px;
-      width: $width;
-      max-height: var(--_sf-ht-vl-sg, $height);
-      overflow-y: auto;
-      transform: translateY(8px);
-
-      & > ul {
-        display: var(--_d-flex);
-        flex-direction: column;
-        width: 100%;
-
-        & > li {
-          display: var(--_d-flex);
-          flex-direction: column;
-          width: 100%;
-
-          &#{$dataBodyShowFalse} {
-            --_sf-db-bd-dp: var(--_d-none);
-            --_sf-sv-ic-rt: -90deg;
-          }
-
-          & > div {
-            &#{$titleDiv} {
-              padding: 8px 12px 8px 12px;
-              display: var(--_d-flex);
-              justify-content: space-between;
-              background-color: var(--_gray-50);
-              cursor: pointer;
-              border-bottom: 1px solid var(--_gray-200);
-              gap: 10px;
-
-              & > .left {
-                display: var(--_d-flex);
-                align-items: center;
-                gap: 4px;
-
-                & > span {
-                  display: var(--_d-flex);
-                  align-content: center;
-
-                  &:nth-of-type(2) {
-                    font-weight: 600;
-                    font-size: 12px;
-                    color: var(--_gray-600);
-                  }
-                  &:nth-of-type(1) {
-                    svg {
-                      width: 10px;
-                      height: 10px;
-                    }
-                  }
-                }
-              }
-
-              & > span {
-                display: var(--_d-flex);
-                align-items: center;
-                transition: transform 0.45s ease;
-                transform: rotate(var(--_sf-sv-ic-rt, 0deg));
-
-                svg {
-                  width: 10px;
-                  height: 10px;
-                }
-              }
-            }
-
-            &#{$bodyDiv} {
-              display: var(--_sf-db-bd-dp, var(--_d-flex));
-              transition: display 0.45s ease;
-              flex-wrap: wrap;
-              gap: 8px;
-              padding: 12px;
-
-              & > div {
-                &#{$macroDiv} {
-                  margin: 1px;
-                  background-color: var(--_sf-hr-cr, var(--_gray-100));
-                  border-radius: 6px;
-                  padding: 6px 10px;
-                  color: var(--_gray-600);
-                  font-size: 14px;
-                  font-weight: 500;
-                  max-width: 150px;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  transition: all 0.2s ease-in-out;
-                  cursor: pointer;
-
-                  &:hover {
-                    --_sf-hr-cr: var(--_primary-50);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-#{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}, #{$textElementV2} *) {
-  @extend .macro_styles;
-  user-select: all;
-}
-
-#{$macroChip}:not(#{$dataDecoded}, #{$dataDecodedV2}) {
-  &:is(#{$previewMode} *) {
-    @extend .macro_styles;
-    position: var(--_p-relative);
-    width: 62px;
-    display: var(--_d-inline-flex);
-    flex-direction: row-reverse;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    overflow: clip;
-
-    & > span {
-      display: var(--_d-none);
-    }
-    &::before {
-      font-size: 12px !important;
-      color: var(--_primary-400) !important;
-      content: "Loading";
-    }
-
-    &::after {
-      content: "";
-      // width: 6px;
-      // height: 6px;
-      // border: 1px solid var(--_primary-400);
-      // border-top-color: var(--_primary-100);
-      // border-radius: 50%;
-      // animation: spin 2s linear infinite;
-
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.6) 50%,
-        rgba(255, 255, 255, 0) 100%
-      );
-      position: var(--_p-absolute);
-      animation: skeleton-shimmer 1.5s infinite cubic-bezier(0.02, 0.02, 1, 1.01);
-    }
-
-    @keyframes skeleton-shimmer {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(100%);
-      }
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-  }
-}
-.macro_styles {
-  background: var(--_primary-50);
-  border-radius: 4px;
-  display: inline-flex;
-  padding-inline: 2px;
-  & > span {
-    color: var(--_primary-400) !important;
-    font-weight: 600 !important;
-    font-size: 12px !important;
-    line-height: 1.4 !important;
-  }
-}
-
-// Popup
-.custom__attribute__popup__v2 {
-  background: var(--_base-white);
-  padding: 8px;
-  border-radius: 4px;
-  width: 200px;
-  box-shadow: var(--_shadow-x3);
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  // transform: translate(50%, 50px);
-
-  & > div {
-    &.body__div {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-
-      & > p {
-        font-size: 12px;
-        font-weight: 600;
-        word-break: break-all;
-        color: var(--_gray-900);
-      }
-
-      & > input {
-        border: 1px solid var(--_gray-200);
-        padding: 2px 4px;
-        border-radius: 4px;
-        font-size: 12px;
-        max-width: 100%;
-        width: 100%;
-      }
-    }
-
-    &.footer__div {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      & > button {
-        display: flex;
-        padding: 4px 8px;
-        font-size: 14px;
-        line-height: 1.4;
-        font-weight: 400;
-        border-radius: 4px;
-
-        &[data-type="submit"] {
-          background: var(--_primary-500);
-          color: #fff;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$editorMain: ".flex__text__editor__main";
+$editorWrapper: ".flx__txt__edt__wrapper";
+$editor: '[contenteditable="true"]';
+$suggestionsMain: ".flex__suggestions__box";
+$textElement: '[data-element-type="text"]';
+$textElementV2: '[data-custom-type="custom__text"]';
+$dataBodyShowFalse: '[data-body-show="false"]';
+$titleDiv: ".ttl__dv";
+$bodyDiv: ".bd__dv";
+$macroDiv: ".mcr__dv";
+$macroChip: ".macro__chip__v2";
+$previewMode: '[data-text-type="preview-mode"]';
+$dataDecoded: '[data-decoded="true"]';
+$dataDecodedV2: '[data-decoded-v2="true"]';
+$editorIframe: '[data-iframe-body="true"]';
+$width: 225px;
+$height: 300px;
+
+#{$textElement},
+#{$textElementV2} {
+  #{$editorMain} {
+    position: var(--_p-relative);
+
+    #{$editor} {
+      word-wrap: break-word;
+    }
+    #{$suggestionsMain} {
+      position: var(--_p-fixed);
+      left: var(--_sf-lt-vl-sg);
+      top: var(--_sf-tp-vl-sg);
+      z-index: calc(var(--_higher-zIndex) + var(--_it-gl-zIndex) + 1);
+      border: 1px solid var(--_gray-200);
+      background: var(--_base-white);
+      box-shadow: 0px 1px 6px -2px var(--_gray-300);
+      border-radius: 6px;
+      width: $width;
+      max-height: var(--_sf-ht-vl-sg, $height);
+      overflow-y: auto;
+      transform: translateY(8px);
+
+      & > ul {
+        display: var(--_d-flex);
+        flex-direction: column;
+        width: 100%;
+
+        & > li {
+          display: var(--_d-flex);
+          flex-direction: column;
+          width: 100%;
+
+          &#{$dataBodyShowFalse} {
+            --_sf-db-bd-dp: var(--_d-none);
+            --_sf-sv-ic-rt: -90deg;
+          }
+
+          & > div {
+            &#{$titleDiv} {
+              padding: 8px 12px 8px 12px;
+              display: var(--_d-flex);
+              justify-content: space-between;
+              background-color: var(--_gray-50);
+              cursor: pointer;
+              border-bottom: 1px solid var(--_gray-200);
+              gap: 10px;
+
+              & > .left {
+                display: var(--_d-flex);
+                align-items: center;
+                gap: 4px;
+
+                & > span {
+                  display: var(--_d-flex);
+                  align-content: center;
+
+                  &:nth-of-type(2) {
+                    font-weight: 600;
+                    font-size: 12px;
+                    color: var(--_gray-600);
+                  }
+                  &:nth-of-type(1) {
+                    svg {
+                      width: 10px;
+                      height: 10px;
+                    }
+                  }
+                }
+              }
+
+              & > span {
+                display: var(--_d-flex);
+                align-items: center;
+                transition: transform 0.45s ease;
+                transform: rotate(var(--_sf-sv-ic-rt, 0deg));
+
+                svg {
+                  width: 10px;
+                  height: 10px;
+                }
+              }
+            }
+
+            &#{$bodyDiv} {
+              display: var(--_sf-db-bd-dp, var(--_d-flex));
+              transition: display 0.45s ease;
+              flex-wrap: wrap;
+              gap: 8px;
+              padding: 12px;
+
+              & > div {
+                &#{$macroDiv} {
+                  margin: 1px;
+                  background-color: var(--_sf-hr-cr, var(--_gray-100));
+                  border-radius: 6px;
+                  padding: 6px 10px;
+                  color: var(--_gray-600);
+                  font-size: 14px;
+                  font-weight: 500;
+                  max-width: 150px;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  transition: all 0.2s ease-in-out;
+                  cursor: pointer;
+
+                  &:hover {
+                    --_sf-hr-cr: var(--_primary-50);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+#{$macroChip}:is(#{$editorIframe} *, #{$dataDecodedV2}, #{$textElementV2} *) {
+  @extend .macro_styles;
+  user-select: all;
+}
+
+#{$macroChip}:not(#{$dataDecoded}, #{$dataDecodedV2}) {
+  &:is(#{$previewMode} *) {
+    @extend .macro_styles;
+    position: var(--_p-relative);
+    width: 62px;
+    display: var(--_d-inline-flex);
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    overflow: clip;
+
+    & > span {
+      display: var(--_d-none);
+    }
+    &::before {
+      font-size: 12px !important;
+      color: var(--_primary-400) !important;
+      content: "Loading";
+    }
+
+    &::after {
+      content: "";
+      // width: 6px;
+      // height: 6px;
+      // border: 1px solid var(--_primary-400);
+      // border-top-color: var(--_primary-100);
+      // border-radius: 50%;
+      // animation: spin 2s linear infinite;
+
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.6) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      position: var(--_p-absolute);
+      animation: skeleton-shimmer 1.5s infinite cubic-bezier(0.02, 0.02, 1, 1.01);
+    }
+
+    @keyframes skeleton-shimmer {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+.macro_styles {
+  background: var(--_primary-50);
+  border-radius: 4px;
+  display: inline-flex;
+  padding-inline: 2px;
+  & > span {
+    color: var(--_primary-400) !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    line-height: 1.4 !important;
+  }
+}
+
+// Popup
+.custom__attribute__popup__v2 {
+  background: var(--_base-white);
+  padding: 8px;
+  border-radius: 4px;
+  width: 200px;
+  box-shadow: var(--_shadow-x3);
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  // transform: translate(50%, 50px);
+
+  & > div {
+    &.body__div {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      & > p {
+        font-size: 12px;
+        font-weight: 600;
+        word-break: break-all;
+        color: var(--_gray-900);
+      }
+
+      & > input {
+        border: 1px solid var(--_gray-200);
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+
+    &.footer__div {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      & > button {
+        display: flex;
+        padding: 4px 8px;
+        font-size: 14px;
+        line-height: 1.4;
+        font-weight: 400;
+        border-radius: 4px;
+
+        &[data-type="submit"] {
+          background: var(--_primary-500);
+          color: #fff;
+        }
+      }
+    }
+  }
+}

package/dist/functions.scss

@@ -282,6 +282,42 @@ $breakPointsV3: (
   @return $mob-var;
 }
 
+// Widget dividers are absolutely positioned pseudo-elements living in the gap between
+// two items, so they take up no space of their own: a divider thicker than half the item
+// spacing used to grow back over the text beside it. `dividerGapOffset` pushes the
+// divider past the item edge by its own weight and `dividerGapReserve` hands that weight
+// back to the item as margin, which keeps the whole divider inside the gap at any weight
+// with half the item spacing clear either side.
+//
+// Pair them: the offset alone would leave the divider hanging in the next item's space,
+// the reserve alone would just widen the gap. Both take either a `--_ctm-*` variable name
+// (resolved across breakpoints by `prepareMediaVariable`) or a ready CSS value such as
+// `var(--_sf-dr-wt)` or `8px`.
+
+// `0px` rather than `prepareMediaVariable`'s usual `inherit`: an unset weight has to stay
+// a valid length or it would take the whole `calc()` — and with it the divider's
+// position — down with it.
+@function dividerLength($value) {
+  @if meta.type-of($value) == "string" and string.slice($value, 1, 2) == "--" {
+    @return prepareMediaVariable($value, 0px);
+  }
+  @return $value;
+}
+
+@function dividerGapOffset($spacing, $weight) {
+  @return calc(-1 * (#{dividerLength($spacing)} / 2) - #{dividerLength($weight)});
+}
+
+@mixin dividerGapReserve($weight, $side: bottom) {
+  margin-#{$side}: dividerLength($weight);
+}
+
+// Some dividers carry a marker (circle / square / icon) centred on the rule. With the
+// rule pushed out by its own weight, the marker's centre moves out with it by half that.
+@function dividerMarkerOffset($spacing, $weight) {
+  @return calc(-1 * (#{dividerLength($spacing)} / 2) - (#{dividerLength($weight)} / 2));
+}
+
 @mixin flexBorderRotationWithDashed($clr, $gap, $height) {
   --_clr-border: #{$clr};
   --_cid-page-cpn-box-br-width: #{$gap};

package/dist/gallery-slider-temp.scss

@@ -159,7 +159,12 @@ $overflowSelector: ".flex__overflow";
           var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
         );
 
-        width: 100%;
+        // Text Container Width. 100% is the previous behaviour, so an unset width
+        // still spans the widget.
+        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
+        // Shrink to that width, and never below the height the wrapped text needs.
+        min-width: 0;
+        flex: 0 0 auto;
 
         border-color: var(
           --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
@@ -329,12 +334,29 @@ $overflowSelector: ".flex__overflow";
         flex-direction: column-reverse;
       }
     }
+    // Gallery Text and Item Alignment places the text container horizontally when
+    // it is stacked above/below the gallery — only visible once its width is under
+    // 100%. Left/right positions use [data-widget-alignment] for the cross axis.
+    &:not([data-text-position="left"]):not([data-text-position="right"]) {
+      &[data-text-alignment="left"] .gallery-header {
+        margin-right: auto;
+      }
+      &[data-text-alignment="center"] .gallery-header {
+        margin-inline: auto;
+      }
+      &[data-text-alignment="right"] .gallery-header {
+        margin-left: auto;
+      }
+    }
+
     &[data-text-position="left"] {
       .gallery-slider-element {
         flex-direction: row;
       }
       .gallery-header {
-        width: fit-content;
+        // Text Container Width; fit-content is the previous behaviour.
+        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+        min-width: 0;
         height: 100%;
       }
       &[data-widget-alignment="top"] {
@@ -364,7 +386,9 @@ $overflowSelector: ".flex__overflow";
     }
     &[data-text-position="right"] {
       .gallery-header {
-        width: fit-content;
+        // Text Container Width; fit-content is the previous behaviour.
+        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+        min-width: 0;
         height: 100%;
       }
       .gallery-slider-element {
@@ -469,6 +493,9 @@ $overflowSelector: ".flex__overflow";
           .embla__slide {
             width: 100%;
             height: 100%;
+            // Grid item: without this it cannot shrink below its longest word, so a long
+            // caption widens the whole track past the widget.
+            min-width: 0;
           }
         }
       }
@@ -1312,6 +1339,8 @@ $overflowSelector: ".flex__overflow";
       width: 100%;
       height: 100%;
       display: flex;
+      // Same reason as the slide above — let the caption wrap to the slide.
+      min-width: 0;
       // flex-direction: column;
 
       background-color: var(
@@ -1383,6 +1412,10 @@ $overflowSelector: ".flex__overflow";
         );
 
         width: 100%;
+        // Shrink to the slide, and never below the height the wrapped caption needs —
+        // the same pair the widget-level header uses.
+        min-width: 0;
+        flex: 0 0 auto;
 
         border-color: var(
           --_ctm-mob-dn-im-tt-cr-dn-br-cr,
@@ -1592,7 +1625,9 @@ $overflowSelector: ".flex__overflow";
         flex-direction: row;
 
         .gallery-header {
-          width: fit-content;
+          // Text Container Width; fit-content is the previous behaviour.
+          width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+          min-width: 0;
           height: 100%;
         }
         &[data-widget-alignment="top"] {
@@ -1620,7 +1655,9 @@ $overflowSelector: ".flex__overflow";
       &[data-text-position="right"] {
         flex-direction: row-reverse;
         .gallery-header {
-          width: fit-content;
+          // Text Container Width; fit-content is the previous behaviour.
+          width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, fit-content);
+          min-width: 0;
           height: 100%;
         }