@energie360/ui-library 0.1.21 → 0.1.23

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

@@ -4,83 +4,77 @@
   container: card-highlight / inline-size;
   height: 100%;
 
-  @container card-highlight (width >= 900px) {
+  @container (width <= 650px) {
+    .card-highlight {
+      display: flex;
+      flex-direction: column;
+    }
+
     .card-highlight__image-col {
-      padding-right: var(--e-space-20);
+      justify-content: center;
+    }
+
+    .card-highlight__chip {
+      // Forces child element (<UChip>) to be full-width.
+      display: grid;
+      width: 100%;
     }
   }
 }
 
 .card-highlight {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+  grid-column-gap: var(--e-space-4);
+  grid-row-gap: var(--e-space-4);
+  padding: var(--e-space-6);
   border: 1px solid var(--e-c-primary-01-100);
   border-radius: var(--e-brd-radius-2);
   background-color: var(--e-c-primary-01-50);
-  padding: var(--e-space-6);
-  gap: var(--e-space-4);
   height: 100%;
-  justify-content: space-between;
+}
 
-  @include a.bp(m) {
-    padding: var(--e-space-5);
-  }
+.card-highlight__title {
+  @include a.type(300, strong);
 
-  @include a.bp(s) {
-    padding: var(--e-space-4);
-  }
+  grid-area: 1 / 1 / 2 / 2;
+  color: var(--e-c-secondary-01-950);
+}
+
+.card-highlight__image-col {
+  grid-area: 1 / 2 / 3 / 3;
+  display: flex;
+  align-items: center;
 
-  @include a.bp(m) {
-    flex-direction: column;
-    align-items: flex-start;
+  img {
+    max-height: a.rem(225);
   }
 }
 
+.card-highlight__content-col {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
 .card-highlight__content-col {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   row-gap: var(--e-space-4);
-
-  @include a.bp(m) {
-    width: calc(100% - 40px);
-  }
-}
-
-.card-highlight__title {
-  @include a.type(300, strong);
-
-  color: var(--e-c-secondary-01-950);
 }
 
 .card-highlight__text {
   @include a.type(200);
 
-  margin-top: auto;
   color: var(--e-c-secondary-01-900);
 }
 
-.card-highlight__image-col {
-  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;
-  }
-}
-
 .card-highlight__badge-icon {
   position: absolute;
   padding: 5px;
-  top: var(--e-space-4);
-  right: var(--e-space-4);
+  top: var(--e-space-5);
+  right: var(--e-space-5);
   background-color: var(--e-c-mono-00);
   color: var(--e-c-secondary-01-950);
   border-radius: 100%;

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import { Chip } from '../chip/u-chip.vue'
 import { Image } from '../../elements/types'
 import { UIcon } from '../../elements'
+import { UChip } from '../'
 
 interface Props {
   title?: string
   text?: string
   image?: Image
   badgeIcon?: string
+  chip?: Chip
 }
 
 defineProps<Props>()
@@ -15,22 +18,26 @@ defineProps<Props>()
 <template>
   <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>
+      <h3 v-if="$slots.title || title" class="card-highlight__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+
+      <div v-if="$slots.image || image" class="card-highlight__image-col" aria-hidden="true">
+        <slot name="image">
+          <img v-bind="image" />
+        </slot>
+      </div>
 
+      <div class="card-highlight__content-col">
         <div v-if="$slots.text || text" class="card-highlight__text">
           <slot name="text">
             <div v-html="text"></div>
           </slot>
         </div>
-      </div>
 
-      <div v-if="$slots.image || image" class="card-highlight__image-col">
-        <div>
-          <slot name="image">
-            <img v-bind="image" />
+        <div v-if="$slots.info || chip" class="card-highlight__chip">
+          <slot name="info">
+            <UChip v-bind="chip"></UChip>
           </slot>
         </div>
       </div>

package/components/chip/chip.scss

@@ -4,8 +4,8 @@
   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;
+  padding: var(--e-space-1_5) var(--e-space-3);
+  display: inline-flex;
   align-items: center;
   column-gap: var(--e-space-1);
 }

package/components/chip/u-chip.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { UIcon } from '../../elements'
 
-interface Props {
+export interface Chip {
   caption?: string
   label?: string
   icon?: string
 }
 
-defineProps<Props>()
+defineProps<Chip>()
 </script>
 
 <template>

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

@@ -6,9 +6,9 @@
   border-radius: var(--e-brd-radius-2);
 }
 
-.data-card__main {
-  display: flex;
-  column-gap: var(--e-space-2);
+.data-card__aside-column {
+  float: right;
+  margin-left: var(--e-space-2);
 }
 
 .data-card__list {

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

@@ -15,6 +15,10 @@ defineProps<Props>()
 <template>
   <div class="data-card">
     <div class="data-card__main">
+      <div v-if="$slots.aside" class="data-card__aside-column">
+        <slot name="aside" />
+      </div>
+
       <dl class="data-card__list">
         <slot>
           <div v-for="(item, idx) in data" :key="idx">
@@ -23,10 +27,6 @@ defineProps<Props>()
           </div>
         </slot>
       </dl>
-
-      <div v-if="$slots.aside" class="data-card__aside-column">
-        <slot name="aside" />
-      </div>
     </div>
 
     <div v-if="$slots.ctas" class="data-card__ctas">

package/components/index.js

@@ -62,3 +62,4 @@ export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.
 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'
+export { default as USlider } from './slider/u-slider.vue'

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

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 @keyframes fade-in-label {
   0% {
@@ -83,6 +83,10 @@
 
   @include a.type(200, strong);
 
+  @include a.bp(lg) {
+    width: 100%;
+  }
+
   > * {
     flex: 0 0 auto;
   }
@@ -154,6 +158,10 @@
   width: var(--label-width);
   text-overflow: ellipsis;
   overflow: hidden;
+
+  @include a.bp(lg) {
+    width: calc(100% - 24px - 8px);
+  }
 }
 
 // Animation

package/components/slider/slider.scss

@@ -0,0 +1,248 @@
+@use '../../base/abstracts' as a;
+
+@mixin thumb-reset {
+  appearance: none;
+  border: none;
+  height: var(--slider-thumb-height);
+  width: var(--slider-thumb-width);
+  border-radius: 100%;
+}
+
+.slider {
+  --slider-height: 60px;
+  --slider-width: 100%;
+  --slider-track-height: 4px;
+  --slider-upper-fill-color: rgb(150 150 150);
+  --slider-lower-fill-color: rgb(0 150 0);
+  --slider-thumb-height: 60px;
+  --slider-thumb-width: 60px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--e-space-4);
+  width: var(--slider-width);
+  height: var(--slider-height);
+
+  // Style native input
+  input::-moz-range-thumb {
+    @include thumb-reset;
+  }
+
+  input::-webkit-slider-thumb {
+    @include thumb-reset;
+  }
+
+  // States
+  &.is-sliding {
+    .slider__dot,
+    .slider__dot-wrapper {
+      pointer-events: none;
+    }
+  }
+
+  &.is-sliding.is-touch {
+    .slider__thumb {
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+}
+
+.slider__min-value,
+.slider__max-value {
+  @include a.type(200);
+
+  flex: 0 0 auto;
+}
+
+.slider__slider {
+  flex: 1 0 auto;
+  position: relative;
+  height: 100%;
+}
+
+.slider__input {
+  position: absolute;
+  top: 0;
+  left: calc(var(--slider-thumb-width) / -2);
+  right: calc(var(--slider-thumb-width) / -2);
+  height: 100%;
+  pointer-events: none;
+
+  input {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.slider__control {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: calc(50% - var(--slider-track-height) / 2);
+    height: var(--slider-track-height);
+    width: 100%;
+    background-color: var(--e-c-primary-01-100);
+    border-radius: var(--e-brd-radius-1);
+  }
+}
+
+.slider__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background-color: var(--e-c-mono-00);
+  border: 2px solid var(--e-c-primary-01-500);
+  pointer-events: auto;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: a.rem(8);
+    height: a.rem(8);
+    border-radius: 100%;
+    background-color: var(--e-c-primary-01-500);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &:active {
+    border-color: var(--e-c-primary-01-700);
+  }
+
+  // Dot variants
+  &.upper {
+    border-color: var(--e-c-mono-200);
+
+    &::before {
+      width: a.rem(4);
+      height: a.rem(4);
+    }
+
+    &:hover {
+      &::before {
+        width: a.rem(8);
+        height: a.rem(8);
+      }
+    }
+
+    &:active {
+      border-color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &.highlight {
+    border-color: var(--e-c-mono-700);
+
+    &::before {
+      background-color: var(--e-c-mono-700);
+      width: a.rem(8);
+      height: a.rem(8);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath fill='%236B6B6B' d='M6.79 7.985a1 1 0 0 1-1.58 0L.256 1.614A1 1 0 0 1 1.045 0h9.91a1 1 0 0 1 .79 1.614L6.789 7.985Z'/%3E%3C/svg%3E");
+      width: 12px;
+      height: 9px;
+      left: 2px;
+      top: -12px;
+    }
+
+    &:active,
+    &:hover {
+      border-color: var(--e-c-primary-01-500);
+
+      &::before {
+        background-color: var(--e-c-primary-01-500);
+        width: a.rem(8);
+        height: a.rem(8);
+      }
+
+      &::after {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath fill='%234BA528' d='M6.79 7.985a1 1 0 0 1-1.58 0L.256 1.614A1 1 0 0 1 1.045 0h9.91a1 1 0 0 1 .79 1.614L6.789 7.985Z'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}
+
+.slider__dot-wrapper {
+  position: absolute;
+  display: block;
+  top: -6px;
+  width: a.rem(16);
+  height: a.rem(16);
+  transform: translateX(-50%);
+}
+
+.slider__tooltip-placeholder {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+
+.slider__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--slider-thumb-height);
+  width: var(--slider-thumb-width);
+  background-color: rgba(var(--e-c-primary-01-200-rgb), 0.5);
+  border-radius: 100%;
+  top: calc(var(--slider-thumb-height) / -2 + (var(--slider-track-height) / 2));
+  transform: translateX(-50%);
+  transition: transform var(--e-trs-duration-fastest) var(--e-trs-easing-default);
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--e-c-primary-01-700);
+    inset: 6px;
+    border-radius: 100%;
+  }
+}
+
+.slider__thumb-value {
+  @include a.type(200, strong);
+
+  position: relative;
+  white-space: nowrap;
+  color: var(--e-c-mono-00);
+  user-select: none;
+}
+
+.slider__track {
+  top: calc(50% - var(--slider-track-height) / 2);
+  position: relative;
+  height: var(--slider-track-height);
+}
+
+.slider__lower-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 4px;
+  border-top-left-radius: var(--e-brd-radius-1);
+  border-bottom-left-radius: var(--e-brd-radius-1);
+  background-color: var(--e-c-primary-01-500);
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}

package/components/slider/u-slider.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { watch, useId, useTemplateRef, onMounted, ref } from 'vue'
+import { scaleValue } from '../../utils/math/scale-value'
+import { clamp } from '../../utils/math/clamp'
+import { UTooltip } from '../'
+
+interface SliderDot {
+  value: number
+  isHighlighted?: boolean
+}
+
+// TODO: I get an error with importing interface RangeSlider and extending it here. No idea why this happens...
+interface Props {
+  name: string
+  dots?: SliderDot[]
+  label: string
+  min?: number
+  max?: number
+  step?: number
+  valuePrefix?: string
+  valueSuffix?: string
+  hideMinMax?: boolean
+}
+
+const {
+  dots = [],
+  min = 0,
+  max = 100,
+  step = 1,
+  valuePrefix = '',
+  valueSuffix = '',
+} = defineProps<Props>()
+
+const model = defineModel<number>()
+const emits = defineEmits(['change'])
+const id = useId()
+const isSliding = ref(false)
+const isTouch = ref(false)
+const thumbEl = useTemplateRef('thumb')
+const lowerFillEl = useTemplateRef('lower-fill')
+const controlEl = useTemplateRef('control')
+
+const getValueString = (v) => `${valuePrefix}${v}${valueSuffix}`
+
+const getLeftPosition = (v) => scaleValue(Number(v), Number(min), Number(max), 0, 100, 2)
+const setThumbPosition = () => {
+  const position = getLeftPosition(model.value)
+
+  thumbEl.value.style.left = `${position}%`
+  lowerFillEl.value.style.width = `${position}%`
+}
+
+const setModelValueFromLeftPosition = (leftPos) => {
+  model.value = scaleValue(leftPos, 0, 100, min, max, 0)
+}
+
+onMounted(() => {
+  setThumbPosition()
+})
+
+watch(model, () => {
+  setThumbPosition()
+  emits('change', model.value)
+})
+
+const onPointerdown = (e: PointerEvent) => {
+  if (e.target.closest('.slider__dot')) {
+    return
+  }
+
+  isSliding.value = true
+
+  // Get correct left position
+  const leftPos = Math.round(
+    ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
+      100,
+  )
+
+  isTouch.value = e.pointerType !== 'mouse'
+
+  setModelValueFromLeftPosition(leftPos)
+  controlEl.value.addEventListener('pointermove', onPointermove)
+  document.addEventListener('pointerup', onPointerup)
+}
+const onPointermove = (e: PointerEvent) => {
+  e.preventDefault()
+
+  // Get correct left position
+  let leftPos = Math.round(
+    ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
+      100,
+  )
+
+  leftPos = clamp(leftPos, 0, 100)
+
+  setModelValueFromLeftPosition(leftPos)
+}
+const onPointerup = () => {
+  isSliding.value = false
+
+  controlEl.value.removeEventListener('pointermove', onPointermove)
+  document.removeEventListener('pointerup', onPointerup)
+}
+</script>
+
+<template>
+  <div :class="['slider', { 'is-sliding': isSliding, 'is-touch': isTouch }]">
+    <label class="visually-hidden" :for="id">{{ label }}</label>
+
+    <div v-if="!hideMinMax" class="slider__min-value">
+      {{ getValueString(min) }}
+    </div>
+
+    <div class="slider__slider">
+      <div class="slider__input">
+        <input :id v-model="model" :name type="range" :min :max :step @change="setThumbPosition" />
+      </div>
+
+      <div ref="control" class="slider__control" @pointerdown.prevent="onPointerdown">
+        <div class="slider__track">
+          <div ref="lower-fill" class="slider__lower-fill"></div>
+
+          <div
+            v-for="(dot, idx) in dots"
+            :key="idx"
+            class="slider__dot-wrapper"
+            :style="{ left: `${getLeftPosition(dot.value)}%` }"
+          >
+            <UTooltip
+              :title="getValueString(dot.value)"
+              style="--tooltip-min-width: 0"
+              :disabled="isSliding"
+              :offset="10"
+              :offset-x="1"
+            >
+              <button
+                :class="[
+                  'slider__dot',
+                  `${dot.value < model ? 'lower' : 'upper'}`,
+                  { highlight: dot.isHighlighted },
+                ]"
+                type="button"
+                @click="model = dot.value"
+              >
+                <span class="visually-hidden">{{ getValueString(dot.value) }}</span>
+              </button>
+            </UTooltip>
+          </div>
+
+          <button ref="thumb" type="button" class="slider__thumb" tabindex="-1">
+            <span class="slider__thumb-value">{{ getValueString(model) }} </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!hideMinMax" class="slider__max-value">
+      {{ getValueString(max) }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./slider.scss"></style>

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

@@ -14,13 +14,21 @@ interface Props {
 }
 
 defineProps<Props>()
+
+const isColorKeyword = (str) => Object.values(TableCellIconColor).includes(str)
 </script>
 
 <template>
   <div class="cell-icon-group">
     <template v-for="(item, idx) in icons" :key="idx">
       <UTooltip :title="item.title">
-        <UIcon :name="item.icon" :class="[`icon-color-${item.color}`]"></UIcon>
+        <UIcon
+          :name="item.icon"
+          :class="{ [`icon-color-${item.color}`]: isColorKeyword(item.color) }"
+          :style="{
+            color: !isColorKeyword(item.color) ? item.color : false,
+          }"
+        ></UIcon>
       </UTooltip>
     </template>
   </div>

package/components/tooltip/tooltip.scss

@@ -1,13 +1,15 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .tooltip {
+  --tooltip-min-width: 84px;
+
   pointer-events: none;
   z-index: a.$layer-tooltip;
   position: absolute;
   top: 0;
   left: 0;
   max-width: a.rem(360);
-  min-width: a.rem(84);
+  min-width: var(--tooltip-min-width);
   opacity: 0;
   transform: translateY(-5px);
   transition:

package/components/tooltip/u-tooltip.vue

@@ -5,9 +5,18 @@ import type { PopoverPositionParams } from './popover'
 
 interface Props extends PopoverPositionParams {
   title: string
+  disabled?: boolean
+  offsetX?: number
 }
 
-const { placement = 'top-center', offset = 12, viewportPadding = 20 } = defineProps<Props>()
+const {
+  placement = 'top-center',
+  offset = 12,
+  viewportPadding = 20,
+  disabled = false,
+  // This optional prop is to potentially fix some slightly off calculations.
+  offsetX = 0,
+} = defineProps<Props>()
 
 const tooltip = ref<HTMLDivElement | null>(null)
 const root = ref<HTMLSpanElement | null>(null)
@@ -18,10 +27,18 @@ const isTooltipVisible = ref<boolean>(false)
 // For mobile and touch devices it's th opposite, pointer events will be fired first.
 // This way we can detect on what device we are and handle the behaviour accordingly.
 function hideTooltip() {
+  if (disabled) {
+    return
+  }
+
   isTooltipVisible.value = false
 }
 
 function showTooltip() {
+  if (disabled) {
+    return
+  }
+
   updatePositions()
   isTooltipVisible.value = true
 }
@@ -40,7 +57,7 @@ function updatePositions(resetPositions = false) {
   })
 
   tooltip.value!.style.top = resetPositions ? '' : `${top}px`
-  tooltip.value!.style.left = resetPositions ? '' : `${left}px`
+  tooltip.value!.style.left = resetPositions ? '' : `${left + offsetX}px`
   // Fix pointer position if necessary
   pointer.value!.style.transform =
     !resetPositions && leftCorrection ? `translateX(${leftCorrection * -1}px)` : ''
@@ -57,6 +74,7 @@ function updatePositions(resetPositions = false) {
       ref="tooltip"
       :class="['tooltip', { 'tooltip--open': isTooltipVisible }]"
       :aria-hidden="!isTooltipVisible"
+      v-bind="$attrs"
       @transitionend="onTransitionend"
     >
       <div class="tooltip__content">

package/components/welcome/u-welcome.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
-// import { Image } from '../../elements/types'
+import { Image } from '../../elements/types'
 
 interface Props {
   text?: string
-  //   image: Image
+  image?: Image
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="welcome-container">
-    <div class="welcome-content">
-      <slot>
-        <h2 v-if="text">{{ text }}</h2>
+  <div class="welcome">
+    <div class="welcome__content">
+      <h2>
+        <slot>{{ text }}</slot>
+      </h2>
+    </div>
+
+    <div v-if="$slots.image || image" class="welcome__image" aria-hidden="true">
+      <slot name="image">
+        <img :src="image.src" :alt="image.alt" />
       </slot>
     </div>
-    <!-- TODO: Add image whenever is ready -->
-    <!-- <div class="welcome-image">
-        <img src="path/to/image.jpg" alt="Welcome Image" />
-    </div> -->
   </div>
 </template>
 
 <style scoped lang="scss" src="./welcome.scss"></style>
+<style scoped lang="scss">
+.welcome__image {
+  :slotted(img) {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+</style>

package/components/welcome/welcome.scss

@@ -1,25 +1,48 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
-.welcome-container {
+.welcome {
   @include a.type(500, strong);
 
-  background-color: var(--e-c-primary-01-100);
-  border-radius: var(--e-brd-radius-2);
-  color: var(--e-c-primary-01-950);
+  position: relative;
+  height: a.rem(94);
   display: flex;
-  justify-content: space-between;
-  padding: var(--e-space-8) var(--e-space-6);
+  align-items: center;
+  padding: 0 var(--e-space-6);
+  background-color: var(--e-c-primary-01-50);
+  border: 1px solid var(--e-c-primary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  color: var(--e-c-secondary-01-950);
+  overflow: hidden;
 
-  @include a.bp(m) {
+  @include a.bp(lg) {
+    min-height: a.rem(86);
+    height: auto;
     padding: var(--e-space-3) var(--e-space-4);
   }
 }
 
-// .welcome-content {
+.welcome__content {
+  max-width: calc(100% - #{a.rem(340)});
+
+  @include a.bp(lg) {
+    max-width: calc(100% - #{a.rem(80)});
+  }
+}
 
-// }
+.welcome__image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  aspect-ratio: 10/3;
 
-// TODO: Add styles for the welcome image whenever is ready
-// .welcome-image {
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 
-// }
+  @include a.bp(lg) {
+    display: none;
+  }
+}

package/elements/button/_button-plain.scss

@@ -6,16 +6,14 @@
   text-decoration: none;
   grid-gap: var(--e-space-1);
 
-  .icon,
-  e-icon {
+  .icon {
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
   &:hover {
     color: var(--e-c-secondary-01-900);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-900);
     }
   }
@@ -23,8 +21,7 @@
   &:active {
     color: var(--e-c-secondary-01-700);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-700);
     }
   }
@@ -34,15 +31,15 @@
     background: none;
     color: var(--e-c-mono-500);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-mono-500);
     }
   }
 
   &.loading {
-    .loader,
-    e-loader {
+    pointer-events: none;
+
+    .loader {
       --dot-color: var(--e-c-secondary-01-700);
     }
   }

package/elements/button/u-button.vue

@@ -93,6 +93,4 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
   </template>
 </template>
 
-<style lang="scss" scoped>
-@use './button.scss';
-</style>
+<style lang="scss" scoped src="./button.scss"></style>

package/elements/index.js

@@ -22,3 +22,4 @@ export { default as UToggleSwitch } from './toggle-switch/u-toggle-switch.vue'
 export { default as UCheckbox } from './checkbox/u-checkbox.vue'
 export { default as USelectTile } from './select-tile/u-select-tile.vue'
 export { default as USelectTiles } from './select-tiles/u-select-tiles.vue'
+// export { default as URangeSlider } from './range-slider/u-range-slider.vue'

package/elements/range-slider/u-range-slider.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// NOTE: URangeSlider as a base widget was a good idea.
+// But at the moment not really usable.
+// Maybe deprecate it.
+
+import { useTemplateRef, onMounted, useId, watch } from 'vue'
+import { scaleValue } from '../../utils/math/scale-value'
+
+export interface RangeSlider {
+  label: string
+  min?: number
+  max?: number
+}
+
+const { min = 0, max = 100 } = defineProps<RangeSlider>()
+
+const id = useId()
+const model = defineModel<number>()
+const thumbEl = useTemplateRef('thumb')
+const lowerFillEl = useTemplateRef('lower-fill')
+let thumbWidth
+
+const setThumbPosition = () => {
+  const position = scaleValue(Number(model.value), Number(min), Number(max), 0, 100, 2)
+  thumbEl.value.style.left = `${position}%`
+
+  lowerFillEl.value.style.width = `calc(${position}% + ${thumbWidth / 2}px)`
+}
+
+onMounted(() => {
+  // Store thumb width. We'll judt assume that this won't change during runtime.
+  thumbWidth = thumbEl.value.getBoundingClientRect().width
+
+  setThumbPosition()
+})
+
+watch(model, () => {
+  setThumbPosition()
+})
+</script>
+
+<template>
+  <div class="range-slider">
+    <label class="visually-hidden" :for="id">{{ label }}</label>
+    <div class="range-slider__input">
+      <input
+        :id
+        v-model="model"
+        type="range"
+        :min
+        :max
+        @input="setThumbPosition"
+        @change="setThumbPosition"
+      />
+    </div>
+    <div class="range-slider__slider">
+      <div class="range-slider__track">
+        <div ref="lower-fill" class="range-slider__lower-fill"></div>
+        <div ref="thumb" class="range-slider__thumb"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../base/abstracts' as a;
+
+.range-slider {
+  --range-height: 24px;
+  --range-width: 100%;
+  --range-border-radius: 0;
+  --range-upper-fill-color: rgba(150, 150, 150);
+  --range-lower-fill-color: rgb(0, 150, 0);
+  --range-thumb-height: 24px;
+  --range-thumb-width: 12px;
+  --range-thumb-border-radius: 0;
+  --range-thumb-background-color: rgb(0, 0, 0);
+  --range-thumb-transform: none;
+  --range-thumb-transition: none;
+
+  /* "display: contents" would be better, but it still has some accessiblity issues -> https://ericwbailey.website/published/display-contents-considered-harmful/ */
+  position: relative;
+  display: inline-flex;
+  width: var(--range-width);
+  height: var(--range-height);
+}
+
+.range-slider__input {
+  display: flex;
+  width: 100%;
+
+  input {
+    width: 100%;
+  }
+}
+
+.range-slider__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-color: var(--range-upper-fill-color);
+  border-radius: var(--range-border-radius);
+}
+
+.range-slider__thumb {
+  position: relative;
+  height: var(--range-thumb-height);
+  width: var(--range-thumb-width);
+  background-color: var(--range-thumb-background-color);
+  border-radius: var(--range-thumb-border-radius);
+  transform: var(--range-thumb-transform);
+  transition: var(--range-thumb-transition);
+}
+
+.range-slider__track {
+  position: relative;
+  width: calc(100% - var(--range-thumb-width));
+  height: 100%;
+}
+
+.range-slider__lower-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-top-left-radius: var(--range-border-radius);
+  border-bottom-left-radius: var(--range-border-radius);
+  background-color: var(--range-lower-fill-color);
+  min-width: var(--range-thumb-width);
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}
+</style>

package/elements/text-field/u-text-field.vue

@@ -29,16 +29,17 @@ const {
 const slots = useSlots()
 const model = defineModel<string>()
 const emits = defineEmits<{
-  input: [value: string | null]
+  input: [value: string | null] // TODO: Could be obsolete because we get value via model.
   focus: [target: FocusEvent['target']]
   focusout: [target: FocusEvent['target']]
 }>()
 
+// TODO: Do we need a ref to input? Value is currently written/read via model.
 const input = useTemplateRef('input')
 
 const isFocused = ref(false)
 const isHovering = ref(false)
-const hasValue = ref(false) // only needed for input type 'search'
+const hasValue = ref(!!model.value)
 const forceFloatLabel = ref(type === TextFieldTypes.date) // input-type 'date' doesn't support placeholder.
 
 const spacer = '.&nbsp;'
@@ -60,7 +61,6 @@ const onBlur = () => {
 }
 
 const onInput = () => {
-  hasValue.value = !!input.value && input.value.value !== ''
   emits('input', input.value?.value ?? null)
 }
 
@@ -111,6 +111,10 @@ watch(
     }
   },
 )
+
+watch(model, () => {
+  hasValue.value = !!model.value
+})
 </script>
 
 <template>

package/modules/dialog/u-dialog.vue

@@ -12,10 +12,12 @@ interface Props {
   contentImage?: Image
   closeBtnLabel?: string
   autoHeight?: boolean
+  modal?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
 const {
+  modal = false,
   title = '',
   text = '',
   headerImage = undefined,
@@ -59,10 +61,12 @@ watch(visible, (newV) => {
       allowArrowLeftRight: true,
     })
 
-    requestAnimationFrame(() => {
-      window.addEventListener('keydown', onKeydown)
-      document.addEventListener('click', onDocumentClick)
-    })
+    if (!modal) {
+      requestAnimationFrame(() => {
+        window.addEventListener('keydown', onKeydown)
+        document.addEventListener('click', onDocumentClick)
+      })
+    }
   } else {
     focusTrapInstance.release()
 
@@ -84,7 +88,7 @@ watch(visible, (newV) => {
       'dialog-container',
       mobileDialogStyle,
       {
-        'has-header-image': !!slots['header-image'] || headerImage,
+        'has-header-image': !!slots['header-image'] || (headerImage?.src && headerImage?.alt),
         'has-content-image': !!slots['content-image'] || contentImage,
       },
     ]"
@@ -124,7 +128,7 @@ watch(visible, (newV) => {
 
       <div class="cta-container">
         <slot name="cta"></slot>
-        <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
+        <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
       </div>
     </div>
   </dialog>

package/modules/index.js

@@ -5,8 +5,7 @@ export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-nav
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
 export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'
 export { default as UProgressIndicator } from './progress-indicator/u-progress-indicator.vue'
-export { default as UToast } from './toast/u-toast.vue'
-export { toast } from './toast/useToast.ts'
+export { default as UToast, toast } from './toast/u-toast.vue'
 export { default as UDialog } from './dialog/u-dialog.vue'
 export { default as USearchFilter } from './search-filter/u-search-filter.vue'
 export { default as UContentTitle } from './content-title/u-content-title.vue'

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

@@ -61,5 +61,16 @@
     @include a.type(200, strong);
 
     margin-bottom: var(--e-space-4);
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+
+    // This is a bit experimental.
+    // Because we accept here an HTML string, which can contain <div> or <p>, we'll 'ignore' these tags.
+    // This way the text-overflow: ellipsis works as intended.
+    * {
+      display: contents;
+    }
   }
 }

package/modules/toast/u-toast.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+import { toast } from './useToast'
+
+export { toast }
+</script>
+
 <script setup lang="ts">
 import UToastMessage from './u-toast-message.vue'
 import { toasts } from './useToast'

package/package.json

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

package/utils/math/scale-value.js

@@ -0,0 +1,13 @@
+export const scaleValue = (
+  srcValue,
+  srcRangeMin,
+  srcRangeMax,
+  targetRangeMin,
+  targetRangeMax,
+  round = 0,
+) => {
+  const dec = Math.pow(10, round)
+  const scale = (targetRangeMax - targetRangeMin) / (srcRangeMax - srcRangeMin)
+
+  return Math.round((targetRangeMin + (srcValue - srcRangeMin) * scale) * dec) / dec
+}