@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.54

package/dist/profile.scss

@@ -74,10 +74,6 @@
         --_sf-hr-bd-cr,
         var(--_ctm-mob-dn-pe-wt-bd-cr, var(--_ctm-tab-dn-pe-wt-bd-cr, var(--_ctm-dn-pe-wt-bd-cr)))
       );
-      border-radius: var(
-        --_sf-hr-br-br,
-        var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
-      );
       box-shadow: var(
         --_show-shadow,
         var(--_ctm-mob-dn-pe-wt-sw-ae, var(--_ctm-tab-dn-pe-wt-sw-ae, var(--_ctm-dn-pe-wt-sw-ae)))
@@ -85,6 +81,10 @@
           var(--_ctm-mob-dn-pe-wt-sw-sd, var(--_ctm-tab-dn-pe-wt-sw-sd, var(--_ctm-dn-pe-wt-sw-sd)))
           var(--_ctm-mob-dn-pe-wt-sw-cr, var(--_ctm-tab-dn-pe-wt-sw-cr, var(--_ctm-dn-pe-wt-sw-cr)))
       );
+      border-radius: var(
+        --_sf-hr-br-br,
+        var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
+      );
       .profile__section {
         position: relative;
         cursor: pointer;
@@ -320,6 +320,8 @@
       padding: prepareMediaVariable(--_ctm-dn-dn-is-cr-pg);
       z-index: 100000;
       overflow: hidden;
+      max-height: 200px;
+      overflow-y: auto;
       &[data-show-items-container-border="true"] {
         border-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-se);
@@ -347,16 +349,18 @@
         --_ctm-mob-dn-dn-is-dt-se-bd-cr,
         var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
       );
+
       .icon {
+        display: flex;
+        align-items: center;
+        align-self: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-vl-at);
+
         svg {
-          width: prepareMediaVariable(--_ctm-dn-dn-is-cr-in-se);
-          height: prepareMediaVariable(--_ctm-dn-dn-is-cr-in-se);
+          width: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-se);
+          height: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-se);
 
           path {
-            stroke: var(
-              --_ctm-mob-dn-dn-is-cr-in-c1,
-              var(--_ctm-tab-dn-ed-in-cr, var(--_ctm-dn-dn-is-cr-in-c1))
-            );
+            stroke: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-c1);
           }
         }
       }
@@ -365,6 +369,7 @@
       // color: #1f2937;
       display: flex;
       align-items: center;
+      gap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-gp);
       // transition: background 0.2s;
       cursor: pointer;
       &[data-dropdown-items-default-border="true"] {
@@ -389,10 +394,6 @@
             var(--_ctm-tab-dn-dn-is-dt-se-br-wh, var(--_ctm-dn-dn-is-dt-se-br-wh))
           )
         );
-        gap: var(
-          --_ctm-mob-dn-dn-is-cr-in-gp,
-          var(--_ctm-tab-dn-dn-is-cr-in-gp, var(--_ctm-dn-dn-is-cr-in-gp))
-        );
       }
       &[data-dropdown-items-default-shadow="true"] {
         box-shadow: var(
@@ -615,13 +616,37 @@
           --_ctm-mob-dn-dn-is-hr-se-ue,
           var(--_ctm-tab-dn-dn-is-hr-se-ue, var(--_ctm-dn-dn-is-hr-se-ue))
         );
-      }
 
-      .icon {
-        font-size: 18px;
-        display: flex;
-        align-items: center;
+        // Hover icon styling falls back to the default state so an item that was
+        // never given a hover icon design does not jump on hover.
+        gap: prepareMediaVariable(--_ctm-dn-dn-is-hr-se-in-gp, var(--_ctm-dn-dn-is-dt-se-in-gp));
+
+        .icon {
+          align-self: prepareMediaVariable(
+            --_ctm-dn-dn-is-hr-se-vl-at,
+            var(--_ctm-dn-dn-is-dt-se-vl-at)
+          );
+
+          svg {
+            width: prepareMediaVariable(
+              --_ctm-dn-dn-is-hr-se-in-se,
+              var(--_ctm-dn-dn-is-dt-se-in-se)
+            );
+            height: prepareMediaVariable(
+              --_ctm-dn-dn-is-hr-se-in-se,
+              var(--_ctm-dn-dn-is-dt-se-in-se)
+            );
+
+            path {
+              stroke: prepareMediaVariable(
+                --_ctm-dn-dn-is-hr-se-in-c1,
+                var(--_ctm-dn-dn-is-dt-se-in-c1)
+              );
+            }
+          }
+        }
       }
+
       a {
         display: block;
       }

package/dist/quota-details.scss

@@ -1,5 +1,8 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
+
+$overflowSelector: ".flex__overflow";
 
 [data-div-type="element"] {
   &[data-element-type="quotaDetails"] {
@@ -10,12 +13,17 @@
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: 50%;
     // 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)))
-    //   )
-    // );
+    // Reads the percentage the left/right resize handles write, same as FAQ. Without
+    // this the handles (and the Layout > Width input) drag a value nothing consumes.
+    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)))
+      )
+    );
+    // Floor for the width above: the two items plus their icons stop reading as a row
+    // below this, and dragging past it only produced a squeezed, wrapped box.
+    min-width: 300px !important;
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
@@ -133,6 +141,10 @@
           display: flex;
           align-items: center;
           gap: 4px;
