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

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 (111) hide show
  1. package/dist/add-order.scss +50 -4
  2. package/dist/add-products-tab-details.scss +250 -0
  3. package/dist/add-products-tab-uom-details.scss +105 -0
  4. package/dist/add-products-tab.scss +226 -0
  5. package/dist/allocation-header-quota-details.scss +84 -0
  6. package/dist/allocationDetails.scss +104 -0
  7. package/dist/allocations-quota-details.scss +66 -0
  8. package/dist/allocations.scss +110 -0
  9. package/dist/amount-estimator.scss +104 -0
  10. package/dist/badge.scss +12 -0
  11. package/dist/brand-basic-elements.scss +17 -0
  12. package/dist/breadcrumbs.scss +16 -0
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-variant-picker.scss +246 -0
  15. package/dist/bundle.scss +239 -28
  16. package/dist/bundleDetails.scss +295 -0
  17. package/dist/button copy.scss +2 -2
  18. package/dist/button.scss +17 -4
  19. package/dist/buy-for-tab.scss +54 -0
  20. package/dist/buyForHeaders.scss +629 -0
  21. package/dist/cart-details.scss +317 -0
  22. package/dist/cart-summary.scss +189 -0
  23. package/dist/cart.scss +16 -0
  24. package/dist/cartAttributes.scss +118 -0
  25. package/dist/cartDropdownOverlay.scss +21 -0
  26. package/dist/category-groups-element.scss +15 -0
  27. package/dist/category-groups-product-image.scss +84 -0
  28. package/dist/category-groups-product-options.scss +87 -0
  29. package/dist/category-groups-product-price.scss +700 -0
  30. package/dist/category-groups-quota-details.scss +84 -0
  31. package/dist/checkout.scss +918 -0
  32. package/dist/countdown.scss +80 -0
  33. package/dist/coupon.scss +138 -0
  34. package/dist/embroider-template-1-v2.scss +34 -0
  35. package/dist/embroider-template-1.scss +501 -482
  36. package/dist/embroidery.scss +7 -0
  37. package/dist/faq.scss +28 -0
  38. package/dist/filter-results.scss +361 -323
  39. package/dist/filters.scss +288 -0
  40. package/dist/gallery-slider-temp.scss +24 -0
  41. package/dist/global-styles.scss +23 -0
  42. package/dist/hotspot.scss +23 -4
  43. package/dist/icon-list.scss +3 -0
  44. package/dist/item-stock.scss +6 -0
  45. package/dist/kitDetails.scss +358 -0
  46. package/dist/kits.scss +4 -0
  47. package/dist/language-selector.scss +9 -1
  48. package/dist/last-x-orders.scss +24 -0
  49. package/dist/login.scss +108 -0
  50. package/dist/map.scss +46 -0
  51. package/dist/mega-menu.scss +69 -8
  52. package/dist/menu-v2.scss +123 -5
  53. package/dist/menu.scss +12 -0
  54. package/dist/my-templates.scss +3 -0
  55. package/dist/option-bar.scss +38 -0
  56. package/dist/order-status.scss +60 -5
  57. package/dist/past-orders.scss +50 -0
  58. package/dist/payment-methods.scss +307 -289
  59. package/dist/pickup-locations.scss +184 -0
  60. package/dist/product-actions.scss +195 -0
  61. package/dist/product-basic-elements.scss +8 -0
  62. package/dist/product-customizations.scss +155 -149
  63. package/dist/product-highlights.scss +12 -0
  64. package/dist/product-image-allocation.scss +38 -0
  65. package/dist/product-image-bundles.scss +47 -0
  66. package/dist/product-image.scss +48 -0
  67. package/dist/product-inventory.scss +240 -0
  68. package/dist/product-labels.scss +12 -0
  69. package/dist/product-options.scss +58 -0
  70. package/dist/product-price.scss +416 -1
  71. package/dist/product-promotions.scss +456 -0
  72. package/dist/product-sizechart.scss +91 -0
  73. package/dist/profile.scss +165 -42
  74. package/dist/quantity-selector.scss +62 -0
  75. package/dist/quick-inventory-check.scss +24 -0
  76. package/dist/quick-links.scss +16 -0
  77. package/dist/quick-order-pad.scss +71 -0
  78. package/dist/quotes.scss +766 -737
  79. package/dist/repeater.scss +19 -0
  80. package/dist/rfqs.scss +29 -0
  81. package/dist/scroll.scss +28 -0
  82. package/dist/search-results-heading.scss +36 -0
  83. package/dist/search.scss +43 -0
  84. package/dist/shipping-payments.scss +48 -0
  85. package/dist/simple-list.scss +12 -0
  86. package/dist/social.scss +12 -0
  87. package/dist/spotlight.scss +48 -0
  88. package/dist/stockStatus.scss +3 -0
  89. package/dist/store-locations.scss +188 -0
  90. package/dist/tab-v2.scss +24 -0
  91. package/dist/table-common.scss +78 -0
  92. package/dist/table.scss +81 -0
  93. package/dist/tabs.scss +440 -395
  94. package/dist/theme-classes.scss +49 -0
  95. package/dist/toaster.scss +392 -350
  96. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +15 -15
  97. package/dist/types/builder/tools/element-edit/bundle.d.ts +20 -10
  98. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +15 -15
  99. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +225 -0
  100. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +35 -35
  101. package/dist/types/builder/tools/element-edit/coupon.d.ts +10 -10
  102. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +233 -31
  103. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +33 -0
  104. package/dist/types/builder/tools/element-edit/profile.d.ts +7 -0
  105. package/dist/types/builder/tools/element-edit/scroll.d.ts +18 -0
  106. package/dist/types/builder/tools/element-edit/video.d.ts +15 -0
  107. package/dist/uom-selector.scss +112 -0
  108. package/dist/user-elements.scss +168 -0
  109. package/dist/variant-picker.scss +217 -0
  110. package/dist/volume-pricing.scss +192 -0
  111. package/package.json +131 -131
