@cloud-ru/ds-list 2.0.1 → 2.0.2

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 (61) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -1
  3. package/dist/cjs/components/Items/BaseItem/BaseItem.js +1 -1
  4. package/dist/cjs/components/Items/BaseItem/styles.module.css +42 -0
  5. package/dist/cjs/components/Items/SearchItem/SearchItem.js +1 -1
  6. package/dist/cjs/components/Items/SimpleItem/utils.d.ts +1 -1
  7. package/dist/cjs/components/Items/SimpleItem/utils.js +1 -1
  8. package/dist/cjs/components/Items/styles.module.css +9 -0
  9. package/dist/cjs/components/Items/types.d.ts +2 -2
  10. package/dist/cjs/components/Items/utils.js +1 -1
  11. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +1 -1
  12. package/dist/cjs/components/Lists/ListPrivate/styles.module.css +2 -3
  13. package/dist/cjs/components/Lists/hooks.d.ts +1 -1
  14. package/dist/cjs/components/Lists/hooks.js +2 -2
  15. package/dist/cjs/helperComponents/DesktopDroplist/DesktopDroplist.js +1 -1
  16. package/dist/cjs/helperComponents/ItemContent/ItemContent.js +1 -1
  17. package/dist/cjs/helperComponents/ItemContent/styles.module.css +45 -24
  18. package/dist/cjs/helperComponents/Separator/Separator.js +3 -4
  19. package/dist/cjs/helperComponents/Separator/styles.module.css +69 -49
  20. package/dist/cjs/style.css +167 -76
  21. package/dist/esm/components/Items/BaseItem/BaseItem.js +1 -1
  22. package/dist/esm/components/Items/BaseItem/styles.module.css +42 -0
  23. package/dist/esm/components/Items/SearchItem/SearchItem.js +1 -1
  24. package/dist/esm/components/Items/SimpleItem/utils.d.ts +1 -1
  25. package/dist/esm/components/Items/SimpleItem/utils.js +1 -1
  26. package/dist/esm/components/Items/styles.module.css +9 -0
  27. package/dist/esm/components/Items/types.d.ts +2 -2
  28. package/dist/esm/components/Items/utils.js +1 -1
  29. package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +1 -1
  30. package/dist/esm/components/Lists/ListPrivate/styles.module.css +2 -3
  31. package/dist/esm/components/Lists/hooks.d.ts +1 -1
  32. package/dist/esm/components/Lists/hooks.js +2 -2
  33. package/dist/esm/helperComponents/DesktopDroplist/DesktopDroplist.js +1 -1
  34. package/dist/esm/helperComponents/ItemContent/ItemContent.js +1 -1
  35. package/dist/esm/helperComponents/ItemContent/styles.module.css +45 -24
  36. package/dist/esm/helperComponents/Separator/Separator.js +3 -4
  37. package/dist/esm/helperComponents/Separator/styles.module.css +69 -49
  38. package/dist/esm/style.css +167 -76
  39. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  40. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  41. package/package.json +10 -10
  42. package/src/components/Items/BaseItem/BaseItem.tsx +17 -10
  43. package/src/components/Items/BaseItem/styles.module.scss +57 -4
  44. package/src/components/Items/SearchItem/SearchItem.tsx +1 -1
  45. package/src/components/Items/SimpleItem/utils.ts +1 -1
  46. package/src/components/Items/styles.module.scss +10 -2
  47. package/src/components/Items/types.ts +3 -7
  48. package/src/components/Items/utils.ts +1 -1
  49. package/src/components/Lists/ListPrivate/ListPrivate.tsx +1 -1
  50. package/src/components/Lists/ListPrivate/styles.module.scss +5 -4
  51. package/src/components/Lists/hooks.ts +2 -2
  52. package/src/helperComponents/DesktopDroplist/DesktopDroplist.tsx +1 -1
  53. package/src/helperComponents/ItemContent/ItemContent.tsx +22 -20
  54. package/src/helperComponents/ItemContent/styles.module.scss +25 -15
  55. package/src/helperComponents/Separator/Separator.tsx +23 -22
  56. package/src/helperComponents/Separator/styles.module.scss +132 -101
  57. package/dist/cjs/helperComponents/Separator/constants.d.ts +0 -3
  58. package/dist/cjs/helperComponents/Separator/constants.js +0 -10
  59. package/dist/esm/helperComponents/Separator/constants.d.ts +0 -3
  60. package/dist/esm/helperComponents/Separator/constants.js +0 -7
  61. package/src/helperComponents/Separator/constants.ts +0 -11
package/dist/cjs/helperComponents/Separator/styles.module.css CHANGED
@@ -1,4 +1,4 @@
1
- .beforeContent{
1
+ .centeredWrapper{
2
2
  display:inline-flex;
3
3
  flex-grow:0;
4
4
  flex-shrink:0;
@@ -7,7 +7,7 @@
7
7
  box-sizing:content-box;
8
8
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
9
9
  }
10
- .beforeContent svg{
10
+ .centeredWrapper svg{
11
11
  width:100%;
12
12
  height:100%;
13
13
  }
@@ -31,30 +31,31 @@
31
31
  .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
32
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)))));
33
33
  }
34
- .separatorWithLabel[data-size=s] .beforeContent{
34
+ .separatorWithLabel[data-size=s] .centeredWrapper{
35
35
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
36
36
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
37
37
  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)));
