@sc-360-v2/storefront-cms-library 0.5.16 → 0.5.17

package/dist/category-groups-element.scss

@@ -25,6 +25,12 @@ $cg-brand: "--_ctm-catego-dn-pt-gd-dn-bd-ne"; // productGridDesign.brandName
 $cg-name: "--_ctm-catego-dn-pt-gd-dn-pt-ne"; // productGridDesign.productName
 $cg-price: "--_ctm-catego-dn-pt-gd-dn-pt-pe"; // productGridDesign.productPrice
 $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsText
+// Design-block bases for the section item-gaps.
+$cg-sidebar-design: "--_ctm-catego-dn-sr-dn"; // sidebarDesign (itemGap)
+$cg-scroller-design: "--_ctm-catego-dn-sb-cy-sr-dn"; // subCategoryScrollerDesign (itemGap)
+$cg-grid: "--_ctm-catego-dn-pt-gd-dn"; // productGridDesign (itemGap)
+$cg-main: "--_ctm-catego-dn-mn-sn"; // mainSection (right section container + itemGap)
+$cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selector)
 
 @mixin cg-font($base, $color, $size, $weight: 600) {
   color: prepareMediaVariable(#{$base}-cr, $color);
@@ -169,16 +175,105 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     // -------------------------------------------------------------------
     .category__groups__element__container {
       display: flex;
-      gap: 36px;
+      // Widget Style → gap between the left sidebar and the right main section.
+      gap: prepareMediaVariable(#{$cg-widget}-im-gp, 36px);
       align-items: flex-start;
       width: 100%;
     }
 
+    // ---- Mobile (fixed layout): the sidebar tree is replaced by a selector
+    // that opens the CategoryTree in a modal; everything stacks vertically.
+    .category__groups__element__container.is-mobile {
+      flex-direction: column;
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
+
+      .cg_main {
+        width: 100%;
+      }
+    }
+    .cg_mobile_category_select {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      width: 100%;
+      cursor: pointer;
+    }
+    // Mobile Select-category button (rendered by the shared ButtonComponent as
+    // `.btn__with__text`). Styled from the `selectButton` design block — which
+    // uses the standard button property suffixes — via the cg-design / cg-font
+    // mixins (default + hover), plus the button-specific layout vars.
+    .btn__with__text[data-btn-name="selectButton"] {
+      display: flex;
+      align-items: center;
+      flex-direction: var(--_sf-fd-bn, row);
+      cursor: pointer;
+      width: prepareMediaVariable(#{$cg-select-btn}-dt-se-wh, auto);
+      padding: prepareMediaVariable(#{$cg-select-btn}-dt-se-pg, 8px 12px);
+      gap: prepareMediaVariable(#{$cg-select-btn}-dt-se-gp, 8px);
+      justify-content: prepareMediaVariable(#{$cg-select-btn}-dt-se-at, space-between);
+      @include cg-design(#{$cg-select-btn}-dt-se);
+
+      &[data-icon-position="right"] {
+        --_sf-fd-bn: row-reverse;
+      }
+      &[data-icon-position="left"],
+      &[data-icon-position="center"] {
+        --_sf-fd-bn: row;
+      }
+
+      .txt {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @include cg-font(#{$cg-select-btn}-dt-se, #002a4e, 14px, 400);
+      }
+
+      .icon {
+        display: flex;
+        flex-shrink: 0;
+        svg {
+          width: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
+          height: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
+          path {
+            stroke: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-c1, currentColor);
+          }
+        }
+      }
+      .icon--hover {
+        display: none;
+      }
+
+      &:hover {
+        @include cg-design-state($cg-select-btn, hr-se);
+        .txt {
+          @include cg-font-state($cg-select-btn, hr-se, #002a4e, 14px, 400);
+        }
+        .icon--hover {
+          display: flex;
+        }
+      }
+      // Swap to the hover icon only when one is configured.
+      &:hover:has(.icon--hover) .icon--default {
+        display: none;
+      }
+    }
+    // Tree rendered inside the (portaled) category modal.
+    .cg_category_modal_tree {
+      width: 100%;
+      padding: 4px;
+    }
+
     // ---- Left sidebar -------------------------------------------------
     .cg_sidebar {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      // Sidebar Container → gap (heading ↔ tree) + padding.
+      gap: prepareMediaVariable(#{$cg-sidebar}-im-gp, 12px);
+      padding: prepareMediaVariable(#{$cg-sidebar}-pg, 0);
       width: 260px;
       flex-shrink: 0;
       background-color: prepareMediaVariable(#{$cg-sidebar}-bd-cr, transparent);
@@ -228,15 +323,18 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     .cg_category_tree {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      // Gap BETWEEN category rows (Sidebar Container → Category Tree Gap).
+      gap: prepareMediaVariable(#{$cg-sidebar}-cy-te-gp, 8px);
       width: 100%;
     }
 
     .cg_tree_node {
       display: flex;
       align-items: center;
-      gap: 4px;
-      padding: 4px 0;
+      // Category Tree Item → item gap (icon ↔ label).
+      gap: prepareMediaVariable(#{$cg-tree}-dt-se-im-gp, 4px);
+      // Category Tree Item → Layout padding.
+      padding: prepareMediaVariable(#{$cg-tree}-dt-se-pg, 4px 0);
       cursor: pointer;
       @include cg-design(#{$cg-tree}-dt-se);
     }
@@ -247,20 +345,50 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
       width: 24px;
       height: 24px;
       flex-shrink: 0;
-      // Configurable expand/collapse icon colour (currentColor stroke).
+      // Configurable expand/collapse icon colour (inherited by the SVG below).
       color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
     }
     .cg_chevron {
       display: flex;
+      align-items: center;
+      justify-content: center;
       transition: transform 0.15s ease;
+      color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
       svg {
         width: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
         height: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
+        // Apply the configured colour even when the fetched SVG hardcodes its
+        // own stroke/fill (skip parts explicitly set to "none").
+        &[stroke]:not([stroke="none"]),
+        [stroke]:not([stroke="none"]) {
+          stroke: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
+        }
+        &[fill]:not([fill="none"]),
+        [fill]:not([fill="none"]) {
+          fill: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
+        }
       }
     }
     .cg_chevron.is-open {
       transform: rotate(90deg);
     }
+    // Expanded icon uses its own size/colour vars (iconSizeExpanded /
+    // iconColorExpanded) so it is independent of the collapsed icon.
+    .cg_chevron.is-expanded {
+      color: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
+      svg {
+        width: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
+        height: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
+        &[stroke]:not([stroke="none"]),
+        [stroke]:not([stroke="none"]) {
+          stroke: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
+        }
+        &[fill]:not([fill="none"]),
+        [fill]:not([fill="none"]) {
+          fill: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
+        }
+      }
+    }
     .cg_tree_node_label {
       flex: 1;
       @include cg-font(#{$cg-tree}-dt-se, #002a4e, 14px, 600);
@@ -281,12 +409,14 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     .cg_subtree {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      // Gap BETWEEN sub-category rows (Sidebar Container → Sub Category Gap).
+      gap: prepareMediaVariable(#{$cg-sidebar}-sb-cy-gp, 8px);
       padding-left: 31px;
       width: 100%;
     }
     .cg_subtree_node {
-      padding: 4px 0;
+      // Sub Category Tree Item → Layout padding.
+      padding: prepareMediaVariable(#{$cg-subtree}-dt-se-pg, 4px 0);
       cursor: pointer;
       @include cg-design(#{$cg-subtree}-dt-se);
     }
@@ -308,12 +438,16 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     }
 
     // ---- Right main ---------------------------------------------------
+    // mainSection: container fill/border + gap between heading, breadcrumb,
+    // sub-categories and the product grid.
     .cg_main {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
+      padding: prepareMediaVariable(#{$cg-main}-pg, 0);
       flex: 1 0 0;
       min-width: 0;
+      @include cg-design($cg-main);
     }
 
     // Drill-down breadcrumb (reuses the Breadcrumbs element DOM classes), styled
@@ -375,7 +509,9 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: 12px;
+      // Same gap as the main section so breadcrumb ↔ sub-categories spacing
+      // follows the Main Section item gap.
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
       width: 100%;
     }
     // The horizontal chip row: left arrow + scrolling rail + right arrow.
@@ -396,22 +532,29 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0;
-      border: none;
-      background: transparent;
+      padding: prepareMediaVariable(#{$cg-arrow}-dt-se-pg, 0);
       cursor: pointer;
       flex-shrink: 0;
-      // Icon colour (property `iconColor1` -> `in-c1`) drives the SVG `currentColor` stroke.
-      color: prepareMediaVariable(#{$cg-arrow}-in-c1, #002a4e);
+      // Default state: fill / border / radius / shadow.
+      @include cg-design(#{$cg-arrow}-dt-se);
+      // Icon colour (in-c1) drives the SVG `currentColor` stroke.
+      color: prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e);
       svg {
-        width: prepareMediaVariable(#{$cg-arrow}-in-se, 20px);
-        height: prepareMediaVariable(#{$cg-arrow}-in-se, 20px);
+        width: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
+        height: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
+      }
+      &:hover {
+        @include cg-design-state($cg-arrow, hr-se);
+        color: prepareMediaVariable(
+          #{$cg-arrow}-hr-se-in-c1,
+          prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e)
+        );
       }
     }
     .cg_chip_rail {
       display: flex;
       align-items: center;
-      gap: 16px;
+      gap: prepareMediaVariable(#{$cg-scroller-design}-im-gp, 16px);
       flex: 1 0 0;
       min-width: 0;
       overflow-x: auto;
@@ -423,6 +566,8 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     .cg_chip {
       display: flex;
       align-items: center;
+      // Spacing between the chip image and its label (Sub Category Chip item gap).
+      gap: prepareMediaVariable(#{$cg-chip}-dt-se-im-gp, 8px);
       cursor: pointer;
       flex-shrink: 0;
       padding: 0;
@@ -473,13 +618,17 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     }
 
     // ---- Product grid -------------------------------------------------
+    // Container box only. Display modes (grid / cards / slider) + gaps live in
+    // category-groups-product-grid.scss (imported below).
     .cg_product_grid {
-      display: grid;
-      grid-template-columns: repeat(var(--cg-columns, 3), 1fr);
-      column-gap: 24px;
-      row-gap: 48px;
       width: 100%;
+      position: relative;
+      padding: prepareMediaVariable(#{$cg-grid}-lt-pg, 0);
+      // Grid container fill / border / radius / shadow.
+      @include cg-design(#{$cg-grid}-lt);
     }
+    // Display styles (Grid / Cards / Slider) for the product grid.
+    @import "./category-groups-product-grid.scss";
     .cg_product_card {
       display: flex;
       flex-direction: column;
@@ -516,11 +665,16 @@ $cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsTe
     .cg_product_info {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      // Product Card → content gap (between brand / name / price / options).
+      gap: prepareMediaVariable(#{$cg-card}-dt-se-ct-gp, 12px);
     }
     .cg_brand_name {
       margin: 0;
       @include cg-font($cg-brand, #737373, 14px, 400);
+      // Text overflow toggle + max lines (Brand Name design controls).
+      &.flex__overflow {
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
     }
     .cg_product_name {
       margin: 0;

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

@@ -0,0 +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%;
+        }
+      }
+    }
+  }
+}