From 6fb7e383c4e44a894599ea8b504964f28f8ea2b1 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 26 Oct 2026 15:06:21 +0000
Subject: [PATCH] feat(ui): ui changes in prep for server play

---
 packages/assets/generated-icons.ts            |   6 +
 packages/assets/icons/anvil.svg               |  19 +++
 packages/assets/icons/volume-2.svg            |  17 +++
 packages/assets/icons/volume-x.svg            |  17 +++
 .../ui/src/components/base/IntlFormatted.vue  |  14 +-
 .../src/components/base/MultiStageModal.vue   |  89 +++++++++++--
 packages/ui/src/components/base/NavTabs.vue   |  13 +-
 packages/ui/src/components/base/Toggle.vue    |  30 +++--
 .../ui/src/components/base/inputs/Input.vue   |  75 ++++++-----
 packages/ui/src/components/modal/NewModal.vue | 121 ++++++++++++++++--
 .../ui/src/components/modal/TabbedModal.vue   |  19 ++-
 .../ui/src/stories/base/Toggle.stories.ts     |  16 ++-
 12 files changed, 361 insertions(+), 75 deletions(-)
 create mode 100644 packages/assets/icons/anvil.svg
 create mode 100644 packages/assets/icons/volume-2.svg
 create mode 100644 packages/assets/icons/volume-x.svg

diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 24d0569cfb4..ccba8797b8b 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -7,6 +7,7 @@ export type IconComponent = FunctionalComponent<SVGAttributes>
 
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
+import _AnvilIcon from './icons/anvil.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
 import _ArrowBigRightDashIcon from './icons/arrow-big-right-dash.svg?component'
 import _ArrowBigUpIcon from './icons/arrow-big-up.svg?component'
@@ -479,6 +480,8 @@ import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
 import _VideoIcon from './icons/video.svg?component'
+import _Volume2Icon from './icons/volume-2.svg?component'
+import _VolumeXIcon from './icons/volume-x.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
 import _WindowIcon from './icons/window.svg?component'
 import _WorldIcon from './icons/world.svg?component'
@@ -491,6 +494,7 @@ import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
+export const AnvilIcon = _AnvilIcon
 export const ArchiveIcon = _ArchiveIcon
 export const ArrowBigRightDashIcon = _ArrowBigRightDashIcon
 export const ArrowBigUpIcon = _ArrowBigUpIcon
@@ -963,6 +967,8 @@ export const UserXIcon = _UserXIcon
 export const UsersIcon = _UsersIcon
 export const VersionIcon = _VersionIcon
 export const VideoIcon = _VideoIcon
+export const Volume2Icon = _Volume2Icon
+export const VolumeXIcon = _VolumeXIcon
 export const WikiIcon = _WikiIcon
 export const WindowIcon = _WindowIcon
 export const WorldIcon = _WorldIcon
