npm - @cloud-ru/ds-list - Versions diffs - 2.0.1 → 2.0.2 - Mend

@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

package/dist/esm/components/Items/styles.module.css CHANGED Viewed

@@ -93,6 +93,15 @@
 .itemWrapper[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
   background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
 }
+.itemWrapper[data-size=s]{
+  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
+}
+.itemWrapper[data-size=m]{
+  border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
+}
+.itemWrapper[data-size=l]{
+  border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
+}
 .itemWrapper[data-disabled], .itemWrapper:disabled{
   cursor:not-allowed;
   background-color:transparent;

package/dist/esm/components/Items/types.d.ts CHANGED Viewed

@@ -36,7 +36,7 @@ export type BaseItem = WithSupportProps<{
     id?: ItemId;
     /** Флаг неактивности элемента */
     disabled?: boolean;
-    /** Скрыть элемент из списка (не рендерится и выпадает из навигации) */
+    /** Скрыть элемент из списка (не рендерится и исключается из навигации) */
     hidden?: boolean;
     /** Ссылка на DOM-элемент айтема */
     itemRef?: RefObject<HTMLElement>;
@@ -45,7 +45,7 @@ export type BaseItem = WithSupportProps<{
     /**
      * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
      * <br>
-     * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+     * Также элемент исключается из навигации с клавиатуры и не может быть выбран (selection)
      */
     inactive?: boolean;
     /**

package/dist/esm/components/Items/utils.js CHANGED Viewed

@@ -80,7 +80,7 @@ export function kindFlattenItems({ items, prefix, parentId, sortable }) {
                 key: itemId,
                 originalId: itemId,
                 id: autoId,
-                // `inactive` элемент выпадает из клавиатурной навигации наравне с `disabled`
+                // `inactive` элемент исключается из клавиатурной навигации наравне с `disabled`
                 // (см. JSDoc `BaseItem.inactive`). Гейтит только nav/bulk-select через
                 // `extractActiveItems`; рендерный `disabled` в `flattenItems` остаётся исходным.
                 disabled: item.disabled || item.inactive,

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js CHANGED Viewed

@@ -49,7 +49,7 @@ export const ListPrivate = forwardRef(({ items, pinTop, pinBottom, onKeyDown, on
     // типов (`ListProps`), здесь рантайм-зеркало на случай прямого использования `ListPrivate`.
     const virtualized = virtualizedProp && !onDragEnd;
     const sensors = useSensors(useSensor(MouseSensor, draggingOptions), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
+    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия рендерится в портале
     // над страницей и не режется `overflow: hidden` контейнера `List` (сама строка на время
     // переноса уступает место — её слот пустеет). `null`, когда перетаскивание не идёт.
     const [activeDragId, setActiveDragId] = useState(null);

package/dist/esm/components/Lists/ListPrivate/styles.module.css CHANGED Viewed

@@ -54,11 +54,10 @@
   flex-direction:column;
   gap:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-gap, var(--sn-primitive-dimension-4, 4px));
   box-sizing:border-box;
-  padding:0 var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
+  padding:0 var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
 }
 .header[data-divider]{
-  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
-  padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
   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)));
 }

package/dist/esm/components/Lists/hooks.d.ts CHANGED Viewed

@@ -23,7 +23,7 @@ type UseListItemsModelProps = {
  * Единая модель данных списка для `List` и `Droplist`: collapse-состояние,
  * плоские карты айтемов (`flattenItems` / `focusFlattenItems`) и производный
  * порядок навигации (`ids` / `expandedIds`). Оба компонента собирают одну и ту же
- * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * структуру, поэтому она собрана в одном хуке — расхождение между списком и дроплистом
  * физически невозможно.
  */
 export declare function useListItemsModel({ items: itemsProp, pinTop: pinTopProp, pinBottom: pinBottomProp, search, collapse, selectionMode, footerActiveElementsRefs, onItemsReorder, }: UseListItemsModelProps): {

package/dist/esm/components/Lists/hooks.js CHANGED Viewed

@@ -22,7 +22,7 @@ function focusReturnTarget(el) {
  * Единая модель данных списка для `List` и `Droplist`: collapse-состояние,
  * плоские карты айтемов (`flattenItems` / `focusFlattenItems`) и производный
  * порядок навигации (`ids` / `expandedIds`). Оба компонента собирают одну и ту же
- * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * структуру, поэтому она собрана в одном хуке — расхождение между списком и дроплистом
  * физически невозможно.
  */
 export function useListItemsModel({ items: itemsProp, pinTop: pinTopProp, pinBottom: pinBottomProp, search, collapse, selectionMode, footerActiveElementsRefs, onItemsReorder, }) {
@@ -131,7 +131,7 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, k
         activeItemIdRef.current = defaultActiveItemId;
     }, [defaultActiveItemId]);
     const handleListKeyDownFactory = useCallback((ids, expandedIds) => (e) => {
-        // Стрелки навигации по списку гасим централизованно — иначе нативное поведение скроллит
+        // Стрелки навигации по списку перехватываются централизованно — иначе нативное поведение скроллит
         // страницу (элементы — кнопки/li, не текст, поэтому безопасны все четыре стрелки).
         preventScrollOnArrowKeys(e);
         switch (e.key) {

package/dist/esm/helperComponents/DesktopDroplist/DesktopDroplist.js CHANGED Viewed

@@ -65,7 +65,7 @@ export function DesktopDroplist({ items: itemsProp, search, pinBottom: pinBottom
         }
     }, []);
     const onKeyDown = useCallback((e, cb) => {
-        // Up/Down открывают/закрывают дроплист — гасим их нативный скролл страницы. Только
+        // Up/Down открывают/закрывают дроплист — их нативный скролл страницы подавляется. Только
         // вертикальные: триггером может быть текстовое поле, где Left/Right двигают каретку.
         preventScrollOnVerticalArrows(e);
         if (e.key === 'ArrowDown') {

package/dist/esm/helperComponents/ItemContent/ItemContent.js CHANGED Viewed

@@ -17,5 +17,5 @@ export function ItemContent({ truncate: truncateProp, caption, description, labe
         ...DEFAULT_TRUNCATE,
         ...truncateProp,
     }), [truncateProp]);
-    return (_jsxs("div", { className: cn(styles.content, className), ...extractSupportProps(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, children: _jsx(TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": TEST_IDS.baseItemLabel }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: truncate.description, "data-test-id": TEST_IDS.baseItemDescription }) }))] }));
+    return (_jsx("div", { className: cn(styles.textWrapper, className), ...extractSupportProps(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, children: _jsxs("div", { className: styles.textContent, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, children: _jsx(TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": TEST_IDS.baseItemLabel }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: truncate.description, "data-test-id": TEST_IDS.baseItemDescription }) }))] }) }));
 }

package/dist/esm/helperComponents/ItemContent/styles.module.css CHANGED Viewed

@@ -22,23 +22,27 @@
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
 }
-.content{
+.textWrapper{
   overflow:hidden;
   display:flex;
-  flex-direction:column;
   flex-grow:1;
   flex-shrink:1;
   box-sizing:border-box;
 }
-.content[data-size=s]{
+.textWrapper[data-size=s]{
+  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)));
+  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)));
+}
+.textWrapper[data-size=s] .textContent{
   gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
-  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)));
+  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)));
+  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)));
 }
-.content[data-size=s] .headline{
+.textWrapper[data-size=s] .headline{
   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)));
   min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by12, 16px));
 }
-.content[data-size=s] .label{
+.textWrapper[data-size=s] .label{
   font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
@@ -48,7 +52,7 @@
   display:flex;
   align-items:center;
 }
-.content[data-size=s] .caption{
+.textWrapper[data-size=s] .caption{
   font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
@@ -56,7 +60,7 @@
   letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
 }
-.content[data-size=s] .description{
+.textWrapper[data-size=s] .description{
   font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
@@ -64,15 +68,20 @@
   letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
 }
-.content[data-size=m]{
+.textWrapper[data-size=m]{
+  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)));
+  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)));
+}
+.textWrapper[data-size=m] .textContent{
   gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
-  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)));
+  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)));
+  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)));
 }
