Upgraded dependencies, bumped to Node 24.

components/edit/socials.vue

@@ -1,3 +1,75 @@
+<script setup>
+import formatTemplate from 'template-format';
+
+import {
+	inject,
+	ref,
+	useId,
+	watch,
+} from 'vue';
+
+const props = defineProps({
+	edits: {
+		type: Object,
+		default: null,
+	},
+	editing: {
+		type: Set,
+		default: null,
+	},
+});
+const emit = defineEmits(['socials']);
+const pageContext = inject('pageContext');
+const { env } = pageContext;
+
+const socials = ref(props.edits.socials);
+
+const platform = ref('');
+const handle = ref('');
+const url = ref('');
+const addSocialDropdownId = useId();
+
+watch(socials, () => emit('socials', socials.value));
+
+const iconMap = {
+	twitter: 'twitter-x',
+};
+
+function addSocial() {
+	if (!handle.value && !url.value) {
+		return;
+	}
+
+	if (handle.value && !platform.value) {
+		return;
+	}
+
+	socials.value = socials.value.concat({
+		platform: platform.value || null,
+		handle: handle.value || null,
+		url: url.value || null,
+	});
+
+	emit('socials', socials.value);
+
+	platform.value = '';
+	handle.value = '';
+	url.value = '';
+}
+
+function getUrl(social) {
+	if (social.url) {
+		return url;
+	}
+
+	if (env.socials.urls[social.platform]) {
+		return formatTemplate(env.socials.urls[social.platform], { handle: social.handle });
+	}
+
+	return null;
+}
+</script>
+
 <template>
 	<ul
 		class="list nolist"
@@ -54,7 +126,7 @@
 		</li>
 
 		<li class="list-new">
-			<VDropdown>
+			<VDropdown :aria-id="addSocialDropdownId">
 				<Icon
 					icon="plus2"
 					class="add noselect"
@@ -110,77 +182,6 @@
 	</ul>
 </template>
 
-<script setup>
-import {
-	ref,
-	watch,
-	inject,
-} from 'vue';
-
-import formatTemplate from 'template-format';
-
-const pageContext = inject('pageContext');
-const { env } = pageContext;
-
-const props = defineProps({
-	edits: {
-		type: Object,
-		default: null,
-	},
-	editing: {
-		type: Set,
-		default: null,
-	},
-});
-
-const emit = defineEmits(['socials']);
-const socials = ref(props.edits.socials);
-
-const platform = ref('');
-const handle = ref('');
-const url = ref('');
-
-watch(socials, () => emit('socials', socials));
-
-const iconMap = {
-	twitter: 'twitter-x',
-};
-
-function addSocial() {
-	if (!handle.value && !url.value) {
-		return;
-	}
-
-	if (handle.value && !platform.value) {
-		return;
-	}
-
-	socials.value = socials.value.concat({
-		platform: platform.value || null,
-		handle: handle.value || null,
-		url: url.value || null,
-	});
-
-	emit('socials', socials.value);
-
-	platform.value = '';
-	handle.value = '';
-	url.value = '';
-}
-
-function getUrl(social) {
-	if (social.url) {
-		return url;
-	}
-
-	if (env.socials.urls[social.platform]) {
-		return formatTemplate(env.socials.urls[social.platform], { handle: social.handle });
-	}
-
-	return null;
-}
-</script>
-
 <style scoped>
 .list {
 	display: flex;