package/dist/filters.scss CHANGED
@@ -142,6 +142,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
142
142
  var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
143
143
  )
144
144
  );
145
+ text-transform: var(
146
+ --_sf-hr-tt-tm,
147
+ var(
148
+ --_ctm-mob-dn-fs-wt-tt-tm,
149
+ var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))
150
+ )
151
+ );
152
+ word-wrap: var(
153
+ --_sf-hr-wd-wp,
154
+ var(
155
+ --_ctm-mob-dn-fs-wt-wd-wp,
156
+ var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))
157
+ )
158
+ );
159
+ word-break: var(
160
+ --_sf-hr-wd-bk,
161
+ var(
162
+ --_ctm-mob-dn-fs-wt-wd-bk,
163
+ var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))
164
+ )
165
+ );
145
166
  font-size: var(
146
167
  --_ctm-mob-dn-fs-wt-ft-se,
147
168
  var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
@@ -223,6 +244,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
223
244
  var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
224
245
  )
225
246
  );
247
+ text-transform: var(
248
+ --_sf-hr-tt-tm,
249
+ var(
250
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
251
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))
252
+ )
253
+ );
254
+ word-wrap: var(
255
+ --_sf-hr-wd-wp,
256
+ var(
257
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
258
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))
259
+ )
260
+ );
261
+ word-break: var(
262
+ --_sf-hr-wd-bk,
263
+ var(
264
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
265
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))
266
+ )
267
+ );
226
268
  font-size: var(
227
269
  --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
228
270
  var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
@@ -265,6 +307,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
265
307
  var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
266
308
  )
267
309
  );
310
+ text-transform: var(
311
+ --_sf-hr-tt-tm,
312
+ var(
313
+ --_ctm-mob-dn-fs-wt-tt-tm-dc,
314
+ var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))
315
+ )
316
+ );
317
+ word-wrap: var(
318
+ --_sf-hr-wd-wp,
319
+ var(
320
+ --_ctm-mob-dn-fs-wt-wd-wp-dc,
321
+ var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))
322
+ )
323
+ );
324
+ word-break: var(
325
+ --_sf-hr-wd-bk,
326
+ var(
327
+ --_ctm-mob-dn-fs-wt-wd-bk-dc,
328
+ var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))
329
+ )
330
+ );
268
331
  font-size: var(
269
332
  --_ctm-mob-dn-fs-wt-ft-se-dc,
270
333
  var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
@@ -391,6 +454,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
391
454
  var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
392
455
  )
