@cloud-ru/ds-uikit-product-header 2.0.3-preview-1298edee.0 → 2.0.3

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.3 (2026-09-30)
+
+**Note:** Version bump only for package @ds/uikit-product-header
+
 ## 2.0.2 (2026-09-30)
 
 **Note:** Version bump only for package @ds/uikit-product-header

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

@@ -32,7 +32,7 @@
 
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .header[data-mobile] .top{
   padding:0;

package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css

@@ -44,7 +44,7 @@
   overflow:hidden;
   flex-shrink:1;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
   text-overflow:ellipsis;
   white-space:nowrap;
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.css

@@ -13,7 +13,7 @@
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .subcategory[data-title-only]{
   padding:var(--sn-primitive-dimension-4, 4px);
@@ -60,7 +60,7 @@
 .subcategoryDescription{
   width:100%;
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 
 .subcategoryTitleDraggable{

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -27,7 +27,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -38,7 +38,7 @@
 .headerTitle{
   flex:1 0 0;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
 }
 
 .group{
@@ -53,7 +53,7 @@
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 .group[data-appear]{
   animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
@@ -68,7 +68,7 @@
 }
 .group[data-drag-preview] .header{
   cursor:grabbing;
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
@@ -99,7 +99,7 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border:none;
   border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   background-color:transparent;
   outline:none;
 }
@@ -206,11 +206,11 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css

@@ -2,8 +2,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }
 
 .emptyState{
@@ -15,7 +15,7 @@
 }
 
 .emptyText{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   text-align:center;
   white-space:pre-line;
 }

package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css

@@ -8,7 +8,7 @@
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 
 .header{
@@ -35,8 +35,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
-  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
 }
 
 .dropTarget{

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.js

@@ -12,5 +12,5 @@ const constants_1 = require("../../../../constants");
 const utils_1 = require("../../utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MenuBottom({ settingItems, leftBottom }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -61,7 +61,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 
 .menuBody{

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css

@@ -3,7 +3,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .container[data-mobile]{
   gap:0;
@@ -15,8 +15,8 @@
   justify-content:flex-start;
 }
 .closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
-  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
 }
 .closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
-const list_1 = require("@cloud-ru/ds-list");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const mobileOverlays_1 = require("../../../../mobileOverlays");
@@ -39,5 +38,5 @@ function MenuMobile({ open = false, setOpen, settingItems, platformGroups, segme
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen?.(false);
     }, [setOpen]);
-    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: list_1.SNAP_POINTS_PRESET.full, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader, isMobile: true }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop, search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader, isMobile: true }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop, search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/styles.module.css

@@ -3,7 +3,7 @@
 }
 
 .drawerMobile{
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4))) !important;
 }
 
 .scrollMobile{

package/dist/cjs/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/ScrollWithAnimatedStickyPanel.js

@@ -8,10 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const scroll_1 = require("@cloud-ru/ds-scroll");
 const react_1 = require("react");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-// Упругая прокрутка у верхней границы (touch-скролл на мобильных не "упирается" жёстко в 0 —
-// контент можно немного "оттянуть" дальше) даёт scrollTop, не совпадающий с реальным положением
-// контента в этот момент. Диапазон запаса — единицы пикселей; двух хватает с большим запасом.
-const TOP_OVERSCROLL_EPSILON_PX = 2;
 function ScrollWithAnimatedStickyPanel({ panel, children }) {
     const [positions, setPositions] = (0, react_1.useState)({ panelTopShift: 0, containerScroll: 0 });
     const [panelHeight, setPanelHeight] = (0, react_1.useState)(0);
@@ -24,13 +20,6 @@ function ScrollWithAnimatedStickyPanel({ panel, children }) {
             return;
         const panelHeight = panelRef.current.offsetHeight;
         setPanelHeight(panelHeight);
-        // У верхней границы панель всегда полностью видна — не доверяем накопленному diff. Иначе
-        // "лишний" ход упругой прокрутки у самого верха читается как скролл вниз и на возврате к
-        // началу списка панель может остаться скрытой, хотя пользователь как раз скроллит наверх.
-        if (target.scrollTop <= TOP_OVERSCROLL_EPSILON_PX) {
-            setPositions({ panelTopShift: 0, containerScroll: target.scrollTop });
-            return;
-        }
         setPositions(prev => {
             const diff = prev.containerScroll - target.scrollTop;
             return {
@@ -39,11 +28,10 @@ function ScrollWithAnimatedStickyPanel({ panel, children }) {
             };
         });
     }, []);
-    const setPanelRef = (0, react_1.useCallback)((element) => {
-        if (element) {
-            setPanelHeight(element.offsetHeight);
-            panelRef.current = element;
-        }
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panel, ref: setPanelRef, style: { top: positions.panelTopShift }, children: panel })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panel, ref: element => {
+                    if (element) {
+                        setPanelHeight(element.offsetHeight);
+                        panelRef.current = element;
+                    }
+                }, style: { top: positions.panelTopShift }, children: panel })] }));
 }

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

