@energie360/ui-library 0.1.9 → 0.1.11

package/components/progress-avatar/progress-avatar.scss

@@ -0,0 +1,27 @@
+@use '../../base/abstracts' as a;
+
+.progress-avatar {
+  position: relative;
+  display: block;
+  padding: a.rem(6);
+  width: a.rem(88);
+  height: a.rem(88);
+}
+
+.progress-avatar__anim-container {
+  position: absolute;
+  inset: 0;
+}
+
+.progress-avatar__image-container {
+  border-radius: 100%;
+  overflow: hidden;
+  aspect-ratio: 1;
+
+  img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { UCircularProgress } from '../'
+
+interface Props {
+  image: Image
+  progress: number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="progress-avatar">
+    <div class="progress-avatar__anim-container">
+      <UCircularProgress :size="88" :progress />
+    </div>
+
+    <div class="progress-avatar__image-container">
+      <img v-bind="image" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./progress-avatar.scss"></style>

package/components/text-block/text-block.scss

@@ -0,0 +1,58 @@
+@use '../../base/abstracts' as a;
+
+.wizard-text-block {
+  .wizard-text-block__title {
+    @include a.type(800, strong);
+
+    + .wizard-text-block__text {
+      margin-top: var(--e-space-4);
+    }
+  }
+
+  .wizard-text-block__title--small {
+    @include a.type(500, strong);
+  }
+
+  .wizard-text-block__text {
+    @include a.type(300);
+  }
+
+  @include a.bp(lg) {
+    .wizard-text-block__title {
+      @include a.type(700, strong);
+
+      + .wizard-text-block__text {
+        margin-top: var(--e-space-3);
+      }
+    }
+  }
+
+  // Modifiers
+  &.wizard-text-block--sub {
+    .wizard-text-block__title {
+      @include a.type(300, strong);
+
+      + .wizard-text-block__text {
+        margin-top: var(--e-space-2);
+      }
+    }
+
+    .wizard-text-block__text {
+      @include a.type(300);
+    }
+
+    @include a.bp(lg) {
+      .wizard-text-block__title {
+        @include a.type(200, strong);
+
+        + .wizard-text-block__text {
+          margin-top: var(--e-space-2);
+        }
+      }
+
+      .wizard-text-block__text {
+        @include a.type(200);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'lead' | 'sub'
+  title?: string
+  text?: string
+  centered?: boolean
+}
+
+const { centered = false } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['wizard-text-block', `wizard-text-block--${variant}`, { centered }]">
+    <h2 v-if="title" class="wizard-text-block__title" v-html="title" />
+
+    <div v-if="text" class="wizard-text-block__text richtext" v-html="text" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './text-block.scss';
+
+.centered {
+  text-align: center;
+}
+</style>

package/components/tooltip/popover.ts

@@ -5,9 +5,17 @@ export type Placement =
   | 'top-right'
   | 'top-left'
   | 'top-center'
+  | 'top-full'
   | 'bottom-right'
   | 'bottom-left'
   | 'bottom-center'
+  | 'bottom-full'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
 export interface PopoverPositionParams {
   placement?: Placement
   offset?: number
@@ -52,6 +60,7 @@ export const getPopoverPosition = (
 
   let top = 0
   let left = 0
+  let right: number | string = ''
   const { vpWidth } = getViewportDimensions()
   const docHeight = document.documentElement.scrollHeight
   const scrollY = window.scrollY
@@ -64,32 +73,85 @@ export const getPopoverPosition = (
     popoverEl.style.display = ''
   }
 
+  const topPosition = offsetTop - popoverRect.height - options.offset
+  const bottomPosition = offsetTop + refRect.height + options.offset
+  const leftAligned = offsetLeft
+  const rightAligned = offsetLeft + refRect.width - popoverRect.width
+  const centerAligned = offsetLeft + refRect.width / 2 - popoverRect.width / 2
+
+  const rightPosition = offsetLeft + refRect.width + options.offset
+  const leftPosition = offsetLeft - popoverRect.width - options.offset
+  const topVAligned = offsetTop
+  const centerVAligned = offsetTop - popoverRect.height / 2 + refRect.height / 2
+  const bottomVAligned = offsetTop - popoverRect.height + refRect.height
+
   switch (options.placement) {
     case 'top-right':
-      top = offsetTop - popoverRect.height - options.offset
-      left = offsetLeft + refRect.width - popoverRect.width
+      top = topPosition
+      left = rightAligned
+      break
+
+    case 'top-center':
+      top = topPosition
+      left = centerAligned
       break
 
     case 'top-left':
-      top = offsetTop - popoverRect.height - options.offset
-      left = offsetLeft
+      top = topPosition
+      left = leftAligned
+      break
+
+    case 'top-full':
+      top = topPosition
+      left = options.viewportPadding
+      right = options.viewportPadding
       break
 
     case 'bottom-right':
-      top = offsetTop + refRect.height + options.offset
-      left = offsetLeft + refRect.width - popoverRect.width
+      top = bottomPosition
+      left = rightAligned
+      break
+
+    case 'bottom-center':
+      top = bottomPosition
+      left = centerAligned
       break
 
     case 'bottom-left':
-      top = offsetTop + refRect.height + options.offset
-      left = offsetLeft
+      top = bottomPosition
+      left = leftAligned
       break
 
-    // TODO: add remaining placement options
-    case 'bottom-center':
+    case 'bottom-full':
+      top = bottomPosition
+      left = options.viewportPadding
+      right = options.viewportPadding
       break
 
-    case 'top-center':
+    case 'right-top':
+      top = topVAligned
+      left = rightPosition
+      break
+    case 'right-center':
+      top = centerVAligned
+      left = rightPosition
+      break
+    case 'right-bottom':
+      top = bottomVAligned
+      left = rightPosition
+      break
+
+    case 'left-top':
+      top = topVAligned
+      left = leftPosition
+      break
+    case 'left-center':
+      top = centerVAligned
+      left = leftPosition
+      break
+    case 'left-bottom':
+      top = bottomVAligned
+      left = leftPosition
   }
 
   // Add corrections to position if necessary
@@ -114,7 +176,7 @@ export const getPopoverPosition = (
     top = offsetTop - popoverRect.height - options.offset
   }
 
-  return { top, left }
+  return { top, left, right }
 }
 
 /**

package/dist/base-style.css

@@ -92,6 +92,7 @@ fieldset {
   border: 0;
 }
 
+/* easeOutCubic */
 /* prettier-ignore */
 input,
 textarea,

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/_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;;;ADwBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErDF;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;;;ARQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AS3CJ;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;;;AV7MA;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;;;ADwBJ;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"}

package/dist/elements/text-link.css

@@ -1,3 +1,4 @@
+/* easeOutCubic */
 /* prettier-ignore */
 .text-link {
   font-size: var(--e-type-size-200);

package/dist/elements/text-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../elements/text-link/text-link.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAKA;ACyCA;ECHE;EACA;EAGE;EAMA;EAKE;EACA;EDtDJ;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAGF;EACE;;AAgCF;EA3BA;;AAEA;EACE;;AAGF;EACE;;AAwBF;EAnBA;EACA;;AAEA;EACE;;AAGF;EACE","file":"text-link.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../elements/text-link/text-link.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACyCA;ECHE;EACA;EAGE;EAMA;EAKE;EACA;EDtDJ;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAGF;EACE;;AAgCF;EA3BA;;AAEA;EACE;;AAGF;EACE;;AAwBF;EAnBA;EACA;;AAEA;EACE;;AAGF;EACE","file":"text-link.css"}

package/dist/layout/split.css

@@ -1,3 +1,4 @@
+/* easeOutCubic */
 /* prettier-ignore */
 .container {
   margin: 0 auto;

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAKA;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}

package/elements/button/u-button.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import UIcon from '../icon/u-icon.vue'
-import ULoader from '../loader/u-loader.vue'
+import { UIcon, ULoader } from '../'
+import { computed } from 'vue'
 
 // TODO: use enums for variant prop.
 interface ButtonProps {
@@ -11,9 +11,12 @@ interface ButtonProps {
   href?: string
   target?: string
   variant?: string
+  asSpan?: boolean
 }
 
-defineProps<ButtonProps>()
+const { asSpan = false } = defineProps<ButtonProps>()
+
+const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 </script>
 
 <template>
@@ -25,14 +28,18 @@ defineProps<ButtonProps>()
   </template>
 
   <template v-else>
-    <button :class="['button', variant, { loading: loading }]" :disabled="disabled || null">
+    <component
+      :is="buttonTag"
+      :class="['button', variant, { loading: loading, disabled }]"
+      :disabled="disabled || null"
+    >
       <UIcon v-if="icon" :name="icon" />
       <slot>{{ label }}</slot>
 
       <span v-if="loading" class="button__loader">
         <ULoader />
       </span>
-    </button>
+    </component>
   </template>
 </template>
 

package/elements/button-chip/button-chip.scss

@@ -63,6 +63,8 @@
     background-color a.$trs-default,
     color a.$trs-default;
 
+  @include button-chip-normal;
+
   .icon {
     margin-left: a.rem(-10);
   }
@@ -71,8 +73,6 @@
     @include button-chip-minified;
   }
 
-  @include button-chip-normal;
-
   &.inverted {
     @include button-chip-inverted;
   }

package/elements/form/form.scss

@@ -0,0 +1,174 @@
+@use '../../base/abstracts/' as a;
+
+.form {
+  .form__messages {
+    display: none;
+  }
+
+  .form__title {
+    @include a.type(800, strong);
+
+    color: var(--e-c-primary-01-500);
+
+    @include a.bp(lg) {
+      @include a.type(700, strong);
+    }
+  }
+
+  .form__lead {
+    @include a.type(200, weak);
+
+    .form__subtitle-info {
+      color: var(--e-c-secondary-01-900);
+      margin-left: var(--e-space-1);
+
+      e-icon {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .form__title + .form__lead {
+    @include a.type(300);
+
+    @include a.bp(lg) {
+      @include a.type(200);
+    }
+  }
+
+  .form__subtitle {
+    @include a.type(300, strong);
+
+    color: var(--e-c-primary-01-500);
+
+    .form__subtitle-info {
+      color: var(--e-c-secondary-01-900);
+      margin-left: var(--e-space-1);
+
+      e-icon {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .form__cta-group {
+    display: flex;
+    grid-gap: var(--e-space-5);
+
+    @include a.bp(m) {
+      flex-direction: column;
+    }
+  }
+
+  // Spacing rules for text elements.
+  .form__title + .form__lead,
+  .form__subtitle + .form__lead {
+    margin-top: var(--e-space-3); // get 12px from title to lead
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-1_5); // get 6px from title to lead
+    }
+  }
+
+  // Vertical spacing classes
+  // These classes will be set programatically for 'e-form' extension.
+
+  // Special case
+  .form__lead-row + * {
+    margin-top: var(--e-space-5);
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-3);
+    }
+  }
+
+  .form__subtitle-row + *,
+  .form__lead-row.form__subtitle-row + * {
+    margin-top: var(--e-space-6);
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-3);
+    }
+  }
+
+  .form__input-row + .form__input-row,
+  .form__title-row + *,
+  *:not(legend) + .form__lead-row {
+    margin-top: var(--e-space-10);
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-6);
+    }
+  }
+
+  .form__input-row.form__input-row--compact + .form__input-row.form__input-row--compact {
+    margin-top: var(--e-space-6);
+  }
+
+  *:not(legend) + .form__title-row,
+  *:not(legend) + .form__cta-row,
+  *:not(legend) + .form__subtitle-row {
+    margin-top: var(--e-space-16);
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-10);
+    }
+  }
+
+  .form__input-col + .form__input-col {
+    @include a.bp(lg) {
+      margin-top: var(--e-space-6);
+    }
+  }
+
+  .form__messages-row {
+    display: none;
+    margin-top: var(--e-space-10);
+  }
+
+  .form__cookiebot-message {
+    margin-bottom: var(--e-space-6);
+  }
+  //.alert + .button {
+  //  margin-top: var(--e-space-6);
+  //}
+
+  // States
+  &.form--has-general-error {
+    .form__messages-row,
+    .form__messages {
+      display: block;
+    }
+  }
+
+  &.form--hide-form-elements {
+    > *:not(.success-screen) {
+      display: none;
+    }
+  }
+
+  &.form--is-submitting {
+    .form-row:not(.form__cta-row) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+
+  .form__recaptcha {
+    font-size: a.rem(10);
+    line-height: 1.5;
+    margin-top: var(--e-space-6);
+    color: var(--e-c-mono-700);
+
+    a {
+      color: var(--e-c-primary-01-700);
+      text-underline-offset: var(--e-space-1);
+    }
+  }
+}
+
+.grecaptcha-badge {
+  visibility: hidden;
+}

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

@@ -26,6 +26,11 @@ const {
 
 const slots = useSlots()
 const model = defineModel<string>()
+const emits = defineEmits<{
+  input: [value: string | null]
+  focus: [target: FocusEvent['target']]
+  focusout: [target: FocusEvent['target']]
+}>()
 
 const input = useTemplateRef('input')
 
@@ -39,12 +44,13 @@ const spacer = '.&nbsp;'
 // In some cases we need to change the input type within the component (for example for the password-show behaviour)
 const _inputType = ref(type)
 
-const onFocus = () => {
+const onFocus = (event: FocusEvent) => {
   if (readonly || disabled) {
     return
   }
 
   isFocused.value = true
+  emits('focus', event.target)
 }
 
 const onBlur = () => {
@@ -53,6 +59,7 @@ const onBlur = () => {
 
 const onInput = () => {
   hasValue.value = !!input.value && input.value.value !== ''
+  emits('input', input.value?.value ?? null)
 }
 
 const onHover = () => {
@@ -140,6 +147,7 @@ watch(
             :required
             @input="onInput"
             @focus="onFocus"
+            @focusout="$emit('focusout', $event.target)"
             @blur="onBlur"
         /></slot>
 

package/i18n/i18n.ts

@@ -11,6 +11,8 @@ const translations = {
     passwordRequirements: 'Anforderungen an das Passwort',
     edit: 'Bearbeiten',
     cancel: 'Abbrechen',
+    openMenu: 'Menu öffnen',
+    closeMenu: 'Menu schliessen',
   },
   FR: {
     yes: 'Ja',
@@ -24,6 +26,8 @@ const translations = {
     passwordRequirements: 'Exigences relatives au mot de passe',
     edit: 'Modifier',
     cancel: 'Annuler',
+    openMenu: 'Ouvrir le menu',
+    closeMenu: 'Fermer le menu',
   },
   IT: {
     yes: 'Ja',
@@ -37,6 +41,8 @@ const translations = {
     passwordRequirements: 'Requisiti per la password',
     edit: 'modificare',
     cancel: 'cancellare',
+    openMenu: 'Apri il menu',
+    closeMenu: 'Chiudi menù',
   },
   EN: {
     yes: 'Ja',
@@ -50,6 +56,8 @@ const translations = {
     passwordRequirements: 'Password requirements',
     edit: 'Edit',
     cancel: 'Cancel',
+    openMenu: 'Open menu',
+    closeMenu: 'Close menu',
   },
 }
 

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

@@ -0,0 +1,42 @@
+@use '../grid/grid.mixin' as g;
+@use '../../base/abstracts' as a;
+
+// TODO: This class doesn't seem to be necessary. Check first then remove it.
+.form-grid {
+  width: 100%;
+}
+
+.form-row {
+  @include g.grid-row;
+
+  .form-col {
+    // Default column width
+    @include g.grid-col(6);
+  }
+
+  .form-col-1\/4 {
+    @include g.grid-col(3);
+  }
+
+  .form-col-2\/4 {
+    // Default column width
+    @include g.grid-col(6);
+  }
+
+  .form-col-3\/4 {
+    @include g.grid-col(9);
+  }
+
+  .form-col-4\/4 {
+    @include g.grid-col(12);
+  }
+
+  .form-col,
+  .form-col-1\/4,
+  .form-col-2\/4,
+  .form-col-3\/4 {
+    @include a.bp(lg) {
+      @include g.grid-col(12);
+    }
+  }
+}

package/modules/index.js

@@ -1,3 +1,5 @@
 export { default as UFeedback } from './feedback/u-feedback.vue'
 export { default as UFooter } from './footer/u-footer.vue'
 export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-group.vue'
+export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-navigation-toolbar-top.vue'
+export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'