@gravity-ui/navigation 6.5.1 → 7.0.0-beta.0

package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gn-composite-bar__menu-group":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gnCompositeBarMenuGroup":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gn-composite-bar__menu-group-header":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gnCompositeBarMenuGroupHeader":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gn-composite-bar__menu-group-nested-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gnCompositeBarMenuGroupNestedItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gn-composite-bar__menu-group-nested-list-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gnCompositeBarMenuGroupNestedListItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gn-composite-bar__menu-group-nested-connector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gnCompositeBarMenuGroupNestedConnector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gn-composite-bar__menu-group-nested-connector_spine-active":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gnCompositeBarMenuGroupNestedConnectorSpineActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gn-composite-bar__menu-group-nested-tree-svg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gnCompositeBarMenuGroupNestedTreeSvg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gn-composite-bar__menu-group-nested-tree-svg_active":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gnCompositeBarMenuGroupNestedTreeSvgActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gn-composite-bar__menu-group-nested-row-inner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe","gnCompositeBarMenuGroupNestedRowInner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe"};
+var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gn-composite-bar_inline-groups":"CompositeBar-module__gn-composite-bar_inline-groups___BsraQ","gnCompositeBarInlineGroups":"CompositeBar-module__gn-composite-bar_inline-groups___BsraQ","gn-composite-bar_quick-access":"CompositeBar-module__gn-composite-bar_quick-access___zNlSe","gnCompositeBarQuickAccess":"CompositeBar-module__gn-composite-bar_quick-access___zNlSe","gn-composite-bar__menu-group":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gnCompositeBarMenuGroup":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gn-composite-bar__menu-group-header":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gnCompositeBarMenuGroupHeader":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gn-composite-bar__menu-group-nested-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gnCompositeBarMenuGroupNestedItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gn-composite-bar__menu-group-nested-connector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gnCompositeBarMenuGroupNestedConnector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gn-composite-bar__menu-group-nested-list-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gnCompositeBarMenuGroupNestedListItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gn-composite-bar__menu-group-nested-connector_spine-active":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gnCompositeBarMenuGroupNestedConnectorSpineActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gn-composite-bar__menu-group-nested-tree-svg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gnCompositeBarMenuGroupNestedTreeSvg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gn-composite-bar__menu-group-nested-tree-svg_active":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gnCompositeBarMenuGroupNestedTreeSvgActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gn-composite-bar__menu-group-nested-row-inner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe","gnCompositeBarMenuGroupNestedRowInner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe"};
 
 export { styles as default };
 //# sourceMappingURL=CompositeBar.module.scss.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.css

@@ -1 +1 @@
-.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:38px;--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:"";height:100%;position:absolute;width:100%;z-index:-1}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}
+.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:var(--_--gn-aside-header-density-icon-background-size,38px);--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:var(--_--gn-aside-header-density-item-collapsed-radius,7px);box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:"";height:100%;position:absolute;width:100%;z-index:-1}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}

package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js

@@ -4,13 +4,15 @@ import { Portal } from '@gravity-ui/uikit';
 import debounceFn from 'lodash/debounce';
 import { createBlock, block } from '../../../../utils/cn.js';
 import { useAsideHeaderInnerContext } from '../../../AsideHeaderContext.js';
+import { getAsideHeaderDensityCssProperties } from '../../../density.js';
 import styles from './HighlightedItem.module.scss.js';
 
 const b = createBlock('composite-bar-highlighted-item', styles);
 const bGlobal = block('composite-bar-highlighted-item');
 const DEBOUNCE_TIME = 200;
 const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
