@energie360/ui-library 0.1.38 → 0.1.40

package/base/abstracts/_resets.scss

@@ -5,7 +5,9 @@
     appearance: none;
     border: 0;
     font-family: inherit;
+    font-weight: inherit;
     font-size: inherit;
+    color: inherit;
     background: none;
     text-align: left;
   }

package/components/card-contact/card-contact.scss

@@ -13,17 +13,17 @@
   flex-direction: column;
 }
 
-.card-contact__name {
-  @include a.type(700, strong);
-}
-
 .card-contact__role {
   @include a.type(200);
+}
+
+.card-contact__name {
+  @include a.type(700, strong);
 
   margin-top: var(--e-space-1);
 
   &:has(+ .card-contact__contacts) {
-    margin-bottom: var(--e-space-4);
+    margin-bottom: var(--e-space-2);
   }
 }
 

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

@@ -21,16 +21,16 @@ defineSlots<{
 <template>
   <div class="card-contact">
     <div class="card-contact__left-column">
-      <p class="card-contact__name">
-        <slot name="name">{{ name }}</slot>
-      </p>
-
       <p class="card-contact__role">
         <slot name="role">{{ role }}</slot>
       </p>
 
+      <p class="card-contact__name">
+        <slot name="name">{{ name }}</slot>
+      </p>
+
       <div v-if="$slots.contacts || contacts" class="card-contact__contacts">
-        <URichtext>
+        <URichtext small>
           <slot name="contacts">
             <div v-html="contacts"></div>
           </slot>

package/components/context-menu/u-context-menu.vue

@@ -99,7 +99,7 @@ watch([() => placement, () => offset, () => viewportPadding], () => {
 <template>
   <div class="context-menu" :class="{ 'is-open': isOpen, 'is-closed': !isOpen }">
     <div ref="trigger" class="context-menu__trigger" @click="onToggleMenu">
-      <slot name="trigger"></slot>
+      <slot name="trigger" :is-open="isOpen"></slot>
     </div>
 
     <Transition name="menu" @enter="onEnter" @after-leave="onAfterLeave">

package/components/data-card/data-card.scss

@@ -2,8 +2,20 @@
 
 .data-card {
   padding: var(--e-space-4);
-  border: 1px solid var(--e-c-mono-200);
+  position: relative;
   border-radius: var(--e-brd-radius-2);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--e-c-mono-200);
+    border-radius: var(--e-brd-radius-2);
+    transition: border var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
 }
 
 .data-card__aside-column {

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

@@ -52,3 +52,16 @@ defineProps<Props>()
   @include a.type(100);
 }
 </style>
+
+<style lang="scss">
+.data-card-linked {
+  display: block;
+  border-radius: var(--e-brd-radius-1);
+
+  &:hover {
+    .data-card::before {
+      border: 3px solid var(--e-c-primary-01-200);
+    }
+  }
+}
+</style>

package/components/index.js

@@ -75,3 +75,4 @@ export { default as UDefinitionListItem } from './definition-list-item/u-definit
 export { default as UCardStatistic } from './card-statistic/u-card-statistic.vue'
 export { default as UEmpty } from './empty/u-empty.vue'
 export { default as UButtonGroup } from './button-group/u-button-group.vue'
+export { default as UPortalLogo } from './portal-logo/u-portal-logo.vue'

package/components/navigation-toolbar-link/navigation-toolbar-link.scss

@@ -92,7 +92,7 @@
   }
 
   &:active,
-  &:hover:not(.is-collapsing, .is-expanding) {
+  &:hover:not(.is-collapsing, .is-expanding, .active) {
     background-color: var(--e-c-secondary-01-950);
     color: var(--e-c-primary-01-100);
   }

package/components/portal-logo/portal-logo.scss

@@ -0,0 +1,65 @@
+@use '../../base/abstracts' as a;
+
+.portal-logo {
+  --duration: var(--e-trs-duration-faster);
+
+  position: relative;
+  width: a.rem(196);
+  height: a.rem(40);
+
+  .mini {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+  }
+
+  // Modifiers
+  &.fit-height {
+    height: 100%;
+
+    .large {
+      aspect-ratio: 49 / 10;
+      height: 100%;
+    }
+
+    .mini {
+      aspect-ratio: 1;
+      height: 100%;
+    }
+  }
+
+  // States
+  &.minified {
+    .mini {
+      opacity: 1;
+    }
+
+    .large {
+      opacity: 0;
+    }
+  }
+
+  &.minifying {
+    .mini {
+      opacity: 1;
+      transition: opacity var(--duration) var(--transition-ease-out);
+    }
+
+    .large {
+      opacity: 0;
+      transition: opacity var(--duration) var(--transition-ease-out);
+    }
+  }
+
+  &.expanding {
+    .mini {
+      opacity: 0;
+      transition: opacity var(--duration) var(--transition-ease-out);
+    }
+
+    .large {
+      opacity: 1;
+      transition: opacity var(--duration) var(--transition-ease-out);
+    }
+  }
+}

package/components/portal-logo/u-portal-logo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+
+interface Props {
+  logoImage?: Image
+  logoMinifiedImage?: Image
+  minified?: boolean
+  minifying?: boolean
+  expanding?: boolean
+  fitHeight?: boolean
+}
+
+const {
+  logoImage = {
+    src: '/static/ui-assets/images/logo-white.svg',
+    alt: 'Logo Energie 360°',
+  },
+  logoMinifiedImage = {
+    src: '/static/ui-assets/images/logo-mini.svg',
+    alt: 'Logo Energie 360°',
+  },
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['portal-logo', { minified, minifying, expanding, 'fit-height': fitHeight }]">
+    <img v-bind="logoImage" class="large" />
+    <img v-bind="logoMinifiedImage" class="mini" />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-logo.scss"></style>

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

@@ -22,7 +22,6 @@ const el = useTemplateRef('el')
 const _progress = ref(0)
 const lottiePlayer = ref(null)
 let lottiePlayerInstance = null
-const lottiePlayerSegment = ref([0, 0])
 
 const DotLottieVue = defineAsyncComponent(async () => {
   const { DotLottieVue } = await import('@lottiefiles/dotlottie-vue')
@@ -35,6 +34,8 @@ const observer = new IntersectionObserver(
       observer.disconnect()
 
       setTimeout(() => {
+        _progress.value = progress
+
         // dotLottie Player stuff
         if (lottiePlayer.value) {
           lottiePlayerInstance = lottiePlayer.value.getDotLottieInstance()
@@ -46,12 +47,9 @@ const observer = new IntersectionObserver(
             autoplay: false,
             loop: false,
             speed: 3,
+            segment: [0, scaleValue(_progress.value, 0, 100, 0, dotLottieFrames)],
           })
-          lottiePlayerSegment.value = [0, scaleValue(_progress.value, 0, 100, 0, dotLottieFrames)]
         }
-
-        // Start progress animation
-        _progress.value = progress
       }, 200)
     }
   },
@@ -77,12 +75,7 @@ onMounted(() => {
         <img v-bind="image" />
       </slot>
 
-      <DotLottieVue
-        v-else
-        ref="lottiePlayer"
-        style="height: 100%; width: 100%"
-        :segment="lottiePlayerSegment"
-      ></DotLottieVue>
+      <DotLottieVue v-else ref="lottiePlayer" style="height: 100%; width: 100%" />
     </div>
   </div>
 </template>

package/components/skeleton-loader/skeleton-loader.scss

@@ -1,25 +1,50 @@
 @use '../../base/abstracts' as a;
 
-@keyframes skeleton-animation {
+@keyframes loading-anim {
   0% {
-    background-color: var(--e-c-primary-01-50);
+    transform: translateX(-100%);
+  }
+
+  50% {
+    transform: translateX(0%);
   }
 
   100% {
-    background-color: var(--e-c-primary-01-100);
+    transform: translateX(140%);
   }
 }
 
 @mixin skeleton-base {
+  position: relative;
   background-color: var(--e-c-primary-01-50);
   border-radius: var(--e-brd-radius-2);
+  overflow: hidden;
   width: 100%;
   height: 100%;
-  animation-name: skeleton-animation;
-  animation-duration: var(--e-trs-duration-slower);
-  animation-direction: alternate;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation-name: loading-anim;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    background: linear-gradient(
+      100deg,
+      transparent 10%,
+      var(--e-c-primary-01-100) 50%,
+      transparent 90%
+    );
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+  }
 }
 
 .skeleton-loader.fit {

package/components/table/cell-icon-group.scss

@@ -3,6 +3,7 @@
 .cell-icon-group {
   display: flex;
   column-gap: var(--e-space-2);
+  line-height: 1;
 
   @each $name, $color-var in c.$table-cell-icon-colors {
     .icon-color-#{$name} {

package/components/table/table-cell.mixins.scss

@@ -3,7 +3,7 @@
 @mixin table-cell-base {
   display: table-cell;
   padding: var(--e-space-4);
-  height: a.rem(56);
+  min-height: a.rem(56);
   line-height: 0;
 
   @include a.bp(m) {
@@ -21,6 +21,7 @@
 
     display: inline-flex;
     column-gap: var(--e-space-2);
+    min-height: a.rem(24);
   }
 
   // Horizontal align options

package/components/table/table-heading.scss

@@ -5,6 +5,33 @@
   font-weight: var(--e-type-weight-strong);
 
   @include c.table-cell-base;
+
+  &.sortable {
+    .cell-content {
+      cursor: pointer;
+    }
+
+    .cell-content:hover {
+      color: var(--e-c-primary-01-700);
+
+      .table-heading__sort-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.is-sorted {
+    color: var(--e-c-primary-01-700);
+
+    .table-heading__sort-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.table-heading__sort-icon {
+  align-self: center;
+  opacity: 0;
 }
 
 .cell-content {

package/components/table/table-row.mixins.scss

@@ -0,0 +1,14 @@
+@mixin table-row {
+  display: table-row;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: var(--e-c-mono-100);
+    width: 100%;
+    height: 1px;
+  }
+}

package/components/table/table-row.scss

@@ -1,12 +1,8 @@
 @use '../../base/abstracts' as a;
-
-@mixin table-row {
-  display: table-row;
-  border-bottom: 1px solid var(--e-c-mono-100);
-}
+@use './table-row.mixins' as tr;
 
 .table-row {
-  @include table-row;
+  @include tr.table-row;
 
   &.highlight {
     background-color: var(--e-c-mono-50);

package/components/table/table.type.ts

@@ -29,3 +29,9 @@ export enum TableCellTextStyle {
   normal = 'normal',
   bold = 'bold',
 }
+
+export enum TableHeadingSortOrder {
+  ASC = 'ascending',
+  DESC = 'descending',
+  None = 'none',
+}

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

@@ -1,9 +1,18 @@
+<script setup lang="ts"></script>
 <template>
   <div class="table-header">
     <slot></slot>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './table-header.scss';
+<style scoped lang="scss" src="./table-header.scss"></style>
+
+<style lang="scss">
+.table-header {
+  &:has(+ .table-row-linked:hover) {
+    .table-row::before {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+}
 </style>

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

@@ -1,19 +1,103 @@
 <script setup lang="ts">
+import { TableHeadingSortOrder } from './table.type'
+import UIcon from '../../elements/icon/u-icon.vue'
+import { computed, nextTick, ref, useId } from 'vue'
+
 interface Props {
   text?: string
   hAlign?: 'left' | 'center' | 'right'
   vAlign?: 'top' | 'center' | 'bottom'
   nowrap?: boolean
+  sortable?: boolean
+  sortColumnId?: string
 }
 
-const { text = '', hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
+const {
+  text = '',
+  hAlign = 'left',
+  vAlign = 'top',
+  sortable = false,
+  sortColumnId = useId(),
+} = defineProps<Props>()
+
+const emits = defineEmits(['sort'])
+
+const sortOrder = defineModel<string>({ default: TableHeadingSortOrder.None })
+
+const sortIcon = computed(() => {
+  let icon = ''
+
+  if (
+    currentSortOrder.value === TableHeadingSortOrder.None ||
+    currentSortOrder.value === TableHeadingSortOrder.ASC
+  ) {
+    icon = 'arrow-up-small'
+  }
+
+  if (currentSortOrder.value === TableHeadingSortOrder.DESC) {
+    icon = 'arrow-down-small'
+  }
+
+  return icon
+})
+
+const currentSortOrder = ref(sortOrder)
+
+const isSorted = computed(() => currentSortOrder.value !== TableHeadingSortOrder.None)
+
+const toggleSortOrder = () => {
+  if (currentSortOrder.value === TableHeadingSortOrder.ASC) {
+    currentSortOrder.value = TableHeadingSortOrder.DESC
+  } else {
+    currentSortOrder.value = TableHeadingSortOrder.ASC
+  }
+}
+
+const onSort = async () => {
+  if (!sortable) {
+    return
+  }
+
+  if (currentSortOrder.value === TableHeadingSortOrder.None) {
+    currentSortOrder.value = TableHeadingSortOrder.ASC
+  } else {
+    toggleSortOrder()
+  }
+
+  await nextTick()
+
+  emits('sort', { sortColumnId, sortOrder: currentSortOrder.value })
+}
 </script>
 
 <template>
-  <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
-    <div :class="['cell-content', { nowrap }]">
+  <div
+    :data-sort-id="sortable ? sortColumnId : null"
+    role="columnheader"
+    :class="[
+      'table-heading',
+      `h-align-${hAlign}`,
+      `v-align-${vAlign}`,
+      { sortable, 'is-sorted': isSorted },
+    ]"
+  >
+    <component
+      :is="sortable ? 'button' : 'div'"
+      :class="['cell-content', { nowrap }]"
+      @click="onSort"
+    >
       <slot>{{ text }}</slot>
-    </div>
+
+      <span class="table-heading__sort-icon">
+        <UIcon
+          :name="sortIcon"
+          :style="{
+            '--icon-width': '16px',
+            '--icon-height': '16px',
+          }"
+        />
+      </span>
+    </component>
   </div>
 </template>
 

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

@@ -13,35 +13,28 @@ defineProps<Props>()
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './table-row.scss';
-</style>
+<style scoped lang="scss" src="./table-row.scss"></style>
 
 <style lang="scss">
-@use './table-row.scss' as tr;
+@use './table-row.mixins.scss' as tr;
+
+.table-row-linked {
+  &:has(+ .table-row-linked:hover) {
+    &::before {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+}
 
 .table-row-linked {
   @include tr.table-row;
 
   transition: background var(--e-trs-duration-faster) var(--e-trs-easing-default);
 
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: transparent;
-    transition: background var(--e-trs-duration-faster) var(--e-trs-easing-default);
-  }
-
   &:hover {
-    position: relative;
     background-color: var(--e-c-primary-01-50);
-    border-bottom: 1px solid var(--e-c-primary-01-100);
 
-    &::after {
+    &::before {
       background-color: var(--e-c-primary-01-100);
     }
   }

package/components/tabs/tabs.scss

@@ -3,6 +3,8 @@
 .tabs {
   $scroll-space: 18px;
 
+  --tabs-gradient-color: #fff;
+
   position: relative;
 
   &::before {
@@ -28,7 +30,11 @@
       right: 0;
       width: 30px;
       height: calc(100% - #{$scroll-space} - 1px);
-      background: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 0%) 100%);
+      background: linear-gradient(
+        270deg,
+        var(--tabs-gradient-color) 0%,
+        rgb(255 255 255 / 0%) 100%
+      );
     }
   }
 
@@ -95,3 +101,13 @@
     }
   }
 }
+
+.tabs.portal {
+  .tabs__row {
+    padding-left: var(--e-space-2);
+
+    @include a.bp(lg) {
+      padding-left: var(--e-space-5);
+    }
+  }
+}

package/components/tabs/u-tabs.vue

@@ -13,9 +13,10 @@ interface Props {
   activation?: 'manual' | 'automatic'
   items?: Tab[]
   noGradient?: boolean
+  variant: 'default' | 'portal'
 }
 
-const { items = [], activation = 'manual' } = defineProps<Props>()
+const { items = [], activation = 'manual', variant = 'portal' } = defineProps<Props>()
 const emit = defineEmits<{ (e: 'tabFocus', id: string): void }>()
 
 const model = defineModel<string>()
@@ -122,7 +123,7 @@ onResize()
 </script>
 
 <template>
-  <div :class="['tabs', { 'no-gradient': noGradient }]">
+  <div :class="['tabs', variant, { 'no-gradient': noGradient }]">
     <div class="tabs__row">
       <div class="tabs__col">
         <div class="tabs__wrapper">

package/dist/base-style.css

@@ -37,7 +37,9 @@ button {
   appearance: none;
   border: 0;
   font-family: inherit;
+  font-weight: inherit;
   font-size: inherit;
+  color: inherit;
   background: none;
   text-align: left;
 }

package/dist/base-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADuBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AEzB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAGF;EAEE;;AAEA;EAEE;EACA;;;AEvDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AChBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AAEA;AAEA;AAEA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}
+{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADqBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AEzB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAGF;EAEE;;AAEA;EAEE;EACA;;;AEvDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AChBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AAEA;AAEA;AAEA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}

package/dist/layout/split.css

@@ -68,6 +68,9 @@
   }
 }
 
+.split__top-bar {
+  flex: 0 0 auto;
+}
 @media (max-width: 1020px) {
   .split__top-bar {
     grid-area: content;
@@ -81,10 +84,13 @@
 }
 
 .split__content {
+  display: flex;
+  align-items: center;
   padding-top: var(--e-space-20);
   padding-bottom: var(--e-space-20);
   margin: 0 auto;
   width: 25rem;
+  flex: 1 0 auto;
 }
 @media (max-width: 1020px) {
   .split__content {
@@ -95,6 +101,7 @@
 }
 @media (max-width: 740px) {
   .split__content {
+    align-items: flex-start;
     order: 2;
     width: auto;
     margin-top: 0;
@@ -112,7 +119,7 @@
 }
 
 .split__footer {
-  margin-top: auto;
+  flex: 0 0 auto;
 }
 @media (max-width: 1020px) {
   .split__footer {

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACwCA;EAxCE;EACA;EACA;EACA;EACA;;ACYA;EDwBF;IAjCI;IACA;;;ACQF;EDwBF;IA5BI;IACA;;;ACGF;EDwBF;IAvBI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;ADrBF;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACwCA;EAxCE;EACA;EACA;EACA;EACA;;ACYA;EDwBF;IAjCI;IACA;;;ACQF;EDwBF;IA5BI;IACA;;;ACGF;EDwBF;IAvBI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AD7CA;ECsCF;IAUI;IAIA;IACA;;;ADrDF;ECsCF;IAmBI;IACA;IACA;IACA;IACA;IACA;IACA;;;AD/DF;ECsCF;IA6BI;IACA;IACA;;;;AAIJ;EACE;;AD1EA;ECyEF;IAII;;;AD7EF;ECyEF;IAQI","file":"split.css"}

package/elements/icon-button/_icon-button-plain.scss

@@ -24,6 +24,11 @@
   }
 
   &:disabled {
+    &::before {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
     .icon,
     e-icon {
       --icon-fill-color: var(--e-c-mono-500);

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

@@ -42,4 +42,16 @@
   &:last-child {
     margin-bottom: 0;
   }
+
+  // Modifiers
+  &.fill-centered {
+    flex: 1 0 auto;
+    display: flex;
+    width: 100%;
+    align-items: center;
+
+    .portal-block__inner {
+      width: 100%;
+    }
+  }
 }

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

@@ -2,20 +2,31 @@
 /*
 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.
+IMPORTANT: Because when the parent container (e.g., `.portal-main__content`) is flexbox, the vertical margins won't collapse.
+Also, `fill-centered` will only work with a flexbox parent.
  */
 interface Props {
   big?: boolean
   bottomSpace?: '0' | '100' | '300' | '500' | '700'
   topSpace?: '0' | '100' | '300' | '500' | '700'
+  fillCentered?: boolean
 }
 
-const { bottomSpace = '100', topSpace = '0' } = defineProps<Props>()
+const { bottomSpace = '100', topSpace = '0', fillCentered = false } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['portal-block', `bottom-space-${bottomSpace}`, `top-space-${topSpace}`]">
-    <slot />
+  <div
+    :class="[
+      'portal-block',
+      `bottom-space-${bottomSpace}`,
+      `top-space-${topSpace}`,
+      { 'fill-centered': fillCentered },
+    ]"
+  >
+    <div class="portal-block__inner">
+      <slot />
+    </div>
   </div>
 </template>
 

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

@@ -82,6 +82,9 @@
   padding-top: var(--e-space-10);
   padding-bottom: var(--e-space-10);
   flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
 
   @include c.portal-content-container;
 

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

@@ -35,3 +35,11 @@ const portalFooterSlot = inject('portal-footer-slot')
 </template>
 
 <style scoped lang="scss" src="./portal-main.scss"></style>
+
+<style scoped lang="scss">
+.portal-main__sub-navigation {
+  :slotted(.tabs) {
+    --tabs-gradient-color: var(--e-c-mono-50);
+  }
+}
+</style>

package/layout/split/split.scss

@@ -45,7 +45,7 @@ $split-top-bar-height-mobile: 72px;
 }
 
 .split__top-bar {
-  // height: a.rem($split-top-bar-height);
+  flex: 0 0 auto;
 
   @include a.bp(lg) {
     grid-area: content;
@@ -58,10 +58,13 @@ $split-top-bar-height-mobile: 72px;
 }
 
 .split__content {
+  display: flex;
+  align-items: center;
   padding-top: var(--e-space-20);
   padding-bottom: var(--e-space-20);
   margin: 0 auto;
   width: a.rem(400);
+  flex: 1 0 auto;
 
   @include a.bp(lg) {
     margin-top: a.rem(
@@ -73,6 +76,7 @@ $split-top-bar-height-mobile: 72px;
   }
 
   @include a.bp(m) {
+    align-items: flex-start;
     order: 2;
     width: auto;
     margin-top: 0;
@@ -89,7 +93,7 @@ $split-top-bar-height-mobile: 72px;
 }
 
 .split__footer {
-  margin-top: auto;
+  flex: 0 0 auto;
 
   @include a.bp(lg) {
     grid-area: footer;

package/layout/split/u-split-layout.vue

@@ -9,7 +9,9 @@
     </div>
 
     <div class="split__content">
-      <slot name="content"></slot>
+      <div class="split__content-inner">
+        <slot name="content"></slot>
+      </div>
     </div>
 
     <div class="split__footer">

package/modules/footer/footer.scss

@@ -2,9 +2,35 @@
 @use '../../elements/text-link/text-link.scss' as t;
 @use '../../layout/container/container.scss' as l;
 
+@mixin mobile-layout {
+  .footer__bottom-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footer__meta-navigation {
+    flex-direction: column;
+    gap: var(--e-space-4);
+    margin-bottom: var(--e-space-8);
+  }
+
+  .footer__copyright {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  .footer__language-nav {
+    position: relative;
+    margin-bottom: calc(var(--e-space-8) + #{a.rem(18)});
+  }
+}
+
 .footer {
   &.portal,
   &.reduced {
+    container-type: inline-size;
+
     .footer__top {
       display: none;
     }
@@ -20,42 +46,37 @@
 
     .footer__meta-navigation {
       order: 2;
+      margin-bottom: 0;
     }
 
     .footer__language-nav {
       position: static;
     }
+
+    .footer__bottom {
+      background-color: var(--e-c-mono-50);
+      padding-bottom: var(--e-space-8);
+    }
+
+    .footer__bottom-row {
+      min-height: a.rem(30);
+      align-items: center;
+    }
   }
 
-  &.portal {
-    container-type: inline-size;
+  &.reduced {
+    @container (width < 900px) {
+      @include mobile-layout;
+    }
+  }
 
+  &.portal {
     .footer__container {
       @include l.portal-content-container;
     }
 
     @container (width < 820px) {
-      // Mobile Layout
-      .footer__bottom-row {
-        flex-direction: column;
-      }
-
-      .footer__meta-navigation {
-        flex-direction: column;
-        gap: var(--e-space-4);
-        margin-bottom: var(--e-space-8);
-      }
-
-      .footer__copyright {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-      }
-
-      .footer__language-nav {
-        position: relative;
-        margin-bottom: calc(var(--e-space-8) + #{a.rem(18)});
-      }
+      @include mobile-layout;
     }
   }
 }

package/modules/footer/footer.types.ts

@@ -0,0 +1,5 @@
+export enum FooterVariant {
+  normal = 'normal',
+  reduced = 'reduced',
+  portal = 'portal',
+}

package/modules/footer/u-footer.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { FooterVariant } from './footer.types'
+
 interface Props {
-  variant?: 'normal' | 'reduced' | 'portal'
+  variant?: FooterVariant
 }
 
-const { variant = 'normal' } = defineProps<Props>()
+const { variant = FooterVariant.normal } = defineProps<Props>()
 </script>
 
 <template>
@@ -48,6 +50,4 @@ const { variant = 'normal' } = defineProps<Props>()
   </div>
 </template>
 
-<style lang="scss">
-@use './footer.scss';
-</style>
+<style lang="scss" src="./footer.scss"></style>

package/modules/navigation-panel/navigation-panel.scss

@@ -12,6 +12,7 @@
     width: 100%;
     height: auto;
     padding: var(--e-space-4) var(--e-space-5) 0;
+    border-right: 0;
   }
 }
 

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

@@ -3,6 +3,7 @@ import { UNavigationToolbarLink } from '../../components'
 import { UContextMenu } from '../../components'
 import { Image } from '../../elements/types'
 import { ref, watch, useTemplateRef } from 'vue'
+import { hasSlotContent } from '../../utils/vue/helpers'
 
 interface MenuButton {
   icon: string
@@ -10,17 +11,31 @@ interface MenuButton {
 }
 
 interface Props {
-  logoLink: {
+  logoLink?: {
     href: string
     target: string
   }
   menuButton: MenuButton
   collapsed?: boolean
-  logoImage: Image
-  logoMinifiedImage: Image
+  logoImage?: Image
+  logoMinifiedImage?: Image
 }
 
-const { collapsed = false } = defineProps<Props>()
+const {
+  collapsed = false,
+  logoImage = {
+    src: '/static/ui-assets/images/logo-white.svg',
+    alt: 'Logo Energie 360°',
+  },
+  logoMinifiedImage = {
+    src: '/static/ui-assets/images/logo-mini.svg',
+    alt: 'Logo Energie 360°',
+  },
+  logoLink = {
+    href: '',
+    target: '_self',
+  },
+} = defineProps<Props>()
 
 const el = useTemplateRef('el')
 const isCollapsed = ref(collapsed)
@@ -61,7 +76,12 @@ watch(
       },
     ]"
   >
+    <div v-if="hasSlotContent($slots.logo)" style="margin-bottom: var(--e-space-12)">
+      <slot name="logo" :is-collapsing="isCollapsing" :is-expanding="isExpanding" />
+    </div>
+
     <a
+      v-else
       :class="[
         'navigation-toolbar-side__logo',
         { 'is-collapsing': isCollapsing, 'is-expanding': isExpanding },
@@ -81,9 +101,9 @@ watch(
 
     <div class="navigation-toolbar-side__menu-ctas">
       <UContextMenu placement="right-bottom">
-        <template #trigger>
+        <template #trigger="{ isOpen }">
           <button class="navigation-toolbar-side__menu-cta" type="button">
-            <UNavigationToolbarLink v-bind="menuButton" :collapsed />
+            <UNavigationToolbarLink v-bind="menuButton" :collapsed :active="isOpen" />
           </button>
         </template>
 

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

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-toolbar-top {
   --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
@@ -74,8 +74,10 @@
 }
 
 .navigation-toolbar-top__top-bar-logo {
+  height: a.rem(24);
+
   img {
-    height: a.rem(24);
+    height: 100%;
   }
 }
 

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

@@ -93,18 +93,18 @@ watch(model, (newV) => {
     ]"
   >
     <div class="navigation-toolbar-top__top-bar">
-      <a
-        class="navigation-toolbar-top__top-bar-logo"
-        :href="logoLink.href"
-        :target="logoLink.target"
-      >
-        <img :src="logoImage.src" :alt="logoImage.alt" />
-      </a>
+      <div class="navigation-toolbar-top__top-bar-logo">
+        <slot name="logo">
+          <a :href="logoLink.href" :target="logoLink.target">
+            <img :src="logoImage.src" :alt="logoImage.alt" />
+          </a>
+        </slot>
+      </div>
 
       <div class="navigation-toolbar-top__top-bar-ctas">
         <UContextMenu placement="bottom-full">
-          <template #trigger>
-            <UNavigationToolbarLink v-bind="menuButton" collapsed label-hidden />
+          <template #trigger="{ isOpen }">
+            <UNavigationToolbarLink v-bind="menuButton" collapsed label-hidden :active="isOpen" />
           </template>
 
           <slot name="contextMenuLinks"></slot>
@@ -125,13 +125,13 @@ watch(model, (newV) => {
       class="navigation-toolbar-top__nav-panel"
       :class="{ 'is-opening': isMobilePanelOpening, 'is-closing': isMobilePanelClosing }"
     >
-      <a
-        class="navigation-toolbar-top__nav-panel-logo"
-        :href="logoLink.href"
-        :target="logoLink.target"
-      >
-        <img :src="logoImage.src" :alt="logoImage.alt" />
-      </a>
+      <div class="navigation-toolbar-top__nav-panel-logo">
+        <slot name="panelLogo">
+          <a :href="logoLink.href" :target="logoLink.target">
+            <img :src="logoImage.src" :alt="logoImage.alt" />
+          </a>
+        </slot>
+      </div>
 
       <div class="navigation-toolbar-top__nav-panel-close">
         <UIconButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "",
   "type": "module",
   "main": "dist/index.js",