client: unify import names of form ui components

packages/client/src/components/abuse-report-window.vue

@@ -10,10 +10,10 @@
 	</template>
 	<div class="dpvffvvy _monolithic_">
 		<div class="_section">
-			<MkTextarea v-model="comment">
+			<FormTextarea v-model="comment">
 				<template #label>{{ i18n.ts.details }}</template>
 				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
-			</MkTextarea>
+			</FormTextarea>
 		</div>
 		<div class="_section">
 			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
@@ -26,7 +26,7 @@
 import { ref } from 'vue';
 import * as foundkey from 'foundkey-js';
 import XWindow from '@/components/ui/window.vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/components/abuse-report.vue

@@ -32,10 +32,10 @@
 		</div>
 		<div><MkTime :time="report.createdAt"/></div>
 		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+			<FormSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
 				{{ i18n.ts.forwardReport }}
 				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
+			</FormSwitch>
 			<MkButton v-if="!report.resolved" class="_formBlock" style="margin-bottom: 0;" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 		</div>
 	</div>
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import MkUrl from '@/components/global/url.vue';
 import * as os from '@/os';

packages/client/src/components/dialog.vue

@@ -14,10 +14,10 @@
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div v-if="text" class="body"><Mfm :text="text"/></div>
-		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
+		<FormInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
 			<template v-if="input.type === 'password'" #prefix><i class="fas fa-lock"></i></template>
-		</MkInput>
+		</FormInput>
-		<MkSelect v-if="select" v-model="selectedValue" autofocus>
+		<FormSelect v-if="select" v-model="selectedValue" autofocus>
 			<template v-if="select.items">
 				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>
@@ -26,7 +26,7 @@
 					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
 				</optgroup>
 			</template>
-		</MkSelect>
+		</FormSelect>
 		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
 			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
 			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
@@ -42,8 +42,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import { i18n } from '@/i18n';
 
 type Input = {

packages/client/src/components/federation.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="taeiyria">
 	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="">
+		<FormInput v-model="host" :debounce="true" class="">
 			<template #prefix><i class="fas fa-search"></i></template>
 			<template #label>{{ i18n.ts.host }}</template>
-		</MkInput>
+		</FormInput>
 		<FormSplit style="margin-top: var(--margin);">
-			<MkSelect v-model="state">
+			<FormSelect v-model="state">
 				<template #label>{{ i18n.ts.state }}</template>
 				<option value="all">{{ i18n.ts.all }}</option>
 				<option value="federating">{{ i18n.ts.federating }}</option>
@@ -15,8 +15,8 @@
 				<option value="suspended">{{ i18n.ts.suspended }}</option>
 				<option value="blocked">{{ i18n.ts.blocked }}</option>
 				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
-			</MkSelect>
+			</FormSelect>
-			<MkSelect v-model="sort">
+			<FormSelect v-model="sort">
 				<template #label>{{ i18n.ts.sort }}</template>
 				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
 				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
@@ -32,7 +32,7 @@
 				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
 				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
 				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
-			</MkSelect>
+			</FormSelect>
 		</FormSplit>
 	</div>
 
@@ -48,8 +48,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkInstanceCardMini from '@/components/instance-card-mini.vue';
 import FormSplit from '@/components/form/split.vue';

packages/client/src/components/forgot-password.vue

@@ -10,15 +10,15 @@
 
 	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
 		<div class="main _formRoot">
-			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
+			<FormInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
 				<template #label>{{ i18n.ts.username }}</template>
 				<template #prefix>@</template>
-			</MkInput>
+			</FormInput>
 
-			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
+			<FormInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
 				<template #label>{{ i18n.ts.emailAddress }}</template>
 				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
-			</MkInput>
+			</FormInput>
 
 			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
 		</div>
@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';

packages/client/src/components/instance-stats.vue

@@ -3,7 +3,7 @@
 	<div class="main">
 		<div class="body">
 			<div class="selects" style="display: flex;">
-				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+				<FormSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="i18n.ts.federation">
 						<option value="federation">{{ i18n.ts._charts.federation }}</option>
 						<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
@@ -23,11 +23,11 @@
 						<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
 						<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
 					</optgroup>
-				</MkSelect>
+				</FormSelect>
-				<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+				<FormSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
 					<option value="hour">{{ i18n.ts.perHour }}</option>
 					<option value="day">{{ i18n.ts.perDay }}</option>
-				</MkSelect>
+				</FormSelect>
 			</div>
 			<div class="chart">
 				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
@@ -67,7 +67,7 @@ import {
 	Filler,
 	DoughnutController,
 } from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkChart from '@/components/chart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';

packages/client/src/components/notification-setting-window.vue

@@ -12,16 +12,16 @@
 	<template #header>{{ i18n.ts.notificationSetting }}</template>
 	<div class="_monolithic_">
 		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model="useGlobalSetting">
+			<FormSwitch v-model="useGlobalSetting">
 				{{ i18n.ts.useGlobalSetting }}
 				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-			</MkSwitch>
+			</FormSwitch>
 		</div>
 		<div v-if="!useGlobalSetting" class="_section">
 			<MkInfo>{{ message }}</MkInfo>
 			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
 			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
+			<FormSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</FormSwitch>
 		</div>
 	</div>
 </XModalWindow>
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import * as foundkey from 'foundkey-js';
-import MkSwitch from './form/switch.vue';
+import FormSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';

packages/client/src/components/poll-editor.vue

@@ -5,8 +5,7 @@
 	</p>
 	<ul>
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
+			<FormInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)"/>
-			</MkInput>
 			<button class="_button" @click="remove(i)">
 				<i class="fas fa-times"></i>
 			</button>