-    const { openModalSubscriber } = useAsideHeaderInnerContext();
+    const { menuDensity, openModalSubscriber } = useAsideHeaderInnerContext();
+    const densityCssProperties = getAsideHeaderDensityCssProperties(menuDensity);
     const [position, setPosition] = useState({
         top: 0,
         left: 0,
@@ -46,7 +48,7 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
         return null;
     }
     return (React__default.createElement(Portal, null,
-        React__default.createElement("div", { className: `${b()} ${bGlobal()}`, style: position, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
+        React__default.createElement("div", { className: `${b()} ${bGlobal()}`, style: Object.assign(Object.assign({}, densityCssProperties), position), onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
             React__default.createElement("div", { className: b('icon') }, iconNode))));
 };
 HighlightedItem.displayName = 'HighlightedItem';

package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightedItem.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Portal} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {block, createBlock} from '../../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../../AsideHeaderContext';\n\nimport styles from './HighlightedItem.module.scss';\n\nconst b = createBlock('composite-bar-highlighted-item', styles);\nconst bGlobal = block('composite-bar-highlighted-item');\n\ninterface ItemInnerProps {\n    iconRef: React.RefObject<HTMLDivElement>;\n    iconNode: React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    onClickCapture?: (event: React.SyntheticEvent) => void;\n}\n\nconst DEBOUNCE_TIME = 200;\n\nexport const HighlightedItem: React.FC<ItemInnerProps> = ({\n    iconRef,\n    iconNode,\n    onClick,\n    onClickCapture,\n}: ItemInnerProps) => {\n    const {openModalSubscriber} = useAsideHeaderInnerContext();\n    const [position, setPosition] = useState({\n        top: 0,\n        left: 0,\n        width: 0,\n        height: 0,\n    });\n    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);\n\n    const handleResizeDebounced = useMemo(\n        () =>\n            debounceFn(\n                () => {\n                    const {\n                        top = 0,\n                        left = 0,\n                        width = 0,\n                        height = 0,\n                    } = iconRef?.current?.getBoundingClientRect() || {};\n\n                    setPosition({\n                        top: top + window.scrollY,\n                        left: left + window.scrollX,\n                        width,\n                        height,\n                    });\n                },\n                DEBOUNCE_TIME,\n                {leading: true},\n            ),\n        [iconRef],\n    );\n\n    const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);\n\n    useEffect(() => {\n        if (!isModalOpen) {\n            return undefined;\n        }\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [handleResize, isModalOpen]);\n\n    openModalSubscriber?.((open: boolean) => {\n        setIsModalOpen(open);\n    });\n\n    if (!iconNode || !isModalOpen) {\n        return null;\n    }\n\n    return (\n        <Portal>\n            <div\n                className={`${b()} ${bGlobal()}`}\n                style={position}\n                onClick={onClick}\n                onClickCapture={onClickCapture}\n                data-toast\n            >\n                <div className={b('icon')}>{iconNode}</div>\n            </div>\n        </Portal>\n    );\n};\n\nHighlightedItem.displayName = 'HighlightedItem';\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,CAAC,GAAG,WAAW,CAAC,gCAAgC,EAAE,MAAM,CAAC;AAC/D,MAAM,OAAO,GAAG,KAAK,CAAC,gCAAgC,CAAC;AASvD,MAAM,aAAa,GAAG,GAAG;AAElB,MAAM,eAAe,GAA6B,CAAC,EACtD,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,GACD,KAAI;AACjB,IAAA,MAAM,EAAC,mBAAmB,EAAC,GAAG,0BAA0B,EAAE;AAC1D,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC;AACrC,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;AACZ,KAAA,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAG,OAAO,CACjC,MACI,UAAU,CACN,MAAK;;AACD,QAAA,MAAM,EACF,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,GACb,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,qBAAqB,EAAE,KAAI,EAAE;AAEnD,QAAA,WAAW,CAAC;AACR,YAAA,GAAG,EAAE,GAAG,GAAG,MAAM,CAAC,OAAO;AACzB,YAAA,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,OAAO;YAC3B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;AACN,KAAC,EACD,aAAa,EACb,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,EACL,CAAC,OAAO,CAAC,CACZ;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,SAAS;;AAGpB,QAAA,YAAY,EAAE;AAEd,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAE/C,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACtD,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE/B,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAG,CAAC,IAAa,KAAI;QACpC,cAAc,CAAC,IAAI,CAAC;AACxB,KAAC,CAAC;AAEF,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC3B,QAAA,OAAO,IAAI;;IAGf,QACIA,6BAAC,MAAM,EAAA,IAAA;QACHA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAG,EAAA,CAAC,EAAE,CAAI,CAAA,EAAA,OAAO,EAAE,CAAE,CAAA,EAChC,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA;AAG9B,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAG,EAAA,QAAQ,CAAO,CACzC,CACD;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"HighlightedItem.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Portal} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {block, createBlock} from '../../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../../AsideHeaderContext';\nimport {getAsideHeaderDensityCssProperties} from '../../../density';\n\nimport styles from './HighlightedItem.module.scss';\n\nconst b = createBlock('composite-bar-highlighted-item', styles);\nconst bGlobal = block('composite-bar-highlighted-item');\n\ninterface ItemInnerProps {\n    iconRef: React.RefObject<HTMLDivElement>;\n    iconNode: React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    onClickCapture?: (event: React.SyntheticEvent) => void;\n}\n\nconst DEBOUNCE_TIME = 200;\n\nexport const HighlightedItem: React.FC<ItemInnerProps> = ({\n    iconRef,\n    iconNode,\n    onClick,\n    onClickCapture,\n}: ItemInnerProps) => {\n    const {menuDensity, openModalSubscriber} = useAsideHeaderInnerContext();\n    const densityCssProperties = getAsideHeaderDensityCssProperties(menuDensity);\n    const [position, setPosition] = useState({\n        top: 0,\n        left: 0,\n        width: 0,\n        height: 0,\n    });\n    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);\n\n    const handleResizeDebounced = useMemo(\n        () =>\n            debounceFn(\n                () => {\n                    const {\n                        top = 0,\n                        left = 0,\n                        width = 0,\n                        height = 0,\n                    } = iconRef?.current?.getBoundingClientRect() || {};\n\n                    setPosition({\n                        top: top + window.scrollY,\n                        left: left + window.scrollX,\n                        width,\n                        height,\n                    });\n                },\n                DEBOUNCE_TIME,\n                {leading: true},\n            ),\n        [iconRef],\n    );\n\n    const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);\n\n    useEffect(() => {\n        if (!isModalOpen) {\n            return undefined;\n        }\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [handleResize, isModalOpen]);\n\n    openModalSubscriber?.((open: boolean) => {\n        setIsModalOpen(open);\n    });\n\n    if (!iconNode || !isModalOpen) {\n        return null;\n    }\n\n    return (\n        <Portal>\n            <div\n                className={`${b()} ${bGlobal()}`}\n                style={{...densityCssProperties, ...position}}\n                onClick={onClick}\n                onClickCapture={onClickCapture}\n                data-toast\n            >\n                <div className={b('icon')}>{iconNode}</div>\n            </div>\n        </Portal>\n    );\n};\n\nHighlightedItem.displayName = 'HighlightedItem';\n"],"names":["React"],"mappings":";;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,gCAAgC,EAAE,MAAM,CAAC;AAC/D,MAAM,OAAO,GAAG,KAAK,CAAC,gCAAgC,CAAC;AASvD,MAAM,aAAa,GAAG,GAAG;AAElB,MAAM,eAAe,GAA6B,CAAC,EACtD,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,GACD,KAAI;IACjB,MAAM,EAAC,WAAW,EAAE,mBAAmB,EAAC,GAAG,0BAA0B,EAAE;AACvE,IAAA,MAAM,oBAAoB,GAAG,kCAAkC,CAAC,WAAW,CAAC;AAC5E,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC;AACrC,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;AACZ,KAAA,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAG,OAAO,CACjC,MACI,UAAU,CACN,MAAK;;AACD,QAAA,MAAM,EACF,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,GACb,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,qBAAqB,EAAE,KAAI,EAAE;AAEnD,QAAA,WAAW,CAAC;AACR,YAAA,GAAG,EAAE,GAAG,GAAG,MAAM,CAAC,OAAO;AACzB,YAAA,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,OAAO;YAC3B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;AACN,KAAC,EACD,aAAa,EACb,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,EACL,CAAC,OAAO,CAAC,CACZ;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,SAAS;;AAGpB,QAAA,YAAY,EAAE;AAEd,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAE/C,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACtD,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE/B,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAG,CAAC,IAAa,KAAI;QACpC,cAAc,CAAC,IAAI,CAAC;AACxB,KAAC,CAAC;AAEF,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC3B,QAAA,OAAO,IAAI;;IAGf,QACIA,6BAAC,MAAM,EAAA,IAAA;QACHA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAG,EAAA,CAAC,EAAE,CAAI,CAAA,EAAA,OAAO,EAAE,CAAA,CAAE,EAChC,KAAK,kCAAM,oBAAoB,CAAA,EAAK,QAAQ,CAC5C,EAAA,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA;AAG9B,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAG,EAAA,QAAQ,CAAO,CACzC,CACD;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.css