393
456
  );
457
+ text-transform: var(
458
+ --_sf-hr-tt-tm,
459
+ var(
460
+ --_ctm-mob-dn-sd-im-dt-se-tt-tm,
461
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))
462
+ )
463
+ );
464
+ word-wrap: var(
465
+ --_sf-hr-wd-wp,
466
+ var(
467
+ --_ctm-mob-dn-sd-im-dt-se-wd-wp,
468
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))
469
+ )
470
+ );
471
+ word-break: var(
472
+ --_sf-hr-wd-bk,
473
+ var(
474
+ --_ctm-mob-dn-sd-im-dt-se-wd-bk,
475
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))
476
+ )
477
+ );
478
+ &.flex__overflow {
479
+ white-space: normal;
480
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
481
+ }
394
482
  font-size: var(
395
483
  --_sf-hr-fs,
396
484
  var(
@@ -516,6 +604,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
516
604
  --_ctm-mob-dn-sd-im-hr-se-ft-fy,
517
605
  var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
518
606
  );
607
+ --_sf-hr-tt-tm: var(
608
+ --_ctm-mob-dn-sd-im-hr-se-tt-tm,
609
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm))
610
+ );
611
+ --_sf-hr-wd-wp: var(
612
+ --_ctm-mob-dn-sd-im-hr-se-wd-wp,
613
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp))
614
+ );
615
+ --_sf-hr-wd-bk: var(
616
+ --_ctm-mob-dn-sd-im-hr-se-wd-bk,
617
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk))
618
+ );
519
619
  --_sf-hr-fs: var(
520
620
  --_ctm-mob-dn-sd-im-hr-se-ft-se,
521
621
  var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
@@ -614,6 +714,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
614
714
  var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))
615
715
  )
616
716
  );
717
+ text-transform: var(
718
+ --_sf-hr-tt-tm,
719
+ var(
720
+ --_ctm-mob-dn-on-ls-tt-tm,
721
+ var(--_ctm-tab-dn-on-ls-tt-tm, var(--_ctm-dn-on-ls-tt-tm))
722
+ )
723
+ );
724
+ word-wrap: var(
725
+ --_sf-hr-wd-wp,
726
+ var(
727
+ --_ctm-mob-dn-on-ls-wd-wp,
728
+ var(--_ctm-tab-dn-on-ls-wd-wp, var(--_ctm-dn-on-ls-wd-wp))
729
+ )
730
+ );
731
+ word-break: var(
732
+ --_sf-hr-wd-bk,
733
+ var(
734
+ --_ctm-mob-dn-on-ls-wd-bk,
735
+ var(--_ctm-tab-dn-on-ls-wd-bk, var(--_ctm-dn-on-ls-wd-bk))
736
+ )
737
+ );
738
+ &.flex__overflow {
739
+ white-space: normal;
740
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
741
+ }
617
742
  font-size: var(
618
743
  --_ctm-mob-dn-on-ls-ft-se,
619
744
  var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se))
@@ -833,6 +958,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
833
958
  var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))
834
959
  )
835
960
  );
961
+ text-transform: var(
962
+ --_sf-hr-tt-tm,
963
+ var(
964
+ --_ctm-mob-dn-me-bn-dt-se-tt-tm,
965
+ var(--_ctm-tab-dn-me-bn-dt-se-tt-tm, var(--_ctm-dn-me-bn-dt-se-tt-tm))
966
+ )
967
+ );
968
+ word-wrap: var(
969
+ --_sf-hr-wd-wp,
970
+ var(
971
+ --_ctm-mob-dn-me-bn-dt-se-wd-wp,
972
+ var(--_ctm-tab-dn-me-bn-dt-se-wd-wp, var(--_ctm-dn-me-bn-dt-se-wd-wp))
973
+ )
974
+ );
975
+ word-break: var(
976
+ --_sf-hr-wd-bk,
977
+ var(
978
+ --_ctm-mob-dn-me-bn-dt-se-wd-bk,
979
+ var(--_ctm-tab-dn-me-bn-dt-se-wd-bk, var(--_ctm-dn-me-bn-dt-se-wd-bk))
980
+ )
981
+ );
836
982
  font-size: var(
837
983
  --_ctm-mob-dn-me-bn-dt-se-ft-se,
838
984
  var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se))