diff --git a/packages/assets/icons/anvil.svg b/packages/assets/icons/anvil.svg
new file mode 100644
index 00000000000..1cb352b8ff1
--- /dev/null
+++ b/packages/assets/icons/anvil.svg
@@ -0,0 +1,19 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-anvil"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M7 10H6a4 4 0 0 1-4-4 1 1 0 0 1 1-1h4" />
+  <path d="M7 5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1 7 7 0 0 1-7 7H8a1 1 0 0 1-1-1z" />
+  <path d="M9 12v5" />
+  <path d="M15 12v5" />
+  <path d="M5 20a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3 1 1 0 0 1-1 1H6a1 1 0 0 1-1-1" />
+</svg>
diff --git a/packages/assets/icons/volume-2.svg b/packages/assets/icons/volume-2.svg
new file mode 100644
index 00000000000..0f92ec06208
--- /dev/null
+++ b/packages/assets/icons/volume-2.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-volume-2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+  <path d="M16 9a5 5 0 0 1 0 6" />
+  <path d="M19.364 18.364a9 9 0 0 0 0-12.728" />
+</svg>
diff --git a/packages/assets/icons/volume-x.svg b/packages/assets/icons/volume-x.svg
new file mode 100644
index 00000000000..2d0c706300d
--- /dev/null
+++ b/packages/assets/icons/volume-x.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-volume-x"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+  <line x1="22" x2="16" y1="9" y2="15" />
+  <line x1="16" x2="22" y1="9" y2="15" />
+</svg>
diff --git a/packages/ui/src/components/base/IntlFormatted.vue b/packages/ui/src/components/base/IntlFormatted.vue
index 7edebb2064c..a6a944bcb27 100644
--- a/packages/ui/src/components/base/IntlFormatted.vue
+++ b/packages/ui/src/components/base/IntlFormatted.vue
@@ -55,7 +55,9 @@ const formattedParts = computed(() => {
 
 	for (const slotName of slotNames) {
 		const normalizedName = slotName.startsWith('~') ? slotName.slice(1) : slotName
-		slotHandlers[normalizedName] = (chunks) => {
+		let handlerName = `intlSlot${Object.keys(slotHandlers).length}`
+		while (Object.prototype.hasOwnProperty.call(props.values ?? {}, handlerName)) handlerName += '_'
+		slotHandlers[handlerName] = (chunks) => {
 			const slot = slots[slotName]
 			if (slot) {
 				const nodes = slot({
@@ -69,10 +71,12 @@ const formattedParts = computed(() => {
 			return markRaw(chunks) as VNode[]
 		}
 
-		msg = msg.replace(
-			new RegExp(`\\{${normalizedName}\\}`, 'g'),
-			`<${normalizedName}></${normalizedName}>`,
-		)
+		msg = msg
+			.replaceAll(`<${normalizedName}>`, `<${handlerName}>`)
+			.replaceAll(`</${normalizedName}>`, `</${handlerName}>`)
+		if (!Object.prototype.hasOwnProperty.call(props.values ?? {}, normalizedName)) {
+			msg = msg.replaceAll(`{${normalizedName}}`, `<${handlerName}></${handlerName}>`)
+		}
 	}
 
 	try {
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index d54ee59e696..69659e5863d 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -1,14 +1,20 @@
 <template>
 	<NewModal
 		ref="modal"
+		:header="resolvedTitle"
 		:scrollable="true"
 		max-content-height="72vh"
 		:on-hide="onModalHide"
+		:on-after-hide="onModalAfterHide"
+		:on-after-show="onModalAfterShow"
+		:before-hide="handleBeforeHide"
 		:closable="true"
 		:close-on-click-outside="closeOnClickOutside"
 		:width="resolvedMaxWidth"
 		:fade="fade"
-		:disable-close="resolveCtxFn(currentStage.disableClose, context)"
+		:hide-header="resolveCtxFn(currentStage.hideHeader, context)"
+		:merge-header="resolveCtxFn(currentStage.mergeHeader, context)"
+		:disable-close="disableClose || resolveCtxFn(currentStage.disableClose, context)"
 	>
 		<template #title>
 			<div
@@ -65,12 +71,13 @@
 			class="w-full h-1 appearance-none border-none absolute top-0 left-0"
 		></progress>
 
-		<component :is="currentStage?.stageContent" />
+		<component :is="currentStage?.stageContent" :key="currentStage?.id" />
 
 		<template #actions>
 			<div
+				:key="currentStage?.id"
 				class="flex flex-col justify-end gap-2 sm:flex-row"
-				:class="leftButtonConfig || rightButtonConfig ? 'mt-4' : ''"
+				:class="leftButtonConfig || rightButtonConfig ? actionsTopMarginClass : ''"
 			>
 				<Button
 					v-if="leftButtonConfig"
@@ -92,6 +99,7 @@
 					:color="rightButtonConfig.color === 'standard' ? undefined : rightButtonConfig.color"
 					:class="rightButtonConfig.buttonClass"
 					:disabled="rightButtonConfig.disabled || rightButtonConfig.loading"
+					:aria-disabled="rightButtonConfig.ariaDisabled || undefined"
 					@click="rightButtonConfig.onClick"
 				>
 					<SpinnerIcon
@@ -122,7 +130,7 @@
 <script lang="ts">
 import { ChevronRightIcon, SpinnerIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { ButtonColor } from '#ui/components/base/buttons'
 import { Button } from '#ui/components/base/buttons'
@@ -135,6 +143,7 @@ export interface StageButtonConfig {
 	iconPosition?: 'before' | 'after'
 	color?: ButtonColor | 'standard'
 	disabled?: boolean
+	ariaDisabled?: boolean
 	loading?: boolean
 	tooltip?: string
 	iconClass?: string | null
@@ -154,10 +163,14 @@ export interface StageConfigInput<T> {
 	nonProgressStage?: MaybeCtxFn<T, boolean>
 	cannotNavigateForward?: MaybeCtxFn<T, boolean>
 	disableClose?: MaybeCtxFn<T, boolean>
+	hideHeader?: MaybeCtxFn<T, boolean>
+	mergeHeader?: MaybeCtxFn<T, boolean>
+	beforeHide?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	/** Max width for the modal content and header defined in px (e.g., '460px', '600px'). Defaults to '460px'. */
 	maxWidth?: MaybeCtxFn<T, string>
+	actionsTopMargin?: MaybeCtxFn<T, 'sm' | 'md'>
 }
 
 export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
@@ -175,14 +188,24 @@ const props = withDefaults(
 		fade?: 'standard' | 'warning' | 'danger'
 		disableProgress?: boolean
 		closeOnClickOutside?: boolean
+		animateStages?: boolean
+		disableClose?: boolean
 	}>(),
 	{
 		closeOnClickOutside: true,
+		animateStages: false,
+		disableClose: false,
 	},
 )
 
 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
 const currentStageIndex = ref<number>(0)
+const displayedStageIndex = ref(0)
+const frozenButtons = shallowRef<{
+	left: StageButtonConfig | null
+	right: StageButtonConfig | null
+} | null>(null)
+let transitioning = false
 
 function show() {
 	modal.value?.show()
@@ -238,7 +261,16 @@ const prevStage = () => {
 	}
 }
 
-const currentStage = computed(() => props.stages[currentStageIndex.value])
+const currentStage = computed(() => props.stages[displayedStageIndex.value])
+const actionsTopMarginClass = computed(() => {
+	const margin = currentStage.value?.actionsTopMargin
+	return margin && resolveCtxFn(margin, props.context) === 'sm' ? 'mt-2' : 'mt-4'
+})
+
+function handleBeforeHide(): boolean {
+	const stage = currentStage.value
+	return stage?.beforeHide ? resolveCtxFn(stage.beforeHide, props.context) : true
+}
 
 const resolvedTitle = computed(() => {
 	const stage = currentStage.value
@@ -247,12 +279,14 @@ const resolvedTitle = computed(() => {
 })
 
 const leftButtonConfig = computed(() => {
+	if (frozenButtons.value) return frozenButtons.value.left
 	const stage = currentStage.value
 	if (!stage) return null
 	return resolveCtxFn(stage.leftButtonConfig, props.context)
 })
 
 const rightButtonConfig = computed(() => {
+	if (frozenButtons.value) return frozenButtons.value.right
 	const stage = currentStage.value
 	if (!stage) return null
 	return resolveCtxFn(stage.rightButtonConfig, props.context)
@@ -278,7 +312,7 @@ const progressValue = computed(() => {
 	}
 
 	const completedCount = props.stages
-		.slice(0, currentStageIndex.value + 1)
+		.slice(0, displayedStageIndex.value + 1)
 		.filter(isProgressStage).length
 	const totalCount = props.stages.filter(isProgressStage).length
 
@@ -374,18 +408,53 @@ watch([breadcrumbStages, currentStageIndex], () => nextTick(() => updateScrollSh
 	immediate: true,
 })
 
-watch(currentStageIndex, () => {
-	scrollToCurrentBreadcrumb()
-})
+watch(
+	currentStageIndex,
+	async () => {
+		if (transitioning) return
+		transitioning = true
+		try {
+			do {
+				const nextIndex = currentStageIndex.value
+				frozenButtons.value = {
+					left: leftButtonConfig.value,
+					right: rightButtonConfig.value,
+				}
+				const displayStage = () => {
+					displayedStageIndex.value = nextIndex
+					frozenButtons.value = null
+				}
+				if (props.animateStages && modal.value) {
+					await modal.value.transitionContent(displayStage)
+				} else {
+					displayStage()
+				}
+			} while (displayedStageIndex.value !== currentStageIndex.value)
+		} finally {
+			frozenButtons.value = null
+			transitioning = false
+		}
+		scrollToCurrentBreadcrumb()
+	},
+	{ flush: 'sync' },
+)
 
 const emit = defineEmits<{
-	(e: 'refresh-data' | 'hide'): void
+	(e: 'refresh-data' | 'hide' | 'after-hide' | 'after-show'): void
 }>()
 
 function onModalHide() {
 	emit('hide')
 }
 
+function onModalAfterHide() {
+	emit('after-hide')
+}
+
+function onModalAfterShow() {
+	emit('after-show')
+}
+
 defineExpose({
 	show,
 	hide,
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 1958a4498b8..a67e56a5a12 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		v-if="filteredLinks.length > 1"
+		v-if="filteredLinks.length > (showSingleTab ? 0 : 1)"
 		:class="pageNav ? '-mx-6 -mt-2 mb-1 overflow-x-auto px-6 py-2' : 'contents'"
 		v-bind="pageNav ? $attrs : {}"
 	>
@@ -100,12 +100,15 @@ const props = withDefaults(
 		mode?: 'navigation' | 'local'
 		activeIndex?: number
 		pageNav?: boolean
+		/** Keeps the tabs rendered when only one is shown, so the layout doesn't shift as tabs are filtered. */
+		showSingleTab?: boolean
 	}>(),
 	{
 		mode: 'navigation',
 		query: undefined,
 		activeIndex: undefined,
 		pageNav: false,
+		showSingleTab: false,
 	},
 )
 
@@ -182,6 +185,8 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 		}
 	}
 
+	let subpageIndex = -1
+
 	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
 		const link = filteredLinks.value[i]
 		const decodedPath = decodeURIComponent(route.path)
@@ -204,12 +209,12 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 				(decodedPath.length === decodedHref.length || decodedPath[decodedHref.length] === '/')) ||
 			link.subpages?.some((subpage) => decodedPath.includes(subpage))
 
-		if (isSubpageMatch) {
-			return { index: i, isSubpage: true }
+		if (isSubpageMatch && subpageIndex === -1) {
+			subpageIndex = i
 		}
 	}
 
-	return { index: -1, isSubpage: false }
+	return { index: subpageIndex, isSubpage: subpageIndex !== -1 }
 }
 
 function getTabElement(index: number): HTMLElement | null {
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index 65afe3287b4..884f83b1bf0 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -2,13 +2,13 @@
 	<button
 		:id="id"
 		type="button"
-		role="switch"
-		:aria-checked="modelValue"
+		:role="indeterminate ? 'checkbox' : 'switch'"
+		:aria-checked="indeterminate ? 'mixed' : modelValue"
 		:disabled="disabled"
 		class="group inline-flex shrink-0 touch-manipulation items-center rounded-full m-0 p-1 transition-[background-color,border-color,opacity] duration-200 cursor-pointer border border-solid border-surface-5"
 		:class="[
 			small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
-			modelValue ? 'bg-brand' : 'bg-button-bg',
+			indeterminate || modelValue ? 'bg-brand' : 'bg-button-bg',
 			disabled ? 'opacity-50 cursor-not-allowed' : '',
 		]"
 		@click="toggle"
@@ -16,17 +16,24 @@
 		<span
 			class="rounded-full transition-[transform,background-color,width,height,margin] duration-200"
 			:class="[
-				small ? 'w-3 h-3' : 'w-4 h-4',
-				modelValue
+				indeterminate
 					? small
-						? 'translate-x-[20px] bg-black/90'
-						: 'translate-x-[24px] bg-black/90'
-					: 'bg-secondary',
+						? 'h-0.5 w-2.5 translate-x-[11px] bg-black/90'
+						: 'h-0.5 w-3 translate-x-[14px] bg-black/90'
+					: modelValue
+						? small
+							? 'h-3 w-3 translate-x-[20px] bg-black/90'
+							: 'h-4 w-4 translate-x-[24px] bg-black/90'
+						: small
+							? 'h-3 w-3 bg-gray'
+							: 'h-4 w-4 bg-gray',
 				disabled
 					? ''
-					: small
-						? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
-						: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
+					: indeterminate
+						? 'group-hover:scale-x-110 group-active:scale-x-75'
+						: small
+							? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
+							: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
 			]"
 		/>
 	</button>
@@ -37,6 +44,7 @@ const props = defineProps<{
 	id?: string
 	disabled?: boolean
 	small?: boolean
+	indeterminate?: boolean
 }>()
 
 const modelValue = defineModel<boolean>()
diff --git a/packages/ui/src/components/base/inputs/Input.vue b/packages/ui/src/components/base/inputs/Input.vue
index ab805a9aa0f..8e9d669e15d 100644
--- a/packages/ui/src/components/base/inputs/Input.vue
+++ b/packages/ui/src/components/base/inputs/Input.vue
@@ -28,35 +28,52 @@
 					<slot name="prefix" />
 				</span>
 
-				<input
-					v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
-					:id="id"
-					ref="inputRef"
-					:type="type"
-					:value="model"
-					:placeholder="placeholder"
-					:disabled="disabled"
-					:readonly="readonly"
-					:name="name"
-					:autocomplete="autocomplete"
-					:autocorrect="autocorrect"
-					:autocapitalize="autocapitalize"
-					:spellcheck="spellcheck"
-					:inputmode="inputmode"
-					:maxlength="maxlength"
-					:min="min"
-					:max="max"
-					:step="step"
-					:aria-invalid="error || undefined"
-					class="min-w-0 w-full flex-1 appearance-none !min-h-0 !border-0 !bg-transparent !p-0 font-medium text-primary !shadow-none !outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
-					:class="[
-						inputClass,
-						controlClass,
-						size === 'small' ? 'text-sm' : 'text-base',
-						disabled ? 'cursor-not-allowed' : '',
-					]"
-					@input="onInput"
-				/>
+				<div :class="$slots.suffix ? 'grid min-w-0' : 'contents'">
+					<span
+						v-if="$slots.suffix"
+						aria-hidden="true"
+						class="pointer-events-none invisible col-start-1 row-start-1 whitespace-pre font-medium"
+						:class="[size === 'small' ? 'text-sm' : 'text-base', inputClass, controlClass]"
+						>{{ hasValue ? model : placeholder || ' ' }}</span
+					>
+					<input
+						v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
+						:id="id"
+						ref="inputRef"
+						:type="type"
+						:value="model"
+						:placeholder="placeholder"
+						:disabled="disabled"
+						:readonly="readonly"
+						:name="name"
+						:autocomplete="autocomplete"
+						:autocorrect="autocorrect"
+						:autocapitalize="autocapitalize"
+						:spellcheck="spellcheck"
+						:inputmode="inputmode"
+						:maxlength="maxlength"
+						:min="min"
+						:max="max"
+						:step="step"
+						:aria-invalid="error || undefined"
+						class="min-w-0 appearance-none !min-h-0 !border-0 !bg-transparent !p-0 font-medium text-primary !shadow-none !outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
+						:class="[
+							$slots.suffix ? 'col-start-1 row-start-1 w-0 !min-w-full' : 'w-full flex-1',
+							inputClass,
+							controlClass,
+							size === 'small' ? 'text-sm' : 'text-base',
+							disabled ? 'cursor-not-allowed' : '',
+						]"
+						@input="onInput"
+					/>
+				</div>
+				<span
+					v-if="$slots.suffix"
+					class="shrink-0 font-medium text-secondary opacity-60 transition-colors group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+					:class="size === 'small' ? 'text-sm' : 'text-base'"
+				>
+					<slot name="suffix" />
+				</span>
 			</div>
 		</div>
 
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index e09118da127..8802d640706 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -40,8 +40,11 @@
 					role="dialog"
 					aria-modal="true"
 					tabindex="-1"
-					:aria-labelledby="headerId"
+					:aria-labelledby="hideHeader ? undefined : headerId"
+					:aria-label="hideHeader ? header : undefined"
 					class="modal-body flex flex-col bg-bg-raised rounded-2xl border border-solid border-surface-5 outline-none"
+					:class="{ 'changing-stage': contentTransitioning }"
+					:inert="contentTransitioning"
 					v-bind="$attrs"
 				>
 					<div
@@ -70,16 +73,17 @@
 						</div>
 					</div>
 
-					<IconButton
-						v-if="props.mergeHeader && closable"
-						v-tooltip="closeLabel"
-						:label="closeLabel"
-						class="absolute top-4 right-4 z-10"
-						:disabled="disableClose"
-						@click="hide"
-					>
-						<XIcon aria-hidden="true" />
-					</IconButton>
+					<div v-if="props.mergeHeader && closable" class="absolute top-4 right-4 z-10">
+						<IconButton
+							v-tooltip="closeLabel"
+							:label="closeLabel"
+							type="quiet"
+							:disabled="disableClose"
+							@click="hide"
+						>
+							<XIcon aria-hidden="true" />
+						</IconButton>
+					</div>
 
 					<div v-if="scrollable" class="relative flex-1 min-h-0 flex flex-col">
 						<Transition
@@ -101,7 +105,8 @@
 							data-modal-content
 							:class="[
 								'flex-1 min-h-0 overflow-y-auto',
-								props.noPadding ? '' : 'p-6 !pb-1 sm:pb-6',
+								props.noPadding ? '' : 'p-6',
+								{ '!pb-0': $slots.actions && !actionsDivider && !props.noPadding },
 								{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
 							]"
 							:style="{ maxHeight: maxContentHeight }"
@@ -134,6 +139,7 @@
 						:class="[
 							'min-h-0',
 							props.noPadding ? '' : 'overflow-y-auto p-6',
+							{ '!pb-0': $slots.actions && !actionsDivider && !props.noPadding },
 							{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
 						]"
 					>
@@ -197,6 +203,7 @@ const props = withDefaults(
 		onHide?: () => void
 		onAfterHide?: () => void
 		onShow?: () => void
+		onAfterShow?: () => void
 		beforeHide?: () => boolean
 		initialFocus?: () => HTMLElement | null
 		mergeHeader?: boolean
@@ -227,6 +234,7 @@ const props = withDefaults(
 		onHide: () => {},
 		onAfterHide: () => {},
 		onShow: () => {},
+		onAfterShow: () => {},
 		beforeHide: undefined,
 		initialFocus: undefined,
 		mergeHeader: false,
@@ -301,6 +309,9 @@ const open = ref(false)
 const visible = ref(false)
 const stackDepth = ref(0)
 const modalBodyRef = ref<HTMLElement | null>(null)
+const contentTransitioning = ref(false)
+let contentTransitionRun = 0
+let contentAnimations: Animation[] = []
 const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
 let previousHeight: number | undefined
 let resizeAnimation: Animation | undefined
@@ -318,7 +329,7 @@ watch([modalBodyRef, visible, () => props.animateResize, prefersReducedMotion],
 })
 
 useResizeObserver(modalBodyRef, ([entry]) => {
-	if (!entry || resizeAnimation) return
+	if (!entry || resizeAnimation || contentTransitioning.value) return
 
 	const height = entry.borderBoxSize[0]?.blockSize ?? modalBodyRef.value?.offsetHeight
 	if (height === undefined) return
@@ -450,7 +461,78 @@ function nextRenderedModalDepth(): number {
 		}, 0)
 }
 
+function cancelContentTransition() {
+	contentTransitionRun++
+	for (const animation of contentAnimations) animation.cancel()
+	contentAnimations = []
+	contentTransitioning.value = false
+}
+
+async function transitionContent(update: () => void) {
+	const body = modalBodyRef.value
+	if (
+		!body ||
+		!visible.value ||
+		getModalWindow().matchMedia('(prefers-reduced-motion: reduce)').matches
+	) {
+		update()
+		await nextTick()
+		checkScrollState()
+		return
+	}
+
+	const run = ++contentTransitionRun
+	const hadFocus = isFocusInsideModal()
+	resetResizeAnimation()
+	const before = { width: getComputedStyle(body).width, height: getComputedStyle(body).height }
+	contentTransitioning.value = true
+	const outgoing = Array.from(body.children, (element) =>
+		element.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: 200,
+			easing: 'ease-in',
+			fill: 'both',
+		}),
+	)
+	contentAnimations = outgoing
+	await Promise.all(outgoing.map((animation) => animation.finished.catch(() => {})))
+	if (run !== contentTransitionRun) return
+
+	update()
+	await nextTick()
+	if (run !== contentTransitionRun) return
+	for (const animation of outgoing) animation.cancel()
+	const after = { width: getComputedStyle(body).width, height: getComputedStyle(body).height }
+	const timing: KeyframeAnimationOptions = {
+		duration: 200,
+		easing: 'cubic-bezier(0.2, 0, 0, 1)',
+		fill: 'both',
+	}
+	const incoming = Array.from(body.children, (element) => {
+		const style = getComputedStyle(element)
+		const layout = { width: style.width, height: style.height, flex: '0 0 auto' }
+		return element.animate(
+			[
+				{ ...layout, opacity: 0 },
+				{ ...layout, opacity: 1 },
+			],
+			timing,
+		)
+	})
+	contentAnimations = [...incoming, body.animate([before, after], timing)]
+	await Promise.all(contentAnimations.map((animation) => animation.finished.catch(() => {})))
+	if (run !== contentTransitionRun) return
+
+	contentTransitioning.value = false
+	await nextTick()
+	if (run !== contentTransitionRun) return
+	for (const animation of contentAnimations) animation.cancel()
+	contentAnimations = []
+	checkScrollState()
+	if (hadFocus && !isFocusInsideModal()) focusModal()
+}
+
 function show(event?: MouseEvent) {
+	cancelContentTransition()
 	clearModalTimers()
 	modalDocument.value = modalAnchor.value?.ownerDocument ?? document
 	props.onShow?.()
@@ -477,12 +559,13 @@ function show(event?: MouseEvent) {
 		visible.value = true
 		nextTick(() => {
 			scheduleFocus()
+			props.onAfterShow?.()
 		})
 	}, 50)
 }
 
 function hide(): boolean {
-	if (props.disableClose) {
+	if (props.disableClose || contentTransitioning.value) {
 		return false
 	}
 	if (props.beforeHide?.() === false) {
@@ -558,6 +641,7 @@ async function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
 defineExpose({
 	show,
 	hide,
+	transitionContent,
 	checkScrollState,
 	scrollToBottom,
 })
@@ -585,6 +669,7 @@ function resetMousePosition() {
 }
 
 onUnmounted(() => {
+	cancelContentTransition()
 	stopModal()
 	finishHide()
 })
@@ -751,6 +836,14 @@ defineOptions({
 		opacity: 0;
 		transition: all 0.2s ease-in-out;
 
+		&.changing-stage {
+			transition: none;
+
+			> * {
+				opacity: 0;
+			}
+		}
+
 		@media (prefers-reduced-motion) {
 			transition: none !important;
 		}
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index 8787104cfc7..c3a876e922d 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -14,6 +14,7 @@ export interface Tab {
 	name: MessageDescriptor
 	category?: MessageDescriptor
 	icon: Component
+	color?: 'orange'
 	content?: Component
 	href?: string
 	badge?: MessageDescriptor
@@ -120,6 +121,18 @@ function hide(): boolean {
 	return modal.value?.hide() ?? false
 }
 
+function tabClasses(tab: Tab, index: number) {
+	const isSelected = !tab.href && !props.hideTabSelection && selectedTab.value === index
+	if (tab.color === 'orange') {
+		return isSelected
+			? 'bg-highlight-orange text-orange'
+			: 'bg-transparent text-orange hover:bg-highlight-orange'
+	}
+	return isSelected
+		? 'bg-[color-mix(in_srgb,var(--color-brand)_30%,transparent)] text-brand'
+		: 'bg-transparent text-primary hover:bg-surface-4 hover:text-contrast'
+}
+
 function startsCategory(index: number) {
 	const category = visibleTabs.value[index]?.category
 	return !!category && category.id !== visibleTabs.value[index - 1]?.category?.id
@@ -186,7 +199,11 @@ defineExpose({ show, hide, selectedTab, setTab })
 								:href="tab.href ?? undefined"
 								:target="tab.href ? '_blank' : undefined"
 								:rel="tab.href ? 'noopener noreferrer' : undefined"
-								:class="`flex min-w-0 shrink-0 gap-2 items-center text-left rounded-[14px] px-4 py-2.5 border-none text-base leading-5 font-semibold cursor-pointer active:scale-[0.97] transition-all no-underline ${!tab.href && !hideTabSelection && selectedTab === index ? 'bg-[color-mix(in_srgb,var(--color-brand)_30%,transparent)] text-brand' : 'bg-transparent text-primary hover:bg-surface-4 hover:text-contrast'}`"
+								:class="[
+									'flex min-w-0 shrink-0 gap-2 items-center text-left rounded-[14px] px-4 py-2.5 border-none text-base leading-5 font-semibold cursor-pointer active:scale-[0.97] transition-all no-underline',
+									{ 'no-click-animation subpixel-antialiased will-change-auto': tab.href },
+									tabClasses(tab, index),
+								]"
 								@click="!tab.href && setTab(index)"
 							>
 								<component :is="tab.icon" class="size-5 flex-shrink-0" />
diff --git a/packages/ui/src/stories/base/Toggle.stories.ts b/packages/ui/src/stories/base/Toggle.stories.ts
index 9ab7590adf5..bd5ecf58c99 100644
--- a/packages/ui/src/stories/base/Toggle.stories.ts
+++ b/packages/ui/src/stories/base/Toggle.stories.ts
@@ -8,7 +8,8 @@ const meta = {
 	parameters: {
 		docs: {
 			description: {
-				component: 'Toggle uses touch manipulation so double tapping on mobile does not zoom.',
+				component:
+					'Toggle uses touch manipulation so double tapping on mobile does not zoom. Set indeterminate to show a line between its on and off states.',
 			},
 		},
 	},
@@ -30,6 +31,13 @@ export const Checked: Story = {
 	},
 }
 
+export const Indeterminate: Story = {
+	args: {
+		modelValue: false,
+		indeterminate: true,
+	},
+}
+
 export const Disabled: Story = {
 	args: {
 		modelValue: false,
@@ -63,6 +71,9 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="true" /> On
 				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :indeterminate="true" /> Indeterminate
+				</div>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :disabled="true" /> Disabled
 				</div>
@@ -73,6 +84,9 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="true" :small="true" /> On
 				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :indeterminate="true" :small="true" /> Indeterminate
+				</div>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :small="true" :disabled="true" /> Disabled
 				</div>