+          // Flex items default to min-width:auto, so they refuse to shrink below
+          // their text width. Narrowing the element used to push this row outside
+          // the element box instead of reflowing it inside.
+          min-width: 0;
 
           .svg_icon {
             display: flex;
@@ -141,7 +153,10 @@
         .quota__left {
           .count {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-qa-lt-cr,
               var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
@@ -178,10 +193,29 @@
               --_ctm-mob-dn-qa-lt-ue,
               var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm,
+              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp,
+              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk,
+              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
           .label {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-qa-lt-cr-dc-dc,
               var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
@@ -218,6 +252,22 @@
               --_ctm-mob-dn-qa-lt-ue-dc,
               var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
             );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
           }
           .icon {
             display: var(--_sf-show-icon-ff, flex);
@@ -235,6 +285,12 @@
                   --_ctm-mob-dn-qa-lt-in-c1,
                   var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-qa-lt-se-wh,
+                  var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
+                );
               }
             }
           }
@@ -242,7 +298,10 @@
         .days__left {
           .count {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-ds-lt-cr,
               var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
@@ -279,10 +338,29 @@
               --_ctm-mob-dn-ds-lt-ue,
               var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm,
+              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp,
+              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk,
+              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
           .label {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-ds-lt-cr-dc-dc,
               var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
@@ -319,6 +397,22 @@
               --_ctm-mob-dn-ds-lt-ue-dc,
               var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
           }
           .icon {
             display: var(--_sf-show-icon-ff, flex);
@@ -336,6 +430,12 @@
                   --_ctm-mob-dn-ds-lt-in-c1,
                   var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-ds-lt-se-wh,
+                  var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
+                );
               }
             }
           }

package/dist/repeater-item.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
 
@@ -18,6 +18,13 @@
     // inline `min-height: 0px` on the element needs !important to be overridden
     min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
 
+    // The item's own Show Shadow switch, which reaches the stylesheet as
+    // `data-show-shadow` (RepeaterItem surfaces it — it is a control, so it is not
+    // part of the BUILDER attributes that get spread onto the element).
+    &[data-show-shadow="false"] {
+      --_sf-repe-show-shadow: none;
+    }
+
     & > div {
       &.wrapper {
         width: 100%;
@@ -66,30 +73,35 @@
           --_ctm-mob-repe-dn-br-wh,
           var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
         );
+        // The four shadow variables read `repe-se-*`, but the design section is
+        // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
+        // `repe-se-*` variable is ever defined, which made the whole var() chain
+        // invalid at computed-value time and resolved box-shadow to its initial `none`.
+        //
+        // The gate is `--_sf-repe-show-shadow`, not the shared `--_show-shadow`: the
+        // parent Repeater sets that on its own root when its shadow is switched off, and
+        // custom properties inherit, so items lost their shadow whenever the repeater's
+        // was off. A name of its own keeps the two switches independent. The hover
+        // variables that used to head this chain are gone with it — this element has no
+        // hover state, so nothing set them and they carried the same leak risk.
+        //
+        // Per-part fallbacks match repeater.scss: without them a single unset part would
+        // invalidate the whole declaration again.
         box-shadow: var(
-          --_hover-show-shadow,
-          var(
-            --_sf-hr-bx-sw,
+          --_sf-repe-show-shadow,
+          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
+            var(
+              --_ctm-mob-repe-dn-sw-br,
+              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-sd,
+              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
+            )
             var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-repe-se-sw-ae,
-                  var(--_ctm-tab-repe-se-sw-ae, var(--_ctm-repe-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-br,
-                  var(--_ctm-tab-repe-se-sw-br, var(--_ctm-repe-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-sd,
-                  var(--_ctm-tab-repe-se-sw-sd, var(--_ctm-repe-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-cr,
-                  var(--_ctm-tab-repe-se-sw-cr, var(--_ctm-repe-se-sw-cr))
-                )
+              --_ctm-mob-repe-dn-sw-cr,
+              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
             )
-          )
         );
       }
       &:is([data-background-type="color"] > *).wrapper {

package/dist/request-for-quotes.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
 @import "./functions.scss";
 $defaultValues: (
@@ -11,6 +11,20 @@ $defaultValues: (
 [data-div-type="element"] {
   &[data-element-type="requestForQuote"] {
     margin: 0;
+    // Reads the percentage the right resize handle writes, same as My Templates and
+    // My Wishlist. Without it the handle drags a value nothing consumes.
+    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)))
+      )
+    );
+
+    & > .wrapper {
+      // Layout > Padding. The element declares it but nothing read it back — the rule
+      // below was commented out and named a variable (`--_lt-pg`) that never existed.
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    }
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);

package/dist/types/builder/tools/element-edit/allocationDetails.d.ts

@@ -12,6 +12,15 @@ interface selfLayoutInterface {
         value: AlignItemsValue;
     };
     allocationItemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & any;
+    allocationsView: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string;
+    };
+    showAllocationTabs: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: boolean;
+    };
+    showProfileTabs: Pick<CMSIBCommonInterface, "property"> & {
+        value: boolean;
+    } & any;
 }
 interface selfDesignInterface {
     selectorKey: string;
@@ -30,7 +39,14 @@ export declare enum SelectorKeysEnum {
     GRID_VIEW_CONTROL_STYLE = "gridViewControlStyle",
     BUTTON = "button",
     SELECTED_STATE = "selectedState",
-    LAYOUT_STYLE = "layoutStyle"
+    HOVER_STATE = "hoverState",
+    LAYOUT_STYLE = "layoutStyle",
+    SIDEBAR_DESIGN = "sidebarDesign",
+    SIDEBAR_CONTAINER = "sidebarContainer",
+    SIDEBAR_HEADING = "sidebarHeading",
+    PROFILE_ROW = "profileRow",
+    PROFILE_TREE_ICON = "profileTreeIcon",
+    ALLOCATION_ROW = "allocationRow"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};