@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/text-temp-v2.scss

@@ -15,12 +15,8 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-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-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
@@ -58,7 +54,7 @@ $overflowSelector: ".flex__overflow";
       cursor: pointer;
     }
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
       // min-height: 50px;
@@ -66,19 +62,12 @@ $overflowSelector: ".flex__overflow";
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       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(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
+      border-width: var(--_show-border,
+          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
 
-      box-shadow: var(
-        --_show-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)))
-      );
+      box-shadow: var(--_show-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))));
       // height: 100%;
 
       #{$ie} {
@@ -130,16 +119,15 @@ $overflowSelector: ".flex__overflow";
 
       *,
       .et-tt {
+
         &,
         * {
           color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
           font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
           font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
           font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
-          font-style: var(
-            --_ctm-mob-dn-ft-se-ic,
-            var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
-          );
+          font-style: var(--_ctm-mob-dn-ft-se-ic,
+              var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
           text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
           letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
           line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
@@ -148,6 +136,7 @@ $overflowSelector: ".flex__overflow";
           word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
           word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
         }
+
       }
 
       &#{$overflowSelector} {
@@ -155,4 +144,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}

package/dist/text-temp.scss

@@ -1,109 +1,110 @@
-@use "sass:map";
-@use "sass:list";
-
-$ie: '[contenteditable="true"]';
-$re: '[data-cms-tool="cms-element-resizer"]';
-$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
-
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="text"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    // height: ;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    // --_aspect-ratio: calc(
-    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    // );
-
-    [data-div-type="wrapper__layer"] {
-      position: var(--_p-absolute);
-      inset: 0 0 0 0;
-      border: 1px solid var(--_accent-color-2-500);
-      z-index: 2;
-      pointer-events: none;
-      visibility: var(--_sf-vt-bm-zz, hidden);
-      opacity: var(--_sf-op-bm-zz, 0);
-    }
-
-    &#{$dblclk} {
-      --_sf-op-bm-zz: 1;
-      --_sf-vt-bm-zz: visible;
-      #{$re} {
-        display: none !important;
-      }
-    }
-
-    [contentEditable="true"] {
-      white-space: normal;
-      unicode-bidi: plaintext;
-    }
-
-    & > .wrapper {
-      width: 100%;
-      // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-      min-height: prepareMediaVariable(--_ctm-lt-ht);
-      // min-height: 50px;
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
-      );
-      // height: 100%;
-
-      #{$ie} {
-        &:focus {
-          outline: none;
-          border: none;
-        }
-      }
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    .text-element {
-      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
-      // box-shadow: var(
-      //   --_show-shadow,
-      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
-      // );
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: 100%;
-
-      // transform: scale(var(--_ctm-dn-zm-ie));
-      scale: var(--_ctm-dn-zm-ie);
-      &[data-flip-x="true"] {
-        transform: scaleX(-1);
-      }
-      &[data-flip-y="true"] {
-        transform: scaleY(-1);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$ie: '[contenteditable="true"]';
+$re: '[data-cms-tool="cms-element-resizer"]';
+$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
+
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="text"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    // height: ;
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
+
+    [data-div-type="wrapper__layer"] {
+      position: var(--_p-absolute);
+      inset: 0 0 0 0;
+      border: 1px solid var(--_accent-color-2-500);
+      z-index: 2;
+      pointer-events: none;
+      visibility: var(--_sf-vt-bm-zz, hidden);
+      opacity: var(--_sf-op-bm-zz, 0);
+    }
+
+    &#{$dblclk} {
+      --_sf-op-bm-zz: 1;
+      --_sf-vt-bm-zz: visible;
+
+      #{$re} {
+        display: none !important;
+      }
+    }
+
+    [contentEditable="true"] {
+      white-space: normal;
+      unicode-bidi: plaintext;
+    }
+
+    &>.wrapper {
+      width: 100%;
+      // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+      min-height: prepareMediaVariable(--_ctm-lt-ht);
+      // min-height: 50px;
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br)) var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr)));
+      // height: 100%;
+
+      #{$ie} {
+        &:focus {
+          outline: none;
+          border: none;
+        }
+      }
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .text-element {
+      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      // box-shadow: var(
+      //   --_show-shadow,
+      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
+      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+      // );
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: 100%;
+
+      // transform: scale(var(--_ctm-dn-zm-ie));
+      scale: var(--_ctm-dn-zm-ie);
+
+      &[data-flip-x="true"] {
+        transform: scaleX(-1);
+      }
+
+      &[data-flip-y="true"] {
+        transform: scaleY(-1);
+      }
+    }
+  }
+}

