@cloud-ru/ds-list 2.0.1-preview-39fbfe56.0 → 2.0.1-preview-04507fc5.0

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 (25) hide show
  1. package/dist/cjs/components/Items/BaseItem/styles.module.css +12 -0
  2. package/dist/cjs/components/Items/styles.module.css +12 -0
  3. package/dist/cjs/components/Lists/ListPrivate/styles.module.css +1 -1
  4. package/dist/cjs/helperComponents/Separator/Separator.js +1 -2
  5. package/dist/cjs/helperComponents/Separator/styles.module.css +12 -3
  6. package/dist/cjs/style.css +37 -4
  7. package/dist/esm/components/Items/BaseItem/styles.module.css +12 -0
  8. package/dist/esm/components/Items/styles.module.css +12 -0
  9. package/dist/esm/components/Lists/ListPrivate/styles.module.css +1 -1
  10. package/dist/esm/helperComponents/Separator/Separator.js +1 -2
  11. package/dist/esm/helperComponents/Separator/styles.module.css +12 -3
  12. package/dist/esm/style.css +37 -4
  13. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  14. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  15. package/package.json +13 -13
  16. package/src/components/Items/BaseItem/styles.module.scss +7 -0
  17. package/src/components/Items/styles.module.scss +8 -0
  18. package/src/components/Lists/ListPrivate/styles.module.scss +1 -1
  19. package/src/helperComponents/Separator/Separator.tsx +1 -2
  20. package/src/helperComponents/Separator/styles.module.scss +25 -1
  21. package/dist/cjs/helperComponents/Separator/constants.d.ts +0 -3
  22. package/dist/cjs/helperComponents/Separator/constants.js +0 -10
  23. package/dist/esm/helperComponents/Separator/constants.d.ts +0 -3
  24. package/dist/esm/helperComponents/Separator/constants.js +0 -7
  25. package/src/helperComponents/Separator/constants.ts +0 -11
package/dist/cjs/components/Items/BaseItem/styles.module.css CHANGED
@@ -117,6 +117,10 @@
117
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
118
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
119
119
  }
120
+ .droplistItem[data-size=s] .afterContent > svg{
121
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
123
+ }
120
124
  .droplistItem[data-size=s] .groupIndicator{
121
125
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
126
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +164,10 @@
160
164
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
161
165
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
162
166
  }
167
+ .droplistItem[data-size=m] .afterContent > svg{
168
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
169
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
170
+ }
163
171
  .droplistItem[data-size=m] .groupIndicator{
164
172
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
173
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +211,10 @@
203
211
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
204
212
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
205
213
  }
214
+ .droplistItem[data-size=l] .afterContent > svg{
215
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
216
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
217
+ }
206
218
  .droplistItem[data-size=l] .groupIndicator{
207
219
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
220
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/cjs/components/Items/styles.module.css CHANGED
@@ -145,6 +145,10 @@
145
145
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
146
146
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
147
147
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
148
+ gap:0;
149
+ }
150
+ .listItem[data-size=s] .groupIndicator{
151
+ margin-left:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
148
152
  }
149
153
  .listItem[data-size=m]{
150
154
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -153,6 +157,10 @@
153
157
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
154
158
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
155
159
  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
160
+ gap:0;
161
+ }
162
+ .listItem[data-size=m] .groupIndicator{
163
+ margin-left:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
156
164
  }
157
165
  .listItem[data-size=l]{
158
166
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -161,6 +169,10 @@
161
169
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
162
170
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
163
171
  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
172
+ gap:0;
173
+ }
174
+ .listItem[data-size=l] .groupIndicator{
175
+ margin-left:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
164
176
  }
165
177
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
166
178
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
package/dist/cjs/components/Lists/ListPrivate/styles.module.css CHANGED
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .header[data-divider]{
60
60
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
61
- padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
61
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
62
62
  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
63
63
  }
64
64
 
package/dist/cjs/helperComponents/Separator/Separator.js CHANGED
@@ -13,7 +13,6 @@ const contexts_1 = require("../../components/Lists/contexts");
13
13
  const constants_1 = require("../../constants");
14
14
  const locale_1 = require("../../locale");
15
15
  const utils_1 = require("../../utils");
16
- const constants_2 = require("./constants");
17
16
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
18
17
  function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
19
18
  const { size = 'm' } = (0, contexts_1.useNewListContext)();
