@energie360/ui-library 0.1.16 → 0.1.17

package/components/card-info/card-info.scss

@@ -0,0 +1,40 @@
+@use '../../base/abstracts' as a;
+
+.card-info {
+  padding: var(--e-space-6);
+  border: 1px solid var(--e-c-mono-200);
+  border-top-left-radius: var(--e-brd-radius-2);
+  border-top-right-radius: var(--e-brd-radius-2);
+
+  &:last-of-type {
+    border-bottom-left-radius: var(--e-brd-radius-2);
+    border-bottom-right-radius: var(--e-brd-radius-2);
+  }
+}
+
+.card-info__image {
+  width: a.rem(80);
+  height: a.rem(80);
+
+  + .card-info__title {
+    margin-top: var(--e-space-4);
+  }
+}
+
+.card-info__title {
+  @include a.type(300, strong);
+
+  + .card-info__description {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.card-info__description {
+  @include a.type(200);
+}
+
+.card-info + .card-info {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+
+interface Props {
+  image?: Image
+  title?: string
+  description?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="card-info">
+    <div class="card-info__image">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+
+    <h2 class="card-info__title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+
+    <p class="card-info__description">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </p>
+  </section>
+</template>
+
+<style scoped lang="scss" src="./card-info.scss"></style>

package/components/index.js

@@ -51,3 +51,4 @@ export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.
 export { default as UWelcome } from './welcome/u-welcome.vue'
 export { default as UHint } from './hint/u-hint.vue'
 export { default as UNavigationPanelTile } from './navigation-panel-tile/u-navigation-panel-tile.vue'
+export { default as UCardInfo } from './card-info/u-card-info.vue'

package/components/inline-edit/inline-edit.scss

@@ -1,4 +1,5 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
+@use '../richtext/richtext' as r;
 
 .inline-edit {
   border-bottom: 1px solid var(--e-c-mono-200);
@@ -36,6 +37,9 @@
 .inline-edit__summary {
   @include a.type(300);
 
+  // We don't need a full richtext implementation. The spacings are enough.
+  @include r.richtext-spacing-rules;
+
   color: var(--e-c-mono-700);
 }
 

package/components/inline-edit/u-inline-edit.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, inject, useId, watch, useTemplateRef } from 'vue'
-import UButton from '../../elements/button/u-button.vue'
+import { UButton } from '../../elements'
+import { URichtext } from '../../components'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
-  title: string
-  summary: string
-  description: string
+  title?: string
+  summary?: string
+  description?: string
+  nonEditable?: boolean
 }
 
 defineProps<Props>()
@@ -69,25 +71,32 @@ defineExpose({ collapse })
 </script>
 
 <template>
-  <div ref="root" class="inline-edit" :class="{ expanded, disabled }">
+  <div ref="root" class="inline-edit" :class="{ expanded, disabled, 'non-editable': nonEditable }">
     <div class="inline-edit__heading">
       <div class="inline-edit__heading-col">
-        <p :id="headingId" class="inline-edit__title">{{ title }}</p>
-
-        <p class="inline-edit__summary">
-          <slot name="summary">{{ summary }}</slot>
+        <p :id="headingId" class="inline-edit__title">
+          <slot name="title">{{ title }}</slot>
         </p>
-        <p class="inline-edit__description" v-html="description"></p>
+
+        <div class="inline-edit__summary">
+          <slot name="summary"><div v-html="summary" /></slot>
+        </div>
+
+        <div class="inline-edit__description">
+          <slot name="description"><div v-html="description" /></slot>
+        </div>
       </div>
-      <div class="inline-edit__heading-cta-col">
+
+      <div v-if="!nonEditable" class="inline-edit__heading-cta-col">
         <UButton
           variant="plain-spaceless"
           :disabled
           :aria-controls="panelId"
           :aria-expanded="expanded"
           @click="onEditToggle"
-          >{{ getTranslation(expanded ? 'cancel' : 'edit') }}</UButton
         >
+          {{ getTranslation(expanded ? 'cancel' : 'edit') }}
+        </UButton>
       </div>
     </div>
 

package/components/richtext/richtext.scss

@@ -1,8 +1,7 @@
 @use '../../base/abstracts' as a;
 @use './wizard';
 
-.richtext {
-  // Spacing rules
+@mixin richtext-spacing-rules {
   * + * {
     margin-top: var(--e-space-3);
   }
@@ -23,7 +22,9 @@
   * + ol {
     margin-top: var(--e-space-6);
   }
+}
 
+@mixin richtext-spacing-rules-mobile {
   @include a.bp(lg) {
     * + * {
       margin-top: var(--e-space-2);
@@ -41,6 +42,12 @@
       margin-top: var(--e-space-10);
     }
   }
+}
+
+.richtext {
+  // Spacing rules
+  @include richtext-spacing-rules;
+  @include richtext-spacing-rules-mobile;
 
   // Element styles
   h2,

package/components/richtext/u-richtext.vue

@@ -13,7 +13,9 @@ const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': i
 <template>
   <div v-if="text" :class="classes" v-html="text"></div>
 
-  <div v-else :class="classes"><slot></slot></div>
+  <div v-else :class="classes">
+    <slot />
+  </div>
 </template>
 
 <style lang="scss" src="./richtext.scss"></style>

package/dist/elements/form.css

@@ -0,0 +1,170 @@
+/* easeOutCubic */
+/* prettier-ignore */
+.form .form__messages {
+  display: none;
+}
+.form .form__title {
+  font-size: var(--e-type-size-800);
+  line-height: var(--e-type-line-height-800);
+  letter-spacing: 0.025rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+@media (max-width: 1020px) {
+  .form .form__title {
+    font-size: var(--e-type-size-700);
+    line-height: var(--e-type-line-height-700);
+    letter-spacing: 0.025rem;
+    font-weight: var(--e-type-weight-strong);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.form .form__lead {
+  font-size: var(--e-type-size-200);
+  line-height: var(--e-type-line-height-200);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-weak);
+}
+.form .form__lead .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__lead .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__title + .form__lead {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead {
+    font-size: var(--e-type-size-200);
+    line-height: var(--e-type-line-height-200);
+    letter-spacing: 0.01875rem;
+  }
+}
+.form .form__subtitle {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+.form .form__subtitle .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__subtitle .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__cta-group {
+  display: flex;
+  grid-gap: var(--e-space-5);
+}
+@media (max-width: 740px) {
+  .form .form__cta-group {
+    flex-direction: column;
+  }
+}
+.form .form__title + .form__lead,
+.form .form__subtitle + .form__lead {
+  margin-top: var(--e-space-3);
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead,
+  .form .form__subtitle + .form__lead {
+    margin-top: var(--e-space-1_5);
+  }
+}
+.form .form__lead-row + * {
+  margin-top: var(--e-space-5);
+}
+@media (max-width: 1020px) {
+  .form .form__lead-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__subtitle-row + *,
+.form .form__lead-row.form__subtitle-row + * {
+  margin-top: var(--e-space-6);
+}
+@media (max-width: 1020px) {
+  .form .form__subtitle-row + *,
+  .form .form__lead-row.form__subtitle-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__input-row + .form__input-row,
+.form .form__title-row + *,
+.form *:not(legend) + .form__lead-row {
+  margin-top: var(--e-space-10);
+}
+@media (max-width: 1020px) {
+  .form .form__input-row + .form__input-row,
+  .form .form__title-row + *,
+  .form *:not(legend) + .form__lead-row {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__input-row.form__input-row--compact + .form__input-row.form__input-row--compact {
+  margin-top: var(--e-space-6);
+}
+.form *:not(legend) + .form__title-row,
+.form *:not(legend) + .form__cta-row,
+.form *:not(legend) + .form__subtitle-row {
+  margin-top: var(--e-space-16);
+}
+@media (max-width: 1020px) {
+  .form *:not(legend) + .form__title-row,
+  .form *:not(legend) + .form__cta-row,
+  .form *:not(legend) + .form__subtitle-row {
+    margin-top: var(--e-space-10);
+  }
+}
+@media (max-width: 1020px) {
+  .form .form__input-col + .form__input-col {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__messages-row {
+  display: none;
+  margin-top: var(--e-space-10);
+}
+.form .form__cookiebot-message {
+  margin-bottom: var(--e-space-6);
+}
+.form.form--has-general-error .form__messages-row,
+.form.form--has-general-error .form__messages {
+  display: block;
+}
+.form.form--hide-form-elements > *:not(.success-screen) {
+  display: none;
+}
+.form.form--is-submitting .form-row:not(.form__cta-row) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.form .form__recaptcha {
+  font-size: 0.625rem;
+  line-height: 1.5;
+  margin-top: var(--e-space-6);
+  color: var(--e-c-mono-700);
+}
+.form .form__recaptcha a {
+  color: var(--e-c-primary-01-700);
+  text-underline-offset: var(--e-space-1);
+}
+
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
+/*# sourceMappingURL=form.css.map */

package/dist/elements/form.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../elements/form/form.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFE;EACE;;AAGF;ECoCA;EACA;EAGE;EAMA;EAKE;EACA;EDjDF;;ACWF;EDdA;ICoCA;IACA;IAGE;IAMA;IAKE;IACA;;;AD1CJ;EC0BA;EACA;EAKE;EAIA;;ADjCA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;ECYA;EACA;EAKE;;AA5BF;EDUA;ICYA;IACA;IAKE;;;ADVF;ECIA;EACA;EAGE;EAMA;EAKE;EACA;EDjBF;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;ACpCF;EDkCA;IAKI;;;AAKJ;AAAA;EAEE;;AC9CF;ED4CA;AAAA;IAKI;;;AAQJ;EACE;;AC1DF;EDyDA;IAII;;;AAIJ;AAAA;EAEE;;ACnEF;EDiEA;AAAA;IAKI;;;AAIJ;AAAA;AAAA;EAGE;;AC7EF;ED0EA;AAAA;AAAA;IAMI;;;AAIJ;EACE;;AAGF;AAAA;AAAA;EAGE;;AC3FF;EDwFA;AAAA;AAAA;IAMI;;;AC9FJ;EDkGA;IAEI;;;AAIJ;EACE;EACA;;AAGF;EACE;;AASA;AAAA;EAEE;;AAKF;EACE;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE","file":"form.css"}

package/dist/layout/form-grid.css

@@ -0,0 +1,184 @@
+/* easeOutCubic */
+/* prettier-ignore */
+/**
+Helper to colculate col width in %.
+Looks complicated because we use grid-gap on the row, which takes away from available width.
+ */
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+.form-grid {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 2.6315789474%;
+}
+@media (max-width: 1020px) {
+  .form-row {
+    grid-gap: 2.5531914894%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row {
+    grid-gap: 3.6363636364%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row {
+    grid-gap: 4.1666666667%;
+  }
+}
+.form-row .form-col {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-1\/4 {
+  flex: 0 0 23.0263157895%;
+  max-width: 23.0263157895%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 23.085106383%;
+    max-width: 23.085106383%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 22.2727272727%;
+    max-width: 22.2727272727%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 21.875%;
+    max-width: 21.875%;
+  }
+}
+.form-row .form-col-2\/4 {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-3\/4 {
+  flex: 0 0 74.3421052632%;
+  max-width: 74.3421052632%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.3617021277%;
+    max-width: 74.3617021277%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.0909090909%;
+    max-width: 74.0909090909%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 73.9583333333%;
+    max-width: 73.9583333333%;
+  }
+}
+.form-row .form-col-4\/4 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 740px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 520px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/*# sourceMappingURL=form-grid.css.map */

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

@@ -0,0 +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,UFgBgB;;AIThB;EDbF;IDSI,UFca;;;AIVf;EDbF;IDaI,UFWY;;;AIXd;EDbF;IDiBI,UFQY;;;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","file":"form-grid.css"}

package/elements/form/form.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .form {
   .form__messages {

package/elements/form-field/form-field-prefix-suffix.scss

@@ -48,6 +48,10 @@
     transform: translateY(-50%);
   }
 
+  .suffix-action {
+    display: flex;
+  }
+
   .suffix-text {
     @include a.type(200);
   }
@@ -70,6 +74,7 @@
     }
   }
 
+  &:has(.suffix-action),
   &:has(.suffix-text) {
     // A suffix only makes sense for an <input>. That's why we select only input here.
     .control input {

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

@@ -129,9 +129,9 @@ watch(
   >
     <div class="wrapper">
       <div class="label">
-        <slot name="label">
-          <label :for="inputId">{{ label }}</label>
-        </slot>
+        <label :for="inputId">
+          <slot name="label">{{ label }}</slot>
+        </label>
       </div>
 
       <div class="control">
@@ -174,6 +174,11 @@ watch(
       <span v-if="type === TextFieldTypes.date" class="suffix-icon">
         <UIcon name="calendar"></UIcon>
       </span>
+
+      <!-- ACTION -->
+      <span v-if="!!slots.action" class="suffix-action custom-action">
+        <slot name="action"></slot>
+      </span>
     </div>
 
     <div class="help-text">
@@ -191,6 +196,16 @@ watch(
   </div>
 </template>
 
+<style scoped lang="scss" src="./text-field.scss"></style>
+
 <style scoped lang="scss">
-@use './text-field.scss';
+.suffix-action.custom-action {
+  :slotted(button) {
+    cursor: pointer;
+  }
+
+  :slotted(.icon) {
+    color: var(--e-c-secondary-05-700);
+  }
+}
 </style>

package/layout/index.js

@@ -0,0 +1,2 @@
+export { default as USettingsLayout } from './settings/u-settings-layout.vue'
+export { default as UPortalLayout } from './portal/u-portal.vue'

package/layout/portal/portal.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.portal {
+  display: flex;
+  height: 100vh;
+}
+
+.portal__top-navigation {
+  display: none;
+}
+
+.portal__main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.portal__footer {
+  margin-top: auto;
+}
+
+@include a.bp(lg) {
+  .portal {
+    flex-direction: column;
+  }
+
+  .portal__top-navigation {
+    display: block;
+  }
+
+  .portal__side-navigation {
+    display: none;
+  }
+}

package/layout/portal/u-portal.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="portal">
+    <div class="portal__side-navigation">
+      <slot name="side-navigation"></slot>
+    </div>
+
+    <div class="portal__top-navigation">
+      <slot name="top-navigation"></slot>
+    </div>
+
+    <div class="portal__main">
+      <slot></slot>
+
+      <div class="portal__footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped lang="scss" src="./portal.scss"></style>

package/layout/settings/settings.scss

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

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

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

package/modules/dialog/_animations.scss

@@ -0,0 +1,49 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    display: none;
+  }
+
+  100% {
+    opacity: 1;
+    display: flex;
+  }
+}
+
+@keyframes fade-in-backdrop {
+  0% {
+    background-color: transparent;
+  }
+
+  100% {
+    background-color: var(--e-c-mono-900);
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 1;
+    transform: translateY(100%);
+    display: none;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    display: flex;
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    display: flex;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(100%);
+    display: none;
+  }
+}

package/modules/dialog/dialog.scss

@@ -0,0 +1,168 @@
+// TODO: Styles have been copied from 'news'. Refactor when possible.
+@use '../../base/abstracts' as a;
+@use './animations';
+
+.dialog-container {
+  --overflow-gradient-height: var(--e-space-10);
+
+  padding: 0;
+  border: 0;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  &[open] {
+    display: flex;
+    animation: fade-in var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &[open]::backdrop {
+    background-color: var(--e-c-mono-900);
+    opacity: 0.4;
+    animation: fade-in-backdrop var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &.has-header-image {
+    .dialog__header-image-container {
+      display: flex;
+    }
+  }
+
+  &.has-content-image {
+    .dialog__content-image {
+      display: block;
+    }
+  }
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--e-c-mono-00);
+  overflow: auto;
+  scrollbar-width: none;
+  border-radius: var(--e-brd-radius-3);
+  padding: var(--e-space-7) var(--e-space-7) 0;
+  height: a.rem(670);
+  max-height: 80vh;
+  max-width: a.rem(480);
+  width: 100%;
+
+  * + .dialog__content-image {
+    margin-top: var(--e-space-5);
+  }
+
+  @include a.bp(m) {
+    max-width: none;
+    height: auto;
+    min-height: a.rem(440);
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+  }
+}
+
+.dialog__header-image-container {
+  display: none;
+  justify-content: center;
+  height: a.rem(184);
+  margin-bottom: var(--e-space-8);
+
+  img {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-container {
+  margin-bottom: auto;
+}
+
+.content-title {
+  @include a.type(500, strong);
+
+  @include a.bp(m) {
+    @include a.type(300, strong);
+  }
+}
+
+.content-title + .content-text {
+  margin-top: var(--e-space-2);
+
+  @include a.bp(m) {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.dialog__content-image {
+  display: none;
+
+  img {
+    width: 100%;
+  }
+}
+
+.cta-container {
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  margin-top: var(--overflow-gradient-height);
+  padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);
+  background-color: var(--e-c-mono-00);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(var(--overflow-gradient-height) * -1);
+    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%);
+  }
+
+  @include a.bp(m) {
+    padding: var(--e-space-8) 0 var(--e-space-7);
+  }
+}
+
+// MOBILE "MODAL" Variant
+.dialog-container.modal {
+  @include a.bp(m) {
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+// MOBILE "SLIDE-OUT" Variant
+.dialog-container.slideout {
+  @include a.bp(m) {
+    align-items: flex-end;
+
+    // Closing animation
+    animation: slide-out var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &[open] {
+      display: flex;
+      animation: slide-in var(--e-trs-duration-fast) var(--e-trs-easing-default);
+    }
+
+    .dialog {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      max-height: 90vh;
+    }
+  }
+}
+
+body:has(.dialog[open]) {
+  overflow: hidden;
+}

package/modules/dialog/u-dialog.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { useTemplateRef, watch, useSlots } from 'vue'
+import { UButton } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+import { focusTrap } from '../../utils/a11y/focus-trap'
+
+interface Props {
+  title?: string
+  text?: string
+  headerImage?: Image
+  contentImage?: Image
+  closeBtnLabel?: string
+  mobileDialogStyle?: 'modal' | 'slideout'
+}
+
+const { mobileDialogStyle = 'modal', closeBtnLabel = getTranslation('close') } =
+  defineProps<Props>()
+
+const visible = defineModel<boolean>('visible')
+const dialogEl = useTemplateRef('dialog')
+const slots = useSlots()
+let focusTrapInstance
+
+// TODO: Key codes should be defined globally
+const ESC = 'Escape'
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.code === ESC) {
+    visible.value = false
+  }
+}
+
+const onDocumentClick = (e: Event) => {
+  if (e.target.closest('.dialog')) {
+    return
+  }
+
+  e.stopPropagation()
+  e.preventDefault()
+
+  visible.value = false
+}
+watch(visible, (newV) => {
+  if (newV) {
+    // Open Dialog
+    dialogEl.value.showModal()
+
+    focusTrapInstance = focusTrap(dialogEl.value, {
+      focusFirstElement: true,
+      allowArrowUpDown: true,
+      allowArrowLeftRight: true,
+    })
+
+    requestAnimationFrame(() => {
+      window.addEventListener('keydown', onKeydown)
+      document.addEventListener('click', onDocumentClick)
+    })
+  } else {
+    focusTrapInstance.release()
+
+    // Close Dialog
+    // The trigger element automatically gets the focus when the dialog is closed. yay native :)
+    dialogEl.value.close()
+
+    window.removeEventListener('keydown', onKeydown)
+    document.removeEventListener('click', onDocumentClick)
+  }
+})
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    closedby="none"
+    :class="[
+      'dialog-container',
+      mobileDialogStyle,
+      {
+        'has-header-image': !!slots['header-image'] || headerImage,
+        'has-content-image': !!slots['content-image'] || contentImage,
+      },
+    ]"
+  >
+    <div class="dialog">
+      <div class="dialog__header-image-container">
+        <slot name="header-image">
+          <img v-bind="headerImage" />
+        </slot>
+      </div>
+
+      <div class="dialog__content-container">
+        <div class="content-title">
+          <h3>
+            <slot name="title">{{ title }}</slot>
+          </h3>
+        </div>
+
+        <div class="content-text">
+          <div class="richtext">
+            <slot name="text">
+              <div v-html="text"></div>
+            </slot>
+          </div>
+        </div>
+
+        <div class="dialog__content-image">
+          <slot name="content-image">
+            <img v-bind="contentImage" />
+          </slot>
+        </div>
+      </div>
+
+      <div class="cta-container">
+        <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped lang="scss" src="./dialog.scss"></style>
+<style scoped lang="scss">
+.dialog__header-image-container {
+  :slotted(img) {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-image {
+  :slotted(img) {
+    width: 100%;
+  }
+}
+</style>

package/modules/index.js

@@ -7,3 +7,4 @@ export { default as UNavigationPanel } from './navigation-panel/u-navigation-pan
 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 UDialog } from './dialog/u-dialog.vue'

package/modules/inline-edit-group/u-inline-edit-group.vue

@@ -7,6 +7,8 @@ const update = (id) => {
 
 const activeEdit = ref('')
 
+defineExpose({ update })
+
 provide('inline-edit-group', {
   update,
   activeEdit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
     "./elements": "./elements/index.js",
     "./components": "./components/index.js",
     "./modules": "./modules/index.js",
+    "./layout": "./layout/index.js",
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",

package/utility/elements/form.scss

@@ -0,0 +1 @@
+@use '../../elements/form/form';

package/utility/layout/form-grid.scss

@@ -0,0 +1 @@
+@use '../../layout/form-grid/form-grid';