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

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 (26) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/Items/BaseItem/styles.module.css +0 -12
  3. package/dist/cjs/components/Items/styles.module.css +0 -12
  4. package/dist/cjs/components/Lists/ListPrivate/styles.module.css +1 -1
  5. package/dist/cjs/helperComponents/Separator/Separator.js +2 -1
  6. package/dist/cjs/helperComponents/Separator/constants.d.ts +3 -0
  7. package/dist/cjs/helperComponents/Separator/constants.js +10 -0
  8. package/dist/cjs/helperComponents/Separator/styles.module.css +3 -12
  9. package/dist/cjs/style.css +4 -37
  10. package/dist/esm/components/Items/BaseItem/styles.module.css +0 -12
  11. package/dist/esm/components/Items/styles.module.css +0 -12
  12. package/dist/esm/components/Lists/ListPrivate/styles.module.css +1 -1
  13. package/dist/esm/helperComponents/Separator/Separator.js +2 -1
  14. package/dist/esm/helperComponents/Separator/constants.d.ts +3 -0
  15. package/dist/esm/helperComponents/Separator/constants.js +7 -0
  16. package/dist/esm/helperComponents/Separator/styles.module.css +3 -12
  17. package/dist/esm/style.css +4 -37
  18. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  19. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  20. package/package.json +18 -18
  21. package/src/components/Items/BaseItem/styles.module.scss +0 -7
  22. package/src/components/Items/styles.module.scss +0 -8
  23. package/src/components/Lists/ListPrivate/styles.module.scss +1 -1
  24. package/src/helperComponents/Separator/Separator.tsx +2 -1
  25. package/src/helperComponents/Separator/constants.ts +11 -0
  26. package/src/helperComponents/Separator/styles.module.scss +1 -25
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 2.0.1 (2026-08-27)
7
+
8
+ **Note:** Version bump only for package @ds/list
9
+
6
10
  # 2.0.0 (2026-08-25)
7
11
 
8
12
  ### BREAKING CHANGES
package/dist/cjs/components/Items/BaseItem/styles.module.css CHANGED
@@ -117,10 +117,6 @@
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
- }
124
120
  .droplistItem[data-size=s] .groupIndicator{
125
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
126
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -164,10 +160,6 @@
164
160
  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)));
165
161
  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)));
166
162
  }
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
- }
171
163
  .droplistItem[data-size=m] .groupIndicator{
172
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
173
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -211,10 +203,6 @@
211
203
  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)));
212
204
  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)));
213
205
  }
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
- }
218
206
  .droplistItem[data-size=l] .groupIndicator{
219
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
220
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/cjs/components/Items/styles.module.css CHANGED
@@ -145,10 +145,6 @@
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)));
152
148
  }
153
149
  .listItem[data-size=m]{
154
150
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -157,10 +153,6 @@
157
153
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
158
154
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
159
155
  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)));
164
156
  }
165
157
  .listItem[data-size=l]{
166
158
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -169,10 +161,6 @@
169
161
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
170
162
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
171
163
  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)));
176
164
  }
177
165
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
178
166
  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-gap, var(--sn-primitive-dimension-4, 4px));
61
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
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,6 +13,7 @@ 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");
16
17
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
17
18
  function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
18
19
  const { size = 'm' } = (0, contexts_1.useNewListContext)();
@@ -23,7 +24,7 @@ function Separator({ label, beforeContent, truncate, divider, groupVariant = 'su
23
24
  return null;
24
25
  }
25
26
  const { onClick, checked, itemRef, label } = selectButton;
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) => {
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) => {
27
28
  onClick?.(e);
28
29
  e.preventDefault();
29
30
  e.stopPropagation();
package/dist/cjs/helperComponents/Separator/constants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ButtonProps } from '@cloud-ru/ds-button';
2
+ import { Size } from '../../types';
3
+ export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;
package/dist/cjs/helperComponents/Separator/constants.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SELECT_BUTTON_SIZE_MAP = void 0;
4
+ // @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
5
+ // маппим размеры списка на ближайшие доступные `Button` size.
6
+ exports.SELECT_BUTTON_SIZE_MAP = {
7
+ s: 's',
8
+ m: 's',
9
+ l: 'm',
10
+ };
package/dist/cjs/helperComponents/Separator/styles.module.css CHANGED
@@ -25,15 +25,12 @@
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)));
28
29
  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)));