@@ -1 +1,33 @@
-.Item-module__gn-composite-bar-item___-pkx5{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item___-pkx5:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item___-pkx5{--gn-composite-bar-item-action-size:36px;--gn-aside-header-item-expanded-radius:8px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-action-color:var(--g-color-base-float);--_--item-action-color-hover:var(--g-color-base-float-hover);--_--item-chevron-padding-right:var(--g-spacing-1);--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);align-items:center;cursor:pointer;display:flex;height:100%;margin-inline:auto;min-width:0;padding:0;width:100%}.Item-module__gn-composite-bar-item___-pkx5.gn-footer-item.Item-module__gn-composite-bar-item_type_regular___wkhsT{--gn-aside-header-item-icon-background-size:32px;height:32px}.Item-module__gn-composite-bar-item___-pkx5.gn-footer-item_regular-size.Item-module__gn-composite-bar-item_type_regular___wkhsT{--gn-aside-header-item-icon-background-size:38px;height:40px}.Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .Item-module__g-action-tooltip__description___UsHcG{color:var(--g-color-text-light-primary);margin-block-start:0}.Item-module__gn-composite-bar-item__icon-place___jPKRh{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--_--item-height,40px)}.Item-module__gn-composite-bar-item__title___wj5L5{align-items:center;display:flex;margin:0 var(--g-spacing-4) 0 var(--g-spacing-2);overflow:hidden}.Item-module__gn-composite-bar-item__title-text___cILJo{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin:0 10px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item__collapse-item___Up6IX:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{--_--item-icon-color:var(--g-color-text-misc);align-items:center;cursor:pointer;display:flex;height:100%;padding:0 16px;width:100%}.Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX .Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin-right:0}.Item-module__gn-composite-bar-item__menu-divider___hkm-Z{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to{padding:4px 0}.Item-module__gn-composite-bar-item__link___McAVN{align-items:center;display:flex;height:100%;width:100%}.Item-module__gn-composite-bar-item__link___McAVN, .Item-module__gn-composite-bar-item__link___McAVN:active, .Item-module__gn-composite-bar-item__link___McAVN:focus, .Item-module__gn-composite-bar-item__link___McAVN:hover, .Item-module__gn-composite-bar-item__link___McAVN:visited{color:inherit;outline:none;text-decoration:none}.Item-module__gn-composite-bar-item__btn-icon___SwT65{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.Item-module__gn-composite-bar-item_type_action___2jxO8{background:var(--gn-aside-header-item-action-color,var(--_--item-action-color));border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin:0 10px 8px;transition:transform .1s ease-out,background-color .15s linear}.Item-module__gn-composite-bar-item_type_action___2jxO8:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.Item-module__gn-composite-bar-item_type_action___2jxO8:hover{background-color:var(--gn-aside-header-item-action-color-hover,var(--_--item-action-color-hover))}.Item-module__gn-composite-bar-item_type_action___2jxO8:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__icon-place___jPKRh{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_type_action___2jxO8.gn-footer-item{width:calc(100% - 20px)}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i{align-items:center;box-sizing:border-box;display:flex;height:30px;padding:8px 12px}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin:0;margin-block:0}.Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR{margin-left:10px}.Item-module__gn-composite-bar-item__icon-popover___euq-P{align-items:center;border-radius:12px;box-sizing:border-box;display:flex;padding:var(--g-spacing-2)}.Item-module__gn-composite-bar-item__icon-popover_item-type_action___ep-D3{margin-left:10px}.Item-module__gn-composite-bar-item__popup-content___oys3t{border-radius:var(--gn-aside-header-item-expanded-radius);box-sizing:border-box}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class]{background-color:transparent}.Item-module__gn-composite-bar-item__popup-title___2-tGd{color:var(--g-color-text-primary);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);padding:var(--g-spacing-1) var(--g-spacing-2) 6px}.Item-module__gn-composite-bar-item__popup-item___MPgm3{box-sizing:border-box}.Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_type_regular___wkhsT{border-radius:var(--gn-aside-header-item-expanded-radius);height:32px}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__icon-place___jPKRh{display:none}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{margin-left:var(--g-spacing-4)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM).Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item__group-header-row___m-4WB{--gn-aside-header-item-expanded-radius:8px;--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-chevron-padding-right:var(--g-spacing-1);display:flex;height:100%;width:100%}.Item-module__gn-composite-bar-item__group-header-row___m-4WB:hover{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item_with-chevron-control___5F9O3{align-self:stretch;flex:1 1 auto;height:auto;min-width:0;width:auto}.Item-module__gn-composite-bar-item___-pkx5.Item-module__gn-composite-bar-item_with-chevron-control___5F9O3:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:transparent}.Item-module__gn-composite-bar-item__chevron___ZZ-vf{align-items:center;align-self:stretch;display:flex;flex-shrink:0;margin-left:auto;padding-left:var(--g-spacing-2);padding-right:var(--gn-aside-header-item-chevron-padding-right,var(--_--item-chevron-padding-right))}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC{background:transparent;border:none;color:var(--g-color-text-secondary);cursor:pointer;padding-bottom:0;padding-top:0}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC:hover{color:var(--g-color-text-primary)}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC:focus-visible{box-shadow:inset 0 0 0 2px var(--g-color-line-misc);outline:none}.Item-module__gn-composite-bar-item_compact___PVTeM .Item-module__gn-composite-bar-item__chevron___ZZ-vf{align-self:auto;margin:0;padding:0;position:absolute;right:8px}.Item-module__gn-composite-bar-item_compact___PVTeM .Item-module__gn-composite-bar-item__chevron___ZZ-vf svg{stroke:currentColor;stroke-width:1}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__title___wj5L5{margin:0}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.Item-module__gn-composite-bar-item_compact___PVTeM:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.Item-module__gn-composite-bar-item_compact___PVTeM:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}
+.Item-module__gn-composite-bar-item___-pkx5{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item___-pkx5:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item___-pkx5{--gn-composite-bar-item-action-size:var(--_--gn-aside-header-density-action-size,36px);--_--item-expanded-radius:var(
+      --_--gn-aside-header-density-item-expanded-radius,8px
+  );--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:var(--_--gn-aside-header-density-item-collapsed-radius,7px);--_--item-action-color:var(--g-color-base-float);--_--item-action-color-hover:var(--g-color-base-float-hover);--_--item-chevron-padding-right:var(--g-spacing-1);--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);--_--row-surface-color:transparent;align-items:center;cursor:pointer;display:flex;height:100%;isolation:isolate;margin-inline:auto;min-width:0;padding:0;position:relative;width:100%}.Item-module__gn-composite-bar-item___-pkx5.gn-footer-item.Item-module__gn-composite-bar-item_type_regular___wkhsT{--gn-aside-header-item-icon-background-size:var(
+      --_--gn-aside-header-density-footer-item-height,32px
+  );height:var(--_--gn-aside-header-density-footer-item-height,32px)}.Item-module__gn-composite-bar-item___-pkx5.gn-footer-item_regular-size.Item-module__gn-composite-bar-item_type_regular___wkhsT{--gn-aside-header-item-icon-background-size:38px;height:40px}.Item-module__gn-composite-bar-item__surface___iqsAp{background-color:var(--_--row-surface-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute;z-index:-1}.Item-module__gn-composite-bar-item__surface___iqsAp[data-gn-aside-current-ghost-suppressed], .Item-module__gn-composite-bar-item__surface___iqsAp[data-gn-aside-current-suppressed]{--_--row-surface-color:transparent}.Item-module__gn-composite-bar-item_menu-popup-row___pX55k{background-color:var(--_--row-surface-color)}.Item-module__gn-composite-bar-item_compact___PVTeM .Item-module__gn-composite-bar-item__surface___iqsAp{border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));inset:auto;inset-inline-start:calc((var(--_--gn-aside-header-density-item-height, 40px) - var(--gn-aside-header-item-icon-background-size, var(--_--item-icon-background-size)))/2);top:calc((100% - var(--gn-aside-header-item-icon-background-size, var(--_--item-icon-background-size)))/2);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .Item-module__g-action-tooltip__description___UsHcG{color:var(--g-color-text-light-primary);margin-block-start:0}.Item-module__gn-composite-bar-item__icon-place___jPKRh{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--_--gn-aside-header-density-item-height,40px)}.Item-module__gn-composite-bar-item__title___wj5L5{align-items:center;display:flex;margin:0 var(--_--gn-aside-header-density-item-title-gap-end,var(--g-spacing-4)) 0 var(--_--gn-aside-header-density-item-title-gap,var(--g-spacing-2));overflow:hidden}.Item-module__gn-composite-bar-item__title-text___cILJo{-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.Item-module__gn-composite-bar-item__title-text_lines_2___iBySH{-webkit-line-clamp:2;line-clamp:2}.Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin:0 10px}.Item-module__gn-composite-bar-item__interactive-row___JXbmT{align-self:flex-start;height:100%;min-width:0;position:relative;width:100%}.Item-module__gn-composite-bar-item__interactive-row___JXbmT>:first-child{min-width:0;width:100%}.Item-module__gn-composite-bar-item__quick-access-pin-slot___j9wtv{align-items:center;display:flex;inset-block:0;inset-inline-end:var(--g-spacing-1);justify-content:center;opacity:0;pointer-events:none;position:absolute;transition:none;visibility:hidden;width:24px;z-index:1}.Item-module__gn-composite-bar-item__quick-access-pin-slot_suppressed___3yKbX{opacity:0;pointer-events:none;visibility:hidden}.Item-module__gn-composite-bar-item_with-quick-access-pin___yPnvd .Item-module__gn-composite-bar-item__title___wj5L5{margin-inline-end:calc(24px + var(--g-spacing-1)*2)}.Item-module__gn-composite-bar-item__interactive-row___JXbmT:hover .Item-module__gn-composite-bar-item__quick-access-pin-slot___j9wtv:not(.Item-module__gn-composite-bar-item__quick-access-pin-slot_suppressed___3yKbX){opacity:1;pointer-events:auto;transition:opacity .15s ease var(--_--gn-aside-header-quick-access-pin-hover-delay,.2s),visibility 0s linear var(--_--gn-aside-header-quick-access-pin-hover-delay,.2s);visibility:visible}.Item-module__gn-composite-bar-item__interactive-row___JXbmT:focus-within .Item-module__gn-composite-bar-item__quick-access-pin-slot___j9wtv:not(.Item-module__gn-composite-bar-item__quick-access-pin-slot_suppressed___3yKbX){opacity:1;pointer-events:auto;transition:none;visibility:visible}.Item-module__gn-composite-bar-item__interactive-row___JXbmT:hover .Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM).Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-current-background-color-hover,var(
+          --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
+      )
+  );border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item__interactive-row___JXbmT:hover .Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):not(.Item-module__gn-composite-bar-item_current___NT2hB).Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover)
+  )}.Item-module__gn-composite-bar-item__quick-access-pin___WLaB0{color:var(--g-color-text-complementary);flex-shrink:0}.Item-module__gn-composite-bar-item__quick-access-pin_pinned___Q9mQK{color:var(--g-color-text-secondary)}.Item-module__gn-composite-bar-item__quick-access-pin___WLaB0:hover{color:var(--g-color-text-primary)}.Item-module__gn-composite-bar-item__quick-access-pin___WLaB0 .g-button__icon{color:inherit}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item__collapse-item___Up6IX:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{--_--item-icon-color:var(--g-color-text-misc);align-items:center;cursor:pointer;display:flex;height:100%;padding:0 16px;width:100%}.Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX .Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin-right:0}.Item-module__gn-composite-bar-item__menu-divider___hkm-Z{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to{padding:4px 0}.Item-module__gn-composite-bar-item__link___McAVN{align-items:center;display:flex;height:100%;width:100%}.Item-module__gn-composite-bar-item__link___McAVN, .Item-module__gn-composite-bar-item__link___McAVN:active, .Item-module__gn-composite-bar-item__link___McAVN:focus, .Item-module__gn-composite-bar-item__link___McAVN:hover, .Item-module__gn-composite-bar-item__link___McAVN:visited{color:inherit;outline:none;text-decoration:none}.Item-module__gn-composite-bar-item_title-lines_2___u8Dcn .Item-module__gn-composite-bar-item__icon-place___jPKRh{align-items:flex-start;align-self:flex-start}.Item-module__gn-composite-bar-item_title-lines_2___u8Dcn .Item-module__gn-composite-bar-item__chevron___ZZ-vf, .Item-module__gn-composite-bar-item_title-lines_2___u8Dcn .Item-module__gn-composite-bar-item__icon-place___jPKRh, .Item-module__gn-composite-bar-item_title-lines_2___u8Dcn .Item-module__gn-composite-bar-item__title___wj5L5{padding-block:var(--g-spacing-1)}.Item-module__gn-composite-bar-item__btn-icon___SwT65{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.Item-module__gn-composite-bar-item_type_action___2jxO8{--_--row-surface-color:var(
+      --gn-aside-header-item-action-color,var(--_--item-action-color)
+  );border-radius:var(--gn-composite-bar-item-action-size);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin:0 10px 8px;transition:transform .1s ease-out,background-color .15s linear}.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__surface___iqsAp{box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);transition:background-color .15s linear}.Item-module__gn-composite-bar-item_type_action___2jxO8:focus-visible .Item-module__gn-composite-bar-item__surface___iqsAp{box-shadow:0 0 0 2px var(--g-color-line-misc)}.Item-module__gn-composite-bar-item_type_action___2jxO8:hover{--_--row-surface-color:var(
+      --gn-aside-header-item-action-color-hover,var(--_--item-action-color-hover)
+  )}.Item-module__gn-composite-bar-item_type_action___2jxO8:active{transform:scale(.96);transition:none}.Item-module__gn-composite-bar-item_type_action___2jxO8:active .Item-module__gn-composite-bar-item__surface___iqsAp{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transition:none}.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__icon-place___jPKRh{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_type_action___2jxO8.gn-footer-item{width:calc(100% - 20px)}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i{align-items:center;box-sizing:border-box;display:flex;height:30px;padding:8px 12px}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin:0;margin-block:0}.Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR{margin-left:10px}.Item-module__gn-composite-bar-item__icon-popover___euq-P{--_--popup-min-width:200px;--_--popup-row-padding-inline:var(--g-spacing-3);--_--popup-icon-place-width:var(--_--gn-aside-header-density-icon-size,18px);--_--floating-surface-box-shadow-default:0 0 0 1px var(--g-color-line-generic-solid),0 3px 10px 0 var(--g-color-sfx-shadow),0 8px 20px -4px var(--g-color-sfx-shadow)}.Item-module__gn-composite-bar-item__icon-popover___euq-P.g-root_theme_dark, .Item-module__gn-composite-bar-item__icon-popover___euq-P.g-root_theme_dark-hc, .g-root_theme_dark .Item-module__gn-composite-bar-item__icon-popover___euq-P, .g-root_theme_dark-hc .Item-module__gn-composite-bar-item__icon-popover___euq-P{--_--floating-surface-box-shadow-default:0 0 0 1px var(--g-color-line-generic-solid),0 4px 12px 0 var(--g-color-sfx-veil),0 10px 24px -2px var(--g-color-sfx-shadow-heavy)}.Item-module__gn-composite-bar-item__icon-popover___euq-P{align-items:center;border-radius:var(--_--popup-border-radius);box-shadow:var(--gn-aside-header-floating-surface-box-shadow,var(--_--floating-surface-box-shadow-default));box-sizing:border-box;display:flex;min-width:var(--_--popup-min-width);overflow:hidden;padding:var(--_--popup-padding)}.Item-module__gn-composite-bar-item__icon-popover_single-label___mc-tU{--_--popup-min-width:0;--_--popup-row-padding-inline:var(--g-spacing-2);box-shadow:var(--gn-aside-header-floating-surface-box-shadow,0 0 0 1px var(--g-color-line-generic-solid),0 2px 8px 0 var(--g-color-sfx-shadow))}.Item-module__gn-composite-bar-item__icon-popover_item-type_action___ep-D3{margin-left:10px}.Item-module__gn-composite-bar-item__popup-content___oys3t{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--gn-aside-header-density-item-expanded-radius,8px));box-sizing:border-box;width:100%}.Item-module__gn-composite-bar-item__popup-content_single-label___done-{overflow:hidden}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class]{background:none;box-sizing:border-box;overflow:visible;padding-block-end:1px;position:relative}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class].g-list__item_active, .Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class].g-list__item_active.g-list__item_selected, .Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class].g-list__item_selected{background:none}.Item-module__gn-composite-bar-item__popup-title___2-tGd{box-sizing:border-box;color:var(--g-color-text-secondary);display:block;font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);font-weight:var(--g-text-subheader-font-weight);height:var(--_--popup-title-height);line-height:var(--g-text-body-1-line-height);overflow:hidden;padding:6px var(--_--popup-row-padding-inline);text-overflow:ellipsis;white-space:nowrap}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{flex:1 1 auto;margin:0 var(--_--gn-aside-header-density-item-title-gap-end,var(--g-spacing-4)) 0 var(--_--popup-row-padding-inline);min-width:0}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__popup-item___MPgm3:not(.Item-module__gn-composite-bar-item_hide-icon___bf5h3){padding-inline-start:var(--_--popup-row-padding-inline)}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__popup-item___MPgm3:not(.Item-module__gn-composite-bar-item_hide-icon___bf5h3) .Item-module__gn-composite-bar-item__icon-place___jPKRh{width:var(--_--popup-icon-place-width)}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__popup-item___MPgm3:not(.Item-module__gn-composite-bar-item_hide-icon___bf5h3) .Item-module__gn-composite-bar-item__title___wj5L5{flex:1 1 auto;margin-left:var(--g-spacing-2);min-width:0}.Item-module__gn-composite-bar-item__popup-item___MPgm3{box-sizing:border-box}.Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_type_regular___wkhsT{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--gn-aside-header-density-item-expanded-radius,8px));height:32px}.Item-module__gn-composite-bar-item__popup-content_single-label___done- .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class]{align-items:stretch}.Item-module__gn-composite-bar-item__popup-content_single-label___done- .Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_type_regular___wkhsT{border-radius:var(--_--popup-border-radius);height:100%;min-height:0}.Item-module__gn-composite-bar-item__popup-content_single-label___done- .Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{margin:0 var(--_--popup-row-padding-inline)}.Item-module__gn-composite-bar-item__popup-content_single-label___done- .Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title-text___cILJo{-webkit-line-clamp:unset;line-clamp:unset;display:block;white-space:nowrap}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__icon-place___jPKRh{display:none}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{margin-left:var(--g-spacing-4)}.Item-module__gn-composite-bar-item_menu-group-nested___CVzJD{padding-inline-start:calc(var(--_--gn-aside-header-density-item-height, 40px)/2 + var(--_--menu-group-tree-connector-width, 16px)/2 + var(--g-spacing-1))}.Item-module__gn-composite-bar-item_menu-group-nested___CVzJD.Item-module__gn-composite-bar-item_hide-icon___bf5h3{padding-inline-start:calc(var(--_--gn-aside-header-density-item-height, 40px) + var(--_--gn-aside-header-density-item-title-gap, var(--g-spacing-2)))}.Item-module__gn-composite-bar-item_menu-group-nested___CVzJD.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{margin-left:0}.Item-module__gn-composite-bar-item_menu-group-nested___CVzJD .Item-module__gn-composite-bar-item__title___wj5L5{flex:1 1 auto;min-width:0}.Item-module__gn-composite-bar-item_menu-group-nested___CVzJD.Item-module__gn-composite-bar-item_title-lines_2___u8Dcn{--_--menu-group-tree-connector-hook-inset-block:calc(var(--g-spacing-1) + var(--_--gn-aside-header-density-icon-size, 18px)/2)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM).Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
+  );border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-current-background-color-hover,var(
+          --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
+      )
+  );border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover)
+  );border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item__group-header-row___m-4WB{--_--item-expanded-radius:var(
+      --_--gn-aside-header-density-item-expanded-radius,8px
+  );--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-selected-background-color:var(--g-color-base-selection);--_--item-chevron-padding-right:var(--g-spacing-1);display:flex;height:100%;width:100%}.Item-module__gn-composite-bar-item__group-header-row___m-4WB:hover{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item__group-header-row_current___YYm8y{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.Item-module__gn-composite-bar-item__group-header-row_current___YYm8y:hover{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)))}.Item-module__gn-composite-bar-item___-pkx5.Item-module__gn-composite-bar-item_with-chevron-control___5F9O3.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:transparent}.Item-module__gn-composite-bar-item_with-chevron-control___5F9O3{align-self:stretch;flex:1 1 auto;height:auto;min-width:0;width:auto}.Item-module__gn-composite-bar-item___-pkx5.Item-module__gn-composite-bar-item_with-chevron-control___5F9O3:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:transparent}.Item-module__gn-composite-bar-item__chevron___ZZ-vf{align-items:center;align-self:stretch;display:flex;flex-shrink:0;margin-left:auto;padding-left:var(--g-spacing-2);padding-right:var(--gn-aside-header-item-chevron-padding-right,var(--_--item-chevron-padding-right))}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC{background:transparent;border:none;color:var(--g-color-text-secondary);cursor:pointer;padding-bottom:0;padding-top:0}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC:hover{color:var(--g-color-text-primary)}.Item-module__gn-composite-bar-item__chevron_interactive___jmUhC:focus-visible{box-shadow:inset 0 0 0 2px var(--g-color-line-misc);outline:none}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8{margin-inline:auto;width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__surface___iqsAp{border-radius:inherit;height:auto;inset:0;width:auto}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__title___wj5L5{margin:0}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
+  )}.Item-module__gn-composite-bar-item_compact___PVTeM:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-current-background-color-hover,var(
+          --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
+      )
+  )}.Item-module__gn-composite-bar-item_compact___PVTeM:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{--_--row-surface-color:var(
+      --gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover)
+  )}