@@ -24,7 +23,7 @@ function Separator({ label, beforeContent, truncate, divider, groupVariant = 'su
24
23
  return null;
25
24
  }
26
25
  const { onClick, checked, itemRef, label } = selectButton;
27
- return ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: constants_2.SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, "data-test-id": constants_1.TEST_IDS.bulkSelectButton, onClick: (e) => {
26
+ return ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: size, tabIndex: 0, "data-test-id": constants_1.TEST_IDS.bulkSelectButton, onClick: (e) => {
28
27
  onClick?.(e);
29
28
  e.preventDefault();
30
29
  e.stopPropagation();
package/dist/cjs/helperComponents/Separator/styles.module.css CHANGED
@@ -25,12 +25,15 @@
25
25
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
26
26
  }
27
27
  .separatorWithLabel[data-size=s]{
28
- gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
29
28
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
30
29
  }
31
30
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
32
31
  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * (var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
33
32
  }
33
+ .separatorWithLabel[data-size=s] .labelEnd{
34
+ padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
35
+ padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
36
+ }
34
37
  .separatorWithLabel[data-size=s] .beforeContent{
35
38
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
36
39
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -57,12 +60,15 @@
57
60
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
58
61
  }
59
62
  .separatorWithLabel[data-size=m]{
60
- gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
61
63
  padding:var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
62
64
  }
63
65
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
64
66
  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
65
67
  }
68
+ .separatorWithLabel[data-size=m] .labelEnd{
69
+ padding-top:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
70
+ padding-bottom:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
71
+ }
66
72
  .separatorWithLabel[data-size=m] .beforeContent{
67
73
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
68
74
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -89,12 +95,15 @@
89
95
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
90
96
  }
91
97
  .separatorWithLabel[data-size=l]{
92
- gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
93
98
  padding:var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
94
99
  }
95
100
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
96
101
  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
97
102
  }
103
+ .separatorWithLabel[data-size=l] .labelEnd{
104
+ padding-top:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
105
+ padding-bottom:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
106
+ }
98
107
  .separatorWithLabel[data-size=l] .beforeContent{
99
108
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
100
109
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/cjs/style.css CHANGED
@@ -117,6 +117,10 @@
117
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
118
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
119
119
  }
120
+ .droplistItem[data-size=s] .afterContent > svg{
121
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
123
+ }
120
124
  .droplistItem[data-size=s] .groupIndicator{
121
125
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
126
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +164,10 @@
160
164
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
161
165
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
162
166
  }
167
+ .droplistItem[data-size=m] .afterContent > svg{
168
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
169
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
170
+ }
163
171
  .droplistItem[data-size=m] .groupIndicator{
164
172
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
173
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +211,10 @@
203
211
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
204
212
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
205
213
  }
214
+ .droplistItem[data-size=l] .afterContent > svg{
215
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
216
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
217
+ }
206
218
  .droplistItem[data-size=l] .groupIndicator{
207
219
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
220
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -504,6 +516,10 @@
504
516
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
505
517
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
506
518
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
519
+ gap:0;
520
+ }
521
+ .listItem[data-size=s] .groupIndicator{
522
+ margin-left:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
507
523
  }
508
524
  .listItem[data-size=m]{
509
525
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -512,6 +528,10 @@
512
528
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
513
529
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
514
530
  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
531
+ gap:0;
532
+ }
533
+ .listItem[data-size=m] .groupIndicator{
534
+ margin-left:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
515
535
  }
516
536
  .listItem[data-size=l]{
517
537
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -520,6 +540,10 @@
520
540
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
521
541
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
522
542
  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
543
+ gap:0;
544
+ }
545
+ .listItem[data-size=l] .groupIndicator{
546
+ margin-left:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
523
547
  }
524
548
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
525
549
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -585,7 +609,7 @@
585
609
  }
586
610
  .header[data-divider]{
587
611
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
588
- padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
612
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
589
613
  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
590
614
  }
591
615
 
@@ -896,12 +920,15 @@
896
920
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
897
921
  }
898
922
  .separatorWithLabel[data-size=s]{
899
- gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
900
923
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
901
924
  }
902
925
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
903
926
  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * (var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
904
927
  }
928
+ .separatorWithLabel[data-size=s] .labelEnd{
929
+ padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
930
+ padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
931
+ }
905
932
  .separatorWithLabel[data-size=s] .beforeContent{
906
933
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
907
934
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -928,12 +955,15 @@
928
955
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
929
956
  }
