Upgraded dependencies, bumped to Node 24.

components/scenes/chapters.vue

@@ -1,3 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+
+import getPath from '#/src/get-path.js';
+import { formatDate, formatDuration } from '#/utils/format.js';
+
+const props = defineProps({
+	chapters: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const lastChapter = props.chapters.at(-1);
+const duration = lastChapter.time + lastChapter.duration;
+
+const timeline = computed(() => {
+	if (props.chapters.every((chapter) => chapter.time)) {
+		return props.chapters.filter((chapter) => chapter.tags?.length > 0);
+	}
+
+	return null;
+});
+</script>
+
 <template>
 	<div
 		v-if="timeline"
@@ -43,19 +68,19 @@
 			<span class="chapter-details">
 				<span
 					v-if="typeof chapter.time === 'number'"
-					v-tooltip="'Time in video'"
+					v-tooltip="{ content: 'Time in video', ariaId: `chapter-time-${chapter.id}` }"
 					class="chapter-time"
 				><Icon icon="film3" /> {{ formatDuration(chapter.time) }}</span>
 
 				<span
 					v-if="chapter.duration"
-					v-tooltip="'Duration'"
+					v-tooltip="{ content: 'Duration', ariaId: `chapter-duration-${chapter.id}` }"
 					class="chapter-duration"
 				><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
 
 				<time
 					v-if="chapter.date"
-					v-tooltip="formatDate(chapter.date, 'yyyy-MM-dd hh:mm')"
+					v-tooltip="{ content: formatDate(chapter.date, 'yyyy-MM-dd hh:mm'), ariaId: `chapter-date-${chapter.id}` }"
 					:datetime="chapter.date"
 					class="chapter-date"
 				>{{ formatDate(chapter.date, 'MMM d') }}</time>
@@ -90,31 +115,6 @@
 	</ul>
 </template>
 
-<script setup>
-import { computed } from 'vue';
-
-import getPath from '#/src/get-path.js';
-import { formatDuration, formatDate } from '#/utils/format.js';
-
-const props = defineProps({
-	chapters: {
-		type: Array,
-		default: () => [],
-	},
-});
-
-const lastChapter = props.chapters.at(-1);
-const duration = lastChapter.time + lastChapter.duration;
-
-const timeline = computed(() => {
-	if (props.chapters.every((chapter) => chapter.time)) {
-		return props.chapters.filter((chapter) => chapter.tags?.length > 0);
-	}
-
-	return null;
-});
-</script>
-
 <style scoped>
 .chapters {
 	display: grid;