@energie360/ui-library 0.1.18 → 0.1.19

package/base/_input-resets.scss

@@ -47,6 +47,9 @@ textarea {
 }
 
 input[type='number'] {
+  // stylelint-disable
+  -moz-appearance: textfield;
+
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     appearance: none;

package/components/card-highlight/card-highlight.scss

@@ -1,5 +1,16 @@
 @use '../../base/abstracts' as a;
 
+.card-highlight-container {
+  container: card-highlight / inline-size;
+  height: 100%;
+
+  @container card-highlight (width >= 900px) {
+    .card-highlight__image-col {
+      padding-right: var(--e-space-20);
+    }
+  }
+}
+
 .card-highlight {
   position: relative;
   display: flex;
@@ -53,6 +64,12 @@
   flex: 1 1 auto;
   max-width: 60%;
   align-self: center;
+  display: flex;
+  justify-content: flex-end;
+
+  img {
+    max-height: a.rem(225);
+  }
 
   @include a.bp(m) {
     max-width: none;

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

@@ -5,7 +5,7 @@ import { UIcon } from '../../elements'
 interface Props {
   title?: string
   text?: string
-  image: Image
+  image?: Image
   badgeIcon?: string
 }
 
@@ -13,29 +13,42 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="card-highlight">
-    <div class="card-highlight__content-col">
-      <h3 v-if="$slots.title || title" class="card-highlight__title">
-        <slot name="title">{{ title }}</slot>
-      </h3>
-
-      <div v-if="$slots.text || text" class="card-highlight__text">
-        <slot name="text">
-          <div v-html="text"></div>
-        </slot>
+  <div class="card-highlight-container">
+    <div class="card-highlight">
+      <div class="card-highlight__content-col">
+        <h3 v-if="$slots.title || title" class="card-highlight__title">
+          <slot name="title">{{ title }}</slot>
+        </h3>
+
+        <div v-if="$slots.text || text" class="card-highlight__text">
+          <slot name="text">
+            <div v-html="text"></div>
+          </slot>
+        </div>
       </div>
-    </div>
 
-    <div v-if="$slots.image || image" class="card-highlight__image-col">
-      <slot name="image">
-        <img v-bind="image" />
-      </slot>
-    </div>
+      <div v-if="$slots.image || image" class="card-highlight__image-col">
+        <div>
+          <slot name="image">
+            <img v-bind="image" />
+          </slot>
+        </div>
+      </div>
 
-    <div v-if="badgeIcon" class="card-highlight__badge-icon">
-      <UIcon :name="badgeIcon" />
+      <div v-if="badgeIcon" class="card-highlight__badge-icon">
+        <UIcon :name="badgeIcon" />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss" src="./card-highlight.scss"></style>
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+.card-highlight__image-col {
+  :slotted(img) {
+    max-height: a.rem(225);
+  }
+}
+</style>

package/components/chip/chip.scss

@@ -0,0 +1,25 @@
+@use '../../base/abstracts' as a;
+
+.chip {
+  background-color: var(--e-c-mono-50);
+  border: 1px solid var(--e-c-mono-200);
+  border-radius: var(--e-brd-radius-2);
+  padding: var(--e-space-1_5) var(--e-space-2);
+  display: flex;
+  align-items: center;
+  column-gap: var(--e-space-1);
+}
+
+.chip__icon {
+  color: var(--e-c-mono-700);
+}
+
+.chip__label {
+  @include a.type(200, strong);
+}
+
+.chip__caption {
+  @include a.type(50, strong);
+
+  color: var(--e-c-mono-700);
+}

package/components/chip/u-chip.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { UIcon } from '../../elements'
+
+interface Props {
+  caption?: string
+  label?: string
+  icon?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="chip">
+    <span v-if="icon" class="chip__icon">
+      <UIcon :name="icon"></UIcon>
+    </span>
+
+    <div class="chip__label">
+      <p v-if="$slots.caption || caption" class="chip__caption">
+        <slot name="caption">{{ caption }}</slot>
+      </p>
+
+      <p>
+        <slot>{{ label }}</slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./chip.scss"></style>

package/components/index.js

@@ -2,6 +2,8 @@
  * It's not recommended to import components from this file, because tree-shaking won't work then.
  * -> https://vite.dev/guide/performance#avoid-barrel-files
  */
+import exp from 'node:constants'
+
 export { default as UAccordionItem } from './accordion-item/u-accordion-item.vue'
 
 // Cards
@@ -64,3 +66,5 @@ export { default as UDataCardGroup } from './data-card-group/u-data-card-group.v
 export { default as USearchGroup } from './search-group/u-search-group.vue'
 export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.vue'
 export { default as UCardHighlight } from './card-highlight/u-card-highlight.vue'
+export { default as URating } from './rating/u-rating.vue'
+export { default as UChip } from './chip/u-chip.vue'

package/components/rating/rating.scss

@@ -0,0 +1,76 @@
+@use '../../base/abstracts' as a;
+@use '../../base/accessibility';
+
+$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+@keyframes thumbs-up-down-anim {
+  0% {
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    transform: rotate(0);
+  }
+}
+
+.rating {
+  display: flex;
+  column-gap: var(--e-space-0_5);
+}
+
+.rating__button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: a.rem(36);
+  height: a.rem(36);
+  color: var(--e-c-mono-700);
+  border-radius: var(--e-brd-radius-1);
+  transition: background-color a.$trs-default;
+
+  &:hover {
+    background-color: var(--e-c-mono-00);
+
+    .rating__button-tooltip {
+      opacity: 1;
+      transform: translateY(100%);
+    }
+  }
+
+  &.up .icon {
+    transform-origin: bottom left;
+  }
+
+  &.down .icon {
+    transform-origin: bottom right;
+  }
+
+  &.active {
+    .icon {
+      animation-name: thumbs-up-down-anim;
+      animation-duration: var(--e-trs-duration-faster);
+      animation-iteration-count: 1;
+      animation-timing-function: $ease-in-out-back;
+      animation-delay: 50ms;
+    }
+  }
+}
+
+.rating__button-tooltip {
+  @include a.type(100);
+
+  position: absolute;
+  opacity: 0;
+  padding: var(--e-space-1) var(--e-space-2);
+  white-space: nowrap;
+  border-radius: var(--e-brd-radius-2);
+  background-color: var(--e-c-mono-900);
+  color: var(--e-c-mono-00);
+  bottom: calc(var(--e-space-2) * -1);
+  transform: translateY(85%);
+  transition:
+    opacity a.$trs-default,
+    transform a.$trs-default;
+  pointer-events: none;
+}

package/components/rating/u-rating.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UIcon } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  likeText?: string
+  dislikeText?: string
+}
+
+defineProps<Props>()
+const emit = defineEmits(['like', 'dislike', 'cancel'])
+
+const likeActive = ref(false)
+const dislikeActive = ref(false)
+
+const onLike = () => {
+  if (!likeActive.value) {
+    likeActive.value = true
+    dislikeActive.value = false
+    emit('like')
+    return
+  }
+
+  if (likeActive.value) {
+    likeActive.value = false
+    dislikeActive.value = false
+    emit('cancel')
+  }
+}
+const onDislike = () => {
+  if (!dislikeActive.value) {
+    dislikeActive.value = true
+    likeActive.value = false
+    emit('dislike')
+    return
+  }
+
+  if (dislikeActive.value) {
+    dislikeActive.value = false
+    likeActive.value = false
+    emit('cancel')
+  }
+}
+</script>
+
+<template>
+  <div class="rating">
+    <button :class="['rating__button', 'up', { active: likeActive }]" type="button" @click="onLike">
+      <UIcon :name="likeActive ? 'thumbs-up-active' : 'thumbs-up'" />
+
+      <span class="visually-hidden">
+        {{ likeText || getTranslation('like') }}
+      </span>
+
+      <span class="rating__button-tooltip" aria-hidden="true">
+        {{ likeText || getTranslation('like') }}
+      </span>
+    </button>
+
+    <button
+      :class="['rating__button', 'down', { active: dislikeActive }]"
+      type="button"
+      @click="onDislike"
+    >
+      <UIcon :name="dislikeActive ? 'thumbs-down-active' : 'thumbs-down'" />
+
+      <span class="visually-hidden">
+        {{ dislikeText || getTranslation('dislike') }}
+      </span>
+
+      <span class="rating__button-tooltip" aria-hidden="true">
+        {{ dislikeText || getTranslation('dislike') }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./rating.scss"></style>

package/dist/base-style.css

@@ -138,6 +138,9 @@ textarea {
   resize: vertical;
 }
 
+input[type=number] {
+  -moz-appearance: textfield;
+}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;

package/dist/base-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../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/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;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;;;AErB+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;;;AAIA;EAEE;EACA;;;AEpDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ATQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AU3CJ;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","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../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/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;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;;;AErB+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;;;ATQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AU3CJ;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/elements/numeric-stepper/u-numeric-stepper.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
-import { computed, ref, useTemplateRef, useId, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, useId, nextTick, onMounted } from 'vue'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
@@ -29,6 +29,7 @@ const {
 const cId = `numeric-stepper-${useId()}`
 
 const model = defineModel<string | number>()
+const emit = defineEmits(['input', 'focus', 'focusout'])
 
 const input = useTemplateRef('input')
 
@@ -57,24 +58,24 @@ const onHoverOut = () => {
 }
 
 const onStepDown = () => {
-  model.value = (Number(model.value) - Number(step)).toString()
+  input.value.stepDown()
+  model.value = Number(input.value.value)
+
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
 const onStepUp = () => {
-  model.value = (Number(model.value) + Number(step)).toString()
+  input.value.stepUp()
+  model.value = Number(input.value.value)
 
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
-const onInput = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-
+const checkMinMax = () => {
   if (min !== '') {
     isMin.value = Number(model.value) <= Number(min)
   }
@@ -84,16 +85,28 @@ const onInput = (e) => {
   }
 }
 
+const onInput = () => {
+  checkMinMax()
+
+  // Is this necessary?
+  // If we use v-model this wouldn't be needed.
+  emit('input', model.value)
+}
+
 const stepButtonUpDisabled = computed(() => disabled || readonly || isMax.value)
 const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.value)
+
+onMounted(() => {
+  checkMinMax()
+})
 </script>
 
 <template>
   <div :class="['numeric-stepper', classes]" @mouseenter="onHover" @mouseleave="onHoverOut">
     <label class="visually-hidden" :for="cId">{{ label }}</label>
     <div class="control">
-      <slot name="input"
-        ><input
+      <slot name="input">
+        <input
           :id="cId"
           ref="input"
           v-model="model"
@@ -102,8 +115,12 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
           :min
           :max
           :step
+          v-bind="$attrs"
+          @focus="$emit('focus', $event)"
+          @focusout="$emit('focusout', $event)"
           @input="onInput"
-      /></slot>
+        />
+      </slot>
     </div>
 
     <button
@@ -128,6 +145,12 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
       <UIcon name="add"></UIcon>
     </button>
   </div>
+
+  <div class="error-message-container">
+    <slot name="error-message">
+      {{ errorMessage }}
+    </slot>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/i18n/i18n.ts

@@ -21,6 +21,8 @@ const translations = {
     maxFileCountAllowed: 'Maximal $COUNT Dateien erlaubt.',
     cancelSearch: 'Suche abbrechen',
     download: 'Herunterladen',
+    like: 'Gefällt mir',
+    dislike: 'Gefällt mir nicht',
   },
   FR: {
     yes: 'Ja',
@@ -44,6 +46,8 @@ const translations = {
     maxFileCountAllowed: 'Maximum de $COUNT fichiers autorisés',
     cancelSearch: 'Annuler la recherche',
     download: 'Télécharger',
+    like: "J'aime ça",
+    dislike: "je ne l'aime pas",
   },
   IT: {
     yes: 'Ja',
@@ -67,6 +71,8 @@ const translations = {
     maxFileCountAllowed: 'Sono consentiti al massimo $COUNT file',
     cancelSearch: 'annullare la ricerca',
     download: 'scaricamento',
+    like: 'Mi piace',
+    dislike: 'Non mi piace',
   },
   EN: {
     yes: 'Ja',
@@ -90,6 +96,8 @@ const translations = {
     maxFileCountAllowed: 'Maximum $COUNT files allowed',
     cancelSearch: 'Cancel search',
     download: 'Download',
+    like: 'I like it',
+    dislike: 'I do not like it',
   },
 }
 

package/layout/index.js

@@ -1,4 +1,5 @@
-export { default as USettingsLayout } from './settings/u-settings-layout.vue'
 export { default as UPortalLayout } from './portal/u-portal.vue'
 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 UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'

package/layout/portal-content-aside/portal-content-aside.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.portal-content-aside-container {
+  container-type: inline-size;
+
+  @container (width <= 1020px) {
+    .portal-content-aside {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--e-space-6);
+    }
+  }
+}
+
+.portal-content-aside {
+  display: grid;
+  grid-template-columns: auto a.rem(320);
+  grid-template-rows: repeat(2, auto);
+  grid-column-gap: var(--e-space-24);
+  grid-row-gap: var(--e-space-12);
+
+  // @include a.bp(lg) {
+  //   display: flex;
+  //   flex-direction: column;
+  //   row-gap: var(--e-space-6);
+  // }
+}
+
+.portal-content-aside__main {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.portal-content-aside__aside {
+  grid-area: 1 / 2 / 3 / 3;
+}

package/layout/portal-content-aside/u-portal-content-aside.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="portal-content-aside-container">
+    <div class="portal-content-aside">
+      <div class="portal-content-aside__main">
+        <slot />
+      </div>
+
+      <aside class="portal-content-aside__aside">
+        <slot name="aside"></slot>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-content-aside.scss"></style>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue'
+
+interface Props {
+  breakpoint: number
+}
+
+const root = useTemplateRef('root')
+const containerWidth = ref(0)
+const resizeObserver = new ResizeObserver((entries) => {
+  containerWidth.value = entries[0].contentBoxSize[0].inlineSize
+})
+
+defineProps<Props>()
+
+onMounted(() => {
+  resizeObserver.observe(root.value)
+})
+
+onUnmounted(() => {
+  resizeObserver.disconnect()
+})
+</script>
+
+<template>
+  <div ref="root" class="responsive-container">
+    <template v-if="containerWidth >= breakpoint">
+      <slot name="above"></slot>
+    </template>
+
+    <template v-else>
+      <slot name="below"></slot>
+    </template>
+  </div>
+</template>

package/modules/dialog/dialog.scss

@@ -53,6 +53,10 @@
   max-width: a.rem(540);
   min-width: a.rem(480);
 
+  &.auto-height {
+    height: auto;
+  }
+
   * + .dialog__content-image {
     margin-top: var(--e-space-5);
   }

package/modules/dialog/u-dialog.vue

@@ -11,6 +11,7 @@ interface Props {
   headerImage?: Image
   contentImage?: Image
   closeBtnLabel?: string
+  autoHeight?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
@@ -82,7 +83,7 @@ watch(visible, (newV) => {
       },
     ]"
   >
-    <div class="dialog">
+    <div :class="['dialog', { 'auto-height': autoHeight }]">
       <div class="dialog__header-image-container">
         <slot name="header-image">
           <img v-bind="headerImage" />

package/package.json

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

package/wizard/index.js

@@ -3,3 +3,4 @@ export { default as UWizardOutro } from './wizard-outro/u-wizard-outro.vue'
 export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
 export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
 export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'
+export { default as UWizardTopBar } from './wizard-top-bar/u-wizard-top-bar.vue'

package/wizard/wizard-top-bar/u-wizard-top-bar.vue

@@ -0,0 +1,31 @@
+<!--<script setup lang="ts">-->
+<!--import { UIcon } from '../../elements'-->
+
+<!--interface Props {-->
+<!--  objectAddress?: string-->
+<!--}-->
+<!--</script>-->
+
+<template>
+  <div class="wizard-top-bar">
+    <div class="container">
+      <div class="wizard-top-bar__inner">
+        <div class="wizard-top-bar__logo">
+          <img src="/static/ui-assets/images/logo.svg" alt="logo" />
+        </div>
+
+        <div class="wizard-top-bar__right-column">
+          <div class="wizard-top-bar__additional">
+            <slot name="additional"></slot>
+          </div>
+
+          <div class="wizard-top-bar__cta">
+            <slot name="cta"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./wizard-top-bar.scss"></style>

package/wizard/wizard-top-bar/wizard-top-bar.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container';
+
+.wizard-top-bar__inner {
+  height: a.rem(98);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wizard-top-bar__logo {
+  flex: 0 0 auto;
+
+  img {
+    height: a.rem(40);
+
+    @include a.bp(lg) {
+      height: a.rem(24);
+    }
+  }
+}
+
+.wizard-top-bar__cta,
+.wizard-top-bar__right-column {
+  display: flex;
+  column-gap: var(--e-space-6);
+}
+
+.wizard-top-bar__right-column {
+  .wizard-top-bar__additional {
+    @include a.bp(m) {
+      display: none;
+    }
+  }
+}

package/layout/settings/settings.scss

@@ -1,33 +0,0 @@
-@use '../../base/abstracts' as a;
-
-.settings-layout {
-  display: grid;
-  grid-template-columns: auto a.rem(320);
-  grid-template-rows: repeat(2, auto);
-  grid-column-gap: var(--e-space-24);
-  grid-row-gap: var(--e-space-12);
-  padding: var(--e-space-10) 0;
-
-  @include a.bp(lg) {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--e-space-6);
-    padding: var(--e-space-6) 0 var(--e-space-10);
-  }
-}
-
-.settings-layout__header {
-  grid-area: 1 / 1 / 2 / 3;
-}
-
-.settings-layout__main {
-  grid-area: 2 / 1 / 3 / 2;
-}
-
-.settings-layout__aside {
-  grid-area: 2 / 2 / 3 / 3;
-}
-
-.settings-layout__title {
-  @include a.type(500, strong);
-}

package/layout/settings/u-settings-layout.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="settings-layout">
-    <div class="settings-layout__header">
-      <h1 class="settings-layout__title">
-        <slot name="title"></slot>
-      </h1>
-    </div>
-
-    <div class="settings-layout__main">
-      <slot name="main"></slot>
-    </div>
-
-    <aside class="settings-layout__aside">
-      <slot name="aside"></slot>
-    </aside>
-  </div>
-</template>
-
-<style scoped lang="scss" src="./settings.scss"></style>