930
957
  .separatorWithLabel[data-size=m]{
931
- gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
932
958
  padding:var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
933
959
  }
934
960
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
935
961
  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
936
962
  }
963
+ .separatorWithLabel[data-size=m] .labelEnd{
964
+ padding-top:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
965
+ padding-bottom:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
966
+ }
937
967
  .separatorWithLabel[data-size=m] .beforeContent{
938
968
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
939
969
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -960,12 +990,15 @@
960
990
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
961
991
  }
962
992
  .separatorWithLabel[data-size=l]{
963
- gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
964
993
  padding:var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
965
994
  }
966
995
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
967
996
  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
968
997
  }
998
+ .separatorWithLabel[data-size=l] .labelEnd{
999
+ padding-top:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
1000
+ padding-bottom:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
1001
+ }
969
1002
  .separatorWithLabel[data-size=l] .beforeContent{
970
1003
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
971
1004
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -117,6 +117,10 @@
117
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
118
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
119
119
  }
120
+ .droplistItem[data-size=s] .afterContent > svg{
121
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
123
+ }
120
124
  .droplistItem[data-size=s] .groupIndicator{
121
125
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
126
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +164,10 @@
160
164
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
161
165
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
162
166
  }
167
+ .droplistItem[data-size=m] .afterContent > svg{
168
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
169
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
170
+ }
163
171
  .droplistItem[data-size=m] .groupIndicator{
164
172
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
173
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +211,10 @@
203
211
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
204
212
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
205
213
  }
214
+ .droplistItem[data-size=l] .afterContent > svg{
215
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
216
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
217
+ }
206
218
  .droplistItem[data-size=l] .groupIndicator{
207
219
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
220
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/components/Items/styles.module.css CHANGED
@@ -145,6 +145,10 @@
145
145
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
146
146
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
147
147
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
148
+ gap:0;
149
+ }
150
+ .listItem[data-size=s] .groupIndicator{
151
+ margin-left:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
148
152
  }
149
153
  .listItem[data-size=m]{
150
154
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -153,6 +157,10 @@
153
157
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
154
158
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
155
159
  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
160
+ gap:0;
161
+ }
162
+ .listItem[data-size=m] .groupIndicator{
163
+ margin-left:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
156
164
  }
157
165
  .listItem[data-size=l]{
158
166
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -161,6 +169,10 @@
161
169
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
162
170
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
163
171
  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
172
+ gap:0;
173
+ }
174
+ .listItem[data-size=l] .groupIndicator{
175
+ margin-left:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
164
176
  }
165
177
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
166
178
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
package/dist/esm/components/Lists/ListPrivate/styles.module.css CHANGED
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .header[data-divider]{
60
60
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
61
- padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
61
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
62
62
  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
63
63
  }
64
64
 
package/dist/esm/helperComponents/Separator/Separator.js CHANGED
@@ -7,7 +7,6 @@ import { useCollapseLevelContext, useNewListContext } from '../../components/Lis
7
7
  import { TEST_IDS } from '../../constants.js';
8
8
  import { listLocale } from '../../locale/index.js';
9
9
  import { stopPropagation } from '../../utils.js';
10
- import { SELECT_BUTTON_SIZE_MAP } from './constants.js';
11
10
  import styles from './styles.module.css';
12
11
  export function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
13
12
  const { size = 'm' } = useNewListContext();
