@energie360/ui-library 0.1.20 → 0.1.21

package/components/badge/u-badge.vue

@@ -11,7 +11,15 @@ interface Props {
   right?: number
 }
 
-const { color = 'var(--e-c-mono-900)', type = 'default', show = true } = defineProps<Props>()
+const {
+  value = undefined,
+  state = undefined,
+  top = 0,
+  right = 0,
+  color = 'var(--e-c-mono-900)',
+  type = 'default',
+  show = true,
+} = defineProps<Props>()
 </script>
 
 <template>

package/components/card/card.scss

@@ -6,7 +6,9 @@
   border-radius: var(--e-brd-radius-2);
   display: flex;
   flex-direction: column;
-  height: 100%;
+
+  // Set full-height not here, but through parent group containers, like <UCardGroup>
+  // height: 100%;
 
   &::after {
     pointer-events: none;

package/components/card/u-card.vue

@@ -28,6 +28,4 @@ watch(
   </section>
 </template>
 
-<style lang="scss">
-@use './card.scss';
-</style>
+<style lang="scss" src="./card.scss"></style>

package/components/card-cta-header/u-card-cta-header.vue

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

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

@@ -19,7 +19,7 @@ interface Props {
   cta?: Radio | Link
 }
 
-const { cta } = defineProps<Props>()
+const { cta = undefined } = defineProps<Props>()
 
 const { toggleActiveCard } = inject('card')
 const { currentValue } = inject('card-group', {})

package/components/collapsible/u-collapsible.vue

@@ -10,7 +10,7 @@ interface Props {
 }
 
 const cId = useId()
-const { level = 3, expanded = false } = defineProps<Props>()
+const { header = '', panel = '', level = 3, expanded = false } = defineProps<Props>()
 
 // Initial state
 const panelHidden = ref(!expanded)

package/components/context-menu-link/u-context-menu-link.vue

@@ -10,7 +10,7 @@ interface Props {
   active?: boolean
 }
 
-const { href, active = false } = defineProps<Props>()
+const { label = '', href = '', target = '', active = false } = defineProps<Props>()
 
 const tag = computed(() => {
   return href ? 'a' : 'span'
@@ -18,7 +18,7 @@ const tag = computed(() => {
 </script>
 
 <template>
-  <component :is="tag" class="context-menu-link" :class="{ active }">
+  <component :is="tag" class="context-menu-link" :class="{ active }" :href :target>
     <UIcon :name="icon" />
     <slot>{{ label }}</slot>
   </component>

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

@@ -29,6 +29,6 @@
 .data-card__ctas {
   display: flex;
   column-gap: var(--e-space-4);
-  align-items: flex-start;
   margin-top: var(--e-space-4);
+  line-height: 0;
 }

package/components/download-list-item/download-list-item.scss

@@ -57,6 +57,24 @@
     }
   }
 
+  &.loading {
+    pointer-events: none;
+
+    .download-list-item__cell {
+      color: var(--e-c-mono-500);
+    }
+
+    .download-list-item__link {
+      ~ * .download {
+        animation-name: arrow-anim;
+        animation-delay: 100ms;
+        animation-duration: var(--e-trs-duration-slowest);
+        animation-timing-function: ease-out;
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+
   &.visited {
     .download-list-item__cell {
       background: var(--e-c-mono-50);
@@ -124,7 +142,9 @@
 
   padding: var(--e-space-5) var(--e-space-6);
   background-color: var(--e-c-secondary-01-50);
-  transition: background-color a.$trs-default;
+  transition:
+    background-color a.$trs-default,
+    color a.$trs-default;
 
   + .download-list-item__cell {
     padding-left: var(--e-space-2);
@@ -171,6 +191,7 @@
   border-radius: var(--e-brd-radius-2);
   border: 2px solid transparent;
   transition: border a.$trs-default;
+  cursor: pointer;
 
   &:hover {
     border: 2px solid var(--e-c-secondary-01-100);

package/components/download-list-item/u-download-list-item.vue

@@ -1,24 +1,59 @@
 <script setup lang="ts">
-import { ref, computed, inject } from 'vue'
+import { computed, inject, useTemplateRef, ref, watch } from 'vue'
 import { UIcon } from '../../elements'
+import { getCurrentInstance } from 'vue'
 
 interface Props {
   data: string[]
-  url: string
+  url?: string
   compact?: boolean
   headings?: string[]
+  visited?: boolean
+  loading?: boolean
 }
 
-const { data, compact = false, headings = inject('headings', []) } = defineProps<Props>()
+const {
+  visited,
+  url = '',
+  data,
+  compact = false,
+  headings = inject('headings', []),
+} = defineProps<Props>()
 
-const visited = ref(false)
+const linkRef = useTemplateRef('link')
+const instance = getCurrentInstance()
+const emit = defineEmits(['click'])
 const isCompact = inject('compact', compact)
+const isVisited = ref(false)
 const label = computed(() => data.join(', '))
+
+const onClick = (e: Event) => {
+  if (!url) {
+    e.preventDefault()
+    emit('click', instance)
+    return
+  }
+
+  isVisited.value = true
+}
+
+const click = () => {
+  linkRef.value.click()
+}
+
+watch(
+  () => visited,
+  () => {
+    isVisited.value = visited
+  },
+)
+
+defineExpose({ click })
 </script>
 
 <template>
   <tr
-    :class="['download-list-item', { visited, compact: isCompact }]"
+    :class="['download-list-item', { visited: isVisited, loading, compact: isCompact }]"
     :style="{ '--rows': Math.round(data.length / 2) }"
   >
     <td v-for="(cell, idx) in data" :key="idx" class="download-list-item__cell">
@@ -29,15 +64,18 @@ const label = computed(() => data.join(', '))
     </td>
 
     <td class="download-list-item__cell cta">
-      <a
+      <component
+        :is="url ? 'a' : 'button'"
+        ref="link"
         class="download-list-item__link"
         :href="url"
         target="_blank"
         download
         :aria-label="label"
-        @click="visited = true"
+        :disabled="loading"
+        @click="onClick"
       >
-      </a>
+      </component>
       <div class="download-list-item__icon-wrapper">
         <UIcon name="mini-check" class="download-list-item__check" />
 

package/components/hint/u-hint.vue

@@ -9,7 +9,7 @@ interface Props {
   text?: string
 }
 
-const { type = 'neutral' } = defineProps<Props>()
+const { label = '', link = undefined, text = '', type = 'neutral' } = defineProps<Props>()
 </script>
 
 <template>

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

@@ -17,6 +17,10 @@ interface Props {
 }
 
 const {
+  description = '',
+  icon = '',
+  iconBadge = undefined,
+  title = '',
   href = '',
   target = '_self',
   active = false,
@@ -59,7 +63,7 @@ const tag = computed(() => (href ? 'a' : 'div'))
 
 <style lang="scss" scoped src="./navigation-panel-tile.scss"></style>
 <style lang="scss">
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel-tile__description {
   @include a.bp(lg) {

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

@@ -15,6 +15,7 @@ interface Props {
 }
 
 const {
+  label = '',
   active = false,
   collapsed = false,
   labelHidden = false,

package/components/panel/u-panel.vue

@@ -10,7 +10,7 @@ interface Props {
   image?: Image
 }
 
-const { image = null } = defineProps<Props>()
+const { title = '', text = '', image = null } = defineProps<Props>()
 
 const slots = useSlots()
 

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

@@ -18,7 +18,9 @@ const observer = new IntersectionObserver(
     if (entries[0].isIntersecting) {
       observer.disconnect()
 
-      _progress.value = progress
+      setTimeout(() => {
+        _progress.value = progress
+      }, 200)
     }
   },
   {
@@ -28,9 +30,7 @@ const observer = new IntersectionObserver(
 )
 
 onMounted(() => {
-  setTimeout(() => {
-    observer.observe(el.value)
-  }, 200)
+  observer.observe(el.value)
 })
 </script>
 

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()}`

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 {
-  padding-top: var(--e-space-10);
-  padding-bottom: var(--e-space-10);
-
-  @include c.portal-content-container;
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,21 +24,21 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.1",
-    "@types/node": "^22.14.0",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.16.5",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "chokidar": "^4.0.3",
-    "postcss": "^8.5.3",
-    "sass": "^1.86.3",
+    "postcss": "^8.5.6",
+    "sass": "^1.89.2",
     "typescript": "^5.8.3"
   },
   "dependencies": {
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "sass": "^1.86.3"
+    "sass": "^1.86.3",
+    "vue": "^3.5.0"
   },
   "scripts": {
     "watch": "node ./watch.js",

package/wizard/wizard-outro/u-wizard-outro.vue

@@ -10,7 +10,7 @@ interface Props {
   cta?: Cta
 }
 
-const { text, cta } = defineProps<Props>()
+const { text = '', image = undefined, cta = undefined, title = '' } = defineProps<Props>()
 
 const slots = useSlots()
 const hasCta = computed(() => !!slots.cta || cta)