@bitrix24/b24ui-nuxt

const orientation = [ "horizontal", "vertical" ] as const export default { "slots": { "root": "relative flex [&>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)]", "list": "isolate min-w-0", "label": "w-full h-[22px] overflow-hidden opacity-70 text-(length:--ui-font-size-sm)", "item": "min-w-0", "link": "min-w-[38px] max-w-full p-0 m-0 group relative cursor-pointer w-full flex items-center gap-[2px] font-normal text-lg focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0", "linkLeadingIcon": "shrink-0 size-[26px]", "linkLeadingAvatar": "shrink-0", "linkLeadingAvatarSize": "xs", "linkLeadingHint": "inline-flex m-0 absolute -top-[5px] left-[8px] text-(length:--ui-font-size-4xs) leading-[8px] font-semibold text-(--b24ui-typography-description-color) uppercase ml-px", "linkLeadingBadge": "inline-flex m-0 absolute", "linkLeadingBadgeSize": "xs", "linkTrailing": "group inline-flex mt-[2px] items-center ", "linkTrailingIcon": "text-(--ui-color-design-plain-na-content-icon) shrink-0", "linkLabel": "truncate -mt-px", "linkLabelWrapper": "flex items-center justify-between rtl:flex-row-reverse", "linkLabelExternalIcon": "inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)", "childList": "isolate", "childLabel": "", "childItem": "h-[36px] mt-(--menu-item-block-stack-space)", "childLink": "group relative size-full flex flex-row rtl:flex-row-reverse items-center transition-colors text-start", "childLinkWrapper": "min-w-0 flex-1 flex flex-row items-center justify-start rtl:justify-end gap-0.5", "childLinkIcon": "size-[18px] shrink-0", "childLinkHint": "inline-flex m-0 absolute -top-[2px] left-[24px] text-(length:--ui-font-size-4xs) leading-[8px] font-semibold text-(--b24ui-typography-description-color) uppercase ml-px", "childLinkBadge": "inline-flex m-0", "childLinkBadgeSize": "xs", "childLinkLabel": "truncate ms-[2px] -mt-px", "childLinkLabelExternalIcon": "inline-block size-4 text-(--ui-color-design-plain-content-icon-secondary)", "separator": "h-px bg-(--leftmenu-bg-divider) my-[16px]", "popoverWrapper": "px-0 py-(--menu-popup-padding)", "viewportWrapper": "absolute top-[53px] left-0 flex w-full", "viewport": "light relative overflow-hidden w-full bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rounded-(--popup-window-border-radius) will-change-[opacity] [&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))] transition-[width,height] duration-200 origin-[top_center] z-[1]", "content": "" }, "variants": { "orientation": { "horizontal": { "root": "relative h-full items-center justify-between", "list": "flex items-center gap-x-1 h-full", "item": "empty:hidden", "link": "menu-item-horizontal h-[32px] min-h-[32px] px-[10px] border border-(--menu-item-background) hover:border-(--ui-color-design-plain-na-focused-stroke) data-[state=open]:bg-(--ui-color-design-plain-na-focused-stroke)", "linkTrailingIcon": "size-[16px]", "linkLeadingBadge": "-top-[6px] -right-[14px] -translate-x-1/2", "linkLabelWrapper": "gap-[4px]", "childList": "grid px-0 py-(--menu-popup-padding)", "childLink": "px-[18px] min-w-[195px] whitespace-nowrap font-[family-name:var(--ui-font-family-primary)] text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover)", "childLinkLabel": "", "content": "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-transparent" }, "vertical": { "root": "flex-col w-full ps-(--menu-items-block-padding-x) rtl:pe-(--menu-items-block-padding-x)", "list": "flex flex-col", "item": "mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke)", "link": "menu-item-vertical h-[38px] min-h-[38px] p-[6px] flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70", "linkLeadingIcon": "", "linkTrailingIcon": "size-[20px] group-data-[state=open]:rotate-180 transition-transform duration-200", "linkLeadingBadge": "-top-[4px] left-[24px] -translate-x-1/2", "linkLabelWrapper": "relative", "childList": "", "childLink": "px-[18px] min-w-[195px] whitespace-nowrap font-[family-name:var(--ui-font-family-primary)] text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover)", "childLabel": "w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)" } }, "active": { "true": { "childLink": "text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)", "childLinkIcon": "text-(--ui-color-accent-main-primary)" }, "false": { "linkLeadingIcon": "text-(--ui-color-design-plain-content-icon-secondary)", "childLinkIcon": "text-(--ui-color-design-plain-content-icon-secondary) group-hover:text-(--ui-color-accent-main-primary)" } }, "disabled": { "true": { "link": "cursor-not-allowed opacity-75" } }, "level": { "true": "" }, "collapsed": { "true": "" } }, "compoundVariants": [ { "orientation": "horizontal" as typeof orientation[number], "class": { "childList": "", "content": "w-[240px]" } }, { "orientation": "vertical" as typeof orientation[number], "collapsed": false, "class": { "item": "data-[state=open]:bg-(--leftmenu-group-bg)", "childList": "", "childItem": "", "content": "motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden", "linkLabel": "ms-[9px]" } }, { "orientation": "vertical" as typeof orientation[number], "collapsed": true, "class": { "childList": "grid px-0 py-(--menu-popup-padding)" } }, { "orientation": "vertical" as typeof orientation[number], "collapsed": false, "class": { "link": "collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight)" } }, { "disabled": false, "active": false, "class": { "link": "transition-colors", "linkLeadingIcon": "group-hover:text-(--ui-color-design-selection-content-icon)" } }, { "active": true, "class": { "link": "leading-9 text-(--menu-item-color-active) bg-(--menu-item-background-active)" } }, { "active": true, "orientation": "horizontal" as typeof orientation[number], "class": { "link": "menu-item-horizontal-active border-(--menu-item-border)" } }, { "active": true, "orientation": "vertical" as typeof orientation[number], "class": { "link": "menu-item-vertical-active" } } ], "defaultVariants": {} }