@@ -949,6 +1095,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
949
1095
  var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
950
1096
  )
951
1097
  );
1098
+ text-transform: var(
1099
+ --_sf-hr-tt-tm,
1100
+ var(
1101
+ --_ctm-mob-dn-fs-wt-tt-tm,
1102
+ var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))
1103
+ )
1104
+ );
1105
+ word-wrap: var(
1106
+ --_sf-hr-wd-wp,
1107
+ var(
1108
+ --_ctm-mob-dn-fs-wt-wd-wp,
1109
+ var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))
1110
+ )
1111
+ );
1112
+ word-break: var(
1113
+ --_sf-hr-wd-bk,
1114
+ var(
1115
+ --_ctm-mob-dn-fs-wt-wd-bk,
1116
+ var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))
1117
+ )
1118
+ );
952
1119
  font-size: var(
953
1120
  --_ctm-mob-dn-fs-wt-ft-se,
954
1121
  var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
@@ -1027,6 +1194,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1027
1194
  var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
1028
1195
  )
1029
1196
  );
1197
+ text-transform: var(
1198
+ --_sf-hr-tt-tm,
1199
+ var(
1200
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
1201
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))
1202
+ )
1203
+ );
1204
+ word-wrap: var(
1205
+ --_sf-hr-wd-wp,
1206
+ var(
1207
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
1208
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))
1209
+ )
1210
+ );
1211
+ word-break: var(
1212
+ --_sf-hr-wd-bk,
1213
+ var(
1214
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
1215
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))
1216
+ )
1217
+ );
1030
1218
  font-size: var(
1031
1219
  --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
1032
1220
  var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
@@ -1072,6 +1260,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1072
1260
  var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
1073
1261
  )
1074
1262
  );
1263
+ text-transform: var(
1264
+ --_sf-hr-tt-tm,
1265
+ var(
1266
+ --_ctm-mob-dn-fs-wt-tt-tm-dc,
1267
+ var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))
1268
+ )
1269
+ );
1270
+ word-wrap: var(
1271
+ --_sf-hr-wd-wp,
1272
+ var(
1273
+ --_ctm-mob-dn-fs-wt-wd-wp-dc,
1274
+ var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))
1275
+ )
1276
+ );
1277
+ word-break: var(
1278
+ --_sf-hr-wd-bk,
1279
+ var(
1280
+ --_ctm-mob-dn-fs-wt-wd-bk-dc,
1281
+ var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))
1282
+ )
1283
+ );
1075
1284
  font-size: var(
1076
1285
  --_ctm-mob-dn-fs-wt-ft-se-dc,
1077
1286
  var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
@@ -1161,6 +1370,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1161
1370
  var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
1162
1371
  )
1163
1372
  );
1373
+ text-transform: var(
1374
+ --_sf-hr-tt-tm,
1375
+ var(
1376
+ --_ctm-mob-dn-sd-im-dt-se-tt-tm,
1377
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))
1378
+ )
1379
+ );
1380
+ word-wrap: var(
1381
+ --_sf-hr-wd-wp,
1382
+ var(
1383
+ --_ctm-mob-dn-sd-im-dt-se-wd-wp,
1384
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))
1385
+ )
1386
+ );
1387
+ word-break: var(
1388
+ --_sf-hr-wd-bk,
1389
+ var(
1390
+ --_ctm-mob-dn-sd-im-dt-se-wd-bk,
1391
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))
1392
+ )
1393
+ );
1394
+ &.flex__overflow {
1395
+ white-space: normal;
1396
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1397
+ }
1164
1398
  font-size: var(
1165
1399
  --_sf-hr-fs,
1166
1400
  var(
@@ -1263,6 +1497,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1263
1497
  --_ctm-mob-dn-sd-im-hr-se-ft-fy,
1264
1498
  var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
1265
1499
  );
1500
+ --_sf-hr-tt-tm: var(
1501
+ --_ctm-mob-dn-sd-im-hr-se-tt-tm,
1502
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm))
1503
+ );
1504
+ --_sf-hr-wd-wp: var(
1505
+ --_ctm-mob-dn-sd-im-hr-se-wd-wp,
1506
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp))
1507
+ );
1508
+ --_sf-hr-wd-bk: var(
1509
+ --_ctm-mob-dn-sd-im-hr-se-wd-bk,
1510
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk))
1511
+ );
1266
1512
  --_sf-hr-fs: var(
1267
1513
  --_ctm-mob-dn-sd-im-hr-se-ft-se,
1268
1514
  var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
@@ -1372,6 +1618,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1372
1618
  var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
1373
1619
  )