package/dist/theme-classes.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 // typography
 
@@ -7,6 +8,9 @@
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h1-tt-cr);
   font-family: var(--_thm-ty-h1-ft-fy);
+  text-transform: var(--_thm-ty-h1-tt-tm);
+  word-wrap: var(--_thm-ty-h1-wd-wp);
+  word-break: var(--_thm-ty-h1-wd-bk);
   font-size: var(--_thm-ty-h1-ft-se);
   font-weight: var(--_thm-ty-h1-bd);
   font-style: var(--_thm-ty-h1-ic);
@@ -20,6 +24,9 @@
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h2-tt-cr);
   font-family: var(--_thm-ty-h2-ft-fy);
+  text-transform: var(--_thm-ty-h2-tt-tm);
+  word-wrap: var(--_thm-ty-h2-wd-wp);
+  word-break: var(--_thm-ty-h2-wd-bk);
   font-size: var(--_thm-ty-h2-ft-se);
   font-weight: var(--_thm-ty-h2-bd);
   font-style: var(--_thm-ty-h2-ic);
@@ -28,10 +35,14 @@
   line-height: var(--_thm-ty-h2-le-ht);
   text-decoration: var(--_thm-ty-h2-ue);
 }
+
 .flx-thm-typ-h3 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h3-tt-cr);
   font-family: var(--_thm-ty-h3-ft-fy);
+  text-transform: var(--_thm-ty-h3-tt-tm);
+  word-wrap: var(--_thm-ty-h3-wd-wp);
+  word-break: var(--_thm-ty-h3-wd-bk);
   font-size: var(--_thm-ty-h3-ft-se);
   font-weight: var(--_thm-ty-h3-bd);
   font-style: var(--_thm-ty-h3-ic);
@@ -40,10 +51,14 @@
   line-height: var(--_thm-ty-h3-le-ht);
   text-decoration: var(--_thm-ty-h3-ue);
 }
+
 .flx-thm-typ-h4 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h4-tt-cr);
   font-family: var(--_thm-ty-h4-ft-fy);
+  text-transform: var(--_thm-ty-h4-tt-tm);
+  word-wrap: var(--_thm-ty-h4-wd-wp);
+  word-break: var(--_thm-ty-h4-wd-bk);
   font-size: var(--_thm-ty-h4-ft-se);
   font-weight: var(--_thm-ty-h4-bd);
   font-style: var(--_thm-ty-h4-ic);
@@ -52,10 +67,14 @@
   line-height: var(--_thm-ty-h4-le-ht);
   text-decoration: var(--_thm-ty-h4-ue);
 }
+
 .flx-thm-typ-h6 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h6-tt-cr);
   font-family: var(--_thm-ty-h6-ft-fy);
+  text-transform: var(--_thm-ty-h6-tt-tm);
+  word-wrap: var(--_thm-ty-h6-wd-wp);
+  word-break: var(--_thm-ty-h6-wd-bk);
   font-size: var(--_thm-ty-h6-ft-se);
   font-weight: var(--_thm-ty-h6-bd);
   font-style: var(--_thm-ty-h6-ic);
@@ -69,6 +88,9 @@
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h5-tt-cr);
   font-family: var(--_thm-ty-h5-ft-fy);
+  text-transform: var(--_thm-ty-h5-tt-tm);
+  word-wrap: var(--_thm-ty-h5-wd-wp);
+  word-break: var(--_thm-ty-h5-wd-bk);
   font-size: var(--_thm-ty-h5-ft-se);
   font-weight: var(--_thm-ty-h5-bd);
   font-style: var(--_thm-ty-h5-ic);
@@ -82,6 +104,9 @@
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-p1-tt-cr);
   font-family: var(--_thm-ty-p1-ft-fy);
+  text-transform: var(--_thm-ty-p1-tt-tm);
+  word-wrap: var(--_thm-ty-p1-wd-wp);
+  word-break: var(--_thm-ty-p1-wd-bk);
   font-size: var(--_thm-ty-p1-ft-se);
   font-weight: var(--_thm-ty-p1-bd);
   font-style: var(--_thm-ty-p1-ic);
