@cloud-ru/ds-uikit-product-header 1.5.1 → 1.5.2-preview-0406cbd2.0

package/dist/cjs/locale/index.js

@@ -7,11 +7,11 @@ const HEADER_MESSAGES = (0, locale_1.defineMessages)({
         searchByServices: 'Search by services and their sections',
         services: 'Services',
         user: 'User',
-        logout: 'Log out',
+        logout: 'Log out of account',
         noData: 'No data',
         noDataFound: 'Nothing found',
         dragGroup: 'Drag group',
-        themeModeLabel: 'Theme',
+        themeModeLabel: 'Interface theme',
         themeModeLight: 'Light',
         themeModeDark: 'Dark',
         themeModeSystem: 'System',
@@ -35,11 +35,11 @@ const HEADER_MESSAGES = (0, locale_1.defineMessages)({
         searchByServices: 'Поиск по сервисам и их разделам',
         services: 'Сервисы',
         user: 'Пользователь',
-        logout: 'Выйти',
+        logout: 'Выйти из аккаунта',
         noData: 'Нет данных',
         noDataFound: 'Ничего не найдено',
         dragGroup: 'Перетащить группу',
-        themeModeLabel: 'Тема',
+        themeModeLabel: 'Тема интерфейса',
         themeModeLight: 'Светлая',
         themeModeDark: 'Тёмная',
         themeModeSystem: 'Системная',

package/dist/cjs/style.css

@@ -21,7 +21,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  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)));
 }
 
 .left{
@@ -38,6 +37,14 @@
   align-items:center;
   height:100%;
 }
+
+.header[data-mobile] .top{
+  padding:var(--sn-primitive-dimension-0, 0px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 .logoImg{
   width:auto;
   min-height:var(--sn-primitive-dimension-24, 24px);
@@ -76,6 +83,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;
@@ -104,6 +112,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }
@@ -158,6 +167,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
@@ -301,7 +311,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -324,6 +334,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   width:100%;
   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);
@@ -383,6 +394,12 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody:not([data-mobile]):not([data-subcategory-body]){
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.groupBody:not([data-mobile]):not([data-show-description]){
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 @container (width <= 728px){
   .groupBody:not([data-mobile]){
     grid-template-columns:repeat(2, minmax(auto, 1fr));
@@ -399,7 +416,7 @@
 }
 
 .decoration{
-  --highlight-border-width:1px;
+  --highlight-border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
   position:absolute;
   top:0;
   left:0;
@@ -590,16 +607,18 @@
 
 .listScrollInner{
   height:100%;
-  max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-8, 8px));
 }
 .listScrollInner[data-mobile]{
-  max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-40, 40px) + var(--sn-primitive-dimension-4, 4px)) * 6 + var(--sn-primitive-dimension-8, 8px));
 }
 
 .list{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
@@ -625,6 +644,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-8, 8px);
 }
@@ -705,13 +725,14 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
 .menu{
-  --snack-menu-header-height:40px;
+  --snack-menu-header-height:var(--sn-primitive-dimension-40, 40px);
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
@@ -743,19 +764,17 @@
   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)));
 }
+.container[data-mobile]{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 
 .closeButton{
   flex-grow:1;
   flex-shrink:1;
   justify-content:flex-start;
 }
-.densityScope{
-  display:contents;
-}
-
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
-  padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
 .rightContent{
@@ -773,6 +792,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-height:100%;
   margin-top:calc(var(--sn-primitive-dimension-40, 40px) + var(--sn-divider-anatomy-container-height, var(--sn-primitive-dimension-1, 1px)));
   padding:var(--sn-primitive-dimension-16, 16px);
@@ -784,17 +804,17 @@
   animation-fill-mode:forwards;
 }
 .wrapper[data-animation-type=fade-slide-up-right]{
-  transform:translate(-12px, 4px);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up-right;
 }
 .wrapper[data-animation-type=fade-slide-up]{
-  transform:translate(0, 4px);
+  transform:translate(0, var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up;
 }
 .wrapper[data-animation-type=slide-right]{
-  transform:translate(-12px, 0);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   animation-name:slide-right;
 }
 .wrapper[data-animation-type=fade-in]{
@@ -811,7 +831,7 @@
 }
 @keyframes fade-slide-up{
   0%{
-    transform:translate(0, 4px);
+    transform:translate(0, var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -821,7 +841,7 @@
 }
 @keyframes fade-slide-up-right{
   0%{
-    transform:translate(-12px, 4px);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -831,7 +851,7 @@
 }
 @keyframes slide-right{
   0%{
-    transform:translate(-12px, 0);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   }
   100%{
     transform:translate(0, 0);
@@ -851,7 +871,9 @@
 }
 .searchWrap:not([data-mobile]){
   flex:1 1 auto;
-  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+  box-sizing:border-box;
+  margin:0 var(--sn-primitive-dimension-4, 4px);
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
 }
 
 .search{
@@ -881,13 +903,15 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  box-sizing:border-box;
   width:var(--sn-primitive-dimension-24, 24px);
   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)));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  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)));
 }
 .userMenuDroplist{
-  width:272px;
+  width:256px;
 }
 
 .userMenuTrigger{

package/dist/esm/components/HeaderButton/HeaderButton.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
-import { useThemeClassnames } from '@cloud-ru/ds-theme';
 import { WithTooltip } from '@cloud-ru/ds-tooltip';
 import cn from 'classnames';
 import styles from './styles.module.css';
@@ -10,7 +9,6 @@ import styles from './styles.module.css';
  * остальное API `Button` и `Tooltip` передаётся как есть.
  */
 export function HeaderButton({ tooltip, isMobile, className, ...rest }) {
-    const compactThemeClassName = useThemeClassnames({ density: 'compact' });
     return (
     // FIXME: typescript ломается, если не указать tip явно
     //  пока не разбирался почему так
@@ -23,5 +21,5 @@ export function HeaderButton({ tooltip, isMobile, className, ...rest }) {
                 placement: 'bottom',
                 ...tooltip,
                 triggerClassName: styles.tooltipTrigger,
-            }, children: _jsx(Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: cn(styles.headerButton, compactThemeClassName, className) }) }));
+            }, children: _jsx(Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: cn(styles.headerButton, className) }) }));
 }