-.content[data-size=m] .headline{
+.textWrapper[data-size=m] .headline{
   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)));
   min-height:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by14, 20px));
 }
-.content[data-size=m] .label{
+.textWrapper[data-size=m] .label{
   font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
@@ -82,7 +91,7 @@
   display:flex;
   align-items:center;
 }
-.content[data-size=m] .caption{
+.textWrapper[data-size=m] .caption{
   font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
@@ -90,7 +99,7 @@
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
 }
-.content[data-size=m] .description{
+.textWrapper[data-size=m] .description{
   font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
@@ -98,15 +107,20 @@
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
 }
-.content[data-size=l]{
+.textWrapper[data-size=l]{
+  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)));
+  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)));
+}
+.textWrapper[data-size=l] .textContent{
   gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-2, 2px));
-  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)));
+  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)));
+  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)));
 }
-.content[data-size=l] .headline{
+.textWrapper[data-size=l] .headline{
   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)));
   min-height:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by16, 24px));
 }
-.content[data-size=l] .label{
+.textWrapper[data-size=l] .label{
   font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
@@ -116,7 +130,7 @@
   display:flex;
   align-items:center;
 }
-.content[data-size=l] .caption{
+.textWrapper[data-size=l] .caption{
   font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
@@ -124,7 +138,7 @@
   letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }
-.content[data-size=l] .description{
+.textWrapper[data-size=l] .description{
   font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
   line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
@@ -132,8 +146,15 @@
   letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }
-.content[data-disabled] .label,
-.content[data-disabled] .description,
-.content[data-disabled] .caption{
-  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+.textWrapper[data-disabled]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.textContent{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
 }

package/dist/esm/helperComponents/Separator/Separator.js CHANGED Viewed

@@ -7,7 +7,6 @@ import { useCollapseLevelContext, useNewListContext } from '../../components/Lis
 import { TEST_IDS } from '../../constants.js';
 import { listLocale } from '../../locale/index.js';
 import { stopPropagation } from '../../utils.js';
-import { SELECT_BUTTON_SIZE_MAP } from './constants.js';
 import styles from './styles.module.css';
 export function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
     const { size = 'm' } = useNewListContext();
@@ -18,14 +17,14 @@ export function Separator({ label, beforeContent, truncate, divider, groupVarian
             return null;
         }
         const { onClick, checked, itemRef, label } = selectButton;
-        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) => {
+        return (_jsx("span", { className: styles.selectButton, "data-size": size, children: _jsx(Button, { view: 'function', appearance: 'neutral', size: size, tabIndex: 0, "data-test-id": TEST_IDS.bulkSelectButton, onClick: (e) => {
                     onClick?.(e);
                     e.preventDefault();
                     e.stopPropagation();
                 }, onFocus: stopPropagation, innerRef: itemRef, label: label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
-    }, [divider, groupVariant, selectButton, size, t]);
+    }, [selectButton, size, t]);
     if (label) {
-        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [beforeContent && (_jsx("span", { className: styles.beforeContent, "aria-hidden": true, children: beforeContent })), _jsx("span", { className: styles.label, "data-group-variant": groupVariant, children: _jsx(TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }), _jsxs("div", { className: styles.labelEnd, children: [selectButtonJSX, divider && (_jsx(Divider, { className: styles.divider, variant: groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin }))] })] }));
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [_jsxs("div", { className: styles.contentWrapper, children: [beforeContent && (_jsx("span", { className: styles.centeredWrapper, "aria-hidden": true, children: beforeContent })), _jsxs("div", { className: styles.textWrapper, children: [_jsx("div", { className: styles.textContent, children: _jsx("span", { className: styles.headline, "data-group-variant": groupVariant, children: _jsx(TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }) }), selectButtonJSX] })] }), divider && (_jsx(Divider, { className: styles.divider, variant: groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin }))] }));
     }
     if (divider) {
         return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { variant: VARIANT.Regular }) }));

