@energie360/ui-library 0.1.33 → 0.1.34

package/base/_resets.scss

@@ -58,3 +58,7 @@ fieldset {
   margin: 0;
   border: 0;
 }
+
+legend {
+  padding: 0;
+}

package/components/button-group/button-group.scss

@@ -0,0 +1,12 @@
+// TODO: Check with Design if spacings are ok.
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--e-space-2);
+  row-gap: var(--e-space-4);
+}
+
+.button-group.stacked {
+  flex-direction: column;
+  align-items: flex-start;
+}

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  type?: 'inline' | 'stacked'
+}
+
+const { type = 'inline' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['button-group', type]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./button-group.scss"></style>

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

@@ -24,6 +24,11 @@
 
 .data-card__value {
   @include a.type(100);
+
+  &:has(.data-card__dot) {
+    display: flex;
+    column-gap: var(--e-space-2);
+  }
 }
 
 .data-card__ctas {
@@ -32,3 +37,13 @@
   margin-top: var(--e-space-4);
   line-height: 0;
 }
+
+.data-card__dot {
+  align-self: center;
+  flex: 0 0 auto;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: transparent;
+}

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

@@ -3,6 +3,7 @@
 interface dataItem {
   heading: string
   value: string
+  dotColor?: string
 }
 
 interface Props {
@@ -23,7 +24,11 @@ defineProps<Props>()
         <slot>
           <div v-for="(item, idx) in data" :key="idx">
             <dt class="data-card__heading">{{ item.heading }}</dt>
-            <dd class="data-card__value" v-html="item.value"></dd>
+            <dd v-if="item.dotColor" class="data-card__value">
+              <span class="data-card__dot" :style="{ backgroundColor: item.dotColor }"></span>
+              <span class="data-card__value" v-html="item.value" />
+            </dd>
+            <dd v-else class="data-card__value" v-html="item.value"></dd>
           </div>
         </slot>
       </dl>

package/components/index.js

@@ -74,3 +74,4 @@ export { default as UDefinitionList } from './definition-list/u-definition-list.
 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'
+export { default as UButtonGroup } from './button-group/u-button-group.vue'

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

@@ -83,6 +83,7 @@
 }
 
 .notification-item__dot {
+  flex: 0 0 auto;
   display: block;
   width: 8px;
   height: 8px;

package/components/table/table-cell.scss

@@ -30,6 +30,7 @@
 
 .table-cell__dot {
   align-self: center;
+  flex: 0 0 auto;
   display: block;
   width: 8px;
   height: 8px;

package/components/welcome/butterfly-sprite.json

@@ -0,0 +1,9 @@
+[
+  [0,0],
+  [202, 0],
+  [404, 0],
+  [606, 0],
+  [808, 0],
+  [1010, 0],
+  [1212, 0]
+]

package/components/welcome/u-welcome.vue

@@ -1,15 +1,66 @@
 <script setup lang="ts">
+import USpriteAnimation from '../sprite-animation/u-sprite-animation.vue'
 import { Image } from '../../elements/types'
+import butterflySpritePositions from './butterfly-sprite.json'
+import butterflySprite from './butterfly-sprite.png'
+import { gsap } from 'gsap'
+import { ref, useTemplateRef } from 'vue'
 
 interface Props {
   text?: string
   image?: Image
 }
 defineProps<Props>()
+
+const butterfly = useTemplateRef('butterfly')
+const container = useTemplateRef('container')
+const butterflyWrapper = useTemplateRef('butterflyWrapper')
+const mouseRightSide = ref(true)
+const xOffset = -300
+
+const onMouseleave = () => {
+  mouseRightSide.value = Number(gsap.getProperty(butterflyWrapper.value, 'x')) < 0
+
+  gsap.to(butterflyWrapper.value, {
+    x: 0,
+    y: 0,
+    ease: 'power2',
+    duration: 4,
+    overwrite: true,
+  })
+}
+
+const onMousemove = (e: MouseEvent) => {
+  const { left, top, width, height } = container.value.getBoundingClientRect()
+
+  const halfW = width / 2
+  const halfH = height / 2
+  const mouseX = e.x - left
+  const mouseY = e.y - top
+
+  const x = gsap.utils.interpolate(-halfW, halfW, mouseX / width)
+  const y = gsap.utils.interpolate(-halfH, halfH, mouseY / height)
+
+  gsap.to(butterflyWrapper.value, {
+    x: x + xOffset,
+    y: y,
+    duration: 10,
+    ease: 'power1',
+    overwrite: true,
+    onUpdate() {
+      mouseRightSide.value =
+        Number(gsap.getProperty(butterflyWrapper.value, 'x')) < mouseX + xOffset - width / 2
+    },
+  })
+}
+
+const onSpriteReady = () => {
+  butterfly.value.playLoop()
+}
 </script>
 
 <template>
-  <div class="welcome">
+  <div ref="container" class="welcome" @mousemove="onMousemove" @mouseleave="onMouseleave">
     <div class="welcome__content">
       <h2>
         <slot>{{ text }}</slot>
@@ -21,6 +72,23 @@ defineProps<Props>()
         <img :src="image.src" :alt="image.alt" />
       </slot>
     </div>
+
+    <div ref="butterflyWrapper" class="welcome__sprite-animation">
+      <USpriteAnimation
+        ref="butterfly"
+        :style="{
+          transform: mouseRightSide ? 'scaleX(1)' : 'scaleX(-1)',
+        }"
+        :spritesheet-path="butterflySprite"
+        :frame-positions="butterflySpritePositions"
+        :frame-width="202"
+        :frame-height="300"
+        :width="32"
+        :height="47"
+        :duration="1000"
+        @ready="onSpriteReady"
+      />
+    </div>
   </div>
 </template>
 

package/components/welcome/welcome.scss

@@ -18,6 +18,7 @@
     min-height: a.rem(86);
     height: auto;
     padding: var(--e-space-3) var(--e-space-4);
+    pointer-events: none;
   }
 }
 
