@cloud-ru/ds-uikit-product-header 2.1.8-preview-448a8de1.0 → 2.1.8-preview-0dfd928f.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 (12) hide show
  1. package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.css +22 -4
  2. package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/styles.module.css +4 -0
  3. package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.css +3 -1
  4. package/dist/cjs/style.css +29 -5
  5. package/dist/esm/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.css +22 -4
  6. package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/styles.module.css +4 -0
  7. package/dist/esm/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.css +3 -1
  8. package/dist/esm/style.css +29 -5
  9. package/package.json +7 -7
  10. package/src/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.scss +29 -4
  11. package/src/components/ListCustom/helperComponents/ListItemCustom/styles.module.scss +8 -0
  12. package/src/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.scss +3 -1
package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.css CHANGED
@@ -1,12 +1,13 @@
1
1
  .root{
2
2
  display:flex;
3
- flex:1 0 0;
3
+ flex:1 1 0;
4
4
  gap:var(--sn-primitive-dimension-6, 6px);
5
5
  min-width:0;
6
6
  }
7
7
 
8
8
  .centeredWrapper{
9
9
  display:flex;
10
+ flex-shrink:0;
10
11
  align-items:center;
11
12
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
12
13
  }
@@ -22,18 +23,22 @@
22
23
  }
23
24
 
24
25
  .textWrapper{
26
+ overflow:hidden;
25
27
  display:flex;
26
- flex:1 0 0;
28
+ flex:1 1 0;
27
29
  align-items:flex-start;
30
+ min-width:0;
28
31
  }
29
32
 
30
33
  .textContent{
34
+ overflow:hidden;
31
35
  display:flex;
32
- flex:1 0 0;
36
+ flex:1 1 0;
33
37
  flex-direction:column;
34
38
  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
35
39
  align-items:flex-start;
36
40
  justify-content:center;
41
+ min-width:0;
37
42
  padding:0;
38
43
  }
39
44
 
@@ -43,6 +48,7 @@
43
48
  align-self:stretch;
44
49
  justify-content:space-between;
45
50
  width:100%;
51
+ min-width:0;
46
52
  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
47
53
  }
48
54
 
@@ -82,11 +88,23 @@
82
88
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
83
89
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
84
90
  }
85
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
91
+ .root[data-layout=item] .centeredWrapperAfter{
92
+ width:auto;
93
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
95
+ }
96
+ .root[data-layout=item] .elementBeforeContent{
86
97
  flex-direction:column;
87
98
  align-items:flex-start;
99
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
88
100
  height:24px;
89
101
  }
102
+ .root[data-layout=item] .elementAfterContent{
103
+ display:flex;
104
+ flex-direction:row;
105
+ align-items:center;
106
+ height:auto;
107
+ }
90
108
  .root[data-layout=item] .headline{
91
109
  gap:var(--sn-primitive-dimension-4, 4px);
92
110
  }
package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/styles.module.css CHANGED
@@ -15,6 +15,7 @@
15
15
  width:-moz-max-content;
16
16
  width:max-content;
17
17
  min-width:100%;
18
+ max-width:100%;
18
19
  margin:0;
19
20
  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
20
21
  border:none;
@@ -116,7 +117,10 @@
116
117
  .itemWrapper{
117
118
  position:relative;
118
119
  z-index:0;
120
+ overflow:hidden;
121
+ box-sizing:border-box;
119
122
  min-width:100%;
123
+ max-width:100%;
120
124
  margin:0;
121
125
  padding:0;
122
126
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .root{
2
2
  position:relative;
3
+ overflow:hidden;
3
4
  display:flex;
4
5
  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
5
6
  align-items:center;
6
7
  box-sizing:border-box;
7
8
  width:100%;
8
- min-width:100%;
9
+ min-width:0;
10
+ max-width:100%;
9
11
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
10
12
  }
11
13
  .root:focus-visible{
package/dist/cjs/style.css CHANGED
@@ -43,13 +43,14 @@
43
43
  }
44
44
  .root{
45
45
  display:flex;
46
- flex:1 0 0;
46
+ flex:1 1 0;
47
47
  gap:var(--sn-primitive-dimension-6, 6px);
48
48
  min-width:0;
49
49
  }
50
50
 
51
51
  .centeredWrapper{
52
52
  display:flex;
53
+ flex-shrink:0;
53
54
  align-items:center;
54
55
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
55
56
  }
@@ -65,18 +66,22 @@
65
66
  }
