@energie360/ui-library 0.1.32 → 0.1.34

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

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

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

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

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

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

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

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

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

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

package/components/slider/u-slider.vue

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

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

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

package/components/table/table-cell.scss

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

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

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

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

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

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

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

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

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

package/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,
@@ -317,8 +321,8 @@ body {
   --e-c-signal-02-700-rgb: 204, 122, 0;
   --e-c-signal-02-900: #703600;
   --e-c-signal-02-900-rgb: 112, 54, 0;
-  --e-c-signal-03-100: #ffb5c4;
-  --e-c-signal-03-100-rgb: 255, 181, 196;
+  --e-c-signal-03-100: #ffccd7;
+  --e-c-signal-03-100-rgb: 255, 204, 215;
   --e-c-signal-03-500: #ff0c3e;
   --e-c-signal-03-500-rgb: 255, 12, 62;
   --e-c-signal-03-700: #b90d31;

package/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/button/u-button.vue

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

package/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/layout/portal-block/portal-block.scss

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

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

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