@veracity/vui 2.31.0 → 2.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -54,4 +54,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/button/button.tsx

@@ -54,6 +54,21 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
     color: #91ffba;
     border-color-left: #91ffba;
   }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus,
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus-visible,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus-visible {
+    box-shadow: none;
+    outline: none;
+    border-bottom: 0 solid transparent;
+  }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus,
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus-visible,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus-visible {
+    transition: border-bottom 0s linear;
+    border-bottom: 3px solid #d3eef8;
+  }
 `
 
 const useButtonStyles = (mergedProps: any, variant: any) => {

package/src/footer/footer.tsx

@@ -94,7 +94,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 {applicationLinks?.map((link, index) => (
                   <Box flex={{ xs: '0 0 100%', sm: '0 0 auto' }} key={index}>
                     {link.items && (
-                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="lg" {...rest}>
+                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="sm" {...rest}>
                         <Menu.Button
                           as={Link}
                           className="vui-footerLink-trigger"
@@ -157,7 +157,13 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                       aria-label={link.text}
                       fontWeight="demi"
                       href={link.url}
-                      iconLeft={<Link.Icon name={`brandCircle${link.text}`} radius="50%" size="xs" />}
+                      iconLeft={
+                        <Link.Icon
+                          name={`${link.text === 'Twitter' ? 'brandX' + link.text + 'Solid' : 'brandCircle' + link.text}`}
+                          radius="50%"
+                          size="xs"
+                        />
+                      }
                       isExternal
                       key={index}
                       mr={1}

package/src/header/loggedInHeader.tsx

@@ -58,7 +58,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
             <RenderOnScreen minWidth="sm">
               <Header.Divider mr={2} />
             </RenderOnScreen>
-            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
+            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl} />
           </>
         )}
         {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}

package/src/header/loggedOutHeader.tsx

@@ -44,7 +44,7 @@ export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) =>
             <RenderOnScreen minWidth="sm">
               <Header.Divider mr={2} />
             </RenderOnScreen>
-            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
+            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl} />
           </>
         )}
 

package/src/icons/baseIcons/brand/brandXTwitter.ts

@@ -0,0 +1,6 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M24.0495 4H28.3451L18.9631 14.5889L30 29H21.3603L14.5884 20.262L6.8492 29H2.54759L12.5806 17.6719L2 4H10.8588L16.9735 11.9868L24.0495 4ZM22.5406 26.4639H24.9196L9.5628 6.40385H7.00739L22.5406 26.4639Z'],
+  name: 'brandXTwitter'
+} as IconDefinition

package/src/icons/baseIcons/brand/brandXTwitterSolid.ts

@@ -0,0 +1,6 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M4.57143 0C2.05 0 0 2.05 0 4.57143V27.4286C0 29.95 2.05 32 4.57143 32H27.4286C29.95 32 32 29.95 32 27.4286V4.57143C32 2.05 29.95 0 27.4286 0H4.57143ZM25.7929 6L18.3786 14.4714L27.1 26H20.2714L14.9286 19.0071L8.80714 26H5.41429L13.3429 16.9357L4.97857 6H11.9786L16.8143 12.3929L22.4 6H25.7929ZM23.0929 23.9714L10.9571 7.92143H8.93571L21.2071 23.9714H23.0929Z'],
+  name: 'brandXTwitterSolid'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated. Do not edit manually.
 // Run the icon transformation script to update.
 
-// BRAND icons (31)
+// BRAND icons (33)
 export { default as brandApplePay } from './brand/brandApplePay'
 export { default as brandBellship } from './brand/brandBellship'
 export { default as brandCcAmazonPay } from './brand/brandCcAmazonPay'
@@ -13,7 +13,6 @@ export { default as brandCcPaypal } from './brand/brandCcPaypal'
 export { default as brandCcVisa } from './brand/brandCcVisa'
 export { default as brandCircleFB } from './brand/brandCircleFB'
 export { default as brandCircleLinkedIn } from './brand/brandCircleLinkedIn'
-export { default as brandCircleTwitter } from './brand/brandCircleTwitter'
 export { default as brandCircleYoutube } from './brand/brandCircleYoutube'
 export { default as brandDNV } from './brand/brandDNV'
 export { default as brandDhl } from './brand/brandDhl'
@@ -29,9 +28,10 @@ export { default as brandMedium } from './brand/brandMedium'
 export { default as brandOsi } from './brand/brandOsi'
 export { default as brandPowerBi } from './brand/brandPowerBi'
 export { default as brandSlack } from './brand/brandSlack'
-export { default as brandTwitter } from './brand/brandTwitter'
 export { default as brandUps } from './brand/brandUps'
 export { default as brandVeracity } from './brand/brandVeracity'
+export { default as brandXTwitter } from './brand/brandXTwitter'
+export { default as brandXTwitterSolid } from './brand/brandXTwitterSolid'
 export { default as brandYoutube } from './brand/brandYoutube'
 // CONC icons (63)
 export { default as conAPI } from './conc/conAPI'
@@ -97,7 +97,7 @@ export { default as conUploadFile2 } from './conc/conUploadFile2'
 export { default as conVeracityAdapter } from './conc/conVeracityAdapter'
 export { default as conVesselConnect } from './conc/conVesselConnect'
 export { default as conWindmill } from './conc/conWindmill'
-// UI icons (373)
+// UI icons (374)
 export { default as uiAddressBook } from './ui/uiAddressBook'
 export { default as uiAddressCard } from './ui/uiAddressCard'
 export { default as uiAlignCenter } from './ui/uiAlignCenter'
@@ -390,6 +390,7 @@ export { default as uiShieldAlt } from './ui/uiShieldAlt'
 export { default as uiShieldCheck } from './ui/uiShieldCheck'
 export { default as uiShieldHalf } from './ui/uiShieldHalf'
 export { default as uiShieldKeyhole } from './ui/uiShieldKeyhole'
+export { default as uiShieldSolid } from './ui/uiShieldSolid'
 export { default as uiShip } from './ui/uiShip'
 export { default as uiShips } from './ui/uiShips'
 export { default as uiShoppingBasket } from './ui/uiShoppingBasket'

package/src/icons/baseIcons/types.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated. Do not edit manually.
 // Run the icon transformation script to update.
 
-// BRAND icons (31)
+// BRAND icons (33)
 export type BrandIcons =
   | 'brandApplePay'
   | 'brandBellship'
@@ -14,7 +14,6 @@ export type BrandIcons =
   | 'brandCcVisa'
   | 'brandCircleFB'
   | 'brandCircleLinkedIn'
-  | 'brandCircleTwitter'
   | 'brandCircleYoutube'
   | 'brandDNV'
   | 'brandDhl'
@@ -30,9 +29,10 @@ export type BrandIcons =
   | 'brandOsi'
   | 'brandPowerBi'
   | 'brandSlack'
-  | 'brandTwitter'
   | 'brandUps'
   | 'brandVeracity'
+  | 'brandXTwitter'
+  | 'brandXTwitterSolid'
   | 'brandYoutube'
 // CONC icons (63)
 export type ConcIcons =
@@ -99,7 +99,7 @@ export type ConcIcons =
   | 'conVeracityAdapter'
   | 'conVesselConnect'
   | 'conWindmill'
-// UI icons (373)
+// UI icons (374)
 export type UiIcons =
   | 'uiAddressBook'
   | 'uiAddressCard'
@@ -282,9 +282,9 @@ export type UiIcons =
   | 'uiFilePlus'
   | 'uiFilePowerpoint'
   | 'uiFileSignature'
+  | 'uiFileSolid'
   | 'uiFileSpreadsheet'
   | 'uiFileStandard'
-  | 'uiFileSolid'
   | 'uiFileVideo'
   | 'uiFileWord'
   | 'uiFilter'
@@ -393,6 +393,7 @@ export type UiIcons =
   | 'uiShieldCheck'
   | 'uiShieldHalf'
   | 'uiShieldKeyhole'
+  | 'uiShieldSolid'
   | 'uiShip'
   | 'uiShips'
   | 'uiShoppingBasket'

package/src/icons/baseIcons/ui/uiShield.ts

@@ -1,7 +1,7 @@
 import type { IconDefinition } from '../../types'
 
 export default {
-  details: [32, 32, [], '', 'M29.125 5.25C29.7083 5.45833 30.1667 5.8125 30.5 6.3125C30.8333 6.8125 31 7.375 31 8C31 10.625 30.6875 13.1458 30.0625 15.5625C29.4375 17.9375 28.6458 20 27.6875 21.75C26.7292 23.4583 25.6042 25.0208 24.3125 26.4375C23.0625 27.8125 21.8333 28.9167 20.625 29.75C19.4583 30.625 18.2917 31.2917 17.125 31.75C16.375 32.0833 15.625 32.0833 14.875 31.75C13.125 31.0417 11.4375 29.9792 9.8125 28.5625C8.22917 27.1875 6.77083 25.5208 5.4375 23.5625C4.10417 21.5625 3.02083 19.2083 2.1875 16.5C1.39583 13.7917 1 10.9583 1 8C1 7.75 1.02083 7.52083 1.0625 7.3125C1.14583 7.0625 1.22917 6.83333 1.3125 6.625C1.4375 6.41667 1.5625 6.22917 1.6875 6.0625C1.85417 5.89583 2.02083 5.75 2.1875 5.625C2.39583 5.45833 2.625 5.33333 2.875 5.25L14.875 0.25C15.2083 0.0833333 15.5833 0 16 0C16.4167 0 16.7917 0.0833333 17.125 0.25L29.125 5.25Z'],
+  details: [512, 512, [], '', 'M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM262.2 478.8c-3.9 1.6-8.3 1.6-12.3 0C152 440 48 304 48 128c0-6.5 3.9-12.3 9.8-14.8l192-80c3.8-1.6 8.3-1.7 12.3 0l192 80c6 2.5 9.8 8.3 9.8 14.8.1 176-103.9 312-201.7 350.8z'],
   name: 'uiShield',
   oldName: 'fasShield'
 } as IconDefinition

package/src/icons/baseIcons/ui/uiShieldSolid.ts

@@ -0,0 +1,7 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M29.125 5.25C29.7083 5.45833 30.1667 5.8125 30.5 6.3125C30.8333 6.8125 31 7.375 31 8C31 10.625 30.6875 13.1458 30.0625 15.5625C29.4375 17.9375 28.6458 20 27.6875 21.75C26.7292 23.4583 25.6042 25.0208 24.3125 26.4375C23.0625 27.8125 21.8333 28.9167 20.625 29.75C19.4583 30.625 18.2917 31.2917 17.125 31.75C16.375 32.0833 15.625 32.0833 14.875 31.75C13.125 31.0417 11.4375 29.9792 9.8125 28.5625C8.22917 27.1875 6.77083 25.5208 5.4375 23.5625C4.10417 21.5625 3.02083 19.2083 2.1875 16.5C1.39583 13.7917 1 10.9583 1 8C1 7.75 1.02083 7.52083 1.0625 7.3125C1.14583 7.0625 1.22917 6.83333 1.3125 6.625C1.4375 6.41667 1.5625 6.22917 1.6875 6.0625C1.85417 5.89583 2.02083 5.75 2.1875 5.625C2.39583 5.45833 2.625 5.33333 2.875 5.25L14.875 0.25C15.2083 0.0833333 15.5833 0 16 0C16.4167 0 16.7917 0.0833333 17.125 0.25L29.125 5.25Z'],
+  name: 'uiShieldSolid',
+  oldName: 'fasShield'
+} as IconDefinition

package/src/input/consts.ts

@@ -14,9 +14,9 @@ export const inputColors = {
 } as const
 
 export const stateIcons = {
-  error: 'falExclamationTriangle',
-  loading: 'fadSpinnerThird',
-  success: 'falCheck',
+  error: 'uiExclamationTriangle',
+  loading: 'uiSpinnerThird',
+  success: 'uiCheck',
 } as const
 
 export const inputStateMapping: InputStateMapping = {
@@ -24,7 +24,7 @@ export const inputStateMapping: InputStateMapping = {
     variant: 'red',
     iconProps: {
       color: inputColors.error,
-      icon: stateIcons.error,
+      name: stateIcons.error,
     },
   },
   loading: {
@@ -39,7 +39,7 @@ export const inputStateMapping: InputStateMapping = {
     variant: 'green',
     iconProps: {
       color: inputColors.success,
-      icon: stateIcons.success,
+      name: stateIcons.success,
     },
   },
 }

package/src/input/input.tsx

@@ -43,6 +43,12 @@ export const InputBase = styled.divBox`
     cursor: not-allowed;
     background-color: sandstone.79;
     border-color: sandstone.79;