@@ -14,33 +13,33 @@
 	</ul>
 	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
 	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
-	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
+	<FormSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</FormSwitch>
 	<section>
 		<div>
-			<MkSelect v-model="expiration" small>
+			<FormSelect v-model="expiration" small>
 				<template #label>{{ i18n.ts._poll.expiration }}</template>
 				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
 				<option value="at">{{ i18n.ts._poll.at }}</option>
 				<option value="after">{{ i18n.ts._poll.after }}</option>
-			</MkSelect>
+			</FormSelect>
 			<section v-if="expiration === 'at'">
-				<MkInput v-model="atDate" small type="date" class="input">
+				<FormInput v-model="atDate" small type="date" class="input">
 					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
-				</MkInput>
+				</FormInput>
-				<MkInput v-model="atTime" small type="time" class="input">
+				<FormInput v-model="atTime" small type="time" class="input">
 					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
-				</MkInput>
+				</FormInput>
 			</section>
 			<section v-else-if="expiration === 'after'">
-				<MkInput v-model="after" small type="number" class="input">
+				<FormInput v-model="after" small type="number" class="input">
 					<template #label>{{ i18n.ts._poll.duration }}</template>
-				</MkInput>
+				</FormInput>
-				<MkSelect v-model="unit" small>
+				<FormSelect v-model="unit" small>
 					<option value="second">{{ i18n.ts._time.second }}</option>
 					<option value="minute">{{ i18n.ts._time.minute }}</option>
 					<option value="hour">{{ i18n.ts._time.hour }}</option>
 					<option value="day">{{ i18n.ts._time.day }}</option>
-				</MkSelect>
+				</FormSelect>
 			</section>
 		</div>
 	</section>
@@ -49,9 +48,9 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import MkInput from './form/input.vue';
+import FormInput from './form/input.vue';
-import MkSelect from './form/select.vue';
+import FormSelect from './form/select.vue';
-import MkSwitch from './form/switch.vue';
+import FormSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';
 import { formatDateTimeString } from '@/scripts/format-time-string';
 import { addTime } from '@/scripts/time';

packages/client/src/components/sample.vue

@@ -1,16 +1,16 @@
 <template>
 <div class="_card">
 	<div class="_content">
-		<MkInput v-model="text">
+		<FormInput v-model="text">
 			<template #label>Text</template>
-		</MkInput>
+		</FormInput>
-		<MkSwitch v-model="flag">
+		<FormSwitch v-model="flag">
 			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
-		</MkSwitch>
+		</FormSwitch>
 		<div style="margin: 32px 0;">
-			<MkRadio v-model="radio" value="misskey">Misskey</MkRadio>
+			<FormRadio v-model="radio" value="misskey">Misskey</FormRadio>
-			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
+			<FormRadio v-model="radio" value="mastodon">Mastodon</FormRadio>
-			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+			<FormRadio v-model="radio" value="pleroma">Pleroma</FormRadio>
 		</div>
 		<MkButton inline>This is</MkButton>
 		<MkButton inline primary>the button</MkButton>
@@ -30,9 +30,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
-import MkRadio from '@/components/form/radio.vue';
+import FormRadio from '@/components/form/radio.vue';
 import * as os from '@/os';
 import * as config from '@/config';
 import { $i } from '@/account';

packages/client/src/components/signin.vue

@@ -6,13 +6,13 @@
 			{{ message }}
 		</MkInfo>
 		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
+			<FormInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
 				<template #prefix>@</template>
