refactor: clean up StyledInput

packages/ui/.storybook/main.ts

@@ -1,4 +1,4 @@
-import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import type { StorybookConfig } from '@storybook/vue3-vite'
 import { mergeConfig } from 'vite'
@@ -16,7 +16,9 @@ const config: StorybookConfig = {
 		mergeConfig(config, {
 			resolve: {
 				alias: {
-					'@modrinth/api-client': path.resolve(__dirname, '../../api-client/src/index.ts'),
+					'@modrinth/api-client': fileURLToPath(
+						new URL('../../api-client/src/index.ts', import.meta.url),
+					),
 				},
 			},
 		}),

packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue

@@ -28,13 +28,6 @@
 			</label>
 			<div class="flex items-center gap-2">
 				<div class="relative inline-flex items-center flex-1">
-					<AutoBrandIcon
-						:keyword="affiliateLinkTitle"
-						aria-hidden="true"
-						class="absolute left-3 h-5 w-5 z-[1] pointer-events-none text-secondary"
-					>
-						<AffiliateIcon />
-					</AutoBrandIcon>
 					<StyledInput
 						id="create-affiliate-title-input"
 						v-model="affiliateLinkTitle"
@@ -43,8 +36,13 @@
 						:placeholder="formatMessage(messages.createTitlePlaceholder)"
 						clearable
 						wrapper-class="w-full"
-						input-class="pl-10"
-					/>
+					>
+						<template #leading>
+							<AutoBrandIcon :keyword="affiliateLinkTitle">
+								<AffiliateIcon />
+							</AutoBrandIcon>
+						</template>
+					</StyledInput>
 				</div>
 				<ButtonStyled color="brand">
 					<button :disabled="creatingLink || !canCreate" @click="createAffiliateLink">

packages/ui/src/components/base/BaseTerminal.vue

@@ -31,7 +31,7 @@
 				:placeholder="disableInput ? disabledInputPlaceholder : 'Send a command'"
 				:disabled="disableInput"
 				wrapper-class="w-full"
-				input-class="!h-10"
+				size="medium"
 				@keydown.enter="submitCommand"
 			/>
 		</div>
@@ -44,7 +44,7 @@ import type { Terminal } from '@xterm/xterm'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import { useTerminal } from '#ui/composables/terminal'
 
 const props = withDefaults(

packages/ui/src/components/base/Combobox.vue

@@ -2,15 +2,11 @@
 	<div ref="containerRef" class="relative inline-block w-full">
 		<!-- Searchable mode: input trigger -->
 		<div v-if="searchable" class="relative w-full rounded-xl bg-surface-4">
-			<!--
-				Selection mirror: horizontal padding must match StyledInput (filled + left icon uses `pl-10`,
-				else `pl-3`) and `searchableInputClass` when the chevron is shown (`!pr-9`), or the overlay
-				text will not line up with the transparent input text / caret.
-			-->
+			<!-- Selection mirror must match InputFrame's leading and trailing slot geometry. -->
 			<div
 				v-if="searchSelectionOverlayVisible"
-				class="pointer-events-none absolute inset-y-0 left-0 right-0 z-0 flex min-w-0 items-center gap-2 font-medium text-primary"
-				:class="[showSearchIcon ? 'pl-10' : 'pl-3', showChevron ? 'pr-9' : 'pr-3']"
+				class="pointer-events-none absolute inset-y-0 left-0 right-0 z-[2] flex min-w-0 items-center gap-2 font-medium text-primary"
+				:class="[showSearchIcon ? 'pl-10' : 'pl-3', showChevron ? 'pr-10' : 'pr-3']"
 				aria-hidden="true"
 			>
 				<span class="min-w-0 truncate">{{ searchQuery }}</span>
@@ -30,7 +26,7 @@
 				:spellcheck="searchSpellcheck"
 				:inputmode="searchInputmode"
 				:input-attrs="searchInputAttrs"
-				wrapper-class="w-full !bg-transparent"
+				wrapper-class="w-full"
 				:input-class="searchableInputClass"
 				class="relative z-[1]"
 				@input="handleSearchInput"
@@ -39,9 +35,9 @@
 				@focusout="handleSearchFocusout"
 				@click="handleSearchClick"
 			>
-				<template v-if="showChevron" #right>
+				<template v-if="showChevron" #trailing>
 					<ChevronLeftIcon
-						class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-secondary transition-transform duration-150"
+						class="pointer-events-none size-5 text-secondary transition-transform duration-150"
 						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
 					/>
 				</template>
@@ -217,7 +213,7 @@ import {
 	watch,
 } from 'vue'
 
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export interface ComboboxOption<T> {
 	value: T
@@ -389,8 +385,7 @@ const searchSelectionOverlayVisible = computed(() => {
 })
 
 const searchableInputClass = computed(() => {
-	const parts = ['!bg-transparent']
-	if (props.showChevron) parts.push('!pr-9')
+	const parts: string[] = []
 	if (searchSelectionOverlayVisible.value) {
 		parts.push('!text-transparent [caret-color:var(--color-text-primary)] selection:bg-transparent')
 	}

packages/ui/src/components/base/DropdownFilterBar.vue

@@ -197,8 +197,7 @@
 					:icon="SearchIcon"
 					type="text"
 					:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
-					wrapper-class="grow bg-surface-4 mx-1"
-					input-class="ps-9 mx-1.5"
+					wrapper-class="grow mx-1"
 				/>
 				<slot
 					name="search-actions"
@@ -388,7 +387,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonStyled from './ButtonStyled.vue'
 import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export type DropdownFilterBarOption = {
 	value: string

packages/ui/src/components/base/I18nDebugPanel.vue

@@ -12,7 +12,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import { injectI18nDebug } from '../../composables/i18n-debug'
 import ButtonStyled from './ButtonStyled.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 const debugContext = injectI18nDebug()
 

packages/ui/src/components/base/MarkdownEditor.vue

@@ -340,7 +340,7 @@ import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import IntlFormatted from './IntlFormatted.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 import Toggle from './Toggle.vue'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/base/MultiSelect.vue

@@ -133,8 +133,7 @@
 								:icon="SearchIcon"
 								type="text"
 								:placeholder="searchPlaceholder"
-								wrapper-class="grow bg-surface-4 mx-0"
-								input-class="ps-9 mx-1.5"
+								wrapper-class="grow"
 								@input="handleSearchInput"
 								@keydown="handleSearchKeydown"
 							/>
@@ -415,7 +414,7 @@ import {
 } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export interface MultiSelectOption<T> {
 	value: T

packages/ui/src/components/base/Slider.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 const emit = defineEmits<{ 'update:modelValue': [number] }>()
 

packages/ui/src/components/base/TimeFramePicker.vue

@@ -199,7 +199,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import ButtonStyled from './ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from './Combobox.vue'
-import DatePicker from './DatePicker.vue'
+import DatePicker from './inputs/DatePicker.vue'
 
 export type TimeFramePreset =
 	| 'today'