@sc-360-v2/storefront-cms-library 0.5.51 → 0.5.53

package/dist/hotspot.scss

@@ -13,6 +13,8 @@ $bm: 30px;
 // default 30px marker it resolves to 20px, matching the previous flat offset.
 $g: var(--_sf-tp-gp);
 
+$overflowSelector: ".flex__overflow";
+
 $resizerOn: "[data-cms-element-resizer='true']";
 $dndOn: "[data-cms-new-element-dragging-v2='true']";
 $fullViewOn: '[data-view-state="full"]';
@@ -23,81 +25,105 @@ $fullViewOn: '[data-view-state="full"]';
 // spans exactly the gap, base on the tooltip edge and apex on the marker edge.
 $data: (
   // tooltip to the LEFT — tip on its right edge, pointing right
-  leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
-    icon: (right: -#{$tip},
-      bottom: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+  leftTop: (
+      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
+      icon: (
+        right: -#{$tip},
+        bottom: calc(#{$bm} - #{$ics}),
+        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+      ),
     ),
-  ),
-  leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
-    icon: (right: -#{$tip},
+  leftCenter: (
+    transform: translate(calc(-100% - #{$g}), -50%),
+    icon: (
+      right: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
-  leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
-    icon: (right: -#{$tip},
+  leftBottom: (
+    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
+    icon: (
+      right: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
   // tooltip ABOVE — tip on its bottom edge, pointing down
-  topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
-      right: calc(#{$bm} - #{$ics}),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+  topLeft: (
+      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
+      icon: (
+        bottom: -#{$tip},
+        right: calc(#{$bm} - #{$ics}),
+        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+      ),
     ),
-  ),
-  topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
+  topCenter: (
+    transform: translate(-50%, calc(-100% - #{$g})),
+    icon: (
+      bottom: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
-  topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
+  topRight: (
+    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
+    icon: (
+      bottom: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
   // tooltip to the RIGHT — tip on its left edge, pointing left
-  rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
-    icon: (left: -#{$tip},
-      bottom: calc(#{$bm} - #{$ics}),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+  rightTop: (
+      transform: translate(#{$g}, calc(-100% + #{$bm})),
+      icon: (
+        left: -#{$tip},
+        bottom: calc(#{$bm} - #{$ics}),
+        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+      ),
     ),
-  ),
-  rightCenter: (transform: translate(#{$g}, -50%),
-    icon: (left: -#{$tip},
+  rightCenter: (
+    transform: translate(#{$g}, -50%),
+    icon: (
+      left: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
-  rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
-    icon: (left: -#{$tip},
+  rightBottom: (
+    transform: translate(#{$g}, calc(0% - #{$bm})),
+    icon: (
+      left: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
   // tooltip BELOW — tip on its top edge, pointing up
-  bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
-    icon: (top: -#{$tip},
-      right: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+  bottomLeft: (
+      transform: translate(calc(-100% + #{$bm}), #{$g}),
+      icon: (
+        top: -#{$tip},
+        right: calc(#{$bm} - #{$ics}),
+        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+      ),
     ),
-  ),
-  bottomCenter: (transform: translate(-50%, #{$g}),
-    icon: (top: -#{$tip},
+  bottomCenter: (
+    transform: translate(-50%, #{$g}),
+    icon: (
+      top: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
   ),
-  bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
-    icon: (top: -#{$tip},
+  bottomRight: (
+    transform: translate(calc(0% - #{$bm}), #{$g}),
+    icon: (
+      top: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
-  ),
+  )
 );
 
 [data-div-type="element"] {
@@ -120,9 +146,7 @@ $data: (
             @each $prop, $val in $value {
               @if ($prop !=icon) {
                 #{$prop}: #{$val};
-              }
-
-              @else {
+              } @else {
                 @each $key2, $value2 in $val {
                   &:after {
                     #{$key2}: #{$value2};
@@ -140,8 +164,12 @@ $data: (
 [data-div-type="element"] {
   &[data-element-type="imageHotspot"] {
     // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -163,21 +191,19 @@ $data: (
       }
     }
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       position: relative;
 
       background-color: prepareMediaVariable(--_ctm-dn-ie-se-bd-cr);
       padding: prepareMediaVariable(--_ctm-lt-pg, var(--_tst-lt-pg));
-      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae) prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd) prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
+      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
+        prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
+        prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
 
-      &>div {
+      & > div {
         &.hotspot__tooltip {
-          --_sf-br-vl: {
-            #prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)
-          }
-
-          ;
+          --_sf-br-vl: #{prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)};
           position: absolute;
           background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
           z-index: 1000;
@@ -201,16 +227,22 @@ $data: (
             border-style: solid;
           }
 
-
           .tooltip__image_with_text {
             display: flex;
             // justify-content: center;
             gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
             overflow-y: auto;
             height: 100%;
+            width: 100%;
 
+            // This wrapper fills the tooltip, so the tooltip's own justify/align
+            // above can't move it — the alignment has to be applied here, on the
+            // container that actually holds the image and the text box. Which axis
+            // each maps to flips with the stack direction.
             &.hrz {
               flex-direction: row;
+              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
+              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
 
               .tooltip__image {
                 flex-direction: column;
@@ -219,6 +251,8 @@ $data: (
 
             &.vtl {
               flex-direction: column;
+              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
+              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
 
               .tooltip__image {
                 flex-direction: row;
@@ -271,6 +305,13 @@ $data: (
                 letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
                 line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
                 text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
+                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm, none);
+                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp, normal);
+                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk, normal);
+
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
 
               p {
@@ -283,6 +324,13 @@ $data: (
                 letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
                 line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
                 text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
+                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm-dc, none);
+                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp-dc, normal);
+                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk-dc, normal);
+
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+                }
               }
             }
 
@@ -355,8 +403,10 @@ $data: (
                 }
               }
 
-              background-color: var(--_sf-hr-bd-cr,
-                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr));
+              background-color: var(
+                --_sf-hr-bd-cr,
+                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr)
+              );
 
               padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
               width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
@@ -369,17 +419,26 @@ $data: (
 
               border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
 
-              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
+              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
+                var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br))
+                var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd))
+                var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
 
               &[data-show-border="true"] {
-                border-color: var(--_sf-hr-br-cr,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr));
-
-                border-style: var(--_sf-hr-br-se,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se));
-
-                border-width: var(--_sf-hr-br-wh,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh));
+                border-color: var(
+                  --_sf-hr-br-cr,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr)
+                );
+
+                border-style: var(
+                  --_sf-hr-br-se,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se)
+                );
+
+                border-width: var(
+                  --_sf-hr-br-wh,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh)
+                );
               }
 
               .txt {
@@ -393,13 +452,17 @@ $data: (
 
                 font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
 
-                font-style: var(--_sf-hr-ft-se-ic,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic));
+                font-style: var(
+                  --_sf-hr-ft-se-ic,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic)
+                );
 
                 text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
 
-                letter-spacing: var(--_sf-hr-lr-sg,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg));
+                letter-spacing: var(
+                  --_sf-hr-lr-sg,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg)
+                );
 
                 line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
 
@@ -479,7 +542,6 @@ $data: (
           //   justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
           //   align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
 
-
           //   img {
           //     object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
           //     height: -webkit-fill-available;
@@ -537,7 +599,9 @@ $data: (
 
     &[data-hotspot-tooltip-style-show-shadow="true"] {
       .hotspot__tooltip {
-        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae) prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd) prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
+          prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd)
+          prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
       }
     }
 
@@ -552,21 +616,24 @@ $data: (
 
     &[data-hotspot-tooltip-image-style-show-shadow="true"] {
       .tooltip__image {
-        box-shadow: var(--_show-shadow,
-            prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr));
+        box-shadow: var(
+          --_show-shadow,
+          prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br)
+            prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr)
+        );
       }
     }
 
     &[data-hotspot-style-show-shadow="true"] {
-
       .hotspot,
       .hotspot__icon {
-        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae) prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd) prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
+          prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd)
+          prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
       }
     }
 
     &[data-hotspot-style-show-border="true"] {
-
       .hotspot,
       .hotspot__icon {
         border-style: prepareMediaVariable(--_ctm-dn-ht-se-br-se);
@@ -705,4 +772,4 @@ $data: (
       }
     }
   }
-}
+}

package/dist/icon-library.scss

@@ -1,74 +1,78 @@
-@use "sass:map";
-@use "sass:list";
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-
-[data-div-type="element"] {
-  &[data-element-type="iconLibrary"] {
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
-
-    & > .wrapper {
-      width: 100%;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    }
-    &[data-widget-border="true"] .icon__container {
-      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
-      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
-      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
-    }
-
-    &[data-widget-shadow="true"] .icon__container {
-      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
-        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
-    }
-
-    &[data-widget-shadow="false"] .icon__container {
-      box-shadow: none;
-    }
-
-    .icon__container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-
-      .icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-
-        svg {
-          width: 100%;
-          height: 100%;
-          path {
-            stroke: var(
-              --_ctm-mob-dn-in-c1,
-              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
-            ) !important;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+[data-div-type="element"] {
+  &[data-element-type="iconLibrary"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
+
+    & > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    }
+    &[data-widget-border="true"] .icon__container {
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    }
+
+    &[data-widget-shadow="true"] .icon__container {
+      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
+    }
+
+    &[data-widget-shadow="false"] .icon__container {
+      box-shadow: none;
+    }
+
+    .icon__container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      .icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+
+        svg {
+          width: 100%;
+          height: 100%;
+          path {
+            stroke: var(
+              --_ctm-mob-dn-in-c1,
+              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
+            ) !important;
+            // Overrides the stroke-width presentation attribute baked into each icon's
+            // markup. A plain declaration is enough — presentation attributes lose to
+            // any CSS rule — so no !important is needed here.
+            stroke-width: var(--_ctm-mob-dn-se-wh, var(--_ctm-tab-dn-se-wh, var(--_ctm-dn-se-wh)));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/icon-list.scss

@@ -7,6 +7,7 @@ $icon: "flex__ili_span_icn";
 $text: "flex__ili_span_txt";
 $textContaner: "flex__ili__container";
 $desc: "flex__ili__description";
+$overflowSelector: ".flex__overflow";
 $pos2: (
   hrz: (
     keys: (
@@ -57,6 +58,7 @@ $pos2: (
     ),
   ),
 );
+
 [data-div-type="element"] {
   &[data-element-type="icon-list"] {
     & > .wrapper {
@@ -75,6 +77,7 @@ $pos2: (
         flex-wrap: prepareMediaVariable(--_ctm-lt-fx-wp);
         --_ctm-custom-lt-im-gp: #{prepareMediaVariable(--_ctm-lt-cn-gp, 0px)};
       }
+
       &.vtl {
         flex-direction: column;
         justify-content: prepareMediaVariable(--_ctm-lt-an-is);
@@ -87,6 +90,7 @@ $pos2: (
         border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
         border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
       }
+
       border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
       background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
 
@@ -103,7 +107,7 @@ $pos2: (
             position: var(--_p-relative);
 
             @each $key, $value in $pos2 {
-              $isVertical: $key == vtl;
+              $isVertical: $key ==vtl;
               $keys: map.get($value, keys);
               $afterKeys: map.get($keys, after);
               $afterPos: map.get($value, after);
@@ -134,6 +138,7 @@ $pos2: (
                 }
               }
             }
+
             &::after {
               content: "";
               position: var(--_p-absolute);
@@ -192,6 +197,7 @@ $pos2: (
             align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
             padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
             row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp, 0px);
+
             &[data-show-divider="true"] {
               // margin-inline-start: calc(
               //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
@@ -205,6 +211,7 @@ $pos2: (
                   )
               );
               position: relative;
+
               @each $key, $value in map.get(map.get($pos2, hrz), after) {
                 &[data-divider-pos="#{$key}"] {
                   &::before {
@@ -214,6 +221,7 @@ $pos2: (
                   }
                 }
               }
+
               &::before {
                 content: "";
                 background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
@@ -239,6 +247,7 @@ $pos2: (
                 border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
               }
             }
+
             & > .#{$text} {
               &,
               * {
@@ -258,6 +267,10 @@ $pos2: (
                 word-wrap: var(--_txt-ht-wd-wp, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
                 word-break: var(--_txt-ht-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-bk));
               }
+
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
 
             & > .#{$desc} {
@@ -276,7 +289,12 @@ $pos2: (
                 word-wrap: #{prepareMediaVariable(--_ctm-dn-dn-wd-wp)};
                 word-break: #{prepareMediaVariable(--_ctm-dn-dn-wd-bk)};
               }
+
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
+
             a {
               color: inherit;
               text-decoration: none;