feat: implement dropdown filter bar (#6009)

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

@@ -1,11 +1,12 @@
 <template>
-	<div ref="containerRef" class="relative inline-block w-full">
+	<div ref="containerRef" class="relative inline-block" :class="fitContent ? 'w-auto' : 'w-full'">
 		<span
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
-			class="relative flex w-full items-center overflow-hidden rounded-xl bg-surface-4 px-3 py-1 text-left transition-all duration-200"
+			class="relative flex items-center overflow-hidden rounded-xl bg-surface-4 px-3 py-1 text-left transition-all duration-200"
 			:class="[
+				fitContent ? 'w-auto max-w-full' : 'w-full',
 				triggerClass,
 				{
 					'z-[9999]': isOpen,
@@ -19,68 +20,80 @@
 			@click="handleTriggerClick($event)"
 			@keydown="handleTriggerKeydown"
 		>
-			<div
-				ref="tagsContainerRef"
-				class="flex flex-1 items-center gap-1.5 overflow-hidden flex-wrap min-h-8"
-				:style="{ maxHeight: `calc(${maxTagRows} * 30px + ${maxTagRows - 1} * 6px)` }"
-			>
-				<span
-					v-for="tag in visibleTags"
-					:key="String(tag.value)"
-					class="inline-flex items-center gap-1 rounded-full bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary transition-colors border-solid border border-surface-5 hover:brightness-110"
-					@click.stop="removeTag(tag.value)"
-				>
-					{{ tag.label }}
-					<XIcon class="size-3.5 shrink-0 text-secondary" />
-				</span>
-				<Menu
-					v-show="overflowCount > 0"
-					:delay="{ hide: 50, show: 0 }"
-					no-auto-focus
-					:auto-hide="false"
-					@apply-show="popperOverflowTags = [...overflowTags]"
+			<slot
+				v-if="hasCustomInputContent"
+				name="input-content"
+				:is-open="isOpen"
+				:model-value="modelValue"
+				:selected-options="selectedOptions"
+				:clear-all="clearAll"
+				:toggle-open="toggleDropdown"
+				:open-direction="openDirection"
+			/>
+			<template v-else>
+				<div
+					ref="tagsContainerRef"
+					class="flex min-h-8 flex-1 flex-wrap items-center gap-1.5 overflow-hidden"
+					:style="{ maxHeight: `calc(${maxTagRows} * 30px + ${maxTagRows - 1} * 6px)` }"
 				>
 					<span
-						class="inline-flex items-center rounded-full bg-surface-4 px-2 py-1 text-sm font-medium text-secondary border-solid border border-surface-5 select-none cursor-default"
-						@click.stop
+						v-for="tag in visibleTags"
+						:key="String(tag.value)"
+						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary transition-colors hover:brightness-110"
+						@click.stop="removeTag(tag.value)"
 					>
-						+{{ overflowCount }}
+						{{ tag.label }}
+						<XIcon class="size-3.5 shrink-0 text-secondary" />
 					</span>
-					<template #popper>
-						<div class="flex gap-1 flex-wrap max-w-[20rem]" @mousedown.prevent>
-							<span
-								v-for="tag in overflowTags"
-								:key="String(tag.value)"
-								class="inline-flex items-center gap-1 rounded-full bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary border-solid border border-surface-5 cursor-pointer hover:brightness-110"
-								@click.stop="removeTag(tag.value)"
-							>
-								{{ tag.label }}
-								<XIcon class="size-3.5 shrink-0 text-secondary" />
-							</span>
-						</div>
-					</template>
-				</Menu>
-				<span v-if="selectedOptions.length === 0" class="py-1 px-1.5 text-secondary">
-					{{ placeholder }}
-				</span>
-			</div>
-			<div class="ml-2 flex shrink-0 items-center gap-1.5">
-				<button
-					v-if="clearable && modelValue.length > 0"
-					type="button"
-					class="flex items-center justify-center rounded p-0.5 bg-transparent border-none text-secondary hover:text-contrast transition-colors cursor-pointer"
-					aria-label="Clear all"
-					@click.stop="clearAll"
-				>
-					<XIcon class="size-5" />
-				</button>
-				<div class="w-[1px] h-5 bg-surface-5 shrink-0"></div>
-				<ChevronLeftIcon
-					v-if="showChevron"
-					class="size-5 shrink-0 text-secondary transition-transform duration-150"
-					:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
-				/>
-			</div>
+					<Menu
+						v-show="overflowCount > 0"
+						:delay="{ hide: 50, show: 0 }"
+						no-auto-focus
+						:auto-hide="false"
+						@apply-show="popperOverflowTags = [...overflowTags]"
+					>
+						<span
+							class="inline-flex cursor-default select-none items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium text-secondary"
+							@click.stop
+						>
+							+{{ overflowCount }}
+						</span>
+						<template #popper>
+							<div class="flex max-w-[20rem] flex-wrap gap-1" @mousedown.prevent>
+								<span
+									v-for="tag in overflowTags"
+									:key="String(tag.value)"
+									class="inline-flex cursor-pointer items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary hover:brightness-110"
+									@click.stop="removeTag(tag.value)"
+								>
+									{{ tag.label }}
+									<XIcon class="size-3.5 shrink-0 text-secondary" />
+								</span>
+							</div>
+						</template>
+					</Menu>
+					<span v-if="selectedOptions.length === 0" class="px-1.5 py-1 text-secondary">
+						{{ placeholder }}
+					</span>
+				</div>
+				<div class="ml-2 flex shrink-0 items-center gap-1.5">
+					<button
+						v-if="clearable && modelValue.length > 0"
+						type="button"
+						class="flex cursor-pointer items-center justify-center rounded border-none bg-transparent p-0.5 text-secondary transition-colors hover:text-contrast"
+						aria-label="Clear all"
+						@click.stop="clearAll"
+					>
+						<XIcon class="size-5" />
+					</button>
+					<div class="h-5 w-[1px] shrink-0 bg-surface-5"></div>
+					<ChevronLeftIcon
+						v-if="showChevron"
+						class="size-5 shrink-0 text-secondary transition-transform duration-150"
+						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
+					/>
+				</div>
+			</template>
 		</span>
 
 		<Teleport to="#teleports">
@@ -153,12 +166,38 @@
 								</span>
 							</div>
 						</div>
+
+						<div v-if="$slots.top" class="border-0 border-b border-solid border-b-surface-5 py-1.5">
+							<slot
+								name="top"
+								:model-value="modelValue"
+								:selected-options="selectedOptions"
+								:clear-all="clearAll"
+								:is-open="isOpen"
+							></slot>
+						</div>
+
+						<div
+							v-if="shouldShowSelectionActions"
+							class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-6 py-2.5 text-sm"
+						>
+							<span class="font-semibold text-secondary">{{ selectionActionsLabel }}</span>
+							<button
+								type="button"
+								class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
+								@click="clearAll"
+								@keydown.enter.stop
+								@keydown.space.stop
+							>
+								{{ selectionActionsClearLabel }}
+							</button>
+						</div>
 					</div>
 
 					<div
 						v-if="filteredOptions.length > 0"
 						ref="optionsContainerRef"
-						class="flex flex-col gap-2 overflow-y-auto px-3 pt-1.5"
+						class="flex flex-col gap-2 overflow-y-auto px-3 py-1.5"
 						:style="{ maxHeight: `${maxHeight}px` }"
 					>
 						<template v-for="(item, index) in filteredOptions" :key="String(item.value)">
@@ -168,7 +207,7 @@
 								:aria-selected="isSelected(item.value)"
 								:aria-disabled="item.disabled || undefined"
 								:data-focused="focusedIndex === index"
-								class="flex items-center gap-2.5 cursor-pointer p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 focus:bg-surface-5 rounded-xl"
+								class="flex items-center gap-2.5 cursor-pointer p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 rounded-xl"
 								:class="[
 									item.class,
 									{
@@ -214,6 +253,10 @@
 						{{ noResultsMessage }}
 					</div>
 
+					<div v-if="$slots.bottom" @keydown.stop>
+						<slot name="bottom"></slot>
+					</div>
+
 					<slot name="dropdown-footer"></slot>
 				</div>
 			</Transition>
@@ -233,6 +276,7 @@ import {
 	onUnmounted,
 	ref,
 	shallowRef,
+	useSlots,
 	watch,
 } from 'vue'
 
@@ -263,12 +307,19 @@ const props = withDefaults(
 		clearable?: boolean
 		maxHeight?: number
 		triggerClass?: string
+		fitContent?: boolean
+		/** Width for the teleported dropdown; defaults to the trigger width */
+		dropdownWidth?: string | number
+		/** Minimum width for the teleported dropdown */
+		dropdownMinWidth?: string | number
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		noResultsMessage?: string
 		disableSearchFilter?: boolean
 		includeSelectAllOption?: boolean
 		selectAllLabel?: string
+		showSelectionActions?: boolean
+		selectionActionsClearLabel?: string
 		maxTagRows?: number
 	}>(),
 	{
@@ -279,10 +330,13 @@ const props = withDefaults(
 		showChevron: true,
 		clearable: true,
 		maxHeight: DEFAULT_MAX_HEIGHT,
+		fitContent: false,
 		noOptionsMessage: 'No options available',
 		noResultsMessage: 'No results found',
 		includeSelectAllOption: false,
 		selectAllLabel: 'Select all',
+		showSelectionActions: false,
+		selectionActionsClearLabel: 'Deselect all',
 		maxTagRows: 1,
 	},
 )
@@ -294,6 +348,7 @@ const emit = defineEmits<{
 	searchInput: [query: string]
 }>()
 
+const slots = useSlots()
 const isOpen = ref(false)
 const searchQuery = ref('')
 const focusedIndex = ref(-1)
@@ -310,9 +365,11 @@ const dropdownStyle = ref({
 	top: '0px',
 	left: '0px',
 	width: '0px',
+	minWidth: '0px',
 })
 
 const openDirection = ref<'down' | 'up'>('down')
+const hasCustomInputContent = computed(() => Boolean(slots['input-content']))
 
 const selectedOptions = computed(() => {
 	return props.options.filter((opt) => props.modelValue.includes(opt.value))
@@ -361,6 +418,12 @@ const filteredOptions = computed(() => {
 
 const isNoOptionsState = computed(() => props.options.length === 0 && !searchQuery.value)
 const shouldShowSelectAll = computed(() => props.includeSelectAllOption && props.options.length > 0)
+const shouldShowSelectionActions = computed(
+	() => props.showSelectionActions && props.modelValue.length > 0,
+)
+const selectionActionsLabel = computed(() => {
+	return props.modelValue.length === 1 ? '1 selected' : `${props.modelValue.length} selected`
+})
 
 function isSelected(value: T) {
 	return props.modelValue.includes(value)
@@ -387,6 +450,14 @@ function clearAll() {
 	emit('update:modelValue', [])
 }
 
+function toggleDropdown() {
+	if (isOpen.value) {
+		closeDropdown()
+	} else {
+		openDropdown()
+	}
+}
+
 function toggleSelectAll() {
 	if (isAllSelected.value) {
 		emit('update:modelValue', [])
@@ -460,12 +531,35 @@ function calculateHorizontalPosition(
 	return left
 }
 
+function resolveDropdownWidth(triggerWidth: number): string {
+	if (props.dropdownWidth === undefined) return `${triggerWidth}px`
+	if (typeof props.dropdownWidth === 'number') return `${props.dropdownWidth}px`
+	return props.dropdownWidth
+}
+
+function resolveCssSize(size: string | number | undefined): string | undefined {
+	if (size === undefined) return undefined
+	if (typeof size === 'number') return `${size}px`
+	return size
+}
+
 async function updateDropdownPosition() {
 	if (!triggerRef.value || !dropdownRef.value) return
 
 	await nextTick()
 
 	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const width = resolveDropdownWidth(triggerRect.width)
+	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
+
+	dropdownStyle.value = {
+		...dropdownStyle.value,
+		width,
+		minWidth,
+	}
+
+	await nextTick()
+
 	const dropdownRect = dropdownRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
 	const viewportWidth = window.innerWidth
@@ -477,7 +571,8 @@ async function updateDropdownPosition() {
 	dropdownStyle.value = {
 		top: `${top}px`,
 		left: `${left}px`,
-		width: `${triggerRect.width}px`,
+		width,
+		minWidth,
 	}
 
 	openDirection.value = direction
@@ -699,6 +794,9 @@ watch(
 	() => props.modelValue,
 	() => {
 		calculateVisibleTags()
+		if (isOpen.value) {
+			updateDropdownPosition()
+		}
 	},
 	{ deep: true },
 )

packages/ui/src/components/base/index.ts

@@ -23,6 +23,8 @@ export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
 export { default as DropArea } from './DropArea.vue'
+export type { DropdownFilterBarCategory, DropdownFilterBarOption } from './DropdownFilterBar.vue'
+export { default as DropdownFilterBar } from './DropdownFilterBar.vue'
 export { default as DropdownSelect } from './DropdownSelect.vue'
 export { default as DropzoneFileInput } from './DropzoneFileInput.vue'
 export { default as EmptyState } from './EmptyState.vue'

packages/ui/src/stories/base/DropdownFilterBar.stories.ts

@@ -0,0 +1,240 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import DropdownFilterBar from '../../components/base/DropdownFilterBar.vue'
+
+const meta = {
+	title: 'Base/DropdownFilterBar',
+	component: DropdownFilterBar,
+} satisfies Meta<typeof DropdownFilterBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultCategories = [
+	{
+		key: 'status',
+		label: 'Status',
+		options: [
+			{ value: 'active', label: 'Active' },
+			{ value: 'archived', label: 'Archived' },
+			{ value: 'draft', label: 'Draft' },
+		],
+	},
+	{
+		key: 'type',
+		label: 'Type',
+		options: [
+			{ value: 'mod', label: 'Mod' },
+			{ value: 'plugin', label: 'Plugin' },
+			{ value: 'resourcepack', label: 'Resource Pack' },
+			{ value: 'modpack', label: 'Modpack' },
+		],
+	},
+]
+
+const searchableCategories = [
+	{
+		key: 'country',
+		label: 'Country',
+		searchable: true,
+		searchPlaceholder: 'Search countries...',
+		options: [
+			{ value: 'US', label: 'United States', searchTerms: ['USA', 'America'] },
+			{ value: 'CA', label: 'Canada' },
+			{ value: 'DE', label: 'Germany', searchTerms: ['Deutschland'] },
+			{ value: 'JP', label: 'Japan' },
+			{ value: 'BR', label: 'Brazil' },
+			{ value: 'AU', label: 'Australia' },
+		],
+	},
+	{
+		key: 'version',
+		label: 'Version',
+		searchable: true,
+		searchPlaceholder: 'Search versions...',
+		submenuClass: 'w-[360px]',
+		options: [
+			{ value: '1.21.5', label: '1.21.5' },
+			{ value: '1.21.4', label: '1.21.4' },
+			{ value: '1.20.1', label: '1.20.1' },
+			{ value: '1.19.2', label: '1.19.2' },
+		],
+	},
+]
+
+export const Default: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({})
+			return { categories: defaultCategories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories" />
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {},
+		categories: defaultCategories,
+	},
+}
+
+export const WithAppliedFilters: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({
+				status: ['active'],
+				type: ['mod', 'plugin'],
+			})
+			return { categories: defaultCategories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories" />
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {
+			status: ['active'],
+			type: ['mod', 'plugin'],
+		},
+		categories: defaultCategories,
+	},
+}
+
+export const WithFilterIcon: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({
+				status: ['draft'],
+			})
+			return { categories: defaultCategories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories" use-filter-icon />
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {
+			status: ['draft'],
+		},
+		categories: defaultCategories,
+		useFilterIcon: true,
+	},
+}
+
+export const SearchableCategories: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({})
+			return { categories: searchableCategories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories" />
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {},
+		categories: searchableCategories,
+	},
+}
+
+export const CustomControls: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({})
+			const releaseOnly = ref(true)
+			const categories = [
+				{
+					key: 'version',
+					label: 'Version',
+					searchable: true,
+					searchPlaceholder: 'Search versions...',
+					submenuClass: 'w-[360px]',
+					options: [
+						{ value: '1.21.5', label: '1.21.5' },
+						{ value: '1.21.4', label: '1.21.4' },
+						{ value: '1.20.1', label: '1.20.1' },
+						{ value: '25w15a', label: '25w15a' },
+					],
+				},
+			]
+			return { categories, releaseOnly, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories">
+					<template #search-actions>
+						<label class="ml-3 flex h-10 items-center gap-2 text-sm font-semibold text-secondary">
+							<input v-model="releaseOnly" type="checkbox" />
+							Release
+						</label>
+					</template>
+					<template #category-footer="{ setSelectedValues }">
+						<div class="border-0 border-t border-solid border-surface-5 px-6 py-2.5">
+							<button
+								type="button"
+								class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
+								@click="setSelectedValues(['1.21.5', '1.21.4'])"
+							>
+								Select recent versions
+							</button>
+						</div>
+					</template>
+				</DropdownFilterBar>
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {},
+		categories: searchableCategories,
+	},
+}
+
+export const EmptyCategory: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({})
+			const categories = [
+				{
+					key: 'empty',
+					label: 'Empty',
+					searchable: true,
+					searchPlaceholder: 'Search empty options...',
+					options: [],
+				},
+			]
+			return { categories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownFilterBar v-model="selected" :categories="categories" />
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {},
+		categories: [
+			{
+				key: 'empty',
+				label: 'Empty',
+				searchable: true,
+				searchPlaceholder: 'Search empty options...',
+				options: [],
+			},
+		],
+	},
+}

packages/ui/src/stories/base/MultiSelect.stories.ts

@@ -1,5 +1,6 @@
+import { CheckIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import MultiSelect from '../../components/base/MultiSelect.vue'
 
@@ -61,6 +62,89 @@ export const WithSelectAll: Story = {
 	},
 }
 
+export const WithSelectionActions: Story = {
+	args: {
+		...Default.args,
+		searchable: true,
+		showSelectionActions: true,
+		searchPlaceholder: 'Search versions',
+	},
+}
+
+export const WithTopSlot: Story = {
+	args: {
+		...Default.args,
+		modelValue: [],
+		searchable: true,
+		showSelectionActions: true,
+		searchPlaceholder: 'Search languages',
+		placeholder: 'All languages',
+	},
+	render: (args) => ({
+		components: { CheckIcon, MultiSelect },
+		setup() {
+			const selected = ref(args.modelValue)
+			const isAllLanguagesSelected = computed(() => selected.value.length === 0)
+			const selectAllLanguages = () => {
+				selected.value = []
+			}
+			return { args, isAllLanguagesSelected, selectAllLanguages, selected }
+		},
+		template: /*html*/ `
+			<div style="width: 400px;">
+				<MultiSelect v-bind="args" v-model="selected">
+					<template #top>
+						<div class="px-3">
+							<button
+								type="button"
+								class="flex w-full cursor-pointer items-center gap-2.5 rounded-xl border-0 bg-transparent p-3 text-left text-contrast shadow-none transition-colors duration-150 hover:bg-surface-5 focus:bg-surface-5"
+								:aria-selected="isAllLanguagesSelected"
+								role="option"
+								@click="selectAllLanguages"
+								@keydown.enter.stop
+								@keydown.space.stop
+							>
+								<span
+									class="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
+									:class="
+										isAllLanguagesSelected
+											? 'border-button-border bg-brand text-brand-inverted'
+											: 'border-surface-5 bg-surface-2'
+									"
+								>
+									<CheckIcon v-if="isAllLanguagesSelected" aria-hidden="true" stroke-width="3" />
+								</span>
+								<span class="font-semibold leading-tight text-primary">All languages</span>
+							</button>
+						</div>
+					</template>
+				</MultiSelect>
+			</div>
+		`,
+	}),
+}
+
+export const DropdownMinWidth: Story = {
+	args: {
+		...Default.args,
+		modelValue: ['en'],
+		dropdownMinWidth: 320,
+		placeholder: 'Languages',
+	},
+	render: (args) => ({
+		components: { MultiSelect },
+		setup() {
+			const selected = ref(args.modelValue)
+			return { args, selected }
+		},
+		template: /*html*/ `
+			<div style="width: 11rem;">
+				<MultiSelect v-bind="args" v-model="selected" />
+			</div>
+		`,
+	}),
+}
+
 export const ManySelected: Story = {
 	args: {
 		...Default.args,
@@ -77,6 +161,94 @@ export const TwoTagRows: Story = {
 	},
 }
 
+export const CustomInputContent: Story = {
+	args: {
+		...Default.args,
+		modelValue: ['en', 'es'],
+		fitContent: true,
+		showChevron: false,
+		clearable: false,
+		triggerClass:
+			'h-10 max-w-[16rem] border border-solid border-surface-5 bg-surface-4 px-3 py-1.5 hover:bg-surface-5 hover:brightness-100 active:brightness-100',
+	},
+	render: (args) => ({
+		components: { MultiSelect },
+		setup() {
+			const selected = ref(args.modelValue)
+			const selectedLabel = () => {
+				if (selected.value.length === 0) return 'All languages'
+				if (selected.value.length === 1) {
+					const option = args.options.find((item) => item.value === selected.value[0])
+					return option?.label ?? '1 selected'
+				}
+				return `${selected.value.length} selected`
+			}
+			return { args, selected, selectedLabel }
+		},
+		template: /*html*/ `
+			<div style="width: 400px;">
+				<MultiSelect v-bind="args" v-model="selected">
+					<template #input-content="{ isOpen }">
+						<div class="flex min-w-0 items-center gap-2">
+							<span class="truncate">
+								<span class="font-medium">Languages:</span>
+								<span class="ml-1 font-semibold text-contrast">{{ selectedLabel() }}</span>
+							</span>
+							<span
+								class="text-secondary transition-transform duration-150"
+								:style="{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
+							>
+								⌄
+							</span>
+							<button
+								type="button"
+								class="-mr-1 inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
+								@click.stop="selected = []"
+							>
+								×
+							</button>
+						</div>
+					</template>
+				</MultiSelect>
+			</div>
+		`,
+	}),
+}
+
+export const WithBottomSlot: Story = {
+	args: {
+		...Default.args,
+		modelValue: ['en', 'es'],
+		searchable: true,
+		includeSelectAllOption: true,
+	},
+	render: (args) => ({
+		components: { MultiSelect },
+		setup() {
+			const selected = ref(args.modelValue)
+			const minimum = ref('')
+			return { args, selected, minimum }
+		},
+		template: /*html*/ `
+			<div style="width: 400px;">
+				<MultiSelect v-bind="args" v-model="selected">
+					<template #bottom>
+						<div style="display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--color-surface-5); padding: 0.75rem;">
+							<span style="font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);">Projects above</span>
+							<input
+								v-model="minimum"
+								type="text"
+								style="height: 2rem; width: 5rem; border: 1px solid var(--color-surface-5); border-radius: 0.5rem; background: var(--color-surface-3); color: var(--color-text-primary); text-align: center; font-weight: 600;"
+							/>
+							<span style="font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);">downloads</span>
+						</div>
+					</template>
+				</MultiSelect>
+			</div>
+		`,
+	}),
+}
+
 export const NoOptions: Story = {
 	args: {
 		...Default.args,