@xen-orchestra/web-core 0.19.0 → 0.20.1

package/lib/assets/zoom.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Zoom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.13 396.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #eaea92;
+      }
+
+      .cls-2, .cls-3, .cls-4 {
+        fill: #8f84ff;
+      }
+
+      .cls-2, .cls-5 {
+        opacity: .3;
+      }
+
+      .cls-6, .cls-5 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        opacity: .14;
+      }
+
+      .cls-7 {
+        fill: #181849;
+      }
+
+      .cls-8 {
+        fill: #1a1b38;
+      }
+    </style>
+  </defs>
+  <path class="cls-4" d="M129.55,173.68c-6.44,2.53-12.65,5.45-18.79,8.51-6.13,3.06-12.16,6.31-18.12,9.68-5.96,3.37-11.83,6.88-17.56,10.64-2.87,1.87-5.7,3.82-8.49,5.83-2.79,2.02-5.54,4.09-8.18,6.36-1.46,1.25-1.62,3.44-.37,4.9.95,1.11,2.47,1.47,3.78,1.02,3.29-1.14,6.47-2.48,9.62-3.87,3.14-1.4,6.25-2.86,9.31-4.4,6.13-3.06,12.13-6.36,18.04-9.82,5.91-3.45,11.75-7.02,17.48-10.78,5.73-3.76,11.39-7.66,16.81-11.95,1.55-1.22,1.81-3.47.59-5.02-1-1.26-2.68-1.67-4.11-1.11Z"/>
+  <path class="cls-3" d="M194.07,50.23c74.01-2.19,138.12,51.52,147.8,121.98,10.59,77.04-47.69,146.36-119.41,157.46-89.2,13.81-175.73-66.08-167.96-152.75,5.85-65.3,64.33-124.47,139.57-126.69Z"/>
+  <path class="cls-8" d="M90.67,198.68c.14.05.25.11.35.19.1.02.2.04.3.06.46.09.46.85,0,.93-.1.02-.2.04-.3.06-.1.08-.21.14-.35.19-.46.16-.93-.25-.93-.71,0-.46.47-.87.93-.71Z"/>
+  <path class="cls-4" d="M162.94,225.43h0c-1.62-2.75-4.97-4.27-8.07-3.67l-48.48,9.41c-3.68.71-5.75,4.14-4.62,7.64l32.93,102.68c1.12,3.51,5.02,5.77,8.7,5.06l153.84-29.87c3.68-.71,5.75-4.14,4.62-7.64l-27.66-86.24c-1.12-3.51-5.02-5.77-8.7-5.06l-83.71,16.25c-7.25,1.41-15.06-2.14-18.85-8.56Z"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 108.5 236.07 269.23 204.87 299.39 311.24"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 111.03 235.58 269.23 204.87 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 111.46 231.94 272.2 200.73 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 114.8 231.29 272.2 200.73 299.39 311.24"/>
+  <polygon class="cls-1" points="299.39 280.37 138.65 311.57 115.44 197.14 276.18 165.94 299.39 280.37"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 120.12 229.37 279.82 198.36 299.39 311.24"/>
+  <polygon class="cls-6" points="300.96 307.85 138.65 342.45 121.79 229.06 282.81 198.64 300.96 307.85"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 124.91 231.07 285.65 199.87 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 126.31 231.78 287.04 200.57 299.39 311.24"/>
+  <path class="cls-4" d="M199.21,225.47h0c-.69-3-3.38-4.71-6.48-4.1l-48.48,9.41c-3.68.71-6.66,4.39-6.67,8.21l-.11,101.8c0,3.82,2.97,6.33,6.65,5.62l153.84-29.87c3.68-.71,6.66-4.39,6.67-8.21l.09-83.92c0-3.82-2.97-6.33-6.65-5.62l-83.71,16.25c-7.25,1.41-13.53-2.57-15.15-9.58Z"/>
+  <path class="cls-2" d="M153.88,195.95c26.94,15.96,61.72,7.06,77.68-19.88,15.96-26.94,7.06-61.72-19.88-77.68-26.94-15.96-61.72-7.07-77.68,19.87-15.96,26.94-7.06,61.72,19.88,77.68Z"/>
+  <path class="cls-5" d="M181.76,90.48l27.36,106.91c.76-.4,1.52-.82,2.26-1.25,4.76-2.77,9.13-6.25,12.98-10.41h0s-23.63-92.34-23.63-92.34c-6.21-2.08-12.62-3.03-18.97-2.91Z"/>
+  <path class="cls-5" d="M147.71,102.6l25.72,100.51c8.64,1.45,17.42.84,25.66-1.64l-28.09-109.76c-8.42,1.78-16.41,5.47-23.3,10.89Z"/>
+  <path class="cls-4" d="M212.83,199.46c-28.88,16.6-65.74,6.64-82.34-22.24-16.6-28.88-6.64-65.74,22.24-82.34,28.88-16.6,65.74-6.64,82.34,22.24,16.6,28.88,6.64,65.75-22.23,82.34ZM210.38,195.19c26.52-15.24,35.66-49.09,20.42-75.62-15.24-26.51-49.09-35.66-75.61-20.42-26.52,15.24-35.66,49.09-20.42,75.61,15.24,26.52,49.09,35.67,75.61,20.43Z"/>
+  <path class="cls-4" d="M133.07,179.81c-5.43,4.3-11.08,8.19-16.81,11.95-5.74,3.76-11.58,7.33-17.49,10.78-.95.56-1.91,1.11-2.87,1.66-4.98,2.86-10.02,5.59-15.17,8.16-3.06,1.54-6.17,3-9.31,4.4-3.15,1.39-6.33,2.73-9.62,3.87-1.3.45-2.82.09-3.77-1.02-1.25-1.46-1.08-3.65.37-4.9,2.65-2.27,5.4-4.34,8.19-6.36,2.79-2.01,5.61-3.96,8.48-5.83,5.74-3.76,11.61-7.28,17.57-10.65,1.23-.69,2.46-1.38,3.7-2.07,4.75-2.63,9.55-5.18,14.42-7.61,6.13-3.06,12.34-5.98,18.78-8.51,1.43-.56,3.12-.15,4.11,1.11,1.23,1.55.97,3.8-.58,5.02Z"/>
+  <path class="cls-6" d="M278.46,132.05l-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3,51.04-28.52-1.68-3-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3,6.01-3.36-1.68-3,6.01-3.36-1.68-3,3-1.68-3.35-6-3,1.68-1.68-3-6.01,3.36,1.68,3-6.01,3.36,1.68,3-3,1.68-6.71-12.01-3,1.68-3,1.68,1.68,3Z"/>
+  <rect class="cls-8" x="259.33" y="166.05" width="58.47" height="3.44" transform="translate(-45.17 162.06) rotate(-29.19)"/>
+  <rect class="cls-8" x="264.16" y="174.79" width="3.44" height="3.44" transform="translate(-52.32 152.1) rotate(-29.19)"/>
+  <rect class="cls-8" x="265.48" y="170.11" width="3.44" height="3.44" transform="translate(-49.87 152.15) rotate(-29.19)"/>
+  <rect class="cls-8" x="266.81" y="165.43" width="3.44" height="3.44" transform="translate(-47.42 152.2) rotate(-29.19)"/>
+  <rect class="cls-8" x="268.13" y="160.75" width="3.44" height="3.44" transform="translate(-44.97 152.26) rotate(-29.19)"/>
+  <rect class="cls-8" x="269.46" y="156.07" width="3.44" height="3.44" transform="translate(-42.52 152.31) rotate(-29.19)"/>
+  <rect class="cls-8" x="270.78" y="151.39" width="3.44" height="3.44" transform="translate(-40.07 152.36) rotate(-29.19)"/>
+  <rect class="cls-8" x="272.11" y="146.71" width="3.44" height="3.44" transform="translate(-37.62 152.41) rotate(-29.19)"/>
+  <rect class="cls-8" x="273.43" y="142.03" width="3.44" height="3.44" transform="translate(-35.16 152.46) rotate(-29.19)"/>
+  <rect class="cls-8" x="274.76" y="137.35" width="3.44" height="3.44" transform="translate(-32.71 152.52) rotate(-29.19)"/>
+  <rect class="cls-8" x="276.08" y="132.67" width="3.44" height="3.44" transform="translate(-30.26 152.57) rotate(-29.19)"/>
+  <rect class="cls-8" x="277.41" y="127.99" width="3.44" height="3.44" transform="translate(-27.81 152.62) rotate(-29.19)"/>
+  <rect class="cls-8" x="283.77" y="125.44" width="3.44" height="17.19" transform="translate(-29.11 156.27) rotate(-29.19)"/>
+  <rect class="cls-8" x="290.12" y="136.64" width="3.44" height="3.44" transform="translate(-30.42 159.92) rotate(-29.19)"/>
+  <rect class="cls-8" x="295.15" y="145.65" width="3.44" height="3.44" transform="translate(-34.17 163.52) rotate(-29.19)"/>
+  <rect class="cls-8" x="296.26" y="140.13" width="6.88" height="3.44" transform="translate(-31.12 164.2) rotate(-29.19)"/>
+  <rect class="cls-8" x="300.59" y="133.77" width="6.88" height="3.44" transform="translate(-27.47 165.5) rotate(-29.19)"/>
+  <rect class="cls-8" x="304.3" y="125.04" width="3.44" height="6.88" transform="translate(-23.79 165.58) rotate(-29.19)"/>
+  <rect class="cls-8" x="291.23" y="131.13" width="6.88" height="3.44" transform="translate(-27.37 160.6) rotate(-29.19)"/>
+  <rect class="cls-8" x="295.56" y="124.77" width="6.88" height="3.44" transform="translate(-23.72 161.9) rotate(-29.19)"/>
+  <rect class="cls-8" x="299.83" y="146.97" width="3.44" height="3.44" transform="translate(-34.22 165.97) rotate(-29.19)"/>
+  <rect class="cls-8" x="304.51" y="148.3" width="3.44" height="3.44" transform="translate(-34.27 168.42) rotate(-29.19)"/>
+  <rect class="cls-8" x="309.19" y="149.62" width="3.44" height="3.44" transform="translate(-34.33 170.87) rotate(-29.19)"/>
+  <polygon class="cls-7" points="173.4 252.35 171.52 258.69 165.18 260.57 171.52 262.45 173.4 268.79 175.28 262.45 181.62 260.57 175.28 258.69 173.4 252.35"/>
+  <polygon class="cls-7" points="283.94 292.49 282.82 296.27 279.05 297.39 282.82 298.51 283.94 302.28 285.06 298.51 288.84 297.39 285.06 296.27 283.94 292.49"/>
+  <polygon class="cls-7" points="244.55 182.48 242.67 188.82 236.33 190.7 242.67 192.58 244.55 198.92 246.43 192.58 252.77 190.7 246.43 188.82 244.55 182.48"/>
+  <path class="cls-6" d="M222.84,291.45c.62.17,1.24.34,1.85.5-6.22,2.4-12.01,4.07-16.61,4.88-5.54.98-9.34.71-10.07-1.05-.72-1.73,1.57-4.54,6.04-7.74.07.37.13.76.23,1.13-3.52,2.54-5.25,4.66-4.7,5.96.55,1.32,3.47,1.51,7.85.77,4.11-.7,9.5-2.23,15.42-4.45Z"/>
+  <path class="cls-6" d="M247.13,280.34c-4.49,3.29-11.25,6.99-19.08,10.26-.52.22-1.04.43-1.56.64-.61-.15-1.23-.32-1.85-.48.98-.38,1.98-.79,2.98-1.2,8.13-3.39,15.07-7.18,19.31-10.34,3.21-2.39,4.88-4.43,4.36-5.67-.51-1.22-3.06-1.48-6.92-.91-.19-.32-.39-.64-.6-.95,5-.77,8.4-.43,9.08,1.21.7,1.67-1.53,4.38-5.72,7.45Z"/>
+  <path class="cls-6" d="M253.1,292.89c-.49,1.74-3.92,2.49-9.11,2.3-5.1-.19-11.91-1.29-19.31-3.23-.61-.16-1.23-.33-1.85-.5-.06-.02-.12-.03-.18-.05-7.81-2.19-14.68-4.89-19.52-7.5-4.95-2.67-7.77-5.24-7.25-7.07.51-1.8,4.05-2.59,9.54-2.32-.17.33-.37.68-.52,1.03-4.33-.19-7,.4-7.39,1.76-.39,1.38,1.79,3.34,5.68,5.47,4.62,2.53,11.67,5.28,19.76,7.55.56.16,1.11.31,1.66.46.62.17,1.24.33,1.85.48,7.1,1.79,13.5,2.8,18.05,2.93,4,.12,6.57-.45,6.94-1.74.36-1.28-1.48-3.06-4.86-5.01.05-.37.09-.74.12-1.11,4.4,2.49,6.85,4.87,6.37,6.58Z"/>
+  <path class="cls-6" d="M232.63,304.23c-11.71,3.96-24.46-2.36-28.41-14.07-3.95-11.71,2.36-24.46,14.07-28.41,11.71-3.96,24.46,2.36,28.41,14.07,3.95,11.71-2.36,24.46-14.07,28.41ZM218.74,263.1c-10.97,3.7-16.88,15.64-13.17,26.61,3.7,10.97,15.64,16.88,26.6,13.17,10.97-3.7,16.88-15.64,13.17-26.61-3.7-10.97-15.64-16.88-26.6-13.17Z"/>
+  <path class="cls-6" d="M248.48,286.34c.29-1.97.33-3.99.1-6.02,4.16-3.22,5.87-5.83,5.06-7.76-.77-1.86-3.62-2.5-8.47-1.94-5.59-8.92-16.77-13.2-27.17-9.69-6.43,2.17-11.29,6.9-13.84,12.67-5.46-.11-8.52.9-9.11,2.99-.62,2.19,1.8,4.81,7.16,7.78.07,1.19.23,2.39.49,3.58-4.5,3.38-6.36,6.12-5.5,8.16.87,2.08,4.33,2.65,10.29,1.68,5.97,7.23,16.01,10.42,25.41,7.25,5-1.69,9.05-4.92,11.8-8.98,2.85.06,5.06-.17,6.61-.69,1.46-.49,2.34-1.25,2.62-2.25.54-1.94-1.29-4.21-5.45-6.78ZM206.39,289.43c-.37-1.11-.62-2.22-.8-3.34,4.12,1.95,9.09,3.83,14.46,5.45-3.99,1.4-7.77,2.49-10.97,3.16-1.13-1.57-2.05-3.34-2.7-5.26ZM242.76,293.22c-3.78-.26-8.45-1.02-13.52-2.19,6.28-2.67,11.96-5.65,16.33-8.56.1,3.82-.92,7.54-2.82,10.75ZM250.48,273.88c.15.35-.26,1.46-2.47,3.36-.15-.57-.31-1.14-.5-1.7-.27-.79-.57-1.55-.91-2.29,2.73-.18,3.74.29,3.88.62ZM219.02,263.92c10.51-3.55,21.96,2.11,25.51,12.63.31.93.53,1.87.7,2.81-4.39,3.05-10.83,6.43-17.96,9.4-.88.37-1.79.73-2.7,1.09-.46-.12-.91-.25-1.37-.38-6.82-1.91-13.19-4.27-17.85-6.58.05-8.36,5.32-16.16,13.67-18.98ZM198.35,277.52c.13-.45,1.31-1.13,4.8-1.16-.47,1.57-.78,3.19-.91,4.85-3.29-1.99-4.01-3.26-3.89-3.69ZM200.37,294.8c-.18-.44.34-1.73,3.16-3.98.57,1.59,1.29,3.08,2.15,4.46-3.79.48-5.15-.07-5.32-.48ZM231.89,302.06c-7.53,2.54-15.53.34-20.77-4.97,2.79-.63,5.82-1.5,9.01-2.57,1.5-.51,3.04-1.06,4.6-1.66,5.84,1.52,11.44,2.55,16.17,2.98-2.3,2.78-5.36,4.99-9.02,6.22ZM250.63,292.2c-.11.38-1.18,1.02-4.32,1.11.65-1.31,1.17-2.67,1.56-4.08,2.34,1.59,2.86,2.61,2.76,2.97Z"/>
+</svg>