38
38
  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)));
39
39
  }
40
- .separatorWithLabel[data-size=s] .label{
41
- padding:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
40
+ .separatorWithLabel[data-size=s] .textWrapper{
41
+ gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
42
+ 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)));
43
+ 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)));
42
44
  }
43
- .separatorWithLabel[data-size=s] .label[data-group-variant=subtitle]{
44
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
45
- font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
46
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
47
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
48
- letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
49
- paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
45
+ .separatorWithLabel[data-size=s] .textContent{
46
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
47
+ padding-right:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
48
+ padding-left:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
50
49
  }
51
- .separatorWithLabel[data-size=s] .label[data-group-variant=subtitleTertiary]{
50
+ .separatorWithLabel[data-size=s] .headline{
52
51
  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
53
52
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
54
53
  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
55
54
  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
56
55
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
57
56
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
57
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
58
+ min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by12, 16px));
58
59
  }
59
60
  .separatorWithLabel[data-size=m]{
60
61
  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
@@ -63,30 +64,31 @@
63
64
  .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
64
65
  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
66
  }
66
- .separatorWithLabel[data-size=m] .beforeContent{
67
+ .separatorWithLabel[data-size=m] .centeredWrapper{
67
68
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
68
69
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
69
70
  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)));
70
71
  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)));
71
72
  }
72
- .separatorWithLabel[data-size=m] .label{
73
- padding:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
73
+ .separatorWithLabel[data-size=m] .textWrapper{
74
+ gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
75
+ 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)));
76
+ 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)));
74
77
  }
75
- .separatorWithLabel[data-size=m] .label[data-group-variant=subtitle]{
76
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
77
- font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
78
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
79
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
80
- letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
81
- paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
78
+ .separatorWithLabel[data-size=m] .textContent{
79
+ gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
80
+ padding-right:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
81
+ padding-left:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
82
82
  }
83
- .separatorWithLabel[data-size=m] .label[data-group-variant=subtitleTertiary]{
83
+ .separatorWithLabel[data-size=m] .headline{
84
84
  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
85
85
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
86
86
  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
87
87
  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
88
88
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
89
89
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
90
+ gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
91
+ min-height:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by14, 20px));
90
92
  }
91
93
  .separatorWithLabel[data-size=l]{
92
94
  gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
@@ -95,30 +97,31 @@
95
97
  .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
96
98
  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
99
  }
98
- .separatorWithLabel[data-size=l] .beforeContent{
100
+ .separatorWithLabel[data-size=l] .centeredWrapper{
99
101
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
100
102
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
101
103
  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)));
102
104
  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)));
103
105
  }
104
- .separatorWithLabel[data-size=l] .label{
105
- padding:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
106
+ .separatorWithLabel[data-size=l] .textWrapper{
107
+ gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
108
+ 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)));
109
+ 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
110
  }
107
- .separatorWithLabel[data-size=l] .label[data-group-variant=subtitle]{
108
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
109
- font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
110
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
111
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
112
- letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
113
- paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
111
+ .separatorWithLabel[data-size=l] .textContent{
112
+ gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-2, 2px));
113
+ padding-right:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
114
+ padding-left:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
114
115
  }
115
- .separatorWithLabel[data-size=l] .label[data-group-variant=subtitleTertiary]{
116
+ .separatorWithLabel[data-size=l] .headline{
116
117
  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
117
118
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
118
119
  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
119
120
  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
120
121
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
121
122
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
123
+ gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
124
+ min-height:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by16, 24px));
122
125
  }
123
126
 
124
127
  .separatorWithoutLabel{
@@ -136,33 +139,50 @@
136
139
  padding: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))) 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)));
137
140
  }
138
141
 
139
- .label{
142
+ .contentWrapper{
143
+ display:flex;
144
+ flex:1 1 auto;
145
+ align-items:center;
146
+ min-width:0;
147
+ }
148
+
149
+ .textWrapper{
150
+ display:flex;
151
+ flex:1 1 auto;
152
+ align-items:center;
153
+ min-width:0;
154
+ }
155
+
156
+ .textContent{
157
+ display:flex;
158
+ flex-direction:column;
159
+ min-width:0;
160
+ }
161
+
162
+ .headline{
140
163
  overflow:hidden;
141
- flex-shrink:1;
164
+ display:flex;
165
+ align-items:center;
142
166
  }
143
- .label[data-group-variant=subtitle]{
167
+ .headline[data-group-variant=subtitle]{
144
168
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
145
169
  }
146
- .label[data-group-variant=subtitleTertiary]{
170
+ .headline[data-group-variant=subtitleTertiary]{
147
171
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
148
172
  }
149
173
 
150
174
  .divider{
151
- flex:1;
175
+ position:absolute;
176
+ right:0;
177
+ bottom:0;
178
+ left:0;
152
179
  width:auto;
153
180
  min-width:0;
154
181
  }
155
182
 
156
- .labelEnd{
157
- display:flex;
158
- flex:1 0 0;
159
- flex-direction:column;
160
- align-items:flex-end;
161
- justify-content:center;
162
- min-width:0;
163
- }
164
-
165
183
  .selectButton{
166
184
  display:flex;
185
+ flex-shrink:0;
167
186
  justify-content:flex-end;
187
+ margin-left:auto;
168
188
  }