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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/add-order.scss +3 -4
  2. package/dist/builder.js +1 -1
  3. package/dist/bundle.scss +2584 -2567
  4. package/dist/button copy.scss +2 -2
  5. package/dist/button.scss +2 -1
  6. package/dist/hotspot.scss +13 -4
  7. package/dist/language-selector.scss +1 -1
  8. package/dist/mega-menu.scss +2 -8
  9. package/dist/menu-v2.scss +1 -5
  10. package/dist/order-status.scss +16 -5
  11. package/dist/profile.scss +113 -42
  12. package/dist/scroll.scss +24 -0
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +15 -15
  14. package/dist/types/builder/tools/element-edit/bundle.d.ts +20 -10
  15. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +15 -15
  16. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +225 -0
  17. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +35 -35
  18. package/dist/types/builder/tools/element-edit/coupon.d.ts +10 -10
  19. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +233 -31
  20. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +33 -0
  21. package/dist/types/builder/tools/element-edit/profile.d.ts +7 -0
  22. package/dist/types/builder/tools/element-edit/scroll.d.ts +18 -0
  23. package/dist/types/builder/tools/element-edit/video.d.ts +15 -0
  24. package/package.json +131 -131
package/dist/button copy.scss CHANGED
@@ -5,11 +5,11 @@
5
5
 
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="button"] {
8
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
-
8
+ min-height: 24px !important;
10
9
  & > .wrapper {
11
10
  // width: 100%;
12
11
  height: 100%;
12
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
13
13
  }
14
14
 
15
15
  &[data-show-shadow="false"] {
package/dist/button.scss CHANGED
@@ -5,11 +5,12 @@
5
5
 
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="button"] {
8
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
8
+ min-height: 24px !important;
9
9
 
10
10
  & > .wrapper {
11
11
  // width: 100%;
12
12
  height: 100%;
13
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
13
14
  }
14
15
 
15
16
  &[data-show-shadow="false"] {
package/dist/hotspot.scss CHANGED
@@ -193,10 +193,17 @@ $data: (
193
193
 
194
194
  & > .wrapper {
195
195
  width: 100%;
196
+ // Fill the element's fixed height and keep padding + border inside it, so
197
+ // the image (height:100%) fits the padded frame instead of overflowing.
198
+ height: 100%;
199
+ box-sizing: border-box;
196
200
  position: relative;
197
201
 
198
202
  background-color: prepareMediaVariable(--_ctm-dn-ie-se-bd-cr);
199
203
  padding: prepareMediaVariable(--_ctm-lt-pg, var(--_tst-lt-pg));
204
+ // Frame border-radius lives on the wrapper (with the background & shadow),
205
+ // not on the image inside it.
206
+ border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
200
207
  box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
201
208
  prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
202
209
  prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
@@ -323,7 +330,7 @@ $data: (
323
330
  text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
324
331
  letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
325
332
  line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
326
- text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
333
+ text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue-dc);
327
334
  text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm-dc, none);
328
335
  word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp-dc, normal);
329
336
  word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk-dc, normal);
@@ -583,7 +590,7 @@ $data: (
583
590
  }
584
591
 
585
592
  &[data-hotspot-image-style-show-border="true"] {
586
- .imageHotspot-element {
593
+ & > .wrapper {
587
594
  border-style: prepareMediaVariable(--_ctm-dn-ie-se-br-se);
588
595
  border-color: prepareMediaVariable(--_ctm-dn-ie-se-br-cr);
589
596
  border-width: prepareMediaVariable(--_ctm-dn-ie-se-br-wh);
@@ -656,11 +663,13 @@ $data: (
656
663
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
657
664
  row-gap: prepareMediaVariable(--_sf-gp);
658
665
  width: 100%;
659
- height: prepareMediaVariable(--_ctm-lt-ht, inherit);
666
+ // Fill the wrapper's content box (element height minus wrapper padding)
667
+ // rather than the full element height, so the image sits inside the frame.
668
+ height: 100%;
660
669
  scale: prepareMediaVariable(--_ctm-dn-ie-se-zm-ie);
661
670
  transition: transform 0.3s ease-in-out;
662
671
  rotate: calc(#{prepareMediaVariable(--_ctm-dn-ie-se-re)} * 1deg);
663
- border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
672
+ // border-radius moved to & > .wrapper (the frame).
664
673
 
665
674
  &:hover {
666
675
  &[data-on-hover="Zoom Out"] {
package/dist/language-selector.scss CHANGED
@@ -401,7 +401,7 @@ $widgetFontProps:
401
401
  box-sizing: border-box;
402
402
  // Without this a flex item refuses to shrink below its content width, so a
403
403
  // larger font size pushed the label straight out of the widget.
404
- min-width: 0;
404
+ // min-width: 0;
405
405
 
406
406
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg));
407
407
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
package/dist/mega-menu.scss CHANGED
@@ -839,7 +839,6 @@ $defaultValues: (
839
839
  &:hover {
840
840
  --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-se)};
841
841
  --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-c1)};
842
- --_sf-hm-hr-ic-swh: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-se-wh)};
843
842
 
844
843
  --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-pg)};
845
844
  --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-br-rs)};