-			</MkInput>
+			</FormInput>
-			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
+			<FormInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
+			</FormInput>
 			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
 		</div>
 		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
@@ -27,14 +27,14 @@
 			</div>
 			<div class="twofa-group totp-group">
 				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
-				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
+				<FormInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
 					<template #label>{{ i18n.ts.password }}</template>
 					<template #prefix><i class="fas fa-lock"></i></template>
-				</MkInput>
+				</FormInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
+				<FormInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
 					<template #label>{{ i18n.ts.token }}</template>
 					<template #prefix><i class="fas fa-gavel"></i></template>
-				</MkInput>
+				</FormInput>
 				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
 			</div>
 		</div>
@@ -47,7 +47,7 @@ import { defineAsyncComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import { showSuspendedDialog } from '@/scripts/show-suspended-dialog';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import MkInfo from '@/components/ui/info.vue';
 import { apiUrl } from '@/config';
 import { byteify, hexify } from '@/scripts/2fa';

packages/client/src/components/signup.vue

@@ -1,10 +1,10 @@
 <template>
 <form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
-	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
+	<FormInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
 		<template #label>{{ i18n.ts.invitationCode }}</template>
 		<template #prefix><i class="fas fa-key"></i></template>
-	</MkInput>
+	</FormInput>
-	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
+	<FormInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
 		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix>@</template>
 		<template #caption>
@@ -16,8 +16,8 @@
 			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooShort }}</span>
 			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooLong }}</span>
 		</template>
-	</MkInput>
+	</FormInput>
-	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
+	<FormInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
 		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix><i class="fas fa-envelope"></i></template>
 		<template #caption>
@@ -31,8 +31,8 @@
 			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
 			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
 		</template>
-	</MkInput>
+	</FormInput>
-	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
+	<FormInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
 		<template #label>{{ i18n.ts.password }}</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
@@ -40,22 +40,22 @@
 			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
 			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
-	</MkInput>
+	</FormInput>
-	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
+	<FormInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
 		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
 			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
 			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
-	</MkInput>
+	</FormInput>
-	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
+	<FormSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
 		<I18n :src="i18n.ts.agreeTo">
 			<template #0>
 				<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
 			</template>
 		</I18n>
-	</MkSwitch>
+	</FormSwitch>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
@@ -67,8 +67,8 @@ import getPasswordStrength from 'syuilo-password-strength';
 import { toUnicode } from 'punycode/';
 import MkButton from './ui/button.vue';
 import MkCaptcha from './captcha.vue';
-import MkInput from './form/input.vue';
+import FormInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
+import FormSwitch from './form/switch.vue';
 import * as os from '@/os';
 import { login } from '@/account';
 import { instance } from '@/instance';

packages/client/src/components/token-generate-window.vue

@@ -15,23 +15,23 @@
 		<MkInfo warn>{{ information }}</MkInfo>
 	</div>
 	<div class="_section">
-		<MkInput v-model="name">
+		<FormInput v-model="name">
 			<template #label>{{ i18n.ts.name }}</template>
-		</MkInput>
+		</FormInput>
 	</div>
 	<div class="_section">
 		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.permission }}</b></div>
 		<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
 		<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch>
+		<FormSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</FormSwitch>
 	</div>
 </XModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { permissions } from 'foundkey-js';
-import MkInput from './form/input.vue';
+import FormInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
+import FormSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';

packages/client/src/components/user-select-dialog.vue

@@ -12,14 +12,14 @@
 	<div class="tbhwbxda">
 		<div class="form">
 			<FormSplit :min-width="170">
-				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
+				<FormInput v-model="username" :autofocus="true" @update:modelValue="search">
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
-				</MkInput>
+				</FormInput>
-				<MkInput v-model="host" @update:modelValue="search">
+				<FormInput v-model="host" @update:modelValue="search">
 					<template #label>{{ i18n.ts.host }}</template>
 					<template #prefix>@</template>
-				</MkInput>
+				</FormInput>
 			</FormSplit>
 		</div>
 		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
@@ -54,7 +54,7 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as foundkey from 'foundkey-js';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import FormSplit from '@/components/form/split.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import * as os from '@/os';

packages/client/src/components/widgets.vue

@@ -2,10 +2,10 @@
 <div class="vjoppmmu">
 	<template v-if="edit">
 		<header>
-			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
+			<FormSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
-			</MkSelect>
+			</FormSelect>
 			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
@@ -33,7 +33,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, reactive, ref, computed } from 'vue';
 import { v4 as uuid } from 'uuid';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkButton from '@/components/ui/button.vue';
 import { widgets as widgetDefs } from '@/widgets';
 import { i18n } from '@/i18n';