1374
1620
  );
1621
+ text-transform: var(
1622
+ --_sf-hr-tt-tm,
1623
+ var(
1624
+ --_ctm-mob-dn-on-ls-tt-tm-dc,
1625
+ var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))
1626
+ )
1627
+ );
1628
+ word-wrap: var(
1629
+ --_sf-hr-wd-wp,
1630
+ var(
1631
+ --_ctm-mob-dn-on-ls-wd-wp-dc,
1632
+ var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))
1633
+ )
1634
+ );
1635
+ word-break: var(
1636
+ --_sf-hr-wd-bk,
1637
+ var(
1638
+ --_ctm-mob-dn-on-ls-wd-bk-dc,
1639
+ var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))
1640
+ )
1641
+ );
1375
1642
  font-size: var(
1376
1643
  --_ctm-mob-dn-on-ls-ft-se-dc,
1377
1644
  var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
@@ -2095,6 +2362,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2095
2362
  var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
2096
2363
  )
2097
2364
  );
2365
+ text-transform: var(
2366
+ --_sf-hr-tt-tm,
2367
+ var(
2368
+ --_ctm-mob-dn-on-ls-tt-tm-dc,
2369
+ var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))
2370
+ )
2371
+ );
2372
+ word-wrap: var(
2373
+ --_sf-hr-wd-wp,
2374
+ var(
2375
+ --_ctm-mob-dn-on-ls-wd-wp-dc,
2376
+ var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))
2377
+ )
2378
+ );
2379
+ word-break: var(
2380
+ --_sf-hr-wd-bk,
2381
+ var(
2382
+ --_ctm-mob-dn-on-ls-wd-bk-dc,
2383
+ var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))
2384
+ )
2385
+ );
2098
2386
  font-size: var(
2099
2387
  --_ctm-mob-dn-on-ls-ft-se-dc,
2100
2388
  var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
package/dist/gallery-slider-temp.scss CHANGED
@@ -1431,6 +1431,18 @@ $overflowSelector: ".flex__overflow";
1431
1431
  --_ctm-mob-dn-im-se-ft-fy,
1432
1432
  var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1433
1433
  );
1434
+ text-transform: var(
1435
+ --_ctm-mob-dn-im-se-tt-tm,
1436
+ var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
1437
+ );
1438
+ word-wrap: var(
1439
+ --_ctm-mob-dn-im-se-wd-wp,
1440
+ var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
1441
+ );
1442
+ word-break: var(
1443
+ --_ctm-mob-dn-im-se-wd-bk,
1444
+ var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
1445
+ );
1434
1446
 
1435
1447
  font-size: var(
1436
1448
  --_ctm-mob-dn-im-se-ft-se,
@@ -1478,6 +1490,18 @@ $overflowSelector: ".flex__overflow";
1478
1490
  --_ctm-mob-dn-im-se-ft-fy-dc,
1479
1491
  var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1480
1492
  );
1493
+ text-transform: var(
1494
+ --_ctm-mob-dn-im-se-tt-tm-dc,
1495
+ var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
1496
+ );
1497
+ word-wrap: var(
1498
+ --_ctm-mob-dn-im-se-wd-wp-dc,
1499
+ var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
1500
+ );
1501
+ word-break: var(
1502
+ --_ctm-mob-dn-im-se-wd-bk-dc,
1503
+ var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
1504
+ );
1481
1505
 