package/lib/components/backdrop/VtsBackdrop.vue

@@ -6,6 +6,6 @@
 .vts-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 1010;
 }
 </style>

package/lib/components/column/VtsColumn.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vts-column">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-column {
+  flex: 1;
+  flex-basis: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/columns/VtsColumns.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="vts-columns" :class="{ mobile: uiStore.isMobile }">
+    <component :is="nodes[index - 1] ?? VtsColumn" v-for="index of columns" :key="index" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsColumn from '@core/components/column/VtsColumn.vue'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { computed } from 'vue'
+
+const { columns: _columns = 2 } = defineProps<{
+  columns?: number
+}>()
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const nodes = computed(() => slots.default())
+
+const columns = computed(() => Math.max(_columns, nodes.value.length))
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-columns {
+  display: flex;
+  gap: 0.8rem;
+  padding: 0.8rem;
+  flex-direction: row;
+
+  &.mobile {
+    flex-direction: column;
+  }
+}
+</style>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiButtonIcon v-tooltip="copied && $t('core.copied')" :icon size="medium" accent="brand" @click="copyToClipboard()" />
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCheckCircle, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard, useTimeoutFn } from '@vueuse/core'
+import { ref } from 'vue'
+
+const { value } = defineProps<{
+  value: string
+}>()
+
+const { copy, copied } = useClipboard()
+
+const icon = ref(faCopy)
+
+const { start: changeIcon } = useTimeoutFn(() => {
+  icon.value = faCopy
+}, 1_500) // 1.5s is time to toltips is visible
+
+function copyToClipboard() {
+  copy(value)
+  icon.value = faCheckCircle
+  changeIcon()
+}
+</script>