packages/client/src/pages/about.emojis.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="driuhtrh">
 	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+		<FormInput v-model="q" class="" :placeholder="i18n.ts.search">
 			<template #prefix><i class="fas fa-search"></i></template>
-		</MkInput>
+		</FormInput>
 	</div>
 
 	<MkFolder v-if="searchEmojis" class="emojis">
@@ -25,7 +25,7 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 import XEmoji from './emojis.emoji.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import { i18n } from '@/i18n';
 import { emojiCategories, instance } from '@/instance';

packages/client/src/pages/admin-file.vue

@@ -32,7 +32,7 @@
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
 			<div class="_formBlock">
-				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
+				<FormSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</FormSwitch>
 			</div>
 
 			<div class="_formBlock">
@@ -50,7 +50,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import MkObjectView from '@/components/object-view.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import MkKeyValue from '@/components/key-value.vue';

packages/client/src/pages/admin/abuses.vue

@@ -6,24 +6,24 @@
 			<div class="_section reports">
 				<div class="_content">
 					<div class="inputs" style="display: flex;">
-						<MkSelect v-model="state" style="margin: 0; flex: 1;">
+						<FormSelect v-model="state" style="margin: 0; flex: 1;">
 							<template #label>{{ i18n.ts.state }}</template>
 							<option value="all">{{ i18n.ts.all }}</option>
 							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
 							<option value="resolved">{{ i18n.ts.resolved }}</option>
-						</MkSelect>
+						</FormSelect>
-						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
+						<FormSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
 							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
 							<option value="combined">{{ i18n.ts.all }}</option>
 							<option value="local">{{ i18n.ts.local }}</option>
 							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
+						</FormSelect>
-						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
+						<FormSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
 							<template #label>{{ i18n.ts.reporterOrigin }}</template>
 							<option value="combined">{{ i18n.ts.all }}</option>
 							<option value="local">{{ i18n.ts.local }}</option>
 							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
+						</FormSelect>
 					</div>
 
 					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
@@ -39,7 +39,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import XAbuseReport from '@/components/abuse-report.vue';
 import { i18n } from '@/i18n';

packages/client/src/pages/admin/announcements.vue

@@ -5,15 +5,15 @@
 		<div class="ztgjmzrw">
 			<section v-for="announcement in announcements" class="_card _gap announcements">
 				<div class="_content announcement">
-					<MkInput v-model="announcement.title">
+					<FormInput v-model="announcement.title">
 						<template #label>{{ i18n.ts.title }}</template>
-					</MkInput>
+					</FormInput>
-					<MkTextarea v-model="announcement.text">
+					<FormTextarea v-model="announcement.text">
 						<template #label>{{ i18n.ts.text }}</template>
-					</MkTextarea>
+					</FormTextarea>
-					<MkInput v-model="announcement.imageUrl">
+					<FormInput v-model="announcement.imageUrl">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
+					</FormInput>
 					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
 					<div class="buttons">
 						<MkButton class="button" inline primary @click="save(announcement)"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
@@ -28,8 +28,8 @@
 
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';

packages/client/src/pages/admin/emoji-edit-dialog.vue

@@ -12,16 +12,16 @@
 	<div class="_monolithic_">
 		<div class="yigymqpb _section">
 			<img :src="emoji.url" class="img"/>
-			<MkInput v-model="name" class="_formBlock">
+			<FormInput v-model="name" class="_formBlock">
 				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
+			</FormInput>
-			<MkInput v-model="category" class="_formBlock" :datalist="categories">
+			<FormInput v-model="category" class="_formBlock" :datalist="categories">
 				<template #label>{{ i18n.ts.category }}</template>
-			</MkInput>
+			</FormInput>
-			<MkInput v-model="aliases" class="_formBlock">
+			<FormInput v-model="aliases" class="_formBlock">
 				<template #label>{{ i18n.ts.tags }}</template>
 				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
-			</MkInput>
+			</FormInput>
 			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
@@ -31,7 +31,7 @@
 <script lang="ts" setup>
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { emojiCategories } from '@/instance';

packages/client/src/pages/admin/emojis.vue

@@ -5,13 +5,13 @@
 		<MkSpacer :content-max="900">
 			<div class="ogwlenmc">
 				<div v-if="tab === 'local'" class="local">
-					<MkInput v-model="query" :debounce="true" type="search">
+					<FormInput v-model="query" :debounce="true" type="search">
 						<template #prefix><i class="fas fa-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
