@energie360/ui-library 0.1.19 → 0.1.21

package/components/richtext/u-richtext.vue

@@ -5,7 +5,7 @@ interface Props {
   inverted?: boolean
 }
 
-const { small = false, inverted = false } = defineProps<Props>()
+const { text = '', small = false, inverted = false } = defineProps<Props>()
 
 const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': inverted }]
 </script>

package/components/table/cell-ctas.scss

@@ -3,4 +3,5 @@
 .cell-ctas {
   display: flex;
   column-gap: var(--e-space-4);
+  line-height: 0;
 }

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

@@ -7,7 +7,7 @@ interface Props {
   labelPosition?: 'top' | 'right'
 }
 
-const { labelPosition = 'top' } = defineProps<Props>()
+const { label = '', labelPosition = 'top' } = defineProps<Props>()
 </script>
 
 <template>

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

@@ -10,6 +10,7 @@ interface Props extends TableCellBase {
 }
 
 const {
+  infoText = '',
   textStyle = TableCellTextStyle.normal,
   hAlign = TableCellHAlign.left,
   vAlign = TableCellVAlign.center,

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

@@ -6,17 +6,15 @@ interface Props {
   nowrap?: boolean
 }
 
-const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
+const { text = '', hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
 </script>
 
 <template>
   <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
     <div :class="['cell-content', { nowrap }]">
-      <slot :text="text">{{ text }}</slot>
+      <slot>{{ text }}</slot>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './table-heading.scss';
-</style>
+<style scoped lang="scss" src="./table-heading.scss"></style>

package/components/tabs/u-tabs.vue

@@ -97,11 +97,17 @@ const positionActiveBar = () => {
     activeTabEl = tabs.value.find((item) => item.value === model.value)
   }
 
-  const activeTabRelPos = getOffsetParentPosition(activeTabEl)
+  try {
+    const activeTabRelPos = getOffsetParentPosition(activeTabEl)
 
-  activeBarStyles.value = {
-    width: `${activeTabEl.offsetWidth}px`,
-    left: `${activeTabRelPos.left + list.value.scrollLeft}px`,
+    activeBarStyles.value = {
+      width: `${activeTabEl.offsetWidth}px`,
+      left: `${activeTabRelPos.left + list.value.scrollLeft}px`,
+    }
+  } catch {
+    // This will sometimes fail during resizing. Not sure why it happens.
+    // Also when coverage-testing this will fail.
+    // We don't need to do anything here.
   }
 }
 

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

@@ -6,7 +6,7 @@ interface Props {
   centered?: boolean
 }
 
-const { centered = false } = defineProps<Props>()
+const { title = '', text = '', centered = false } = defineProps<Props>()
 </script>
 
 <template>

package/dist/base-style.css

@@ -3,28 +3,6 @@
 Base styling and resets for all vue-components/custom-elements.
 This must be loaded before all other styles.
 */
-/**
- * @license
- * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
- *
- * The fonts listed in this notice are subject to the End User License
- * Agreement(s) entered into by the website owner. All other parties are
- * explicitly restricted from using the Licensed Webfonts(s).
- *
- * Webfont: Glober-Bold by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * Webfont: Glober-Regular by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * © 2020 MyFonts Inc
-*/
-/* @import must be at top of file, otherwise CSS will not work */
-@import url("//hello.myfonts.net/count/3c2a64");
 body {
   margin: 0;
   min-height: 100vh;
@@ -180,6 +158,29 @@ body {
   outline: none;
 }
 
+/**
+ * @license
+ * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
+ *
+ * The fonts listed in this notice are subject to the End User License
+ * Agreement(s) entered into by the website owner. All other parties are
+ * explicitly restricted from using the Licensed Webfonts(s).
+ *
+ * Webfont: Glober-Bold by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * Webfont: Glober-Regular by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * © 2020 MyFonts Inc
+*/
+/* @import must be at top of file, otherwise CSS will not work */
+/* TODO: Add this import only for production build. Currently It causes weird warnings in dev mode. */
+/* @import url('//hello.myfonts.net/count/3c2a64'); */
 /* TODO: Assets path is hardcoded here. Should be configurable */
 /* Regular */
 @font-face {

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/_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;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;;;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"}
+{"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"}

package/elements/button/u-button.vue

@@ -18,7 +18,14 @@ interface ButtonProps {
   hideLabelLg?: boolean
 }
 
-const { asSpan = false } = defineProps<ButtonProps>()
+const {
+  label = '',
+  variant = 'filled',
+  icon = '',
+  href = '',
+  target = '',
+  asSpan = false,
+} = defineProps<ButtonProps>()
 
 const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 </script>

package/elements/button-chip/u-button-chip.vue

@@ -15,7 +15,13 @@ interface Props {
   target?: string
 }
 
-const { variant = ButtonChipVariant.normal } = defineProps<Props>()
+const {
+  label = '',
+  icon = '',
+  href = '',
+  target = '',
+  variant = ButtonChipVariant.normal,
+} = defineProps<Props>()
 </script>
 
 <template>
@@ -23,9 +29,9 @@ const { variant = ButtonChipVariant.normal } = defineProps<Props>()
     <a :class="['button-chip', variant]" :href :target>
       <UIcon v-if="icon" :name="icon"></UIcon>
 
-      <span class="button-chip__label"
-        ><slot>{{ label }}</slot></span
-      >
+      <span class="button-chip__label">
+        <slot>{{ label }}</slot>
+      </span>
     </a>
   </template>
 
@@ -33,9 +39,9 @@ const { variant = ButtonChipVariant.normal } = defineProps<Props>()
     <button :class="['button-chip', variant]" :disabled>
       <UIcon v-if="icon" :name="icon"></UIcon>
 
-      <span class="button-chip__label"
-        ><slot>{{ label }}</slot></span
-      >
+      <span class="button-chip__label">
+        <slot>{{ label }}</slot>
+      </span>
     </button>
   </template>
 </template>

package/elements/checkbox/u-checkbox.vue

@@ -9,7 +9,7 @@ interface Props {
   errorMessage?: string
 }
 
-const { errorMessage = '' } = defineProps<Props>()
+const { label = '', errorMessage = '' } = defineProps<Props>()
 
 const model = defineModel<boolean>()
 const cId = `checkbox-${useId()}`

package/elements/icon-button/u-icon-button.vue

@@ -10,7 +10,7 @@ interface Props {
   target?: string
 }
 
-const { target = '_blank', variant = 'filled' } = defineProps<Props>()
+const { label = '', href = '', target = '_blank', variant = 'filled' } = defineProps<Props>()
 </script>
 
 <template>

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -5,7 +5,6 @@ import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
   label?: string
-  value?: string | number
   name: string
   disabled?: boolean
   readonly?: boolean
@@ -24,6 +23,7 @@ const {
   max = '',
   step = '1',
   error = false,
+  errorMessage = '',
 } = defineProps<Props>()
 
 const cId = `numeric-stepper-${useId()}`
@@ -125,6 +125,7 @@ onMounted(() => {
 
     <button
       ref="stepDownButton"
+      type="button"
       class="stepper-button dec"
       :aria-disabled="stepButtonDownDisabled ? 'true' : 'false'"
       :disabled="stepButtonDownDisabled"
@@ -136,6 +137,7 @@ onMounted(() => {
 
     <button
       ref="stepUpButton"
+      type="button"
       class="stepper-button inc"
       :aria-disabled="stepButtonUpDisabled ? 'true' : 'false'"
       :disabled="stepButtonUpDisabled"

package/elements/select-chip/u-select-chip.vue

@@ -11,6 +11,7 @@ interface Props {
   provideKey?: string
 }
 const {
+  label = '',
   name,
   disabled = false,
   value = '',
@@ -30,7 +31,9 @@ const classes = computed(() =>
   <div class="select-chip">
     <label :class="classes" class="select-chip__button button">
       <UIcon v-if="model === value" name="mini-check" />
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
 
       <slot>
         <input v-model="model" type="radio" :name :value :disabled @change="onChange" />

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

@@ -16,6 +16,8 @@ interface Props extends FormFieldBase {
 const inputId = useId()
 
 const {
+  placeholder = '',
+  unit = '',
   disabled = false,
   readonly = false,
   required = false,

package/elements/textarea/u-textarea.vue

@@ -10,6 +10,7 @@ interface Props extends FormFieldBase {
 }
 
 const {
+  placeholder = '',
   required = false,
   disabled = false,
   readonly = false,

package/elements/toggle-switch/u-toggle-switch.vue

@@ -14,6 +14,7 @@ export interface ToggleSwitch {
 }
 
 const {
+  label = '',
   variant = 'big',
   labelPosition = 'right',
   disabled = false,

package/layout/index.js

@@ -1,5 +1,6 @@
 export { default as UPortalLayout } from './portal/u-portal.vue'
+export { default as UPortalMain } from './portal-main/u-portal-main.vue'
+export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'
 export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
 export { default as UTileItem } from './tile-grid/u-tile-item.vue'
 export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
-export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'

package/layout/portal/portal.scss

@@ -2,62 +2,46 @@
 @use '../../layout/container/container' as c;
 
 .portal {
-  --side-nav-width: 80px;
-}
+  width: 100%;
+  display: grid;
+  grid:
+    'nav body' 1fr
+    / auto 1fr;
 
-.portal__side-navigation {
-  position: fixed;
-  height: 100vh;
-  display: flex;
-}
-
-.portal__top-navigation {
-  display: none;
+  @include a.bp(lg) {
+    grid-template-areas: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 56px auto;
+    min-height: 100vh;
+  }
 }
 
-.portal__sub-navigation {
+.portal__side-navigation {
+  grid-area: nav;
   position: sticky;
   top: 0;
-  z-index: 10;
-  background-color: var(--e-c-mono-00);
-}
-
-.portal__main {
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--side-nav-width);
-  min-height: 100vh;
-}
-
-.portal__content-container {
-  @include c.portal-content-container;
-
-  padding-top: var(--e-space-10);
-  padding-bottom: var(--e-space-10);
+  height: 100vh;
+  z-index: 1;
 
   @include a.bp(lg) {
-    padding-top: var(--e-space-8);
-  }
-
-  @include a.bp(m) {
-    padding-top: var(--e-space-6);
+    display: none;
   }
 }
 
-.portal__footer {
-  margin-top: auto;
-}
+.portal__top-navigation {
+  display: none;
+  position: relative;
+  z-index: 20;
 
-@include a.bp(lg) {
-  .portal__top-navigation {
+  @include a.bp(lg) {
     display: block;
   }
+}
 
-  .portal__side-navigation {
-    display: none;
-  }
+.portal__body {
+  grid-area: body;
 
-  .portal__sub-navigation {
-    background-color: var(--e-c-mono-50);
+  @include a.bp(lg) {
+    grid-area: auto;
   }
 }

package/layout/portal/u-portal.vue

@@ -1,49 +1,28 @@
 <script setup lang="ts">
-import { useTemplateRef, onMounted, ref } from 'vue'
+import { provide } from 'vue'
 
-const sideNavObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    if (entry.target === sideNavEl.value) {
-      sideNavWidth.value = entry.contentBoxSize[0].inlineSize
-    }
-  }
-})
+const slots = defineSlots<{
+  default()
+  sideNavigation()
+  topNavigation()
+  footer()
+}>()
 
-const sideNavEl = useTemplateRef('sideNavigation')
-const sideNavWidth = ref(0)
-
-onMounted(() => {
-  sideNavObserver.observe(sideNavEl.value)
-})
+provide('portal-footer-slot', slots.footer)
 </script>
 
 <template>
-  <div
-    class="portal"
-    :style="{
-      '--side-nav-width': `${sideNavWidth}px`,
-    }"
-  >
+  <div class="portal">
     <div ref="sideNavigation" class="portal__side-navigation">
-      <slot name="side-navigation"></slot>
+      <slot name="sideNavigation"></slot>
     </div>
 
     <div class="portal__top-navigation">
-      <slot name="top-navigation"></slot>
+      <slot name="topNavigation"></slot>
     </div>
 
-    <div class="portal__main">
-      <div class="portal__sub-navigation">
-        <slot name="sub-navigation"></slot>
-      </div>
-
-      <div class="portal__content-container">
-        <slot></slot>
-      </div>
-
-      <div class="portal__footer">
-        <slot name="footer"></slot>
-      </div>
+    <div class="portal__body">
+      <slot></slot>
     </div>
   </div>
 </template>

package/layout/portal-main/portal-main.scss

@@ -0,0 +1,98 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.portal-main {
+  --panel-width: 300px;
+  --panel-height-mobile: 180px;
+
+  width: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 0 minmax(0, 1fr);
+  grid-template-areas: 'panel main';
+  transition: grid a.$trs-default;
+
+  &.show-panel {
+    grid-template-columns: var(--panel-width) minmax(0, 1fr);
+
+    .portal-main__panel {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  @include a.bp(lg) {
+    grid-template-areas: none;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 0 auto;
+    height: 100%;
+
+    &.show-panel {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: var(--panel-height-mobile) auto;
+    }
+  }
+}
+
+.portal-main__main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+
+  @include a.bp(lg) {
+    grid-area: auto;
+  }
+}
+
+.portal-main__panel {
+  grid-area: panel;
+  position: sticky;
+  top: 0;
+  min-width: 0;
+  height: 100vh;
+  width: var(--panel-width);
+  opacity: 0;
+  transform: translateX(-100%);
+  overflow: hidden;
+  transition:
+    transform a.$trs-default,
+    opacity a.$trs-default;
+
+  @include a.bp(lg) {
+    grid-area: auto;
+    position: static;
+    width: 100%;
+    height: var(--panel-height-mobile);
+    transform: translateY(-100%);
+  }
+}
+
+.portal-main__sub-navigation {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--e-c-mono-00);
+
+  @include a.bp(lg) {
+    background-color: var(--e-c-mono-50);
+  }
+}
+
+.portal-main__content {
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-10);
+
+  @include c.portal-content-container;
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+  }
+
+  @include a.bp(m) {
+    padding-top: var(--e-space-6);
+  }
+}
+
+.portal-main__footer {
+  margin-top: auto;
+}

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface Props {
+  showPanel?: boolean
+}
+
+defineProps<Props>()
+
+const portalFooterSlot = inject('portal-footer-slot')
+</script>
+
+<template>
+  <div :class="['portal-main', { 'show-panel': showPanel }]">
+    <div class="portal-main__panel">
+      <slot name="panel"></slot>
+    </div>
+
+    <div class="portal-main__main">
+      <div class="portal-main__sub-navigation">
+        <slot name="subNavigation"></slot>
+      </div>
+
+      <div class="portal-main__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="portalFooterSlot || $slots.footer" class="portal-main__footer">
+        <slot name="footer">
+          <component :is="vnode" v-for="(vnode, idx) in portalFooterSlot()" :key="idx" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-main.scss"></style>

package/layout/tile-grid/u-tile-item.vue

@@ -13,3 +13,10 @@ const { width = '1' } = defineProps<Props>()
 </template>
 
 <style scoped lang="scss" src="./tile-item.scss"></style>
+<style lang="scss">
+.tile-item {
+  .card {
+    height: 100%;
+  }
+}
+</style>

package/modules/dialog/u-dialog.vue

@@ -15,8 +15,14 @@ interface Props {
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
-const { mobileDialogStyle = 'modal', closeBtnLabel = getTranslation('close') } =
-  defineProps<Props>()
+const {
+  title = '',
+  text = '',
+  headerImage = undefined,
+  contentImage = undefined,
+  mobileDialogStyle = 'modal',
+  closeBtnLabel = getTranslation('close'),
+} = defineProps<Props>()
 
 const visible = defineModel<boolean>('visible')
 const dialogEl = useTemplateRef('dialog')

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

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel {
   overflow: auto;