Upgraded dependencies, bumped to Node 24.

components/movies/search.vue

@@ -1,5 +1,38 @@
+<script setup>
+import { format } from 'date-fns';
+import { ref, useId } from 'vue';
+
+import { get } from '#/src/api.js';
+import getPath from '#/src/get-path.js';
+
+defineProps({
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+const emit = defineEmits(['movie']);
+const dropdownId = useId();
+const movies = ref([]);
+const query = ref(null);
+const queryInput = ref(null);
+
+async function search() {
+	const data = await get('/movies', { q: query.value });
+
+	movies.value = data.movies;
+}
+
+function focus() {
+	setTimeout(() => {
+		queryInput.value?.focus();
+	}, 100);
+}
+</script>
+
 <template>
 	<VDropdown
+		:aria-id="dropdownId"
 		:disabled="disabled"
 		class="trigger"
 		@show="focus"
@@ -36,39 +69,6 @@
 	</VDropdown>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { format } from 'date-fns';
-
-import { get } from '#/src/api.js';
-import getPath from '#/src/get-path.js';
-
-const movies = ref([]);
-const query = ref(null);
-const queryInput = ref(null);
-
-defineProps({
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-});
-
-const emit = defineEmits(['movie']);
-
-async function search() {
-	const data = await get('/movies', { q: query.value });
-
-	movies.value = data.movies;
-}
-
-function focus() {
-	setTimeout(() => {
-		queryInput.value?.focus();
-	}, 100);
-}
-</script>
-
 <style scoped>
 .trigger {
 	height: 100%;