-					</MkInput>
+					</FormInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
+					<FormSwitch v-model="selectMode" style="margin: 8px 0;">
 						<template #label>{{ i18n.ts.selectMode }}</template>
-					</MkSwitch>
+					</FormSwitch>
 					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
 						<MkButton inline @click="selectAll">{{ i18n.ts.selectAll }}</MkButton>
 						<MkButton inline @click="setCategoryBulk">{{ i18n.ts.setCategory }}</MkButton>
@@ -39,13 +39,13 @@
 
 				<div v-else-if="tab === 'remote'" class="remote">
 					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search">
+						<FormInput v-model="queryRemote" :debounce="true" type="search">
 							<template #prefix><i class="fas fa-search"></i></template>
 							<template #label>{{ i18n.ts.search }}</template>
-						</MkInput>
+						</FormInput>
-						<MkInput v-model="host" :debounce="true">
+						<FormInput v-model="host" :debounce="true">
 							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
+						</FormInput>
 					</FormSplit>
 					<MkPagination :pagination="remotePagination">
 						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
@@ -71,9 +71,9 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import FormSplit from '@/components/form/split.vue';
 import { selectFile, selectFiles } from '@/scripts/select-file';
 import * as os from '@/os';

packages/client/src/pages/admin/files.vue

@@ -6,23 +6,23 @@
 			<div class="xrmjdkdw">
 				<div>
 					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkSelect v-model="origin" style="margin: 0; flex: 1;">
+						<FormSelect v-model="origin" style="margin: 0; flex: 1;">
 							<template #label>{{ i18n.ts.instance }}</template>
 							<option value="combined">{{ i18n.ts.all }}</option>
 							<option value="local">{{ i18n.ts.local }}</option>
 							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
+						</FormSelect>
-						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
+						<FormInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
 							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
+						</FormInput>
 					</div>
 					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
-						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
+						<FormInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
 							<template #label>User ID</template>
-						</MkInput>
+						</FormInput>
-						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
+						<FormInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
 							<template #label>MIME type</template>
-						</MkInput>
+						</FormInput>
 					</div>
 					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
 				</div>
@@ -34,8 +34,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/pages/admin/users.vue

@@ -6,14 +6,14 @@
 			<div class="lknzcolw">
 				<div class="users">
 					<div class="inputs">
-						<MkSelect v-model="sort" style="flex: 1;">
+						<FormSelect v-model="sort" style="flex: 1;">
 							<template #label>{{ i18n.ts.sort }}</template>
 							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
 							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
 							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
 							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
-						</MkSelect>
+						</FormSelect>
-						<MkSelect v-model="state" style="flex: 1;">
+						<FormSelect v-model="state" style="flex: 1;">
 							<template #label>{{ i18n.ts.state }}</template>
 							<option value="all">{{ i18n.ts.all }}</option>
 							<option value="available">{{ i18n.ts.normal }}</option>
@@ -21,23 +21,23 @@
 							<option value="moderator">{{ i18n.ts.moderator }}</option>
 							<option value="silenced">{{ i18n.ts.silence }}</option>
 							<option value="suspended">{{ i18n.ts.suspend }}</option>
-						</MkSelect>
+						</FormSelect>
-						<MkSelect v-model="origin" style="flex: 1;">
+						<FormSelect v-model="origin" style="flex: 1;">
 							<template #label>{{ i18n.ts.instance }}</template>
 							<option value="combined">{{ i18n.ts.all }}</option>
 							<option value="local">{{ i18n.ts.local }}</option>
 							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
+						</FormSelect>
 					</div>
 					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
+						<FormInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.username }}</template>
-						</MkInput>
+						</FormInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
+						<FormInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
+						</FormInput>
 					</div>
 
 					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
@@ -54,8 +54,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import * as os from '@/os';
 import { lookupUser } from '@/scripts/lookup-user';

packages/client/src/pages/api-console.vue

@@ -4,24 +4,24 @@
 	<MkSpacer :content-max="700">
 		<div class="_formRoot">
 			<div class="_formBlock">
-				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
+				<FormInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
 					<template #label>Endpoint</template>
-				</MkInput>
+				</FormInput>
-				<MkTextarea v-model="body" class="_formBlock" code>
+				<FormTextarea v-model="body" class="_formBlock" code>
 					<template #label>Params (JSON or JSON5)</template>
-				</MkTextarea>
+				</FormTextarea>
-				<MkSwitch v-model="withCredential" class="_formBlock">
+				<FormSwitch v-model="withCredential" class="_formBlock">
 					With credential