29
30
  }
30
31
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
31
32
  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)))));
32
33
  }
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
- }
37
34
  .separatorWithLabel[data-size=s] .beforeContent{
38
35
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
39
36
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -60,15 +57,12 @@
60
57
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
61
58
  }
62
59
  .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)));
63
61
  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)));
64
62
  }
65
63
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
66
64
  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)))));
67
65
  }
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
- }
72
66
  .separatorWithLabel[data-size=m] .beforeContent{
73
67
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
74
68
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -95,15 +89,12 @@
95
89
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
96
90
  }
97
91
  .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)));
98
93
  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)));
99
94
  }
100
95
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
101
96
  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)))));
102
97
  }
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
- }
107
98
  .separatorWithLabel[data-size=l] .beforeContent{
108
99
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
109
100
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/cjs/style.css CHANGED
@@ -117,10 +117,6 @@
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
- }
124
120
  .droplistItem[data-size=s] .groupIndicator{
125
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
126
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -164,10 +160,6 @@
164
160
  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)));
165
161
  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)));
166
162
  }
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
- }
171
163
  .droplistItem[data-size=m] .groupIndicator{
172
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
173
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -211,10 +203,6 @@
211
203
  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)));
212
204
  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)));
213
205
  }
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
- }
218
206
  .droplistItem[data-size=l] .groupIndicator{
219
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
220
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -516,10 +504,6 @@
516
504
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
517
505
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
518
506
  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)));
523
507
  }
524
508
  .listItem[data-size=m]{
525
509
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -528,10 +512,6 @@
528
512
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
529
513
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
530
514
  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)));
535
515
  }
536
516
  .listItem[data-size=l]{
537
517
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -540,10 +520,6 @@
540
520
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
541
521
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
542
522
  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)));
547
523
  }
548
524
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
549
525
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -609,7 +585,7 @@
609
585
  }
610
586
  .header[data-divider]{
611
587
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
612
- padding-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));
613
589
  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)));
614
590
  }
615
591
 
@@ -920,15 +896,12 @@
920
896
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
921
897
  }
922
898
  .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)));
923
900
  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)));
924
901
  }
925
902
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
926
903
  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)))));
927
904
  }
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
- }
932
905
  .separatorWithLabel[data-size=s] .beforeContent{
933
906
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
934
907
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -955,15 +928,12 @@
955
928
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
956
929
  }
957
930
  .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)));
958
932
  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)));
959
933
  }
960
934
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
961
935
  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)))));
962
936
  }
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
- }
967
937
  .separatorWithLabel[data-size=m] .beforeContent{
968
938
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
969
939
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -990,15 +960,12 @@
990
960
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
991
961
  }
992
962
  .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)));
993
964
  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)));
994
965
  }
995
966
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
996
967
  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)))));
997
968
  }
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
- }
1002
969
  .separatorWithLabel[data-size=l] .beforeContent{
1003
970
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1004
971
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -117,10 +117,6 @@
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
- }
124
120
  .droplistItem[data-size=s] .groupIndicator{
125
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
126
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -164,10 +160,6 @@
164
160
  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)));
165
161
  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)));
166
162
  }
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
- }
171
163
  .droplistItem[data-size=m] .groupIndicator{
172
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
173
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -211,10 +203,6 @@
211
203
  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)));
212
204
  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)));
213
205
  }
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
- }
218
206
  .droplistItem[data-size=l] .groupIndicator{
219
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
220
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/components/Items/styles.module.css CHANGED
@@ -145,10 +145,6 @@
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)));
152
148
  }
153
149
  .listItem[data-size=m]{
154
150
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -157,10 +153,6 @@
157
153
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
158
154
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
159
155
  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)));
164
156
  }
165
157
  .listItem[data-size=l]{
166
158
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -169,10 +161,6 @@
169
161
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
170
162
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
171
163
  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)));
176
164
  }
177
165
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
178
166
  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-gap, var(--sn-primitive-dimension-4, 4px));