@@ -874,13 +873,8 @@ $defaultValues: (
874
873
  #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-in-c1)}
875
874
  );
876
875
  // Overrides the stroke-width presentation attribute baked into the icon
877
- // markup. `--_sf-hm-hr-ic-swh` is published by the :hover block so the
878
- // hover state carries its own width; unset otherwise, so the default
879
- // state's value applies.
880
- stroke-width: var(
881
- --_sf-hm-hr-ic-swh,
882
- #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-se-wh)}
883
- );
876
+ // markup. Authored on the default state only, so it keeps applying on hover.
877
+ stroke-width: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-se-wh, 1.25)};
884
878
  }
885
879
  }
886
880
  }
package/dist/menu-v2.scss CHANGED
@@ -808,7 +808,6 @@ $defaultValues: (
808
808
  // Published on the <svg> rather than on <path>: custom properties
809
809
  // inherit, so whatever shapes the glyph is drawn with will read them.
810
810
  --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
811
- --_sf-hm-hr-ic-swh: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-se-wh)};
812
811
  }
813
812
 
814
813
  // --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
@@ -850,10 +849,7 @@ $defaultValues: (
850
849
  ellipse,
851
850
  rect {
852
851
  stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
853
- stroke-width: var(
854
- --_sf-hm-hr-ic-swh,
855
- #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh)}
856
- );
852
+ stroke-width: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh, 1.25)};
857
853
  }
858
854
  }
859
855
  }
package/dist/order-status.scss CHANGED
@@ -771,10 +771,6 @@ $defaultValues: (
771
771
  // color: var(--_gray-900);
772
772
  // line-height: 30px;
773
773
  line-height: prepareMediaVariable(--_ctm-dn-or-io-or-id-le-ht, 24px);
774
- // The order number and its status badge are the two items this gap spaces.
775
- display: inline-flex;
776
- align-items: center;
777
- gap: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 0);
778
774
  font-family: var(
779
775
  --_ctm-mob-dn-or-io-or-id-ft-fy,
780
776
  var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
@@ -831,7 +827,11 @@ $defaultValues: (
831
827
  }
832
828
 
833
829
  .status {
834
- margin-left: 6px;
830
+ // Order Id > Item Gap spaces the badge from the number. Deliberately a
831
+ // margin rather than a flex `gap` on `.order_number_id`: a flex parent
832
+ // blockifies this badge and the parent's text-decoration would then paint
833
+ // through it, with the `text-decoration: none` below unable to stop it.
834
+ margin-left: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 6px);
835
835
  padding: 2px 8px;
836
836
  border-radius: 4px;
837
837
  font-size: 12px;
@@ -840,6 +840,8 @@ $defaultValues: (
840
840
  // background-color: #eff8ff;
841
841
  // @include BgColorLighter(var(--_thm-cs-at-py), 5%);
842
842
  // color: var(--_thm-cs-at-py);
843
+ text-decoration: none;
844
+ font-style: normal;
843
845
 
844
846
  display: inline-flex;
845
847
  align-items: center;
@@ -2106,6 +2108,12 @@ $defaultValues: (
2106
2108
  font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic);
2107
2109
  text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an);
2108
2110
  padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg);
2111
+ text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm);
2112
+ word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr);
2113
+ word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk);
2114
+ &#{$overflowSelector} {
2115
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2116
+ }
2109
2117
  }