@@ -46,3 +47,12 @@
     display: none;
   }
 }
+
+.welcome__sprite-animation {
+  position: absolute;
+  right: 290px;
+
+  @include a.bp(lg) {
+    right: 32px;
+  }
+}

package/dist/base-style.css

@@ -71,6 +71,10 @@ fieldset {
   border: 0;
 }
 
+legend {
+  padding: 0;
+}
+
 /* easeOutCubic */
 /* prettier-ignore */
 input,

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;;;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;;;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;;;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"}

package/dist/elements/form.css

@@ -67,7 +67,7 @@
 }
 .form .form__cta-group {
   display: flex;
-  grid-gap: var(--e-space-5);
+  gap: var(--e-space-5);
 }
 @media (max-width: 740px) {
   .form .form__cta-group {

package/dist/layout/form-grid.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA0BA;AAAA;;AAAA;AAAA;AAAA;ACzBA;EACE;;;AAGF;EDIE;EACA;EACA,KFgBgB;;AIThB;EDbF;IDSI,KFca;;;AIVf;EDbF;IDaI,KFWY;;;AIXd;EDbF;IDiBI,KFQY;;;AGtBd;ED2BA;EACA,WAHY;;AEfZ;EDVA;IDiCE;IACA,WAHW;;;AErBb;EDVA;IDwCE;IACA,WAHU;;;AE5BZ;EDVA;ID+CE;IACA,WAHU;;;ACxCZ;EDsBA;EACA,WAHY;;AEfZ;EDLA;ID4BE;IACA,WAHW;;;AErBb;EDLA;IDmCE;IACA,WAHU;;;AE5BZ;EDLA;ID0CE;IACA,WAHU;;;ACpCZ;EDkBA;EACA,WAHY;;AEfZ;EDDA;IDwBE;IACA,WAHW;;;AErBb;EDDA;ID+BE;IACA,WAHU;;;AE5BZ;EDDA;IDsCE;IACA,WAHU;;;AC/BZ;EDaA;EACA,WAHY;;AEfZ;EDIA;IDmBE;IACA,WAHW;;;AErBb;EDIA;ID0BE;IACA,WAHU;;;AE5BZ;EDIA;IDiCE;IACA,WAHU;;;AC3BZ;EDSA;EACA,WAHY;;AEfZ;EDQA;IDeE;IACA,WAHW;;;AErBb;EDQA;IDsBE;IACA,WAHU;;;AE5BZ;EDQA;ID6BE;IACA,WAHU;;;AEnCZ;EDYA;AAAA;AAAA;AAAA;IDKA;IACA,WAHY;;;AEfZ;EDYA;AAAA;AAAA;AAAA;IDWE;IACA,WAHW;;;AErBb;EDYA;AAAA;AAAA;AAAA;IDkBE;IACA,WAHU;;;AE5BZ;EDYA;AAAA;AAAA;AAAA;IDyBE;IACA,WAHU;;;ACdZ;EACE","file":"form-grid.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA0BA;AAAA;;AAAA;AAAA;AAAA;ACvBA;EACE;;;AAGF;EDEE;EACA;EACA,KFgBgB;;AIThB;EDXF;IDOI,KFca;;;AIVf;EDXF;IDWI,KFWY;;;AIXd;EDXF;IDeI,KFQY;;;AGpBd;EDyBA;EACA,WAHY;;AEfZ;EDRA;ID+BE;IACA,WAHW;;;AErBb;EDRA;IDsCE;IACA,WAHU;;;AE5BZ;EDRA;ID6CE;IACA,WAHU;;;ACtCZ;EDoBA;EACA,WAHY;;AEfZ;EDHA;ID0BE;IACA,WAHW;;;AErBb;EDHA;IDiCE;IACA,WAHU;;;AE5BZ;EDHA;IDwCE;IACA,WAHU;;;AClCZ;EDgBA;EACA,WAHY;;AEfZ;EDCA;IDsBE;IACA,WAHW;;;AErBb;EDCA;ID6BE;IACA,WAHU;;;AE5BZ;EDCA;IDoCE;IACA,WAHU;;;AC7BZ;EDWA;EACA,WAHY;;AEfZ;EDMA;IDiBE;IACA,WAHW;;;AErBb;EDMA;IDwBE;IACA,WAHU;;;AE5BZ;EDMA;ID+BE;IACA,WAHU;;;ACzBZ;EDOA;EACA,WAHY;;AEfZ;EDUA;IDaE;IACA,WAHW;;;AErBb;EDUA;IDoBE;IACA,WAHU;;;AE5BZ;EDUA;ID2BE;IACA,WAHU;;;AEnCZ;EDcA;AAAA;AAAA;AAAA;IDGA;IACA,WAHY;;;AEfZ;EDcA;AAAA;AAAA;AAAA;IDSE;IACA,WAHW;;;AErBb;EDcA;AAAA;AAAA;AAAA;IDgBE;IACA,WAHU;;;AE5BZ;EDcA;AAAA;AAAA;AAAA;IDuBE;IACA,WAHU;;;ACZZ;EACE","file":"form-grid.css"}

package/elements/form/form.scss

@@ -55,7 +55,7 @@
 
   .form__cta-group {
     display: flex;
-    grid-gap: var(--e-space-5);
+    gap: var(--e-space-5);
 
     @include a.bp(m) {
       flex-direction: column;

package/i18n/i18n.ts

@@ -1,3 +1,5 @@
+// TODO: Update translations
+
 const translations = {
   DE: {
     yes: 'Ja',
@@ -26,13 +28,13 @@ const translations = {
     removeNotification: 'Benachrichtigung entfernen',
   },
   FR: {
-    yes: 'Ja',
-    no: 'Nein',
-    optional: 'Optional',
-    increaseValue: 'Wert erhöhen',
-    decreaseValue: 'Wert vermindern',
-    showPassword: 'Passwort anzeigen',
-    hidePassword: 'Passwort verbergen',
+    yes: 'Oui',
+    no: 'Non',
+    optional: 'Facultatif',
+    increaseValue: 'Augmenter la valeur',
+    decreaseValue: 'Diminuer la valeur',
+    showPassword: 'Afficher le mot de passe',
+    hidePassword: 'Masquer le mot de passe',
     close: 'Fermer',
     passwordRequirements: 'Exigences relatives au mot de passe',
     edit: 'Modifier',
@@ -52,13 +54,13 @@ const translations = {
     removeNotification: 'supprimer la notification',
   },
   IT: {
-    yes: 'Ja',
-    no: 'Nein',
-    optional: 'Optional',
-    increaseValue: 'Wert erhöhen',
-    decreaseValue: 'Wert vermindern',
-    showPassword: 'Passwort anzeigen',
-    hidePassword: 'Passwort verbergen',
+    yes: 'Sì',
+    no: 'No',
+    optional: 'Opzionale',
+    increaseValue: 'Aumentare il valore',
+    decreaseValue: 'Diminuire il valore',
+    showPassword: 'Mostra password',
+    hidePassword: 'Nascondi password',
     close: 'Chiudere',
     passwordRequirements: 'Requisiti per la password',
     edit: 'modificare',
@@ -78,13 +80,13 @@ const translations = {
     removeNotification: 'rimuovere la notifica',
   },
   EN: {
-    yes: 'Ja',
-    no: 'Nein',
+    yes: 'Yes',
+    no: 'No',
     optional: 'Optional',
-    increaseValue: 'Wert erhöhen',
-    decreaseValue: 'Wert vermindern',
-    showPassword: 'Passwort anzeigen',
-    hidePassword: 'Passwort verbergen',
+    increaseValue: 'Increase value',
+    decreaseValue: 'Decrease value',
+    showPassword: 'Show password',
+    hidePassword: 'Hide Password',
     close: 'Close',
     passwordRequirements: 'Password requirements',
     edit: 'Edit',

package/layout/form-grid/form-grid.scss

@@ -1,6 +1,8 @@
 @use '../grid/grid.mixin' as g;
 @use '../../base/abstracts' as a;
 
+// TODO: Refactor form-grid. Implement styles from `elements/form/form.scss` here.
+
 // TODO: This class doesn't seem to be necessary. Check first then remove it.
 .form-grid {
   width: 100%;

package/layout/form-grid/u-form-col.vue

@@ -7,7 +7,7 @@ const { col = '2/4' } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="[`form-col-${col}`]">
+  <div :class="['form__input-col', `form-col-${col}`]">
     <slot />
   </div>
 </template>

package/layout/form-grid/u-form-fieldset.vue

@@ -0,0 +1,36 @@
+<template>
+  <fieldset class="form-fieldset">
+    <legend v-if="$slots.legend" class="form-fieldset__legend">
+      <slot name="legend" />
+    </legend>
+
+    <p v-if="$slots.text" class="form-fieldset__text">
+      <slot name="text" />
+    </p>
+
+    <slot />
+  </fieldset>
+</template>
+
+<style scoped lang="scss" src="./form-grid.scss"></style>
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+.form-fieldset + .form-fieldset {
+  margin-top: var(--e-space-10);
+}
+
+.form-fieldset__legend {
+  @include a.type(300, strong);
+
+  &:not(:has(+ .form-fieldset__text)) {
+    margin-bottom: var(--e-space-6);
+  }
+}
+
+.form-fieldset__text {
+  @include a.type(300);
+
+  margin-bottom: var(--e-space-6);
+}
+</style>

package/layout/form-grid/u-form-row.vue

@@ -1,7 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  type?: 'input' | 'cta'
+}
+
+const { type = 'input' } = defineProps<Props>()
+</script>
+
 <template>
-  <div class="form-row">
-    <slot />
-  </div>
+  <div :class="['form-row', `form__${type}-row`]"><slot /></div>
 </template>
 
 <style lang="scss" scoped src="./form-grid.scss"></style>
+
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+.form-row {
+  :slotted(.form__input-col + .form__input-col) {
+    @include a.bp(lg) {
+      margin-top: var(--e-space-6);
+    }
+  }
+}
+
+.form__input-row + .form__input-row {
+  margin-top: var(--e-space-6);
+}
+
+*:not(legend) + .form-row.form__cta-row {
+  margin-top: var(--e-space-10);
+}
+</style>

package/layout/form-grid/u-form-wrapper.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="form form-grid">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./form-grid.scss"></style>

package/layout/index.js

@@ -8,3 +8,5 @@ export { default as UPortalBlock } from './portal-block/u-portal-block.vue'
 export { default as USplitLayout } from './split/u-split-layout.vue'
 export { default as UFormRow } from './form-grid/u-form-row.vue'
 export { default as UFormCol } from './form-grid/u-form-col.vue'
+export { default as UFormWrapper } from './form-grid/u-form-wrapper.vue'
+export { default as UFormFieldset } from './form-grid/u-form-fieldset.vue'

package/modules/dialog/dialog.scss

@@ -125,7 +125,12 @@
     left: 0;
     width: 100%;
     height: var(--overflow-gradient-height);
-    background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
+    background-image: linear-gradient(
+      0deg,
+      rgb(255 255 255 / 100%) 0%,
+      rgb(255 255 255 / 80%) 50%,
+      rgb(255 255 255 / 0%) 100%
+    );
   }
 
   &.cta-inline {

package/modules/footer/footer.scss

@@ -28,9 +28,35 @@
   }
 
   &.portal {
+    container-type: inline-size;
+
     .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)});
+      }
+    }
   }
 }
 
@@ -48,7 +74,7 @@
 .footer__top-row {
   display: flex;
   flex-wrap: wrap;
-  grid-gap: var(--e-space-12);
+  gap: var(--e-space-12);
 }
 
 .footer__addresses-column {
@@ -87,7 +113,7 @@
 
 .footer__social-links {
   display: flex;
-  grid-gap: var(--e-space-6);
+  gap: var(--e-space-6);
 }
 
 .footer__bottom {
@@ -126,7 +152,7 @@
   @include a.type(100);
 
   display: flex;
-  grid-gap: var(--e-space-6);
+  gap: var(--e-space-6);
   margin-bottom: var(--e-space-3);
 
   a {
@@ -139,7 +165,7 @@
 
   @include a.bp(m) {
     flex-direction: column;
-    grid-gap: var(--e-space-4);
+    gap: var(--e-space-4);
     margin-bottom: var(--e-space-8);
   }
 }

package/modules/login-animation/login-animation.scss

@@ -27,6 +27,7 @@ $sprite-height-mobile: 59px;
   position: relative;
   max-width: 680px;
   margin: 0 60px;
+  padding: 5%;
 
   img {
     user-select: none;
@@ -59,7 +60,4 @@ $sprite-height-mobile: 59px;
     width: $sprite-width-mobile;
     height: $sprite-height-mobile;
   }
-
-  &.flip {
-  }
 }

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

@@ -15,6 +15,8 @@ const onSpriteReady = () => {
 }
 
 const onMouseleave = () => {
+  mouseRightSide.value = Number(gsap.getProperty(butterflyWrapper.value, 'x')) < 0
+
   gsap.to(butterflyWrapper.value, {
     x: 0,
     y: 0,
@@ -24,7 +26,7 @@ const onMouseleave = () => {
   })
 }
 
-const onMousemove = (e) => {
+const onMousemove = (e: MouseEvent) => {
   const { left, top, width, height } = container.value.getBoundingClientRect()
 
   const halfW = width / 2
@@ -32,17 +34,19 @@ const onMousemove = (e) => {
   const mouseX = e.x - left
   const mouseY = e.y - top
 
-  mouseRightSide.value = mouseX > halfW
-
   const x = gsap.utils.interpolate(-halfW, halfW, mouseX / width)
   const y = gsap.utils.interpolate(-halfH, halfH, mouseY / height)
 
   gsap.to(butterflyWrapper.value, {
     x: x,
     y: y,
-    duration: 4,
+    duration: 3.5,
     ease: 'power1',
     overwrite: true,
+    onUpdate() {
+      mouseRightSide.value =
+        Number(gsap.getProperty(butterflyWrapper.value, 'x')) < mouseX - width / 2
+    },
   })
 }
 </script>
@@ -50,7 +54,7 @@ const onMousemove = (e) => {
 <template>
   <div ref="container" class="login-animation" @mousemove="onMousemove" @mouseleave="onMouseleave">
     <div class="login-animation__image">
-      <div ref="butterflyWrapper" :class="['login-animation__sprite', { flip: !mouseRightSide }]">
+      <div ref="butterflyWrapper" class="login-animation__sprite">
         <USpriteAnimation
           ref="butterfly"
           :style="{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,18 +24,18 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@lottiefiles/dotlottie-web": "^0.60.0",
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.10",
     "@vue/tsconfig": "^0.8.1",
     "autoprefixer": "^10.4.23",
     "chokidar": "^5.0.0",
     "postcss": "^8.5.6",
-    "sass": "^1.97.1",
+    "sass": "^1.97.3",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-vue": "^0.10.12",
+    "@lottiefiles/dotlottie-vue": "^0.10.13",
+    "@lottiefiles/dotlottie-web": "^0.61.0",
     "@lottiefiles/lottie-player": "^2.0.12",
     "gsap": "^3.14.2",
     "@energie360/design-tokens": "^1.3.0"