package/dist/esm/helperComponents/Separator/styles.module.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.beforeContent{
+.centeredWrapper{
   display:inline-flex;
   flex-grow:0;
   flex-shrink:0;
@@ -7,7 +7,7 @@
   box-sizing:content-box;
   color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }
-.beforeContent svg{
+.centeredWrapper svg{
   width:100%;
   height:100%;
 }
@@ -31,30 +31,31 @@
 .separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
   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)))));
 }
-.separatorWithLabel[data-size=s] .beforeContent{
+.separatorWithLabel[data-size=s] .centeredWrapper{
   width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
   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)));
   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)));
 }
-.separatorWithLabel[data-size=s] .label{
-  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)));
+.separatorWithLabel[data-size=s] .textWrapper{
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=s] .label[data-group-variant=subtitle]{
-  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
-  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
-  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+.separatorWithLabel[data-size=s] .textContent{
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=s] .label[data-group-variant=subtitleTertiary]{
+.separatorWithLabel[data-size=s] .headline{
   font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   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))));
   line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
   font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
   letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
   paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  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)));
+  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by12, 16px));
 }
 .separatorWithLabel[data-size=m]{
   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 @@
 .separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
   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)))));
 }
-.separatorWithLabel[data-size=m] .beforeContent{
+.separatorWithLabel[data-size=m] .centeredWrapper{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   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)));
   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)));
 }