package/lib/components/enabled-state/VtsEnabledState.vue

@@ -0,0 +1,23 @@
+<template>
+  <UiInfo :accent="state.accent">
+    {{ state.label }}
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type StatesMap = { label: string; accent: InfoAccent }
+
+const { enabled } = defineProps<{
+  enabled: boolean
+}>()
+
+const { t } = useI18n()
+
+const state = computed<StatesMap>(() =>
+  enabled ? { label: t('enabled'), accent: 'success' } : { label: t('disabled'), accent: 'muted' }
+)
+</script>

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -58,7 +58,7 @@ const ui = useUiStore()
   background-color: var(--color-neutral-background-secondary);
   border-right: 0.1rem solid var(--color-neutral-border);
   width: v-bind('sidebar.cssWidth');
-  z-index: 1001;
+  z-index: 1010;
   transition:
     margin-left 0.25s,
     transform 0.25s;

package/lib/components/quick-info-column/VtsQuickInfoColumn.vue

@@ -8,6 +8,6 @@
 .vts-quick-info-column {
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 1.6rem;
 }
 </style>

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="vts-quick-info-row">
-    <span class="typo-body-bold">
+  <div class="vts-quick-info-row" :class="{ mobile: uiStore.isMobile }">
+    <span v-tooltip class="typo-body-regular label text-ellipsis">
       <slot name="label">
         {{ label }}
       </slot>
     </span>