@@ -18,7 +17,7 @@ export function Separator({ label, beforeContent, truncate, divider, groupVarian
18
17
  return null;
19
18
  }
20
19
  const { onClick, checked, itemRef, label } = selectButton;
21
- return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: _jsx(Button, { view: 'function', appearance: 'neutral', size: SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, "data-test-id": TEST_IDS.bulkSelectButton, onClick: (e) => {
20
+ return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: _jsx(Button, { view: 'function', appearance: 'neutral', size: size, tabIndex: 0, "data-test-id": TEST_IDS.bulkSelectButton, onClick: (e) => {
22
21
  onClick?.(e);
23
22
  e.preventDefault();
24
23
  e.stopPropagation();
package/dist/esm/helperComponents/Separator/styles.module.css CHANGED
@@ -25,12 +25,15 @@
25
25
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
26
26
  }
27
27
  .separatorWithLabel[data-size=s]{
28
- gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
29
28
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
30
29
  }
31
30
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
32
31
  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * (var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
33
32
  }
33
+ .separatorWithLabel[data-size=s] .labelEnd{
34
+ padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
35
+ padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
36
+ }
34
37
  .separatorWithLabel[data-size=s] .beforeContent{
35
38
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
36
39
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -57,12 +60,15 @@
57
60
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
58
61
  }
59
62
  .separatorWithLabel[data-size=m]{
60
- gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
61
63
  padding:var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
62
64
  }
63
65
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
64
66
  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
65
67
  }
68
+ .separatorWithLabel[data-size=m] .labelEnd{
69
+ padding-top:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
70
+ padding-bottom:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
71
+ }
66
72
  .separatorWithLabel[data-size=m] .beforeContent{
67
73
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
68
74
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -89,12 +95,15 @@
89
95
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
90
96
  }
91
97
  .separatorWithLabel[data-size=l]{
92
- gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
93
98
  padding:var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
94
99
  }
95
100
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
96
101
  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
97
102
  }
103
+ .separatorWithLabel[data-size=l] .labelEnd{
104
+ padding-top:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
105
+ padding-bottom:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
106
+ }
98
107
  .separatorWithLabel[data-size=l] .beforeContent{
99
108
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
100
109
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/style.css CHANGED
@@ -117,6 +117,10 @@
117
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
118
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
119
119
  }
120
+ .droplistItem[data-size=s] .afterContent > svg{
121
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
123
+ }
120
124
  .droplistItem[data-size=s] .groupIndicator{
121
125
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
126
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +164,10 @@
160
164
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
161
165
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
162
166
  }
167
+ .droplistItem[data-size=m] .afterContent > svg{
168
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
169
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
170
+ }
163
171
  .droplistItem[data-size=m] .groupIndicator{
164
172
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
173
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +211,10 @@
203
211
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
204
212
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
205
213
  }
214
+ .droplistItem[data-size=l] .afterContent > svg{
215
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
216
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
217
+ }
206
218
  .droplistItem[data-size=l] .groupIndicator{
207
219
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
220
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -504,6 +516,10 @@
504
516
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
505
517
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
506
518
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
519
+ gap:0;
520
+ }
521
+ .listItem[data-size=s] .groupIndicator{
522
+ margin-left:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
507
523
  }
508
524
  .listItem[data-size=m]{
509
525
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -512,6 +528,10 @@
512
528
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
513
529
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
514
530
  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
531
+ gap:0;
532
+ }
533
+ .listItem[data-size=m] .groupIndicator{
534
+ margin-left:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
515
535
  }
516
536
  .listItem[data-size=l]{
517
537
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -520,6 +540,10 @@
520
540
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
521
541
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
522
542
  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
543
+ gap:0;
544
+ }
545
+ .listItem[data-size=l] .groupIndicator{
546
+ margin-left:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
523
547
  }
524
548
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
525
549
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -585,7 +609,7 @@
585
609
  }
586
610
  .header[data-divider]{
587
611
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
588
- padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
612
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
589
613
  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
590
614
  }
591
615
 
@@ -896,12 +920,15 @@
896
920
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
897
921
  }
898
922
  .separatorWithLabel[data-size=s]{
899
- gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
900
923
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
901
924
  }
902
925
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
903
926
  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * (var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
904
927
  }
928
+ .separatorWithLabel[data-size=s] .labelEnd{
929
+ padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
930
+ padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
931
+ }
905
932
  .separatorWithLabel[data-size=s] .beforeContent{
906
933
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
907
934
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -928,12 +955,15 @@
928
955
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
929
956
  }
930
957
  .separatorWithLabel[data-size=m]{
931
- gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
932
958
  padding:var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
933
959
  }
934
960
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
935
961
  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
936
962
  }
963
+ .separatorWithLabel[data-size=m] .labelEnd{
964
+ padding-top:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
965
+ padding-bottom:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
966
+ }
937
967
  .separatorWithLabel[data-size=m] .beforeContent{
938
968
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
939
969
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -960,12 +990,15 @@
960
990
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
961
991
  }
962
992
  .separatorWithLabel[data-size=l]{
963
- gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
964
993
  padding:var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
965
994
  }
966
995
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
967
996
  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
968
997
  }
998
+ .separatorWithLabel[data-size=l] .labelEnd{
999
+ padding-top:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
1000
+ padding-bottom:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
1001
+ }
969
1002
  .separatorWithLabel[data-size=l] .beforeContent{
970
1003
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
971
1004
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));