package/dist/esm/components/HeaderLayout/HeaderLayout.js

@@ -1,22 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { extractSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useRef } from 'react';
 import { TEST_IDS } from '../../constants.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import styles from './styles.module.css';
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
     const isMobile = useMobileLayout();
-    const headerRef = useRef(null);
-    const header = (_jsxs("header", { ref: headerRef, className: cn(styles.header, className), ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && _jsx("div", { className: styles.bottom, children: breadcrumbs })] }));
-    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
-    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
-    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
-    // и класс, поставленный поверх, проиграл бы их собственному.
-    if (isMobile) {
-        return (_jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, rootRef: headerRef, children: header }));
-    }
-    return header;
+    return (_jsxs("header", { className: cn(styles.header, className), "data-mobile": isMobile || undefined, ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu, isMobile && _jsx(Divider, { orientation: 'vertical' })] })), !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
 }

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

@@ -18,7 +18,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  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)));
 }
 
 .left{
@@ -34,4 +33,12 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   height:100%;
+}
+
+.header[data-mobile] .top{
+  padding:var(--sn-primitive-dimension-0, 0px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-0, 0px);
 }

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

@@ -36,6 +36,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;

package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -3,7 +3,6 @@ import { Button } from '@cloud-ru/ds-button';
 import { Card } from '@cloud-ru/ds-card';
 import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
 import { PromoTag, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
-import { useThemeClassnames } from '@cloud-ru/ds-theme';
 import { Typography } from '@cloud-ru/ds-typography';
 import cn from 'classnames';
 import { useCallback } from 'react';
@@ -12,11 +11,10 @@ import { MENU_BANNER_TEST_IDS } from './constants.js';
 import styles from './styles.module.css';
 export function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = headerLocale.useTranslations();
-    const compactThemeClassname = useThemeClassnames({ density: 'compact' });
     const handleClose = useCallback(e => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
+    return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: styles.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
 }

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

@@ -11,6 +11,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js

@@ -22,7 +22,7 @@ export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGrou
         startTransition(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { icon: _jsx(SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), _jsx(Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsModal, cancelButton: {
+    return (_jsxs("div", { className: styles.root, "data-mobile": isMobile || undefined, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { icon: _jsx(SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), _jsx(Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsModal, cancelButton: {
                                     label: t('close'),
                                     onClick: closeModal,
                                 }, content: _jsxs("div", { className: styles.settingsContent, children: [preferences.showGroupsColors && (_jsx(SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": TEST_IDS.settingsShowGroupsColorsSwitch })), _jsx(SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && (_jsx(HeaderButton, { icon: allGroupsExpanded ? _jsx(CollapseVerticalSVG, {}) : _jsx(ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -4,7 +4,7 @@ import { DraggableServiceCard } from '../../../../ServiceCard/index.js';
 import styles from '../styles.module.css';
 import { SubCategory } from './SubCategory/index.js';
 export function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
-    return (_jsx("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
+    return (_jsx("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: items.map(service => {
             if (service.hidden) {
                 return null;
             }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -31,10 +31,10 @@ export function SubCategory({ groupId, service, showDescription, isMobile, dragD
         return (_jsxs("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: [_jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
     }
     return (_jsx("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles.subcategoryAccordion, afterTitle: _jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
 }

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

@@ -27,7 +27,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -50,6 +50,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   width:100%;
   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);
@@ -109,6 +110,12 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody:not([data-mobile]):not([data-subcategory-body]){
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.groupBody:not([data-mobile]):not([data-show-description]){
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 @container (width <= 728px){
   .groupBody:not([data-mobile]){
     grid-template-columns:repeat(2, minmax(auto, 1fr));
@@ -125,7 +132,7 @@
 }
 
 .decoration{
-  --highlight-border-width:1px;
+  --highlight-border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
   position:absolute;
   top:0;
   left:0;

package/dist/esm/components/MainMenu/helperComponents/Favorites/Favorites.js

@@ -8,6 +8,7 @@ import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { useMemo } from 'react';
+import { useDesktopComfortClassName } from '../../../../hooks/useDesktopComfortClassName.js';
 import { headerLocale } from '../../../../locale/index.js';
 import { resolveInnerLinksByIds } from '../../utils/index.js';
 import { EmptyState, FavoritesItemsSkeleton, FavoritesSortable } from './components/index.js';
@@ -17,6 +18,7 @@ import { getCommonCardProps } from './utils.js';
 export function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
     const { t } = headerLocale.useTranslations();
     const loading = favorite.loading;
+    const comfortClassName = useDesktopComfortClassName();
     const [segment, setSegment] = useValueControl({
         value: favorite.segment,
         defaultValue: FAVORITES_SEGMENT.Favorites,
@@ -59,5 +61,5 @@ export function Favorites({ favorite, allServiceGroups, headerClassName, isMobil
                                     onChange: favorite.onChange(service.id),
                                 }, ...getCommonCardProps(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : (_jsx(FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
     })();
-    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'function', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'function', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

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

@@ -47,16 +47,18 @@
 
 .listScrollInner{
   height:100%;
-  max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-8, 8px));
 }
 .listScrollInner[data-mobile]{
-  max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-40, 40px) + var(--sn-primitive-dimension-4, 4px)) * 6 + var(--sn-primitive-dimension-8, 8px));
 }
 
 .list{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
@@ -82,6 +84,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-8, 8px);
 }

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

@@ -56,13 +56,14 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
 .menu{
-  --snack-menu-header-height:40px;
+  --snack-menu-header-height:var(--sn-primitive-dimension-40, 40px);
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;

package/dist/esm/components/MainMenu/helperComponents/MenuHeaderBrand/MenuHeaderBrand.d.ts

@@ -3,5 +3,6 @@ export type MenuHeaderBrandProps = {
     logo?: ReactNode;
     onClose(): void;
     className?: string;
+    isMobile?: boolean;
 };
-export declare function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuHeaderBrand({ logo, onClose, className, isMobile }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/MenuHeaderBrand/MenuHeaderBrand.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { headerLocale } from '../../../../locale/index.js';
 import { HeaderButton } from '../../../HeaderButton/index.js';
 import styles from './styles.module.css';
-export function MenuHeaderBrand({ logo, onClose, className }) {
+export function MenuHeaderBrand({ logo, onClose, className, isMobile }) {
     const { t } = headerLocale.useTranslations();
-    return (_jsxs("div", { className: cn(styles.container, className), children: [logo, _jsx(Divider, { orientation: 'vertical' }), _jsx(HeaderButton, { className: styles.closeButton, onClick: onClose, icon: _jsx(ChevronLeftSVG, {}), label: t('close') })] }));
+    return (_jsxs("div", { className: cn(styles.container, className), "data-mobile": isMobile || undefined, children: [logo, _jsx(Divider, { orientation: 'vertical' }), _jsx(HeaderButton, { className: styles.closeButton, onClick: onClose, icon: _jsx(ChevronLeftSVG, {}), label: t('close') })] }));
 }

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

@@ -5,6 +5,9 @@
   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)));
 }
+.container[data-mobile]{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 
 .closeButton{
   flex-grow:1;

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo } from 'react';
 import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants.js';
@@ -34,9 +33,5 @@ export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems,
     const handleClose = useCallback(() => {
         setOpen(false);
     }, [setOpen]);
-    return (
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
-    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
-    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.rightContent, 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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
+    return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader, isMobile: true }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.rightContent, 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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

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

@@ -1,10 +1,5 @@
-.densityScope{
-  display:contents;
-}
-
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
-  padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
 .rightContent{
@@ -22,6 +17,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-height:100%;
   margin-top:calc(var(--sn-primitive-dimension-40, 40px) + var(--sn-divider-anatomy-container-height, var(--sn-primitive-dimension-1, 1px)));
   padding:var(--sn-primitive-dimension-16, 16px);