66
67
 
67
68
  .textWrapper{
69
+ overflow:hidden;
68
70
  display:flex;
69
- flex:1 0 0;
71
+ flex:1 1 0;
70
72
  align-items:flex-start;
73
+ min-width:0;
71
74
  }
72
75
 
73
76
  .textContent{
77
+ overflow:hidden;
74
78
  display:flex;
75
- flex:1 0 0;
79
+ flex:1 1 0;
76
80
  flex-direction:column;
77
81
  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
78
82
  align-items:flex-start;
79
83
  justify-content:center;
84
+ min-width:0;
80
85
  padding:0;
81
86
  }
82
87
 
@@ -86,6 +91,7 @@
86
91
  align-self:stretch;
87
92
  justify-content:space-between;
88
93
  width:100%;
94
+ min-width:0;
89
95
  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
90
96
  }
91
97
 
@@ -125,11 +131,23 @@
125
131
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
126
132
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
127
133
  }
128
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
134
+ .root[data-layout=item] .centeredWrapperAfter{
135
+ width:auto;
136
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
138
+ }
139
+ .root[data-layout=item] .elementBeforeContent{
129
140
  flex-direction:column;
130
141
  align-items:flex-start;
142
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
131
143
  height:24px;
132
144
  }
145
+ .root[data-layout=item] .elementAfterContent{
146
+ display:flex;
147
+ flex-direction:row;
148
+ align-items:center;
149
+ height:auto;
150
+ }
133
151
  .root[data-layout=item] .headline{
134
152
  gap:var(--sn-primitive-dimension-4, 4px);
135
153
  }
@@ -225,6 +243,7 @@
225
243
  width:-moz-max-content;
226
244
  width:max-content;
227
245
  min-width:100%;
246
+ max-width:100%;
228
247
  margin:0;
229
248
  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
230
249
  border:none;
@@ -326,7 +345,10 @@
326
345
  .itemWrapper{
327
346
  position:relative;
328
347
  z-index:0;
348
+ overflow:hidden;
349
+ box-sizing:border-box;
329
350
  min-width:100%;
351
+ max-width:100%;
330
352
  margin:0;
331
353
  padding:0;
332
354
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
@@ -445,12 +467,14 @@
445
467
  }
446
468
  .root{
447
469
  position:relative;
470
+ overflow:hidden;
448
471
  display:flex;
449
472
  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
450
473
  align-items:center;
451
474
  box-sizing:border-box;
452
475
  width:100%;
453
- min-width:100%;
476
+ min-width:0;
477
+ max-width:100%;
454
478
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
455
479
  }
456
480
  .root:focus-visible{
package/dist/esm/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.css CHANGED
@@ -1,12 +1,13 @@
1
1
  .root{
2
2
  display:flex;
3
- flex:1 0 0;
3
+ flex:1 1 0;
4
4
  gap:var(--sn-primitive-dimension-6, 6px);
5
5
  min-width:0;
6
6
  }
7
7
 
8
8
  .centeredWrapper{
9
9
  display:flex;
10
+ flex-shrink:0;
10
11
  align-items:center;
11
12
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
12
13
  }
@@ -22,18 +23,22 @@
22
23
  }
23
24
 
24
25
  .textWrapper{
26
+ overflow:hidden;
25
27
  display:flex;
26
- flex:1 0 0;
28
+ flex:1 1 0;
27
29
  align-items:flex-start;
30
+ min-width:0;
28
31
  }
29
32
 
30
33
  .textContent{
34
+ overflow:hidden;
31
35
  display:flex;
32
- flex:1 0 0;
36
+ flex:1 1 0;
33
37
  flex-direction:column;
34
38
  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
35
39
  align-items:flex-start;
36
40
  justify-content:center;
41
+ min-width:0;
37
42
  padding:0;
38
43
  }
39
44
 
@@ -43,6 +48,7 @@
43
48
  align-self:stretch;
44
49
  justify-content:space-between;
45
50
  width:100%;
51
+ min-width:0;
46
52
  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
47
53
  }
48
54
 
@@ -82,11 +88,23 @@
82
88
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
83
89
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
84
90
  }
