@sc-360-v2/storefront-cms-library 0.5.67 → 0.5.69

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.5.67",
+  "version": "0.5.69",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {