@energie360/ui-library 0.1.32 → 0.1.33

package/components/badge/badge.scss

@@ -31,11 +31,18 @@ $ease-out-bounce: cubic-bezier(0.674, 1.901, 0.651, 0.744);
 }
 
 .badge__sup.number {
-  width: 16px;
+  min-width: 16px;
   height: 16px;
   font-size: 10px;
   font-weight: bold;
-  line-height: 1;
+  line-height: 10px;
+  letter-spacing: 0;
+  border-radius: 24px;
+  text-align: center;
+  padding: 0 2px;
+  top: var(--top, -5px);
+  right: var(--right, 3px);
+  transform: translateX(50%);
 }
 
 .badge__sup.state {
@@ -48,8 +55,8 @@ $ease-out-bounce: cubic-bezier(0.674, 1.901, 0.651, 0.744);
 }
 
 .badge__sup.dot {
-  top: var(--top, -3px);
-  right: var(--right, -3px);
+  top: var(--top, -1px);
+  right: var(--right, -1px);
   width: 8px;
   height: 8px;
   border-radius: 100%;

package/components/badge/u-badge.vue

@@ -2,11 +2,9 @@
 export interface Badge {
   color?: string
   dot?: boolean
-  type?: 'default' | 'success' | 'error' | 'warning' | 'info'
   value?: number
   state?: '' | 'inactive'
   show?: boolean
-  border?: boolean
   top?: number
   right?: number
 }
@@ -17,7 +15,6 @@ const {
   top = 0,
   right = 0,
   color = 'var(--e-c-mono-900)',
-  type = 'default',
   show = true,
 } = defineProps<Badge>()
 </script>
@@ -32,23 +29,16 @@ const {
   >
     <slot></slot>
 
-    <sup
-      v-if="dot"
-      class="badge__sup dot"
-      :class="[`type-${type}`, { border }]"
-      :style="{ backgroundColor: color }"
-    ></sup>
+    <sup v-if="dot" class="badge__sup dot" :style="{ backgroundColor: color }"></sup>
 
     <sup
       v-else-if="state"
       class="badge__sup state"
-      :class="[state, { border }]"
+      :class="[state]"
       :style="{ backgroundColor: color }"
     ></sup>
 
-    <sup v-else class="badge__sup number" :class="{ border }" :style="{ backgroundColor: color }">{{
-      value
-    }}</sup>
+    <sup v-else class="badge__sup number" :style="{ backgroundColor: color }">{{ value }}</sup>
   </span>
 </template>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 
 interface Props {
   progress: number

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 import { useTemplateRef, inject, watch, ref, onMounted, onUnmounted } from 'vue'
 import { Image } from '../../elements/types'
 import '@lottiefiles/lottie-player'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Image } from '../../elements/types'
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 
 interface Props {
   name?: string

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Chip } from '../chip/u-chip.vue'
 import { Image } from '../../elements/types'
-import { UIcon } from '../../elements'
-import { UChip } from '../'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UChip from '../chip/u-chip.vue'
 
 interface Props {
   title?: string

package/components/card-price-list/u-card-price-list.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { UIcon } from '../../elements'
-import { UTooltip } from '../'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UTooltip from '../tooltip/u-tooltip.vue'
 
 interface PriceItem {
   name: string

package/components/card-statistic/card-statistic.scss

@@ -0,0 +1,31 @@
+@use '../../base/abstracts' as a;
+
+.card-statistic {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--e-space-2);
+}
+
+.card-statistic__image {
+  width: 80px;
+  height: 80px;
+  flex: 0 0 auto;
+}
+
+.card-statistic__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.card-statistic__label {
+  @include a.type(200);
+
+  order: 2;
+}
+
+.card-statistic__value {
+  @include a.type(700, strong);
+
+  order: 1;
+}

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
+
+interface Props {
+  label?: string
+  value?: string
+  image?: Image
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-statistic">
+    <dl class="card-statistic__content">
+      <dt class="card-statistic__label">
+        <slot name="label">{{ label }}</slot>
+      </dt>
+
+      <dd class="card-statistic__value">
+        <slot name="value">{{ value }}</slot>
+      </dd>
+    </dl>
+
+    <div v-if="image || hasSlotContent($slots.image)" class="card-statistic__image">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-statistic.scss"></style>

package/components/chip/chip.scss

@@ -36,6 +36,7 @@
 }
 
 .chip__icon {
+  margin-left: calc(var(--e-space-1) * -1);
   color: var(--chip-icon-color);
 }
 

package/components/chip/u-chip.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// TODO: Rename this component. It's not really a 'chip'.
 import { UIcon } from '../../elements'
 
 export interface Chip {

package/components/download-list-item/u-download-list-item.vue

@@ -66,6 +66,7 @@ defineExpose({ click })
     <td class="download-list-item__cell cta">
       <component
         :is="url ? 'a' : 'button'"
+        v-bind="$attrs"
         ref="link"
         class="download-list-item__link"
         :href="url"

package/components/empty/empty.scss

@@ -0,0 +1,27 @@
+@use '../../base/abstracts' as a;
+
+.empty {
+  text-align: center;
+}
+
+.empty__image {
+  margin: 0 auto var(--e-space-6);
+  width: a.rem(120);
+  height: a.rem(120);
+
+  > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.empty__title {
+  @include a.type(600);
+
+  margin-bottom: var(--e-space-6);
+}
+
+.empty__text {
+  @include a.type(300, strong);
+}

package/components/empty/u-empty.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { hasSlotContent } from '../../utils/vue/helpers'
+
+interface Props {
+  title?: string
+  text?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="empty">
+    <div class="empty__image">
+      <slot name="image">
+        <img src="/static/ui-assets/images/search.svg" alt="" />
+      </slot>
+    </div>
+
+    <p v-if="title || hasSlotContent($slots.title)" class="empty__title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </p>
+
+    <p v-if="text || hasSlotContent($slots.text)" class="empty__text">
+      <slot name="text"> {{ text }} </slot>
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./empty.scss"></style>

package/components/hint/hint.scss

@@ -7,10 +7,6 @@
   background-color: var(--e-c-secondary-05-100);
   color: var(--e-c-secondary-05-900);
 
-  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
-  }
-
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -19,6 +15,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-secondary-05-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -37,10 +37,6 @@
   background-color: var(--e-c-signal-02-100);
   color: var(--e-c-signal-02-900);
 
-  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
-  }
-
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -49,6 +45,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-signal-02-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -76,17 +76,18 @@
   border-left-color: var(--e-c-mono-700);
   color: var(--e-c-mono-900);
 
-  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
-    top: 0;
-    left: calc(
-      -24px - 12px - 4px
-    ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+  .hint__label,
+  .hint__richtext {
+    margin-left: 0;
   }
 
-  > p,
-  .richtext {
-    margin-left: 0;
+  &.no-label .hint__label {
+    height: 0;
+    min-height: 0;
+
+    @include a.bp(lg) {
+      margin-top: -8px;
+    }
   }
 
   .hint__link {
@@ -96,13 +97,22 @@
     }
   }
 
+  .hint__icon {
+    top: 0;
+    left: calc(
+      -24px - 12px - 4px
+    ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+
+    color: var(--e-c-mono-700);
+  }
+
   @include a.bp(lg) {
     margin-top: calc(4px + 4px + 24px);
     border: 1px solid var(--e-c-mono-500);
     border-top-width: 4px;
     border-top-color: var(--e-c-mono-700);
 
-    &::before {
+    .hint__icon {
       left: 0;
       top: calc(
         -24px - 4px - 4px
@@ -115,10 +125,42 @@
   background-color: var(--e-c-signal-03-100);
   color: var(--e-c-signal-03-900);
 
-  &::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1396 0C15.4048 0 15.6592 0.105542 15.8467 0.292969L21.707 6.15332C21.8945 6.34084 22 6.59522 22 6.86035V15.1396C22 15.4048 21.8945 15.6592 21.707 15.8467L15.8467 21.707C15.6592 21.8945 15.4048 22 15.1396 22H6.86035C6.59522 22 6.34084 21.8945 6.15332 21.707L0.292969 15.8467C0.105542 15.6592 0 15.4048 0 15.1396V6.86035C0 6.59522 0.105542 6.34084 0.292969 6.15332L6.15332 0.292969C6.34084 0.105542 6.59522 0 6.86035 0H15.1396ZM11 14C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16H11.0098C11.5621 16 12.0098 15.5523 12.0098 15C12.0098 14.4477 11.5621 14 11.0098 14H11ZM11 6C10.4477 6 10 6.44772 10 7V11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11V7C12 6.44772 11.5523 6 11 6Z' fill='%23FF0C3E'/%3E%3C/svg%3E");
+  .hint__richtext {
+    margin-left: var(--e-space-9);
+
+    @include a.bp(lg) {
+      margin-left: 0;
+    }
   }
 
+  // override some richtext styles.
+  .richtext {
+    a {
+      color: inherit;
+
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-signal-03-100);
+      }
+    }
+  }
+
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+
+  .hint__icon {
+    color: var(--e-c-signal-03-500);
+  }
+}
+
+@mixin type-task {
+  background-color: var(--e-c-secondary-03-100);
+  color: var(--e-c-signal-03-900);
+
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -127,6 +169,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-secondary-03-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -160,7 +206,6 @@
 
     display: inline-block;
     color: inherit;
-    margin-left: var(--e-space-2);
 
     &:active,
     &:hover {
@@ -169,11 +214,19 @@
 
     @include a.bp(lg) {
       display: block;
-      margin-left: 0;
     }
   }
 
   .hint__label {
+    @include a.type(200, strong);
+
+    margin-left: var(--e-space-9);
+
+    @include a.bp(lg) {
+      margin-left: var(--e-space-7);
+      min-height: 24px;
+    }
+
     + .hint__richtext {
       margin-top: var(--e-space-1);
 
@@ -183,29 +236,35 @@
     }
   }
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: var(--e-space-5);
-    left: var(--e-space-4);
-    width: a.rem(24);
-    height: a.rem(24);
-  }
-
-  > p {
-    @include a.type(200, strong);
+  .hint__label-text + .hint__link {
+    margin-left: var(--e-space-2);
 
-    margin-left: var(--e-space-9);
+    @include a.bp(lg) {
+      margin-left: 0;
+    }
   }
 
   @include a.bp(lg) {
     padding: var(--e-space-4);
 
-    &::before {
+    .hint__icon {
       top: var(--e-space-4);
     }
   }
 
+  // States
+  &.no-label {
+    .hint__label {
+      // This gives same layout as when `.hint__label` was removed from DOM.
+      // We can't remove it because wew need this element for mobile layout.
+      margin-top: -4px;
+
+      @include a.bp(lg) {
+        margin-top: 0;
+      }
+    }
+  }
+
   // Modifiers
   &.hint--warning {
     @include type-warning;
@@ -218,4 +277,16 @@
   &.hint--error {
     @include type-error;
   }
+
+  &.hint--task {
+    @include type-task;
+  }
+}
+
+.hint__icon {
+  position: absolute;
+  top: var(--e-space-5);
+  left: var(--e-space-4);
+  width: a.rem(24);
+  height: a.rem(24);
 }

package/components/hint/u-hint.vue

@@ -1,21 +1,43 @@
 <script setup lang="ts">
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 import { Cta } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
+import UIcon from '../../elements/icon/u-icon.vue'
 
 interface Props {
-  type?: 'neutral' | 'warning' | 'legal' | 'error'
+  type?: 'neutral' | 'warning' | 'legal' | 'error' | 'task'
   label?: string
   link?: Cta
   text?: string
 }
 
 const { label = '', link = undefined, text = '', type = 'neutral' } = defineProps<Props>()
+
+// default mapping 'type' -> icon
+const iconMap = {
+  neutral: 'info-circle-filled',
+  warning: 'alert-triangle-filled',
+  legal: 'legal',
+  error: 'alert-octagon-filled',
+  task: 'check-circle-filled',
+}
 </script>
 
 <template>
-  <div :class="['hint', `hint--${type}`]">
+  <div
+    :class="[
+      'hint',
+      `hint--${type}`,
+      { 'no-label': !label && !hasSlotContent($slots.label) && !link },
+    ]"
+  >
+    <span class="hint__icon">
+      <slot name="icon"> <UIcon :name="iconMap[type]" /> </slot>
+    </span>
     <p class="hint__label">
-      <slot name="label">{{ label }}</slot>
+      <span v-if="label || hasSlotContent($slots.label)" class="hint__label-text">
+        <slot name="label">{{ label }}</slot>
+      </span>
 
       <a v-if="link" :href="link.href" :target="link.target" class="hint__link">
         {{ link.label }}
@@ -68,4 +90,13 @@ const { label = '', link = undefined, text = '', type = 'neutral' } = defineProp
     }
   }
 }
+
+.hint--error {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-03-100);
+    }
+  }
+}
 </style>

package/components/index.js

@@ -72,3 +72,5 @@ export { default as UNotificationItem } from './notification-item/u-notification
 export { default as UNotificationList } from './notification-list/u-notification-list.vue'
 export { default as UDefinitionList } from './definition-list/u-definition-list.vue'
 export { default as UDefinitionListItem } from './definition-list-item/u-definition-list-item.vue'
+export { default as UCardStatistic } from './card-statistic/u-card-statistic.vue'
+export { default as UEmpty } from './empty/u-empty.vue'

package/components/navigation-panel-tile/navigation-panel-tile.scss

@@ -82,24 +82,6 @@
   }
 }
 