85
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
91
+ .root[data-layout=item] .centeredWrapperAfter{
92
+ width:auto;
93
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
95
+ }
96
+ .root[data-layout=item] .elementBeforeContent{
86
97
  flex-direction:column;
87
98
  align-items:flex-start;
99
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
88
100
  height:24px;
89
101
  }
102
+ .root[data-layout=item] .elementAfterContent{
103
+ display:flex;
104
+ flex-direction:row;
105
+ align-items:center;
106
+ height:auto;
107
+ }
90
108
  .root[data-layout=item] .headline{
91
109
  gap:var(--sn-primitive-dimension-4, 4px);
92
110
  }
package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/styles.module.css CHANGED
@@ -15,6 +15,7 @@
15
15
  width:-moz-max-content;
16
16
  width:max-content;
17
17
  min-width:100%;
18
+ max-width:100%;
18
19
  margin:0;
19
20
  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
20
21
  border:none;
@@ -116,7 +117,10 @@
116
117
  .itemWrapper{
117
118
  position:relative;
118
119
  z-index:0;
120
+ overflow:hidden;
121
+ box-sizing:border-box;
119
122
  min-width:100%;
123
+ max-width:100%;
120
124
  margin:0;
121
125
  padding:0;
122
126
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
package/dist/esm/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .root{
2
2
  position:relative;
3
+ overflow:hidden;
3
4
  display:flex;
4
5
  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
5
6
  align-items:center;
6
7
  box-sizing:border-box;
7
8
  width:100%;
8
- min-width:100%;
9
+ min-width:0;
10
+ max-width:100%;
9
11
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
10
12
  }
11
13
  .root:focus-visible{
package/dist/esm/style.css CHANGED
@@ -43,13 +43,14 @@
43
43
  }
44
44
  .root{
45
45
  display:flex;
46
- flex:1 0 0;
46
+ flex:1 1 0;
47
47
  gap:var(--sn-primitive-dimension-6, 6px);
48
48
  min-width:0;
49
49
  }
50
50
 
51
51
  .centeredWrapper{
52
52
  display:flex;
53
+ flex-shrink:0;
53
54
  align-items:center;
54
55
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
55
56
  }
@@ -65,18 +66,22 @@
65
66
  }
66
67
 
67
68
  .textWrapper{
69
+ overflow:hidden;
68
70
  display:flex;
69
- flex:1 0 0;
71
+ flex:1 1 0;
70
72
  align-items:flex-start;
73
+ min-width:0;
71
74
  }
72
75
 
73
76
  .textContent{
77
+ overflow:hidden;
74
78
  display:flex;
75
- flex:1 0 0;
79
+ flex:1 1 0;
76
80
  flex-direction:column;
77
81
  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
78
82
  align-items:flex-start;
79
83
  justify-content:center;
84
+ min-width:0;
80
85
  padding:0;
81
86
  }
82
87
 
@@ -86,6 +91,7 @@
86
91
  align-self:stretch;
87
92
  justify-content:space-between;
88
93
  width:100%;
94
+ min-width:0;
89
95
  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
90
96
  }
91
97
 
@@ -125,11 +131,23 @@
125
131
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
126
132
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
127
133
  }
128
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
134
+ .root[data-layout=item] .centeredWrapperAfter{
135
+ width:auto;
136
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
138
+ }
139
+ .root[data-layout=item] .elementBeforeContent{
129
140
  flex-direction:column;
130
141
  align-items:flex-start;
142
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
131
143
  height:24px;
132
144
  }
145
+ .root[data-layout=item] .elementAfterContent{
146
+ display:flex;
147
+ flex-direction:row;
148
+ align-items:center;
149
+ height:auto;
150
+ }
133
151
  .root[data-layout=item] .headline{
134
152
  gap:var(--sn-primitive-dimension-4, 4px);
135
153
  }
@@ -225,6 +243,7 @@
225
243
  width:-moz-max-content;
226
244
  width:max-content;
227
245
  min-width:100%;
246
+ max-width:100%;
228
247
  margin:0;
229
248
  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
230
249
  border:none;
@@ -326,7 +345,10 @@
326
345
  .itemWrapper{
327
346
  position:relative;
328
347
  z-index:0;
348
+ overflow:hidden;
349
+ box-sizing:border-box;
329
350
  min-width:100%;
351
+ max-width:100%;
330
352
  margin:0;
331
353
  padding:0;
332
354
  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
@@ -445,12 +467,14 @@
445
467
  }