-				</MkSwitch>
+				</FormSwitch>
 				<MkButton class="_formBlock" primary :disabled="sending" @click="send">
 					<template v-if="sending"><MkEllipsis/></template>
 					<template v-else><i class="fas fa-paper-plane"></i> Send</template>
 				</MkButton>
 			</div>
 			<div v-if="res" class="_formBlock">
-				<MkTextarea v-model="res" code readonly tall>
+				<FormTextarea v-model="res" code readonly tall>
 					<template #label>Response</template>
-				</MkTextarea>
+				</FormTextarea>
 			</div>
 		</div>
 	</MkSpacer>
@@ -32,9 +32,9 @@
 import JSON5 from 'json5';
 import { Endpoints } from 'foundkey-js';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 

packages/client/src/pages/channel-editor.vue

@@ -3,13 +3,13 @@
 	<template #header><MkPageHeader/></template>
 	<MkSpacer :content-max="700">
 		<div class="_formRoot">
-			<MkInput v-model="name" class="_formBlock">
+			<FormInput v-model="name" class="_formBlock">
 				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
+			</FormInput>
 
-			<MkTextarea v-model="description" class="_formBlock">
+			<FormTextarea v-model="description" class="_formBlock">
 				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
+			</FormTextarea>
 
 			<div class="banner">
 				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
@@ -28,9 +28,9 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 import { useRouter } from '@/router';

packages/client/src/pages/gallery/index.vue

@@ -45,7 +45,6 @@
 import { computed, defineComponent, watch } from 'vue';
 import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import MkInput from '@/components/form/input.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';

packages/client/src/pages/instance-info.vue

@@ -96,7 +96,7 @@
 		<div v-else-if="tab === 'chart'" class="_formRoot">
 			<div class="cmhjzshl">
 				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+					<FormSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
 						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
 						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
 						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
@@ -108,7 +108,7 @@
 						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
 						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
 						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
+					</FormSelect>
 				</div>
 				<div class="charts">
 					<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
@@ -142,7 +142,7 @@ import MkLink from '@/components/link.vue';
 import MkButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/key-value.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import number from '@/filters/number';

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -9,7 +9,7 @@
 				<p>{{ i18n.ts._mfm.mentionDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_mention"/>
-					<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_mention"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -19,7 +19,7 @@
 				<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_hashtag"/>
-					<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_hashtag"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -29,7 +29,7 @@
 				<p>{{ i18n.ts._mfm.urlDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_url"/>
-					<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_url"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -39,7 +39,7 @@
 				<p>{{ i18n.ts._mfm.linkDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_link"/>
-					<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_link"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -49,7 +49,7 @@
 				<p>{{ i18n.ts._mfm.emojiDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_emoji"/>
-					<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_emoji"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -59,7 +59,7 @@
 				<p>{{ i18n.ts._mfm.boldDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_bold"/>
-					<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_bold"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -69,7 +69,7 @@
 				<p>{{ i18n.ts._mfm.smallDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_small"/>
-					<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_small"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -79,7 +79,7 @@
 				<p>{{ i18n.ts._mfm.quoteDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_quote"/>
-					<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_quote"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -89,7 +89,7 @@
 				<p>{{ i18n.ts._mfm.centerDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_center"/>
-					<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_center"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -99,7 +99,7 @@
 				<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_inlineCode"/>
-					<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_inlineCode"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -109,7 +109,7 @@
 				<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_blockCode"/>
-					<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_blockCode"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -119,7 +119,7 @@
 				<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_inlineMath"/>
-					<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_inlineMath"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -130,7 +130,7 @@
 			<p>{{ i18n.ts._mfm.searchDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_search"/>
-				<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
+				<FormTextarea v-model="preview_search"><template #label>MFM</template></FormTextarea>
 			</div>
 		</div>
 	</div>
@@ -141,7 +141,7 @@
 				<p>{{ i18n.ts._mfm.flipDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_flip"/>
-					<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_flip"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -151,7 +151,7 @@
 				<p>{{ i18n.ts._mfm.fontDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_font"/>
-					<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_font"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -161,7 +161,7 @@
 				<p>{{ i18n.ts._mfm.x2Description }}</p>
 				<div class="preview">
 					<Mfm :text="preview_x2"/>
-					<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_x2"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -171,7 +171,7 @@
 				<p>{{ i18n.ts._mfm.x3Description }}</p>
 				<div class="preview">
 					<Mfm :text="preview_x3"/>
-					<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_x3"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -181,7 +181,7 @@
 				<p>{{ i18n.ts._mfm.x4Description }}</p>
 				<div class="preview">
 					<Mfm :text="preview_x4"/>
-					<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_x4"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -191,7 +191,7 @@
 				<p>{{ i18n.ts._mfm.blurDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_blur"/>
-					<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_blur"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -201,7 +201,7 @@
 				<p>{{ i18n.ts._mfm.jellyDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_jelly"/>
-					<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_jelly"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -211,7 +211,7 @@
 				<p>{{ i18n.ts._mfm.tadaDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_tada"/>
-					<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_tada"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -221,7 +221,7 @@
 				<p>{{ i18n.ts._mfm.jumpDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_jump"/>
-					<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_jump"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -231,7 +231,7 @@
 				<p>{{ i18n.ts._mfm.bounceDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_bounce"/>
-					<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_bounce"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -241,7 +241,7 @@
 				<p>{{ i18n.ts._mfm.spinDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_spin"/>
-					<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_spin"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -251,7 +251,7 @@
 				<p>{{ i18n.ts._mfm.shakeDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_shake"/>
-					<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_shake"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -261,7 +261,7 @@
 				<p>{{ i18n.ts._mfm.twitchDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_twitch"/>
-					<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_twitch"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -271,7 +271,7 @@
 				<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_rainbow"/>
-					<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
+					<FormTextarea v-model="preview_rainbow"><template #label>MFM</template></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -281,7 +281,7 @@
 				<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_sparkle"/>
-					<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
+					<FormTextarea v-model="preview_sparkle"><span>MFM</span></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -291,7 +291,7 @@
 				<p>{{ i18n.ts._mfm.rotateDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_rotate"/>
-					<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+					<FormTextarea v-model="preview_rotate"><span>MFM</span></FormTextarea>
 				</div>
 			</div>
 		</div>
@@ -300,7 +300,7 @@
 </template>
 
 <script lang="ts" setup>
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';

packages/client/src/pages/my-antennas/editor.vue

@@ -1,41 +1,41 @@
 <template>
 <div class="shaynizk">
 	<div class="form">
-		<MkInput v-model="name" class="_formBlock">
+		<FormInput v-model="name" class="_formBlock">
 			<template #label>{{ i18n.ts.name }}</template>
-		</MkInput>
+		</FormInput>
-		<MkSelect v-model="src" class="_formBlock">
+		<FormSelect v-model="src" class="_formBlock">
 			<template #label>{{ i18n.ts.antennaSource }}</template>
 			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
 			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
 			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
 			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
 			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
-		</MkSelect>
+		</FormSelect>
-		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
+		<FormSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
 			<template #label>{{ i18n.ts.userList }}</template>
 			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
-		</MkSelect>
+		</FormSelect>
-		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
+		<FormSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
 			<template #label>{{ i18n.ts.userGroup }}</template>
 			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
-		</MkSelect>
+		</FormSelect>
-		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
+		<FormTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
 			<template #label>{{ i18n.ts.users }}</template>
 			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
-		</MkTextarea>
+		</FormTextarea>
-		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
+		<FormSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</FormSwitch>
-		<MkTextarea v-model="keywords" class="_formBlock">
+		<FormTextarea v-model="keywords" class="_formBlock">
 			<template #label>{{ i18n.ts.antennaKeywords }}</template>
 			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
+		</FormTextarea>
-		<MkTextarea v-model="excludeKeywords" class="_formBlock">
+		<FormTextarea v-model="excludeKeywords" class="_formBlock">
 			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
 			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
+		</FormTextarea>
-		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
+		<FormSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</FormSwitch>
-		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
+		<FormSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</FormSwitch>
-		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
+		<FormSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</FormSwitch>
 	</div>
 	<div class="actions">
 		<MkButton inline primary @click="saveAntenna()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
@@ -48,10 +48,10 @@
 import { watch } from 'vue';
 import * as Acct from 'foundkey-js/built/acct';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 

packages/client/src/pages/page-editor.vue

@@ -26,11 +26,11 @@
 
 				<MkSwitch v-model="alignCenter" :disabled="readonly" class="_formBlock">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
 
-				<MkSelect v-model="font" :readonly="readonly" class="_formBlock">
+				<FormSelect v-model="font" :readonly="readonly" class="_formBlock">
 					<template #label>{{ i18n.ts._pages.font }}</template>
 					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
 					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
-				</MkSelect>
+				</FormSelect>
 
 				<MkSwitch v-model="hideTitleWhenPinned" :disabled="readonly" class="_formBlock">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
@@ -54,7 +54,7 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/search.vue

@@ -4,20 +4,20 @@
 	<MkSpacer :content-max="800">
 		<MkFolder>
 			<template #header>{{ i18n.ts.search }}</template>
-			<MkInput v-model="query" :autofocus="true" class="input" tabindex="1" @keydown="keydown">
+			<FormInput v-model="query" :autofocus="true" class="input" tabindex="1" @keydown="keydown">
 				<template #prefix><i class="fas fa-magnifying-glass"></i></template>
 				<template v-if="tab === 'users'" #label>{{ i18n.ts.username }}</template>
 				<template v-if="tab === 'all'" #caption>Try entering a URL or user handle!</template>
-			</MkInput>
+			</FormInput>
 			<template v-if="tab === 'notes'">
-				<MkSelect v-model="author" class="input">
+				<FormSelect v-model="author" class="input">
 					<template #label>{{ i18n.ts.author }}</template>
 					<option value="all">{{ i18n.ts.all }}</option>
 					<option value="self">{{ i18n.ts.you }}</option>
 					<option value="user">{{ i18n.ts.user }}</option>
 					<option value="local">{{ i18n.ts.local }}</option>
 					<option value="host">{{ i18n.ts.instance }}</option>
-				</MkSelect>
+				</FormSelect>
 				<MkButton v-if="author === 'user'" @click="selectUser" full class="input">
 					<template v-if="user == null">{{ i18n.ts.selectUser }}</template>
 					<template v-else>
@@ -25,18 +25,18 @@
 						<MkAcct :user="user"/>
 					</template>
 				</MkButton>
-				<MkInput v-if="author === 'host'" v-model="host" class="input">
+				<FormInput v-if="author === 'host'" v-model="host" class="input">
 					<template #prefix>@</template>
 					<template #label>{{ i18n.ts.host }}</template>
-				</MkInput>
+				</FormInput>
 			</template>
 			<template v-if="tab === 'users'">
-				<MkSelect v-model="origin" class="input">
+				<FormSelect v-model="origin" class="input">
 					<template #label>{{ i18n.ts.instance }}</template>
 					<option value="combined">{{ i18n.ts.all }}</option>
 					<option value="local">{{ i18n.ts.local }}</option>
 					<option value="remote">{{ i18n.ts.remote }}</option>
-				</MkSelect>
+				</FormSelect>
 			</template>
 			<MkButton @click="search()" primary :disabled="!canSearch" class="input">
 				<i class="fas fa-magnifying-glass"></i> {{ i18n.ts.search }}
@@ -59,8 +59,8 @@ import { computed, nextTick, watch } from 'vue';
 import XNotes from '@/components/notes.vue';
 import XUserList from '@/components/user-list.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
+import FormSelect from '@/components/form/select.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';

packages/client/src/pages/settings/2fa.vue

@@ -18,7 +18,7 @@
 				</div>
 			</div>
 
-			<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
+			<FormSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</FormSwitch>
 
 			<MkInfo v-if="registration && registration.error" warn>{{ i18n.ts.error }} {{ registration.error }}</MkInfo>
 			<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
@@ -30,9 +30,9 @@
 				</li>
 				<li v-if="registration.stage >= 1">
 					<MkForm :disabled="registration.stage != 1 || registration.saving">
-						<MkInput v-model="keyName" :max="30">
+						<FormInput v-model="keyName" :max="30">
 							<template #label>{{ i18n.ts.securityKeyName }}</template>
-						</MkInput>
+						</FormInput>
 						<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
 						<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
 					</MkForm>
@@ -55,7 +55,7 @@
 			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ i18n.ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
 			<li>
 				{{ i18n.ts._2fa.step3 }}<br>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
+				<FormInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></FormInput>
 				<MkButton primary @click="submit">{{ i18n.ts.done }}</MkButton>
 			</li>
 		</ol>
@@ -70,8 +70,8 @@ import { hostname } from '@/config';
 import { byteify, hexify, stringify } from '@/scripts/2fa';
 import MkButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';

packages/client/src/pages/welcome.setup.vue

@@ -3,15 +3,15 @@
 	<h1>Welcome to Misskey!</h1>
 	<div class="_formRoot">
 		<p>{{ i18n.ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
+		<FormInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
 			<template #label>{{ i18n.ts.username }}</template>
 			<template #prefix>@</template>
-		</MkInput>
+		</FormInput>
-		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
+		<FormInput v-model="password" type="password" data-cy-admin-password>
 			<template #label>{{ i18n.ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
-		</MkInput>
+		</FormInput>
-		<div class="bottom _formBlock">
+		<div class="bottom">
 			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
 				{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
 			</MkButton>
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
+import FormInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { login } from '@/account';
 import { i18n } from '@/i18n';