@@ -90,10 +115,14 @@
   line-height: var(--_thm-ty-p1-le-ht);
   text-decoration: var(--_thm-ty-p1-ue);
 }
+
 .flx-thm-typ-p2 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-p2-tt-cr);
   font-family: var(--_thm-ty-p2-ft-fy);
+  text-transform: var(--_thm-ty-p2-tt-tm);
+  word-wrap: var(--_thm-ty-p2-wd-wp);
+  word-break: var(--_thm-ty-p2-wd-bk);
   font-size: var(--_thm-ty-p2-ft-se);
   font-weight: var(--_thm-ty-p2-bd);
   font-style: var(--_thm-ty-p2-ic);
@@ -107,6 +136,9 @@
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-p3-tt-cr);
   font-family: var(--_thm-ty-p3-ft-fy);
+  text-transform: var(--_thm-ty-p3-tt-tm);
+  word-wrap: var(--_thm-ty-p3-wd-wp);
+  word-break: var(--_thm-ty-p3-wd-bk);
   font-size: var(--_thm-ty-p3-ft-se);
   font-weight: var(--_thm-ty-p3-bd);
   // font-style: var(--_thm-ty-p3-ic);
@@ -154,10 +186,7 @@
 
   border-radius: var(--_sf-hr-br-rs, var(--_thm-py-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-py-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-py-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-py-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-py-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-py-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-py-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-py-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-py-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-py-bs-dt-se-br-cr));
@@ -180,6 +209,15 @@
 
   color: var(--_sf-hr-cr, var(--_thm-py-bs-dt-se-tt-cr));
   font-family: var(--_sf-hr-ft-fy, var(--_thm-py-bs-dt-se-ft));
+  text-transform: var(--_sf-hr-tt-tm, var(--_thm-py-bs-dt-se-ft));
+  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-py-bs-dt-se-ft));
+  word-break: var(--_sf-hr-wd-bk, var(--_thm-py-bs-dt-se-ft));
+
+  &.flex__overflow {
+    white-space: normal;
+    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+  }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-py-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-py-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-py-bs-dt-se-ic));
@@ -190,6 +228,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));
@@ -243,10 +282,7 @@
   gap: var(--_thm-sy-bs-in-ad-tt-sg);
   border-radius: var(--_sf-hr-br-rs, var(--_thm-sy-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-sy-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-sy-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-sy-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-sy-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-sy-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-sy-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-sy-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-sy-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-sy-bs-dt-se-br-cr));
@@ -269,6 +305,15 @@
 
   color: var(--_sf-hr-cr, var(--_thm-sy-bs-dt-se-tt-cr));
   font-family: var(--_sf-hr-ft-fy, var(--_thm-sy-bs-dt-se-ft));
+  text-transform: var(--_sf-hr-tt-tm, var(--_thm-sy-bs-dt-se-ft));
+  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-sy-bs-dt-se-ft));
+  word-break: var(--_sf-hr-wd-bk, var(--_thm-sy-bs-dt-se-ft));
+
+  &.flex__overflow {
+    white-space: normal;
+    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+  }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-sy-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-sy-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-sy-bs-dt-se-ic));
@@ -279,6 +324,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));
@@ -332,10 +378,7 @@
   gap: var(--_thm-ty-bs-in-ad-tt-sg);
   border-radius: var(--_sf-hr-br-rs, var(--_thm-ty-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-ty-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-ty-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-ty-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-ty-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-ty-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-ty-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-ty-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-ty-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-ty-bs-dt-se-br-cr));
@@ -345,6 +388,15 @@
 
   color: var(--_sf-hr-cr, var(--_thm-ty-bs-dt-se-tt-cr));
   font-family: var(--_sf-hr-ft-fy, var(--_thm-ty-bs-dt-se-ft));
+  text-transform: var(--_sf-hr-tt-tm, var(--_thm-ty-bs-dt-se-ft));
+  word-wrap: var(--_sf-hr-wd-wp, var(--_thm-ty-bs-dt-se-ft));
+  word-break: var(--_sf-hr-wd-bk, var(--_thm-ty-bs-dt-se-ft));
+
+  &.flex__overflow {
+    white-space: normal;
+    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+  }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-ty-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-ty-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-ty-bs-dt-se-ic));
@@ -355,6 +407,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));
@@ -369,4 +422,4 @@
     display: inline-block;
     width: 100%;
   }
-}
+}