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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.0.1 (2026-08-27)
+
+**Note:** Version bump only for package @ds/list
+
 # 2.0.0 (2026-08-25)
 
 ### BREAKING CHANGES

package/README.md

@@ -920,7 +920,7 @@ export function DroplistWithHeader() {
 | `content` | `ItemContent` | — | Основной контент айтема |
 | `data-test-id` | `string \| undefined` | — |  |
 | `disabled` | `boolean \| undefined` | — | Флаг неактивности элемента |
-| `hidden` | `boolean \| undefined` | — | Скрыть элемент из списка (не рендерится и выпадает из навигации) |
+| `hidden` | `boolean \| undefined` | — | Скрыть элемент из списка (не рендерится и исключается из навигации) |
 | `id` | `ItemId` | — | Уникальный идентификатор |
 | `itemRef` | `RefObject<HTMLElement> \| undefined` | — | Ссылка на DOM-элемент айтема |
 | `itemWrapRender` | `((item: ReactNode) => ReactNode) \| undefined` | — | Рендер-обёртка вокруг айтема (например, для проксирования в `Tooltip`/`Link`) |

package/dist/cjs/components/Items/BaseItem/BaseItem.js

@@ -111,7 +111,7 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
     const stateLayerState = isSelectionSingle && isChecked && !switchProp && !isParentNode
         ? 'activatedOnBackground'
         : 'emptyNeutralOnBackground';
-    const itemJSX = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${constants_1.TEST_IDS.baseItem}_${id}`, ref: itemRef, className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "data-non-pointer": (inactive && !onClick) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.markerContainer, "data-test-id": constants_1.TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.beforeContent, children: beforeContent }), contentNode, afterContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.afterContent, children: afterContent }), switchProp && interactive && ((0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon })), !switchProp && expandIcon && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicator, "data-open": open || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, "aria-hidden": true, children: expandIcon }))] })] }));
+    const itemJSX = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className), "data-size": size, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${constants_1.TEST_IDS.baseItem}_${id}`, ref: itemRef, className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "data-non-pointer": (inactive && !onClick) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.markerContainer, "data-test-id": constants_1.TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.contentWrapper, children: [beforeContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.beforeContent, children: beforeContent }), contentNode, afterContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.afterContent, children: afterContent })] }), switchProp && interactive && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.switchWrapper, children: (0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon }) })), !switchProp && expandIcon && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicator, "data-open": open || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, "aria-hidden": true, children: expandIcon }))] })] }));
     if (!itemWrapRender) {
         return itemJSX;
     }

package/dist/cjs/components/Items/BaseItem/styles.module.css

@@ -121,6 +121,10 @@
   max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
   max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
 }
+.droplistItem[data-size=s] .switchWrapper{
+  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)));
+}
 .droplistItem[data-size=s] .groupIndicator{
   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));
@@ -168,6 +172,10 @@
   max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
 }
+.droplistItem[data-size=m] .switchWrapper{
+  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)));
+}
 .droplistItem[data-size=m] .groupIndicator{
   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));
@@ -215,6 +223,10 @@
   max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
 }
+.droplistItem[data-size=l] .switchWrapper{
+  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)));
+}
 .droplistItem[data-size=l] .groupIndicator{
   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));
@@ -256,6 +268,9 @@
 .innerWrapper[data-has-checked] .droplistItem:focus-visible, .innerWrapper[data-checked] .droplistItem:focus-visible{
   outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
 }
+.innerWrapper[data-has-checked][data-disabled] .markerContainer, .innerWrapper[data-checked][data-disabled] .markerContainer{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
 .innerWrapper[data-has-checked][data-disabled] .markerContainer::before, .innerWrapper[data-checked][data-disabled] .markerContainer::before{
   background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
 }
@@ -265,4 +280,19 @@
   flex-grow:1;
   flex-shrink:1;
   box-sizing:border-box;
+}
+
+.switchWrapper{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  box-sizing:content-box;
+}
+
+.contentWrapper{
+  display:flex;
+  flex-grow:1;
+  flex-shrink:1;
+  align-items:flex-start;
+  min-width:0;
 }

package/dist/cjs/components/Items/SearchItem/SearchItem.js