@@ -7,5 +7,5 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
   color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
-  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
 }

package/dist/cjs/components/UserMenu/UserMenu.js

@@ -28,9 +28,6 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
     const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
-    const handleClose = (0, react_1.useCallback)(() => {
-        setOpen(false);
-    }, [setOpen]);
     const { pinTop, items: menuItems, pinBottom, } = (0, useUserMenuItems_1.useUserMenuItems)({
         isMobile,
         profile,
@@ -39,7 +36,9 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
         organizationItems,
         bottomItems,
         settingItems,
-        onClose: handleClose,
+        onClose: () => {
+            setOpen(false);
+        },
         onLogout,
     });
     const trigger = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: { tip: triggerTooltip }, isMobile: isMobile, onClick: () => {
@@ -51,5 +50,5 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
                 appearance: 'primary',
             }
             : undefined, "data-test-id": constants_1.TEST_IDS.userMenu.button, icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: (0, classnames_1.default)(styles_module_scss_1.default.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: list_1.SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles_module_scss_1.default.userMenuDroplistTrigger, children: trigger }));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: (0, classnames_1.default)(styles_module_scss_1.default.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
 }

package/dist/cjs/components/UserMenu/hooks/useLogoutItem.d.ts

@@ -1,4 +1,4 @@
-import { BaseItem } from '@cloud-ru/ds-list';
+import { ListProps } from '@cloud-ru/ds-list';
 export declare function useLogoutItem({ onLogout }: {
     onLogout?(): void;
-}): BaseItem;
+}): ListProps['items'];

package/dist/cjs/components/UserMenu/hooks/useLogoutItem.js

@@ -1,23 +1,20 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogoutItem = useLogoutItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const product_1 = require("@cloud-ru/ds-icons/interface/product");
 const react_1 = require("react");
 const locale_1 = require("../../../locale");