2110
2118
  .break_up_amount {
2111
2119
  line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht-dc);
@@ -2119,6 +2127,9 @@ $defaultValues: (
2119
2127
  font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic-dc);
2120
2128
  text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an-dc);
2121
2129
  padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg-dc);
2130
+ text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm-dc);
2131
+ word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr-dc);
2132
+ word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk-dc);
2122
2133
  }
2123
2134
  }
2124
2135
  }
package/dist/profile.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
 
5
+ $overflowSelector: ".flex__overflow";
6
+
5
7
  [data-div-type="element"] {
6
8
  &[data-element-type="profile"] {
7
9
  width: var(
@@ -28,14 +30,18 @@
28
30
  // justify-content: center;
29
31
  }
30
32
  &[data-layout-alignment="horizontal"] {
31
- .profile__section {
33
+ .profile__container > .profile__section {
32
34
  flex-direction: row;
35
+ align-items: prepareMediaVariable(--_ctm-lt-an-is, center);
36
+ justify-content: prepareMediaVariable(--_ctm-lt-jy-ct, start);
33
37
  }
34
38
  }
35
39
 
36
40
  &[data-layout-alignment="vertical"] {
37
- .profile__section {
41
+ .profile__container > .profile__section {
38
42
  flex-direction: column;
43
+ align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);
44
+ justify-content: prepareMediaVariable(--_ctm-lt-an-is, center);
39
45
  }
40
46
  }
41
47
  &[data-show-text-avatar-border="true"] {
@@ -47,7 +53,7 @@
47
53
  }
48
54
 
49
55
  &[data-widget-border="true"] {
50
- .profile__section {
56
+ .profile__container {
51
57
  border-color: var(
52
58
  --_ctm-mob-dn-pe-wt-br-cr,
53
59
  var(--_ctm-tab-dn-pe-wt-br-cr, var(--_ctm-dn-pe-wt-br-cr))
@@ -69,6 +75,7 @@
69
75
  .profile__container {
70
76
  display: flex;
71
77
  justify-content: space-between;
78
+ align-items: center;
72
79
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
73
80
  background-color: var(
74
81
  --_sf-hr-bd-cr,
@@ -85,12 +92,13 @@
85
92
  --_sf-hr-br-br,
86
93
  var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
87
94
  );
95
+ min-height: prepareMediaVariable(--_ctm-lt-ht);
88
96
  .profile__section {
89
97
  position: relative;
90
98
  cursor: pointer;
91
99
  display: flex;
92
100
  align-items: center;
93
- justify-content: center;
101
+ justify-content: start;
94
102
  // gap: var(prepareMediaVariable(--_ctm-dn-pe-wt-in-gp));
95
103
  gap: prepareMediaVariable(--_ctm-dn-pe-wt-in-gp);
96
104
  width: 100%;
@@ -202,44 +210,58 @@
202
210
  // font-size: 14px;
203
211
  display: flex;
204
212
  flex-direction: column;
213
+ min-width: 0;
214
+ max-width: 100%;
205
215
  // list-style: none;
206
216
  // line-height: 18px;
207
- color: var(--_ctm-mob-dn-pe-wt-cr, var(--_ctm-tab-dn-pe-wt-cr, var(--_ctm-dn-pe-wt-cr)));
208
- font-family: var(
209
- --_sf-hr-ff,
210
- var(
211
- --_ctm-mob-dn-pe-wt-ft-fy,
212
- var(--_ctm-tab-dn-pe-wt-ft-fy, var(--_ctm-dn-pe-wt-ft-fy))
213
- )
214
- );
215
- font-size: var(
216
- --_ctm-mob-dn-pe-wt-ft-se,
217
- var(--_ctm-tab-dn-pe-wt-ft-se, var(--_ctm-dn-pe-wt-ft-se))
218
- );
219
- font-weight: var(
220
- --_ctm-mob-dn-pe-wt-ft-wt,
221
- var(--_ctm-tab-dn-pe-wt-ft-wt, var(--_ctm-dn-pe-wt-ft-wt))
222
- );
223
- font-style: var(
224
- --_ctm-mob-dn-pe-wt-ft-se-ic,
225
- var(--_ctm-tab-dn-pe-wt-ft-se-ic, var(--_ctm-dn-pe-wt-ft-se-ic))
226
- );
227
- text-align: var(
228
- --_ctm-mob-dn-pe-wt-tt-an,
229
- var(--_ctm-tab-dn-pe-wt-tt-an, var(--_ctm-dn-pe-wt-tt-an))
230
- );
231
- letter-spacing: var(
232
- --_ctm-mob-dn-pe-wt-lr-sg,
233
- var(--_ctm-tab-dn-pe-wt-lr-sg, var(--_ctm-dn-pe-wt-lr-sg))
234
- );
235
- line-height: var(
236
- --_ctm-mob-dn-pe-wt-le-ht,
237
- var(--_ctm-tab-dn-pe-wt-le-ht, var(--_ctm-dn-pe-wt-le-ht))
238
- );
239
- text-decoration: var(
240
- --_ctm-mob-dn-pe-wt-ue,
241
- var(--_ctm-tab-dn-pe-wt-ue, var(--_ctm-dn-pe-wt-ue))
242
- );
217
+ .profile__label {
218
+ color: var(
219
+ --_ctm-mob-dn-pe-wt-cr,
220
+ var(--_ctm-tab-dn-pe-wt-cr, var(--_ctm-dn-pe-wt-cr))
221
+ );
222
+ font-family: var(
223
+ --_sf-hr-ff,
224
+ var(
225
+ --_ctm-mob-dn-pe-wt-ft-fy,
226
+ var(--_ctm-tab-dn-pe-wt-ft-fy, var(--_ctm-dn-pe-wt-ft-fy))
227
+ )
228
+ );
229
+ font-size: var(
230
+ --_ctm-mob-dn-pe-wt-ft-se,
231
+ var(--_ctm-tab-dn-pe-wt-ft-se, var(--_ctm-dn-pe-wt-ft-se))
232
+ );
233
+ font-weight: var(
234
+ --_ctm-mob-dn-pe-wt-ft-wt,
235
+ var(--_ctm-tab-dn-pe-wt-ft-wt, var(--_ctm-dn-pe-wt-ft-wt))
236
+ );
237
+ font-style: var(
238
+ --_ctm-mob-dn-pe-wt-ft-se-ic,
239
+ var(--_ctm-tab-dn-pe-wt-ft-se-ic, var(--_ctm-dn-pe-wt-ft-se-ic))
240
+ );
241
+ text-align: var(
242
+ --_ctm-mob-dn-pe-wt-tt-an,
243
+ var(--_ctm-tab-dn-pe-wt-tt-an, var(--_ctm-dn-pe-wt-tt-an))
244
+ );
245
+ letter-spacing: var(
246
+ --_ctm-mob-dn-pe-wt-lr-sg,
247
+ var(--_ctm-tab-dn-pe-wt-lr-sg, var(--_ctm-dn-pe-wt-lr-sg))
248
+ );
249
+ line-height: var(
250
+ --_ctm-mob-dn-pe-wt-le-ht,
251
+ var(--_ctm-tab-dn-pe-wt-le-ht, var(--_ctm-dn-pe-wt-le-ht))
252
+ );
253
+ text-decoration: var(
254
+ --_ctm-mob-dn-pe-wt-ue,
255
+ var(--_ctm-tab-dn-pe-wt-ue, var(--_ctm-dn-pe-wt-ue))
256
+ );
257
+ word-wrap: prepareMediaVariable(--_ctm-dn-pe-wt-wd-wp);
258
+ word-break: prepareMediaVariable(--_ctm-dn-pe-wt-wd-bk);
259
+ text-transform: prepareMediaVariable(--_ctm-dn-pe-wt-tt-tm);
260
+
261
+ &#{$overflowSelector} {
262
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
263
+ }
264
+ }
243
265
  .profile__icon {
244
266
  // font-weight: 600;
245
267
  // font-size: 16px;
@@ -264,7 +286,7 @@
264
286
  );
265
287
  font-style: var(
266
288
  --_ctm-mob-dn-pe-wt-ft-se-ic-dc,
267
- var(--_ctm-tab-dn-pe-wt-ft-se-ic-dc, var(--_ctm-dn-pe-wt-ft-se-ic-dc))
289
+ var(--_ctm-tab-dn-pe-wt-ft-se-ic-dc, var(--_ctm-dn-pe-wt-ft-se-ic-dc, normal))
268
290
  );
269
291
  text-align: var(
270
292
  --_ctm-mob-dn-pe-wt-tt-an-dc,
@@ -280,8 +302,15 @@
280
302
  );
281
303
  text-decoration: var(
282
304
  --_ctm-mob-dn-pe-wt-ue-dc,
283
- var(--_ctm-tab-dn-pe-wt-ue-dc, var(--_ctm-dn-pe-wt-ue-dc))
305
+ var(--_ctm-tab-dn-pe-wt-ue-dc, var(--_ctm-dn-pe-wt-ue-dc, none))
284
306
  );
307
+ word-wrap: prepareMediaVariable(--_ctm-dn-pe-wt-wd-wp-dc);
308
+ word-break: prepareMediaVariable(--_ctm-dn-pe-wt-wd-bk-dc);
309
+ text-transform: prepareMediaVariable(--_ctm-dn-pe-wt-tt-tm-dc);
310
+
311
+ &#{$overflowSelector} {
312
+ @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
313
+ }
285
314
  }
286
315
  }
287
316
  }
@@ -380,6 +409,28 @@
380
409
  gap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-in-gp);
381
410
  // transition: background 0.2s;
382
411
  cursor: pointer;
412
+
413
+ > .add_order_item__link {
414
+ flex: 1;
415
+ min-width: 0;
416
+ max-width: 100%;
417
+ }
418
+
419
+ .add_order_item__label {
420
+ display: block;
421
+ flex: 1;
422
+ min-width: 0;
423
+ max-width: 100%;
424
+ white-space: normal;
425
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-wp);
426
+ overflow-wrap: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-wp);
427
+ word-break: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-wd-bk);
428
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-is-dt-se-tt-tm);
429
+ }
430
+
431
+ &[data-dropdown-items-default-overflow="true"] .add_order_item__label {
432
+ @include restrictToLinesShow(#{var(--_sf-dropdown-line-clamp, 1)});
433
+ }
383
434
  &[data-dropdown-items-default-border="true"] {
384
435
  border-color: var(
385
436
  --_sf-hr-br-cr,
@@ -503,6 +554,26 @@
503
554
  );
504
555
 
505
556
  &:hover {
557
+ .add_order_item__label {
558
+ white-space: normal;
559
+ word-wrap: prepareMediaVariable(
560
+ --_ctm-dn-dn-is-hr-se-wd-wp,
561
+ var(--_ctm-dn-dn-is-dt-se-wd-wp)
562
+ );
563
+ overflow-wrap: prepareMediaVariable(
564
+ --_ctm-dn-dn-is-hr-se-wd-wp,
565
+ var(--_ctm-dn-dn-is-dt-se-wd-wp)
566
+ );
567
+ word-break: prepareMediaVariable(
568
+ --_ctm-dn-dn-is-hr-se-wd-bk,
569
+ var(--_ctm-dn-dn-is-dt-se-wd-bk)
570
+ );
571
+ text-transform: prepareMediaVariable(
572
+ --_ctm-dn-dn-is-hr-se-tt-tm,
573
+ var(--_ctm-dn-dn-is-dt-se-tt-tm)
574
+ );
575
+ }
576
+
506
577
  &[data-dropdown-items-hover-border="true"] {
507
578
  border-color: var(
508
579
  --_sf-hr-br-cr,
package/dist/scroll.scss CHANGED
@@ -142,6 +142,20 @@ $max-items: 20;
142
142
  --_ctm-dn-i#{$i}-ue,
143
143
  #{prepareMediaVariable(--_ctm-dn-i1-ue)}
144
144
  );
145
+ // All three inherit, so setting them on the item is enough for the text node
146
+ // (and the `.scroll-item__text` span the clamp uses) to pick them up.
147
+ text-transform: prepareMediaVariable(
148
+ --_ctm-dn-i#{$i}-tt-tm,
149
+ #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
150
+ );
151
+ word-wrap: prepareMediaVariable(
152
+ --_ctm-dn-i#{$i}-wd-wr,
153
+ #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
154
+ );
155
+ word-break: prepareMediaVariable(
156
+ --_ctm-dn-i#{$i}-wd-bk,
157
+ #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
158
+ );
145
159
 
146
160
  .icon {
147
161
  svg {
@@ -298,6 +312,16 @@ $max-items: 20;
298
312
  animation-timing-function: linear;
299
313
  }
300
314
 
315
+ // Text Overflow. The item's text sits in its own span so the clamp gets a block
316
+ // box of its own — clamping `.scroll-item` itself would swap its `display: flex`
317
+ // for `-webkit-box` and break the icon/text row. `white-space` has to be reset
318
+ // because `.wrapper` sets `nowrap`, and a clamp on a non-wrapping node can only
319
+ // ever show one line.
320
+ .scroll-item__text.flex__overflow {
321
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
322
+ white-space: normal;
323
+ }
324
+
301
325
  .divider {
302
326
  background-color: var(
303
327
  --_ctm-mob-dn-dr-se-bd-cr,
package/dist/types/builder/tools/element-edit/addProductsTab.d.ts CHANGED
@@ -528,6 +528,11 @@ export declare const getDefaultData: () => {
528
528
  selectorKey: SelectorKeysEnum;
529
529
  };
530
530
  hoverState: {
531
+ buttonText: {
532
+ value: string;
533
+ property: string;
534
+ propertyType: CMSElementEditTypes;
535
+ };
531
536
  backgroundColor: {
532
537
  parentRef: string;
533
538
  value?: any;
@@ -723,11 +728,6 @@ export declare const getDefaultData: () => {
723
728
  parentRef: string;
724
729
  propertyType: CMSElementEditTypes;
725
730
  };
726
- buttonText: {
727
- value: string;
728
- property: string;
729
- propertyType: CMSElementEditTypes;
730
- };
731
731
  iconPadding: {
732
732
  value: number;
733
733
  property: string;
@@ -1490,6 +1490,11 @@ export declare const getDefaultData: () => {
1490
1490
  selectorKey: SelectorKeysEnum;
1491
1491
  };
1492
1492
  hoverState: {
1493
+ buttonText: {
1494
+ value: string;
1495
+ property: string;
1496
+ propertyType: CMSElementEditTypes;
1497
+ };
1493
1498
  backgroundColor: {
1494
1499
  parentRef: string;
1495
1500
  value?: any;
@@ -1685,11 +1690,6 @@ export declare const getDefaultData: () => {
1685
1690
  parentRef: string;
1686
1691
  propertyType: CMSElementEditTypes;
1687
1692
  };
1688
- buttonText: {
1689
- value: string;
1690
- property: string;
1691
- propertyType: CMSElementEditTypes;
1692
- };
1693
1693
  iconPadding: {
1694
1694
  value: number;
1695
1695
  property: string;
@@ -1994,6 +1994,11 @@ export declare const getDefaultData: () => {
1994
1994
  selectorKey: SelectorKeysEnum;
1995
1995
  };
1996
1996
  hoverState: {
1997
+ buttonText: {
1998
+ value: string;
1999
+ property: string;
2000
+ propertyType: CMSElementEditTypes;
2001
+ };
1997
2002
  backgroundColor: {
1998
2003
  parentRef: string;
1999
2004
  value?: any;
@@ -2189,11 +2194,6 @@ export declare const getDefaultData: () => {
2189
2194
  parentRef: string;
2190
2195
  propertyType: CMSElementEditTypes;
2191
2196
  };
2192
- buttonText: {
2193
- value: string;
2194
- property: string;
2195
- propertyType: CMSElementEditTypes;
2196
- };
2197
2197
  iconPadding: {
2198
2198
  value: number;
2199
2199
  property: string;
package/dist/types/builder/tools/element-edit/bundle.d.ts CHANGED
@@ -139,6 +139,16 @@ export declare const getDefaultData: () => {
139
139
  unit: number;
140
140
  propertyType: CMSElementEditTypes;
141
141
  };
142
+ tileColumns: {
143
+ value: number;
144
+ property: string;
145
+ propertyType: CMSElementEditTypes;
146
+ };
147
+ tileRows: {
148
+ value: number;
149
+ property: string;
150
+ propertyType: CMSElementEditTypes;
151
+ };
142
152
  tileRowGap: {
143
153
  value: number;
144
154
  property: string;
@@ -552,6 +562,11 @@ export declare const getDefaultData: () => {
552
562
  selectorKey: ButtonSelectorKeysEnum;
553
563
  };
554
564
  hoverState: {
565
+ buttonText: {
566
+ value: string;
567
+ property: string;
568
+ propertyType: CMSElementEditTypes;
569
+ };
555
570
  backgroundColor: {
556
571
  parentRef: string;
557
572
  value?: any;
@@ -747,11 +762,6 @@ export declare const getDefaultData: () => {
747
762
  parentRef: string;
748
763
  propertyType: CMSElementEditTypes;
749
764
  };
750
- buttonText: {
751
- value: string;
752
- property: string;
753
- propertyType: CMSElementEditTypes;
754
- };
755
765
  iconPadding: {
756
766
  value: number;
757
767
  property: string;
@@ -1017,6 +1027,11 @@ export declare const getDefaultData: () => {
1017
1027
  selectorKey: ButtonSelectorKeysEnum;
1018
1028
  };
1019
1029
  hoverState: {
1030
+ buttonText: {
1031
+ value: string;
1032
+ property: string;
1033
+ propertyType: CMSElementEditTypes;
1034
+ };
1020
1035
  backgroundColor: {
1021
1036
  parentRef: string;
1022
1037
  value?: any;
@@ -1212,11 +1227,6 @@ export declare const getDefaultData: () => {
1212
1227
  parentRef: string;
1213
1228
  propertyType: CMSElementEditTypes;
1214
1229
  };
1215
- buttonText: {
1216
- value: string;
1217
- property: string;
1218
- propertyType: CMSElementEditTypes;
1219
- };
1220
1230
  iconPadding: {
1221
1231
  value: number;
1222
1232
  property: string;
package/dist/types/builder/tools/element-edit/bundleDetails.d.ts CHANGED
@@ -585,6 +585,11 @@ export declare const getDefaultData: () => {
585
585
  selectButtonDesign: {
586
586
  selectorKey: SelectorKeysEnum;
587
587
  selectedState: {
588
+ buttonText: {
589
+ value: string;
590
+ property: string;
591
+ propertyType: CMSElementEditTypes;
592
+ };
588
593
  backgroundColor: {
589
594
  parentRef: string;
590
595
  value?: any;
@@ -773,11 +778,6 @@ export declare const getDefaultData: () => {
773
778
  parentRef: string;
774
779
  propertyType: CMSElementEditTypes;
775
780
  };
776
- buttonText: {
777
- value: string;
778
- property: string;
779
- propertyType: CMSElementEditTypes;
780
- };
781
781
  iconPadding: {
782
782
  value: number;
783
783
  property: string;
@@ -817,6 +817,11 @@ export declare const getDefaultData: () => {
817
817
  selectorKey: SelectorKeysEnum;
818
818
  };
819
819
  hoverState: {
820
+ buttonText: {
821
+ value: string;
822
+ property: string;
823
+ propertyType: CMSElementEditTypes;
824
+ };
820
825
  backgroundColor: {
821
826
  parentRef: string;
822
827
  value?: any;
@@ -1012,11 +1017,6 @@ export declare const getDefaultData: () => {
1012
1017
  parentRef: string;
1013
1018
  propertyType: CMSElementEditTypes;
1014
1019
  };
1015
- buttonText: {
1016
- value: string;
1017
- property: string;
1018
- propertyType: CMSElementEditTypes;
1019
- };
1020
1020
  iconPadding: {
1021
1021
  value: number;
1022
1022
  property: string;
@@ -1291,6 +1291,11 @@ export declare const getDefaultData: () => {
1291
1291
  addToCartButtonDesign: {
1292
1292
  selectorKey: SelectorKeysEnum;
1293
1293
  hoverState: {
1294
+ buttonText: {
1295
+ value: string;
1296
+ property: string;
1297
+ propertyType: CMSElementEditTypes;
1298
+ };
1294
1299
  backgroundColor: {
1295
1300
  parentRef: string;
1296
1301
  value?: any;
@@ -1486,11 +1491,6 @@ export declare const getDefaultData: () => {
1486
1491
  parentRef: string;
1487
1492
  propertyType: CMSElementEditTypes;
1488
1493
  };
1489
- buttonText: {
1490
- value: string;
1491
- property: string;
1492
- propertyType: CMSElementEditTypes;
1493
- };
1494
1494
  iconPadding: {
1495
1495
  value: number;
1496
1496
  property: string;