+    & > .vui-icon {
+      color: sandstone.50;
+    }
+    & > .vui-icon > path {
+      fill: sandstone.50;
+    }
   }
 `
 

package/src/input/inputIcon.tsx

@@ -2,7 +2,6 @@ import { useStyleConfig, vui } from '../core'
 import type { IconProps } from '../icon'
 import Icon from '../icon'
 import { cs } from '../utils'
-import { inputColors } from './consts'
 import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
@@ -12,9 +11,7 @@ export const InputIcon = vui<'svg', IconProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder
-
-  return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
 InputIcon.displayName = 'InputIcon'

package/src/select/useSelect.tsx

@@ -36,7 +36,7 @@ export default function useSelect(props: UseSelectProps) {
     if (option.text && option.value) dynamicOptions.push(option)
   })
 
-  /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
+  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */
   const onChange = useCallbackRef((e: ChangeEvent) => {
     onChangeProp?.(e)
 

package/src/sidemenuV2/SidemenuItemContent.tsx

@@ -0,0 +1,75 @@
+import { memo } from 'react'
+
+import Badge from '../badge'
+import type { BadgeProps } from '../badge/badge.types'
+import Box from '../box'
+import type { IconProp } from '../icon'
+import Icon from '../icon'
+import T from '../t'
+
+export interface SidemenuItemContentProps {
+  icon?: IconProp
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  title?: string
+  isMenuExpanded?: boolean
+  isInPopover?: boolean
+  badge?: Pick<BadgeProps, 'text' | 'variant'>
+  badgeLinkUrl?: string
+}
+
+const SidemenuItemContent = memo<SidemenuItemContentProps>(
+  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
+    const iconBaseMarginLeft = 13 / 8
+    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8
+
+    if (isInPopover)
+      return (
+        <>
+          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
+            {title}
+          </T>
+          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
+            <Badge
+              {...badge}
+              data-link={btoa(badgeLinkUrl ?? '#')}
+              variant={badge.variant ?? 'subtleGreen'}
+              size="sm"
+              minW="32px"
+              fontSize="12px"
+              lineHeight="16px"
+              ml="10px"
+              mr="10px"
+            />
+          )}
+        </>
+      )
+
+    return (
+      <>
+        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w="20px" transition="margin 0.2s ease-in-out">
+          {icon && <Icon name={icon} size={iconSize} />}
+        </Box>
+        <T isTruncated size="sm" display="inline-block">
+          {title}
+        </T>
+        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
+          <Badge
+            {...badge}
+            data-link={btoa(badgeLinkUrl ?? '#')}
+            variant={badge.variant ?? 'subtleGreen'}
+            size="sm"
+            minW="32px"
+            fontSize="12px"
+            lineHeight="16px"
+            ml="10px"
+            mr="10px"
+          />
+        )}
+      </>
+    )
+  },
+)
+
+SidemenuItemContent.displayName = 'SidemenuItemContent'
+
+export default SidemenuItemContent

package/src/sidemenuV2/sidemenuItemV2.tsx

@@ -1,93 +1,19 @@
 import type { MouseEvent } from 'react'
-import { useEffect, useMemo, useCallback, memo } from 'react'
+import { useEffect, useMemo, useCallback } from 'react'
 
-import Badge from '../badge'
-import type { BadgeProps } from '../badge/badge.types'
 import Box from '../box'
 import Button from '../button'
 import type { VuiComponent } from '../core'
 import { omitThemingProps, styled, th, vui } from '../core'
-import Icon from '../icon'
-import type { IconProp } from '../icon'
 import Popover from '../popover'
-import T from '../t'
+import { colors } from '../theme'
+import Tooltip from '../tooltip'
 import { cs, generateMenuItemId } from '../utils'
 import { collapsedWidth, expandedWidth } from './consts'
+import SidemenuItemContent from './SidemenuItemContent'
 import type { SidemenuItemV2Props } from './sidemenuV2.types'
 import useSidemenuItem from './useSidemenuItem'
 
-// Internal component for sidemenu item content
-interface SidemenuItemContentProps {
-  icon?: IconProp
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  title: string
-  isMenuExpanded?: boolean
-  isInPopover?: boolean
-  badge?: Pick<BadgeProps, 'text' | 'variant'>
-  badgeLinkUrl?: string
-}
-
-const SidemenuItemContent = memo<SidemenuItemContentProps>(
-  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
-    // Calculate dynamic margins based on menu state
-    const iconBaseMarginLeft = 13 / 8 // 1.625rem (13px)
-    const iconMarginRight = isMenuExpanded
-      ? 10 / 8 // 1.25rem (10px) when expanded
-      : 20 / 8 // 2.5rem (20px) when collapsed
-
-    if (isInPopover)
-      return (
-        <>
-          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
-            {title}
-          </T>
-          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
-            <Badge
-              {...badge}
-              data-link={btoa(badgeLinkUrl ?? '#')}
-              variant={badge.variant ?? 'subtleGreen'}
-              size="sm"
-              minW="32px"
-              fontSize="12px"
-              lineHeight="16px"
-              ml="10px"
-              mr="10px"
-            />
-          )}
-        </>
-      )
-
-    return (
-      <>
-        {/* Icon container with responsive margins */}
-        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w="20px" transition="margin 0.2s ease-in-out">
-          {icon && <Icon name={icon} size={iconSize} />}
-        </Box>
-
-        {/* Menu item title and badge */}
-        <T isTruncated size="sm" display="inline-block">
-          {title}
-        </T>
-        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
-          <Badge
-            {...badge}
-            data-link={btoa(badgeLinkUrl ?? '#')}
-            variant={badge.variant ?? 'subtleGreen'}
-            size="sm"
-            minW="32px"
-            fontSize="12px"
-            lineHeight="16px"
-            ml="10px"
-            mr="10px"
-          />
-        )}
-      </>
-    )
-  },
-)
-
-SidemenuItemContent.displayName = 'SidemenuItemContent'
-
 export const PopoverHovered = styled.div<{ hoverColor: string }>`
   &:hover .vui-sidemenu-item-popover .vui-button.vui-button {
     background: ${p => th.color(p.hoverColor)};
@@ -97,6 +23,63 @@ export const PopoverHovered = styled.div<{ hoverColor: string }>`
   }
 `
 
+// SidemenuPopover component extracted from inline Popover logic
+const SidemenuPopover = ({
+  isDark,
+  className,
+  buttonStyles,
+  isExactlyActive,
+  icon,
+  title,
+  isMenuExpanded,
+  children,
+}: {
+  isDark: boolean
+  className?: string
+  buttonStyles: any
+  isExactlyActive: boolean
+  icon?: any
+  title: string
+  isMenuExpanded: boolean
+  children: React.ReactNode
+}) => (
+  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
+    {({ isOpen }: { isOpen: boolean }) => (
+      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>
+        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
+          <Button
+            {...buttonStyles}
+            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}
+            isActive={isExactlyActive}
+            className={cs('focusAsBorder')}
+          >
+            <SidemenuItemContent
+              icon={icon}
+              iconSize={buttonStyles.iconSize}
+              title={title}
+              isMenuExpanded={isMenuExpanded}
+            />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content elevation="none" className={cs('vui-sidemenu-item-content', className)}>
+          <Box flexDirection="column" justifyContent="start" w="100%">
+            <Button
+              {...buttonStyles}
+              borderLeftColor={'transparent!important'}
+              minW={'240px'}
+              isActive={isOpen && isExactlyActive}
+              className={cs('focusAsBorder')}
+            >
+              <SidemenuItemContent title={title} isInPopover={true} />
+            </Button>
+            {children}
+          </Box>
+        </Popover.Content>
+      </PopoverHovered>
+    )}
+  </Popover>
+)
+
 /** A menu item. */
 export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {
   const {
@@ -253,64 +236,75 @@ export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) =>
     }
   }, [isSubmenuOpen, themeValues.buttonVariant])
 