@@ -15,7 +15,7 @@ function SearchItem({ search, itemRef, onNavKeyDown, onFocus, inTopBar }) {
     // Размер поиска следует за размером айтемов списка (size из контекста), а не фиксирован 's'.
     const { firstItemId, size = 'm' } = (0, contexts_1.useNewListContext)();
     const handleKeyDown = (e) => {
-        // Поиск — текстовый input: гасим только Up/Down (навигация по списку), горизонтальные
+        // Поиск — текстовый input: перехватываются только Up/Down (навигация по списку), горизонтальные
         // стрелки оставляем каретке.
         (0, utils_1.preventScrollOnVerticalArrows)(e);
         search?.onKeyDown?.(e);

package/dist/cjs/components/Items/SimpleItem/utils.d.ts

@@ -2,6 +2,6 @@
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
  * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
- * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
+ * на время переноса флаг не изменяется: его ведёт стратегия `SortableContext`.
  */
 export declare function animateLayoutChanges(): boolean;

package/dist/cjs/components/Items/SimpleItem/utils.js

@@ -5,7 +5,7 @@ exports.animateLayoutChanges = animateLayoutChanges;
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
  * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
- * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
+ * на время переноса флаг не изменяется: его ведёт стратегия `SortableContext`.
  */
 function animateLayoutChanges() {
     return false;

package/dist/cjs/components/Items/styles.module.css

@@ -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;
@@ -145,10 +154,6 @@
   padding-top:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
   padding-bottom:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
   border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
-  gap:0;
-}
-.listItem[data-size=s] .groupIndicator{
-  margin-left:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
 }
 .listItem[data-size=m]{
   padding-left:var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
@@ -157,10 +162,6 @@
   padding-top:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
   padding-bottom:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
   border-radius:var(--sn-list-anatomy-size-m-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-0, 0px)));
-  gap:0;
-}
-.listItem[data-size=m] .groupIndicator{
-  margin-left:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
 }
 .listItem[data-size=l]{
   padding-left:var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
@@ -169,10 +170,6 @@
   padding-top:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
   padding-bottom:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
   border-radius:var(--sn-list-anatomy-size-l-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-l, var(--sn-primitive-dimension-0, 0px)));
-  gap:0;
-}
-.listItem[data-size=l] .groupIndicator{
-  margin-left:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
 }
 .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
   outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);

package/dist/cjs/components/Items/types.d.ts

@@ -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/cjs/components/Items/utils.js

@@ -95,7 +95,7 @@ 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/cjs/components/Lists/ListPrivate/ListPrivate.js

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

package/dist/cjs/components/Lists/ListPrivate/styles.module.css

@@ -54,10 +54,9 @@
   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-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/cjs/components/Lists/hooks.d.ts

@@ -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/cjs/components/Lists/hooks.js

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

package/dist/cjs/helperComponents/DesktopDroplist/DesktopDroplist.js

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

package/dist/cjs/helperComponents/ItemContent/ItemContent.js

@@ -23,5 +23,5 @@ function ItemContent({ truncate: truncateProp, caption, description, label, clas
         ...DEFAULT_TRUNCATE,
         ...truncateProp,
     }), [truncateProp]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": constants_1.TEST_IDS.baseItemLabel }) }), caption && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: description, maxLines: truncate.description, "data-test-id": constants_1.TEST_IDS.baseItemDescription }) }))] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.textWrapper, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContent, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": constants_1.TEST_IDS.baseItemLabel }) }), caption && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: description, maxLines: truncate.description, "data-test-id": constants_1.TEST_IDS.baseItemDescription }) }))] }) }));
 }

package/dist/cjs/helperComponents/ItemContent/styles.module.css

@@ -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/cjs/helperComponents/Separator/Separator.js

@@ -23,14 +23,14 @@ function Separator({ label, beforeContent, truncate, divider, groupVariant = 'su
             return null;
         }
         const { onClick, checked, itemRef, label } = selectButton;
-        return ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: size, tabIndex: 0, "data-test-id": constants_1.TEST_IDS.bulkSelectButton, onClick: (e) => {
+        return ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, "data-size": size, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: size, tabIndex: 0, "data-test-id": constants_1.TEST_IDS.bulkSelectButton, onClick: (e) => {
                     onClick?.(e);
                     e.preventDefault();
                     e.stopPropagation();
                 }, onFocus: utils_1.stopPropagation, innerRef: itemRef, label: label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
-    }, [divider, groupVariant, selectButton, size, t]);
+    }, [selectButton, size, t]);
     if (label) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [beforeContent && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.beforeContent, "aria-hidden": true, children: beforeContent })), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-group-variant": groupVariant, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.labelEnd, children: [selectButtonJSX, divider && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, variant: groupVariant === 'subtitle' ? divider_1.VARIANT.Regular : divider_1.VARIANT.Thin }))] })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [beforeContent && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.centeredWrapper, "aria-hidden": true, children: beforeContent })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.textContent, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.headline, "data-group-variant": groupVariant, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }) }), selectButtonJSX] })] }), divider && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, variant: groupVariant === 'subtitle' ? divider_1.VARIANT.Regular : divider_1.VARIANT.Thin }))] }));
     }
     if (divider) {
         return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.separatorWithoutLabel, "data-size": size, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { variant: divider_1.VARIANT.Regular }) }));