@energie360/ui-library 0.1.25 → 0.1.27

package/components/card/u-card.vue

@@ -12,7 +12,16 @@ const toggleActiveCard = (v: boolean) => {
   isActive.value = v
 }
 
-provide('card', { toggleActiveCard })
+const isHovering = ref(false)
+
+const onMouseenter = () => {
+  isHovering.value = true
+}
+const onMouseleave = () => {
+  isHovering.value = false
+}
+
+provide('card', { toggleActiveCard, isHovering })
 
 watch(
   () => active,
@@ -23,7 +32,11 @@ watch(
 </script>
 
 <template>
-  <section :class="['card', { 'is-active': isActive }]">
+  <section
+    :class="['card', { 'is-active': isActive }]"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
     <slot></slot>
   </section>
 </template>

package/components/card-amount-illustrated/card-amount-illustrated.scss

@@ -27,9 +27,10 @@
   right: 0;
   aspect-ratio: 5/2;
   width: 85px;
+  z-index: 1;
 }
 
 .card-amount-illustrated__slider {
-  margin-top: -2px;
-  margin-bottom: -2px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }

package/components/card-amount-illustrated/u-card-amount-illustrated.vue

@@ -1,36 +1,73 @@
 <script setup lang="ts">
-import { SpriteAnimation } from '../sprite-animation/u-sprite-animation.vue'
-import { UProgressBar, USpriteAnimation } from '../'
-import { useTemplateRef } from 'vue'
+import { UProgressBar } from '../'
+import { useTemplateRef, inject, watch, ref, onMounted, onUnmounted } from 'vue'
 import { Image } from '../../elements/types'
+import '@lottiefiles/lottie-player'
 
 interface Props {
   title?: string
   amount?: number
   maxAmountImage: Image
-  spriteAnimation?: Pick<
-    SpriteAnimation,
-    'spritesheetPath' | 'framePositions' | 'frameHeight' | 'frameWidth'
-  >
+  lottieSrc: string
 }
 
-defineProps<Props>()
+const { lottieSrc, title = '', amount = -1 } = defineProps<Props>()
 defineEmits(['amount'])
+const { isHovering: cardIsHovering } = inject('card', {})
 
-const spriteAnimRef = useTemplateRef('spriteAnim')
-let pausedFrame: number
-
-const onPause = (frame: number) => {
-  pausedFrame = frame
-}
+const lottieWrapperRef = useTemplateRef('lottie-wrapper')
+let lottieEl
+let lottie
+const lottieReady = ref(false)
+const isHovering = ref(false)
 
 const onMouseenter = () => {
-  spriteAnimRef.value.play()
+  if (isHovering.value === true || lottieReady.value === false) {
+    return
+  }
+
+  lottie.setDirection(1)
+  lottie.play()
+  isHovering.value = true
 }
 
 const onMouseleave = () => {
-  spriteAnimRef.value.pause()
-  spriteAnimRef.value.playReverse(pausedFrame)
+  if (cardIsHovering?.value === true || lottieReady.value === false) {
+    return
+  }
+
+  lottie.setDirection(-1)
+  lottie.play()
+  isHovering.value = false
+}
+
+onMounted(() => {
+  // lottie-player web-component will be ready in this callback.
+  const tmp = document.createElement('lottie-player')
+  tmp.setAttribute('src', lottieSrc)
+  tmp.setAttribute('speed', '2.5')
+  lottieEl = lottieWrapperRef.value.appendChild(tmp)
+
+  lottieEl.addEventListener('load', () => {
+    lottie = lottieEl.getLottie()
+    lottieReady.value = true
+  })
+})
+
+onUnmounted(() => {
+  if (lottieEl) {
+    lottieEl.remove()
+  }
+})
+
+if (cardIsHovering) {
+  watch(cardIsHovering, (v) => {
+    if (v) {
+      onMouseenter()
+    } else {
+      onMouseleave()
+    }
+  })
 }
 </script>
 
@@ -41,22 +78,11 @@ const onMouseleave = () => {
     </h3>
 
     <div
-      v-if="$slots.illustration || spriteAnimation"
+      ref="lottie-wrapper"
       class="card-amount-illustrated__illustration"
+      @mouseenter="onMouseenter"
+      @mouseleave="onMouseleave"
     >
-      <slot name="illustration">
-        <USpriteAnimation
-          ref="spriteAnim"
-          v-bind="spriteAnimation"
-          :duration="200"
-          :width="200"
-          :height="200"
-          @mouseenter="onMouseenter"
-          @mouseleave="onMouseleave"
-          @pause="onPause"
-        ></USpriteAnimation>
-      </slot>
-
       <div
         v-if="($slots.maxAmountImage || maxAmountImage) && amount === 100"
         class="card-amount-illustrated__max-amount-image"

package/components/card-group/card-group.scss

@@ -26,16 +26,18 @@
   &.columns-4 {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;
-  }
 
-  &.use-carousel {
-    display: block;
+    @include a.bp(xl) {
+      grid-template-columns: repeat(2, 1fr);
+    }
 
-    // touch-action: pan-y;
+    @include a.bp(m) {
+      grid-template-columns: repeat(1, 1fr);
+    }
   }
 
   @include a.bp(lg) {
-    &:has(> :last-child:nth-child(n)) {
+    &:has(> :last-child:nth-child(n)):not(.columns-4) {
       grid-template-columns: repeat(1, 1fr);
       grid-template-rows: 1fr;
     }

package/components/card-group/u-card-group.vue

@@ -1,48 +1,17 @@
 <script setup lang="ts">
-import { register } from 'swiper/element/bundle'
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 import { debounceRaf } from '../../utils/functions/debounce'
 import { isLarge } from '../../utils/functions/breakpoint'
 import { useRadioGroup } from '../../elements/radio-group/radio-group-composables'
 
-// Register swiper custom elements.
-register()
-
 interface Props {
   columns?: 1 | 2 | 3 | 4 | 'auto'
-  useCarousel?: boolean
 }
 
-const { columns = 'auto', useCarousel = false } = defineProps<Props>()
+const { columns = 'auto' } = defineProps<Props>()
 const model = defineModel<string>()
 const group = useTemplateRef('group')
 
-const initSwiper = () => {
-  if (!useCarousel) {
-    return
-  }
-
-  const swiperEl = group.value.querySelector('swiper-container')
-  const swiperParams = {
-    spaceBetween: 20,
-    breakpoints: {
-      1240: {
-        slidesPerView: 4,
-      },
-      1020: {
-        slidesPerView: 3,
-      },
-      740: {
-        slidesPerView: 2,
-      },
-    },
-  }
-
-  Object.assign(swiperEl, swiperParams)
-
-  swiperEl.initialize()
-}
-
 const onResize = debounceRaf(() => {
   const headers = Array.from(group.value.querySelectorAll('.card-header'))
 
@@ -80,8 +49,6 @@ onMounted(() => {
     // Initial state
     onResize()
   })
-
-  initSwiper()
 })
 
 onUnmounted(() => {
@@ -92,29 +59,11 @@ useRadioGroup({
   model,
   provideKey: 'card-group',
 })
-
-watch(
-  () => useCarousel,
-  () => {
-    initSwiper()
-  },
-)
 </script>
 
 <template>
-  <div ref="group" :class="['card-group', `columns-${columns}`, { 'use-carousel': useCarousel }]">
-    <template v-if="useCarousel">
-      <swiper-container init="false">
-        <template v-for="(vnode, idx) in $slots.default()[0].children" :key="idx">
-          <swiper-slide>
-            <component :is="vnode" />
-          </swiper-slide>
-        </template>
-      </swiper-container>
-    </template>
-    <template v-else>
-      <slot />
-    </template>
+  <div ref="group" :class="['card-group', `columns-${columns}`]">
+    <slot />
   </div>
 </template>
 

package/components/index.js

@@ -67,3 +67,6 @@ export { default as UChip } from './chip/u-chip.vue'
 export { default as USlider } from './slider/u-slider.vue'
 export { default as USpriteAnimation } from './sprite-animation/u-sprite-animation.vue'
 export { default as USliderProgressAnimation } from './slider-progress-animation/u-slider-progress-animation.vue'
+export { default as UStickyCta } from './sticky-cta/u-sticky-cta.vue'
+export { default as UNotificationItem } from './notification-item/u-notification-item.vue'
+export { default as UNotificationList } from './notification-list/u-notification-list.vue'

package/components/notification-item/notification-item.scss

@@ -0,0 +1,115 @@
+@use '../../base/abstracts' as a;
+
+.notification-item {
+  z-index: 1;
+  position: relative;
+  container-type: inline-size;
+  margin-bottom: -1px;
+}
+
+// Unread state
+.notification-item__inner {
+  padding: var(--e-space-4);
+  border-top: 1px solid var(--e-c-secondary-05-100);
+  border-bottom: 1px solid var(--e-c-secondary-05-100);
+  background-color: var(--e-c-secondary-05-50);
+  display: flex;
+  align-items: center;
+  transition: background-color a.$trs-default;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--e-c-secondary-05-100);
+  }
+
+  &:active {
+    background-color: var(--e-c-secondary-05-200);
+  }
+
+  @container (width < 740px) {
+    flex-wrap: wrap;
+    border-radius: var(--e-brd-radius-2);
+    border: 1px solid var(--e-c-secondary-05-100);
+    row-gap: var(--e-space-2);
+
+    .notification-item__text {
+      order: 1;
+      flex: 0 0 100%;
+      padding: 0;
+      margin-right: 0;
+    }
+
+    .notification-item__dot {
+      order: 2;
+    }
+
+    .notification-item__when {
+      padding: 3px 0;
+      order: 3;
+      margin-left: 0;
+    }
+
+    .notification-item__remove {
+      order: 4;
+      margin-left: auto;
+    }
+  }
+}
+
+// Read state
+.notification-item.read {
+  z-index: 0;
+
+  .notification-item__inner {
+    background-color: var(--e-c-mono-00);
+    border-color: var(--e-c-mono-100);
+
+    &:hover {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    &:active {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+}
+
+.notification-item__text {
+  @include a.type(100);
+
+  margin-right: var(--e-space-2);
+  min-height: 24px;
+  padding: 1px 0;
+}
+
+.notification-item__dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: var(--e-space-2);
+  background-color: var(--e-c-secondary-05-500);
+}
+
+.notification-item__when {
+  @include a.type(50);
+
+  white-space: nowrap;
+  color: var(--e-c-mono-700);
+  margin-left: auto;
+}
+
+.notification-item__remove {
+  cursor: pointer;
+  z-index: 1;
+  color: var(--e-c-primary-01-700);
+  margin-left: var(--e-space-6);
+
+  &:hover {
+    color: var(--e-c-secondary-01-900);
+  }
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}

package/components/notification-item/u-notification-item.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { UIcon } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  read: boolean
+  when: string
+  text?: string
+  removable: boolean
+}
+
+defineProps<Props>()
+const emits = defineEmits(['remove'])
+
+const onRemove = () => {
+  emits('remove')
+}
+</script>
+
+<template>
+  <div :class="['notification-item', { read, removable }]">
+    <div class="notification-item__inner">
+      <div v-if="!read" class="notification-item__dot"></div>
+
+      <div class="notification-item__text">
+        <slot><div v-html="text" /></slot>
+      </div>
+
+      <div class="notification-item__when">
+        {{ when }}
+      </div>
+
+      <div
+        v-if="removable"
+        class="notification-item__remove"
+        role="button"
+        @click.prevent.stop="onRemove"
+      >
+        <span class="visually-hidden">{{ getTranslation('removeNotification') }}</span>
+        <UIcon name="delete" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./notification-item.scss"></style>

package/components/notification-list/notification-list.scss

@@ -0,0 +1,37 @@
+@use '../../base/abstracts' as a;
+
+.notification-list {
+  container-type: inline-size;
+
+  &.is-empty {
+    // This vertical centered style only works in the portal-main layout.
+    // It's not really possible to do this "correctly" at the moment, because `portal-main__content` is `display: block`.
+    // With `display: flex` it would work, but this would need some refactoring.
+    position: relative;
+    top: 50%;
+    transform: translateY(-100%);
+  }
+}
+
+.notification-list__inner {
+  display: flex;
+  flex-direction: column;
+
+  @container (width < 740px) {
+    gap: var(--e-space-3);
+  }
+}
+
+.notification-list__empty-wrapper {
+  text-align: center;
+}
+
+.notification-list__empty_animation {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto var(--e-space-6);
+}
+
+.notification-list__empty-text {
+  @include a.type(300, strong);
+}

package/components/notification-list/u-notification-list.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
+
+interface Props {
+  emptyText: string
+}
+
+defineProps<Props>()
+
+const innerEl = useTemplateRef('inner')
+const isEmpty = ref(false)
+const checkItems = () => {
+  const itemCount = innerEl.value.children.length
+
+  isEmpty.value = itemCount === 0
+}
+
+onMounted(() => {
+  checkItems()
+
+  const observer = new window.MutationObserver(() => {
+    checkItems()
+  })
+
+  observer.observe(innerEl.value, { childList: true, subtree: true })
+})
+</script>
+
+<template>
+  <div :class="['notification-list', { 'is-empty': isEmpty }]">
+    <div ref="inner" class="notification-list__inner">
+      <slot />
+    </div>
+
+    <div v-if="isEmpty" class="notification-list__empty-wrapper">
+      <div class="notification-list__empty_animation">
+        <DotLottieVue
+          autoplay
+          loop
+          src="/static/ui-assets/lottie/notification-empty.lottie"
+          style="height: 100%; width: 100%"
+        />
+      </div>
+
+      <p class="notification-list__empty-text">{{ emptyText }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./notification-list.scss"></style>

package/components/sprite-animation/u-sprite-animation.vue

@@ -84,7 +84,7 @@ const durationFromFps = () => (1000 / fps) * framePositions.length
 const durationFromFrames = (start, end) =>
   (Math.abs(end - start) / framePositions.length) * duration
 
-const animate = (start, end) => {
+const animate = (start, end, loop = false) => {
   isAnimating = true
 
   animation = animateValue({
@@ -96,6 +96,11 @@ const animate = (start, end) => {
       toFrame(value)
     },
     onComplete(value) {
+      if (loop) {
+        animate(start, end, loop)
+        return
+      }
+
       isAnimating = false
       emits('pause', getFrameFromProgress(value))
     },
@@ -110,6 +115,10 @@ const play = (start = 0, end = framePositions.length - 1) => {
   animate(start, end)
 }
 
+const playLoop = () => {
+  animate(0, framePositions.length - 1, true)
+}
+
 const playReverse = (start = framePositions.length - 1, end = 0) => {
   if (isAnimating) {
     animation.abort()
@@ -145,6 +154,7 @@ onMounted(async () => {
 defineExpose({
   play,
   playReverse,
+  playLoop,
   pause,
   toFrame,
 })

package/components/sticky-cta/u-sticky-cta.scss

@@ -0,0 +1,20 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.sticky-cta {
+  position: sticky;
+  bottom: 0;
+  padding: var(--e-space-6) 0;
+  background-color: var(--e-c-mono-00);
+  border-top: 1px solid var(--e-c-mono-200);
+  z-index: 1000;
+}
+
+.sticky-cta__inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.container {
+  @include c.grid-container;
+}

package/components/sticky-cta/u-sticky-cta.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="sticky-cta">
+    <div class="container">
+      <div class="sticky-cta__inner">
+        <div>
+          <slot name="info"></slot>
+        </div>
+
+        <slot name="cta"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./u-sticky-cta.scss"></style>

package/components/table/table-row.scss

@@ -1,20 +1,18 @@
 @use '../../base/abstracts' as a;
 
-.table-row {
+@mixin table-row {
   display: table-row;
   border-bottom: 1px solid var(--e-c-mono-100);
+}
+
+.table-row {
+  @include table-row;
 
   &.highlight {
     background-color: var(--e-c-mono-50);
   }
 
-  &.mobile-layout-card {
-    @include a.bp(m) {
-      display: grid;
-      gap: var(--e-space-2);
-      padding: var(--e-space-4);
-      border: 1px solid var(--e-c-mono-200);
-      border-radius: var(--e-brd-radius-2);
-    }
+  &.dark {
+    background-color: var(--e-c-mono-100);
   }
 }

package/components/table/table.scss

@@ -1,5 +1,11 @@
 @use '../../base/abstracts' as a;
 
+.table-title {
+  @include a.type(200, strong);
+
+  padding-left: var(--e-space-4);
+}
+
 .table {
   display: table;
   border-collapse: collapse;

package/components/table/u-table-cell.vue

@@ -24,7 +24,7 @@ const {
     :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
     <div :class="['cell-content', `text-${textStyle}`, { nowrap }]">
-      <slot>{{ text }}</slot>
+      <slot><span v-html="text" /></slot>
     </div>
 
     <div v-if="infoText" class="info-tooltip">

package/components/table/u-table-row.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 interface Props {
   highlight?: boolean
+  dark?: boolean
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <div role="row" :class="['table-row', { highlight }]">
+  <div role="row" :class="['table-row', { highlight, dark }]">
     <slot></slot>
   </div>
 </template>
@@ -15,3 +16,17 @@ defineProps<Props>()
 <style scoped lang="scss">
 @use './table-row.scss';
 </style>
+
+<style lang="scss">
+@use './table-row.scss' as tr;
+
+.table-row-linked {
+  @include tr.table-row;
+
+  transition: background var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+  }
+}
+</style>

package/components/table/u-table.vue

@@ -1,6 +1,16 @@
+<script lang="ts" setup>
+interface Props {
+  role?: string
+  title?: string
+}
+
+const { role = 'table', title = '' } = defineProps<Props>()
+</script>
+
 <template>
   <div class="table-scroll-wrapper">
-    <div role="table" class="table">
+    <p v-if="title" class="table-title">{{ title }}</p>
+    <div :role="role" class="table">
       <slot></slot>
     </div>
   </div>

package/i18n/i18n.ts

@@ -23,6 +23,7 @@ const translations = {
     download: 'Herunterladen',
     like: 'Gefällt mir',
     dislike: 'Gefällt mir nicht',
+    removeNotification: 'Benachrichtigung entfernen',
   },
   FR: {
     yes: 'Ja',
@@ -48,6 +49,7 @@ const translations = {
     download: 'Télécharger',
     like: "J'aime ça",
     dislike: "je ne l'aime pas",
+    removeNotification: 'supprimer la notification',
   },
   IT: {
     yes: 'Ja',
@@ -73,6 +75,7 @@ const translations = {
     download: 'scaricamento',
     like: 'Mi piace',
     dislike: 'Non mi piace',
+    removeNotification: 'rimuovere la notifica',
   },
   EN: {
     yes: 'Ja',
@@ -98,6 +101,7 @@ const translations = {
     download: 'Download',
     like: 'I like it',
     dislike: 'I do not like it',
+    removeNotification: 'remove notification',
   },
 }
 

package/layout/index.js

@@ -4,3 +4,4 @@ export { default as UPortalContentAside } from './portal-content-aside/u-portal-
 export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
 export { default as UTileItem } from './tile-grid/u-tile-item.vue'
 export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
+export { default as UPortalBlock } from './portal-block/u-portal-block.vue'

package/layout/portal-block/portal-block.scss

@@ -0,0 +1,8 @@
+.portal-block {
+  // default 'small'
+  margin-bottom: var(--e-space-6);
+
+  &.big {
+    margin-bottom: var(--e-space-10);
+  }
+}

package/layout/portal-block/u-portal-block.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+interface Props {
+  big?: boolean
+  space?: 'small' | 'big'
+}
+
+const { space = 'small' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['portal-block', space]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-block.scss"></style>

package/layout/portal-main/portal-main.scss

@@ -81,6 +81,7 @@
 .portal-main__content {
   padding-top: var(--e-space-10);
   padding-bottom: var(--e-space-10);
+  flex: 1 1 100%;
 
   @include c.portal-content-container;
 

package/layout/responsive-container/u-responsive-container.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue'
+import { debounceRaf } from '../../utils/functions/debounce'
 
 interface Props {
   breakpoint: number
+  type?: 'viewport' | 'container'
 }
 
 const root = useTemplateRef('root')
@@ -11,10 +13,22 @@ const resizeObserver = new ResizeObserver((entries) => {
   containerWidth.value = entries[0].contentBoxSize[0].inlineSize
 })
 
-defineProps<Props>()
+const { type = 'viewport' } = defineProps<Props>()
+
+const onResize = debounceRaf(() => {
+  containerWidth.value = window.innerWidth
+})
 
 onMounted(() => {
-  resizeObserver.observe(root.value)
+  switch (type) {
+    case 'container':
+      resizeObserver.observe(root.value)
+      break
+    case 'viewport':
+    default:
+      onResize()
+      window.addEventListener('resize', onResize)
+  }
 })
 
 onUnmounted(() => {
@@ -23,7 +37,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="root" class="responsive-container">
+  <div v-if="type === 'container'" ref="root" class="responsive-container">
     <template v-if="containerWidth >= breakpoint">
       <slot name="above"></slot>
     </template>
@@ -32,4 +46,14 @@ onUnmounted(() => {
       <slot name="below"></slot>
     </template>
   </div>
+
+  <template v-else>
+    <template v-if="containerWidth >= breakpoint">
+      <slot name="above"></slot>
+    </template>
+
+    <template v-else>
+      <slot name="below"></slot>
+    </template>
+  </template>
 </template>

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-toolbar-side {
   --nav-width-expanded: #{a.rem(280)};
@@ -15,7 +15,13 @@
     width: a.rem(88);
 
     .navigation-toolbar-side__logo {
-      width: a.rem(40);
+      .mini {
+        opacity: 1;
+      }
+
+      .large {
+        opacity: 0;
+      }
     }
 
     .navigation-toolbar-side__nav-links,
@@ -29,6 +35,11 @@
   width: a.rem(196);
   height: a.rem(40);
   margin-bottom: var(--e-space-12);
+
+  .mini {
+    position: absolute;
+    opacity: 0;
+  }
 }
 
 .navigation-toolbar-side__nav-links {
@@ -49,12 +60,6 @@
   width: 100%;
 }
 
-.navigation-toolbar-side__top-bar-logo {
-  img {
-    height: a.rem(24);
-  }
-}
-
 .navigation-toolbar-side__top-bar-ctas {
   display: flex;
   column-gap: var(--e-space-4);
@@ -62,28 +67,54 @@
 
 // Animation
 .navigation-toolbar-side {
+  --duration: var(--e-trs-duration-faster);
+
   &.is-collapsing {
     will-change: width;
-    transition: width var(--e-trs-duration-faster) var(--transition-ease-out);
+    transition: width var(--duration) var(--transition-ease-out);
     width: a.rem(88);
     overflow: hidden;
 
     .navigation-toolbar-side__nav-links,
     .navigation-toolbar-side__menu-ctas {
-      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      transition: padding var(--duration) var(--transition-ease-out);
       padding: 0 var(--e-space-0_5);
     }
+
+    .navigation-toolbar-side__logo {
+      .mini {
+        opacity: 1;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+
+      .large {
+        opacity: 0;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+    }
   }
 
   &.is-expanding {
     will-change: width;
-    transition: all var(--e-trs-duration-faster) var(--transition-ease-out);
+    transition: all var(--duration) var(--transition-ease-out);
     width: var(--nav-width-expanded);
 
     .navigation-toolbar-side__nav-links,
     .navigation-toolbar-side__menu-ctas {
-      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      transition: padding var(--duration) var(--transition-ease-out);
       padding: 0;
     }
+
+    .navigation-toolbar-side__logo {
+      .mini {
+        opacity: 0;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+
+      .large {
+        opacity: 1;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+    }
   }
 }

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -61,13 +61,16 @@ watch(
       },
     ]"
   >
-    <a class="navigation-toolbar-side__logo" :href="logoLink.href" :target="logoLink.target">
-      <img
-        v-if="isCollapsed || isExpanding"
-        :src="logoMinifiedImage.src"
-        :alt="logoMinifiedImage.alt"
-      />
-      <img v-else :src="logoImage.src" :alt="logoImage.alt" />
+    <a
+      :class="[
+        'navigation-toolbar-side__logo',
+        { 'is-collapsing': isCollapsing, 'is-expanding': isExpanding },
+      ]"
+      :href="logoLink.href"
+      :target="logoLink.target"
+    >
+      <img class="mini" :src="logoMinifiedImage.src" :alt="logoMinifiedImage.alt" />
+      <img class="large" :src="logoImage.src" :alt="logoImage.alt" />
     </a>
 
     <nav ref="mobile-panel" class="navigation-toolbar-side__nav-panel">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -25,17 +25,17 @@
   "license": "MIT",
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.16.5",
+    "@types/node": "^22.19.0",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "chokidar": "^4.0.3",
     "postcss": "^8.5.6",
-    "sass": "^1.89.2",
-    "typescript": "^5.8.3"
+    "sass": "^1.94.0",
+    "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-vue": "^0.10.7",
     "@lottiefiles/lottie-player": "^2.0.12",
-    "swiper": "^11.2.10",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {