Fragment → Contents

app.vue

@@ -108,8 +108,8 @@
 	<NuxtLayout :name="layout">
 		<NuxtPage />
 	</NuxtLayout>
-	<Fragment id="teleports">
+	<Contents id="teleports">
 		<Toasts />
 		<Tooltips />
-	</Fragment>
+	</Contents>
 </template>

components/Fragment.vue → components/Contents.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="fragment">
+	<div class="contents">
 		<slot></slot>
 	</div>
 </template>
 
 <style scoped lang="scss">
-	.fragment {
+	.contents {
 		display: contents;
 	}
 </style>

components/Mask.vue

@@ -32,7 +32,7 @@
 
 <template>
 	<ClientOnlyTeleport to="#popovers">
-		<Fragment :style="{ '--z-index': zIndex }">
+		<Contents :style="{ '--z-index': zIndex }">
 			<Transition>
 				<div
 					v-if="shown"
@@ -43,7 +43,7 @@
 				></div>
 			</Transition>
 			<slot><div></div></slot>
-		</Fragment>
+		</Contents>
 	</ClientOnlyTeleport>
 </template>
 

components/Menu/Menu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { ClientOnlyTeleport, Fragment } from "#components";
+	import { ClientOnlyTeleport, Contents } from "#components";
 	import type { FlyoutModelNS } from "types/arguments";
 	import { getLocation } from "components/Flyout/Flyout.vue";
 	import { getPosition } from "plugins/vue/tooltip";
@@ -111,7 +111,7 @@
 </script>
 
 <template>
-	<component :is="isContextMenu ? ClientOnlyTeleport : Fragment" to="#popovers">
+	<component :is="isContextMenu ? ClientOnlyTeleport : Contents" to="#popovers">
 		<Transition :css="false" @enter="onMenuEnter" @leave="onMenuLeave">
 			<menu
 				v-if="shown"

components/Slider.vue

@@ -113,12 +113,12 @@
 		:aria-valuemax="max"
 		aria-orientation="horizontal"
 	>
-		<Fragment>
+		<Contents>
 			<div ref="trackEl" class="track" @pointerdown="onTrackDown" @contextmenu="onLongPress"></div>
 			<div v-show="Number.isFinite(buffered)" class="buffered"></div>
 			<div class="passed"></div>
 			<div ref="thumbEl" class="thumb" @pointerdown="onThumbDown" @contextmenu="onLongPress"></div>
-		</Fragment>
+		</Contents>
 	</Comp>
 </template>
 

components/TextBox.vue

@@ -293,7 +293,7 @@
 				/>
 				<span class="suffix">{{ suffix }}</span>
 				<label>{{ placeholder }}</label>
-				<Fragment class="trailing-icons">
+				<Contents class="trailing-icons">
 					<TrailingIcon
 						:shown="showClearAll"
 						icon="close"
@@ -311,7 +311,7 @@
 						icon="error"
 					/>
 					<slot name="actions"></slot>
-				</Fragment>
+				</Contents>
 			</div>
 			<div class="stripe large-stripe"></div>
 			<div class="stripe focus-stripe"></div>

components/UploadEditor.vue

@@ -129,7 +129,7 @@
 					<SegmentedItem id="repost" icon="local_shipping">{{ t.repost }}</SegmentedItem>
 				</Segmented>
 
-				<Fragment class="repost-options">
+				<Contents class="repost-options">
 					<Transition mode="out-in" @enter="onContentEnter" @leave="onContentLeave">
 						<div v-if="copyright === 'original'">
 							<section>
@@ -148,7 +148,7 @@
 							</section>
 						</div>
 					</Transition>
-				</Fragment>
+				</Contents>
 			</div>
 
 			<div class="center">

pages/settings/about.vue

@@ -53,12 +53,12 @@
 </script>
 
 <template>
-	<Fragment>
+	<Contents>
 		<div class="info" @click="showDevMode">
 			<LogoText />
 			<p class="slogan"><span>{{ sloganLines[0] }}</span><span><b>{{ sloganLines[1] }}</b></span></p>
 		</div>
-	</Fragment>
+	</Contents>
 
 	<Subheader icon="link">{{ t.about.repositories }}</Subheader>
 	<section>