446
468
  .root{
447
469
  position:relative;
470
+ overflow:hidden;
448
471
  display:flex;
449
472
  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
450
473
  align-items:center;
451
474
  box-sizing:border-box;
452
475
  width:100%;
453
- min-width:100%;
476
+ min-width:0;
477
+ max-width:100%;
454
478
  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
455
479
  }
456
480
  .root:focus-visible{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-uikit-product-header",
3
- "version": "2.1.8-preview-448a8de1.0",
3
+ "version": "2.1.8-preview-0dfd928f.0",
4
4
  "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -46,32 +46,32 @@
46
46
  "classnames": "^2.5.1",
47
47
  "fuse.js": "^7.1.0",
48
48
  "@cloud-ru/ds-accordion": "1.2.4",
49
+ "@cloud-ru/ds-adaptive": "1.0.2",
49
50
  "@cloud-ru/ds-avatar": "1.0.13",
50
- "@cloud-ru/ds-breadcrumbs": "1.0.34-preview-448a8de1.0",
51
+ "@cloud-ru/ds-breadcrumbs": "1.0.34-preview-0dfd928f.0",
51
52
  "@cloud-ru/ds-button": "1.0.4",
52
53
  "@cloud-ru/ds-card": "1.0.25",
53
- "@cloud-ru/ds-divider": "1.0.2",
54
- "@cloud-ru/ds-adaptive": "1.0.2",
55
54
  "@cloud-ru/ds-drag-and-drop": "1.1.3",
56
55
  "@cloud-ru/ds-drawer": "2.1.2",
56
+ "@cloud-ru/ds-divider": "1.0.2",
57
57
  "@cloud-ru/ds-icons": "1.6.0",
58
58
  "@cloud-ru/ds-info-block": "1.0.3",
59
- "@cloud-ru/ds-list": "2.3.7-preview-448a8de1.0",
59
+ "@cloud-ru/ds-list": "2.3.7-preview-0dfd928f.0",
60
60
  "@cloud-ru/ds-locale": "1.0.0",
61
61
  "@cloud-ru/ds-materials": "2.0.1",
62
62
  "@cloud-ru/ds-modal": "2.0.3",
63
63
  "@cloud-ru/ds-portal-context": "1.0.2",
64
64
  "@cloud-ru/ds-promo-tag": "1.0.3",
65
65
  "@cloud-ru/ds-scroll": "1.0.5",
66
- "@cloud-ru/ds-segment-control": "1.0.15",
67
66
  "@cloud-ru/ds-search": "1.0.16",
67
+ "@cloud-ru/ds-segment-control": "1.0.15",
68
68
  "@cloud-ru/ds-skeleton": "1.0.2",
69
69
  "@cloud-ru/ds-theme": "2.1.0",
70
70
  "@cloud-ru/ds-toggles": "1.1.11",
71
71
  "@cloud-ru/ds-tooltip": "1.0.13",
72
72
  "@cloud-ru/ds-truncate-string": "1.0.14",
73
73
  "@cloud-ru/ds-typography": "1.0.2",
74
- "@cloud-ru/ds-uikit-product-card-predefined": "4.0.14-preview-448a8de1.0",
74
+ "@cloud-ru/ds-uikit-product-card-predefined": "4.0.14-preview-0dfd928f.0",
75
75
  "@cloud-ru/ds-uikit-product-switch-row": "1.0.16",
76
76
  "@cloud-ru/ds-uikit-product-title-clickable": "1.0.19",
77
77
  "@cloud-ru/ds-utils": "1.2.0"
package/src/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.scss CHANGED
@@ -6,13 +6,16 @@
6
6
 
7
7
  .root {
8
8
  display: flex;
9
- flex: 1 0 0;
9
+ // shrink: иначе длинный label раздувает строку шире контейнера (UserMenu 304px)
10
+ // и TruncateString не получает конечную ширину — как у @cloud-ru/ds-list contentWrapper.
11
+ flex: 1 1 0;
10
12
  gap: base.$sn-primitive-dimension-6;
11
13
  min-width: 0;
12
14
  }
13
15
 
14
16
  .centeredWrapper {
15
17
  display: flex;
18
+ flex-shrink: 0;
16
19
  align-items: center;
17
20
  color: base.$sn-theme-color-available-version-textTertiary;
18
21
 
@@ -29,19 +32,24 @@
29
32
  }
30
33
 
31
34
  .textWrapper {
35
+ overflow: hidden;
32
36
  display: flex;
33
- flex: 1 0 0;
37
+ flex: 1 1 0;
34
38
  align-items: flex-start;
39
+
40
+ min-width: 0;
35
41
  }
36
42
 
37
43
  .textContent {
44
+ overflow: hidden;
38
45
  display: flex;
39
- flex: 1 0 0;
46
+ flex: 1 1 0;
40
47
  flex-direction: column;
41
48
  gap: list.$sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap;
42
49
  align-items: flex-start;
43
50
  justify-content: center;
44
51
 
52
+ min-width: 0;
45
53
  padding: 0;
46
54
  }
47
55
 
@@ -52,6 +60,7 @@
52
60
  justify-content: space-between;
53
61
 
54
62
  width: 100%;
63
+ min-width: 0;
55
64
  min-height: list.$sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight;
56
65
  }