-    <span v-tooltip class="typo-body-regular value text-ellipsis">
+    <span class="typo-body-regular value">
       <slot name="value">
         {{ value }}
       </slot>
@@ -15,6 +15,7 @@
 
 <script lang="ts" setup>
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { useUiStore } from '@core/stores/ui.store.ts'
 
 defineProps<{
   label?: string
@@ -25,16 +26,34 @@ defineSlots<{
   label?(): any
   value?(): any
 }>()
+
+const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
 .vts-quick-info-row {
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  gap: 2.4rem;
+
+  &.mobile {
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .label {
+    flex-shrink: 0;
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .value {
+    color: var(--color-neutral-txt-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
 
-  .value:empty::before {
-    content: '-';
+    &:empty::before {
+      content: '-';
+    }
   }
 }
 </style>

package/lib/components/relative-time/VtsRelativeTime.vue

@@ -0,0 +1,18 @@
+<template>
+  <span :title="date.toLocaleString()">{{ relativeTime }}</span>
+</template>
+
+<script lang="ts" setup>
+import useRelativeTime from '@core/composables/relative-time.composable'
+import { parseDateTime } from '@core/utils/time.util'
+import { useNow } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  date: Date | number | string
+}>()
+
+const date = computed(() => new Date(parseDateTime(props.date)))
+const now = useNow({ interval: 1000 })
+const relativeTime = useRelativeTime(date, now)
+</script>

package/lib/components/select/VtsOption.vue

@@ -0,0 +1,24 @@
+<template>
+  <UiDropdown
+    ref="elementRef"
+    :checkbox="option.properties.multiple"
+    :disabled="option.properties.disabled"
+    :hover="option.flags.active"
+    :selected="option.flags.selected"
+    accent="normal"
+  >
+    <slot>{{ option.properties.label }}</slot>
+  </UiDropdown>
+</template>
+
+<script generic="TOption extends FormOption" lang="ts" setup>
+import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
+import type { FormOption } from '@core/packages/form-select/types.ts'
+import { useFormOptionController } from '@core/packages/form-select/use-form-option-controller.ts'
+
+const { option } = defineProps<{
+  option: TOption
+}>()
+
+const { elementRef } = useFormOptionController(() => option)
+</script>

package/lib/components/select/VtsSelect.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="className" class="vts-select">
+    <VtsBackdrop v-if="isOpen" />
+
+    <UiInput
+      ref="triggerRef"
+      :accent
+      :model-value="selectedLabel"
+      :placeholder
+      :required
+      :right-icon="faAngleDown"
+      readonly
+    />
+
+    <UiDropdownList v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="dropdown-list">
+      <template v-if="searchTerm !== undefined" #before>
+        <div class="search-container">
+          <UiInput
+            ref="searchRef"
+            v-model="searchTerm"
+            :placeholder="searchPlaceholder"
+            :right-icon="faMagnifyingGlass"
+            accent="brand"
+          />
+        </div>
+      </template>
+      <UiDropdown v-if="loading || options.length === 0" accent="normal" disabled>
+        {{ loading ? t('loading-in-progress') : t('no-results') }}
+      </UiDropdown>
+      <template v-for="option of options" :key="option.id">
+        <slot :option>
+          <VtsOption :option />
+        </slot>
+      </template>
+    </UiDropdownList>
+  </div>
+</template>
+
+<script generic="TOption extends FormOption" lang="ts" setup>
+import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import VtsOption from '@core/components/select/VtsOption.vue'
+import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
+import UiDropdownList from '@core/components/ui/dropdown/UiDropdownList.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+import type { FormOption } from '@core/packages/form-select/types.ts'
+import { useFormSelectController } from '@core/packages/form-select/use-form-select-controller.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { faAngleDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { accent, options, selectedLabel } = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  options: TOption[]
+  selectedLabel: string
+  required?: boolean
+  placeholder?: string
+  searchPlaceholder?: string
+  loading?: boolean
+}>()
+
+const searchTerm = defineModel<string>('search')
+
+defineSlots<{
+  default(props: { option: TOption }): any
+}>()
+
+const { t } = useI18n()
+
+const { triggerRef, dropdownRef, searchRef, isOpen, floatingStyles } = useFormSelectController({
+  options: () => options,
+  searchTerm,
+})
+
+const className = computed(() => toVariants({ accent }))
+</script>
+
+<style lang="postcss" scoped>
+.vts-select {
+  .ui-input:deep(input) {
+    cursor: default;
+  }
+
+  .dropdown-list {
+    min-width: 40rem;
+    max-height: 36.2rem; /* 8 Dropdown items */
+    overflow: auto;
+    z-index: 1020;
+
+    .search-container {
+      background-color: var(--color-neutral-background-primary);
+      padding: 0.4rem;
+    }
+  }
+}
+</style>

package/lib/components/state-hero/VtsAllDoneHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-all-done-hero" image="all-done">
+    {{ $t('all-done') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsAllGoodHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-all-good-hero" image="all-good">
+    {{ $t('all-good') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsLoadingHero.vue

@@ -1,13 +1,54 @@
 <template>
-  <VtsStateHero :type busy>
-    {{ $t('loading-in-progress') }}
-  </VtsStateHero>
+  <div class="vts-loading-hero">
+    <VtsStateHero :type busy>
+      {{ $t('loading-in-progress') }}
+    </VtsStateHero>
+    <div v-if="slots.title || slots.text" class="content">
+      <div v-if="slots.title" class="title" :class="className">
+        <slot name="title" />
+      </div>
+      <div v-if="slots.text" class="text typo-body-bold">
+        <slot name="text" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { computed } from 'vue'
 
-defineProps<{
+const { type } = defineProps<{
   type: StateHeroType
 }>()
+
+const slots = defineSlots<{
+  title?(): any
+  text?(): any
+}>()
+
+const className = computed(() => (type === 'page' ? 'typo-h1' : 'typo-h2'))
 </script>
+
+<style lang="postcss" scoped>
+.vts-loading-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    text-align: center;
+
+    .title {
+      color: var(--color-neutral-txt-primary);
+    }
+
+    .text {
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>

package/lib/components/state-hero/VtsOfflineHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-offline-hero" image="offline">
+    {{ $t('offline') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsStateHero.vue

@@ -17,7 +17,16 @@ export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
 const props = defineProps<{
   type: StateHeroType
   busy?: boolean
-  image?: 'no-result' | 'under-construction' | 'no-data' | 'no-selection' | 'error' | 'not-found' // TODO: 'offline' | 'all-good' | 'all-done''
+  image?:
+    | 'no-result'
+    | 'under-construction'
+    | 'no-data'
+    | 'no-selection'
+    | 'error'
+    | 'not-found'
+    | 'offline'
+    | 'all-good'
+    | 'all-done'
 }>()
 
 const slots = defineSlots<{

package/lib/components/tree/VtsTreeItem.vue

@@ -1,11 +1,13 @@
 <template>
-  <li class="vts-tree-item">
+  <li class="vts-tree-item" @click="handleClick()">
     <slot />
     <slot v-if="expanded" name="sublist" />
   </li>
 </template>
 
 <script lang="ts" setup>
+import { useSidebarStore } from '@core/stores/sidebar.store'
+import { useUiStore } from '@core/stores/ui.store'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
 import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
 
@@ -18,6 +20,8 @@ defineSlots<{
   sublist?(): any
 }>()
 
+const sidebar = useSidebarStore()
+const uiStore = useUiStore()
 const hasChildren = ref(false)
 
 const updateHasChildren = () => {
@@ -25,6 +29,12 @@ const updateHasChildren = () => {
   hasChildren.value = sublist !== undefined
 }
 
+const handleClick = () => {
+  if (uiStore.isMobile) {
+    sidebar.toggleExpand(false)
+  }
+}
+
 onBeforeMount(() => updateHasChildren())
 onBeforeUpdate(() => updateHasChildren())