-.badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  width: a.rem(13);
-  height: a.rem(13);
-  background-color: var(--e-c-mono-900);
-  border-radius: 100%;
-
-  &.inactive {
-    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='6.5' r='6.5' fill='%23333'/%3E%3Cpath d='m4.414 3 2.12 2.121L8.658 3l1.414 1.414-2.122 2.122 2.122 2.121-1.414 1.414-2.122-2.12-2.12 2.12L3 8.656l2.12-2.12L3 4.412 4.414 3Z' fill='%23fff'/%3E%3C/svg%3E");
-  }
-}
-
 .navigation-panel-tile__text-column {
   flex: 1 1 auto;
 }
-
-.badge + .icon {
-  color: var(--e-c-mono-500);
-}

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIcon } from '../../elements'
-
-type IconBadge = 'inactive'
+import UBadge from '../../components/badge/u-badge.vue'
+import type { Badge } from '../badge/u-badge.vue'
 
 interface Props {
   active?: boolean
@@ -11,7 +11,7 @@ interface Props {
   greyed?: boolean
   href?: string
   icon?: string
-  iconBadge?: IconBadge
+  badge?: Badge
   target?: string
   title?: string
 }
@@ -19,7 +19,7 @@ interface Props {
 const {
   description = '',
   icon = '',
-  iconBadge = undefined,
+  badge = undefined,
   title = '',
   href = '',
   target = '_self',
@@ -53,9 +53,10 @@ const tag = computed(() => (href ? 'a' : 'div'))
 
     <div class="navigation-panel-tile__icon-column">
       <div v-if="icon" class="navigation-panel-tile__icon-wrapper">
-        <span v-if="iconBadge" :class="['badge', iconBadge]" />
-
-        <UIcon :name="icon" />
+        <UBadge v-if="badge" v-bind="badge">
+          <UIcon :name="icon" />
+        </UBadge>
+        <UIcon v-else :name="icon" />
       </div>
     </div>
   </component>

package/components/navigation-toolbar-link/u-navigation-toolbar-link.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed, useTemplateRef } from 'vue'
-import { UIcon } from '../../elements'
-import { UBadge } from '../../components'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UBadge from '../../components/badge/u-badge.vue'
 import { Badge } from '../badge/u-badge.vue'
 
 // TODO: Label animation when collapsed is a mess. Refactor it as soon as possbile!

package/components/progress-avatar/u-progress-avatar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, useTemplateRef, ref } from 'vue'
 import { Image } from '../../elements/types'
-import { UCircularProgress } from '../'
+import UCircularProgress from '../circular-progress/u-circular-progress.vue'
 
 interface Props {
   image: Image

package/components/slider/u-slider.vue

@@ -2,7 +2,7 @@
 import { watch, useId, useTemplateRef, onMounted, ref } from 'vue'
 import { scaleValue } from '../../utils/math/scale-value'
 import { clamp } from '../../utils/math/clamp'
-import { UTooltip } from '../'
+import UTooltip from '../tooltip/u-tooltip.vue'
 
 interface SliderDot {
   value: number

package/components/slider-progress-animation/u-slider-progress-animation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 import '@lottiefiles/lottie-player'
-import { USlider } from '../'
+import USlider from '../slider/u-slider.vue'
 import { Slider } from '../slider/u-slider.vue'
 import { Image } from '../../elements/types'
 

package/components/table/table-cell.scss

@@ -27,3 +27,12 @@
   vertical-align: middle;
   color: var(--e-c-secondary-05-500);
 }
+
+.table-cell__dot {
+  align-self: center;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: transparent;
+}

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIcon from '../../elements/icon/u-icon.vue'
 import UTooltip from '../tooltip/u-tooltip.vue'
-import { UBadge } from '../'
+import UBadge from '../badge/u-badge.vue'
 import { Badge } from '../badge/u-badge.vue'
 import { TableCellIconColor } from './table.type'
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 
 interface Props {
   label?: string

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

@@ -7,6 +7,7 @@ interface Props extends TableCellBase {
   infoText?: string
   textStyle?: TableCellTextStyle
   nowrap?: boolean
+  dotColor?: string
 }
 
 const {
@@ -15,6 +16,7 @@ const {
   hAlign = TableCellHAlign.left,
   vAlign = TableCellVAlign.center,
   nowrap = false,
+  dotColor = '',
 } = defineProps<Props>()
 </script>
 
@@ -24,6 +26,7 @@ const {
     :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
     <div :class="['cell-content', `text-${textStyle}`, { nowrap }]">
+      <span v-if="dotColor" class="table-cell__dot" :style="{ backgroundColor: dotColor }"></span>
       <slot><span v-html="text" /></slot>
     </div>
 

package/components/text-block/u-text-block.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 
 interface Props {
   variant: 'lead' | 'sub'

package/dist/base-style.css

@@ -317,8 +317,8 @@ body {
   --e-c-signal-02-700-rgb: 204, 122, 0;
   --e-c-signal-02-900: #703600;
   --e-c-signal-02-900-rgb: 112, 54, 0;
-  --e-c-signal-03-100: #ffb5c4;
-  --e-c-signal-03-100-rgb: 255, 181, 196;
+  --e-c-signal-03-100: #ffccd7;
+  --e-c-signal-03-100-rgb: 255, 204, 215;
   --e-c-signal-03-500: #ff0c3e;
   --e-c-signal-03-500-rgb: 255, 12, 62;
   --e-c-signal-03-700: #b90d31;

package/elements/button/u-button.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { UIcon, ULoader } from '../'
+import ULoader from '../loader/u-loader.vue'
+import UIcon from '../icon/u-icon.vue'
 import { computed } from 'vue'
 
 // TODO: use enums for variant prop.

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

@@ -1,8 +1,41 @@
 .portal-block {
-  // default 'small'
-  margin-bottom: var(--e-space-6);
+  &.bottom-space-0 {
+    margin-bottom: 0;
+  }
+
+  &.bottom-space-100 {
+    margin-bottom: var(--e-space-6);
+  }
 
-  &.big {
+  &.bottom-space-300 {
     margin-bottom: var(--e-space-10);
   }
+
+  &.bottom-space-500 {
+    margin-bottom: var(--e-space-16);
+  }
+
+  &.bottom-space-700 {
+    margin-bottom: var(--e-space-28);
+  }
+
+  &.top-space-0 {
+    margin-top: 0;
+  }
+
+  &.top-space-100 {
+    margin-top: var(--e-space-6);
+  }
+
+  &.top-space-300 {
+    margin-top: var(--e-space-10);
+  }
+
+  &.top-space-500 {
+    margin-top: var(--e-space-16);
+  }
+
+  &.top-space-700 {
+    margin-top: var(--e-space-28);
+  }
 }

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

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+/*
+Preferably only use `bottom-space`.
+`top-space` can make sense for last portal-block for example.
+This works because parent container is `display: block`, meaning that the vertical margins will collapse.
+ */
 interface Props {
   big?: boolean
-  space?: 'small' | 'big'
+  bottomSpace?: '0' | '100' | '300' | '500' | '700'
+  topSpace?: '0' | '100' | '300' | '500' | '700'
 }
 
-const { space = 'small' } = defineProps<Props>()
+const { bottomSpace = '100', topSpace = '0' } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['portal-block', space]">
+  <div :class="['portal-block', `bottom-space-${bottomSpace}`, `top-space-${topSpace}`]">
     <slot />
   </div>
 </template>

package/modules/dialog/dialog.scss

@@ -4,6 +4,7 @@
 
 .dialog-container {
   --overflow-gradient-height: var(--e-space-10);
+  --dialog-max-width: #{a.rem(540)};
 
   padding: 0;
   border: 0;
@@ -26,18 +27,6 @@
     opacity: 0.4;
     animation: fade-in-backdrop var(--e-trs-duration-faster) var(--e-trs-easing-default);
   }
-
-  &.has-header-image {
-    .dialog__header-image-container {
-      display: flex;
-    }
-  }
-
-  &.has-content-image {
-    .dialog__content-image {
-      display: block;
-    }
-  }
 }
 
 .dialog {
@@ -47,14 +36,22 @@
   overflow: auto;
   scrollbar-width: none;
   border-radius: var(--e-brd-radius-3);
-  padding: var(--e-space-7) var(--e-space-7) 0;
+  padding: var(--e-space-8) var(--e-space-8) 0;
   height: a.rem(670);
   max-height: 80vh;
-  max-width: a.rem(540);
+  max-width: var(--dialog-max-width);
   min-width: a.rem(480);
 
-  &.auto-height {
+  &.fit-height {
     height: auto;
+
+    .cta-container {
+      margin-top: 0;
+
+      &::after {
+        content: none;
+      }
+    }
   }
 
   * + .dialog__content-image {
@@ -67,13 +64,14 @@
     min-width: 0;
     height: auto;
     min-height: a.rem(440);
+    padding-top: var(--e-space-6);
     padding-left: var(--e-space-5);
     padding-right: var(--e-space-5);
   }
 }
 
 .dialog__header-image-container {
-  display: none;
+  display: flex;
   justify-content: center;
   height: a.rem(184);
   margin-bottom: var(--e-space-8);
@@ -105,8 +103,6 @@
 }
 
 .dialog__content-image {
-  display: none;
-
   img {
     width: 100%;
   }
@@ -116,10 +112,10 @@
   position: sticky;
   display: flex;
   flex-direction: column;
-  row-gap: var(--e-space-4);
+  gap: var(--e-space-4) var(--e-space-3);
   bottom: 0;
   margin-top: var(--overflow-gradient-height);
-  padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);
+  padding: var(--e-space-8) var(--e-space-1) var(--e-space-8);
   background-color: var(--e-c-mono-00);
 
   &::after {
@@ -132,13 +128,22 @@
     background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
   }
 
+  &.cta-inline {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
   @include a.bp(m) {
-    padding: var(--e-space-8) 0 var(--e-space-7);
+    padding: var(--e-space-8) 0 var(--e-space-6);
+
+    &.cta-inline {
+      display: flex;
+    }
   }
 }
 
 // MOBILE "MODAL" Variant
-.dialog-container.modal {
+.dialog-container.variant-modal {
   @include a.bp(m) {
     padding-left: a.rem(a.$container-edge-m);
     padding-right: a.rem(a.$container-edge-m);
@@ -151,7 +156,7 @@
 }
 
 // MOBILE "SLIDE-OUT" Variant
-.dialog-container.slideout {
+.dialog-container.variant-slideout {
   @include a.bp(m) {
     align-items: flex-end;
 

package/modules/dialog/u-dialog.vue

@@ -11,9 +11,10 @@ interface Props {
   headerImage?: Image
   contentImage?: Image
   closeBtnLabel?: string
-  autoHeight?: boolean
   modal?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
+  ctaInline?: boolean
+  fitHeight?: boolean
 }
 
 const {
@@ -24,6 +25,8 @@ const {
   contentImage = undefined,
   mobileDialogStyle = 'modal',
   closeBtnLabel = getTranslation('close'),
+  ctaInline = false,
+  fitHeight = false,
 } = defineProps<Props>()
 
 const visible = defineModel<boolean>('visible')
@@ -84,18 +87,11 @@ watch(visible, (newV) => {
   <dialog
     ref="dialog"
     closedby="none"
-    :class="[
-      'dialog-container',
-      mobileDialogStyle,
-      {
-        'has-header-image': !!slots['header-image'] || (headerImage?.src && headerImage?.alt),
-        'has-content-image': !!slots['content-image'] || contentImage,
-      },
-    ]"
+    :class="['dialog-container', `variant-${mobileDialogStyle}`]"
   >
-    <div :class="['dialog', { 'auto-height': autoHeight }]">
-      <div class="dialog__header-image-container">
-        <slot name="header-image">
+    <div :class="['dialog', { 'fit-height': fitHeight }]">
+      <div v-if="!!slots.headerImage || headerImage" class="dialog__header-image-container">
+        <slot name="headerImage">
           <img v-bind="headerImage" />
         </slot>
       </div>
@@ -119,16 +115,17 @@ watch(visible, (newV) => {
           <slot name="custom"></slot>
         </div>
 
-        <div class="dialog__content-image">
-          <slot name="content-image">
+        <div v-if="!!slots.contentImage || contentImage" class="dialog__content-image">
+          <slot name="contentImage">
             <img v-bind="contentImage" />
           </slot>
         </div>
       </div>
 
-      <div class="cta-container">
-        <slot name="cta"></slot>
-        <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
+      <div :class="['cta-container', { 'cta-inline': ctaInline }]">
+        <slot name="cta">
+          <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
+        </slot>
       </div>
     </div>
   </dialog>

package/modules/login-animation/u-login-animation.vue

@@ -48,13 +48,8 @@ const onMousemove = (e) => {
 </script>
 
 <template>
-  <div class="login-animation">
-    <div
-      ref="container"
-      class="login-animation__image"
-      @mousemove="onMousemove"
-      @mouseleave="onMouseleave"
-    >
+  <div ref="container" class="login-animation" @mousemove="onMousemove" @mouseleave="onMouseleave">
+    <div class="login-animation__image">
       <div ref="butterflyWrapper" :class="['login-animation__sprite', { flip: !mouseRightSide }]">
         <USpriteAnimation
           ref="butterfly"

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

@@ -23,24 +23,38 @@ interface Props {
 
 defineProps<Props>()
 
+const model = defineModel<boolean>({ default: false })
+
 const mobilePanelEl = useTemplateRef('mobile-panel')
 const mobileOpen = ref(false)
 const isMobilePanelOpening = ref(false)
 const isMobilePanelClosing = ref(false)
 
-const onToggleMenu = () => {
+const openPanel = () => {
   mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
 
   document.documentElement.classList.toggle('navigation-toolbar-mobile-open', true)
   isMobilePanelOpening.value = true
 }
 
-const onNavClose = () => {
+const closePanel = () => {
   mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
 
   isMobilePanelClosing.value = true
 }
 
+const onToggleMenu = () => {
+  openPanel()
+
+  model.value = true
+}
+
+const onNavClose = () => {
+  closePanel()
+
+  model.value = false
+}
+
 const onMobilePanelTransitionEnd = (e) => {
   if (e.target !== mobilePanelEl.value) {
     return
@@ -58,6 +72,14 @@ const onMobilePanelTransitionEnd = (e) => {
 watch(mobileOpen, (newV) => {
   document.documentElement.classList.toggle('navigation-toolbar-mobile-open', newV)
 })
+
+watch(model, (newV) => {
+  if (newV === true) {
+    openPanel()
+  } else {
+    closePanel()
+  }
+})
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,20 +24,20 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@lottiefiles/dotlottie-web": "^0.60.0",
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^22.19.2",
-    "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.22",
-    "chokidar": "^4.0.3",
+    "@types/node": "^25.0.3",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.23",
+    "chokidar": "^5.0.0",
     "postcss": "^8.5.6",
-    "sass": "^1.96.0",
+    "sass": "^1.97.1",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-vue": "^0.10.10",
-    "@lottiefiles/dotlottie-web": "^0.58.1",
+    "@lottiefiles/dotlottie-vue": "^0.10.12",
     "@lottiefiles/lottie-player": "^2.0.12",
-    "gsap": "^3.14.1",
+    "gsap": "^3.14.2",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {

package/utils/http/url.js

@@ -0,0 +1,25 @@
+/**
+ * Create query parameter for an url with an object or an array
+ * INFO: Use an array as parameter if you have multiple values for a key
+ *
+ * @param url {string} - url to append the query parameters
+ * @param params {(object | Array)} - object with key, value as query parameter
+ * e.q object => random/testing, data = {'test': 1, 'hello': 'world'} => random/testing?test=1&hello=world
+ * e.q array => random/testing, data = [['test', 2], ['hello', 'earth']] => random/testing?test=2&hello=earth
+ *
+ * @returns {string}
+ */
+export function addQueryParameter(url, params) {
+  const queryParams = []
+
+  if (Array.isArray(params)) {
+    queryParams.push(params.map((param) => param.map(encodeURIComponent)))
+  } else {
+    queryParams.push(Object.keys(params).map((key) => [key, params[key]].map(encodeURIComponent)))
+  }
+
+  const queryString = queryParams.map((param) =>
+    param.map((keyValue) => keyValue.join('=')).join('&'),
+  )
+  return `${url}?${queryString}`
+}

package/utils/vue/helpers.ts

@@ -0,0 +1,27 @@
+// From https://github.com/vuejs/core/issues/4733
+
+import { Comment, Text, Fragment, type Slot, type VNode } from 'vue'
+
+export function hasSlotContent(slot: Slot | undefined | null, props: any = {}) {
+  return !isSlotEmpty(slot, props)
+}
+
+export function isSlotEmpty(slot: Slot | undefined | null, props: any = {}) {
+  return isVNodeEmpty(slot?.(props))
+}
+
+export function isVNodeEmpty(vnode: VNode | VNode[] | undefined | null) {
+  return (
+    !vnode ||
+    asArray(vnode).every(
+      (vnode) =>
+        vnode.type === Comment ||
+        (vnode.type === Text && !vnode.children?.length) ||
+        (vnode.type === Fragment && !vnode.children?.length),
+    )
+  )
+}
+
+export function asArray<T>(arg: T | T[] | null) {
+  return Array.isArray(arg) ? arg : arg !== null ? [arg] : []
+}

package/wizard/wizard-outro/u-wizard-outro.vue

@@ -7,13 +7,16 @@ interface Props {
   title?: string
   text?: string
   image?: Image
+
   cta?: Cta
 }
 
 const { text = '', image = undefined, cta = undefined, title = '' } = defineProps<Props>()
 
 const slots = useSlots()
+
 const hasCta = computed(() => !!slots.cta || cta)
+
 const hasText = computed(() => !!slots.text || text)
 </script>