package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js

@@ -1,14 +1,20 @@
 import './Item.css';
 import React__default from 'react';
-import { ChevronUp, ChevronDown, ChevronRight } from '@gravity-ui/icons';
-import { Icon, Popup } from '@gravity-ui/uikit';
-import { ASIDE_HEADER_ICON_SIZE } from '../../../../constants.js';
+import { ChevronDown, ChevronRight } from '@gravity-ui/icons';
+import { setRef, Icon, Popup } from '@gravity-ui/uikit';
 import { createBlock } from '../../../../utils/cn.js';
+import { useSafeAsideHeaderContext } from '../../../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig } from '../../../density.js';
 import i18n from '../../../i18n/index.js';
+import { isQuickAccessPinEligible } from '../../../quickAccess.js';
+import { AsideDivider } from '../../AsideDivider.js';
+import { CURRENT_IDS_ATTRIBUTE } from '../../PageLayout/currentIndicatorDom.js';
 import { HighlightedItem } from '../HighlightedItem/HighlightedItem.js';
-import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID } from '../constants.js';
+import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID, COMPOSITE_BAR_ITEM_ID_ATTRIBUTE } from '../constants.js';
+import { getItemPresentationCurrentIds } from '../presentationCurrent.js';
 import { ItemPopup } from './ItemPopup.js';
 import { ItemPopupNestContext } from './ItemPopupNestContext.js';
+import { ItemQuickAccessPin } from './ItemQuickAccessPin.js';
 import { renderItemTitle } from './renderItemTitle.js';
 import styles from './Item.module.scss.js';
 
@@ -16,7 +22,33 @@ const b = createBlock('composite-bar-item', styles);
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = { mainAxis: 14 };
 const CHEVRON_SIZE = 16;
-const CHEVRON_SIZE_COMPACT = 10;
+function shouldShowMenuPopup({ type, popupItems, collapsedItem, inlineGroupHeader, groupHeaderExpanded, }) {
+    return (type !== 'divider' &&
+        Boolean(popupItems === null || popupItems === undefined ? undefined : popupItems.length) &&
+        (collapsedItem || !inlineGroupHeader || !groupHeaderExpanded));
+}
+function shouldShowLabelPopup({ isDivider, compact, hasPopupItems, disabled, }) {
+    return !isDivider && Boolean(compact) && !hasPopupItems && !disabled;
+}
+function shouldShowChevron({ compact, inlineGroupHeader, hasPopupItems, }) {
+    if (inlineGroupHeader) {
+        return !compact;
+    }
+    return !compact && hasPopupItems;
+}
+function getExpandedTitleLines({ type, compact, menuPopupRow, titleLines, }) {
+    if (type !== ITEM_TYPE_REGULAR || compact || menuPopupRow) {
+        return 1;
+    }
+    return titleLines;
+}
+function shouldShowQuickAccessPin({ enabled, compact, popupItems, item, onToggle, }) {
+    return (Boolean(enabled) &&
+        !compact &&
+        !(popupItems === null || popupItems === undefined ? undefined : popupItems.length) &&
+        isQuickAccessPinEligible(item) &&
+        typeof onToggle === 'function');
+}
 function getChevronFallbackLabel(expanded) {
     return expanded ? i18n('button_collapse') : i18n('button_expand');
 }
