@sc-360-v2/storefront-cms-library 0.5.24 → 0.5.25

package/dist/breadcrumbs.scss

@@ -96,6 +96,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           white-space: nowrap;
           align-items: center;
 
+          padding: var(
+            --_ctm-mob-dn-or-im-se-pg,
+            var(--_ctm-tab-dn-or-im-se-pg, var(--_ctm-dn-or-im-se-pg))
+          );
+          gap: var(
+            --_ctm-mob-dn-or-im-se-im-gp,
+            var(--_ctm-tab-dn-or-im-se-im-gp, var(--_ctm-dn-or-im-se-im-gp))
+          );
+
           background-color: var(
             --_ctm-mob-dn-or-im-se-bd-cr,
             var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
@@ -189,6 +198,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           &:first-of-type {
+            padding: var(
+              --_ctm-mob-dn-he-pe-im-se-pg,
+              var(--_ctm-tab-dn-he-pe-im-se-pg, var(--_ctm-dn-he-pe-im-se-pg))
+            );
+            gap: var(
+              --_ctm-mob-dn-he-pe-im-se-im-gp,
+              var(--_ctm-tab-dn-he-pe-im-se-im-gp, var(--_ctm-dn-he-pe-im-se-im-gp))
+            );
             background-color: var(
               --_ctm-mob-dn-he-pe-im-se-bd-cr,
               var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
@@ -283,6 +300,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           &:last-of-type {
+            padding: var(
+              --_ctm-mob-dn-ct-pe-im-se-pg,
+              var(--_ctm-tab-dn-ct-pe-im-se-pg, var(--_ctm-dn-ct-pe-im-se-pg))
+            );
+            gap: var(
+              --_ctm-mob-dn-ct-pe-im-se-im-gp,
+              var(--_ctm-tab-dn-ct-pe-im-se-im-gp, var(--_ctm-dn-ct-pe-im-se-im-gp))
+            );
             background-color: var(
               --_ctm-mob-dn-ct-pe-im-se-bd-cr,
               var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))

package/dist/category-groups-product-grid.scss

@@ -1,186 +1,186 @@
-@use "./functions.scss" as *;
-@use "./repeater-embla-controls.scss" as *;
-
-// Category Groups product grid — display styles (Grid / Cards / Slider) ported
-// (light) from the Repeater, rebound to the productGridDesign.layout CSS-variable
-// paths (--_ctm-catego-dn-pt-gd-dn-lt-*). Items-per-row / min-column-width /
-// gaps are responsive (mob/tab/desktop var fallback). The container box
-// (padding + fill/border/radius/shadow) stays on .cg_product_grid in
-// category-groups-element.scss. @imported there within the categoryGroups scope.
-//
-// DOM: .cg_product_grid (root, gets grd|crds|sld + embla + data-control-type)
-//        > .cg_product_grid_wrapper (gets embla__container in slider mode)
-//            > .cg_product_card        (grid / cards)
-//            > .embla__slide > .cg_product_card (slider)
-//        > slider arrows / dots (slider mode)
-.cg_product_grid {
-  // Slider-control intermediate vars consumed by the embla-controls mixin.
-  --_sf-ic-sz-nn: var(
-    --_ctm-mob-catego-dn-pt-gd-dn-lt-aw-in-se,
-    var(--_ctm-tab-catego-dn-pt-gd-dn-lt-aw-in-se, var(--_ctm-catego-dn-pt-gd-dn-lt-aw-in-se, 40px))
-  );
-  --_sf-ed-vl-sz: var(
-    --_ctm-mob-catego-dn-pt-gd-dn-lt-dt-se,
-    var(--_ctm-tab-catego-dn-pt-gd-dn-lt-dt-se, var(--_ctm-catego-dn-pt-gd-dn-lt-dt-se, 10px))
-  );
-
-  // ---- Grid mode: auto-fit columns by min column width ----
-  &.grd {
-    & > .cg_product_grid_wrapper {
-      width: 100%;
-      display: grid;
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(
-          var(
-            --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-cn-wh,
-            var(
-              --_ctm-tab-catego-dn-pt-gd-dn-lt-mn-cn-wh,
-              var(--_ctm-catego-dn-pt-gd-dn-lt-mn-cn-wh, 200px)
-            )
-          ),
-          1fr
-        )
-      );
-      grid-auto-rows: minmax(
-        var(
-          --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-rw-ht,
-          var(
-            --_ctm-tab-catego-dn-pt-gd-dn-lt-mn-rw-ht,
-            var(--_ctm-catego-dn-pt-gd-dn-lt-mn-rw-ht, auto)
-          )
-        ),
-        auto
-      );
-      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
-      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
-    }
-  }
-
-  // ---- Cards mode: fixed items per row (flex calc) ----
-  &.crds {
-    & > .cg_product_grid_wrapper {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
-      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
-      & > .cg_product_card {
-        --_col-count: var(
-          --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
-          var(
-            --_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
-            var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-rw, 3)
-          )
-        );
-        --_col-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 0px)};
-        width: calc(
-          (100% / var(--_col-count)) -
-            (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-        );
-        flex: 0 0
-          calc(
-            (100% / var(--_col-count)) -
-              (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-          );
-      }
-    }
-  }
-
-  // ---- Slider mode (Embla) ----
-  &.sld {
-    position: relative;
-    overflow: clip;
-    --_sf-sl-ct-ic-dt-at-cl: var(
-      --_ctm-mob-catego-dn-pt-gd-dn-lt-cl-ae-cr,
-      var(--_ctm-tab-catego-dn-pt-gd-dn-lt-cl-ae-cr, var(--_ctm-catego-dn-pt-gd-dn-lt-cl-ae-cr))
-    );
-
-    @for $i from 1 through 3 {
-      &:is([data-control-type="#{$i}"]) {
-        @if ($i == 3) {
-          overflow-y: visible;
-        }
-        @include CMSRepeaterEmblaControlStyles($i);
-      }
-    }
-
-    // Template 3: place the arrows/dots ABOVE the product list (not over the
-    // images). bottom:100% puts the control's bottom edge at the grid's top
-    // edge; +8px adds a small gap. overflow-y:visible (set above) lets it
-    // show above the grid. (Repeater gets this from a saved template.)
-    &:is([data-control-type="3"]) {
-      --_sf-rp-ct-t3-top-vl: auto;
-      --_sf-rp-ct-t3-bottom-vl: calc(100% + 8px);
-      --_sf-rp-ct-t3-right-vl: 0px;
-      --_sf-rp-ct-t3-left-vl: auto;
-      --_sf-rp-ct-t3-transform-vl: none;
-
-      // Restyle template-3 pagination from the connected gray bar into
-      // separated circular dots + a capsule active indicator.
-      .pagination__v1 {
-        gap: 6px;
-      }
-      .pagination__v1 > button.embla__dot {
-        width: var(--_sf-ed-vl-sz, 10px);
-        height: var(--_sf-ed-vl-sz, 10px);
-        border-radius: 50%;
-        background: #d6d6d6;
-      }
-      .pagination__v1 > button.embla__dot.embla__dot--selected {
-        width: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
-        border-radius: 999px;
-        background: var(--_sf-sl-ct-ic-dt-at-cl, #7c3aed);
-      }
-    }
-
-    // Pagination dots: never compress. With many pages the strip scrolls
-    // horizontally (scrollbar hidden) instead of squishing the dots.
-    .pagination__v1 {
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      overflow-y: hidden;
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      & > button.embla__dot {
-        flex-shrink: 0;
-      }
-    }
-
-    & > .cg_product_grid_wrapper.embla__container {
-      display: flex;
-      width: 100%;
-      min-height: 100px;
-      gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)};
-      --_embla-slide-space: var(
-        --_ctm-mob-catego-dn-pt-gd-dn-lt-im-gp,
-        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-im-gp, var(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px))
-      );
-      --_embla-col-count: var(
-        --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-se,
-        var(
-          --_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-se,
-          var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-se, 3)
-        )
-      );
-      & > .embla__slide {
-        --_sf-cl-vl: calc(
-          (100% / var(--_embla-col-count, 3)) -
-            (
-              ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
-                (var(--_embla-col-count, 3))
-            )
-        );
-        flex: 0 0 var(--_sf-cl-vl);
-        width: var(--_sf-cl-vl);
-        grid-template-rows: minmax(50px, auto);
-        grid-template-columns: minmax(0px, 1fr);
-        img {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
+@use "./functions.scss" as *;
+@use "./repeater-embla-controls.scss" as *;
+
+// Category Groups product grid — display styles (Grid / Cards / Slider) ported
+// (light) from the Repeater, rebound to the productGridDesign.layout CSS-variable
+// paths (--_ctm-catego-dn-pt-gd-dn-lt-*). Items-per-row / min-column-width /
+// gaps are responsive (mob/tab/desktop var fallback). The container box
+// (padding + fill/border/radius/shadow) stays on .cg_product_grid in
+// category-groups-element.scss. @imported there within the categoryGroups scope.
+//
+// DOM: .cg_product_grid (root, gets grd|crds|sld + embla + data-control-type)
+//        > .cg_product_grid_wrapper (gets embla__container in slider mode)
+//            > .cg_product_card        (grid / cards)
+//            > .embla__slide > .cg_product_card (slider)
+//        > slider arrows / dots (slider mode)
+.cg_product_grid {
+  // Slider-control intermediate vars consumed by the embla-controls mixin.
+  --_sf-ic-sz-nn: var(
+    --_ctm-mob-catego-dn-pt-gd-dn-lt-aw-in-se,
+    var(--_ctm-tab-catego-dn-pt-gd-dn-lt-aw-in-se, var(--_ctm-catego-dn-pt-gd-dn-lt-aw-in-se, 40px))
+  );
+  --_sf-ed-vl-sz: var(
+    --_ctm-mob-catego-dn-pt-gd-dn-lt-dt-se,
+    var(--_ctm-tab-catego-dn-pt-gd-dn-lt-dt-se, var(--_ctm-catego-dn-pt-gd-dn-lt-dt-se, 10px))
+  );
+
+  // ---- Grid mode: auto-fit columns by min column width ----
+  &.grd {
+    & > .cg_product_grid_wrapper {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(
+          var(
+            --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-cn-wh,
+            var(
+              --_ctm-tab-catego-dn-pt-gd-dn-lt-mn-cn-wh,
+              var(--_ctm-catego-dn-pt-gd-dn-lt-mn-cn-wh, 200px)
+            )
+          ),
+          1fr
+        )
+      );
+      grid-auto-rows: minmax(
+        var(
+          --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-rw-ht,
+          var(
+            --_ctm-tab-catego-dn-pt-gd-dn-lt-mn-rw-ht,
+            var(--_ctm-catego-dn-pt-gd-dn-lt-mn-rw-ht, auto)
+          )
+        ),
+        auto
+      );
+      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
+      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
+    }
+  }
+
+  // ---- Cards mode: fixed items per row (flex calc) ----
+  &.crds {
+    & > .cg_product_grid_wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
+      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
+      & > .cg_product_card {
+        --_col-count: var(
+          --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
+          var(
+            --_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
+            var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-rw, 3)
+          )
+        );
+        --_col-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 0px)};
+        width: calc(
+          (100% / var(--_col-count)) -
+            (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+        );
+        flex: 0 0
+          calc(
+            (100% / var(--_col-count)) -
+              (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+          );
+      }
+    }
+  }
+
+  // ---- Slider mode (Embla) ----
+  &.sld {
+    position: relative;
+    overflow: clip;
+    --_sf-sl-ct-ic-dt-at-cl: var(
+      --_ctm-mob-catego-dn-pt-gd-dn-lt-cl-ae-cr,
+      var(--_ctm-tab-catego-dn-pt-gd-dn-lt-cl-ae-cr, var(--_ctm-catego-dn-pt-gd-dn-lt-cl-ae-cr))
+    );
+
+    @for $i from 1 through 3 {
+      &:is([data-control-type="#{$i}"]) {
+        @if ($i == 3) {
+          overflow-y: visible;
+        }
+        @include CMSRepeaterEmblaControlStyles($i);
+      }
+    }
+
+    // Template 3: place the arrows/dots ABOVE the product list (not over the
+    // images). bottom:100% puts the control's bottom edge at the grid's top
+    // edge; +8px adds a small gap. overflow-y:visible (set above) lets it
+    // show above the grid. (Repeater gets this from a saved template.)
+    &:is([data-control-type="3"]) {
+      --_sf-rp-ct-t3-top-vl: auto;
+      --_sf-rp-ct-t3-bottom-vl: calc(100% + 8px);
+      --_sf-rp-ct-t3-right-vl: 0px;
+      --_sf-rp-ct-t3-left-vl: auto;
+      --_sf-rp-ct-t3-transform-vl: none;
+
+      // Restyle template-3 pagination from the connected gray bar into
+      // separated circular dots + a capsule active indicator.
+      .pagination__v1 {
+        gap: 6px;
+      }
+      .pagination__v1 > button.embla__dot {
+        width: var(--_sf-ed-vl-sz, 10px);
+        height: var(--_sf-ed-vl-sz, 10px);
+        border-radius: 50%;
+        background: #d6d6d6;
+      }
+      .pagination__v1 > button.embla__dot.embla__dot--selected {
+        width: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
+        border-radius: 999px;
+        background: var(--_sf-sl-ct-ic-dt-at-cl, #7c3aed);
+      }
+    }
+
+    // Pagination dots: never compress. With many pages the strip scrolls
+    // horizontally (scrollbar hidden) instead of squishing the dots.
+    .pagination__v1 {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      & > button.embla__dot {
+        flex-shrink: 0;
+      }
+    }
+
+    & > .cg_product_grid_wrapper.embla__container {
+      display: flex;
+      width: 100%;
+      min-height: 100px;
+      gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)};
+      --_embla-slide-space: var(
+        --_ctm-mob-catego-dn-pt-gd-dn-lt-im-gp,
+        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-im-gp, var(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px))
+      );
+      --_embla-col-count: var(
+        --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-se,
+        var(
+          --_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-se,
+          var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-se, 3)
+        )
+      );
+      & > .embla__slide {
+        --_sf-cl-vl: calc(
+          (100% / var(--_embla-col-count, 3)) -
+            (
+              ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
+                (var(--_embla-col-count, 3))
+            )
+        );
+        flex: 0 0 var(--_sf-cl-vl);
+        width: var(--_sf-cl-vl);
+        grid-template-rows: minmax(50px, auto);
+        grid-template-columns: minmax(0px, 1fr);
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/dist/line.scss

@@ -1,257 +1,166 @@
-[data-div-type="element"][data-element-type="line"] {
-  // width: 100%;
-  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)))
-        )
-    )
-  );
-  height: var(--_ctm-lt-ht);
-
-  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-  aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-  .wrapper {
-    width: 100%;
-    // height: 100%;
-    height: var(--_ctm-lt-ht);
-  }
-
-  .line__container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    background-color: var(
-      --_ctm-mob-dn-le-wt-bd-cr,
-      var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
-    );
-    border-radius: var(
-      --_ctm-mob-dn-le-wt-br-rs,
-      var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
-    );
-
-    .line__core {
-      display: block;
-      background-color: transparent;
-      border-top-style: solid;
-    }
-  }
-
-  &[data-widget-border="true"] {
-    .line__container {
-      border-color: var(
-        --_ctm-mob-dn-le-wt-br-cr,
-        var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-le-wt-br-se,
-        var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-le-wt-br-wh,
-        var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
-      );
-    }
-  }
-
-  &[data-widget-shadow="true"] {
-    .line__container {
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
-          var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
-          var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
-          var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
-      );
-    }
-  }
-
-   // ─── Horizontal Line ─────────────────────
-  &[data-line-direction="horizontal"] {
-    .line__core {
-      width: 100%;
-      height: 0;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-      // border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
-    }
-    
-    &[data-line-style="solid"] .line__core {
-      border-top-style: solid;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="dotted"] .line__core {
-      border-top-style: dotted;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-      &[data-line-style="dashed"] .line__core {
-      border-top-style: dashed;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    &[data-line-style="double"] .line__core {
-      border-top-style: double;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="groove"] .line__core {
-      border-top-style: groove;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="ridge"] .line__core {
-      border-top-style: ridge;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="inset"] .line__core {
-      border-top-style: inset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="outset"] .line__core {
-      border-top-style: outset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="none"] .line__core {
-      border-top-style: none;
-    }
-
-    &[data-line-style="hidden"] .line__core {
-      border-top-style: hidden;
-    }
-    &[data-show-line-end-points="true"] {
-      .line__container::before,
-      .line__container::after {
-        content: "";
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background-color: var(--_ctm-dn-le-cr-ud);
-        top: 50%;
-        transform: translateY(-50%);
-        border-radius: 50%;
-      }
-
-      .line__container::before {
-        left: 0;
-      }
-
-      .line__container::after {
-        right: 0;
-      }
-
-      &[data-line-end-points="square"] .line__container::before,
-      &[data-line-end-points="square"] .line__container::after {
-        border-radius: 0;
-      }
-    }
-  }
-
-  // ─── Vertical Line ───────────────────────
-  &[data-line-direction="vertical"] {
-    .line__core {
-      width: 0;
-      height: 100%;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-      // border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
-    }
-    
-    &[data-line-style="solid"] .line__core {
-      border-left-style: solid;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    
-    &[data-line-style="dotted"] .line__core {
-      border-left-style: dotted;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-     &[data-line-style="dashed"] .line__core {
-      border-left-style: dashed;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    &[data-line-style="double"] .line__core {
-     border-left-style: double;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="groove"] .line__core {
-      border-left-style: groove;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="ridge"] .line__core {
-      border-left-style: ridge;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="inset"] .line__core {
-      border-left-style: inset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="outset"] .line__core {
-      border-left-style: outset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="none"] .line__core {
-      border-left-style: none;
-    }
-
-    &[data-show-line-end-points="true"] {
-      .line__container::before,
-      .line__container::after {
-        content: "";
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background-color: var(--_ctm-dn-le-cr-ud);
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 50%; // Default is circle
-      }
-
-      .line__container::before {
-        top: 0;
-      }
-
-      .line__container::after {
-        bottom: 0;
-      }
-
-      &[data-line-end-points="square"] .line__container::before,
-      &[data-line-end-points="square"] .line__container::after {
-        border-radius: 0;
-      }
-    }
-  }
-}
+[data-div-type="element"][data-element-type="line"] {
+  // width: 100%;
+  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)))
+        )
+    )
+  );
+  height: var(--_ctm-lt-ht);
+
+  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+  aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+  .wrapper {
+    width: 100%;
+    // height: 100%;
+    height: var(--_ctm-lt-ht);
+  }
+
+  .line__container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    background-color: var(
+      --_ctm-mob-dn-le-wt-bd-cr,
+      var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
+    );
+    border-radius: var(
+      --_ctm-mob-dn-le-wt-br-rs,
+      var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
+    );
+
+    .line__core {
+      display: block;
+      background-color: transparent;
+      border-top-style: solid;
+    }
+  }
+
+  &[data-widget-border="true"] {
+    .line__container {
+      border-color: var(
+        --_ctm-mob-dn-le-wt-br-cr,
+        var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-le-wt-br-se,
+        var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-le-wt-br-wh,
+        var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
+      );
+    }
+  }
+
+  &[data-widget-shadow="true"] {
+    .line__container {
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
+          var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
+          var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
+          var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
+      );
+    }
+  }
+
+  // ─── Horizontal Line ─────────────────────
+  &[data-line-direction="horizontal"] {
+    .line__core {
+      width: 100%;
+      height: 0;
+      border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
+    }
+
+    &[data-line-style="solid"] .line__core {
+      border-top-style: solid;
+    }
+
+    &[data-line-style="dotted"] .line__core {
+      border-top-style: dotted;
+    }
+
+    &[data-show-line-end-points="true"] {
+      .line__container::before,
+      .line__container::after {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background-color: var(--_ctm-dn-le-cr-ud);
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: 50%;
+      }
+
+      .line__container::before {
+        left: 0;
+      }
+
+      .line__container::after {
+        right: 0;
+      }
+
+      &[data-line-end-points="square"] .line__container::before,
+      &[data-line-end-points="square"] .line__container::after {
+        border-radius: 0;
+      }
+    }
+  }
+
+  // ─── Vertical Line ───────────────────────
+  &[data-line-direction="vertical"] {
+    .line__core {
+      width: 0;
+      height: 100%;
+      border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
+    }
+
+    &[data-line-style="solid"] .line__core {
+      border-left-style: solid;
+    }
+
+    &[data-line-style="dotted"] .line__core {
+      border-left-style: dotted;
+    }
+
+    &[data-show-line-end-points="true"] {
+      .line__container::before,
+      .line__container::after {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background-color: var(--_ctm-dn-le-cr-ud);
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 50%; // Default is circle
+      }
+
+      .line__container::before {
+        top: 0;
+      }
+
+      .line__container::after {
+        bottom: 0;
+      }
+
+      &[data-line-end-points="square"] .line__container::before,
+      &[data-line-end-points="square"] .line__container::after {
+        border-radius: 0;
+      }
+    }
+  }
+}

package/package.json

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