1482
1506
  font-size: var(
1483
1507
  --_ctm-mob-dn-im-se-ft-se-dc,
package/dist/global-styles.scss CHANGED
@@ -173,3 +173,26 @@
173
173
  @extend .skeleton;
174
174
  @extend .skeleton--shimmer;
175
175
  }
176
+
177
+ // Text Overflow fallback.
178
+ //
179
+ // Text Overflow is a `controls` property, not a CSS one, so it cannot travel to the
180
+ // stylesheet as a variable — the renderer opts a text node in with `.flex__overflow`
181
+ // and carries the line count in `--_sf-line-clamp`.
182
+ //
183
+ // This is the clamp declared once, for every text node whose own block does not set a
184
+ // competing `display`. Blocks that do (a flex label, say) carry their own scoped
185
+ // `&.flex__overflow` rule, since this one is a single class and would lose to them.
186
+ //
187
+ // The class is only ever emitted when the toggle is on, so this cannot clamp a node
188
+ // that was not asked to be clamped.
189
+ //
190
+ // Mirrored in storefront-cms-library/src/components/css/widgets/global-styles.scss —
191
+ // change one, copy it across.
192
+ .flex__overflow {
193
+ // A clamp can only reach its second line if the text is allowed to wrap, so this
194
+ // undoes any `white-space: nowrap` the node carries — the same thing the hand-written
195
+ // clamps in allocations-quota-details.scss and friends do.
196
+ white-space: normal;
197
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
198
+ }
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);
@@ -447,6 +454,16 @@ $data: (
447
454
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
448
455
 
449
456
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
457
+ text-transform: var(
458
+ --_sf-hr-tt-tm,
459
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-tm)
460
+ );
461
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-wp));
462
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-bk));
463
+ &.flex__overflow {
464
+ white-space: normal;
465
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
466
+ }
450
467
 
451
468
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se));
452
469
 
@@ -583,7 +600,7 @@ $data: (
583
600
  }
584
601
 
585
602
  &[data-hotspot-image-style-show-border="true"] {
586
- .imageHotspot-element {
603
+ & > .wrapper {
587
604
  border-style: prepareMediaVariable(--_ctm-dn-ie-se-br-se);
588
605
  border-color: prepareMediaVariable(--_ctm-dn-ie-se-br-cr);
589
606
  border-width: prepareMediaVariable(--_ctm-dn-ie-se-br-wh);
@@ -656,11 +673,13 @@ $data: (
656
673
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
657
674
  row-gap: prepareMediaVariable(--_sf-gp);
658
675
  width: 100%;
659
- height: prepareMediaVariable(--_ctm-lt-ht, inherit);
676
+ // Fill the wrapper's content box (element height minus wrapper padding)
677
+ // rather than the full element height, so the image sits inside the frame.
678
+ height: 100%;
660
679
  scale: prepareMediaVariable(--_ctm-dn-ie-se-zm-ie);
661
680
  transition: transform 0.3s ease-in-out;
662
681
  rotate: calc(#{prepareMediaVariable(--_ctm-dn-ie-se-re)} * 1deg);
663
- border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
682
+ // border-radius moved to & > .wrapper (the frame).
664
683
 
665
684
  &:hover {
666
685
  &[data-on-hover="Zoom Out"] {
package/dist/icon-list.scss CHANGED
@@ -279,6 +279,9 @@ $pos2: (
279
279
  &,
280
280
  * {
281
281
  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
282
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-tt-tm);
283
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-wd-wp);
284
+ word-break: prepareMediaVariable(--_ctm-dn-dn-wd-bk);
282
285
  font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
283
286
  color: prepareMediaVariable(--_ctm-dn-dn-cr);
284
287
  font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
package/dist/item-stock.scss CHANGED
@@ -36,6 +36,9 @@
36
36
  position: relative;
37
37
  .item__stock__text {
38
38
  font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
39
+ text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
40
+ word-wrap: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-wp);
41
+ word-break: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-bk);
39
42
  font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
40
43
  color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
41
44
  font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
@@ -63,6 +66,9 @@
63
66
 
64
67
  .stock_messages {
65
68
  font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
69
+ text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
70
+ word-wrap: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-wp);
71
+ word-break: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-bk);
66
72
  font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
67
73
  color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
68
74
  font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);