@@ -27,24 +59,54 @@ function resolveItemAriaLabel(ariaProps, titleLabel) {
 function resolveAnchorRef(anchorRef, fallback) {
     return (anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) ? anchorRef : fallback;
 }
-function shouldShowFlyoutChevron(hasPopupItems, compact, hideCompactChevron) {
-    return hasPopupItems && !(compact && hideCompactChevron);
-}
 const Item = (props) => {
-    const { className, popupItemClassName, menuPopupItems, menuPopupTitle, groupHeaderExpanded, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onPopupItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, hideIcon = false, stopClickPropagation = false, menuGroupNestedTreeConnector, menuItemAriaProps, onGroupHeaderChevronClick, hideCompactChevron, } = props;
-    const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React__default.useState(false);
+    const { className, popupItemClassName, menuPopupItems, menuPopupTitle, groupHeaderExpanded, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onPopupItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, hideIcon = false, menuPopupHideIcon, menuPopupNestedHideIcon, stopClickPropagation = false, menuGroupNestedTreeConnector, menuGroupNested, menuItemAriaProps, menuPopupRow, suppressCurrentHighlight = false, suppressCurrentItemIds, enableQuickAccessPin, quickAccessPinItem: quickAccessPinItemProp, onToggleQuickAccess, onGroupHeaderChevronClick, } = props;
+    const [labelPopupOpen, setLabelPopupOpen] = React__default.useState(false);
+    const [menuPopupOpen, setMenuPopupOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
+    const mergedRowRef = React__default.useCallback((element) => {
+        setRef(ref, element);
+        setRef(props.rowRef, element);
+    }, [props.rowRef]);
     const anchorRef = resolveAnchorRef(anchoreRefProp, ref);
     const highlightedRef = React__default.useRef(null);
+    const interactiveRowRef = React__default.useRef(null);
     const type = props.type || ITEM_TYPE_REGULAR;
     const icon = props.icon;
-    const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
+    const asideHeaderContext = useSafeAsideHeaderContext();
+    const defaultIconSize = getAsideHeaderDensityConfig(asideHeaderContext === null || asideHeaderContext === undefined ? undefined : asideHeaderContext.menuDensity).iconSize;
+    const iconSize = props.iconSize || defaultIconSize;
     const iconQa = props.iconQa;
     const collapsedItem = props.id === COLLAPSE_ITEM_ID;
     const inlineGroupHeader = groupHeaderExpanded !== undefined;
     const resolvedMenuPopupItems = menuPopupItems !== null && menuPopupItems !== undefined ? menuPopupItems : props.compositeBarMenuPopupItems;
     const resolvedMenuPopupTitle = menuPopupTitle !== null && menuPopupTitle !== undefined ? menuPopupTitle : props.compositeBarMenuPopupTitle;
-    const current = props.current || (resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.some((item) => item.current)) || false;
+    const currentIds = suppressCurrentHighlight
+        ? []
+        : getItemPresentationCurrentIds(props, {
+            suppressCurrentItemIds,
+            popupItems: resolvedMenuPopupItems,
+        });
+    const current = currentIds.length > 0;
+    const currentIdsMetadata = !menuPopupRow && currentIds.length ? JSON.stringify(currentIds) : undefined;
+    const quickAccessPinItem = quickAccessPinItemProp !== null && quickAccessPinItemProp !== undefined ? quickAccessPinItemProp : props;
+    const showQuickAccessPin = shouldShowQuickAccessPin({
+        enabled: enableQuickAccessPin,
+        compact,
+        popupItems: resolvedMenuPopupItems,
+        item: quickAccessPinItem,
+        onToggle: onToggleQuickAccess,
+    });
+    const [quickAccessPinSuppressed, setQuickAccessPinSuppressed] = React__default.useState(false);
+    const handleToggleQuickAccess = React__default.useCallback((event) => {
+        onToggleQuickAccess === null || onToggleQuickAccess === undefined ? undefined : onToggleQuickAccess(quickAccessPinItem, event);
+        // Pointer clicks should not leave the control under the cursor after the row moves.
+        // Keep keyboard-triggered controls visible and focused.
+        if (event.detail > 0) {
+            setQuickAccessPinSuppressed(true);
+            event.currentTarget.blur();
+        }
+    }, [onToggleQuickAccess, quickAccessPinItem]);
     const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
         var _a;
         if (event instanceof MouseEvent &&
@@ -53,29 +115,51 @@ const Item = (props) => {
             return;
         }
         if (newOpen) {
-            setCompactNavPopoverOpen(false);
+            setLabelPopupOpen(false);
+            setMenuPopupOpen(false);
         }
         onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
     }, [onOpenChangePopup]);
     const isDivider = type === 'divider';
-    const showMenuPopup = !isDivider &&
-        Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) &&
-        (collapsedItem || !inlineGroupHeader);
+    const showMenuPopup = shouldShowMenuPopup({
+        type,
+        popupItems: resolvedMenuPopupItems,
+        collapsedItem,
+        inlineGroupHeader,
+        groupHeaderExpanded,
+    });
+    const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';
+    const labelPopupAvailable = shouldShowLabelPopup({
+        isDivider,
+        compact,
+        hasPopupItems: Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length),
+        disabled: compactPopoverDisabled,
+    });
+    React__default.useEffect(() => {
+        if (!showMenuPopup)
+            setMenuPopupOpen(false);
+        if (!labelPopupAvailable)
+            setLabelPopupOpen(false);
+    }, [showMenuPopup, labelPopupAvailable]);
     const submenuNest = React__default.useContext(ItemPopupNestContext);
     React__default.useEffect(() => {
-        if (!submenuNest || !showMenuPopup || !compactNavPopoverOpen) {
+        if (!submenuNest || !showMenuPopup || !menuPopupOpen) {
             return undefined;
         }
         submenuNest.registerNestedOpen(1);
         return () => {
             submenuNest.registerNestedOpen(-1);
         };
-    }, [submenuNest, showMenuPopup, compactNavPopoverOpen]);
+    }, [submenuNest, showMenuPopup, menuPopupOpen]);
     if (isDivider) {
-        return React__default.createElement("div", { className: b('menu-divider') });
+        return (React__default.createElement(AsideDivider, { as: "div", className: b('menu-divider'), transitionId: `item/${props.id}` }));
     }