+  // Helper: Render collapsed popover
+  const renderPopover = () => (
+    <SidemenuPopover
+      isDark={isDark}
+      className={className}
+      buttonStyles={buttonStyles}
+      isExactlyActive={isExactlyActive}
+      icon={icon}
+      title={title}
+      isMenuExpanded={isMenuExpanded}
+    >
+      {children ? children : undefined}
+    </SidemenuPopover>
+  )
+
+  // Helper: Render expanded button
+  const renderButton = () => {
+    if (level === 0 && !isMenuExpanded) {
+      return (
+        <Tooltip text={title} placement="right" offset={[0, -200]}>
+          <Button
+            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}
+            {...buttonStyles}
+            isActive={isExactlyActive}
+          >
+            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />
+            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}
+          </Button>
+        </Tooltip>
+      )
+    }
+
+    return (
+      <Button
+        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}
+        {...buttonStyles}
+        isActive={isExactlyActive}
+        title={!isMenuExpanded ? title : undefined}
+      >
+        <SidemenuItemContent
+          icon={icon}
+          iconSize={buttonStyles.iconSize}
+          title={title}
+          isMenuExpanded={isMenuExpanded}
+          badge={props.badge}
+          badgeLinkUrl={props.badgeLinkUrl}
+        />
+        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}
+        {/* Expand/Collapse button */}
+      </Button>
+    )
+    // No leftover return, handled above
+  }
+
+  // Helper: Render expanded children
+  const renderChildren = () => (
+    <Box flexDirection="column" justifyContent="start" w="100%">
+      {children}
+    </Box>
+  )
+
+  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)
+  const shouldShowChildren = computedStates.hasChildrenExpanded
+
   return (
     <Box flexDirection="column" ref={ref} w="100%" mt={onBottom ? 'auto' : 0} id={computedItemId}>
-      {!isMenuExpanded && children ? (
-        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
-          {({ isOpen }) => (
-            <PopoverHovered hoverColor={isDark ?'#003591' : '#d3eef8'}>
-              <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
-                <Button
-                  {...buttonStyles}
-                  borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}
-                  isActive={isExactlyActive}
-                >
-                  <SidemenuItemContent
-                    icon={icon}
-                    iconSize={buttonStyles.iconSize}
-                    title={title}
-                    isMenuExpanded={isMenuExpanded}
-                  />
-                </Button>
-              </Popover.Trigger>
-              <Popover.Content elevation="none" className={cs('vui-sidemenu-item-content', className)}>
-                <Box flexDirection="column" justifyContent="start" w="100%">
-                  <Button
-                    {...buttonStyles}
-                    borderLeftColor={'transparent!important'}
-                    minW={'240px'}
-                    isActive={isOpen && isExactlyActive}
-                  >
-                    <SidemenuItemContent title={title} isInPopover={true} />
-                  </Button>
-                  {children}
-                </Box>
-              </Popover.Content>
-            </PopoverHovered>
-          )}
-        </Popover>
-      ) : (
-        <Button
-          className={cs('vui-sidemenu-item', isExactlyActive && 'vui-sidemenu-item--active', className)}
-          {...buttonStyles}
-          isActive={isExactlyActive}
-        >
-          <SidemenuItemContent
-            icon={icon}
-            iconSize={buttonStyles.iconSize}
-            title={title}
-            isMenuExpanded={isMenuExpanded}
-            badge={props.badge}
-            badgeLinkUrl={props.badgeLinkUrl}
-          />
-          {computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />} {/* Expand/Collapse button */}
-        </Button>
-      )}
-      {computedStates.hasChildrenExpanded && (
-        <Box flexDirection="column" justifyContent="start" w="100%">
-          {children}
-        </Box>
-      )}
+      {shouldShowPopover && renderPopover()}
+      {!shouldShowPopover && renderButton()}
+      {shouldShowChildren && renderChildren()}
     </Box>
   )
 }) as VuiComponent<'div', SidemenuItemV2Props>