-const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 function useLogoutItem({ onLogout }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    return (0, react_1.useMemo)(() => ({
-        beforeContent: (0, jsx_runtime_1.jsx)(product_1.ExitSVG, {}),
-        content: {
-            label: t('logout'),
+    return (0, react_1.useMemo)(() => [
+        {
+            beforeContent: (0, jsx_runtime_1.jsx)(product_1.ExitSVG, {}),
+            content: {
+                label: t('logout'),
+            },
+            onClick: onLogout,
+            'data-test-id': 'header__user-menu__logout',
         },
-        className: styles_module_scss_1.default.logoutItem,
-        onClick: onLogout,
-        'data-test-id': 'header__user-menu__logout',
-    }), [onLogout, t]);
+    ], [onLogout, t]);
 }

package/dist/cjs/components/UserMenu/hooks/useUserMenuItems.js

@@ -38,11 +38,11 @@ function useUserMenuItems({ profile, theme, onLogout, topItems = emptyArray_1.EM
         }
         pinTop = pinTop.concat(topItems);
         let pinBottom = bottomItems.concat(logoutItem);
+        if (isMobile && Boolean(settingItems?.length)) {
+            pinBottom = pinBottom.concat([DIVIDER_ITEM, ...settingItems]);
+        }
         // В шторке прокручивается всё меню, закреплять части незачем; разделитель над организациями добавляем сами
         if (isMobile) {
-            if (settingItems?.length) {
-                pinBottom = [...bottomItems, ...settingItems, DIVIDER_ITEM, logoutItem];
-            }
             return {
                 pinTop: [],
                 items: withClose([...pinTop, DIVIDER_ITEM, ...organizationItems, ...pinBottom]),

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

@@ -1,16 +1,7 @@
-.userMenuDroplistTrigger{
-  display:inline-flex;
-}
-
 .userMenuDroplist{
   width:256px;
 }
 
 .profileSettingsIcon{
-  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
-}
-
-.logoutItem span,
-.logoutItem svg{
-  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }

package/dist/cjs/constants.d.ts

@@ -26,3 +26,4 @@ export declare const TEST_IDS: {
         readonly root: "header__breadcrumbs";
     };
 };
+export declare const BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS: number[];

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_IDS = void 0;
+exports.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
     headerLayout: {
         root: 'header-layout',
@@ -29,3 +29,5 @@ exports.TEST_IDS = {
         root: 'header__breadcrumbs',
     },
 };
+// Только mobile: в мастере bottomSheet панель открывается на всю высоту экрана.
+exports.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = [1];

package/dist/cjs/style.css

@@ -35,7 +35,7 @@
 
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .header[data-mobile] .top{
   padding:0;
@@ -146,7 +146,7 @@
   overflow:hidden;
   flex-shrink:1;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
   text-overflow:ellipsis;
   white-space:nowrap;
 }
@@ -223,7 +223,7 @@
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .subcategory[data-title-only]{
   padding:var(--sn-primitive-dimension-4, 4px);
@@ -270,7 +270,7 @@
 .subcategoryDescription{
   width:100%;
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 
 .subcategoryTitleDraggable{
@@ -312,7 +312,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -323,7 +323,7 @@
 .headerTitle{
   flex:1 0 0;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
 }
 
 .group{
@@ -338,7 +338,7 @@
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 .group[data-appear]{
   animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
@@ -353,7 +353,7 @@
 }
 .group[data-drag-preview] .header{
   cursor:grabbing;
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
@@ -384,7 +384,7 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border:none;
   border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   background-color:transparent;
   outline:none;
 }
@@ -491,11 +491,11 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;
@@ -577,8 +577,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }
 
 .emptyState{
@@ -590,7 +590,7 @@
 }
 
 .emptyText{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   text-align:center;
   white-space:pre-line;
 }
@@ -604,7 +604,7 @@
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 
 .header{
@@ -631,8 +631,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
-  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
 }
 
 .dropTarget{
@@ -772,7 +772,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 
 .menuBody{
@@ -798,7 +798,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .container[data-mobile]{
   gap:0;
@@ -810,17 +810,17 @@
   justify-content:flex-start;
 }
 .closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
-  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
 }
 .closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
 }
 
 .drawerMobile{
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4))) !important;
 }
 
 .scrollMobile{
@@ -949,21 +949,12 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
   color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
-  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
 }
-.userMenuDroplistTrigger{
-  display:inline-flex;
-}
-
 .userMenuDroplist{
   width:256px;
 }
 
 .profileSettingsIcon{
-  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
-}
-
-.logoutItem span,
-.logoutItem svg{
-  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }

package/dist/esm/components/HeaderLayout/styles.module.css

@@ -32,7 +32,7 @@
 
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .header[data-mobile] .top{
   padding:0;

package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css

@@ -44,7 +44,7 @@
   overflow:hidden;
   flex-shrink:1;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
   text-overflow:ellipsis;
   white-space:nowrap;
 }