@cloud-ru/ds-list 2.0.1 → 2.0.2

package/src/helperComponents/Separator/styles.module.scss

@@ -4,7 +4,8 @@
 
 $sizes: 's', 'm', 'l';
 
-// Typography map (legacy separator primary = sans-label/title, secondary = light-label/title)
+// Оба варианта группы (`subtitle` / `subtitleTertiary`) в мастере используют один и тот же
+// текстовый стиль и различаются только цветом — см. `.label[data-group-variant]`.
 $subtitle-typography-map: (
   's': (
     'weight': 'regular',
@@ -23,38 +24,18 @@ $subtitle-typography-map: (
   ),
 );
 
-// 'light' weight в base-styles отсутствует — используем 'regular', subtitleTertiary
-// отличаем цветом (см. .label[data-group-variant='subtitleTertiary']).
-$subtitle-tertiary-typography-map: (
-  's': (
-    'weight': 'regular',
-    'role': 'label',
-    'size': 'm',
-  ),
-  'm': (
-    'weight': 'regular',
-    'role': 'label',
-    'size': 'l',
-  ),
-  'l': (
-    'weight': 'regular',
-    'role': 'title',
-    'size': 'm',
-  ),
-);
-
 $level: var(--level, 0);
 
 // Composites dropList item.<size>.container-separator(-subheader) в токен-наборе отсутствуют —
 // приближаем через list anatomy.size.<size>.listItem.padding-*.
-// Figma listItemGroup: root flex, align-items: flex-start, gap=listItem.gap,
+// Figma listItemGroup: root flex, align-items: center, gap=listItem.gap,
 // padding-top=subtitle.paddingTop, padding-bottom=listItem.paddingVertical,
 // padding-horizontal=listItem.paddingHorizontal. Иконка и label — на одной линии по центру (textWrapper).
 
 // Figma centeredWrapper (list.listItem.centeredWrapper): padding-vertical вокруг иконки.
 // Размер иконочного слота — общий с listItem (см. icons.$iconSizeMap).
 // Используем content-box, чтобы padding не зажимал SVG.
-.beforeContent {
+.centeredWrapper {
   display: inline-flex;
   flex-grow: 0;
   flex-shrink: 0;
@@ -93,7 +74,6 @@ $level: var(--level, 0);
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       $subtitle: base.simple-var($subtitle-typography-map, $size);
-      $subtitleTertiary: base.simple-var($subtitle-tertiary-typography-map, $size);
       $itemPaddingLeft: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-left');
       $itemGap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'gap');
 
@@ -112,7 +92,7 @@ $level: var(--level, 0);
         );
       }
 
-      .beforeContent {
+      .centeredWrapper {
         width: base.simple-var(icons.$iconSizeMap, $size);
         height: base.simple-var(icons.$iconSizeMap, $size);
         padding-top: base.simple-var(
@@ -135,69 +115,101 @@ $level: var(--level, 0);
         );
       }
 
-      .label {
-        padding: base.simple-var(
-            list.$list,
-            'anatomy',
-            'size',
-            $size,
-            'listItem',
-            'contentWrapper',
-            'textWrapper',
-            'padding-top'
-          )
-          base.simple-var(
-            list.$list,
-            'anatomy',
-            'size',
-            $size,
-            'listItem',
-            'contentWrapper',
-            'textWrapper',
-            'textContent',
-            'padding-right'
-          )
-          base.simple-var(
-            list.$list,
-            'anatomy',
-            'size',
-            $size,
-            'listItem',
-            'contentWrapper',
-            'textWrapper',
-            'padding-bottom'
-          )
-          base.simple-var(
-            list.$list,
-            'anatomy',
-            'size',
-            $size,
-            'listItem',
-            'contentWrapper',
-            'textWrapper',
-            'textContent',
-            'padding-left'
-          );
-
-        &[data-group-variant='subtitle'] {
-          @include base.composite-var(
-            base.$base-styles,
-            'sn',
-            base.simple-var($subtitle, 'weight'),
-            base.simple-var($subtitle, 'role'),
-            base.simple-var($subtitle, 'size')
-          );
-        }
-
-        &[data-group-variant='subtitleTertiary'] {
-          @include base.composite-var(
-            base.$base-styles,
-            'sn',
-            base.simple-var($subtitleTertiary, 'weight'),
-            base.simple-var($subtitleTertiary, 'role'),
-            base.simple-var($subtitleTertiary, 'size')
-          );
-        }
+      // Раскладка повторяет мастер listItemGroup: root → contentWrapper → textWrapper →
+      // textContent → headline. Вертикальные поля несёт textWrapper, горизонтальные — textContent.
+      .textWrapper {
+        gap: $itemGap;
+        padding-top: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'padding-top'
+        );
+        padding-bottom: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'padding-bottom'
+        );
+      }
+
+      .textContent {
+        gap: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'textContent',
+          'gap'
+        );
+        padding-right: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'textContent',
+          'padding-right'
+        );
+        padding-left: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'textContent',
+          'padding-left'
+        );
+      }
+
+      .headline {
+        @include base.composite-var(
+          base.$base-styles,
+          'sn',
+          base.simple-var($subtitle, 'weight'),
+          base.simple-var($subtitle, 'role'),
+          base.simple-var($subtitle, 'size')
+        );
+
+        gap: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'textContent',
+          'headline',
+          'gap'
+        );
+        min-height: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'contentWrapper',
+          'textWrapper',
+          'textContent',
+          'headline',
+          'min-height'
+        );
       }
     }
   }
@@ -220,9 +232,30 @@ $level: var(--level, 0);
   }
 }
 
-.label {
+.contentWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.textWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.headline {
   overflow: hidden;
-  flex-shrink: 1;
+  display: flex;
+  align-items: center;
 
   &[data-group-variant='subtitle'] {
     color: base.$sn-theme-color-available-version-textMain;
@@ -234,22 +267,20 @@ $level: var(--level, 0);
 }
 
 .divider {
-  flex: 1;
-  width: auto;
-  min-width: 0;
-}
-
-.labelEnd {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
+  width: auto;
   min-width: 0;
 }
 
 .selectButton {
   display: flex;
+  flex-shrink: 0;
   justify-content: flex-end;
+
+  // Кнопка выравнивается по правому краю строки заголовка.
+  margin-left: auto;
 }

package/dist/cjs/helperComponents/Separator/constants.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '@cloud-ru/ds-button';
-import { Size } from '../../types';
-export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;

package/dist/cjs/helperComponents/Separator/constants.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_BUTTON_SIZE_MAP = void 0;
-// @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
-// маппим размеры списка на ближайшие доступные `Button` size.
-exports.SELECT_BUTTON_SIZE_MAP = {
-    s: 's',
-    m: 's',
-    l: 'm',
-};

package/dist/esm/helperComponents/Separator/constants.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '@cloud-ru/ds-button';
-import { Size } from '../../types.js';
-export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;

package/dist/esm/helperComponents/Separator/constants.js

@@ -1,7 +0,0 @@
-// @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
-// маппим размеры списка на ближайшие доступные `Button` size.
-export const SELECT_BUTTON_SIZE_MAP = {
-    s: 's',
-    m: 's',
-    l: 'm',
-};

package/src/helperComponents/Separator/constants.ts

@@ -1,11 +0,0 @@
-import { ButtonProps } from '@cloud-ru/ds-button';
-
-import { Size } from '../../types';
-
-// @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
-// маппим размеры списка на ближайшие доступные `Button` size.
-export const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']> = {
-  s: 's',
-  m: 's',
-  l: 'm',
-};