57
66
 
@@ -89,17 +98,33 @@
89
98
  align-items: flex-start;
90
99
  padding: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-4;
91
100
 
101
+ // before — icon-сетка; after (badge + kebab) шире иконки — иначе слот
102
+ // width:icon-s и контент наезжает на truncate label.
92
103
  .centeredWrapper {
93
104
  width: base.$sn-density-icon-s;
94
105
  height: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-height;
95
106
  }
96
107
 
97
- .elementBeforeContent, .elementAfterContent {
108
+ .centeredWrapperAfter {
109
+ width: auto;
110
+ min-width: base.$sn-density-icon-s;
111
+ min-height: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-height;
112
+ }
113
+
114
+ .elementBeforeContent {
98
115
  flex-direction: column;
99
116
  align-items: flex-start;
117
+ width: base.$sn-density-icon-s;
100
118
  height: 24px; // TODO: raw value?
101
119
  }
102
120
 
121
+ .elementAfterContent {
122
+ display: flex;
123
+ flex-direction: row;
124
+ align-items: center;
125
+ height: auto; // 24px
126
+ }
127
+
103
128
  .headline {
104
129
  gap: base.$sn-primitive-dimension-4;
105
130
  }
package/src/components/ListCustom/helperComponents/ListItemCustom/styles.module.scss CHANGED
@@ -25,8 +25,12 @@ $nestingLevelStep: list.$sn-list-anatomy-size-s-listItem-nestingLevel-paddingLef
25
25
  align-items: flex-start;
26
26
 
27
27
  box-sizing: border-box;
28
+ // Как у @cloud-ru/ds-list Items: max-content + min-width 100%.
29
+ // Дополнительно max-width/min-width:0 на flex-детях — иначе длинный label
30
+ // раздувает строку шире контейнера (UserMenu 304px) → горизонтальный скролл.
28
31
  width: max-content;
29
32
  min-width: 100%;
33
+ max-width: 100%;
30
34
  margin: 0;
31
35
  padding: base.$sn-primitive-dimension-0 $itemPaddingHorizontal;
32
36
  border: none;
@@ -155,7 +159,11 @@ $nestingLevelStep: list.$sn-list-anatomy-size-s-listItem-nestingLevel-paddingLef
155
159
  position: relative;
156
160
  z-index: 0;
157
161
 
162
+ overflow: hidden;
163
+
164
+ box-sizing: border-box;
158
165
  min-width: 100%;
166
+ max-width: 100%;
159
167
  margin: 0;
160
168
  padding: 0;
161
169
  border-radius: list.$sn-list-anatomy-size-s-listItem-borderRadius;
package/src/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.scss CHANGED
@@ -11,13 +11,15 @@ $nestingLevelStep: list.$sn-list-anatomy-size-s-listItem-nestingLevel-paddingLef
11
11
  .root {
12
12
  position: relative;
13
13
 
14
+ overflow: hidden;
14
15
  display: flex;
15
16
  gap: $itemGap;
16
17
  align-items: center;
17
18
 
18
19
  box-sizing: border-box;
19
20
  width: 100%;
20
- min-width: 100%;
21
+ min-width: 0;
22
+ max-width: 100%;
21
23
  padding: list.$sn-list-anatomy-size-s-subtitle-paddingTop $groupPaddingHorizontal
22
24
  list.$sn-list-anatomy-size-s-listItem-paddingVertical;
23
25