-    const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';
-    const showFlyoutChevron = shouldShowFlyoutChevron(Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length), compact, hideCompactChevron);
+    const expandedTitleLines = getExpandedTitleLines({
+        type,
+        compact,
+        menuPopupRow,
+        titleLines: props.titleLines,
+    });
     const makeIconNode = (iconEl, withCompactPopover = true) => {
         if (!compact) {
             return iconEl;
@@ -84,10 +168,10 @@ const Item = (props) => {
         if (!withCompactPopover || (resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length)) {
             return iconButton;
         }
-        return (React__default.createElement(ItemPopup, { items: [props], open: compactNavPopoverOpen, onOpenChange: (nextOpen) => {
+        return (React__default.createElement(ItemPopup, { items: [quickAccessPinItem], variant: "label", highlightCurrentItem: false, open: labelPopupOpen, onOpenChange: (nextOpen) => {
                 if (nextOpen && compactPopoverDisabled)
                     return;
-                setCompactNavPopoverOpen(nextOpen);
+                setLabelPopupOpen(nextOpen);
             }, hideIcon: true, itemClassName: popupItemClassName, disabled: compactPopoverDisabled, type: type, collapsed: compact, 
             /**
              * No `onPopupItemClick` here on purpose: this popup renders the item itself
@@ -96,14 +180,20 @@ const Item = (props) => {
              * the AsideHeader handler; the direct path would pass the wrapper as
              * `item.onItemClick` and trigger the handler twice (toggling All pages back).
              */
-            onItemClick: onItemClick }, iconButton));
+            onItemClick: onItemClick, suppressCurrentItemIds: suppressCurrentItemIds }, iconButton));
     };
     const ariaLabel = typeof title === 'string' ? title : undefined;
     const resolvedAriaLabel = resolveItemAriaLabel(menuItemAriaProps, ariaLabel);
+    const showSurface = !menuPopupRow && [ITEM_TYPE_REGULAR, 'action'].includes(type);
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
         var _a;
         const wrappedByItemWrapper = typeof itemWrapper === 'function';
-        const chevronClick = inlineGroupHeader ? onGroupHeaderChevronClick : undefined;
+        const showChevron = shouldShowChevron({
+            compact,
+            inlineGroupHeader,
+            hasPopupItems: Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length),
+        });
+        const chevronClick = showChevron && inlineGroupHeader ? onGroupHeaderChevronClick : undefined;
         /* With a sibling chevron control, the wrapper becomes the outer box of the row,
            so the external className (outer layout) is applied to it instead of the row. */
         const rowClassName = b({
@@ -111,41 +201,51 @@ const Item = (props) => {
             current,
             compact,
             'hide-icon': hideIcon,
+            'menu-group-nested': menuGroupNested,
+            'menu-popup-row': menuPopupRow,
+            'with-quick-access-pin': showQuickAccessPin,
+            'title-lines': expandedTitleLines === null || expandedTitleLines === undefined ? undefined : expandedTitleLines.toString(),
             'with-chevron-control': Boolean(chevronClick),
         }, chevronClick ? undefined : className);
         const handleRowClick = (event) => {
+            var _a;
             if (compact && !collapsedItem && !showMenuPopup && !current) {
-                setCompactNavPopoverOpen(false);
+                setLabelPopupOpen(false);
+            }
+            if (event.detail > 0) {
+                const activeElement = event.currentTarget.ownerDocument.activeElement;
+                if (activeElement instanceof HTMLElement &&
+                    ((_a = interactiveRowRef.current) === null || _a === undefined ? undefined : _a.contains(activeElement))) {
+                    activeElement.blur();
+                }
             }
             onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, collapsedItem, event);
             if (stopClickPropagation) {
                 event.stopPropagation();
             }
         };
-        const chevronSize = compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE;
         let chevronNode = null;
         let chevronControl = null;
         if (chevronClick) {
-            chevronControl = (React__default.createElement("button", { type: "button", className: b('chevron', { interactive: true }), "aria-label": resolvedAriaLabel !== null && resolvedAriaLabel !== undefined ? resolvedAriaLabel : getChevronFallbackLabel(groupHeaderExpanded), "aria-expanded": groupHeaderExpanded, onClick: (event) => {
+            chevronControl = (React__default.createElement("button", { type: "button", className: b('chevron', { interactive: true }), "aria-label": [getChevronFallbackLabel(groupHeaderExpanded), resolvedAriaLabel]
+                    .filter(Boolean)
+                    .join(' '), "aria-expanded": groupHeaderExpanded, onClick: (event) => {
                     event.stopPropagation();
                     chevronClick(event);
                 } },
-                React__default.createElement(Icon, { data: groupHeaderExpanded ? ChevronUp : ChevronDown, size: chevronSize })));
+                React__default.createElement(Icon, { data: groupHeaderExpanded ? ChevronDown : ChevronRight, size: CHEVRON_SIZE })));
         }
-        else if (inlineGroupHeader) {
+        else if (showChevron) {
             chevronNode = (React__default.createElement("div", { className: b('chevron') },
-                React__default.createElement(Icon, { data: groupHeaderExpanded ? ChevronUp : ChevronDown, size: chevronSize })));
-        }
-        else if (showFlyoutChevron) {
-            chevronNode = (React__default.createElement("div", { className: b('chevron') },
-                React__default.createElement(Icon, { data: ChevronRight, size: chevronSize })));
+                React__default.createElement(Icon, { data: groupHeaderExpanded ? ChevronDown : ChevronRight, size: CHEVRON_SIZE })));
         }
         const rowChildren = (React__default.createElement(React__default.Fragment, null,
+            showSurface && (React__default.createElement("span", { className: b('surface'), "data-gn-aside-part": "surface", "aria-hidden": true })),
             menuGroupNestedTreeConnector,
-            React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
-            React__default.createElement("div", { className: b('title'), title: ariaLabel }, titleEl),
+            React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef, "data-gn-aside-part": "icon" }, makeIconNode(iconEl)),
+            React__default.createElement("div", { className: b('title'), "data-gn-aside-part": "title", title: ariaLabel }, titleEl),
             chevronNode));
-        const rowEventProps = Object.assign(Object.assign({}, (menuItemAriaProps !== null && menuItemAriaProps !== undefined ? menuItemAriaProps : {})), { className: rowClassName, 'data-type': type, 'data-qa': qa, 'aria-label': resolvedAriaLabel, onClick: handleRowClick, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+        const rowEventProps = Object.assign(Object.assign({}, (menuItemAriaProps !== null && menuItemAriaProps !== undefined ? menuItemAriaProps : {})), { className: rowClassName, 'data-type': type, 'data-qa': qa, [COMPOSITE_BAR_ITEM_ID_ATTRIBUTE]: props.id, [CURRENT_IDS_ATTRIBUTE]: currentIdsMetadata, 'data-gn-aside-nested': menuGroupNested ? '' : undefined, 'aria-label': resolvedAriaLabel, onClick: handleRowClick, onClickCapture: onItemClickCapture, onMouseEnter: () => {
                 if (!compact) {
                     onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
                 }
@@ -156,40 +256,55 @@ const Item = (props) => {
             } });
         let tagNode;
         if (href) {
-            tagNode = (React__default.createElement("a", Object.assign({}, rowEventProps, { href: href, ref: ref }), rowChildren));
+            tagNode = (React__default.createElement("a", Object.assign({}, rowEventProps, { href: href, ref: mergedRowRef }), rowChildren));
         }
         else if (wrappedByItemWrapper) {
-            tagNode = (React__default.createElement("div", Object.assign({}, rowEventProps, { role: (_a = menuItemAriaProps === null || menuItemAriaProps === undefined ? undefined : menuItemAriaProps.role) !== null && _a !== undefined ? _a : 'button', ref: ref }), rowChildren));
+            tagNode = (React__default.createElement("div", Object.assign({}, rowEventProps, { role: (_a = menuItemAriaProps === null || menuItemAriaProps === undefined ? undefined : menuItemAriaProps.role) !== null && _a !== undefined ? _a : 'button', ref: mergedRowRef }), rowChildren));
         }
         else {
-            tagNode = (React__default.createElement("button", Object.assign({}, rowEventProps, { ref: ref }), rowChildren));
+            tagNode = (React__default.createElement("button", Object.assign({}, rowEventProps, { ref: mergedRowRef }), rowChildren));
         }
         if (chevronControl) {
-            tagNode = (React__default.createElement("div", { className: b('group-header-row', className) },
+            tagNode = (React__default.createElement("div", { className: b('group-header-row', { current }, className) },
                 tagNode,
                 chevronControl));
         }
         const expandedMenuRows = resolvedMenuPopupItems;
-        const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: resolvedMenuPopupTitle, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onPopupItemClick: onPopupItemClick, onItemClick: onItemClick }, tagNode)) : (tagNode);
+        const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: resolvedMenuPopupTitle, open: menuPopupOpen, itemClassName: popupItemClassName, hideIcon: menuPopupHideIcon, nestedPopupHideIcon: menuPopupNestedHideIcon, onOpenChange: setMenuPopupOpen, collapsed: collapsedItem ? true : compact, onPopupItemClick: onPopupItemClick, onItemClick: onItemClick, enableQuickAccessPin: enableQuickAccessPin, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressCurrentItemIds }, tagNode)) : (tagNode);
         const createdNode = (React__default.createElement(React__default.Fragment, null,
             wrappedTagNode,
             renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
         return createdNode;
     };
+    const wrapWithQuickAccessPin = (rowNode) => {
+        if (!showQuickAccessPin) {
+            return rowNode;
+        }
+        return (React__default.createElement("div", { ref: interactiveRowRef, className: b('interactive-row', { 'menu-popup': menuPopupRow }), onMouseLeave: () => setQuickAccessPinSuppressed(false) },
+            rowNode,
+            React__default.createElement("span", { className: b('quick-access-pin-slot', {
+                    suppressed: quickAccessPinSuppressed,
+                }) },
+                React__default.createElement(ItemQuickAccessPin, { quickAccess: quickAccessPinItem.quickAccess, onToggle: handleToggleQuickAccess }))));
+    };
     const iconNode = hideIcon || !icon ? null : (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b('icon') }));
-    const titleNode = renderItemTitle({ title, rightAdornment });
+    const titleNode = renderItemTitle({
+        title,
+        rightAdornment,
+        titleLines: expandedTitleLines,
+    });
     const params = { icon: iconNode, title: titleNode };
     let highlightedNode = null;
     let node;
     const opts = { compact: Boolean(compact), collapsed: false, item: props, ref };
     if (typeof itemWrapper === 'function') {
-        node = itemWrapper(params, makeNode, opts);
+        node = wrapWithQuickAccessPin(itemWrapper(params, makeNode, opts));
         highlightedNode =
             bringForward &&
                 itemWrapper(params, ({ icon: iconEl }) => makeIconNode(iconEl, false), opts);
     }
     else {
-        node = makeNode(params);
+        node = wrapWithQuickAccessPin(makeNode(params));
         highlightedNode = bringForward && makeIconNode(iconNode, false);
     }
     return (React__default.createElement(React__default.Fragment, null,