61
+ padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
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,6 +7,7 @@ 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';
10
11
  import styles from './styles.module.css';
11
12
  export function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
12
13
  const { size = 'm' } = useNewListContext();
@@ -17,7 +18,7 @@ export function Separator({ label, beforeContent, truncate, divider, groupVarian
17
18
  return null;
18
19
  }
19
20
  const { onClick, checked, itemRef, label } = selectButton;
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) => {
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) => {
21
22
  onClick?.(e);
22
23
  e.preventDefault();
23
24
  e.stopPropagation();
package/dist/esm/helperComponents/Separator/constants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ButtonProps } from '@cloud-ru/ds-button';
2
+ import { Size } from '../../types.js';
3
+ export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;
package/dist/esm/helperComponents/Separator/constants.js ADDED
@@ -0,0 +1,7 @@
1
+ // @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
2
+ // маппим размеры списка на ближайшие доступные `Button` size.
3
+ export const SELECT_BUTTON_SIZE_MAP = {
4
+ s: 's',
5
+ m: 's',
6
+ l: 'm',
7
+ };
package/dist/esm/helperComponents/Separator/styles.module.css CHANGED
@@ -25,15 +25,12 @@
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)));
28
29
  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)));
29
30
  }
30
31
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
31
32
  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)))));
32
33
  }
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
- }
37
34
  .separatorWithLabel[data-size=s] .beforeContent{
38
35
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
39
36
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -60,15 +57,12 @@
60
57
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
61
58
  }
62
59
  .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)));
63
61
  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)));
64
62
  }
65
63
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
66
64
  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)))));
67
65
  }
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
- }
72
66
  .separatorWithLabel[data-size=m] .beforeContent{
73
67
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
74
68
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -95,15 +89,12 @@
95
89
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
96
90
  }
97
91
  .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)));
98
93
  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)));
99
94
  }
100
95
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
101
96
  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)))));
102
97
  }
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
- }
107
98
  .separatorWithLabel[data-size=l] .beforeContent{
108
99
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
109
100
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
package/dist/esm/style.css CHANGED
@@ -117,10 +117,6 @@
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
- }
124
120
  .droplistItem[data-size=s] .groupIndicator{
125
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
126
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -164,10 +160,6 @@
164
160
  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)));
165
161
  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)));
166
162
  }
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
- }
171
163
  .droplistItem[data-size=m] .groupIndicator{
172
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
173
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -211,10 +203,6 @@
211
203
  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)));
212
204
  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)));
213
205
  }
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
- }
218
206
  .droplistItem[data-size=l] .groupIndicator{
219
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
220
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -516,10 +504,6 @@
516
504
  padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
517
505
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
518
506
  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)));
523
507
  }
524
508
  .listItem[data-size=m]{
525
509
  padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -528,10 +512,6 @@
528
512
  padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
529
513
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
530
514
  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)));
535
515
  }
536
516
  .listItem[data-size=l]{
537
517
  padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -540,10 +520,6 @@
540
520
  padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
541
521
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
542
522
  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)));
547
523
  }
548
524
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
549
525
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -609,7 +585,7 @@
609
585
  }
610
586
  .header[data-divider]{
611
587
  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
612
- padding-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));
613
589
  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)));
614
590
  }
615
591
 
@@ -920,15 +896,12 @@
920
896
  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
921
897
  }
922
898
  .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)));
923
900
  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)));
924
901
  }
925
902
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
926
903
  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)))));
927
904
  }
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
- }
932
905
  .separatorWithLabel[data-size=s] .beforeContent{
933
906
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
934
907
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -955,15 +928,12 @@
955
928
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
956
929
  }
957
930
  .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)));
958
932
  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)));
959
933
  }
960
934
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
961
935
  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)))));
962
936
  }
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
- }
967
937
  .separatorWithLabel[data-size=m] .beforeContent{
968
938
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
969
939
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -990,15 +960,12 @@
990
960
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
991
961
  }
992
962
  .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)));
993
964
  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)));
994
965
  }
995
966
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
996
967
  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)))));
997
968
  }
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
- }
1002
969
  .separatorWithLabel[data-size=l] .beforeContent{
1003
970
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1004
971
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));