-.separatorWithLabel[data-size=m] .label{
-  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)));
+.separatorWithLabel[data-size=m] .textWrapper{
+  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=m] .label[data-group-variant=subtitle]{
-  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
-  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
-  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+.separatorWithLabel[data-size=m] .textContent{
+  gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=m] .label[data-group-variant=subtitleTertiary]{
+.separatorWithLabel[data-size=m] .headline{
   font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   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))));
   line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
   font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
   letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
   paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  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)));
+  min-height:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by14, 20px));
 }
 .separatorWithLabel[data-size=l]{
   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 @@
 .separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
   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)))));
 }
-.separatorWithLabel[data-size=l] .beforeContent{
+.separatorWithLabel[data-size=l] .centeredWrapper{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   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)));
   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)));
 }
-.separatorWithLabel[data-size=l] .label{
-  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)));
+.separatorWithLabel[data-size=l] .textWrapper{
+  gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=l] .label[data-group-variant=subtitle]{
-  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
-  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
-  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+.separatorWithLabel[data-size=l] .textContent{
+  gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-2, 2px));
+  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)));
+  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)));
 }
-.separatorWithLabel[data-size=l] .label[data-group-variant=subtitleTertiary]{
+.separatorWithLabel[data-size=l] .headline{
   font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
   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))));
   line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
   font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
   letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
   paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+  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)));
+  min-height:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by16, 24px));
 }
 .separatorWithoutLabel{
@@ -136,33 +139,50 @@
   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)));
 }
-.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;
 }
-.label[data-group-variant=subtitle]{
+.headline[data-group-variant=subtitle]{
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
-.label[data-group-variant=subtitleTertiary]{
+.headline[data-group-variant=subtitleTertiary]{
   color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }
 .divider{
-  flex:1;
+  position:absolute;
+  right:0;
+  bottom:0;
+  left:0;
   width:auto;
   min-width:0;
 }
-.labelEnd{
-  display:flex;
-  flex:1 0 0;
-  flex-direction:column;
-  align-items:flex-end;
-  justify-content:center;
-  min-width:0;
-}
 .selectButton{
   display:flex;
+  flex-shrink:0;
   justify-content:flex-end;
+  margin-left:auto;
 }