diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index f0f85da5651..204112b0db6 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -847,10 +847,16 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - The legacy element index JavaScript is now provided by the Yii2 adapter: `Craft.createElementIndex()`, `Craft.registerElementIndexClass()`, `Craft.BaseElementIndex`, `Craft.BaseElementIndexView` and its subclasses, `Craft.AssetIndex`, `Craft.CategoryIndex`, `Craft.EntryIndex`, `Craft.UserIndex`, `Craft.Structure`, `Craft.StructureDrag`, `Craft.ProgressBar`, `Craft.ElementTableSorter`, `Craft.IntervalManager`, `Craft.PromptHandler`, and `Craft.openCustomizeSourcesModal()`.
 - `Craft.AdminTable` and `Craft.DataTableSorter` are now provided by the Yii2 adapter.
 - `Craft.ui` and `Craft.EditableTable` are now provided by the Yii2 adapter.
+- `Craft.CpScreenSlideout`, `Craft.ElementActionTrigger`, `Craft.Tabs`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter. `Craft.Tabs`’ `selectTab` and `deselectTab` events now include the tab element as `tab`.
+- The control panel no longer loads jQuery, Garnish, jQuery Touch Events, or Velocity. The Yii2 adapter still loads them for plugins, along with `Craft.js`. Asset bundles that use jQuery should depend on `craft\web\assets\jquery\JqueryAsset` rather than relying on `craft\web\assets\cp\CpAsset` to load it.
+- Server-rendered menus (the `disclosureMenu()` Twig function, screen action and context menus, and breadcrumb menus) now render as `<craft-action-menu>`. With the Yii2 adapter installed, they keep the legacy disclosure menu markup. Without it, items’ `liAttributes` and groups’ `headingTag`, `headingAttributes`, `listAttributes`, and `padded` settings no longer apply, and menus with `withButton: false` get a default button unless an `invoker` is passed.
+- Element select inputs now boot through `<craft-element-select-input>`, `<craft-entry-select-input>`, and `<craft-asset-select-input>` rather than inline JavaScript. `Craft.BaseElementSelectInput`, `Craft.EntrySelectInput`, and `Craft.AssetSelectInput` are now provided by the Yii2 adapter, and a relation field’s custom `$inputJsClass` is booted by name via the element’s `input-class` attribute.
+- `Craft.Slideout`, `Craft.Grid`, `Craft.PreviewFileModal`, `Craft.ElementDeletionManager`, and the `Craft.charts` classes now store plain elements (`container`, `items`, etc.) instead of jQuery collections, and no longer have `$container`, `$items`, `$outerContainer`, `$shade`, `$chart`, or other `$`-prefixed properties. `Craft.Grid` reads its items’ column spans from their `data-colspan` attributes rather than jQuery data.
 - `Craft.ElementEditor` and `Craft.ElementEditorSlideout` are now provided by the Yii2 adapter. Core’s element editors, slideouts included, all use the Vue editor.
 - `Craft.CP` and `Craft.cp` are now provided by the Yii2 adapter. Control panel messages, the element clipboard and screen reader announcements no longer use them. `showNotice()`, `showSuccess()`, `showError()`, `copyElements()` and `announce()` are exported from `@craftcms/cp`.
 - The legacy `Craft` helpers (`Craft.t()`, `Craft.sendActionRequest()`, `Craft.getUrl()`, `Craft.initUiElements()` and the rest of `Craft.js`), its jQuery plugins (`$.fn.disclosureMenu()`, `$.fn.menubtn()`, `$.fn.formsubmit()`…) and `Craft.queue` are now provided by the Yii2 adapter. Core uses `@craftcms/cp` and `@craftcms/ui` modules instead.
 - Removed the `Craft.FocalPoint` and `Craft.Updater` control panel JavaScript classes. The image preview and the updater now start themselves from their markup.
+- `craft\web\assets\focalpoint\FocalPointAsset` now does nothing.
 - Added `AuthChallengeForm`, `AssetSelectorController`, `ElementSelectorController`, `Uploads`, `createElementSelectorModal`, `highlighter`, and `registerElementSelectorController` to the `@craftcms/cp` import-map module. Control panel plugin code should import them from there; they’re no longer `Craft.*` globals, except `Craft.createElementSelectorModal` and `Craft.highlighter`, which the Yii2 adapter still provides.
 - Removed the classic (pre-3.2) `Craft.LivePreview` control panel JavaScript class, which Craft hasn’t used since 3.2. ([#19964](https://github.com/craftcms/cms/pull/19964))
 - Deprecated the `Craft.LightSwitch`, `Craft.InfoIcon`, `Craft.ColorInput`, `Craft.PasswordInput`, `Craft.IconPicker`, `Craft.SlidePicker`, `Craft.SlideRuleInput`, and `Craft.Tooltip` control panel JavaScript classes, along with the `.infoicon` jQuery plugin. The corresponding `@craftcms/ui` web components should be used instead. 
diff --git a/packages/craftcms-legacy/dashboard/src/Dashboard.js b/packages/craftcms-legacy/dashboard/src/Dashboard.js
index 8ecf330e843..bdfcd4bc0ac 100644
--- a/packages/craftcms-legacy/dashboard/src/Dashboard.js
+++ b/packages/craftcms-legacy/dashboard/src/Dashboard.js
@@ -199,10 +199,10 @@ import './dashboard.scss';
       // Append the new widget after the last one
       // (can't simply append it to the grid container, since that will place it after the resize listener object)
 
-      if (this.grid.$items.length) {
-        $gridItem.insertAfter(this.grid.$items.last());
+      if (this.grid.items.length) {
+        $gridItem.insertAfter(this.grid.items[this.grid.items.length - 1]);
       } else {
-        $gridItem.prependTo(this.grid.$container);
+        $gridItem.prependTo(this.grid.container);
       }
 
       this.grid.addItems($gridItem);
diff --git a/packages/craftcms-ui/src/utilities/dom.ts b/packages/craftcms-ui/src/utilities/dom.ts
index 970b348b2ca..50634d555c6 100644
--- a/packages/craftcms-ui/src/utilities/dom.ts
+++ b/packages/craftcms-ui/src/utilities/dom.ts
@@ -89,6 +89,7 @@ export async function appendElementHtml(
       } else {
         // Just inserted into `parent`, so it's a child node.
         appended.push(node as ChildNode);
+        await runNestedScripts(node, rejectOnError);
       }
 
       if (loaded) {
@@ -104,6 +105,31 @@ export async function appendElementHtml(
   }
 }
 
+/**
+ * Scripts nested in a wrapper clone as already started, so they're inert once
+ * the wrapper is inserted. Recreate them one at a time, waiting for each
+ * external script to load, so they run in order, as jQuery's `.html()` did.
+ */
+async function runNestedScripts(
+  node: Node,
+  rejectOnError: boolean
+): Promise<void> {
+  if (!(node instanceof Element)) {
+    return;
+  }
+
+  for (const inert of node.querySelectorAll('script')) {
+    const script = cloneNode(inert) as HTMLScriptElement;
+    const loaded = script.src ? waitForScript(script, script.src) : null;
+
+    inert.replaceWith(script);
+
+    if (loaded) {
+      await awaitAsset(loaded, rejectOnError);
+    }
+  }
+}
+
 function cloneNode(source: Node): Node {
   if (!(source instanceof HTMLScriptElement)) {
     return source.cloneNode(true);
diff --git a/resources/js/common/craft/chip-actions.test.ts b/resources/js/common/craft/chip-actions.test.ts
index a54aea92776..b4f623a33d0 100644
--- a/resources/js/common/craft/chip-actions.test.ts
+++ b/resources/js/common/craft/chip-actions.test.ts
@@ -67,3 +67,12 @@ it('puts prepended actions ahead of the existing ones', async () => {
   const menu = el.querySelector('craft-action-menu')!;
   await vi.waitFor(() => expect(itemLabels(menu)).toEqual(['Replace', 'Edit']));
 });
+
+it('leaves a chip without an action container alone when the legacy menu plugin isn’t loaded', () => {
+  const el = document.createElement('div');
+  el.className = 'chip';
+  document.body.append(el);
+
+  expect(() => addActionsToChip(el, [{label: 'Replace'}])).not.toThrow();
+  expect(el.children).toHaveLength(0);
+});
diff --git a/resources/js/common/craft/chip-actions.ts b/resources/js/common/craft/chip-actions.ts
index f04e51cdb97..94e3cde385d 100644
--- a/resources/js/common/craft/chip-actions.ts
+++ b/resources/js/common/craft/chip-actions.ts
@@ -2,8 +2,6 @@ import {t} from '@craftcms/ui/utilities/translate';
 import {setElementAttributes} from './attributes';
 import {initLegacyUi} from './legacy-ui';
 
-declare const $: any;
-
 /** An action in the shape the legacy `disclosureMenu()` plugin accepts. */
 export interface ChipAction {
   label?: string;
@@ -172,9 +170,16 @@ function addActionsToDisclosureMenu(
   actions: ChipAction[],
   prepend: boolean
 ): void {
-  let $trigger = $(trigger);
+  // The legacy menu plugin comes with the Yii2 adapter
+  // oxlint-disable-next-line typescript/no-explicit-any
+  const $ = (window as {jQuery?: any}).jQuery;
+  if (typeof $?.fn.disclosureMenu !== 'function') {
+    return;
+  }
+
+  let triggerElement = trigger;
 
-  if (!trigger) {
+  if (!triggerElement) {
     console.warn(
       'A chip was given actions without an action container, so a deprecated ' +
         'disclosure menu was built for it. Render the chip with a ' +
@@ -185,34 +190,31 @@ function addActionsToDisclosureMenu(
 
     const menuId = `actions-${Math.floor(Math.random() * 1000000)}`;
     const labelId = `${menuId}-label`;
-    const $label = $('<label/>', {
-      id: labelId,
-      class: 'visually-hidden',
-      text: t('Actions'),
-    });
-    $trigger = $('<button/>', {
-      class: 'btn action-btn',
-      type: 'button',
-      title: t('Actions'),
-      'aria-controls': menuId,
-      'aria-describedby': labelId,
-      'data-disclosure-trigger': 'true',
-    });
-    const $menu = $('<div/>', {
-      id: menuId,
-      class: 'menu menu--disclosure',
-    });
-
-    $('<div/>', {class: 'chip-actions'})
-      .append($label, $trigger, $menu)
-      .appendTo(chip);
-  }
-
-  // The legacy menu plugin comes with the Yii2 adapter
-  if (typeof $trigger.disclosureMenu !== 'function') {
-    return;
+    const label = document.createElement('label');
+    label.id = labelId;
+    label.className = 'visually-hidden';
+    label.textContent = t('Actions');
+
+    const button = document.createElement('button');
+    button.className = 'btn action-btn';
+    button.type = 'button';
+    button.title = t('Actions');
+    button.setAttribute('aria-controls', menuId);
+    button.setAttribute('aria-describedby', labelId);
+    button.dataset.disclosureTrigger = 'true';
+
+    const menu = document.createElement('div');
+    menu.id = menuId;
+    menu.className = 'menu menu--disclosure';
+
+    const container = document.createElement('div');
+    container.className = 'chip-actions';
+    container.append(label, button, menu);
+    chip.append(container);
+    triggerElement = button;
   }
 
+  const $trigger = $(triggerElement);
   const disclosureMenu = $trigger.disclosureMenu().data('disclosureMenu');
   const before = prepend
     ? disclosureMenu.$container.children().first().get(0)
diff --git a/resources/js/common/craft/element-markup.ts b/resources/js/common/craft/element-markup.ts
index cf3e3300d9e..2e7e80332b4 100644
--- a/resources/js/common/craft/element-markup.ts
+++ b/resources/js/common/craft/element-markup.ts
@@ -1,113 +1,129 @@
 import {PromiseQueue} from '@/common/utils/promise-queue';
-import {jq} from '@/common/utils/jquery';
 
-/**
- * Helpers for legacy `div.element` markup, which element select inputs still
- * render. They take and return jQuery collections, as their callers do.
- */
-
-// oxlint-disable-next-line typescript/no-explicit-any
-type JQueryLike = any;
+/** Helpers for the legacy `div.element` chip markup element select inputs render. */
 
 export interface ElementInfo {
-  id: unknown;
-  siteId: unknown;
-  label: unknown;
-  status: unknown;
-  url: unknown;
+  id: number | null;
+  siteId: number | null;
+  label: string | null;
+  status: string | null;
+  url: string | null;
   hasThumb: boolean;
-  $element: JQueryLike;
+  element: HTMLElement | null;
 }
 
-/** The element's data, from it or the first `.element` inside it. */
-export function getElementInfo(element: unknown): ElementInfo {
-  const $: JQueryLike = jq();
-  let $element = $(element);
+function numberData(value: string | undefined): number | null {
+  if (value === undefined || value === '') {
+    return null;
+  }
 
-  if (!$element.hasClass('element')) {
-    $element = $element.find('.element:first');
+  const number = Number(value);
+
+  return Number.isFinite(number) ? number : null;
+}
+
+/** The element's data, from it or the first `.element` inside it. */
+export function getElementInfo(source: Element | string): ElementInfo {
+  let root: Element | null = null;
+
+  if (typeof source === 'string') {
+    const template = document.createElement('template');
+    template.innerHTML = source.trim();
+    root = template.content.firstElementChild;
+  } else {
+    root = source;
   }
 
+  const element = root?.classList.contains('element')
+    ? (root as HTMLElement)
+    : (root?.querySelector<HTMLElement>('.element') ?? null);
+
   return {
-    id: $element.data('id'),
-    siteId: $element.data('site-id'),
-    label: $element.data('label'),
-    status: $element.data('status'),
-    url: $element.data('url'),
-    hasThumb: $element.hasClass('has-thumb'),
-    $element,
+    id: numberData(element?.dataset.id),
+    siteId: numberData(element?.dataset.siteId),
+    label: element?.dataset.label ?? null,
+    status: element?.dataset.status ?? null,
+    url: element?.dataset.url ?? null,
+    hasThumb: element?.classList.contains('has-thumb') ?? false,
+    element,
   };
 }
 
 /** Switches an element between its `small` and `large` sizes. */
-export function setElementSize(element: unknown, size: string): void {
-  const $: JQueryLike = jq();
-  const $element = $(element);
+export function setElementSize(element: HTMLElement, size: string): void {
   const newSize = size === 'large' ? 'large' : 'small';
 
-  if ($element.hasClass(newSize)) {
+  if (element.classList.contains(newSize)) {
     return;
   }
 
-  $element
-    .addClass(newSize)
-    .removeClass(newSize === 'small' ? 'large' : 'small');
-
-  if ($element.hasClass('has-thumb')) {
-    const $oldImg = $element.find('> .thumb > img');
-    $oldImg.replaceWith(
-      $('<img/>', {
-        sizes: `${newSize === 'small' ? 30 : 100}px`,
-        srcset: $oldImg.attr('srcset') || $oldImg.attr('data-pfsrcset'),
-      })
+  element.classList.add(newSize);
+  element.classList.remove(newSize === 'small' ? 'large' : 'small');
+
+  const oldImg = element.classList.contains('has-thumb')
+    ? element.querySelector<HTMLImageElement>(':scope > .thumb > img')
+    : null;
+
+  if (oldImg) {
+    const img = document.createElement('img');
+    img.sizes = `${newSize === 'small' ? 30 : 100}px`;
+    img.srcset =
+      oldImg.getAttribute('srcset') ||
+      oldImg.getAttribute('data-pfsrcset') ||
+      '';
+    oldImg.replaceWith(img);
+  }
+}
+
+type Styles = Record<string, string | number>;
+
+function applyStyles(element: HTMLElement, styles: Styles): void {
+  for (const [property, value] of Object.entries(styles)) {
+    const name = property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+    element.style.setProperty(
+      name,
+      typeof value === 'number' && name !== 'opacity' && name !== 'z-index'
+        ? `${value}px`
+        : String(value)
     );
   }
 }
 
 const transitions = new PromiseQueue();
 
-/** Animates an element to the given CSS, after any animations already running. */
+/** Animates an element to the given styles, after any animations already running. */
 export function animate(
-  element: unknown,
-  css: Record<string, string | number>
+  element: HTMLElement,
+  styles: Styles
 ): Promise<unknown> {
-  return animateAll([[element, css]]);
+  return animateAll([[element, styles]]);
 }
 
 /**
  * Animates several elements at once, in a view transition, after any
- * animations already running. Without view transitions, the CSS just applies.
+ * animations already running. Without view transitions, the styles just apply.
  */
 export function animateAll(
-  animations: Array<[unknown, Record<string, string | number>]>
+  animations: Array<[HTMLElement, Styles]>
 ): Promise<unknown> {
-  const $: JQueryLike = jq();
-
   return transitions.push(async () => {
-    const $animations = animations.map(
-      ([element, css]) => [$(element), css] as const
-    );
-
     if (!document.startViewTransition) {
-      for (const [$element, css] of $animations) {
-        $element.css(css);
+      for (const [element, styles] of animations) {
+        applyStyles(element, styles);
       }
       return;
     }
 
-    for (const [$element] of $animations) {
-      if ($element.css('view-transition-name') === 'none') {
-        $element.css(
-          'view-transition-name',
-          `vt-${Math.floor(Math.random() * 100000)}`
-        );
+    for (const [element] of animations) {
+      if (getComputedStyle(element).viewTransitionName === 'none') {
+        element.style.viewTransitionName = `vt-${Math.floor(Math.random() * 100000)}`;
       }
     }
 
     try {
       await document.startViewTransition(() => {
-        for (const [$element, css] of $animations) {
-          $element.css(css);
+        for (const [element, styles] of animations) {
+          applyStyles(element, styles);
         }
       }).finished;
     } catch (error) {
diff --git a/resources/js/common/slideouts/create-element-editor.test.ts b/resources/js/common/slideouts/create-element-editor.test.ts
index e0e0ccf8576..e1cff567ff4 100644
--- a/resources/js/common/slideouts/create-element-editor.test.ts
+++ b/resources/js/common/slideouts/create-element-editor.test.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vite-plus/test';
 import type {OpenSlideoutOptions} from './types';
 
@@ -15,7 +14,6 @@ function lastOptions(): OpenSlideoutOptions {
 
 describe('createElementEditor', () => {
   beforeEach(() => {
-    vi.stubGlobal('$', $);
     vi.stubGlobal('Craft', {actionUrl: '/actions'});
     openSlideout.mockResolvedValue({id: 'slideout-1'});
   });
@@ -26,9 +24,9 @@ describe('createElementEditor', () => {
   });
 
   it('opens the element’s editor in a Vue slideout', async () => {
-    const chip = $(
-      '<div class="element" data-id="83" data-site-id="2" data-draft-id="5"></div>'
-    );
+    const chip = document.createElement('div');
+    chip.className = 'element';
+    Object.assign(chip.dataset, {id: '83', siteId: '2', draftId: '5'});
 
     const editor = createElementEditor('Entry', chip, {
       params: {fresh: 1},
@@ -44,7 +42,7 @@ describe('createElementEditor', () => {
       siteId: '2',
       fresh: '1',
     });
-    expect(lastOptions().opener).toBe(chip[0]);
+    expect(lastOptions().opener).toBe(chip);
   });
 
   it('reports a save as the legacy submit event', async () => {
diff --git a/resources/js/common/slideouts/create-element-editor.ts b/resources/js/common/slideouts/create-element-editor.ts
index 74b5560e50a..9fe95571790 100644
--- a/resources/js/common/slideouts/create-element-editor.ts
+++ b/resources/js/common/slideouts/create-element-editor.ts
@@ -1,11 +1,11 @@
-import {Base} from '@craftcms/garnish';
+import {Base, isPlainObject} from '@craftcms/garnish';
 import {elementEditorParams} from '@/modules/slideout/element-editor-params';
 import type {UiValues} from '@/modules/ui/types';
 import {closeSlideout, openSlideout} from './store';
 import type {SlideoutInstance, SlideoutSaveResult} from './types';
 import {getActionUrl} from '@/common/craft/url';
+import {resolveElement} from '@/common/utils/dom';
 
-declare const $: any;
 declare const Craft: any;
 
 /** The legacy element editor settings a Vue slideout can honor. */
@@ -61,9 +61,11 @@ export class ElementEditorPanel extends Base {
   ) {
     super();
 
-    const $element = $(element);
+    const target = resolveElement(
+      element as Parameters<typeof resolveElement>[0]
+    );
     const params = {
-      ...elementEditorParams($element, {
+      ...elementEditorParams(target, {
         elementType: settings.elementType,
         elementId: settings.elementId,
         draftId: settings.draftId,
@@ -72,13 +74,14 @@ export class ElementEditorPanel extends Base {
         ownerId: settings.ownerId,
         siteId: settings.siteId,
         prevalidate:
-          settings.prevalidate ?? $element.parents('.prevalidate').length > 0,
+          settings.prevalidate ??
+          !!target?.parentElement?.closest('.prevalidate'),
       }),
       ...settings.params,
     };
 
     this.opened = openSlideout(getActionUrl('elements/edit', params), {
-      opener: $element[0] ?? undefined,
+      opener: target ?? undefined,
       onSaved: (result) => this.saved(result, settings),
       onClosed: () => {
         settings.onClose?.();
@@ -144,7 +147,7 @@ export function createElementEditor(
     | null,
   settings?: CreateElementEditorSettings
 ): ElementEditorPanel {
-  if (settings === undefined && $.isPlainObject(element)) {
+  if (settings === undefined && isPlainObject(element)) {
     settings = element as CreateElementEditorSettings;
     element = null;
   }
diff --git a/resources/js/common/slideouts/index.ts b/resources/js/common/slideouts/index.ts
index f1add24e1a0..e1126432613 100644
--- a/resources/js/common/slideouts/index.ts
+++ b/resources/js/common/slideouts/index.ts
@@ -1,4 +1,3 @@
-import {createElementEditor} from './create-element-editor';
 import {closeAllSlideouts, closeSlideout, openSlideout} from './store';
 
 export {default as SlideoutHost} from './SlideoutHost.vue';
@@ -19,9 +18,7 @@ export type {
 
 /**
  * Expose the opener on `window.Craft` so legacy bundles — and anyone poking at
- * the console — can open a Vue slideout without importing anything. This also
- * replaces the legacy bundle's `Craft.createElementEditor()`, so element
- * editors open in a Vue slideout too.
+ * the console — can open a Vue slideout without importing anything.
  */
 export function registerSlideoutGlobals(): void {
   const craft = window.Craft;
@@ -34,6 +31,5 @@ export function registerSlideoutGlobals(): void {
     openSlideout,
     closeSlideout,
     closeAllSlideouts,
-    createElementEditor,
   });
 }
diff --git a/resources/js/common/utils/appendElementHtml.browser.test.ts b/resources/js/common/utils/appendElementHtml.browser.test.ts
new file mode 100644
index 00000000000..8943c0e8fca
--- /dev/null
+++ b/resources/js/common/utils/appendElementHtml.browser.test.ts
@@ -0,0 +1,46 @@
+import {appendElementHtml} from '@craftcms/ui/utilities/dom';
+import {afterEach, expect, it} from 'vite-plus/test';
+
+declare global {
+  interface Window {
+    scriptRuns?: string[];
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  delete window.scriptRuns;
+});
+
+it('runs scripts nested in wrapper elements, like jQuery .html() did', async () => {
+  window.scriptRuns = [];
+
+  await appendElementHtml(
+    '<script>scriptRuns.push("top")</script><div><p><script>scriptRuns.push("nested")</script></p></div>',
+    document.body
+  );
+
+  expect(window.scriptRuns).toEqual(['top', 'nested']);
+});
+
+it('waits for nested external scripts before running the scripts after them', async () => {
+  window.scriptRuns = [];
+
+  await appendElementHtml(
+    `<div><script src="data:text/javascript,scriptRuns.push('library')"></script><script>scriptRuns.push("init")</script></div>`,
+    document.body
+  );
+
+  expect(window.scriptRuns).toEqual(['library', 'init']);
+});
+
+it('rejects when a nested external script fails to load', async () => {
+  await expect(
+    appendElementHtml(
+      '<div id="wrapper"><script src="/missing-nested-script.js"></script></div>',
+      document.body,
+      true
+    )
+  ).rejects.toThrow('missing-nested-script.js');
+  expect(document.getElementById('wrapper')).toBeNull();
+});
diff --git a/resources/js/common/utils/dom.ts b/resources/js/common/utils/dom.ts
index d9ed102780f..c9ca1f43381 100644
--- a/resources/js/common/utils/dom.ts
+++ b/resources/js/common/utils/dom.ts
@@ -182,3 +182,18 @@ export async function revealElement(
       : 'smooth',
   });
 }
+
+/** An element's content box size, without padding, like jQuery's `width()`/`height()`. */
+export function contentSize(el: HTMLElement): {width: number; height: number} {
+  const style = getComputedStyle(el);
+  return {
+    width:
+      el.clientWidth -
+      parseFloat(style.paddingLeft || '0') -
+      parseFloat(style.paddingRight || '0'),
+    height:
+      el.clientHeight -
+      parseFloat(style.paddingTop || '0') -
+      parseFloat(style.paddingBottom || '0'),
+  };
+}
diff --git a/resources/js/common/web-components/ControllerElement.ts b/resources/js/common/web-components/ControllerElement.ts
index 42945158038..f41c998622b 100644
--- a/resources/js/common/web-components/ControllerElement.ts
+++ b/resources/js/common/web-components/ControllerElement.ts
@@ -92,11 +92,19 @@ export abstract class ControllerElement<
     });
   }
 
+  /**
+   * Tear the controller down once the element has left the document. Moving the
+   * element (`before()`, `after()`, drag-sorting) disconnects and reconnects it
+   * within one DOM operation, so the check waits a microtask and keeps the
+   * controller when the element is back in the document by then.
+   */
   disconnectedCallback(): void {
-    if (this.#instance) {
-      this.#instance.destroy();
-      this.#instance = null;
-    }
+    queueMicrotask(() => {
+      if (this.#instance && !this.isConnected) {
+        this.#instance.destroy();
+        this.#instance = null;
+      }
+    });
   }
 
   /** Parse a JSON object attribute, returning `{}` when absent or invalid. */
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index fd52ba8e8c0..ce2643b44f3 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -44,13 +44,9 @@ import './modules/entry-mover';
 import './modules/prompt-handler';
 import './modules/link-field';
 import './modules/cp-modal';
-import './modules/tabs';
 import './modules/grid';
 import './modules/chart';
-import './modules/data-table-sorter';
-import './modules/element-action-trigger';
 import './modules/element-thumb-loader';
-import './modules/element-table-sorter';
 import './modules/asset-mover';
 import './modules/element-selector-modal';
 import './modules/element-select-input';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 659f28f4b93..5119baea4dc 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -58,13 +58,9 @@ import './modules/entry-mover/index';
 import './modules/prompt-handler/index';
 import './modules/link-field/index';
 import './modules/cp-modal/index';
-import './modules/tabs/index';
 import './modules/grid/index';
 import './modules/chart/index';
-import './modules/data-table-sorter/index';
-import './modules/element-action-trigger/index';
 import './modules/element-thumb-loader/index';
-import './modules/element-table-sorter/index';
 import './modules/asset-mover/index';
 import './modules/element-selector-modal/index';
 import './modules/element-select-input/index';
diff --git a/resources/js/modules/asset-mover/asset-mover.ts b/resources/js/modules/asset-mover/asset-mover.ts
index 51896c7c420..5bfe605a09e 100644
--- a/resources/js/modules/asset-mover/asset-mover.ts
+++ b/resources/js/modules/asset-mover/asset-mover.ts
@@ -72,22 +72,23 @@ export class AssetMover extends Base {
   }
 
   successNotice(moveParams: any, message: any, allowUndo = true): void {
-    let $undoBtn = null;
+    let undoBtn: HTMLElement | null = null;
 
     if (allowUndo && this.conflictCount === 0) {
-      $undoBtn = $(create('craft-button', {type: 'button'}, t('Undo')));
+      undoBtn = create('craft-button', {type: 'button'}, t('Undo'));
     }
 
     // if we didn't reach the limit, so the move was not confirmed, we want to give the option to undo
     const notice = showNotice(
       message,
-      !moveParams.confirmed && allowUndo && $undoBtn
-        ? {details: $undoBtn[0]}
+      !moveParams.confirmed && allowUndo && undoBtn
+        ? {details: undoBtn}
         : undefined
     );
 
     if (allowUndo) {
-      $undoBtn?.on('activate', async () => {
+      // `<craft-button>` fires click for Enter and Space too
+      undoBtn?.addEventListener('click', async () => {
         // ask to confirm if they want to undo
         if (confirm(t('Are you sure you want to undo the move?'))) {
           // if yes, undo
diff --git a/resources/js/modules/asset-select-input/asset-select-input.ts b/resources/js/modules/asset-select-input/asset-select-input.ts
index dc6a55add7c..a3aab33098e 100644
--- a/resources/js/modules/asset-select-input/asset-select-input.ts
+++ b/resources/js/modules/asset-select-input/asset-select-input.ts
@@ -2,137 +2,137 @@ import {Uploader} from '@/modules/uploader/uploader';
 import {UploadError} from '@/upload-client';
 import type {UploaderCallbacks} from '@/modules/uploader/base-uploader';
 import {BaseElementSelectInput} from '@/modules/element-select-input/base-element-select-input';
-import {openAssetImageEditor} from '@/modules/image-editor';
 import {IntervalManager} from '@/modules/interval-manager/interval-manager';
+import {openImageEditorDialog} from '@/modules/image-editor/open-image-editor-dialog';
+import {PreviewFileModal} from '@/modules/preview-file-modal/preview-file-modal';
 import '@craftcms/ui/components/progress-bar/progress-bar';
 import type CraftProgressBar from '@craftcms/ui/components/progress-bar/progress-bar';
 import './asset-select-input.css';
 import {t} from '@craftcms/ui/utilities/translate';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
-import {startSide} from '@/common/craft/direction';
 import {showError} from '@/modules/messages/messages';
 import {QueueService} from '@/modules/queue/queue';
 import {announce} from '@/common/announcer';
 import {getElementInfo} from '@/common/craft/element-markup';
-
-declare const Craft: any;
-declare const Garnish: any;
-declare const $: any;
+import {SPACE_KEY} from '@craftcms/garnish';
 
 /**
- * AssetSelectInput — a port of `Craft.AssetSelectInput` onto
- * {@link BaseElementSelectInput}. Extends the base element select with:
- * - An upload button + hidden file input wired to the native uploader
- * - A `<craft-progress-bar>` overlay during uploads, announced to screen readers
- * - Shift-Space keyboard shortcut to open the file preview modal
- *
- * Notes:
- * - `keydown` on the elements container is a native event — `addListener` works.
- * - Upload lifecycle callbacks are passed in the uploader settings.
- * - The upload button's `click` handler uses jQuery `.on()` because the file
- *   input is replaced after each upload (see the comment in `_attachUploader`).
+ * The Assets field's input: the base element select, plus uploads (a button,
+ * drag and drop, and a progress bar read out to screen readers) and
+ * Shift+Space to preview the focused asset.
  */
 export class AssetSelectInput extends BaseElementSelectInput {
-  $uploadBtn: any = null;
-  $fileInput: any = null;
-  uploader: any = null;
+  uploadBtn: HTMLButtonElement | null = null;
+  fileInput: HTMLInputElement | null = null;
+  uploader: Uploader | null = null;
   progressBar: CraftProgressBar | null = null;
   #progressAnnouncer: IntervalManager | null = null;
-  openPreviewTimeout: ReturnType<typeof setTimeout> | null = null;
+  #progressShade: HTMLElement | null = null;
 
-  constructor(settings?: any) {
+  constructor(
+    settings?: ConstructorParameters<typeof BaseElementSelectInput>[0]
+  ) {
     super(settings);
     if (new.target === AssetSelectInput) {
       this.init(settings);
     }
   }
 
-  override init(...initArgs: any[]): void {
-    super.init(...initArgs);
+  override init(
+    settings?: ConstructorParameters<typeof BaseElementSelectInput>[0]
+  ): void {
+    super.init(settings);
 
     if (this.settings.canUpload) {
-      this._attachUploader();
+      this.#attachUploader();
     }
 
     this.updateAddElementsBtn();
 
-    // SAFETY: This listener is attached specifically to the native keydown event.
-    this.addListener(this.$elementsContainer[0], 'keydown', ((
-      ev: KeyboardEvent
-    ) => {
-      if (ev.keyCode === Garnish.SPACE_KEY && ev.shiftKey) {
+    this.addListener(this.elementsContainer, 'keydown', (ev) => {
+      if (
+        ev instanceof KeyboardEvent &&
+        ev.keyCode === SPACE_KEY &&
+        ev.shiftKey
+      ) {
         this.openPreview();
         ev.stopPropagation();
       }
-    }) as any);
+    });
   }
 
-  override addElements($elements: any): void {
-    super.addElements($elements);
-
-    // Route the Open in Image Editor actions through this input, so new assets can replace the selected ones
-    for (let i = 0; i < $elements.length; i++) {
-      const $element = $elements.eq(i);
-      $element
-        .find('[id*="action-image-edit"]')
-        .each((_: number, btn: HTMLElement) => {
-          const $btn = $(btn);
-          // Remove the existing handler, and change the ID in case it hasn't been registered yet
-          $btn
-            .off('activate')
-            .attr('id', `${btn.id}-${Math.floor(Math.random() * 1000000)}`);
-          // `activate` is a jQuery synthetic event, so it needs `.on()` rather than `addListener()`.
-          $btn.on('activate', () => {
-            openAssetImageEditor($element.data('id'), (result) => {
-              if (result.newAssetId) {
-                this.replaceElement(
-                  $element.data('id'),
-                  result.newAssetId
-                ).catch(() => {});
-              }
-            }).catch((error) => showError(error?.response?.data?.message));
-          });
-        });
-    }
+  override destroy(): void {
+    this.#progressAnnouncer?.stop();
+    this.#progressAnnouncer = null;
+    this.uploader?.destroy();
+    this.uploader = null;
+    this.uploadBtn?.remove();
+    this.uploadBtn = null;
+    this.fileInput?.remove();
+    this.fileInput = null;
+    this.#progressShade?.remove();
+    this.#progressShade = null;
+    this.progressBar = null;
+    this.container.classList.remove('uploading');
+
+    super.destroy();
   }
 
-  override elementSelectSettings(): any {
-    return Object.assign(super.elementSelectSettings(), {
-      makeFocusable: true,
+  /**
+   * Opens the image editor for the chip's asset, and puts an image saved as a
+   * new asset in its place.
+   */
+  protected override handleChipAction(
+    chip: HTMLElement,
+    name: string,
+    detail: Record<string, any>
+  ): boolean {
+    const behavior = detail.behavior;
+    if (name !== 'craft:element-action' || behavior?.type !== 'editImage') {
+      return super.handleChipAction(chip, name, detail);
+    }
+
+    void openImageEditorDialog(behavior.settings, (result) => {
+      if (result.newAssetId) {
+        this.replaceElement(behavior.assetId, result.newAssetId).catch(
+          (error) => showError(error?.message)
+        );
+      }
     });
+
+    return true;
   }
 
-  clearOpenPreviewTimeout(): void {
-    if (this.openPreviewTimeout) {
-      clearTimeout(this.openPreviewTimeout);
-      this.openPreviewTimeout = null;
-    }
+  override elementSelectSettings(): Record<string, unknown> {
+    return {...super.elementSelectSettings(), makeFocusable: true};
   }
 
-  openPreview($element?: any): void {
-    if (Craft.PreviewFileModal.openInstance) {
-      Craft.PreviewFileModal.openInstance.hide();
-    } else {
-      if (!$element) {
-        $element = this.$elements
-          .filter(':focus')
-          .add(this.$elements.has(':focus'));
-      }
-      if ($element.length) {
-        Craft.PreviewFileModal.showForAsset($element, this.elementSelect);
-      }
+  /** Toggles the preview of `element`, or of the focused asset. */
+  openPreview(element?: HTMLElement): void {
+    if (PreviewFileModal.openInstance) {
+      PreviewFileModal.openInstance.hide();
+      return;
+    }
+
+    const target =
+      element ??
+      this.elements.find((el) => el.contains(document.activeElement));
+
+    if (target) {
+      PreviewFileModal.showForAsset(target, this.elementSelect);
     }
   }
 
-  _attachUploader(): void {
+  #attachUploader(): void {
     const shade = document.createElement('div');
     shade.className = 'progress-shade';
     this.progressBar = document.createElement('craft-progress-bar');
     this.progressBar.label = t('Upload progress');
     this.progressBar.hidden = true;
     shade.append(this.progressBar);
-    this.$container[0].append(shade);
+    this.container.append(shade);
+    this.#progressShade = shade;
 
     // The bar has no live region of its own, so progress is read out
     // periodically while an upload runs.
@@ -140,49 +140,56 @@ export class AssetSelectInput extends BaseElementSelectInput {
       onInterval: () => announce(this.#progressMessage()),
     });
 
-    if (this.$addElementBtn) {
-      this.$uploadBtn = $('<button/>', {
-        type: 'button',
-        class: 'btn dashed',
-        'aria-label':
-          this.settings.limit == 1 ? t('Upload a file') : t('Upload files'),
-        'aria-describedby': this.settings.describedBy,
-        text: this.settings.limit == 1 ? t('Upload a file') : t('Upload files'),
-      })
-        .prepend('<craft-icon name="upload"></craft-icon>')
-        .insertAfter(this.$addElementBtn);
+    if (this.addElementBtn) {
+      const label =
+        this.settings.limit == 1 ? t('Upload a file') : t('Upload files');
+
+      this.uploadBtn = document.createElement('button');
+      this.uploadBtn.type = 'button';
+      this.uploadBtn.className = 'btn dashed';
+      this.uploadBtn.setAttribute('aria-label', label);
+      if (this.settings.describedBy) {
+        this.uploadBtn.setAttribute(
+          'aria-describedby',
+          this.settings.describedBy
+        );
+      }
+      const icon = document.createElement('craft-icon');
+      icon.setAttribute('name', 'upload');
+      this.uploadBtn.append(icon, label);
+      this.addElementBtn.after(this.uploadBtn);
+
+      this.fileInput = document.createElement('input');
+      this.fileInput.type = 'file';
+      this.fileInput.className = 'hidden';
+      this.fileInput.multiple = this.settings.limit != 1;
+      this.uploadBtn.after(this.fileInput);
 
-      this.$fileInput = $('<input/>', {
-        type: 'file',
-        class: 'hidden',
-        multiple: this.settings.limit != 1,
-      }).insertAfter(this.$uploadBtn);
+      this.addListener(this.uploadBtn, 'click', () => this.fileInput?.click());
 
-      // Trigger resize in case the field is inside an element editor HUD
-      $(window).trigger('resize');
+      // The field may be inside an element editor HUD that sizes to its content
+      window.dispatchEvent(new Event('resize'));
     }
 
     const options: any = {
-      dropZone: this.$container.toArray(),
-      fileInput: this.$fileInput?.toArray(),
+      dropZone: [this.container],
+      fileInput: this.fileInput ? [this.fileInput] : undefined,
+      canAddMoreFiles: this.canAddMoreFiles.bind(this),
+      on: {
+        start: this._onUploadStart.bind(this),
+        progress: this._onUploadProgress.bind(this),
+        done: this._onUploadComplete.bind(this),
+        fail: this._onUploadFailure.bind(this),
+      } satisfies UploaderCallbacks,
     };
 
     if (this.settings.criteria.kind !== undefined) {
       options.allowedKinds = [this.settings.criteria.kind].flat();
     }
 
-    options.canAddMoreFiles = this.canAddMoreFiles.bind(this);
-
-    options.on = {
-      start: this._onUploadStart.bind(this),
-      progress: this._onUploadProgress.bind(this),
-      done: this._onUploadComplete.bind(this),
-      fail: this._onUploadFailure.bind(this),
-    } satisfies UploaderCallbacks;
-
-    this.uploader = new Uploader(this.$container[0], options);
+    this.uploader = new Uploader(this.container, options);
 
-    const params: any = {fieldId: this.settings.fieldId};
+    const params: Record<string, unknown> = {fieldId: this.settings.fieldId};
     if (this.settings.sourceElementId) {
       params.elementId = this.settings.sourceElementId;
     }
@@ -190,49 +197,20 @@ export class AssetSelectInput extends BaseElementSelectInput {
       params.siteId = this.settings.criteria.siteId;
     }
     this.uploader.setParams(params);
-
-    if (this.$uploadBtn) {
-      this.$uploadBtn.on('click', () => {
-        this.$uploadBtn.next('input[type=file]').trigger('click');
-      });
-    }
   }
 
   override enableAddElementsBtn(): void {
-    if (this.$uploadBtn) {
-      this.$uploadBtn.removeClass('hidden');
-    }
+    this.uploadBtn?.classList.remove('hidden');
     super.enableAddElementsBtn();
   }
 
   override disableAddElementsBtn(): void {
-    if (this.$uploadBtn) {
-      this.$uploadBtn.addClass('hidden');
-    }
+    this.uploadBtn?.classList.add('hidden');
     super.disableAddElementsBtn();
   }
 
-  selectUploadedFile(element: any): void {
-    if (!this.canAddMoreElements()) return;
-
-    const $newElement = element.$element;
-    $newElement.appendTo(this.$elementsContainer);
-
-    const margin = -($newElement.outerWidth() + 10);
-    this.$addElementBtn.css('margin-' + startSide(), margin + 'px');
-
-    const animateCss: any = {};
-    animateCss['margin-' + startSide()] = 0;
-    this.$addElementBtn.velocity(animateCss, 'fast');
-
-    this.addElements($newElement);
-
-    // SAFETY: The legacy base declares modal dynamically and deletion restores lazy creation.
-    delete (this as any).modal;
-  }
-
   _onUploadStart(): void {
-    this.$container.addClass('uploading');
+    this.container.classList.add('uploading');
     this.progressBar?.reset();
     this.progressBar?.show();
     this.#progressAnnouncer?.start();
@@ -241,7 +219,7 @@ export class AssetSelectInput extends BaseElementSelectInput {
   #hideProgress(): void {
     this.progressBar?.hide();
     this.#progressAnnouncer?.stop();
-    this.$container.removeClass('uploading');
+    this.container.classList.remove('uploading');
   }
 
   #progressMessage(): string {
@@ -290,15 +268,16 @@ export class AssetSelectInput extends BaseElementSelectInput {
         ],
       })
       .then(async ({data}: any) => {
-        const elementInfo = getElementInfo(data.elements[result.assetId][0]);
-        this.selectElements([elementInfo]);
+        const info = getElementInfo(data.elements[result.assetId][0]);
+        await this.selectElements([
+          {...info, id: Number(info.id), siteId: info.siteId},
+        ]);
 
         await appendHeadHtml(data.headHtml);
         await appendBodyHtml(data.bodyHtml);
 
-        if (this.uploader.isLastUpload()) {
+        if (this.uploader?.isLastUpload()) {
           this.#hideProgress();
-          this.$container.trigger('change');
         }
       })
       .catch((error: any) => {
@@ -351,7 +330,7 @@ export class AssetSelectInput extends BaseElementSelectInput {
   canAddMoreFiles(slotsTaken: number): boolean {
     return (
       !this.settings.limit ||
-      this.$elements.length + slotsTaken < this.settings.limit
+      this.elements.length + slotsTaken < this.settings.limit
     );
   }
 }
diff --git a/resources/js/modules/asset-select-input/globals.ts b/resources/js/modules/asset-select-input/globals.ts
deleted file mode 100644
index 1894970a242..00000000000
--- a/resources/js/modules/asset-select-input/globals.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {AssetSelectInput} from './asset-select-input';
-import {registerCraftGlobals} from '@/common/craft-global';
-
-// Assign the legacy `Craft.AssetSelectInput` global so PHP-emitted code and the
-// still-legacy cp bundle keep working.
-registerCraftGlobals({AssetSelectInput});
diff --git a/resources/js/modules/asset-select-input/index.ts b/resources/js/modules/asset-select-input/index.ts
index fe834fd5af7..c8f25cb83ad 100644
--- a/resources/js/modules/asset-select-input/index.ts
+++ b/resources/js/modules/asset-select-input/index.ts
@@ -1,4 +1,3 @@
-import './globals';
 import {AssetSelectInput} from './asset-select-input';
 
 export {AssetSelectInput};
diff --git a/resources/js/modules/auth-method-setup/auth-method-setup-slideout.ts b/resources/js/modules/auth-method-setup/auth-method-setup-slideout.ts
index 715e9ad3601..df9ba2281ec 100644
--- a/resources/js/modules/auth-method-setup/auth-method-setup-slideout.ts
+++ b/resources/js/modules/auth-method-setup/auth-method-setup-slideout.ts
@@ -48,13 +48,11 @@ export class AuthMethodSetupSlideout extends Slideout {
     });
 
     // Add alt text to the QR code image
-    const $qrCodeImg = this.$container.find('[id*="qr-code-wrapper"] svg');
-
-    if ($qrCodeImg.length) {
-      $qrCodeImg.attr({
-        role: 'img',
-        'aria-label': t('QR Code'),
-      });
+    for (const qrCode of this.container!.querySelectorAll(
+      '[id*="qr-code-wrapper"] svg'
+    )) {
+      qrCode.setAttribute('role', 'img');
+      qrCode.setAttribute('aria-label', t('QR Code'));
     }
   }
 
@@ -66,14 +64,21 @@ export class AuthMethodSetupSlideout extends Slideout {
     const message = t('{name} added successfully.', {
       name: this.methodName,
     });
-    this.$container.find('.so-body').addClass('auth-method-setup-success')
-      .html(`
+    const container = this.container!;
+    for (const body of container.querySelectorAll('.so-body')) {
+      body.classList.add('auth-method-setup-success');
+      body.innerHTML = `
         <craft-icon name="check"></craft-icon>
         <h1 class="auth-method-setup-success-message" tabindex="-1">${message}</h1>
-      `);
+      `;
+    }
 
-    this.$container.find('.auth-method-setup-success-message').focus();
-    this.$container.find('.auth-method-close-btn').text(t('Close'));
+    container
+      .querySelector<HTMLElement>('.auth-method-setup-success-message')
+      ?.focus();
+    for (const button of container.querySelectorAll('.auth-method-close-btn')) {
+      button.textContent = t('Close');
+    }
   }
 }
 
diff --git a/resources/js/modules/auth-method-setup/auth-method-setup.test.ts b/resources/js/modules/auth-method-setup/auth-method-setup.test.ts
new file mode 100644
index 00000000000..919315394e8
--- /dev/null
+++ b/resources/js/modules/auth-method-setup/auth-method-setup.test.ts
@@ -0,0 +1,37 @@
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {AuthMethodSetup} from './auth-method-setup';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+it('replaces the method listing with the refreshed one', async () => {
+  document.body.innerHTML = `
+    <div id="auth-method-setup">
+      <div class="auth-method" data-method="totp"><button class="auth-method-setup-btn">Set up</button></div>
+    </div>`;
+  vi.spyOn(actionClient, 'post').mockResolvedValue({
+    data: {
+      html: `<div id="auth-method-setup">
+        <div class="auth-method" data-method="totp"><button class="auth-method-setup-btn">Remove</button></div>
+        <div class="auth-method" data-method="webauthn"><button class="auth-method-setup-btn">Set up</button></div>
+      </div>`,
+      headHtml: '',
+      bodyHtml: '',
+    },
+  });
+  const onRefresh = vi.fn();
+  const setup = new AuthMethodSetup({onRefresh});
+
+  setup.refresh();
+  await vi.waitFor(() => expect(onRefresh).toHaveBeenCalled());
+
+  const container = document.getElementById('auth-method-setup')!;
+  expect(
+    Array.from(container.children).map((el) => el.getAttribute('data-method'))
+  ).toEqual(['totp', 'webauthn']);
+  expect(container.textContent).toContain('Remove');
+  expect(Object.keys(setup.methodListings!)).toEqual(['totp', 'webauthn']);
+});
diff --git a/resources/js/modules/auth-method-setup/auth-method-setup.ts b/resources/js/modules/auth-method-setup/auth-method-setup.ts
index 0d69963d05e..cb75adc4970 100644
--- a/resources/js/modules/auth-method-setup/auth-method-setup.ts
+++ b/resources/js/modules/auth-method-setup/auth-method-setup.ts
@@ -19,7 +19,6 @@ import {announce} from '@/common/announcer';
 import {initLegacyUi} from '@/common/craft/legacy-ui';
 
 declare const Craft: any;
-declare const $: any;
 
 export interface AuthMethodSetupSettings extends GarnishBaseSettings {
   /** Called after {@link AuthMethodSetup.refresh} re-renders the listing. */
@@ -145,7 +144,7 @@ export class AuthMethodSetup extends Base<AuthMethodSetupSettings> {
             await appendHeadHtml(data.headHtml);
             await appendBodyHtml(data.bodyHtml);
             this.addListener(
-              slideout.$container.find('.auth-method-close-btn'),
+              slideout.container!.querySelector('.auth-method-close-btn'),
               'activate',
               () => {
                 slideout.close();
@@ -182,10 +181,17 @@ export class AuthMethodSetup extends Base<AuthMethodSetupSettings> {
           );
         }
 
-        const $container = $('#auth-method-setup').html(
-          $(data.html).children()
-        );
-        initLegacyUi($container);
+        const container = document.getElementById('auth-method-setup');
+        if (container) {
+          const template = document.createElement('template');
+          template.innerHTML = data.html;
+          container.replaceChildren(
+            ...Array.from(template.content.children).flatMap((element) =>
+              Array.from(element.children)
+            )
+          );
+          initLegacyUi(container);
+        }
         await appendHeadHtml(data.headHtml);
         await appendBodyHtml(data.bodyHtml);
         this.initUi();
diff --git a/resources/js/modules/chart/chart.test.ts b/resources/js/modules/chart/chart.test.ts
new file mode 100644
index 00000000000..362b6e58eb4
--- /dev/null
+++ b/resources/js/modules/chart/chart.test.ts
@@ -0,0 +1,66 @@
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import {Area, DataTable} from './chart';
+
+const data = () => ({
+  columns: [
+    {type: 'date', label: 'Date'},
+    {type: 'number', label: 'Users'},
+  ],
+  rows: [
+    ['2026-10-01', '3'],
+    ['2026-10-02', '5'],
+  ],
+});
+
+const months = Array.from({length: 12}, (_, i) => `M${i + 1}`);
+const days = Array.from({length: 7}, (_, i) => `D${i + 1}`);
+
+beforeEach(() => {
+  // Set on every page by the D3 asset
+  window.d3FormatLocaleDefinition = {
+    decimal: '.',
+    thousands: ',',
+    grouping: [3],
+    currency: ['$', ''],
+  };
+  window.d3TimeFormatLocaleDefinition = {
+    dateTime: '%x, %X',
+    date: '%-m/%-d/%Y',
+    time: '%-I:%M:%S %p',
+    periods: ['AM', 'PM'],
+    days,
+    shortDays: days,
+    months,
+    shortMonths: months,
+  };
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(400);
+  vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(200);
+});
+
+afterEach(() => {
+  delete window.d3FormatLocaleDefinition;
+  delete window.d3TimeFormatLocaleDefinition;
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+it('coerces each cell by its column type', () => {
+  const table = new DataTable(data());
+
+  expect(table.rows[0][0]).toBeInstanceOf(Date);
+  expect(table.rows[1][1]).toBe(5);
+});
+
+it('draws into a plain element, replacing the previous chart on redraw', () => {
+  const container = document.createElement('div');
+  document.body.append(container);
+  const chart = new Area(container, {orientation: 'ltr'});
+
+  chart.draw(new DataTable(data()), {orientation: 'ltr'});
+  chart.draw(new DataTable(data()), {orientation: 'ltr'});
+
+  expect(container.querySelectorAll('.cp-chart.area')).toHaveLength(1);
+  expect(container.querySelector('.cp-chart svg')).not.toBeNull();
+  // Settings are deep-merged: an override keeps the other default formats
+  expect(chart.settings.formats.percentFormat).toBe(',.2%');
+});
diff --git a/resources/js/modules/chart/chart.ts b/resources/js/modules/chart/chart.ts
index 901f80f9679..0bb40fc0a21 100644
--- a/resources/js/modules/chart/chart.ts
+++ b/resources/js/modules/chart/chart.ts
@@ -1,11 +1,33 @@
 import * as d3 from 'd3';
-import {Base} from '@craftcms/garnish';
+import {Base, isPlainObject} from '@craftcms/garnish';
+import {contentSize, resolveElement, type ElementArg} from '@/common/utils/dom';
+
+/** A deep merge with the semantics of jQuery's `$.extend(true, …)`. */
+function deepExtend(target: any, ...sources: any[]): any {
+  for (const source of sources) {
+    if (source == null) {
+      continue;
+    }
 
-// Charts keep the `declare const $` jQuery seam (like the other complex legacy
-// managers): the `$container` API is passed as jQuery by the still-legacy chart
-// widgets, and the tooltip/measurement (`.width()`/`.height()`/`.offset()`)
-// rely on jQuery's box model. d3 is a real ESM import (bundled).
-declare const $: any;
+    for (const [key, value] of Object.entries(source)) {
+      if (value === undefined || value === target) {
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        const base = Array.isArray(target[key]) ? target[key] : [];
+        target[key] = deepExtend(base, value);
+      } else if (isPlainObject(value)) {
+        const base = isPlainObject(target[key]) ? target[key] : {};
+        target[key] = deepExtend(base, value);
+      } else {
+        target[key] = value;
+      }
+    }
+  }
+
+  return target;
+}
 
 declare global {
   interface Window {
@@ -35,7 +57,7 @@ export class DataTable extends Base {
     const rows = data.rows;
 
     rows.forEach((d: any) => {
-      $.each(d, function (cellIndex: any) {
+      d.forEach((_cell: any, cellIndex: number) => {
         const column = columns[cellIndex];
         let parseTime;
 
@@ -73,37 +95,43 @@ export class DataTable extends Base {
  * Craft.charts.Tip — a positioned tooltip element inside the chart container.
  */
 export class Tip extends Base {
-  $container: any = null;
-  $tip: any = null;
+  container: HTMLElement | null = null;
+  tip!: HTMLElement;
 
-  constructor($container?: any) {
+  constructor(container?: ElementArg) {
     super();
     if (new.target === Tip) {
-      this.init($container);
+      this.init(container);
     }
   }
 
-  init($container: any): void {
-    this.$container = $container;
-    this.$tip = $('<div class="tooltip"></div>').appendTo(this.$container);
+  init(container: ElementArg): void {
+    this.container = resolveElement(container);
+    this.tip = document.createElement('div');
+    this.tip.className = 'tooltip';
+    this.container?.append(this.tip);
     this.hide();
   }
 
-  setContent(html: any): void {
-    this.$tip.html(html);
+  setContent(content: string | Node): void {
+    if (typeof content === 'string') {
+      this.tip.innerHTML = content;
+    } else {
+      this.tip.replaceChildren(content);
+    }
   }
 
   setPosition(position: {left: number; top: number}): void {
-    this.$tip.css('left', `${position.left}px`);
-    this.$tip.css('top', `${position.top}px`);
+    this.tip.style.left = `${position.left}px`;
+    this.tip.style.top = `${position.top}px`;
   }
 
   show(): void {
-    this.$tip.css('display', 'block');
+    this.tip.style.display = 'block';
   }
 
   hide(): void {
-    this.$tip.css('display', 'none');
+    this.tip.style.display = 'none';
   }
 }
 
@@ -134,8 +162,8 @@ export class BaseChart extends Base {
   // loosen the inherited `Base` `settings: S | null` to `any`.
   declare settings: any;
 
-  $container: any = null;
-  $chart: any = null;
+  container: HTMLElement | null = null;
+  chart: HTMLElement | null = null;
 
   chartBaseClass = 'cp-chart';
   dataTable: any = null;
@@ -155,8 +183,8 @@ export class BaseChart extends Base {
     }
   }
 
-  init(container: any, settings?: any): void {
-    this.$container = container;
+  init(container: ElementArg, settings?: any): void {
+    this.container = resolveElement(container);
 
     this.setSettings(BaseChart.defaults);
     this.setSettings(settings);
@@ -178,7 +206,7 @@ export class BaseChart extends Base {
   // it's called repeatedly to layer defaults + overrides + global config.
   override setSettings(settings?: any, defaults?: any): void {
     const baseSettings = this.settings ?? {};
-    this.settings = $.extend(true, {}, baseSettings, defaults, settings);
+    this.settings = deepExtend({}, baseSettings, defaults, settings);
   }
 
   draw(dataTable: any, settings?: any): void {
@@ -193,16 +221,16 @@ export class BaseChart extends Base {
     this.orientation = this.settings.orientation;
 
     // Set (or reset) the chart element
-    if (this.$chart) {
-      this.$chart.remove();
-    }
+    this.chart?.remove();
 
     let className = this.chartBaseClass;
     if (this.settings.chartClass) {
       className += ' ' + this.settings.chartClass;
     }
 
-    this.$chart = $(`<div class="${className}" />`).appendTo(this.$container);
+    this.chart = document.createElement('div');
+    this.chart.className = className;
+    this.container?.append(this.chart);
   }
 
   resize(): void {
@@ -211,19 +239,15 @@ export class BaseChart extends Base {
 
   onAfterDrawTicks(): void {
     // White border for ticks' text
-    $('.tick', this.$chart).each(function (
-      this: any,
-      _tickKey: any,
-      tick: any
-    ) {
-      const $tickText = $('text', tick);
-
-      const $clone = $tickText.clone();
-      $clone.appendTo(tick);
-
-      $tickText.attr('stroke', '#ffffff');
-      $tickText.attr('stroke-width', 3);
-    });
+    for (const tick of this.chart?.querySelectorAll('.tick') ?? []) {
+      const texts = Array.from(tick.querySelectorAll('text'));
+
+      for (const text of texts) {
+        tick.append(text.cloneNode(true));
+        text.setAttribute('stroke', '#ffffff');
+        text.setAttribute('stroke-width', '3');
+      }
+    }
   }
 }
 
@@ -273,8 +297,9 @@ export class Area extends BaseChart {
 
     const margin = this.getChartMargin();
 
-    this.width = this.$chart.width() - margin.left - margin.right;
-    this.height = this.$chart.height() - margin.top - margin.bottom;
+    const chartSize = contentSize(this.chart!);
+    this.width = chartSize.width - margin.left - margin.right;
+    this.height = chartSize.height - margin.top - margin.bottom;
 
     // Append SVG to chart element
     const svg = {
@@ -285,7 +310,7 @@ export class Area extends BaseChart {
     };
 
     this.svg = d3
-      .select(this.$chart.get(0))
+      .select(this.chart)
       .append('svg')
       .attr('width', svg.width)
       .attr('height', svg.height);
@@ -469,7 +494,7 @@ export class Area extends BaseChart {
     }
 
     if (!this.tip) {
-      this.tip = new Tip(this.$chart);
+      this.tip = new Tip(this.chart);
     }
 
     // Define xAxisTickInterval
@@ -513,20 +538,23 @@ export class Area extends BaseChart {
         this.drawingArea.select('.plot-' + index).attr('r', 5);
 
         // Set tip content
-        const $content = $('<div />');
-        const $xValue = $('<div class="x-value" />').appendTo($content);
-        const $yValue = $('<div class="y-value" />').appendTo($content);
-
-        $xValue.html(this.getXFormatter()(dataValue[0]));
-        $yValue.html(this.getYFormatter()(dataValue[1]));
-
-        const content = $content.get(0);
+        const content = document.createElement('div');
+        const xValue = document.createElement('div');
+        xValue.className = 'x-value';
+        xValue.innerHTML = this.getXFormatter()(dataValue[0]);
+        const yValue = document.createElement('div');
+        yValue.className = 'y-value';
+        yValue.innerHTML = this.getYFormatter()(dataValue[1]);
+        content.append(xValue, yValue);
 
         this.tip.setContent(content);
 
         // Set tip position
         const margin = this.getChartMargin();
 
+        // Show the tip before measuring it: a hidden tip has no width
+        this.tip.show();
+
         const offset = 24;
         const top = y(dataValue[1]) + offset;
         let left;
@@ -534,17 +562,17 @@ export class Area extends BaseChart {
         if (this.orientation !== 'rtl') {
           left = x(dataValue[0]) + margin.left + offset;
 
-          const calcLeft =
-            this.$chart.offset().left + left + this.tip.$tip.width();
-          const maxLeft =
-            this.$chart.offset().left + this.$chart.width() - offset;
+          const chartLeft = this.chart!.getBoundingClientRect().left;
+          const calcLeft = chartLeft + left + contentSize(this.tip.tip).width;
+          const maxLeft = chartLeft + contentSize(this.chart!).width - offset;
 
           if (calcLeft > maxLeft) {
-            left = x(dataValue[0]) - (this.tip.$tip.width() + offset);
+            left = x(dataValue[0]) - (contentSize(this.tip.tip).width + offset);
           }
         } else {
           left =
-            x(dataValue[0]) - (this.tip.$tip.width() + margin.left + offset);
+            x(dataValue[0]) -
+            (contentSize(this.tip.tip).width + margin.left + offset);
         }
 
         if (left < 0) {
@@ -552,7 +580,6 @@ export class Area extends BaseChart {
         }
 
         this.tip.setPosition({top, left});
-        this.tip.show();
       })
       .on('mouseout', (event: any) => {
         const index = d3.select(event.target).attr('data-index');
@@ -572,7 +599,7 @@ export class Area extends BaseChart {
     const values = this.getYTickValues();
     let yTicksMaxWidth = 0;
 
-    $.each(values, (_key: any, value: any) => {
+    values.forEach((value: any) => {
       const characterWidth = 8;
 
       const formatter = this.getYFormatter();
diff --git a/resources/js/modules/component-select/component-select.test.ts b/resources/js/modules/component-select/component-select.test.ts
index 597e3b7e89d..81ac5f731ae 100644
--- a/resources/js/modules/component-select/component-select.test.ts
+++ b/resources/js/modules/component-select/component-select.test.ts
@@ -26,12 +26,6 @@ describe('ComponentSelect', () => {
   let container: HTMLElement;
 
   beforeEach(() => {
-    // Just enough jQuery for the chip wiring, which only binds listeners.
-    (window as any).$ = () => {
-      const wrapped = {on: () => wrapped, off: () => wrapped};
-
-      return wrapped;
-    };
     (window as any).Craft = {
       t: (_category: string, message: string) => message,
       appendHeadHtml: vi.fn(),
@@ -97,4 +91,19 @@ describe('ComponentSelect', () => {
       .dispatchEvent(new MouseEvent('click', {bubbles: true}));
     await vi.waitFor(() => expect(selectedIds()).toEqual(['1', '2', '3']));
   });
+
+  it('opens a chip’s editor when it’s double-clicked', () => {
+    const edit = vi.fn();
+    const first = container.querySelector<HTMLElement>('craft-chip')!;
+    first.insertAdjacentHTML(
+      'beforeend',
+      '<div slot="suffix"><craft-action-menu><div slot="content"><craft-action-item data-edit-action>Edit</craft-action-item></div></craft-action-menu></div>'
+    );
+    first.querySelector('[data-edit-action]')!.addEventListener('click', edit);
+    new ComponentSelect(container, settings);
+
+    first.dispatchEvent(new MouseEvent('dblclick', {bubbles: true}));
+
+    expect(edit).toHaveBeenCalledOnce();
+  });
 });
diff --git a/resources/js/modules/component-select/component-select.ts b/resources/js/modules/component-select/component-select.ts
index 3be51fedf23..df0dbaf9363 100644
--- a/resources/js/modules/component-select/component-select.ts
+++ b/resources/js/modules/component-select/component-select.ts
@@ -17,6 +17,9 @@ import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
 import {addActionsToChip} from '@/common/craft/chip-actions';
 import {hasMousePointerEvents} from '@/common/craft/pointer';
+import {resolveElement} from '@/common/utils/dom';
+import {jq} from '@/common/utils/jquery';
+import {onLongPress} from '@vueuse/core';
 
 // `Craft` and `$` (jQuery) remain page globals. The Choose menu and the
 // *chip* action menus are both modern, self-booting `craft-action-menu`s
@@ -24,7 +27,6 @@ import {hasMousePointerEvents} from '@/common/craft/pointer';
 // keeps a jQuery `disclosureMenu()` fallback for old/plugin-rendered chip
 // markup.
 declare const Craft: any;
-declare const $: any;
 
 /** Removal fade duration, ms (legacy `Craft.ComponentSelectInput.REMOVE_FX_DURATION`). */
 const REMOVE_FX_DURATION = 200;
@@ -171,7 +173,6 @@ export class ComponentSelect extends Base<ComponentSelectSettings> {
   #replacing: HTMLElement | null = null;
 
   /** jQuery-wrapped Create button the activate handler is bound to. */
-  #$createBtn: any = null;
 
   #initialized = false;
 
@@ -258,8 +259,8 @@ export class ComponentSelect extends Base<ComponentSelectSettings> {
     );
 
     if (this.#createBtn && this.settings.createAction) {
-      this.#$createBtn = $(this.#createBtn);
-      this.#$createBtn.on('activate', this.#handleCreateActivate);
+      // A craft-button clicks on Enter and Space too
+      this.#createBtn.addEventListener('click', this.#handleCreateActivate);
     }
 
     this.#initialized = true;
@@ -288,8 +289,7 @@ export class ComponentSelect extends Base<ComponentSelectSettings> {
       this.#handleReplaceComponent
     );
 
-    this.#$createBtn?.off('activate', this.#handleCreateActivate);
-    this.#$createBtn = null;
+    this.#createBtn?.removeEventListener('click', this.#handleCreateActivate);
 
     this.#initialized = false;
     componentSelectData.delete(this.container);
@@ -797,29 +797,35 @@ export class ComponentSelect extends Base<ComponentSelectSettings> {
       destructive: true,
     });
 
-    addActionsToChip($(chip), actions);
+    addActionsToChip(chip, actions);
   }
 
   /**
-   * dblclick — and taphold, via the jQuery Touch Events plugin the CP loads —
-   * on a chip triggers its action menu's `[data-edit-action]` item, matching
-   * the legacy port. The listeners live on the chip itself, so they need no
-   * teardown; they go away with the chip.
+   * Double-clicking a chip, or long-pressing it on a touch screen, triggers
+   * its action menu's `[data-edit-action]` item. The listeners live on the
+   * chip itself, so they go away with it.
    */
   #initChipEditShortcut(chip: HTMLElement): void {
-    $(chip).on('dblclick taphold', (ev: any) => {
-      // Don't open the edit screen when tapholding a button — that's a drag.
-      if (ev.type === 'taphold' && ev.target.nodeName === 'BUTTON') {
-        return;
-      }
-
+    const edit = () => {
       const menu = this.#chipDisclosureMenu(chip);
-      if (menu) {
-        // `$container` is jQuery on the legacy DisclosureMenu and a native
-        // element on the modern port; `$()` normalizes both.
-        $(menu.$container).find('[data-edit-action]').trigger('click');
-      }
-    });
+      const container = resolveElement(menu?.$container);
+      container?.querySelector<HTMLElement>('[data-edit-action]')?.click();
+    };
+
+    chip.addEventListener('dblclick', edit);
+    onLongPress(
+      chip,
+      (ev) => {
+        // A long press on a button is a drag
+        if (
+          ev.pointerType === 'touch' &&
+          (ev.target as Element | null)?.nodeName !== 'BUTTON'
+        ) {
+          edit();
+        }
+      },
+      {delay: 750}
+    );
   }
 
   /**
@@ -845,16 +851,18 @@ export class ComponentSelect extends Base<ComponentSelectSettings> {
       return {$container: container};
     }
 
-    const $trigger = $(chip)
-      .find(
-        '[slot="suffix"] [data-disclosure-trigger], .chip-actions .action-btn'
-      )
-      .first();
+    const trigger = chip.querySelector(
+      '[slot="suffix"] [data-disclosure-trigger], .chip-actions .action-btn'
+    );
 
     // The legacy menu plugin comes with the Yii2 adapter
-    return $trigger.length && typeof $trigger.disclosureMenu === 'function'
-      ? $trigger.disclosureMenu().data('disclosureMenu')
-      : null;
+    const $ = jq();
+    if (!trigger || !$ || !('disclosureMenu' in $.fn)) {
+      return null;
+    }
+
+    // oxlint-disable-next-line typescript/no-explicit-any
+    return ($(trigger) as any).disclosureMenu().data('disclosureMenu');
   }
 
   /**
diff --git a/resources/js/modules/cp-modal/cp-modal.test.ts b/resources/js/modules/cp-modal/cp-modal.test.ts
index 7c82050b5be..c60fdf6e000 100644
--- a/resources/js/modules/cp-modal/cp-modal.test.ts
+++ b/resources/js/modules/cp-modal/cp-modal.test.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vite-plus/test';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {CpModal} from './cp-modal';
@@ -39,7 +38,6 @@ async function loaded(): Promise<void> {
 
 describe('CpModal', () => {
   beforeEach(() => {
-    vi.stubGlobal('$', $);
     vi.stubGlobal('Craft', {
       t: (_category: string, message: string) => message,
       baseCpUrl: 'https://example.test/admin',
@@ -100,6 +98,21 @@ describe('CpModal', () => {
     expect(dialog().opened).toBe(false);
   });
 
+  it('submits spaces and plus signs as typed', async () => {
+    const onSubmit = vi.fn();
+    new CpModal('entries/reassign-modal', {onSubmit});
+    await loaded();
+
+    dialog().querySelector('input')!.value = 'Hello world + more';
+    button('Reassign').click();
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalled());
+
+    const posted = request.mock.lastCall![0].data as string;
+    expect(new URLSearchParams(posted).get('ns[newOwner]')).toBe(
+      'Hello world + more'
+    );
+  });
+
   it('asks before a dismissal discards changes', async () => {
     const onCancel = vi.fn();
     const confirm = vi.fn(() => false);
diff --git a/resources/js/modules/cp-modal/cp-modal.ts b/resources/js/modules/cp-modal/cp-modal.ts
index c8b6f843fdf..99926ef394c 100644
--- a/resources/js/modules/cp-modal/cp-modal.ts
+++ b/resources/js/modules/cp-modal/cp-modal.ts
@@ -17,14 +17,19 @@ import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {getCpUrl} from '@/common/craft/url';
 import {findDeltaData} from '@/common/craft/delta';
 import {t} from '@craftcms/ui/utilities/translate';
-import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
+import {
+  appendBodyHtml,
+  appendElementHtml,
+  appendHeadHtml,
+  serializeFormInputs,
+} from '@craftcms/ui/utilities/dom';
+import {jq} from '@/common/utils/jquery';
 import {setElementAttributes} from '@/common/craft/attributes';
 import {showError, showSuccess} from '@/modules/messages/messages';
 import {commandShortcut} from '@/common/utils/keyShortcuts';
 import {registerShortcut, type ShortcutRegistration} from '@/common/shortcuts';
 
 declare const Craft: any;
-declare const $: any;
 
 /** A `craft-dialog`. */
 interface CpModalDialog extends HTMLElement {
@@ -81,11 +86,6 @@ const DEFAULTS: CpModalSettings = {
  * and renders validation errors inline. Booted from PHP deletion blockers
  * (`new Craft.CpModal('…', {…})`).
  *
- * Like its sibling {@link CpScreenSlideout}, it keeps the jQuery seam
- * (`declare const $`) for the form, because the delta-tracking data
- * (`.data('initialSerializedValue' | 'delta-names' | 'serializer')`) shares
- * those jQuery conventions with the rest of the CP-screen framework.
- *
  * Emits `beforeLoad`, `load`, `submit`, `close` and `cancel`.
  */
 export class CpModal extends Base {
@@ -101,12 +101,14 @@ export class CpModal extends Base {
   #fieldsWithErrors: ArrayLike<Element>[] = [];
   #shortcuts: ShortcutRegistration;
 
-  // jQuery refs (form-ops seam), mirroring the legacy `$`-prefixed fields.
-  #$container: any = null;
-  #$content: any = null;
-  #$loadSpinner: any = null;
-  #$cancelBtn: any = null;
-  #$saveBtn: any = null;
+  #container: HTMLFormElement;
+  #content: HTMLElement;
+  #loadSpinner: HTMLElement & {hidden: boolean};
+  #cancelBtn: HTMLElement;
+  #saveBtn: (HTMLElement & {loading?: boolean}) | null = null;
+  #deltaNames: string[] = [];
+  #initialDeltaValues: UiValues = {};
+  #initialSerializedValue: string | undefined;
 
   constructor(action?: string, settings?: Partial<CpModalSettings>) {
     super();
@@ -127,52 +129,48 @@ export class CpModal extends Base {
       {id: `cp-modal-${Math.floor(Math.random() * 100000000)}`},
       this.#cpSettings.containerAttributes
     );
-    this.#$container = $(
-      `<${this.#cpSettings.containerElement}/>`,
-      containerAttributes
-    );
-    this.#$container.data('cpModal', this);
-
-    this.#$content = $('<div/>', {class: 'cpmodal-content'}).appendTo(
-      this.#$container
-    );
-
-    this.#$loadSpinner = $('<craft-spinner/>', {
-      class: 'cpmodal-spinner',
-      label: t('Loading'),
-    }).appendTo(this.#$container);
+    // SAFETY: The container is a form unless a caller asks for another element.
+    this.#container = document.createElement(
+      this.#cpSettings.containerElement
+    ) as HTMLFormElement;
+    setElementAttributes(this.#container, containerAttributes);
+    jq()?.(this.#container).data('cpModal', this);
+
+    this.#content = document.createElement('div');
+    this.#content.className = 'cpmodal-content';
+
+    this.#loadSpinner = document.createElement(
+      'craft-spinner'
+    ) as HTMLElement & {
+      hidden: boolean;
+    };
+    this.#loadSpinner.className = 'cpmodal-spinner';
+    this.#loadSpinner.setAttribute('label', t('Loading'));
+    this.#container.append(this.#content, this.#loadSpinner);
 
-    this.#$cancelBtn = $('<craft-button/>', {
-      type: 'button',
-      slot: 'footer',
-      text: t('Cancel'),
-    });
+    this.#cancelBtn = this.#footerButton(t('Cancel'));
 
     if (this.#cpSettings.showSubmitButton) {
-      this.#$saveBtn = $('<craft-button/>', {
-        type: 'button',
-        slot: 'footer',
-        variant: 'primary',
-        text: t('Save'),
-        'aria-keyshortcuts': commandShortcut('S'),
-      });
+      this.#saveBtn = this.#footerButton(t('Save'));
+      this.#saveBtn.setAttribute('variant', 'primary');
+      this.#saveBtn.setAttribute('aria-keyshortcuts', commandShortcut('S'));
     }
 
     this.dialog.append(
-      this.#$container[0],
-      this.#$cancelBtn[0],
-      ...(this.#$saveBtn ? [this.#$saveBtn[0]] : [])
+      this.#container,
+      this.#cancelBtn,
+      ...(this.#saveBtn ? [this.#saveBtn] : [])
     );
 
-    this.addListener(this.#$cancelBtn[0], 'click', () => {
+    this.addListener(this.#cancelBtn, 'click', () => {
       this.closeMeMaybe();
     });
-    if (this.#$saveBtn) {
-      this.addListener(this.#$saveBtn[0], 'click', () => {
-        this.#$container[0].requestSubmit();
+    if (this.#saveBtn) {
+      this.addListener(this.#saveBtn, 'click', () => {
+        this.#container.requestSubmit();
       });
     }
-    this.addListener(this.#$container[0], 'submit', 'handleSubmit');
+    this.addListener(this.#container, 'submit', 'handleSubmit');
     this.#shortcuts = registerShortcut('Mod+S', (ev) => this.handleSubmit(ev), {
       target: this.dialog,
       description: () => t('Save'),
@@ -192,6 +190,14 @@ export class CpModal extends Base {
     void this.load();
   }
 
+  #footerButton(label: string): HTMLElement {
+    const button = document.createElement('craft-button');
+    button.setAttribute('type', 'button');
+    button.setAttribute('slot', 'footer');
+    button.textContent = label;
+    return button;
+  }
+
   load(data?: UiValues, refreshInitialData?: boolean): Promise<void> {
     return new Promise((resolve, reject) => {
       this.trigger('beforeLoad');
@@ -206,7 +212,7 @@ export class CpModal extends Base {
 
       sendLegacyRequest(
         actionClient,
-        $.extend(
+        Object.assign(
           {
             params: Object.assign(
               {},
@@ -215,7 +221,7 @@ export class CpModal extends Base {
             ),
             signal: this.#abortController.signal,
             headers: {
-              'X-Craft-Container-Id': this.#$container.attr('id'),
+              'X-Craft-Container-Id': this.#container.id,
             },
           },
           this.#cpSettings.requestOptions,
@@ -226,15 +232,10 @@ export class CpModal extends Base {
           this.update(response.data)
             .then(() => {
               if (refreshInitialData !== false) {
-                this.#$container.data('delta-names', response.data.deltaNames);
-                this.#$container.data(
-                  'initial-delta-values',
-                  response.data.initialDeltaValues
-                );
-                this.#$container.data(
-                  'initialSerializedValue',
-                  this.#$container.serialize()
-                );
+                this.#deltaNames = response.data.deltaNames ?? [];
+                this.#initialDeltaValues =
+                  response.data.initialDeltaValues ?? {};
+                this.#initialSerializedValue = this.#serialize();
               }
               resolve();
             })
@@ -261,41 +262,45 @@ export class CpModal extends Base {
   }
 
   showLoadSpinner(): void {
-    this.#$loadSpinner.prop('hidden', false);
+    this.#loadSpinner.hidden = false;
   }
 
   hideLoadSpinner(): void {
-    this.#$loadSpinner.prop('hidden', true);
+    this.#loadSpinner.hidden = true;
   }
 
-  update(data: any): Promise<void> {
-    return new Promise((resolve) => {
-      this.namespace = data.namespace;
+  async update(data: any): Promise<void> {
+    this.namespace = data.namespace;
 
-      if (data.bodyClass) {
-        this.#$content.addClass(data.bodyClass);
-      }
+    if (data.bodyClass) {
+      this.#content.classList.add(
+        ...String(data.bodyClass).split(/\s+/).filter(Boolean)
+      );
+    }
 
-      this.#$content.html(data.content);
+    // Runs any scripts in the content, as jQuery's `html()` did
+    this.#content.replaceChildren();
+    await appendElementHtml(data.content ?? '', this.#content);
 
-      if (data.submitButtonLabel) {
-        this.#$saveBtn?.text(data.submitButtonLabel);
-      }
+    if (data.submitButtonLabel && this.#saveBtn) {
+      this.#saveBtn.textContent = data.submitButtonLabel;
+    }
 
-      if (data.formAttributes) {
-        setElementAttributes(this.#$container, data.formAttributes);
-      }
+    if (data.formAttributes) {
+      setElementAttributes(this.#container, data.formAttributes);
+    }
 
+    return new Promise((resolve) => {
       requestAnimationFrame(() => {
         void appendHeadHtml(data.headHtml).then(() =>
           appendBodyHtml(data.bodyHtml)
         );
 
-        initLegacyUi(this.#$content);
-        loadElementThumbs(this.#$content);
+        initLegacyUi(this.#content);
+        loadElementThumbs(this.#content);
 
         if (!isMobileBrowser()) {
-          setFocusWithin(this.#$content[0]!);
+          setFocusWithin(this.#content);
         }
 
         resolve();
@@ -305,11 +310,15 @@ export class CpModal extends Base {
   }
 
   showSubmitSpinner(): void {
-    this.#$saveBtn?.prop('loading', true);
+    if (this.#saveBtn) {
+      this.#saveBtn.loading = true;
+    }
   }
 
   hideSubmitSpinner(): void {
-    this.#$saveBtn?.prop('loading', false);
+    if (this.#saveBtn) {
+      this.#saveBtn.loading = false;
+    }
   }
 
   handleSubmit(ev: Event): void {
@@ -321,11 +330,11 @@ export class CpModal extends Base {
     this.showSubmitSpinner();
 
     const data = findDeltaData(
-      this.#$container.data('initialSerializedValue'),
-      this.#$container.serialize(),
-      this.#$container.data('delta-names'),
+      this.#initialSerializedValue ?? '',
+      this.#serialize(),
+      this.#deltaNames,
       null,
-      this.#$container.data('initial-delta-values')
+      this.#initialDeltaValues
     );
 
     actionClient
@@ -391,22 +400,31 @@ export class CpModal extends Base {
         ...(this.namespace ? [this.namespace] : []),
         ...name.split('.'),
       ];
-      const $field = this.#$container
-        .find(
+      const fields = new Set<Element>(
+        this.#container.querySelectorAll(
           `[data-attribute="${CSS.escape(name)}"], [data-error-key="${CSS.escape(name)}"]`
         )
-        .add(
-          this.#$container
-            .find(`[name="${CSS.escape(inputName(path))}"]`)
-            .closest('craft-field')
-        );
-      if ($field.length) {
-        addErrorsToField($field, fieldErrors);
-        $field
-          .filter('craft-field')
-          .children('ul.errors')
-          .attr('slot', 'feedback');
-        this.#fieldsWithErrors.push($field);
+      );
+      for (const input of this.#container.querySelectorAll(
+        `[name="${CSS.escape(inputName(path))}"]`
+      )) {
+        const field = input.closest('craft-field');
+        if (field) {
+          fields.add(field);
+        }
+      }
+      if (fields.size) {
+        const field = [...fields];
+        addErrorsToField(field, fieldErrors);
+        for (const el of field) {
+          if (el.localName === 'craft-field') {
+            el.querySelector(':scope > ul.errors')?.setAttribute(
+              'slot',
+              'feedback'
+            );
+          }
+        }
+        this.#fieldsWithErrors.push(field);
       }
     });
   }
@@ -418,16 +436,22 @@ export class CpModal extends Base {
     this.#fieldsWithErrors = [];
   }
 
+  /** Legacy code can swap in its own serializer through jQuery's `data()`. */
+  #serialize(): string {
+    const serializer = jq()?.(this.#container).data('serializer');
+    // `findDeltaData()` reads spaces as `%20`, as jQuery's serialize() wrote
+    // them; URLSearchParams writes them as `+`, and a literal `+` as `%2B`
+    return typeof serializer === 'function'
+      ? serializer()
+      : serializeFormInputs(this.#container).replaceAll('+', '%20');
+  }
+
   isDirty(): boolean {
-    const initialValue = this.#$container.data('initialSerializedValue');
-    if (initialValue === undefined) {
+    if (this.#initialSerializedValue === undefined) {
       return false;
     }
 
-    const serializer =
-      this.#$container.data('serializer') ||
-      (() => this.#$container.serialize());
-    return initialValue !== serializer();
+    return this.#initialSerializedValue !== this.#serialize();
   }
 
   closeMeMaybe(): void {
diff --git a/resources/js/modules/dashboard/NewUsers.vue b/resources/js/modules/dashboard/NewUsers.vue
index 73a5cb75ab4..05a8600b1e4 100644
--- a/resources/js/modules/dashboard/NewUsers.vue
+++ b/resources/js/modules/dashboard/NewUsers.vue
@@ -3,7 +3,6 @@
   import {useResizeObserver} from '@vueuse/core';
   import {actionClient, t} from '@craftcms/ui';
   import {data as chartData} from '@actions/Dashboard/Widgets/NewUsersController';
-  import {jq} from '@/common/utils/jquery';
   import {Area, DataTable} from '@/modules/chart/chart';
 
   const props = defineProps<{
@@ -47,7 +46,7 @@
       await nextTick();
       if (abort.signal.aborted) return;
 
-      chart = new Area(jq()!(container.value!), {
+      chart = new Area(container.value!, {
         yAxis: {
           formatter: (chart: any) => (value: number) =>
             chart.formatLocale.format(
diff --git a/resources/js/modules/dashboard/useDashboard.ts b/resources/js/modules/dashboard/useDashboard.ts
index f09a932e887..3f3166d1a15 100644
--- a/resources/js/modules/dashboard/useDashboard.ts
+++ b/resources/js/modules/dashboard/useDashboard.ts
@@ -1,7 +1,6 @@
 import {useAnnouncer} from '@/common/composables/useAnnouncer';
 import {useMessages} from '@/modules/messages/useMessages';
 import {provideHtmlWidgets} from './htmlWidgets';
-import {jq} from '@/common/utils/jquery';
 
 import {
   computed,
@@ -107,15 +106,16 @@ export function useDashboard(props: {
   });
 
   function refreshGrid() {
-    if (!grid) return;
+    // A refresh can land after the dashboard unmounts and destroys the grid
+    if (!grid?.container) return;
 
-    grid.$items = jq()!(container.value!).children('.item');
-    grid.$items.each((_: number, element: HTMLElement) =>
-      jq()!(element).data('colspan', Number(element.dataset.colspan))
+    grid.setItems(
+      Array.from(container.value!.children).filter((child) =>
+        child.matches('.item')
+      )
     );
-    grid.setItems();
     grid.refreshCols(true);
-    if (!grid.items.length) grid.$container.height('auto');
+    if (!grid.items.length) grid.container.style.height = 'auto';
   }
 
   function refreshTypes() {
diff --git a/resources/js/modules/data-table-sorter/index.ts b/resources/js/modules/data-table-sorter/index.ts
deleted file mode 100644
index 0f3c2a68ce6..00000000000
--- a/resources/js/modules/data-table-sorter/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import {DataTableSorter} from './data-table-sorter';
-
-export {DataTableSorter};
diff --git a/resources/js/modules/element-action-trigger/globals.ts b/resources/js/modules/element-action-trigger/compat.ts
similarity index 100%
rename from resources/js/modules/element-action-trigger/globals.ts
rename to resources/js/modules/element-action-trigger/compat.ts
diff --git a/resources/js/modules/element-action-trigger/index.ts b/resources/js/modules/element-action-trigger/index.ts
deleted file mode 100644
index 4fa67dfee1e..00000000000
--- a/resources/js/modules/element-action-trigger/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import './globals';
-import {ElementActionTrigger} from './element-action-trigger';
-
-export {ElementActionTrigger};
diff --git a/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts b/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts
new file mode 100644
index 00000000000..c171bcf38dc
--- /dev/null
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts
@@ -0,0 +1,88 @@
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {initLegacyUi} from '@/common/craft/legacy-ui';
+import {ElementDeletionManager} from './element-deletion-manager';
+
+vi.mock('@/common/craft/legacy-ui', () => ({initLegacyUi: vi.fn()}));
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+it('lists the blockers and resolves one from its action', async () => {
+  vi.spyOn(actionClient, 'post').mockResolvedValue({
+    data: {
+      blockers: [
+        {
+          summary: 'The entry has authors.',
+          details: '<p>Reassign them first.</p>',
+          actions: [
+            {
+              label: 'Reassign',
+              class: 'reassign',
+              attributes: {'data-reassign': 'yes'},
+              callback: "resolve('Reassigned.')",
+            },
+          ],
+        },
+      ],
+      elementPreview: '<strong>Home</strong>',
+      totalElements: 1,
+      headHtml: '',
+      bodyHtml: '',
+    },
+  } as never);
+
+  const manager = new ElementDeletionManager('craft\\elements\\Entry', [1]);
+  await vi.waitFor(() =>
+    expect(document.querySelector('.edm-blocker')).not.toBeNull()
+  );
+
+  const dialog = document.querySelector('.element-deletion-modal')!;
+  expect(dialog.querySelector('.edm-heading strong')?.textContent).toBe('Home');
+  await vi.waitFor(() =>
+    expect(dialog.querySelector('.edm-details')?.textContent).toBe(
+      'Reassign them first.'
+    )
+  );
+
+  const button = dialog.querySelector<HTMLElement>('.edm-actions .reassign')!;
+  expect(button.dataset.reassign).toBe('yes');
+  button.click();
+
+  await vi.waitFor(() =>
+    expect(dialog.querySelector('.edm-blocker--resolved')).not.toBeNull()
+  );
+  expect(
+    dialog.querySelector('.edm-blocker-resolved-message')?.textContent
+  ).toBe('Reassigned.');
+  expect(manager.blockers).toHaveLength(0);
+});
+
+it('initializes a blocker once all of its details are in', async () => {
+  vi.spyOn(actionClient, 'post').mockResolvedValue({
+    data: {
+      blockers: [
+        {
+          summary: 'The entry has authors.',
+          details:
+            '<script src="https://example.com/library.js"></script><div class="later-control"></div>',
+        },
+      ],
+      elementPreview: '<strong>Home</strong>',
+      totalElements: 1,
+      headHtml: '',
+      bodyHtml: '',
+    },
+  } as never);
+  let controlWasIn: boolean | null = null;
+  vi.mocked(initLegacyUi).mockImplementation((container) => {
+    controlWasIn = !!(container as Element).querySelector('.later-control');
+  });
+
+  new ElementDeletionManager('craft\\elements\\Entry', [1]);
+
+  await vi.waitFor(() => expect(controlWasIn).not.toBeNull());
+  expect(controlWasIn).toBe(true);
+});
diff --git a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
index 3e35bb0beb1..f9d43b7d54f 100644
--- a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
@@ -4,7 +4,12 @@ import type CraftDialog from '@craftcms/ui/components/dialog/dialog';
 import './element-deletion-manager.css';
 import {t} from '@craftcms/ui/utilities/translate';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
-import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
+import {
+  appendBodyHtml,
+  appendElementHtml,
+  appendHeadHtml,
+} from '@craftcms/ui/utilities/dom';
+import {setElementAttributes} from '@/common/craft/attributes';
 import {elementTypeName} from '@/common/craft/element-types';
 import {elevatedSessionManager} from '@/modules/auth/elevated-session/manager';
 import {create} from '@craftcms/ui/utilities/create';
@@ -14,7 +19,6 @@ import {initLegacyUi} from '@/common/craft/legacy-ui';
 
 // jQuery-built blocker markup + Craft.ui/Craft.cp seams, shown in a
 // `craft-dialog`.
-declare const $: any;
 declare const Craft: any;
 
 const DEFAULTS = {
@@ -42,7 +46,8 @@ export class ElementDeletionManager extends Base {
   elementIds: any = null;
   hardDelete = false;
   modal: CraftDialog | null = null;
-  $blockersContainer: any = null;
+  blockersContainer: HTMLElement | null = null;
+
   submitButton: CraftButton | null = null;
   blockers: any = null;
   succeeded = false;
@@ -81,6 +86,8 @@ export class ElementDeletionManager extends Base {
       this.blockers.push(new Blocker(this, blocker));
     }
 
+    await Promise.all(this.blockers.map((blocker: Blocker) => blocker.ready));
+
     await appendHeadHtml(data.headHtml);
     await appendBodyHtml(data.bodyHtml);
   }
@@ -178,18 +185,18 @@ export class ElementDeletionManager extends Base {
     dialog.nonModal = true;
     dialog.resizable = true;
 
-    const $heading = $('<h1/>', {
-      class: 'edm-heading',
-      html: t(
-        'Before deleting {label}, please address the following {numBlockers, plural, =1{issue} other{issues}}:',
-        {numBlockers: data.blockers.length, label: data.elementPreview}
-      ),
-    }).appendTo(dialog);
-    dialog.label = $heading.text().replace(/\s+/g, ' ').trim();
-
-    this.$blockersContainer = $('<div/>', {class: 'edm-blockers'}).appendTo(
-      dialog
+    const heading = document.createElement('h1');
+    heading.className = 'edm-heading';
+    heading.innerHTML = t(
+      'Before deleting {label}, please address the following {numBlockers, plural, =1{issue} other{issues}}:',
+      {numBlockers: data.blockers.length, label: data.elementPreview}
     );
+    dialog.append(heading);
+    dialog.label = (heading.textContent ?? '').replace(/\s+/g, ' ').trim();
+
+    this.blockersContainer = document.createElement('div');
+    this.blockersContainer.className = 'edm-blockers';
+    dialog.append(this.blockersContainer);
 
     const footer = document.createElement('div');
     footer.slot = 'footer';
@@ -257,8 +264,11 @@ class Blocker extends Base {
   manager: any = null;
   data: any = null;
   id: any = null;
-  $container: any = null;
+  container: HTMLElement | null = null;
+
   buttons: CraftButton[] = [];
+  /** Settles once the details markup is in and the blocker's UI is initialized. */
+  ready: Promise<void> = Promise.resolve();
 
   constructor(manager?: any, data?: any) {
     super();
@@ -271,16 +281,18 @@ class Blocker extends Base {
     this.manager = manager;
     this.data = data;
     this.buttons = [];
+    let detailsAppended: Promise<unknown> = Promise.resolve();
 
     this.id = `blocker-${Math.floor(Math.random() * 1000000)}`;
-    this.$container = $('<div/>', {
-      id: this.id,
-      class: 'edm-blocker',
-    }).appendTo(this.manager.$blockersContainer);
+    const container = document.createElement('div');
+    container.id = this.id;
+    container.className = 'edm-blocker';
+    this.manager.blockersContainer.append(container);
+    this.container = container;
 
-    const $heading = $('<h2/>', {class: 'edm-blocker-heading'}).appendTo(
-      this.$container
-    );
+    const heading = document.createElement('h2');
+    heading.className = 'edm-blocker-heading';
+    container.append(heading);
 
     if (this.data.details) {
       // A disclosure: the heading's button shows and hides the details. It's
@@ -295,14 +307,14 @@ class Blocker extends Base {
       toggle.setAttribute('aria-controls', `${this.id}-details`);
       toggle.iconPosition = 'suffix';
       toggle.append(this.data.summary);
-      $heading.append(toggle);
+      heading.append(toggle);
 
-      const $details = $('<div/>', {
-        id: `${this.id}-details`,
-        class: 'edm-details',
-        hidden: true,
-        html: this.data.details,
-      }).appendTo(this.$container);
+      const details = document.createElement('div');
+      details.id = `${this.id}-details`;
+      details.className = 'edm-details';
+      details.hidden = true;
+      container.append(details);
+      detailsAppended = appendElementHtml(this.data.details, details);
 
       const setExpanded = (expanded: boolean): void => {
         const rtl = getComputedStyle(toggle).direction === 'rtl';
@@ -312,7 +324,7 @@ class Blocker extends Base {
           : rtl
             ? 'chevron-left'
             : 'chevron-right';
-        $details.prop('hidden', !expanded);
+        details.hidden = !expanded;
       };
 
       setExpanded(false);
@@ -320,13 +332,13 @@ class Blocker extends Base {
         setExpanded(toggle.getAttribute('aria-expanded') !== 'true');
       });
     } else {
-      $heading.text(this.data.summary);
+      heading.textContent = this.data.summary;
     }
 
     if (this.data.actions) {
-      const $actions = $('<div/>', {class: 'edm-actions'}).appendTo(
-        this.$container
-      );
+      const actions = document.createElement('div');
+      actions.className = 'edm-actions';
+      container.append(actions);
 
       for (const action of this.data.actions) {
         const button = create(
@@ -338,7 +350,6 @@ class Blocker extends Base {
           },
           action.label
         );
-        const $button = $(button);
         this.buttons.push(button);
 
         if (action.id) {
@@ -346,14 +357,16 @@ class Blocker extends Base {
         }
 
         if (action.class) {
-          $button.addClass(action.class);
+          button.classList.add(
+            ...String(action.class).split(/\s+/).filter(Boolean)
+          );
         }
 
         if (action.attributes) {
-          $button.attr(action.attributes);
+          setElementAttributes(button, action.attributes);
         }
 
-        $button.appendTo($actions);
+        actions.append(button);
 
         button.addEventListener('click', async () => {
           if (action.callback) {
@@ -429,19 +442,22 @@ class Blocker extends Base {
       }
     }
 
-    initLegacyUi(this.$container);
+    this.ready = detailsAppended.then(() => initLegacyUi(container));
   }
 
   async resolve(message: any = null): Promise<void> {
-    this.$container.addClass('edm-blocker--resolved');
+    this.container?.classList.add('edm-blocker--resolved');
     for (const button of this.buttons) {
       button.disabled = true;
     }
-    const $messageContainer = $('<div/>', {
-      class: 'edm-blocker-resolved-message',
-    }).appendTo(this.$container);
-    $('<craft-icon/>', {name: 'check'}).appendTo($messageContainer);
-    $('<p/>', {text: message ?? t('Resolved')}).appendTo($messageContainer);
+    const messageContainer = document.createElement('div');
+    messageContainer.className = 'edm-blocker-resolved-message';
+    const icon = document.createElement('craft-icon');
+    icon.setAttribute('name', 'check');
+    const text = document.createElement('p');
+    text.textContent = message ?? t('Resolved');
+    messageContainer.append(icon, text);
+    this.container?.append(messageContainer);
     this.manager.resolveBlocker(this);
   }
 }
diff --git a/resources/js/modules/element-select-input/README.md b/resources/js/modules/element-select-input/README.md
index 2f6b1b33367..0b1bbbd7596 100644
--- a/resources/js/modules/element-select-input/README.md
+++ b/resources/js/modules/element-select-input/README.md
@@ -6,7 +6,11 @@ element list markup with their corresponding input controllers. Their `settings`
 attribute replaces inline JavaScript boots, while `input-class` preserves the
 existing plugin subclass escape hatch.
 
-The controllers still use the `Craft` and jQuery page globals for legacy element
-indexes, chip actions, rendering, and animation. The custom element is the public
-interface for modern callers; the `Craft.*ElementSelectInput` registrations remain
-compatibility shims.
+The `ElementSelect` component (`FormFields::elementSelectHtml()`) always boots
+through these elements, picking one from the element type. Any non-core input
+class becomes `input-class`, which the Yii2 adapter resolves to the plugin's
+class. The adapter's legacy `_includes/forms/elementSelect.twig` still boots its
+`jsClass` inline for plugins that extend it. The `Craft.*SelectInput` globals are
+the adapter's own jQuery-based copies
+(`yii2-adapter/resources/js/element-select-input`), kept for plugins that
+subclass them; core's classes aren't on `Craft`.
diff --git a/resources/js/modules/element-select-input/base-element-select-input.test.ts b/resources/js/modules/element-select-input/base-element-select-input.test.ts
index 0ce9bd75e8e..e2ee4ac495c 100644
--- a/resources/js/modules/element-select-input/base-element-select-input.test.ts
+++ b/resources/js/modules/element-select-input/base-element-select-input.test.ts
@@ -1,269 +1,155 @@
-import jquery from 'jquery';
-import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
-import {
-  BaseElementSelectInput,
-  type BaseElementSelectInputSettings,
-} from './base-element-select-input';
-import {EntrySelectInput} from './entry-select-input';
-import {TagSelectInput} from './tag-select-input';
+import {BaseElementSelectInput} from './base-element-select-input';
 
-it('preserves legacy element select input extension points', () => {
-  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+vi.mock('@/common/craft/icon-svg', () => ({
+  iconSvg: async () => document.createElement('svg'),
+}));
 
-  const input = new UninitializedElementSelectInput();
-
-  expect('_ignoreSearchBlur' in input).toBe(true);
-  expect('_initialized' in input).toBe(true);
-  expect('_$replaceElement' in input).toBe(true);
-  expect(
-    Object.getOwnPropertyDescriptor(
-      BaseElementSelectInput.prototype,
-      'thumbLoader'
-    )
-  ).toMatchObject({get: expect.any(Function)});
-  expect(
-    Object.getOwnPropertyDescriptor(
-      BaseElementSelectInput.prototype,
-      '_animateStructureElementAway'
-    )?.value
-  ).toBeInstanceOf(Function);
-
-  expect(
-    Object.getOwnPropertyDescriptor(EntrySelectInput.prototype, 'section')
-  ).toMatchObject({get: expect.any(Function)});
-  expect(
-    Object.getOwnPropertyDescriptor(
-      EntrySelectInput.prototype,
-      'showElementEditor'
-    )?.value
-  ).toBeInstanceOf(Function);
-
-  for (const method of [
-    'focusOption',
-    'searchForTags',
-    'focusSelectedOption',
-    'focusFirstOption',
-    'killSearchMenu',
-  ]) {
-    expect(Object.hasOwn(TagSelectInput.prototype, method)).toBe(true);
-  }
-  expect(
-    Object.getOwnPropertyDescriptor(TagSelectInput.prototype, 'fieldName')
-  ).toMatchObject({get: expect.any(Function)});
+function chip(id: number): string {
+  return `<li><div class="element chip small" data-id="${id}" data-site-id="1">
+    <input type="hidden" name="related[]" value="${id}">
+    <div class="chip-content"><span class="label">Entry ${id}</span><div class="chip-actions"></div></div>
+  </div></li>`;
+}
 
-  expect(BaseElementSelectInput.defaults).toMatchObject({
-    allowAdd: true,
-    allowRemove: true,
-    modalSettings: {},
+function boot(settings = {}): BaseElementSelectInput {
+  document.body.innerHTML = `
+    <div id="related" class="elementselect">
+      <ul class="elements">${chip(1)}${chip(2)}</ul>
+      <div class="flex"><button type="button" class="btn add">Add</button></div>
+    </div>`;
+
+  return new BaseElementSelectInput({
+    id: 'related',
+    name: 'related',
+    elementType: 'CraftCms\\Cms\\Entry\\Elements\\Entry',
+    ...settings,
   });
-  expect(TagSelectInput.defaults).toMatchObject({tagGroupId: null});
+}
+
+const container = () => document.getElementById('related')!;
+const addButton = () => container().querySelector('.btn.add')!;
+const postedIds = () =>
+  [
+    ...container().querySelectorAll<HTMLInputElement>(
+      'input[name="related[]"]'
+    ),
+  ].map((input) => input.value);
+
+beforeEach(() => {
+  expect(window.jQuery).toBeUndefined();
 });
 
 afterEach(() => {
-  vi.unstubAllGlobals();
+  document.body.innerHTML = '';
   vi.restoreAllMocks();
 });
 
-/**
- * An instance with just enough state stubbed to exercise the chip actions —
- * `init()` needs the DOM, jQuery and garnish, none of which these behaviors
- * touch.
- */
-function chipActionInput(elementSelect: any = null) {
-  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+it('reads its chips and hides Add once the limit is reached', () => {
+  const input = boot({limit: 2});
 
-  const showModal = vi.fn();
-  const removeElement = vi.fn();
-  const input = new UninitializedElementSelectInput();
-  input.settings = {
-    allowRemove: true,
-    elementType: 'entry',
-    sortable: false,
-  } as BaseElementSelectInputSettings;
-  input.elementSelect = elementSelect;
-  input.showModal = showModal;
-  input.removeElement = removeElement;
+  expect(input.getSelectedElementIds()).toEqual([1, 2]);
+  expect(addButton().classList.contains('hidden')).toBe(true);
+});
 
-  return {input, showModal, removeElement};
-}
+it('removes a chip from the value and frees its slot', async () => {
+  const input = boot({limit: 2});
+  const change = vi.fn();
+  container().addEventListener('change', change);
 
-it('stages the element the modal should replace', () => {
-  const {input, showModal} = chipActionInput();
-  const $chip = {chip: true};
+  input.removeElement(input.getElementById(1)!);
 
-  input.showReplaceModal($chip);
+  expect(input.getSelectedElementIds()).toEqual([2]);
+  expect(postedIds()).toEqual(['2']);
+  expect(addButton().classList.contains('hidden')).toBe(false);
+  expect(change).toHaveBeenCalled();
+});
 
-  expect(input._$replaceElement).toBe($chip);
-  expect(showModal).toHaveBeenCalledOnce();
+it('adds the modal selection as chips posted with the field', async () => {
+  vi.spyOn(actionClient, 'post').mockResolvedValue({
+    data: {
+      elements: {
+        3: [
+          '<div class="element chip small" data-id="3" data-site-id="1"><div class="chip-content"><div class="chip-actions"></div></div></div>',
+        ],
+      },
+      headHtml: '',
+      bodyHtml: '',
+    },
+  } as never);
+  const input = boot();
+
+  await input.onModalSelect([{id: 3, siteId: 1}]);
+
+  expect(input.getSelectedElementIds()).toEqual([1, 2, 3]);
+  expect(postedIds()).toEqual(['1', '2', '3']);
 });
 
-it('removes the whole selection when the chip is part of it', () => {
-  const $chip = {chip: true};
-  const $selection = {selection: true};
-  const {input, removeElement} = chipActionInput({
-    isSelected: (candidate: any) => candidate === $chip,
-    getSelectedItems: () => $selection,
+it('swaps the chip staged for replacement with the selection', async () => {
+  vi.spyOn(actionClient, 'post').mockResolvedValue({
+    data: {
+      elements: {
+        5: [
+          '<div class="element chip small" data-id="5" data-site-id="1"><div class="chip-content"><div class="chip-actions"></div></div></div>',
+        ],
+      },
+      headHtml: '',
+      bodyHtml: '',
+    },
+  } as never);
+  const input = boot();
+  vi.spyOn(input, 'createModal').mockResolvedValue({
+    show: vi.fn(),
+    hide: vi.fn(),
+    setDisabledElementIds: vi.fn(),
   });
 
-  input.removeElementOrSelection($chip);
-  expect(removeElement).toHaveBeenCalledWith($selection);
+  input.showReplaceModal(input.getElementById(1)!);
+  await input.onModalSelect([{id: 5, siteId: 1}]);
 
-  const $other = {chip: true};
-  input.removeElementOrSelection($other);
-  expect(removeElement).toHaveBeenLastCalledWith($other);
+  expect(input.getSelectedElementIds()).toEqual([2, 5]);
 });
 
-it('routes its injected chip actions through those methods', () => {
-  vi.stubGlobal('Craft', {t: (_category: string, message: string) => message});
+it('moves a chip when its reorder button asks to', () => {
+  const input = boot();
+  const button = input
+    .getElementById(2)!
+    .querySelector('craft-reorder-button')!;
 
-  const {input, showModal, removeElement} = chipActionInput();
-  const $chip = {chip: true};
-  const actions = input.defineElementActions($chip);
-
-  expect(actions.map((action) => action.label)).toEqual(['Replace', 'Remove']);
-
-  actions[0].callback();
-  expect(input._$replaceElement).toBe($chip);
-  expect(showModal).toHaveBeenCalledOnce();
+  button.dispatchEvent(
+    new CustomEvent('craft-reorder', {detail: {direction: 'up'}, bubbles: true})
+  );
 
-  actions[1].callback();
-  expect(removeElement).toHaveBeenCalledWith($chip);
+  expect(input.getSelectedElementIds()).toEqual([2, 1]);
+  expect(postedIds()).toEqual(['2', '1']);
 });
 
-it("moves elements from their reorder buttons' menus", () => {
-  vi.stubGlobal('$', jquery);
-
-  class UninitializedElementSelectInput extends BaseElementSelectInput {}
-
-  const input = new UninitializedElementSelectInput();
-  const list = document.createElement('ul');
-  list.innerHTML =
-    '<li><div class="element"><craft-reorder-button></craft-reorder-button></div></li>';
-  input.$elementsContainer = jquery(list);
-  input.moveElementForward = vi.fn();
-  input.moveElementBackward = vi.fn();
-  input.initReorderButtons();
+it("opens its chips' Edit items with its own settings, ahead of the global listener", () => {
+  const openSlideout = vi.fn();
+  vi.stubGlobal('Craft', {...window.Craft, openSlideout});
+  const globalListener = vi.fn();
+  window.addEventListener('craft:edit-element', globalListener);
+  const input = boot({prevalidate: true});
 
-  const button = list.querySelector('craft-reorder-button')!;
-  const reorder = (direction: 'up' | 'down') =>
-    button.dispatchEvent(
-      new CustomEvent('craft-reorder', {
-        bubbles: true,
-        composed: true,
-        detail: {direction},
-      })
+  const editFrom = (trigger: Element) =>
+    window.dispatchEvent(
+      new CustomEvent('craft:edit-element', {detail: {trigger}})
     );
 
-  reorder('up');
-  expect(input.moveElementForward).toHaveBeenCalledOnce();
-  expect(vi.mocked(input.moveElementForward).mock.calls[0]![0][0]).toBe(button);
+  editFrom(input.getElementById(2)!.querySelector('.chip-actions')!);
+  expect(openSlideout).toHaveBeenCalledOnce();
+  expect(openSlideout.mock.calls[0]![0]).toMatch(/elementId=2.*prevalidate=1/);
+  expect(globalListener).not.toHaveBeenCalled();
 
-  reorder('down');
-  expect(input.moveElementBackward).toHaveBeenCalledOnce();
-  expect(vi.mocked(input.moveElementBackward).mock.calls[0]![0][0]).toBe(
-    button
-  );
-});
-
-/**
- * An instance with just enough stubbed to observe the order of
- * `onModalSelect()`'s side effects — the real method wants jQuery, garnish and
- * a live modal, none of which bear on when the replaced chip is dropped.
- */
-function replaceFlowInput() {
-  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+  editFrom(addButton());
+  expect(globalListener).toHaveBeenCalledOnce();
 
-  const log: string[] = [];
-  const input = new UninitializedElementSelectInput();
+  input.destroy();
+  editFrom(document.querySelector('.chip-actions')!);
+  expect(openSlideout).toHaveBeenCalledOnce();
+  expect(globalListener).toHaveBeenCalledTimes(2);
 
-  input.settings = {
-    viewMode: 'list',
-    elementType: 'entry',
-    limit: null,
-    maintainHierarchy: false,
-    showActionMenu: false,
-    criteria: {},
-  } as BaseElementSelectInputSettings;
-  input.$elements = {length: 1};
-
-  const removeElement = vi.fn(() => {
-    log.push('removeElement');
-    input.$elements = {length: 0};
-    // Stands in for the host reacting to the value change. Vue schedules its
-    // re-render as a microtask, so anything that lands after this marker is
-    // too late to be part of the same combined update.
-    void Promise.resolve().then(() => log.push('host re-render'));
-  });
-  const selectElements = vi.fn(() => {
-    log.push('selectElements');
-  });
-
-  input.removeElement = removeElement;
-  input.selectElements = selectElements as never;
-  input.updateDisabledElementsInModal = vi.fn();
-
-  vi.stubGlobal('$', (value: unknown) => ({rendered: value}));
-  vi.spyOn(actionClient, 'post').mockImplementation(async () => {
-    log.push('render-elements');
-    return {data: {elements: {7: ['<div/>']}, headHtml: '', bodyHtml: ''}};
-  });
-  vi.stubGlobal('Craft', {
-    appendHeadHtml: vi.fn(),
-    appendBodyHtml: vi.fn(),
-    setElementSize: vi.fn(),
-  });
-
-  return {input, log, removeElement, selectElements};
-}
-
-it('drops the replaced chip only once the replacement has rendered', async () => {
-  const {input, log, removeElement} = replaceFlowInput();
-  const $chip = {chip: true};
-  input._$replaceElement = $chip;
-
-  await input.onModalSelect([{id: 7, siteId: 1}]);
-
-  expect(removeElement).toHaveBeenCalledWith($chip);
-  expect(input._$replaceElement).toBeNull();
-
-  // Removing before the request tore down hosts that key on this input's
-  // value, leaving the resumed flow writing into a detached DOM — Replace
-  // opened its modal but never completed. The removal and the insertion also
-  // have to share one synchronous stretch, so those hosts see a single
-  // combined change rather than an empty intermediate one.
-  expect(log).toEqual([
-    'render-elements',
-    'removeElement',
-    'selectElements',
-    'host re-render',
-  ]);
-});
-
-it('frees the replaced chip’s slot before applying the limit', async () => {
-  const {input, selectElements} = replaceFlowInput();
-  input.settings.limit = 1;
-  input._$replaceElement = {chip: true};
-
-  await input.onModalSelect([{id: 7, siteId: 1}]);
-
-  // The outgoing chip still occupied the field's only slot when the limit was
-  // applied, the replacement would be sliced away and nothing would be added.
-  expect(selectElements).toHaveBeenCalledWith([
-    expect.objectContaining({id: 7}),
-  ]);
-});
-
-it.each([
-  '<button class="btn add">Choose</button>',
-  '<button command="--add-element">Choose</button>',
-])('finds the add button in supported element picker markup', (html) => {
-  const {input} = chipActionInput();
-  const container = document.createElement('div');
-  container.innerHTML = html;
-  input.$container = {
-    find: (selector: string) => container.querySelectorAll(selector),
-  };
-
-  expect([...input.getAddElementsBtn()]).toEqual([container.firstElementChild]);
+  window.removeEventListener('craft:edit-element', globalListener);
+  vi.unstubAllGlobals();
 });
diff --git a/resources/js/modules/element-select-input/base-element-select-input.ts b/resources/js/modules/element-select-input/base-element-select-input.ts
index 6a98ca8e91a..30232c3c436 100644
--- a/resources/js/modules/element-select-input/base-element-select-input.ts
+++ b/resources/js/modules/element-select-input/base-element-select-input.ts
@@ -1,14 +1,15 @@
 import {
   BACKSPACE_KEY,
   Base,
-  bod,
   CustomSelect,
   DELETE_KEY,
   DOWN_KEY,
   DragSort,
   firstFocusableElement,
+  getOffset,
   hasAttr,
   isCtrlKeyPressed,
+  isFocusable,
   RETURN_KEY,
   Select,
   UP_KEY,
@@ -19,6 +20,7 @@ import {
   animateAll,
   getElementInfo,
   setElementSize,
+  type ElementInfo,
 } from '@/common/craft/element-markup';
 import {announce} from '@/common/announcer';
 import {loadElementThumbs} from '@/modules/element-thumb-loader/globals';
@@ -30,12 +32,13 @@ import {getActionUrl} from '@/common/craft/url';
 import {t} from '@craftcms/ui/utilities/translate';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
-import {addActionsToChip} from '@/common/craft/chip-actions';
+import {addActionsToChip, type ChipAction} from '@/common/craft/chip-actions';
 import {hasMousePointerEvents} from '@/common/craft/pointer';
 import {showError} from '@/modules/messages/messages';
+import {jq} from '@/common/utils/jquery';
+import {onLongPress} from '@vueuse/core';
 
 declare const Craft: any;
-declare const $: any;
 
 const noop = () => {};
 
@@ -64,6 +67,15 @@ type ElementSelectViewMode =
   | 'cards'
   | 'cards-grid';
 
+/** A selected element, as the modal and search hand it over. */
+export interface SelectedElement {
+  id: number;
+  siteId: number | null;
+  /** The chip to add, once rendered. */
+  element?: HTMLElement | null;
+  [key: string]: unknown;
+}
+
 export interface BaseElementSelectInputSettings extends GarnishBaseSettings {
   id: string | null;
   name: string | null;
@@ -92,7 +104,7 @@ export interface BaseElementSelectInputSettings extends GarnishBaseSettings {
   modalStorageKey: string | null;
   modalSettings: ElementSelectModalSettings;
   onAddElements(): void;
-  onSelectElements(elements: Array<{id: number}>): void;
+  onSelectElements(elements: SelectedElement[]): void;
   onRemoveElements(): void;
   sortable: boolean;
   selectable: boolean;
@@ -103,7 +115,6 @@ export interface BaseElementSelectInputSettings extends GarnishBaseSettings {
   canUpload?: boolean;
   describedBy?: string;
   sectionId?: number;
-  tagGroupId?: number | null;
   targetSiteId?: number;
   selectionLabel?: string;
 }
@@ -112,10 +123,6 @@ interface ActionMenuElement extends HTMLElement {
   opened: boolean;
 }
 
-/**
- * Settings defaults that don't rely on runtime globals.
- * Craft.t() labels are resolved lazily in init() so Craft is available.
- */
 const DEFAULTS: BaseElementSelectInputSettings = {
   id: null,
   name: null,
@@ -159,22 +166,13 @@ const DEFAULTS: BaseElementSelectInputSettings = {
   editorSettings: {},
 };
 
+const CHIP_ACTIONS =
+  ':scope > .chip-content > .chip-actions, :scope > .card-titlebar > .card-actions-container > .card-actions';
+
 /**
- * BaseElementSelectInput — a port of `Craft.BaseElementSelectInput` onto the
- * modern `@craftcms/garnish` `Base`. Manages a relational field's element list:
- * drag-sort, element selection, search-as-you-type, and modal element picker.
- *
- * Seam notes:
- * - The "Add" button uses `$(btn).on('activate', ...)` because `activate` is a
- *   jQuery synthetic event; `addListener` (native addEventListener) would miss
- *   jQuery-triggered activation.
- * - `taphold` on element items likewise uses `$(el).on('taphold', ...)`.
- * - `keydown` on element items uses `addListener` (native event).
- * - `Garnish.Select` / `DragSort` / `CustomSelect` are imported from the
- *   modern @craftcms/garnish package.
- * - Booted via `new Craft.BaseElementSelectInput({id, …})` from PHP templates,
- *   so there is no custom element — the class is registered on `window.Craft`
- *   via `registerCraftGlobals`.
+ * A relation field's element list: drag-sort, selection, search-as-you-type,
+ * and the element selector modal. Booted by `<craft-element-select-input>`
+ * and its entry and asset variants.
  */
 export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings> {
   declare settings: BaseElementSelectInputSettings;
@@ -183,74 +181,42 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   static readonly REMOVE_FX_DURATION = 200;
   static defaults = DEFAULTS;
 
-  elementSelect: any = null;
-  elementSort: any = null;
+  elementSelect: Select | null = null;
+  elementSort: DragSort | null = null;
   modal: any = null;
   elementEditor: any = null;
   modalFirstOpen = true;
   openingModal = false;
 
-  $container: any = null;
-  $form: any = null;
-  $elementsContainer: any = null;
-  $elements: any = null;
-  $addElementBtn: any = null;
-  $spinner: any = null;
+  container!: HTMLElement;
+  form: HTMLFormElement | null = null;
+  elementsContainer!: HTMLElement;
+  elements: HTMLElement[] = [];
+  addElementBtn: HTMLElement | null = null;
+  spinner: HTMLElement | null = null;
 
   searchTimeout: ReturnType<typeof setTimeout> | null = null;
-  searchMenu: any = null;
-  $searchContainer: any = null;
-  $searchInput: any = null;
-  $searchSpinner: any = null;
+  searchMenu: CustomSelect | null = null;
+  searchContainer: HTMLElement | null = null;
+  searchInput: HTMLInputElement | null = null;
+  searchSpinner: HTMLElement | null = null;
 
   modalStorageKey: string | null = null;
 
-  _$replaceElement: any = null;
-  _ignoreSearchBlur = false;
-  _initialized = false;
-
-  #handleShowElementEditor: ((ev: any) => void) | null = null;
+  replacing: HTMLElement | null = null;
+  #ignoreSearchBlur = false;
+  #cleanups: Array<() => void> = [];
+  /** Cleanups for each chip's own listeners, run when it leaves the input. */
+  #chipCleanups = new Map<HTMLElement, Array<() => void>>();
 
-  constructor(settings?: any) {
+  constructor(settings?: Partial<BaseElementSelectInputSettings>) {
     super();
     if (new.target === BaseElementSelectInput) {
       this.init(settings);
     }
   }
 
-  get thumbLoader(): any {
-    console.warn(
-      'Craft.BaseElementSelectInput::thumbLoader is deprecated. Craft.cp.elementThumbLoader should be used instead.'
-    );
-    return Craft.cp.elementThumbLoader;
-  }
-
-  init(...initArgs: any[]): void {
-    // Legacy compat: positional arguments were once accepted.
-    let settings = initArgs[0];
-    if (!$.isPlainObject(settings)) {
-      const argNames = [
-        'id',
-        'name',
-        'elementType',
-        'sources',
-        'criteria',
-        'sourceElementId',
-        'limit',
-        'modalStorageKey',
-        'fieldId',
-      ];
-      const normalized: Partial<BaseElementSelectInputSettings> = {};
-      for (let i = 0; i < argNames.length; i++) {
-        if (initArgs[i] !== undefined) {
-          Object.assign(normalized, {[argNames[i]!]: initArgs[i]});
-        } else {
-          break;
-        }
-      }
-      settings = normalized;
-    }
-
+  init(settings?: Partial<BaseElementSelectInputSettings>): void {
     this.settings = Object.assign(
       {},
       BaseElementSelectInput.defaults,
@@ -266,17 +232,20 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       this.settings.sortable = false;
     }
 
-    this.$container = this.getContainer();
-    elementSelectInputData.set(this.$container[0], this);
-    this.$form = this.$container.closest('form');
-    this.$container.data('elementSelect', this);
+    const container = this.getContainer();
+    if (!container) {
+      throw new Error(`No element select input with ID [${this.settings.id}].`);
+    }
+    this.container = container;
+    elementSelectInputData.set(this.container, this);
+    this.form = this.container.closest('form');
 
-    this.$elementsContainer = this.getElementsContainer();
-    this.$addElementBtn = this.getAddElementsBtn();
-    this.$spinner = this.getSpinner();
-    this.$searchContainer = this.getSearchContainer();
-    this.$searchInput = this.getSearchInput();
-    this.$searchSpinner = this.getSearchSpinner();
+    this.elementsContainer = this.getElementsContainer();
+    this.addElementBtn = this.getAddElementsBtn();
+    this.spinner = this.getSpinner();
+    this.searchContainer = this.getSearchContainer();
+    this.searchInput = this.getSearchInput();
+    this.searchSpinner = this.getSearchSpinner();
 
     this.initElementSelect();
     this.initElementSort();
@@ -284,38 +253,44 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     this.initSearch();
     this.resetElements();
 
-    if (this.$addElementBtn.length) {
-      // activate is a jQuery synthetic event — must use jQuery .on(), not addListener.
-      $(this.$addElementBtn).on(
-        'activate.elementSelectInput',
+    if (this.addElementBtn) {
+      // `<craft-button>` fires click for Enter and Space too
+      this.addListener(
+        this.addElementBtn,
+        'click',
         () => void this.showModal()
       );
     }
 
-    requestAnimationFrame(() => {
-      this._initialized = true;
-    });
-
     if (this.elementSelect) {
       this.addListener(window, 'mousedown', (ev) => {
-        if (!(ev instanceof MouseEvent) || !(ev.target instanceof Element)) {
-          return;
-        }
         const target = ev.target;
         if (
-          !this.$container.is(target) &&
-          !this.$container.find(target).length &&
-          !$(target).closest('.menu').length
+          target instanceof Element &&
+          !this.container.contains(target) &&
+          !target.closest('.menu')
         ) {
-          this.elementSelect.deselectAll();
+          this.elementSelect?.deselectAll();
         }
       });
     }
 
+    // Chip menu items announce themselves on the window; the ones from this
+    // input's chips are handled here, ahead of the global listeners, so they
+    // use this input's settings and update its chips.
+    const onChipAction = (ev: Event) => this.#onChipAction(ev as CustomEvent);
+    for (const name of ['craft:edit-element', 'craft:element-action']) {
+      window.addEventListener(name, onChipAction, {capture: true});
+      this.#cleanups.push(() =>
+        window.removeEventListener(name, onChipAction, {capture: true})
+      );
+    }
+
+    // The legacy element editor stores itself on its form
     setTimeout(() => {
-      this.elementEditor = this.$container
-        .closest('form')
-        .data('elementEditor');
+      this.elementEditor = this.form
+        ? (jq()?.(this.form).data('elementEditor') ?? null)
+        : null;
     }, 100);
   }
 
@@ -329,65 +304,69 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       this.killSearchMenu();
     }
 
-    this.$addElementBtn?.off('.elementSelectInput');
-    this.$elementsContainer?.off('.elementSelectInput');
-    if (this.#handleShowElementEditor) {
-      this.$elements?.off('taphold', this.#handleShowElementEditor);
-      this.#handleShowElementEditor = null;
+    for (const cleanup of this.#cleanups) {
+      cleanup();
     }
+    this.#cleanups = [];
+    this.#cleanUpChips([...this.#chipCleanups.keys()]);
 
-    this.elementSort?.destroy?.();
+    this.elementSort?.destroy();
     this.elementSort = null;
-    this.elementSelect?.destroy?.();
+    this.elementSelect?.destroy();
     this.elementSelect = null;
     this.modal?.destroy?.();
     this.modal = null;
 
-    if (this.$container?.[0]) {
-      elementSelectInputData.delete(this.$container[0]);
-    }
+    elementSelectInputData.delete(this.container);
 
     super.destroy();
   }
 
   get totalSelected(): number {
-    return this.$elements.length;
+    return this.elements.length;
   }
 
-  getContainer(): any {
-    return $('#' + this.settings.id);
+  getContainer(): HTMLElement | null {
+    return this.settings.id ? document.getElementById(this.settings.id) : null;
   }
 
-  getElementsContainer(): any {
-    return this.$container.children('.elements');
+  getElementsContainer(): HTMLElement {
+    return this.container.querySelector<HTMLElement>(':scope > .elements')!;
   }
 
-  getElements(): any {
-    if (this.$elementsContainer.hasClass('structure')) {
-      return this.$elementsContainer.find('> li .row .element');
-    } else {
-      return this.$elementsContainer.find('> li > .element');
-    }
+  getElements(): HTMLElement[] {
+    const selector = this.elementsContainer.classList.contains('structure')
+      ? ':scope > li .row .element'
+      : ':scope > li > .element';
+
+    return [...this.elementsContainer.querySelectorAll<HTMLElement>(selector)];
   }
 
-  getSearchContainer(): any {
-    return this.$container.find('.elementselect__search-input-wrapper');
+  getSearchContainer(): HTMLElement | null {
+    return this.container.querySelector<HTMLElement>(
+      '.elementselect__search-input-wrapper'
+    );
   }
 
-  getSearchInput(): any {
-    return this.$searchContainer.find('input');
+  getSearchInput(): HTMLInputElement | null {
+    return this.searchContainer?.querySelector('input') ?? null;
   }
 
-  getSearchSpinner(): any {
-    return this.$searchContainer.find('.spinner');
+  getSearchSpinner(): HTMLElement | null {
+    return this.searchContainer?.querySelector<HTMLElement>('.spinner') ?? null;
   }
 
-  getAddElementsBtn(): any {
-    return this.$container.find('[command="--add-element"], .btn.add');
+  getAddElementsBtn(): HTMLElement | null {
+    return this.container.querySelector<HTMLElement>(
+      '[command="--add-element"], .btn.add'
+    );
   }
 
-  getSpinner(): any {
-    return this.$container.find('.spinner');
+  getSpinner(): HTMLElement | null {
+    // Not the search input's spinner, which is hidden once the limit is reached
+    return this.container.querySelector<HTMLElement>(
+      ':scope > .flex > .spinner'
+    );
   }
 
   initElementSelect(): void {
@@ -396,12 +375,11 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     }
   }
 
-  elementSelectSettings(): any {
+  elementSelectSettings(): Record<string, unknown> {
     return {
       multi: this.settings.sortable,
-      filter: (target: Element) => {
-        return !$(target).closest('a[href],button,[role=button]').length;
-      },
+      filter: (target: Element) =>
+        !target.closest('a[href],button,[role=button]'),
       makeFocusable: false,
     };
   }
@@ -411,79 +389,92 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
    * items are chosen, whether the server or `createNewElement()` added it.
    */
   initReorderButtons(): void {
-    this.$elementsContainer.on(
-      'craft-reorder.elementSelectInput',
-      'craft-reorder-button',
-      (event: JQuery.TriggeredEvent) => {
-        const {direction} = (
-          event.originalEvent as CustomEvent<{direction: 'up' | 'down'}>
-        ).detail;
-        const $button = $(event.currentTarget);
-        if (direction === 'up') {
-          this.moveElementForward($button);
-        } else {
-          this.moveElementBackward($button);
-        }
+    this.addListener(this.elementsContainer, 'craft-reorder', (ev) => {
+      const button =
+        ev.target instanceof Element
+          ? ev.target.closest('craft-reorder-button')
+          : null;
+      const element = button?.closest<HTMLElement>('.element');
+      if (!element) {
+        return;
       }
-    );
+
+      const {direction} = (
+        ev as unknown as CustomEvent<{direction: 'up' | 'down'}>
+      ).detail;
+      if (direction === 'up') {
+        this.moveElementForward(element);
+      } else {
+        this.moveElementBackward(element);
+      }
+    });
   }
 
   initElementSort(): void {
-    if (this.settings.sortable && hasMousePointerEvents()) {
-      this.elementSort = new DragSort({
-        container: this.$elementsContainer,
-        filter: this.settings.selectable
-          ? () => {
-              if (
-                this.elementSort.$targetItem
-                  .children('.element')
-                  .hasClass('sel')
-              ) {
-                return this.elementSelect.getSelectedItems().parent('li');
-              } else {
-                return this.elementSort.$targetItem;
-              }
+    if (!this.settings.sortable || !hasMousePointerEvents()) {
+      return;
+    }
+
+    this.elementSort = new DragSort({
+      container: this.elementsContainer,
+      filter: this.settings.selectable
+        ? () => {
+            const target = this.elementSort?.$targetItem;
+            const element = target?.querySelector(':scope > .element');
+            if (element?.classList.contains('sel') && this.elementSelect) {
+              return this.elementSelect
+                .getSelectedItems()
+                .map((item) => item.parentElement!)
+                .filter((li) => li.tagName === 'LI');
             }
-          : null,
-        ignoreHandleSelector: '.delete',
-        handle: (() => {
-          switch (this.settings.viewMode) {
-            case 'list':
-            case 'list-inline':
-            case 'thumbs':
-            case 'large':
-              return '> .element > .chip-content > .chip-actions > .move-btn';
-            case 'cards':
-              return '> .element > .card-titlebar > .card-actions-container > .card-actions > .move-btn';
-            default:
-              return null;
+            return target ? [target] : [];
           }
-        })(),
-        axis: this.getElementSortAxis(),
-        collapseDraggees: true,
-        magnetStrength: 4,
-        helperLagBase: 1.5,
-        onBeforeDragStart: () => {
-          this.elementEditor?.pause();
-          // Disable the labels' overflow tooltips while dragging so they
-          // don't recompute/pop up during the drag.
-          this.$elementsContainer.find('craft-truncate').attr('disabled', true);
-        },
-        onDragStop: () => {
-          this.elementEditor?.resume();
-          this.$elementsContainer.find('craft-truncate').removeAttr('disabled');
-        },
-        onSortChange: () => {
-          this.onSortChange();
-        },
-      });
-    }
+        : null,
+      ignoreHandleSelector: '.delete',
+      handle: (() => {
+        switch (this.settings.viewMode) {
+          case 'list':
+          case 'list-inline':
+          case 'thumbs':
+          case 'large':
+            return '> .element > .chip-content > .chip-actions > .move-btn';
+          case 'cards':
+            return '> .element > .card-titlebar > .card-actions-container > .card-actions > .move-btn';
+          default:
+            return null;
+        }
+      })(),
+      axis: this.getElementSortAxis(),
+      collapseDraggees: true,
+      magnetStrength: 4,
+      helperLagBase: 1.5,
+      onBeforeDragStart: () => {
+        this.elementEditor?.pause();
+        // Keep the labels' overflow tooltips from popping up mid-drag
+        for (const truncate of this.elementsContainer.querySelectorAll(
+          'craft-truncate'
+        )) {
+          truncate.setAttribute('disabled', '');
+        }
+      },
+      onDragStop: () => {
+        this.elementEditor?.resume();
+        for (const truncate of this.elementsContainer.querySelectorAll(
+          'craft-truncate'
+        )) {
+          truncate.removeAttribute('disabled');
+        }
+      },
+      onSortChange: () => {
+        this.onSortChange();
+      },
+    } as any);
   }
 
   getElementSortAxis(): 'x' | 'y' | null {
     if (
       this.settings.viewMode === 'list' &&
-      !this.getElementsContainer().hasClass('inline-chips')
+      !this.elementsContainer.classList.contains('inline-chips')
     ) {
       return 'y';
     }
@@ -493,7 +484,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   canAddMoreElements(): boolean {
     return (
       this.settings.allowAdd &&
-      (!this.settings.limit || this.$elements.length < this.settings.limit)
+      (!this.settings.limit || this.elements.length < this.settings.limit)
     );
   }
 
@@ -506,203 +497,97 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   }
 
   enableAddElementsBtn(): void {
-    if (this.settings.allowAdd && this.$addElementBtn.length) {
-      this.$addElementBtn.removeClass('hidden');
-      this.$searchContainer.removeClass('hidden');
+    if (this.settings.allowAdd && this.addElementBtn) {
+      this.addElementBtn.classList.remove('hidden');
+      this.searchContainer?.classList.remove('hidden');
     }
     this.updateButtonContainer();
   }
 
   disableAddElementsBtn(): void {
-    if (this.$addElementBtn.length) {
-      this.$addElementBtn.addClass('hidden');
-      this.$searchContainer.addClass('hidden');
+    if (this.addElementBtn) {
+      this.addElementBtn.classList.add('hidden');
+      this.searchContainer?.classList.add('hidden');
     }
     this.updateButtonContainer();
   }
 
   showSpinner(): void {
-    this.$spinner?.removeClass('hidden');
+    this.spinner?.classList.remove('hidden');
     this.updateButtonContainer();
   }
 
   hideSpinner(): void {
-    this.$spinner?.addClass('hidden');
+    this.spinner?.classList.add('hidden');
     this.updateButtonContainer();
   }
 
   updateButtonContainer(): void {
-    const $container =
-      this.$addElementBtn.length && this.$addElementBtn.parent('.flex');
-    if ($container?.length) {
-      if ($container.children(':not(.hidden)').length) {
-        $container.removeClass('hidden');
-      } else {
-        $container.addClass('hidden');
-      }
+    const container = this.addElementBtn?.parentElement;
+    if (!container?.classList.contains('flex')) {
+      return;
     }
+
+    const anyVisible = [...container.children].some(
+      (child) => !child.classList.contains('hidden')
+    );
+    container.classList.toggle('hidden', !anyVisible);
   }
 
-  getNextLogicalFocusElement(): any {
+  getNextLogicalFocusElement(): HTMLElement | null {
     if (!this.canAddMoreElements()) {
       return this.getLastActionBtn();
     }
 
     if (
-      this.$searchContainer.length &&
-      !this.$searchContainer.hasClass('hidden')
+      this.searchInput &&
+      !this.searchContainer?.classList.contains('hidden')
     ) {
-      return this.$searchInput;
+      return this.searchInput;
     }
 
-    if (this.$addElementBtn.length && !this.$addElementBtn.hasClass('hidden')) {
-      return this.$addElementBtn;
+    if (
+      this.addElementBtn &&
+      !this.addElementBtn.classList.contains('hidden')
+    ) {
+      return this.addElementBtn;
     }
 
-    return this.$container.attr('tabindex', '-1');
+    this.container.setAttribute('tabindex', '-1');
+    return this.container;
   }
 
   focusNextLogicalElement(): void {
-    const $focusTarget = this.getNextLogicalFocusElement();
-    if ($focusTarget?.length) {
-      $focusTarget.focus();
-    }
-  }
-
-  /** @deprecated */
-  focusLastRemoveBtn(): void {
-    this.focusLastActionBtn();
+    this.getNextLogicalFocusElement()?.focus();
   }
 
-  getLastActionBtn(): any {
-    return this.$container.find('.action-btn').last();
+  getLastActionBtn(): HTMLElement | null {
+    const buttons = this.container.querySelectorAll<HTMLElement>('.action-btn');
+    return buttons[buttons.length - 1] ?? null;
   }
 
   focusLastActionBtn(): void {
-    this.getLastActionBtn().focus();
+    this.getLastActionBtn()?.focus();
   }
 
   resetElements(): void {
-    if (this.$elements !== null) {
-      this.removeElements(this.$elements);
-    } else {
-      this.$elements = $();
+    if (this.elements.length) {
+      this.removeElements(this.elements);
     }
     this.addElements(this.getElements());
   }
 
-  addElements($elements: any): void {
-    for (let i = 0; i < $elements.length; i++) {
-      const $element = $elements.eq(i);
+  addElements(elements: HTMLElement[]): void {
+    for (const element of elements) {
       const actions = this.settings.showActionMenu
-        ? this.defineElementActions($element)
+        ? this.defineElementActions(element)
         : [];
 
       if (actions.length) {
-        addActionsToChip($element, actions);
-
-        const updateMoveButtons = () => {
-          const $li = $element.parent();
-          const $prev = $li.prev();
-          const $next = $li.next();
-
-          return {showForward: !!$prev.length, showBackward: !!$next.length};
-        };
-
-        // The common case (`ElementHtml::componentActionMenu()`): a modern
-        // `<craft-action-menu>`, whose `craft-action-item`s aren't jQuery
-        // disclosure-menu items, so there's no `disclosureMenu` data to read.
-        const element = $element[0];
-        const actionMenu =
-          element instanceof Element
-            ? element.querySelector<ActionMenuElement>('craft-action-menu')
-            : null;
-
-        if (actionMenu) {
-          const moveForwardItem = actionMenu.querySelector(
-            '[data-move-forward]'
-          );
-          const moveBackwardItem = actionMenu.querySelector(
-            '[data-move-backward]'
-          );
-
-          // No public "opening" event on `<craft-action-menu>` to defer to
-          // (mirroring the disclosure-menu `show` handler below), so watch
-          // its reflected `opened` attribute instead.
-          const observer = new MutationObserver(() => {
-            if (!actionMenu.opened) {
-              return;
-            }
-
-            const {showForward, showBackward} = updateMoveButtons();
-            moveForwardItem?.toggleAttribute('hidden', !showForward);
-            moveBackwardItem?.toggleAttribute('hidden', !showBackward);
-          });
-          observer.observe(actionMenu, {
-            attributes: true,
-            attributeFilter: ['opened'],
-          });
-        } else {
-          // An old-markup, or modern-chip-with-legacy-trigger, disclosure menu.
-          const disclosureMenu =
-            $element
-              .find(
-                '> .chip-content > .chip-actions .action-btn, > .card-titlebar > .card-actions-container > .card-actions .action-btn'
-              )
-              .data('disclosureMenu') ||
-            $element
-              .children('[slot="suffix"]')
-              .find('[data-disclosure-trigger]')
-              .first()
-              .data('disclosureMenu');
-
-          if (disclosureMenu) {
-            const moveForwardBtn = disclosureMenu.$container.find(
-              '[data-move-forward]'
-            )[0];
-            const moveBackwardBtn = disclosureMenu.$container.find(
-              '[data-move-backward]'
-            )[0];
-
-            disclosureMenu.on('show', () => {
-              const {showForward, showBackward} = updateMoveButtons();
-
-              if (moveForwardBtn) {
-                disclosureMenu.toggleItem(moveForwardBtn, showForward);
-              }
-              if (moveBackwardBtn) {
-                disclosureMenu.toggleItem(moveBackwardBtn, showBackward);
-              }
-            });
-          }
-        }
+        addActionsToChip(element, actions);
+        this.#watchMoveActions(element);
       }
 
-      // Route the Edit actions through createElementEditor()
-      $element
-        .find('[id*="action-edit"]')
-        .each((_: number, btn: HTMLElement) => {
-          const $btn = $(btn);
-          // Remove the existing handler, and change the ID in case it hasn't been registered yet
-          $btn
-            .off('activate')
-            .attr('id', `${btn.id}-${Math.floor(Math.random() * 1000000)}`);
-          $btn.on('activate', (ev: any) => {
-            const cpEditUrl = $element.data('cp-url');
-            if (
-              cpEditUrl &&
-              ev.originalEvent &&
-              isCtrlKeyPressed(ev.originalEvent)
-            ) {
-              window.open(cpEditUrl);
-              return;
-            }
-            // focus on the button so that when the slideout is closed, it's returned to the button
-            $btn.focus();
-            this.createElementEditor($element);
-          });
-        });
-
       if (this.settings.sortable) {
         // Its menu reorders without a mouse, so it's shown on touch devices too.
         const reorderButton = document.createElement('craft-reorder-button');
@@ -710,83 +595,117 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
         if (this.getElementSortAxis() !== 'y') {
           reorderButton.setAttribute('orientation', 'horizontal');
         }
-        $(reorderButton).appendTo(
-          $element.find(
-            '> .chip-content > .chip-actions, > .card-titlebar > .card-actions-container > .card-actions'
+        element.querySelector(CHIP_ACTIONS)?.append(reorderButton);
+      }
+
+      if (this.settings.editable) {
+        this.addListener(element, 'dblclick', () => this.#editElement(element));
+        this.#onChipCleanup(
+          element,
+          onLongPress(
+            element,
+            (ev) => {
+              if (
+                ev.pointerType === 'touch' &&
+                !(ev.target instanceof Element && ev.target.closest('button'))
+              ) {
+                this.#editElement(element);
+              }
+            },
+            {delay: 750}
           )
         );
       }
+
+      this.addListener(element, 'keydown', (ev) => {
+        if (
+          ev instanceof KeyboardEvent &&
+          [BACKSPACE_KEY, DELETE_KEY].includes(ev.keyCode)
+        ) {
+          ev.stopPropagation();
+          ev.preventDefault();
+          for (const selected of this.elementSelect?.getSelectedItems() ?? []) {
+            this.removeElement(selected);
+          }
+        }
+      });
     }
 
-    loadElementThumbs($elements);
+    loadElementThumbs(elements);
 
-    // `?.` rather than a bare call, matching `elementSort` below: `destroy()`
-    // nulls both, and a host that re-renders this input mid-selection can
-    // destroy the controller between the modal resolving and the chips landing.
-    // `onModalSelect()` keeps the non-structured path clear of that window, but
-    // `selectStructuredElements()` still awaits after the replaced chip is
-    // dropped, so the window survives there. Skipping is the right outcome
-    // anyway — the replacement element is on its way out.
+    // `?.` because a host that re-renders this input mid-selection can destroy
+    // the controller between the modal resolving and the chips landing.
     if (this.settings.selectable) {
-      this.elementSelect?.addItems($elements);
+      this.elementSelect?.addItems(elements);
     }
 
     if (this.settings.sortable) {
-      this.elementSort?.addItems($elements.parent('li'));
+      this.elementSort?.addItems(
+        elements.map((element) => element.parentElement!)
+      );
     }
 
-    if (this.settings.editable) {
-      this.#handleShowElementEditor = (ev: any) => {
-        if (ev.type === 'taphold' && ev.target.nodeName === 'BUTTON') {
-          return;
-        }
-        const $element = $(ev.currentTarget);
-        if (
-          hasAttr($element[0], 'data-editable') &&
-          !$element.hasClass('disabled') &&
-          !$element.hasClass('loading')
-        ) {
-          this.createElementEditor($element);
-        }
-      };
+    this.elements = [...this.elements, ...elements];
+    this.updateAddElementsBtn();
+    this.onAddElements();
+    this.onSortChange();
+  }
 
-      // dblclick is a native event — addListener works.
-      this.addListener(
-        $elements.toArray(),
-        'dblclick',
-        this.#handleShowElementEditor
-      );
+  /** Hides the Move up/down menu items that don't apply when the menu opens. */
+  #watchMoveActions(element: HTMLElement): void {
+    const actionMenu =
+      element.querySelector<ActionMenuElement>('craft-action-menu');
+    if (!actionMenu) {
+      return;
+    }
+
+    const moveForwardItem = actionMenu.querySelector('[data-move-forward]');
+    const moveBackwardItem = actionMenu.querySelector('[data-move-backward]');
 
-      // taphold is a jQuery synthetic event — must use jQuery .on().
-      if ($.isTouchCapable()) {
-        $elements.on('taphold', this.#handleShowElementEditor);
+    // No public "opening" event, so watch the reflected `opened` attribute
+    const observer = new MutationObserver(() => {
+      if (!actionMenu.opened) {
+        return;
       }
-    }
 
-    // keydown is native — addListener works.
-    $elements.each((_: number, el: Element) => {
-      this.addListener(el, 'keydown', (ev) => {
-        if (!(ev instanceof KeyboardEvent)) {
-          return;
-        }
-        if ([BACKSPACE_KEY, DELETE_KEY].includes(ev.keyCode)) {
-          ev.stopPropagation();
-          ev.preventDefault();
-          const $selected = this.elementSelect?.getSelectedItems() ?? $();
-          for (let i = 0; i < $selected.length; i++) {
-            this.removeElement($selected.eq(i));
-          }
-        }
-      });
+      const li = element.parentElement;
+      moveForwardItem?.toggleAttribute('hidden', !li?.previousElementSibling);
+      moveBackwardItem?.toggleAttribute('hidden', !li?.nextElementSibling);
     });
+    observer.observe(actionMenu, {
+      attributes: true,
+      attributeFilter: ['opened'],
+    });
+    this.#onChipCleanup(element, () => observer.disconnect());
+  }
 
-    this.$elements = this.$elements.add($elements);
-    this.updateAddElementsBtn();
-    this.onAddElements();
-    this.onSortChange();
+  #onChipCleanup(element: HTMLElement, cleanup: () => void): void {
+    const cleanups = this.#chipCleanups.get(element) ?? [];
+    cleanups.push(cleanup);
+    this.#chipCleanups.set(element, cleanups);
+  }
+
+  #cleanUpChips(elements: HTMLElement[]): void {
+    for (const element of elements) {
+      for (const cleanup of this.#chipCleanups.get(element) ?? []) {
+        cleanup();
+      }
+      this.#chipCleanups.delete(element);
+    }
+  }
+
+  #editElement(element: HTMLElement): void {
+    if (
+      hasAttr(element, 'data-editable') &&
+      !element.classList.contains('disabled') &&
+      !element.classList.contains('loading')
+    ) {
+      this.createElementEditor(element);
+    }
   }
 
-  defineElementActions($element: any): any[] {
+  defineElementActions(element: HTMLElement): ChipAction[] {
+    // `iconSvg()` is typed to resolve to null too, which ChipAction doesn't allow
     const actions: any[] = [];
 
     if (this.settings.sortable) {
@@ -797,9 +716,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
             axis === 'y' ? 'arrow-up' : isRtl() ? 'arrow-right' : 'arrow-left'
           ),
         label: axis === 'y' ? t('Move up') : t('Move forward'),
-        callback: () => {
-          this.moveElementForward($element);
-        },
+        callback: () => this.moveElementForward(element),
         attributes: {'data-move-forward': true},
       });
       actions.push({
@@ -808,9 +725,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
             axis === 'y' ? 'arrow-down' : isRtl() ? 'arrow-left' : 'arrow-right'
           ),
         label: axis === 'y' ? t('Move down') : t('Move backward'),
-        callback: () => {
-          this.moveElementBackward($element);
-        },
+        callback: () => this.moveElementBackward(element),
         attributes: {'data-move-backward': true},
       });
     }
@@ -820,18 +735,14 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
         actions.push({
           icon: async () => await iconSvg('arrows-rotate'),
           label: t('Replace'),
-          callback: () => {
-            this.showReplaceModal($element);
-          },
+          callback: () => this.showReplaceModal(element),
         });
       }
 
       actions.push({
         icon: async () => await iconSvg('remove'),
         label: t('Remove'),
-        callback: () => {
-          this.removeElementOrSelection($element);
-        },
+        callback: () => this.removeElementOrSelection(element),
       });
     }
 
@@ -839,49 +750,95 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   }
 
   /**
-   * Opens the element selector modal with `$element` staged as the chip the
-   * next selection should replace.
-   *
-   * The Replace behavior lives here rather than inline in
-   * {@link defineElementActions} so consumers that render the chip's action
-   * menu themselves — `ElementSelectControl.vue` via
-   * `<craft-element-select-input>.replaceElement()` — trigger the same flow as the
-   * client-injected menu the Twig stack still gets.
+   * Opens the element selector modal with `element` staged as the chip the
+   * next selection replaces. Shared with hosts that render the chips' action
+   * menus themselves, via `<craft-element-select-input>.replaceElement()`.
    */
-  showReplaceModal($element: any): void {
-    this._$replaceElement = $element;
-    this.showModal();
+  showReplaceModal(element: HTMLElement): void {
+    this.replacing = element;
+    void this.showModal();
   }
 
   /**
-   * Removes `$element`, or — when it's part of the current multi-selection —
-   * the whole selection, matching the Remove action's long-standing behavior.
-   * Shared with consumers that render the menu themselves; see
-   * {@link showReplaceModal}.
+   * Removes `element`, or the whole selection when it's part of it, as the
+   * Remove action does.
    */
-  removeElementOrSelection($element: any): void {
-    if (this.elementSelect?.isSelected($element)) {
+  removeElementOrSelection(element: HTMLElement): void {
+    if (this.elementSelect?.isSelected(element)) {
       this.removeElement(this.elementSelect.getSelectedItems());
     } else {
-      this.removeElement($element);
+      this.removeElement(element);
+    }
+  }
+
+  /** The chip for an element ID. */
+  getElementById(id: number | string): HTMLElement | undefined {
+    return this.elements.find((element) => element.dataset.id == String(id));
+  }
+
+  #onChipAction(ev: CustomEvent): void {
+    const trigger = ev.detail?.trigger;
+    const chip =
+      trigger instanceof Element
+        ? trigger.closest<HTMLElement>('.element')
+        : null;
+
+    if (
+      chip &&
+      this.elements.includes(chip) &&
+      this.handleChipAction(chip, ev.type, ev.detail)
+    ) {
+      ev.stopImmediatePropagation();
+    }
+  }
+
+  /**
+   * Handles an action from a chip's menu, returning whether it did. Edit opens
+   * the element editor with this input's settings, or the edit page in a new
+   * tab on ctrl-click.
+   */
+  protected handleChipAction(
+    chip: HTMLElement,
+    name: string,
+    detail: Record<string, any>
+  ): boolean {
+    if (name !== 'craft:edit-element') {
+      return false;
+    }
+
+    const cpEditUrl = chip.dataset.cpUrl;
+    if (
+      cpEditUrl &&
+      (detail.sourceEvent instanceof MouseEvent ||
+        detail.sourceEvent instanceof KeyboardEvent) &&
+      isCtrlKeyPressed(detail.sourceEvent)
+    ) {
+      window.open(cpEditUrl);
+    } else {
+      this.createElementEditor(chip);
     }
+
+    return true;
   }
 
   /** Opens an element's editor slideout. */
-  createElementEditor($element: any, settings?: Record<string, unknown>): void {
+  createElementEditor(
+    element: HTMLElement,
+    settings?: Record<string, unknown>
+  ): void {
     const params = Object.fromEntries(
       Object.entries({
         elementType: this.settings.elementType,
-        elementId: $element.data('id'),
-        draftId: $element.data('draft-id'),
-        siteId: $element.data('site-id'),
+        elementId: element.dataset.id,
+        draftId: element.dataset.draftId,
+        siteId: element.dataset.siteId,
         prevalidate: this.settings.prevalidate ? 1 : null,
         ...settings,
       }).filter(([, value]) => value !== null && value !== undefined)
     );
 
     void Craft.openSlideout(getActionUrl('elements/edit', params), {
-      opener: $element[0],
+      opener: element,
       onSaved: ({data}: {data?: Record<string, any>}) => {
         // An image saved as a new asset takes the edited asset's place.
         if (data?.replacedAssetId && data.newAssetId) {
@@ -891,82 +848,86 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     });
   }
 
-  replaceElement(elementId: number, replacementId: number): Promise<void> {
-    return new Promise((resolve, reject) => {
-      if (!this.settings.allowRemove) {
-        reject('Elements cannot be removed from this input.');
-        return;
-      }
+  async replaceElement(
+    elementId: number,
+    replacementId: number
+  ): Promise<void> {
+    if (!this.settings.allowRemove) {
+      throw new Error('Elements cannot be removed from this input.');
+    }
 
-      const $existing = this.$elements.filter(`[data-id="${elementId}"]`);
+    const existing = this.getElementById(elementId);
+    if (!existing) {
+      throw new Error(`No element selected with an ID of ${elementId}.`);
+    }
 
-      if (!$existing.length) {
-        reject(`No element selected with an ID of ${elementId}.`);
-        return;
-      }
+    this.showSpinner();
 
-      this.showSpinner();
+    try {
+      const {data} = await actionClient.post('app/render-elements', {
+        elements: [
+          {
+            type: this.settings.elementType,
+            id: replacementId,
+            siteId: this.settings.criteria.siteId,
+            instances: [
+              {
+                context: 'field',
+                ui: ['list', 'list-inline', 'thumbs', 'large'].includes(
+                  this.settings.viewMode
+                )
+                  ? 'chip'
+                  : 'card',
+                size: ['thumbs', 'large'].includes(this.settings.viewMode)
+                  ? 'large'
+                  : 'small',
+                showActionMenu: this.settings.showActionMenu,
+              },
+            ],
+          },
+        ],
+      });
 
-      actionClient
-        .post('app/render-elements', {
-          elements: [
-            {
-              type: this.settings.elementType,
-              id: replacementId,
-              siteId: this.settings.criteria.siteId,
-              instances: [
-                {
-                  context: 'field',
-                  ui: ['list', 'list-inline', 'thumbs', 'large'].includes(
-                    this.settings.viewMode
-                  )
-                    ? 'chip'
-                    : 'card',
-                  size: ['thumbs', 'large'].includes(this.settings.viewMode)
-                    ? 'large'
-                    : 'small',
-                  showActionMenu: this.settings.showActionMenu,
-                },
-              ],
-            },
-          ],
-        })
-        .then(async ({data}: any) => {
-          this.removeElement($existing);
-          const elementInfo = getElementInfo(data.elements[replacementId][0]);
-          this.selectElements([elementInfo]).then(resolve);
-          await appendHeadHtml(data.headHtml);
-          await appendBodyHtml(data.bodyHtml);
-        })
-        .catch((e: any) => {
-          showError(e?.response?.data?.message);
-          reject(e?.response?.data?.message);
-        })
-        .finally(() => {
-          this.hideSpinner();
-        });
-    });
+      this.removeElement(existing);
+      await this.selectElements([
+        this.#selectedElement(getElementInfo(data.elements[replacementId][0])),
+      ]);
+      await appendHeadHtml(data.headHtml);
+      await appendBodyHtml(data.bodyHtml);
+    } catch (e: any) {
+      showError(e?.response?.data?.message);
+      throw e;
+    } finally {
+      this.hideSpinner();
+    }
+  }
+
+  #selectedElement(info: ElementInfo): SelectedElement {
+    return {...info, id: Number(info.id), siteId: info.siteId};
   }
 
   onSortChange(): void {
     this.elementSelect?.resetItemOrder();
-    this.$elements = $().add(this.$elements);
+    // Keep `elements` in DOM order
+    this.elements.sort((a, b) =>
+      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
   }
 
-  moveElementForward($element: any): void {
-    const $li = $element.closest('li');
-    const $prev = $li.prev();
-    if ($prev.length) {
-      $li.insertBefore($prev);
+  moveElementForward(element: HTMLElement): void {
+    const li = element.closest('li');
+    const prev = li?.previousElementSibling;
+    if (li && prev) {
+      prev.before(li);
       this.onSortChange();
     }
   }
 
-  moveElementBackward($element: any): void {
-    const $li = $element.closest('li');
-    const $next = $li.next();
-    if ($next.length) {
-      $li.insertAfter($next);
+  moveElementBackward(element: HTMLElement): void {
+    const li = element.closest('li');
+    const next = li?.nextElementSibling;
+    if (li && next) {
+      next.after(li);
       this.onSortChange();
     }
   }
@@ -974,112 +935,148 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   /**
    * Removes elements from the field value without removing their DOM nodes.
    */
-  removeElements($elements: any): void {
+  removeElements(elements: HTMLElement | HTMLElement[]): void {
+    const removing = Array.isArray(elements) ? elements : [elements];
+
     if (this.settings.selectable) {
-      this.elementSelect.removeItems($elements);
+      this.elementSelect?.removeItems(removing);
     }
 
-    // Removing a relation makes it selectable again, so the modal's disabled
-    // set has to shrink to match.
-    this.updateDisabledElementsInModal();
-
-    $elements.children('input').prop('disabled', true);
+    for (const element of removing) {
+      for (const input of element.querySelectorAll<HTMLInputElement>(
+        ':scope > input'
+      )) {
+        input.disabled = true;
+      }
+    }
 
-    let $nextElement: any, $prevElement: any;
-    if (this.settings.selectable) {
-      const lastIdx = this.$elements.index($elements.last());
-      $nextElement = this.$elements.eq(lastIdx + 1);
-      $prevElement = lastIdx - 1 >= 0 ? this.$elements.eq(lastIdx - 1) : null;
+    let focusTarget: HTMLElement | null = null;
+    if (this.settings.selectable && removing.length) {
+      const lastIdx = this.elements.indexOf(removing[removing.length - 1]!);
+      const neighbor =
+        this.elements[lastIdx + 1] ??
+        (lastIdx - 1 >= 0 ? this.elements[lastIdx - 1] : undefined);
+      if (neighbor && !removing.includes(neighbor)) {
+        focusTarget = this.getElementFocusTarget(neighbor);
+      }
     }
 
-    if ($nextElement?.length || $prevElement?.length) {
-      const $target = $nextElement?.length
-        ? this.getElementFocusTarget($nextElement)
-        : this.getElementFocusTarget($prevElement);
-      $target?.focus();
+    this.elements = this.elements.filter((el) => !removing.includes(el));
+    this.#cleanUpChips(removing);
+
+    // Removing a relation makes it selectable again
+    this.updateDisabledElementsInModal();
+
+    if (focusTarget) {
+      focusTarget.focus();
     } else {
-      setTimeout(() => {
-        this.focusNextLogicalElement();
-      }, 200);
+      setTimeout(() => this.focusNextLogicalElement(), 200);
     }
 
-    this.$elements = this.$elements.not($elements);
     this.updateAddElementsBtn();
     this.onSortChange();
     this.onRemoveElements();
   }
 
-  getElementFocusTarget($element: any): any {
-    if ($element.is(':focusable')) {
-      return $element;
-    }
-    const $first = firstFocusableElement($element[0]);
-    return $first ?? null;
+  getElementFocusTarget(element: HTMLElement): HTMLElement | null {
+    return isFocusable(element) ? element : firstFocusableElement(element);
   }
 
   /**
    * Completely removes element(s) from the UI and field value.
    */
-  removeElement($elements: any): void {
+  removeElement(elements: HTMLElement | HTMLElement[]): void {
+    let removing = Array.isArray(elements) ? elements : [elements];
+
     if (this.settings.maintainHierarchy) {
-      let $descendants = $();
-      for (let i = 0; i < $elements.length; i++) {
-        $descendants = $descendants.add(
-          $elements.eq(i).parent().siblings('ul').find('.element')
-        );
-      }
-      $elements = $elements.add($descendants);
+      const descendants = removing.flatMap((element) =>
+        [...(element.parentElement?.parentElement?.children ?? [])]
+          .filter((sibling) => sibling.tagName === 'UL')
+          .flatMap((ul) => [...ul.querySelectorAll<HTMLElement>('.element')])
+      );
+      removing = [...new Set([...removing, ...descendants])];
     }
 
-    $('[name]', $elements).removeAttr('name');
-    this.removeElements($elements);
+    for (const element of removing) {
+      for (const named of element.querySelectorAll('[name]')) {
+        named.removeAttribute('name');
+      }
+    }
+    this.removeElements(removing);
 
     if (this.settings.maintainHierarchy) {
-      for (let i = 0; i < $elements.length; i++) {
-        this._animateStructureElementAway($elements, i);
-      }
+      this.#animateStructureElementsAway(removing);
     } else {
-      for (let i = 0; i < $elements.length; i++) {
-        const $element = $elements.eq(i);
-        const $li = $element.parent('li');
-        this.animateElementAway($element);
-        $li.remove();
+      for (const element of removing) {
+        const li =
+          element.parentElement?.tagName === 'LI'
+            ? element.parentElement
+            : null;
+        void this.animateElementAway(element);
+        li?.remove();
       }
     }
   }
 
   async animateElementAway(
-    $element: any,
+    element: HTMLElement,
     callback?: () => void
   ): Promise<void> {
-    const offset = $element.offset();
-    const width = $element.width();
+    const offset = getOffset(element);
+    const width = element.getBoundingClientRect().width;
 
-    $element.appendTo($(bod)).css({
-      'z-index': 0,
+    document.body.append(element);
+    Object.assign(element.style, {
+      zIndex: '0',
       position: 'absolute',
-      top: offset.top,
-      left: offset.left,
-      maxWidth: width + 'px',
+      top: `${offset.top}px`,
+      left: `${offset.left}px`,
+      maxWidth: `${width}px`,
     });
 
-    await animate($element, {
+    await animate(element, {
       opacity: -1,
       left: offset.left + 100 * (isRtl() ? 1 : -1),
     });
 
-    $element.remove();
+    element.remove();
     callback?.();
   }
 
+  /** Animates structure chips away one after another, then tidies up their list items. */
+  #animateStructureElementsAway(elements: HTMLElement[]): void {
+    const li = elements[0]?.parentElement?.parentElement;
+    const ul = li?.parentElement;
+
+    elements.forEach((element, i) => {
+      const callback =
+        i === elements.length - 1 && li && ul
+          ? () => {
+              if (
+                ul === this.elementsContainer ||
+                li.parentElement?.children.length! > 1
+              ) {
+                li.remove();
+              } else {
+                ul.remove();
+              }
+            }
+          : undefined;
+
+      setTimeout(
+        () => void this.animateElementAway(element, callback),
+        100 * i
+      );
+    });
+  }
+
   async showModal(): Promise<void> {
-    if (!this._$replaceElement && !this.canAddMoreElements()) {
+    if (!this.replacing && !this.canAddMoreElements()) {
       return;
     }
 
     if (this.modal) {
       void this.modal.show();
-
       return;
     }
 
@@ -1118,23 +1115,17 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     return createElementSelectorModal(elementType, this.getModalSettings());
   }
 
-  getModalSettings(): any {
-    const settings = Object.assign(
+  getModalSettings(): Record<string, any> {
+    const settings: Record<string, any> = Object.assign(
       {
         closeOtherModals: false,
         storageKey: this.modalStorageKey,
         sources: this.settings.sources,
         condition: this.settings.condition,
-        referenceElementId: this.settings.referenceElementId
-          ? this.elementEditor?.getDraftElementId(
-              this.settings.referenceElementId
-            ) || this.settings.referenceElementId
-          : null,
-        referenceElementOwnerId: this.settings.referenceElementOwnerId
-          ? this.elementEditor?.getDraftElementId(
-              this.settings.referenceElementOwnerId
-            ) || this.settings.referenceElementOwnerId
-          : null,
+        referenceElementId: this.#draftId(this.settings.referenceElementId),
+        referenceElementOwnerId: this.#draftId(
+          this.settings.referenceElementOwnerId
+        ),
         referenceElementSiteId: this.settings.referenceElementSiteId,
         criteria: Object.assign({}, this.settings.criteria),
         multiSelect: this.settings.limit != 1,
@@ -1143,8 +1134,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
         siteIds: this.settings.siteIds,
         disabledElementIds: this.getDisabledElementIds(),
         onSelect: this.onModalSelect.bind(this),
-        // Was `onHide`; the controller calls this one whenever it closes,
-        // whether that came from Cancel, Escape or a completed selection.
+        // Called whenever the modal closes: Cancel, Escape or a selection
         onClose: this.onModalHide.bind(this),
         triggerElement: () => this.getNextLogicalFocusElement(),
         modalTitle: t('Choose'),
@@ -1159,24 +1149,22 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     return settings;
   }
 
+  /** An element ID, or its draft's when the legacy element editor has one. */
+  #draftId(id: number | null): number | null {
+    return id ? this.elementEditor?.getDraftElementId(id) || id : null;
+  }
+
   getSelectedElementIds(): number[] {
-    const ids: number[] = [];
-    for (let i = 0; i < this.$elements.length; i++) {
-      if (
-        this.settings.modalSettings.matchSiteBeforeDisablingElement &&
-        this.settings.modalSettings.siteId
-      ) {
-        if (
-          this.$elements.eq(i).data('siteId') ==
-          this.settings.modalSettings.siteId
-        ) {
-          ids.push(this.$elements.eq(i).data('id'));
-        }
-      } else {
-        ids.push(this.$elements.eq(i).data('id'));
-      }
-    }
-    return ids;
+    const {matchSiteBeforeDisablingElement, siteId} =
+      this.settings.modalSettings;
+
+    return this.elements
+      .filter(
+        (element) =>
+          !(matchSiteBeforeDisablingElement && siteId) ||
+          element.dataset.siteId == String(siteId)
+      )
+      .map((element) => Number(element.dataset.id));
   }
 
   getDisabledElementIds(): number[] {
@@ -1193,7 +1181,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     return ids;
   }
 
-  async onModalSelect(elements: any[]): Promise<void> {
+  async onModalSelect(elements: SelectedElement[]): Promise<void> {
     this.elementEditor?.pause();
 
     const [inputUiType, inputUiSize] = (() => {
@@ -1214,7 +1202,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
         {
           type: this.settings.elementType,
           id: elements.map((e) => e.id),
-          siteId: elements[0].siteId,
+          siteId: elements[0]?.siteId,
           instances: [
             {
               context: 'field',
@@ -1227,39 +1215,29 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       ],
     });
 
-    for (let i = 0; i < elements.length; i++) {
-      if (data.elements[elements[i].id] !== undefined) {
-        elements[i].$modalElement = elements[i].$element;
-        elements[i].$element = $(data.elements[elements[i].id][0]);
+    for (const element of elements) {
+      const html = data.elements[element.id]?.[0];
+      if (html !== undefined) {
+        element.element = getElementInfo(html).element;
       }
     }
 
     // Drop the chip being replaced only now that the replacement markup is in
-    // hand, and never before an await.
-    //
-    // Removing it earlier publishes an intermediate value — one element short
-    // and with no replacement yet — to hosts that re-render this input from
-    // it. `ElementSelectControl.vue` keys `<craft-element-select-input>` on its
-    // value, so that intermediate state tore the custom element down mid-flight
-    // and left the rest of this method, including the `selectElements()` that
-    // actually inserts the replacement, writing into a detached DOM. Replace
-    // could open its modal but never complete.
-    //
-    // Removing here keeps the removal and the insertion in the same
-    // synchronous stretch, so such hosts observe a single combined change and
-    // re-render once, with the replacement already in place. It still lands
-    // ahead of the limit math below, which needs the outgoing chip gone to
-    // free up its slot.
-    if (this._$replaceElement) {
-      this.removeElement(this._$replaceElement);
-      this._$replaceElement = null;
+    // hand, and never before an await. Hosts that re-render this input from
+    // its value (`ElementSelectControl.vue` keys the custom element on it)
+    // would otherwise see an intermediate value and tear the element down
+    // mid-flight. It still lands ahead of the limit math below, which needs the
+    // outgoing chip gone to free up its slot.
+    if (this.replacing) {
+      this.removeElement(this.replacing);
+      this.replacing = null;
     }
 
     if (this.settings.maintainHierarchy) {
       await this.selectStructuredElements(elements);
     } else {
       if (this.settings.limit) {
-        const slotsLeft = this.settings.limit - this.$elements.length;
+        const slotsLeft = this.settings.limit - this.elements.length;
         if (elements.length > slotsLeft) {
           elements = elements.slice(0, slotsLeft);
         }
@@ -1269,8 +1247,6 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       this.updateDisabledElementsInModal();
     }
 
-    // `busy` is the controller's, held across this method because it is the
-    // awaited `onSelect`. Only the close is ours to ask for.
     this.modal?.hide();
 
     await appendHeadHtml(data.headHtml);
@@ -1288,493 +1264,405 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       this.modal.destroy();
       this.modal = null;
     }
-    this._$replaceElement = null;
+    this.replacing = null;
   }
 
-  async selectElements(elements: any[]): Promise<void> {
-    const animateElements: any[] = [];
+  async selectElements(elements: SelectedElement[]): Promise<void> {
+    const added: HTMLElement[] = [];
 
-    for (const elementInfo of elements) {
-      const $inputElement = this.createNewElement(elementInfo);
-      this.appendElement($inputElement);
-      this.addElements($inputElement);
-      elementInfo.$element = $inputElement;
-
-      const $modalElement = elementInfo.$modalElement || elementInfo.$element;
-      if ($modalElement?.parent().length) {
-        animateElements.push({$modalElement, $inputElement});
+    for (const info of elements) {
+      if (!info.element) {
+        continue;
       }
+      const element = this.createNewElement(info);
+      this.appendElement(element);
+      this.addElements([element]);
+      info.element = element;
+      added.push(element);
     }
 
-    this.animateElementsIntoPlace(animateElements);
+    await this.animateElementsIn(added);
     this.onSelectElements(elements);
   }
 
-  async selectStructuredElements(elements: any[]): Promise<void> {
+  async selectStructuredElements(elements: SelectedElement[]): Promise<void> {
     const selectedElementIds =
       this.settings.branchLimit == 1 ? [] : this.getSelectedElementIds();
 
-    for (const el of elements) {
-      selectedElementIds.push(el.id);
-    }
+    selectedElementIds.push(...elements.map((el) => el.id));
 
-    const data = {
-      elementIds: selectedElementIds,
-      siteId: elements[0].siteId,
-      containerId: this.settings.id,
-      name: this.settings.name,
-      branchLimit: this.settings.branchLimit,
-      selectionLabel: this.settings.selectionLabel,
-      elementType: this.settings.elementType,
-    };
-
-    const response = await actionClient.post(
+    const {data} = await actionClient.post(
       'relational-fields/structured-input-html',
-      data
+      {
+        elementIds: selectedElementIds,
+        siteId: elements[0]?.siteId,
+        containerId: this.settings.id,
+        name: this.settings.name,
+        branchLimit: this.settings.branchLimit,
+        selectionLabel: this.settings.selectionLabel,
+        elementType: this.settings.elementType,
+      }
     );
 
-    const $newInput = $(response.data.html);
-    const $newElementsContainer = $newInput.children('.elements');
+    const template = document.createElement('template');
+    template.innerHTML = data.html.trim();
+    const newElementsContainer =
+      template.content.firstElementChild?.querySelector<HTMLElement>(
+        ':scope > .elements'
+      );
 
-    this.$elementsContainer.replaceWith($newElementsContainer);
-    this.$elementsContainer = $newElementsContainer;
+    if (newElementsContainer) {
+      this.elementsContainer.replaceWith(newElementsContainer);
+      this.elementsContainer = newElementsContainer;
+    }
 
-    await appendHeadHtml(response.data.headHtml);
-    await appendBodyHtml(response.data.bodyHtml);
+    await appendHeadHtml(data.headHtml);
+    await appendBodyHtml(data.bodyHtml);
 
+    // The replaced chips are detached now, so drop them from the selection
+    this.elementSelect?.removeItems(this.elements);
+    this.#cleanUpChips(this.elements);
+    this.elements = [];
     this.resetElements();
 
-    const filteredElements: any[] = [];
-    const animateElements: any[] = [];
-
-    for (const element of elements) {
-      const $inputElement = this.getElementById(element.id);
-      if ($inputElement) {
-        filteredElements.push(element);
-        animateElements.push({
-          $modalElement: element.$element,
-          $inputElement,
-        });
-      }
-    }
+    const selected = elements.filter((element) => {
+      element.element = this.getElementById(element.id) ?? null;
+      return !!element.element;
+    });
 
-    this.animateElementsIntoPlace(animateElements);
+    await this.animateElementsIn(selected.map((element) => element.element!));
     this.updateDisabledElementsInModal();
-    this.onSelectElements(filteredElements);
+    this.onSelectElements(selected);
   }
 
-  createNewElement(elementInfo: any): any {
-    const $element = elementInfo.$element.clone();
+  createNewElement(info: SelectedElement): HTMLElement {
+    const element = info.element!.cloneNode(true) as HTMLElement;
     setElementSize(
-      $element,
+      element,
       ['thumbs', 'large'].includes(this.settings.viewMode) ? 'large' : 'small'
     );
-    $element.addClass('removable').append(
-      $('<input/>', {
-        type: 'hidden',
-        name: this.settings.name + (this.settings.single ? '' : '[]'),
-        value: elementInfo.id,
-      })
-    );
-    return $element;
+    element.classList.add('removable');
+
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = this.settings.name + (this.settings.single ? '' : '[]');
+    input.value = String(info.id);
+    element.append(input);
+
+    return element;
   }
 
-  appendElement($element: any): void {
-    const $li = $('<li/>').append($element);
+  appendElement(element: HTMLElement): void {
+    const li = document.createElement('li');
+    li.append(element);
     if (this.settings.defaultPlacement === 'beginning') {
-      $li.prependTo(this.$elementsContainer);
+      this.elementsContainer.prepend(li);
     } else {
-      $li.appendTo(this.$elementsContainer);
+      this.elementsContainer.append(li);
     }
   }
 
-  async animateElementIntoPlace(
-    $modalElement: any,
-    $inputElement: any
-  ): Promise<void> {
-    await this.animateElementsIntoPlace([{$modalElement, $inputElement}]);
-  }
-
-  async animateElementsIntoPlace(
-    elements: Array<{$modalElement: any; $inputElement: any}>
-  ): Promise<void> {
-    const animations: any[] = [];
-
-    for (const {$modalElement, $inputElement} of elements) {
-      const oldOffset = $modalElement.offset();
-      const newOffset = $inputElement.offset();
-
-      const $helper = $inputElement
-        .clone()
-        .appendTo($(bod))
-        .width($inputElement.width());
-
-      $inputElement.css('visibility', 'hidden');
-
-      $helper.css({
-        position: 'absolute',
-        zIndex: 'var(--c-layer-drag)',
-        top: oldOffset.top,
-        left: oldOffset.left,
-      });
-
-      animations.push([$helper, {top: newOffset.top, left: newOffset.left}]);
+  /** Fades newly added chips in. */
+  async animateElementsIn(elements: HTMLElement[]): Promise<void> {
+    if (!elements.length) {
+      return;
     }
 
-    await animateAll(animations);
-
-    for (const [$helper] of animations) {
-      $helper.remove();
+    for (const element of elements) {
+      element.style.opacity = '0';
     }
 
-    for (const {$inputElement} of elements) {
-      $inputElement.css('visibility', '');
+    await animateAll(elements.map((element) => [element, {opacity: 1}]));
+
+    for (const element of elements) {
+      element.style.removeProperty('opacity');
     }
   }
 
   /**
-   * Republishes which elements the modal may not select.
-   *
-   * The modal's index reads this as a whole set rather than being told to
-   * enable or disable individual ids, so both directions are one assignment.
+   * Republishes which elements the modal may not select, as a whole set.
    */
   updateDisabledElementsInModal(): void {
     this.modal?.setDisabledElementIds(this.getDisabledElementIds());
   }
 
-  getElementById(id: number): any {
-    for (let i = 0; i < this.$elements.length; i++) {
-      const $element = this.$elements.eq(i);
-      if ($element.data('id') == id) {
-        return $element;
-      }
-    }
+  #change(): void {
+    this.container.dispatchEvent(new Event('change', {bubbles: true}));
   }
 
-  onSelectElements(elements: any[]): void {
+  onSelectElements(elements: SelectedElement[]): void {
     this.trigger('selectElements', {elements});
     this.settings.onSelectElements(elements);
-    this.$container.trigger('change');
+    this.#change();
   }
 
   onAddElements(): void {
     this.trigger('addElements');
     this.settings.onAddElements();
-    this.$container.trigger('change');
+    this.#change();
   }
 
   onRemoveElements(): void {
     this.trigger('removeElements');
     this.settings.onRemoveElements();
-    this.$container.trigger('change');
-  }
-
-  _animateStructureElementAway($allElements: any, i: number): void {
-    let callback: (() => void) | undefined;
-
-    if (i === $allElements.length - 1) {
-      const $li = $allElements.first().parent().parent();
-      const $ul = $li.parent();
-      callback = () => {
-        if ($ul[0] === this.$elementsContainer[0] || $li.siblings().length) {
-          $li.remove();
-        } else {
-          $ul.remove();
-        }
-      };
-    }
-
-    const func = () => {
-      this.animateElementAway($allElements.eq(i), callback);
-    };
-
-    if (i === 0) {
-      func();
-    } else {
-      setTimeout(func, 100 * i);
-    }
+    this.#change();
   }
 
   canCreateElements(): boolean {
     return false;
   }
 
-  async createElement(title: string): Promise<number | null> {
-    void title;
+  async createElement(_title: string): Promise<number | null> {
     return null;
   }
 
   initSearch(): void {
-    if (!this.$searchInput.length) {
+    const input = this.searchInput;
+    if (!input) {
       return;
     }
 
-    this.addListener(this.$searchInput[0], 'input', () => {
+    this.addListener(input, 'input', () => {
       if (this.searchTimeout) {
         clearTimeout(this.searchTimeout);
       }
-      this.searchTimeout = setTimeout(() => {
-        this.searchForTags();
-      }, 500);
+      this.searchTimeout = setTimeout(() => void this.search(), 500);
     });
 
-    this.addListener(this.$searchInput[0], 'keydown', (ev) => {
+    this.addListener(input, 'keydown', (ev) => {
       if (!(ev instanceof KeyboardEvent)) {
         return;
       }
-      if (ev.keyCode === RETURN_KEY) {
-        ev.preventDefault();
-      }
 
       switch (ev.keyCode) {
         case RETURN_KEY: {
           ev.preventDefault();
-          if (this.searchMenu) {
-            this.selectSearchResult(this.searchMenu.$options.filter('.hover'));
-          }
-          return;
-        }
-        case DOWN_KEY: {
-          ev.preventDefault();
-          if (this.searchMenu) {
-            const $hoverOption = this.searchMenu.$options.filter('.hover');
-            if ($hoverOption.length) {
-              const $nextOption = $hoverOption
-                .parent()
-                .nextAll()
-                .find('.menu-item:not(.disabled)')
-                .first();
-              if ($nextOption.length) {
-                this.focusOption($nextOption);
-              }
-            } else {
-              this.focusOption(this.searchMenu.$options.eq(0));
-            }
+          const hovered = this.#hoveredOption();
+          if (this.searchMenu && hovered) {
+            void this.selectSearchResult(hovered);
           }
           return;
         }
+        case DOWN_KEY:
         case UP_KEY: {
           ev.preventDefault();
-          if (this.searchMenu) {
-            const $hoverOption = this.searchMenu.$options.filter('.hover');
-            if ($hoverOption.length) {
-              const $prevOption = $hoverOption
-                .parent()
-                .prevAll()
-                .find('.menu-item:not(.disabled)')
-                .last();
-              if ($prevOption.length) {
-                this.focusOption($prevOption);
-              }
-            } else {
-              this.focusOption(
-                this.searchMenu.$options.eq(this.searchMenu.$options.length - 1)
-              );
-            }
-          }
+          this.#moveHover(ev.keyCode === DOWN_KEY ? 1 : -1);
           return;
         }
       }
     });
 
-    this.addListener(this.$searchInput[0], 'focus', () => {
-      if (this.searchMenu) {
-        this.searchMenu.show();
-      }
+    this.addListener(input, 'focus', () => {
+      this.searchMenu?.show();
     });
 
-    this.addListener(this.$searchInput[0], 'blur', () => {
-      if (this._ignoreSearchBlur) {
-        this._ignoreSearchBlur = false;
+    this.addListener(input, 'blur', () => {
+      if (this.#ignoreSearchBlur) {
+        this.#ignoreSearchBlur = false;
         return;
       }
-      setTimeout(() => {
-        if (this.searchMenu) {
-          this.searchMenu.hide();
-        }
-      }, 1);
+      setTimeout(() => this.searchMenu?.hide(), 1);
     });
   }
 
-  async searchForTags(): Promise<void> {
+  #enabledOptions(): HTMLElement[] {
+    return (this.searchMenu?.$options ?? []).filter(
+      (option) => !option.classList.contains('disabled')
+    );
+  }
+
+  #hoveredOption(): HTMLElement | undefined {
+    return this.searchMenu?.$options.find((option) =>
+      option.classList.contains('hover')
+    );
+  }
+
+  #moveHover(step: 1 | -1): void {
+    const options = this.#enabledOptions();
+    if (!options.length) {
+      return;
+    }
+
+    const hovered = this.#hoveredOption();
+    const index = hovered ? options.indexOf(hovered) : -1;
+    const next =
+      index === -1
+        ? options[step === 1 ? 0 : options.length - 1]
+        : options[index + step];
+
+    if (next) {
+      this.focusOption(next);
+    }
+  }
+
+  async search(): Promise<void> {
     if (this.searchMenu) {
       this.killSearchMenu();
     }
 
-    const val = this.$searchInput.val();
+    const val = this.searchInput?.value;
 
-    if (val) {
-      this.$searchSpinner.removeClass('hidden');
-      announce(t('Loading'));
+    if (!val) {
+      this.searchSpinner?.classList.add('hidden');
+      return;
+    }
 
-      const excludeIds: number[] = [];
-      for (let i = 0; i < this.$elements.length; i++) {
-        const id = $(this.$elements[i]).data('id');
-        if (id) excludeIds.push(id);
-      }
+    this.searchSpinner?.classList.remove('hidden');
+    announce(t('Loading'));
 
-      if (this.settings.sourceElementId && !this.settings.allowSelfRelations) {
-        excludeIds.push(this.settings.sourceElementId);
-      }
+    const excludeIds = this.elements
+      .map((element) => Number(element.dataset.id))
+      .filter(Boolean);
 
-      let response: any;
-
-      try {
-        response = await actionClient.post('element-search/search', {
-          elementType: this.settings.elementType,
-          siteId: this.settings.criteria.siteId,
-          search: val,
-          criteria: this.settings.searchCriteria,
-          condition: this.settings.condition,
-          referenceElementId: this.settings.referenceElementId
-            ? this.elementEditor?.getDraftElementId(
-                this.settings.referenceElementId
-              ) || this.settings.referenceElementId
-            : null,
-          referenceElementOwnerId: this.settings.referenceElementOwnerId
-            ? this.elementEditor?.getDraftElementId(
-                this.settings.referenceElementOwnerId
-              ) || this.settings.referenceElementOwnerId
-            : null,
-          referenceElementSiteId: this.settings.referenceElementSiteId,
-          excludeIds,
-        });
-      } finally {
-        if (this.searchMenu) {
-          this.killSearchMenu();
-        }
-        this.$searchSpinner.addClass('hidden');
-        announce(t('Loading complete'));
-      }
+    if (this.settings.sourceElementId && !this.settings.allowSelfRelations) {
+      excludeIds.push(this.settings.sourceElementId);
+    }
 
-      const $menu = $('<div class="menu tagmenu"/>').appendTo($(bod));
-      const $ul = $('<ul/>').appendTo($menu);
-
-      for (const element of response.data.elements) {
-        const $li = $('<li/>').appendTo($ul);
-        const optionLabel = `${t('Existing {type}', {
-          type:
-            (this.settings.elementType
-              ? elementTypeName(this.settings.elementType)
-              : null) ?? t('element'),
-        })}: ${element.title}`;
-        $li.attr('aria-label', optionLabel);
-
-        const $item = $('<div class="menu-item"/>')
-          .appendTo($li)
-          .html(element.html)
-          .data('id', element.id);
-
-        if (element.exclude) {
-          $item.addClass('disabled');
-        }
+    let response: any;
+
+    try {
+      response = await actionClient.post('element-search/search', {
+        elementType: this.settings.elementType,
+        siteId: this.settings.criteria.siteId,
+        search: val,
+        criteria: this.settings.searchCriteria,
+        condition: this.settings.condition,
+        referenceElementId: this.#draftId(this.settings.referenceElementId),
+        referenceElementOwnerId: this.#draftId(
+          this.settings.referenceElementOwnerId
+        ),
+        referenceElementSiteId: this.settings.referenceElementSiteId,
+        excludeIds,
+      });
+    } finally {
+      if (this.searchMenu) {
+        this.killSearchMenu();
       }
+      this.searchSpinner?.classList.add('hidden');
+      announce(t('Loading complete'));
+    }
+
+    const typeName =
+      (this.settings.elementType
+        ? elementTypeName(this.settings.elementType)
+        : null) ?? t('element');
+
+    const menu = document.createElement('div');
+    menu.className = 'menu tagmenu';
+    const ul = document.createElement('ul');
+    menu.append(ul);
+    document.body.append(menu);
+
+    const addOption = (label: string): HTMLElement => {
+      const li = document.createElement('li');
+      li.setAttribute('aria-label', label);
+      const item = document.createElement('div');
+      item.className = 'menu-item';
+      li.append(item);
+      ul.append(li);
+      return item;
+    };
 
-      if (!response.data.exactMatch && this.canCreateElements()) {
-        const $li = $('<li/>').appendTo($ul);
-        const optionLabel = `${t('Create {type}', {
-          type:
-            (this.settings.elementType
-              ? elementTypeName(this.settings.elementType)
-              : null) ?? t('element'),
-        })}: ${val}`;
-        $li.attr('aria-label', optionLabel);
-
-        $('<div class="menu-item"/>')
-          .appendTo($li)
-          .text(val)
-          .prepend('<craft-icon name="plus"></craft-icon>');
+    for (const element of response.data.elements) {
+      const item = addOption(
+        `${t('Existing {type}', {type: typeName})}: ${element.title}`
+      );
+      item.innerHTML = element.html;
+      item.dataset.id = String(element.id);
+      if (element.exclude) {
+        item.classList.add('disabled');
       }
+    }
 
-      $ul.find('.menu-item:not(.disabled):first').addClass('hover');
+    if (!response.data.exactMatch && this.canCreateElements()) {
+      const item = addOption(`${t('Create {type}', {type: typeName})}: ${val}`);
+      const icon = document.createElement('craft-icon');
+      icon.setAttribute('name', 'plus');
+      item.append(icon, val);
+    }
 
-      this.searchMenu = new CustomSelect($menu[0], {
-        anchor: this.$searchInput[0],
-        onOptionSelect: (option: Element) => {
-          this.selectSearchResult(option);
-        },
-      });
+    ul.querySelector('.menu-item:not(.disabled)')?.classList.add('hover');
 
-      this.$searchInput.attr('aria-controls', this.searchMenu.menuId);
+    const searchMenu = new CustomSelect(menu, {
+      anchor: this.searchInput,
+      onOptionSelect: (option: Element) => {
+        void this.selectSearchResult(option as HTMLElement);
+      },
+    } as any);
+    this.searchMenu = searchMenu;
 
-      this.searchMenu.on('show', () => {
-        this.$searchInput.attr('aria-expanded', 'true');
-        this.focusSelectedOption();
-        loadElementThumbs($menu);
-      });
+    this.searchInput?.setAttribute('aria-controls', searchMenu.menuId);
 
-      this.searchMenu.on('hide', () => {
-        this.$searchInput.attr('aria-expanded', 'false');
-        this.$searchInput.removeAttr('aria-activedescendant');
-      });
+    searchMenu.on('show', () => {
+      this.searchInput?.setAttribute('aria-expanded', 'true');
+      this.focusSelectedOption();
+      loadElementThumbs(menu);
+    });
 
-      // mousedown on menu → keep focus on search input (ignore next blur).
-      this.addListener($menu[0], 'mousedown', () => {
-        this._ignoreSearchBlur = true;
-      });
+    searchMenu.on('hide', () => {
+      this.searchInput?.setAttribute('aria-expanded', 'false');
+      this.searchInput?.removeAttribute('aria-activedescendant');
+    });
 
-      this.searchMenu.show();
-    } else {
-      this.$searchSpinner.addClass('hidden');
-    }
-  }
+    // Clicking the menu shouldn't count as leaving the search input
+    this.addListener(menu, 'mousedown', () => {
+      this.#ignoreSearchBlur = true;
+    });
 
-  focusOption($option: any): void {
-    this.searchMenu.$options.removeClass('hover');
-    this.searchMenu.$ariaOptions.attr('aria-selected', 'false');
-    $option.addClass('hover');
-    this.$searchInput.attr(
-      'aria-activedescendant',
-      $option.parent('li').attr('id')
-    );
+    searchMenu.show();
   }
 
-  focusSelectedOption(): void {
-    const $option = this.searchMenu.$options.filter('.hover:first');
-    if ($option.length) {
-      this.focusOption($option);
-    } else {
-      this.focusFirstOption();
+  focusOption(option: HTMLElement): void {
+    for (const o of this.searchMenu?.$options ?? []) {
+      o.classList.remove('hover');
     }
-  }
+    for (const o of this.searchMenu?.$ariaOptions ?? []) {
+      o.setAttribute('aria-selected', 'false');
+    }
+    option.classList.add('hover');
 
-  focusFirstOption(): void {
-    const $option = this.searchMenu.$options.first();
-    this.focusOption($option);
+    const id = option.closest('li')?.id;
+    if (id) {
+      this.searchInput?.setAttribute('aria-activedescendant', id);
+    }
   }
 
-  async selectSearchResult(option: any): Promise<void> {
-    const $option = $(option);
+  focusSelectedOption(): void {
+    const option = this.#hoveredOption() ?? this.searchMenu?.$options[0];
+    if (option) {
+      this.focusOption(option);
+    }
+  }
 
-    if ($option.hasClass('disabled')) {
+  async selectSearchResult(option: HTMLElement): Promise<void> {
+    if (option.classList.contains('disabled')) {
       return;
     }
 
-    let id = $option.data('id');
+    let id: number | null = option.dataset.id
+      ? Number(option.dataset.id)
+      : null;
 
     if (!id && this.canCreateElements()) {
-      id = await this.createElement($option.text());
+      id = await this.createElement(option.textContent ?? '');
     }
 
     if (id) {
       await this.onModalSelect([
-        {
-          id,
-          siteId: this.settings.criteria.siteId,
-        },
+        {id, siteId: (this.settings.criteria.siteId as number) ?? null},
       ]);
     }
 
     this.killSearchMenu();
-    this.$searchInput.val('');
-    setTimeout(() => {
-      this.focusNextLogicalElement();
-    }, 200);
+    if (this.searchInput) {
+      this.searchInput.value = '';
+    }
+    setTimeout(() => this.focusNextLogicalElement(), 200);
   }
 
   killSearchMenu(): void {
-    this.searchMenu.hide();
-    this.searchMenu.destroy();
+    this.searchMenu?.hide();
+    this.searchMenu?.destroy();
     this.searchMenu = null;
   }
 }
diff --git a/resources/js/modules/element-select-input/compat.ts b/resources/js/modules/element-select-input/compat.ts
deleted file mode 100644
index 2390fac54e1..00000000000
--- a/resources/js/modules/element-select-input/compat.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {TagSelectInput} from './tag-select-input';
-import {registerCraftGlobals} from '@/common/craft-global';
-
-registerCraftGlobals({TagSelectInput});
diff --git a/resources/js/modules/element-select-input/element-select-input.ce.test.ts b/resources/js/modules/element-select-input/element-select-input.ce.test.ts
index b646a8476a6..2e6fda0f82e 100644
--- a/resources/js/modules/element-select-input/element-select-input.ce.test.ts
+++ b/resources/js/modules/element-select-input/element-select-input.ce.test.ts
@@ -92,7 +92,7 @@ afterEach(() => {
   document.body.replaceChildren();
 });
 
-it('boots plugin input classes through the custom element interface', () => {
+it('boots plugin input classes through the custom element interface', async () => {
   const element = bootInput();
 
   expect(receivedSettings).toEqual({limit: 2, id: 'related-elements'});
@@ -100,9 +100,23 @@ it('boots plugin input classes through the custom element interface', () => {
   expect(window.Craft.initUiElements).toHaveBeenCalledWith(element);
 
   element.remove();
+  await Promise.resolve();
   expect(destroy).toHaveBeenCalledOnce();
 });
 
+it('keeps the input when the element is moved', async () => {
+  const element = bootInput();
+  const sibling = document.createElement('div');
+  document.body.append(sibling);
+  receivedSettings = undefined;
+
+  sibling.after(element);
+  await Promise.resolve();
+
+  expect(destroy).not.toHaveBeenCalled();
+  expect(receivedSettings).toBeUndefined();
+});
+
 it('waits for a plugin input class that loads after the element', async () => {
   vi.stubGlobal('Craft', {initUiElements: vi.fn()});
   const element = bootInput();
diff --git a/resources/js/modules/element-select-input/element-select-input.ce.ts b/resources/js/modules/element-select-input/element-select-input.ce.ts
index db0971da24c..fcd04e933cb 100644
--- a/resources/js/modules/element-select-input/element-select-input.ce.ts
+++ b/resources/js/modules/element-select-input/element-select-input.ce.ts
@@ -85,20 +85,20 @@ export default class CraftElementSelectInput extends ControllerElement<BaseEleme
   }
 
   /**
-   * The controller's jQuery-wrapped chip for `id`, or `null` when it isn't
-   * booted yet or doesn't know that chip — its methods take jQuery objects, and
-   * `$elements` is the collection they operate on.
+   * The controller's chip for `id`, or `null` when it isn't booted yet or
+   * doesn't know that chip. A plugin's legacy class (`input-class`) takes
+   * jQuery collections, so it gets one.
    */
   #chip(id: number | string): any {
-    const $elements = this.instance?.$elements;
+    const instance: any = this.instance;
 
-    if (!$elements?.length) {
-      return null;
+    if (Array.isArray(instance?.elements)) {
+      return instance.getElementById(id) ?? null;
     }
 
-    const $chip = $elements.filter(`[data-id="${id}"]`);
+    const $chip = instance?.$elements?.filter(`[data-id="${id}"]`);
 
-    return $chip.length ? $chip : null;
+    return $chip?.length ? $chip : null;
   }
 
   #inputClass(): ElementSelectInputConstructor {
diff --git a/resources/js/modules/element-select-input/globals.ts b/resources/js/modules/element-select-input/globals.ts
deleted file mode 100644
index 7092db0d533..00000000000
--- a/resources/js/modules/element-select-input/globals.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {BaseElementSelectInput} from './base-element-select-input';
-import {EntrySelectInput} from './entry-select-input';
-import {registerCraftGlobals} from '@/common/craft-global';
-
-// Assign legacy `Craft.*` globals so PHP-emitted `new Craft.BaseElementSelectInput({…})`
-// and subclasses via `.extend()` keep working.
-registerCraftGlobals({BaseElementSelectInput, EntrySelectInput});
diff --git a/resources/js/modules/element-select-input/index.ts b/resources/js/modules/element-select-input/index.ts
index cba35d7cad0..e3f0ddc2f4e 100644
--- a/resources/js/modules/element-select-input/index.ts
+++ b/resources/js/modules/element-select-input/index.ts
@@ -1,5 +1,4 @@
 import '@/modules/element-thumb-loader';
-import './globals';
 import CraftElementSelectInput, {
   CraftAssetSelectInput,
   CraftEntrySelectInput,
@@ -12,6 +11,5 @@ defineElement('craft-entry-select-input', CraftEntrySelectInput);
 
 export {BaseElementSelectInput} from './base-element-select-input';
 export {EntrySelectInput} from './entry-select-input';
-export {TagSelectInput} from './tag-select-input';
 export {CraftAssetSelectInput, CraftElementSelectInput, CraftEntrySelectInput};
 export {elementSelectInputData} from './support';
diff --git a/resources/js/modules/element-table-sorter/index.ts b/resources/js/modules/element-table-sorter/index.ts
deleted file mode 100644
index d04b6713baf..00000000000
--- a/resources/js/modules/element-table-sorter/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import {ElementTableSorter} from './element-table-sorter';
-
-export {ElementTableSorter};
diff --git a/resources/js/modules/elements/html-nested-owner.ts b/resources/js/modules/elements/html-nested-owner.ts
index 1a79131a710..0af0c719ad9 100644
--- a/resources/js/modules/elements/html-nested-owner.ts
+++ b/resources/js/modules/elements/html-nested-owner.ts
@@ -1,4 +1,5 @@
 import type {NestedOwnerContext} from './nested-owner';
+import {jq} from '@/common/utils/jquery';
 
 type HtmlElementEditor = {
   settings?: {
@@ -12,13 +13,20 @@ type HtmlElementEditor = {
   getDraftElementId?: (id: number) => number;
 };
 
+/** The legacy element editor a form belongs to; it only exists with the Yii2 adapter. */
+export function legacyElementEditor<T = HtmlElementEditor>(
+  form: HTMLFormElement
+): T | undefined {
+  return jq()?.(form).data('elementEditor') as T | undefined;
+}
+
 /** Prepares the owner through the surrounding HTML form's element editor. */
 export async function prepareHtmlNestedOwner(
   form: HTMLFormElement,
   context: NestedOwnerContext,
   fieldName: string
 ): Promise<NestedOwnerContext | null> {
-  const editor = $(form).data('elementEditor') as HtmlElementEditor | undefined;
+  const editor = legacyElementEditor(form);
   if (!editor) {
     return context.requiresDerivative === false ? context : null;
   }
diff --git a/resources/js/modules/field-layout-designer/drags.test.ts b/resources/js/modules/field-layout-designer/drags.test.ts
index b57ab7f4da6..2e72727fb7a 100644
--- a/resources/js/modules/field-layout-designer/drags.test.ts
+++ b/resources/js/modules/field-layout-designer/drags.test.ts
@@ -1,14 +1,11 @@
 import {afterEach, expect, it, vi} from 'vite-plus/test';
-import $ from 'jquery';
 import {TabDrag} from './drags';
 
 afterEach(() => {
-  delete window.$;
   document.body.innerHTML = '';
 });
 
 it('lets tabs be dropped at the end of either column', () => {
-  window.$ = $;
   const $content = document.createElement('div');
   const $sidebar = document.createElement('div');
   document.body.append($content, $sidebar);
@@ -32,5 +29,5 @@ it('lets tabs be dropped at the end of either column', () => {
   ]);
   // Only the content column's caboose joins the grid.
   expect(tabGrid.addItems).toHaveBeenCalledOnce();
-  expect(tabGrid.addItems.mock.calls[0]![0].get(0)).toBe(cabooses[0]);
+  expect([tabGrid.addItems.mock.calls[0]![0]].flat()).toEqual([cabooses[0]]);
 });
diff --git a/resources/js/modules/field-layout-designer/drags.ts b/resources/js/modules/field-layout-designer/drags.ts
index 1a49f072daa..9b458d7cae9 100644
--- a/resources/js/modules/field-layout-designer/drags.ts
+++ b/resources/js/modules/field-layout-designer/drags.ts
@@ -14,10 +14,6 @@ import {
 import {fldElementData, fldTabData, isSidebarTab} from './support';
 import type {FieldLayoutDesigner} from './field-layout-designer';
 
-// jQuery (`$`) survives only at the Craft.Grid seam (`tabGrid.addItems/removeItems`
-// require jQuery). All other DOM work here is native.
-declare const $: any;
-
 /**
  * Drag-sort logic for tabs and elements. Native DOM port of the legacy
  * `Craft.FieldLayoutDesigner.BaseDrag` / `.TabDrag` / `.ElementDrag` onto the
@@ -332,19 +328,19 @@ export class TabDrag extends BaseDrag {
     const inContentColumn = this.inContentColumn(this.$draggee[0]!);
     super.swapDraggeeWithInsertion();
     if (inContentColumn) {
-      this.designer.tabGrid.removeItems($(this.$draggee));
-      this.designer.tabGrid.addItems($(this.$insertion));
+      this.designer.tabGrid?.removeItems(this.$draggee);
+      this.designer.tabGrid?.addItems(this.$insertion);
     }
   }
 
   override swapInsertionWithDraggee(): void {
     const inContentColumn = this.inContentColumn(this.$insertion);
     if (inContentColumn) {
-      this.designer.tabGrid.removeItems($(this.$insertion));
+      this.designer.tabGrid?.removeItems(this.$insertion);
     }
     super.swapInsertionWithDraggee();
     if (inContentColumn) {
-      this.designer.tabGrid.addItems($(this.$draggee));
+      this.designer.tabGrid?.addItems(this.$draggee);
     }
   }
 
@@ -363,9 +359,9 @@ export class TabDrag extends BaseDrag {
     }
 
     if (isInContentColumn) {
-      this.designer.tabGrid.addItems($(this.$insertion));
+      this.designer.tabGrid?.addItems(this.$insertion);
     } else {
-      this.designer.tabGrid.removeItems($(this.$insertion));
+      this.designer.tabGrid?.removeItems(this.$insertion);
       this.$insertion.style.removeProperty('height');
     }
 
@@ -411,7 +407,7 @@ export class TabDrag extends BaseDrag {
     };
 
     const $contentCaboose = createCaboose(this.designer.$contentTabContainer);
-    this.designer.tabGrid.addItems($($contentCaboose));
+    this.designer.tabGrid?.addItems($contentCaboose);
 
     return [$contentCaboose, createCaboose(this.designer.$sidebarTabContainer)];
   }
@@ -420,8 +416,8 @@ export class TabDrag extends BaseDrag {
    * Removes the caboose
    */
   override removeCaboose(): void {
-    this.designer.tabGrid.removeItems(
-      $(this.$caboose.filter(($caboose) => this.inContentColumn($caboose)))
+    this.designer.tabGrid?.removeItems(
+      this.$caboose.filter(($caboose) => this.inContentColumn($caboose))
     );
     super.removeCaboose();
   }
diff --git a/resources/js/modules/field-layout-designer/field-layout-designer.ts b/resources/js/modules/field-layout-designer/field-layout-designer.ts
index 0957bf02108..f673910f08e 100644
--- a/resources/js/modules/field-layout-designer/field-layout-designer.ts
+++ b/resources/js/modules/field-layout-designer/field-layout-designer.ts
@@ -7,6 +7,7 @@ import {
 } from '@craftcms/garnish';
 // Listbox was migrated out of `@craftcms/garnish` into the app.
 import {Listbox} from '@/modules/listbox/listbox';
+import {Grid} from '@/modules/grid/grid';
 import {Tab} from './tab';
 import {CardViewDesigner} from './card-view-designer';
 import {ElementDrag, TabDrag} from './drags';
@@ -28,7 +29,6 @@ import {escapeHtml} from '@/common/craft/attributes';
 // used ONLY at the Craft-interop seams (Craft.ui/Grid/listbox/Slideout return or
 // require jQuery). Everywhere else FLD uses native DOM.
 declare const Craft: any;
-declare const $: any;
 
 /**
  * Field Layout Designer — a port of the legacy `Craft.FieldLayoutDesigner` onto
@@ -68,7 +68,7 @@ export class FieldLayoutDesigner extends Base<FieldLayoutDesignerSettings> {
   $createFieldBtn: any = null;
 
   libraryPicker: Listbox | null = null;
-  tabGrid: any = null;
+  tabGrid: Grid | null = null;
   /** Keeps the workspace a whole number of grid cells tall. */
   workspaceHeightObserver: ResizeObserver | null = null;
   sidebarTabHeightObserver: ResizeObserver | null = null;
@@ -154,7 +154,7 @@ export class FieldLayoutDesigner extends Base<FieldLayoutDesignerSettings> {
   }
 
   deferredInit(): void {
-    // Set up the layout grids — Craft.Grid is a jQuery seam.
+    // Set up the layout grids.
     // Tabs are 18 cells of the workspace's background grid wide, and each row
     // of them is snapped to a whole number of cells tall, so later rows and
     // the New Tab button land on the grid too.
@@ -163,7 +163,7 @@ export class FieldLayoutDesigner extends Base<FieldLayoutDesignerSettings> {
         getComputedStyle(this.$contentTabContainer.parentElement).backgroundSize
       ) || 16;
     // Only content tabs wrap into rows; sidebar tabs stack in their column.
-    this.tabGrid = new Craft.Grid($(this.$contentTabContainer), {
+    this.tabGrid = new Grid(this.$contentTabContainer, {
       itemSelector: '.fld-tab',
       minColWidth: gridSize * 18,
       fillMode: 'grid',
@@ -417,8 +417,8 @@ export class FieldLayoutDesigner extends Base<FieldLayoutDesignerSettings> {
     this.libraryPicker?.destroy();
     this.libraryPicker = null;
 
-    // Craft.Grid binds a window `resize` listener — dispose it explicitly.
-    this.tabGrid?.destroy?.();
+    // The grid binds a window `resize` listener — dispose it explicitly.
+    this.tabGrid?.destroy();
     this.tabGrid = null;
 
     // Each tab's HUD lives in <body>, so it won't be GC'd with the detached
@@ -481,7 +481,7 @@ export class FieldLayoutDesigner extends Base<FieldLayoutDesignerSettings> {
     } else {
       // Only content tabs wrap into the grid's rows.
       this.$contentTabContainer.appendChild($tab);
-      this.tabGrid.addItems($($tab));
+      this.tabGrid?.addItems($tab);
     }
     this.tabDrag!.addItems($tab);
 
diff --git a/resources/js/modules/field-layout-designer/tab.ts b/resources/js/modules/field-layout-designer/tab.ts
index c55ce6752f4..838e5cca3c6 100644
--- a/resources/js/modules/field-layout-designer/tab.ts
+++ b/resources/js/modules/field-layout-designer/tab.ts
@@ -18,8 +18,6 @@ import {t} from '@craftcms/ui/utilities/translate';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {showError} from '@/modules/messages/messages';
 
-declare const $: any;
-
 /**
  * A single tab within the {@link FieldLayoutDesigner}. Native DOM port of the
  * legacy `Craft.FieldLayoutDesigner.Tab`. jQuery survives only at the Craft
@@ -67,7 +65,7 @@ export class Tab extends Base {
     );
 
     this.addListener($tabContent, 'resize', () => {
-      this.designer.tabGrid.refreshCols(true);
+      this.designer.tabGrid?.refreshCols(true);
     });
 
     this.$addBtn = $tabContent.querySelector('[command="--add-field"]');
@@ -328,16 +326,16 @@ export class Tab extends Base {
 
     // The grid only lays out the content column.
     if (type === 'sidebar') {
-      this.designer.tabGrid.removeItems($(this.$container));
+      this.designer.tabGrid?.removeItems(this.$container);
       this.designer.$sidebarTabContainer.appendChild(this.$container);
     } else {
       this.designer.$contentTabContainer.appendChild(this.$container);
-      this.designer.tabGrid.addItems($(this.$container));
+      this.designer.tabGrid?.addItems(this.$container);
     }
 
     this.syncTypeWithColumn();
     this.updatePositionInConfig();
-    this.designer.tabGrid.refreshCols(true);
+    this.designer.tabGrid?.refreshCols(true);
     this.$actionBtn?.querySelector(':scope > [slot="invoker"]')?.focus();
   }
 
@@ -531,7 +529,7 @@ export class Tab extends Base {
       this.designer.$newTabBtn.focus();
     }
 
-    this.designer.tabGrid.removeItems($(this.$container));
+    this.designer.tabGrid?.removeItems(this.$container);
     this.designer.tabDrag!.removeItems(this.$container);
     this.$container.remove();
     this.designer.refreshSelectedFields();
diff --git a/resources/js/modules/focal-point/focal-point.test.ts b/resources/js/modules/focal-point/focal-point.test.ts
new file mode 100644
index 00000000000..c3898d0efb7
--- /dev/null
+++ b/resources/js/modules/focal-point/focal-point.test.ts
@@ -0,0 +1,64 @@
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {FocalPoint} from './focal-point';
+
+vi.mock('@/modules/elements/live-preview/previews', () => ({
+  refreshPreviews: () => {},
+}));
+
+beforeEach(() => {
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(200);
+  vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
+  vi.spyOn(actionClient, 'post').mockResolvedValue({data: {}} as never);
+});
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+function setUp(): {focalPoint: FocalPoint; marker: HTMLElement} {
+  document.body.innerHTML =
+    '<div id="target"><img data-focal="0.25;0.5" data-uid="abc"></div>';
+  const focalPoint = new FocalPoint(
+    document.getElementById('target')!,
+    null,
+    true
+  );
+
+  return {
+    focalPoint,
+    marker: document.querySelector<HTMLElement>('.preview-focal-point')!,
+  };
+}
+
+function drag(marker: HTMLElement, dx: number, dy: number): void {
+  marker.dispatchEvent(
+    new PointerEvent('pointerdown', {clientX: 0, clientY: 0, bubbles: true})
+  );
+  window.dispatchEvent(
+    new PointerEvent('pointermove', {clientX: dx, clientY: dy})
+  );
+  window.dispatchEvent(new PointerEvent('pointerup'));
+}
+
+it('shows the saved focal point and moves it when dragged', () => {
+  const {marker} = setUp();
+
+  expect(marker.style.display).toBe('');
+  expect(marker.style.left).toBe('50px');
+
+  drag(marker, 20, 10);
+
+  expect(marker.style.left).toBe('70px');
+  expect(marker.style.top).toBe('60px');
+});
+
+it('stops following the pointer once destroyed', () => {
+  const {focalPoint, marker} = setUp();
+  focalPoint.destruct();
+
+  drag(marker, 20, 10);
+
+  expect(marker.style.left).toBe('50px');
+});
diff --git a/resources/js/modules/focal-point/focal-point.ts b/resources/js/modules/focal-point/focal-point.ts
index 569d9255ada..27f3ae441dc 100644
--- a/resources/js/modules/focal-point/focal-point.ts
+++ b/resources/js/modules/focal-point/focal-point.ts
@@ -3,15 +3,12 @@ import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {t} from '@craftcms/ui/utilities/translate';
 import {announce} from '@/common/announcer';
 import {refreshPreviews} from '@/modules/elements/live-preview/previews';
-
-declare const $: any;
-
-type JQEvent = any;
+import {contentSize} from '@/common/utils/dom';
 
 export class FocalPoint {
-  private readonly $target: JQuery;
-  private readonly $focal: JQuery;
-  private readonly $button: JQuery;
+  private readonly target: HTMLElement;
+  private readonly focal: HTMLElement;
+  private readonly button: HTMLElement | null;
   private readonly focalId: string;
   private readonly movable: boolean;
 
@@ -28,47 +25,54 @@ export class FocalPoint {
   private debounceTimer?: number;
   private debounceTimeout = 1500;
 
-  constructor($target: JQuery, $button: JQuery, movable: boolean) {
-    this.focalId = 'focal-point-' + Math.floor(Math.random() * 99999);
-    this.$target = $target;
-    this.$focal = $(
-      '<div class="preview-focal-point" id="' +
-        this.focalId +
-        '"><div class="inner"></div></div>'
-    )
-      .hide()
-      .appendTo(this.$target);
-
-    const initialPosition = this.$target.find('img').data('focal');
-    this.focalPos = initialPosition.split(';');
-    this.assetUid = this.$target.find('img').data('uid');
-
-    if (this.isCentered()) {
-      this.visible = false;
-    } else {
-      this.visible = true;
-    }
+  readonly #onDragStart = (ev: PointerEvent) => this.handleDragStart(ev);
+  readonly #onDragEnd = () => this.handleDragEnd();
+  readonly #onMove = (ev: PointerEvent) => this.handleMove(ev);
 
+  constructor(
+    target: HTMLElement,
+    button: HTMLElement | null,
+    movable: boolean
+  ) {
+    this.focalId = 'focal-point-' + Math.floor(Math.random() * 99999);
+    this.target = target;
+    this.focal = document.createElement('div');
+    this.focal.className = 'preview-focal-point';
+    this.focal.id = this.focalId;
+    this.focal.innerHTML = '<div class="inner"></div>';
+    this.focal.style.display = 'none';
+    this.target.append(this.focal);
+
+    const img = this.target.querySelector('img');
+    const initialPosition = img?.dataset.focal ?? '0.5;0.5';
+    const [x = 0.5, y = 0.5] = initialPosition.split(';').map(Number);
+    this.focalPos = [x, y];
+    this.assetUid = img?.dataset.uid ?? '';
+
+    this.visible = !this.isCentered();
     this.movable = movable;
-    this.$button = $button;
+    this.button = button;
 
     if (this.movable) {
-      this.$button.on('click', () => {
+      this.button?.addEventListener('click', () => {
         this.toggleFocal();
       });
 
       this.addFocalMoveListeners();
     } else {
-      this.$focal.css({cursor: 'auto'});
+      this.focal.style.cursor = 'auto';
     }
 
     this.renderFocal();
   }
 
   protected addFocalMoveListeners() {
-    this.$focal.on('mousedown touchstart', this.handleDragStart.bind(this));
-    $(window).on('mouseup touchend', this.handleDragEnd.bind(this));
-    $(window).on('mousemove touchmove', this.handleMove.bind(this));
+    // Pointer events cover touch too, once the browser stops panning on it
+    this.focal.style.touchAction = 'none';
+    this.focal.addEventListener('pointerdown', this.#onDragStart);
+    window.addEventListener('pointerup', this.#onDragEnd);
+    window.addEventListener('pointercancel', this.#onDragEnd);
+    window.addEventListener('pointermove', this.#onMove);
   }
 
   public destruct() {
@@ -76,51 +80,53 @@ export class FocalPoint {
       this.storeFocalPosition();
     }
 
-    this.$focal.off('mousedown touchstart', this.handleDragStart.bind(this));
-    $(window).off('mouseup touchend', this.handleDragEnd.bind(this));
-    $(window).off('mousemove touchmove', this.handleMove.bind(this));
+    this.focal.removeEventListener('pointerdown', this.#onDragStart);
+    window.removeEventListener('pointerup', this.#onDragEnd);
+    window.removeEventListener('pointercancel', this.#onDragEnd);
+    window.removeEventListener('pointermove', this.#onMove);
   }
 
-  public handleDragStart(ev: JQEvent) {
+  public handleDragStart(ev: PointerEvent) {
     this.dragging = this.movable;
-    this.lastX = ev.pageX!;
-    this.lastY = ev.pageY!;
+    this.lastX = ev.clientX;
+    this.lastY = ev.clientY;
   }
 
   protected isCentered() {
-    return this.focalPos[0] == 0.5 && this.focalPos[1] == 0.5;
+    return this.focalPos[0] === 0.5 && this.focalPos[1] === 0.5;
   }
 
   protected handleDragEnd() {
     this.dragging = false;
   }
 
-  protected handleMove(ev: JQEvent) {
-    ev.preventDefault();
-
+  protected handleMove(ev: PointerEvent) {
     if (!this.dragging || this.saving) {
       return;
     }
 
-    const deltaX = ev.pageX! - this.lastX;
-    const deltaY = ev.pageY! - this.lastY;
+    ev.preventDefault();
+
+    const deltaX = ev.clientX - this.lastX;
+    const deltaY = ev.clientY - this.lastY;
 
     if (deltaY !== 0 || deltaX !== 0) {
       this.shouldSave = true;
     }
 
     // Update last position
-    this.lastX = ev.pageX!;
-    this.lastY = ev.pageY!;
+    this.lastX = ev.clientX;
+    this.lastY = ev.clientY;
 
     // Moved from where the focal point is, rather than where the marker is
     // measured to be: in a dialog, the marker's offset parent isn't the
     // element it's positioned in, so measuring it added the dialog's offset
     // on every move.
-    const containerWidth = this.$target.width()!;
-    const containerHeight = this.$target.height()!;
-    const desiredLeft = containerWidth * Number(this.focalPos[0]) + deltaX;
-    const desiredTop = containerHeight * Number(this.focalPos[1]) + deltaY;
+    const {width: containerWidth, height: containerHeight} = contentSize(
+      this.target
+    );
+    const desiredLeft = containerWidth * this.focalPos[0] + deltaX;
+    const desiredTop = containerHeight * this.focalPos[1] + deltaY;
 
     // Make it fit the actual container
     const actualLeft = Math.min(Math.max(0, desiredLeft), containerWidth);
@@ -184,15 +190,15 @@ export class FocalPoint {
 
   /** Presses the toggle button while the focal point is enabled. */
   protected renderButton() {
-    this.$button.prop('active', this.visible);
+    if (this.button) {
+      (this.button as HTMLElement & {active?: boolean}).active = this.visible;
+    }
   }
 
   protected renderFocal() {
+    this.focal.style.display = this.visible ? '' : 'none';
     if (this.visible) {
-      this.$focal.show();
       this.positionFocal();
-    } else {
-      this.$focal.hide();
     }
 
     this.renderButton();
@@ -203,14 +209,9 @@ export class FocalPoint {
    * @protected
    */
   protected positionFocal() {
-    this.$focal.css({
-      left:
-        this.$target.width()! * this.focalPos[0] -
-        this.$focal.outerWidth()! / 2,
-      top:
-        this.$target.height()! * this.focalPos[1] -
-        this.$focal.outerHeight()! / 2,
-    });
+    const {width, height} = contentSize(this.target);
+    this.focal.style.left = `${width * this.focalPos[0] - this.focal.offsetWidth / 2}px`;
+    this.focal.style.top = `${height * this.focalPos[1] - this.focal.offsetHeight / 2}px`;
   }
 }
 
@@ -226,12 +227,10 @@ export function bootFocalPoint(root: Element): void {
 
   current?.destruct();
   current = new FocalPoint(
-    $(container),
-    $(
-      container.dataset.focalPointToggle
-        ? `#${container.dataset.focalPointToggle}`
-        : []
-    ),
+    container,
+    container.dataset.focalPointToggle
+      ? document.getElementById(container.dataset.focalPointToggle)
+      : null,
     container.dataset.focalPoint === 'edit'
   );
 }
diff --git a/resources/js/modules/grid/grid.test.ts b/resources/js/modules/grid/grid.test.ts
new file mode 100644
index 00000000000..aab8f1deb34
--- /dev/null
+++ b/resources/js/modules/grid/grid.test.ts
@@ -0,0 +1,28 @@
+import {afterEach, expect, it} from 'vite-plus/test';
+import {Grid} from './grid';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('tracks its items in document order without jQuery', () => {
+  document.body.innerHTML = `
+    <div id="grid">
+      <div class="item" id="a"></div>
+      <div class="other"></div>
+      <div class="item" id="b"></div>
+    </div>`;
+  const container = document.getElementById('grid')!;
+  const grid = new Grid(container);
+
+  expect(grid.items.map((item) => item.id)).toEqual(['a', 'b']);
+
+  const c = document.createElement('div');
+  c.id = 'c';
+  container.prepend(c);
+  grid.addItems([document.getElementById('b')!, c]);
+  expect(grid.items.map((item) => item.id)).toEqual(['c', 'a', 'b']);
+
+  grid.removeItems(document.getElementById('a'));
+  expect(grid.items.map((item) => item.id)).toEqual(['c', 'b']);
+});
diff --git a/resources/js/modules/grid/grid.ts b/resources/js/modules/grid/grid.ts
index 5aac3485f48..1d25b444bfc 100644
--- a/resources/js/modules/grid/grid.ts
+++ b/resources/js/modules/grid/grid.ts
@@ -4,11 +4,53 @@ import {
   muteResizeEvents,
 } from '@craftcms/garnish';
 import {startSide} from '@/common/craft/direction';
-import {resolveElement, type ElementArg} from '@/common/utils/dom';
+import {contentSize, resolveElement, type ElementArg} from '@/common/utils/dom';
 import {jq} from '@/common/utils/jquery';
 
-declare const Craft: any;
-declare const $: any;
+/** Sets the content height, accounting for `box-sizing`, like jQuery's `height(value)`. */
+function setContentHeight(el: HTMLElement, height: number | 'auto'): void {
+  if (height === 'auto') {
+    el.style.height = 'auto';
+    return;
+  }
+
+  const style = getComputedStyle(el);
+  const extra =
+    style.boxSizing === 'border-box'
+      ? parseFloat(style.paddingTop || '0') +
+        parseFloat(style.paddingBottom || '0') +
+        parseFloat(style.borderTopWidth || '0') +
+        parseFloat(style.borderBottomWidth || '0')
+      : 0;
+  el.style.height = `${height + extra}px`;
+}
+
+function show(el: HTMLElement): void {
+  if (el.style.display === 'none') {
+    el.style.display = '';
+  }
+  if (getComputedStyle(el).display === 'none') {
+    el.style.display = 'block';
+  }
+}
+
+function numberData(el: HTMLElement, name: string): number | null {
+  const value = parseInt(el.dataset[name] ?? '', 10);
+  return Number.isNaN(value) ? null : value;
+}
+
+function toElements(items: unknown): HTMLElement[] {
+  if (!items) {
+    return [];
+  }
+  if (items instanceof HTMLElement) {
+    return [items];
+  }
+  // Arrays, NodeLists and jQuery collections
+  return Array.from(items as ArrayLike<HTMLElement>);
+}
+
+const grids = new WeakMap<HTMLElement, Grid>();
 
 interface GridSettings extends GarnishBaseSettings {
   itemSelector: string;
@@ -38,13 +80,8 @@ interface GridLayout {
  * absolutely-positions the items. (This is why it can't be a CSS `display:grid`
  * — native masonry isn't shipped cross-browser.)
  *
- * The layout math is plain TS, but — like the other complex legacy managers
- * (CpModal) — it keeps the `declare const $` seam for the DOM: masonry
- * correctness depends on jQuery's box-model measurement (`height`/`outerHeight`/
- * `width`), and the public `$items`/`$container` API + `addItems(jQuery)` are
- * consumed by the still-legacy Dashboard and the field-layout-designer. Booted
- * via `new Craft.Grid(...)` and the `.grid` jQuery plugin, so exposed on
- * `window.Craft`.
+ * It works on plain elements; `addItems()` also accepts jQuery collections. Booted via `new Craft.Grid(...)` and the `.grid` jQuery
+ * plugin, so exposed on `window.Craft`.
  */
 export class Grid extends Base<GridSettings> {
   static defaults: GridSettings = {
@@ -59,10 +96,8 @@ export class Grid extends Base<GridSettings> {
     onRefreshCols: () => {},
   };
 
-  // jQuery objects (public API + measurement seam).
-  $container: any = null;
-  $items: any = null;
-  items: any[] = [];
+  container: HTMLElement | null = null;
+  items: HTMLElement[] = [];
 
   totalCols: number | null = null;
   colGutterDrop = 0;
@@ -91,49 +126,54 @@ export class Grid extends Base<GridSettings> {
     if (!el) {
       return;
     }
-    this.$container = $(el);
+    // SAFETY: Grids are laid out on HTML elements.
+    this.container = el as HTMLElement;
 
     // Is this already a grid?
-    if (this.$container.data('grid')) {
+    const existing = grids.get(this.container);
+    if (existing) {
       console.warn('Double-instantiating a grid on an element');
-      this.$container.data('grid').destroy();
+      existing.destroy();
     }
 
-    this.$container.data('grid', this);
+    grids.set(this.container, this);
+    jq()?.(this.container).data('grid', this);
 
     this.setSettings(settings, Grid.defaults);
 
-    this.$items = $();
-    this.addItems(this.$container.children(this.settings!.itemSelector));
+    this.items = [];
+    this.addItems(
+      Array.from(this.container.children).filter((child) =>
+        child.matches(this.settings!.itemSelector)
+      )
+    );
 
-    this.addListener(this.$container, 'resize', () => {
+    this.addListener(this.container, 'resize', () => {
       this.refreshCols();
     });
   }
 
-  addItems(items: any): void {
-    this.$items = $().add(this.$items.add(items));
-    this.setItems();
+  addItems(items: unknown): void {
+    this.setItems([...this.items, ...toElements(items)]);
     this.refreshCols(true);
   }
 
-  removeItems(items: any): void {
-    this.$items = $().add(this.$items.not(items));
-    this.setItems();
+  removeItems(items: unknown): void {
+    const removed = new Set(toElements(items));
+    this.setItems(this.items.filter((item) => !removed.has(item)));
     this.refreshCols(true);
   }
 
   resetItemOrder(): void {
-    this.$items = $().add(this.$items);
-    this.setItems();
+    this.setItems(this.items);
     this.refreshCols(true);
   }
 
-  setItems(): void {
-    this.items = [];
-    for (let i = 0; i < this.$items.length; i++) {
-      this.items.push($(this.$items[i]));
-    }
+  /** Replaces the items, deduplicated and in document order. */
+  setItems(items: unknown = this.items): void {
+    this.items = Array.from(new Set(toElements(items))).sort((a, b) =>
+      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
   }
 
   refreshCols(force = false): void {
@@ -153,8 +193,7 @@ export class Grid extends Base<GridSettings> {
     }
 
     const settings = this.settings!;
-    // SAFETY: Grid construction normalizes `$container` around its HTMLElement root.
-    const container = this.$container[0] as HTMLElement;
+    const container = this.container!;
 
     // Check to see if the grid is actually visible
     const oldHeight = container.style.height;
@@ -171,12 +210,14 @@ export class Grid extends Base<GridSettings> {
     if (settings.cols) {
       totalCols = settings.cols;
     } else {
-      totalCols = Math.floor(this.$container.width() / settings.minColWidth);
+      totalCols = Math.floor(
+        contentSize(container).width / settings.minColWidth
+      );
 
       // If we're adding a new column, require an extra 20 pixels in case a scrollbar shows up
       if (this.totalCols !== null && totalCols > this.totalCols) {
         totalCols = Math.floor(
-          (this.$container.width() - 20) / settings.minColWidth
+          (contentSize(container).width - 20) / settings.minColWidth
         );
       }
 
@@ -230,7 +271,9 @@ export class Grid extends Base<GridSettings> {
         i < itemIndex + totalCols && i < this.items.length;
         i++
       ) {
-        const itemHeight = this.items[i].height('auto').height();
+        const item = this.items[i]!;
+        setContentHeight(item, 'auto');
+        const itemHeight = contentSize(item).height;
         if (itemHeight > tallestItemHeight) {
           tallestItemHeight = itemHeight;
         }
@@ -249,7 +292,7 @@ export class Grid extends Base<GridSettings> {
         i < itemIndex + totalCols && i < this.items.length;
         i++
       ) {
-        this.items[i].height(tallestItemHeight);
+        setContentHeight(this.items[i]!, tallestItemHeight);
       }
 
       itemIndex += totalCols;
@@ -262,15 +305,22 @@ export class Grid extends Base<GridSettings> {
 
     // If there's only one column, sneak out early
     if (totalCols === 1) {
-      this.$container.height('auto');
-      this.$items
-        .show()
-        .css({position: 'relative', width: 'auto', top: 0})
-        .css(startSide(), 0);
+      this.container!.style.height = 'auto';
+      for (const item of this.items) {
+        show(item);
+        Object.assign(item.style, {
+          position: 'relative',
+          width: 'auto',
+          top: '0',
+        });
+        item.style.setProperty(startSide(), '0');
+      }
       return;
     }
 
-    this.$items.css('position', 'absolute');
+    for (const item of this.items) {
+      item.style.position = 'absolute';
+    }
     this.colPctWidth = 100 / totalCols;
 
     this.layouts = [];
@@ -285,20 +335,17 @@ export class Grid extends Base<GridSettings> {
       this.possibleItemPositionsByColspan[item] = {};
       this.itemHeightsByColspan[item] = {};
 
-      const $item = this.items[item].show();
-      const positionRight = $item.data('position') === 'right';
-      const positionLeft = $item.data('position') === 'left';
-
-      let minColspan = $item.data('colspan')
-        ? $item.data('colspan')
-        : $item.data('min-colspan')
-          ? $item.data('min-colspan')
-          : 1;
-      let maxColspan = $item.data('colspan')
-        ? $item.data('colspan')
-        : $item.data('max-colspan')
-          ? $item.data('max-colspan')
-          : totalCols;
+      const $item = this.items[item]!;
+      show($item);
+      const positionRight = $item.dataset.position === 'right';
+      const positionLeft = $item.dataset.position === 'left';
+
+      let minColspan =
+        numberData($item, 'colspan') ?? numberData($item, 'minColspan') ?? 1;
+      let maxColspan =
+        numberData($item, 'colspan') ??
+        numberData($item, 'maxColspan') ??
+        totalCols;
 
       if (minColspan > totalCols) {
         minColspan = totalCols;
@@ -309,8 +356,8 @@ export class Grid extends Base<GridSettings> {
 
       for (let colspan = minColspan; colspan <= maxColspan; colspan++) {
         // Get the height for this colspan
-        $item.css('width', this.getItemWidthCss(colspan));
-        this.itemHeightsByColspan[item]![colspan] = $item.outerHeight();
+        $item.style.width = this.getItemWidthCss(colspan);
+        this.itemHeightsByColspan[item]![colspan] = $item.offsetHeight;
 
         this.possibleItemColspans[item]!.push(colspan);
         this.possibleItemPositionsByColspan[item]![colspan] = [];
@@ -394,29 +441,34 @@ export class Grid extends Base<GridSettings> {
 
     // Set the item widths and left positions
     for (let i = 0; i < this.items.length; i++) {
-      const css = {
-        width: this.getItemWidthCss(this.layout.colspans[i]!),
-        [startSide()]: this.getItemLeftPosCss(this.layout.positions[i]!),
-      };
-      this.items[i].css(css);
+      const item = this.items[i]!;
+      item.style.width = this.getItemWidthCss(this.layout.colspans[i]!);
+      item.style.setProperty(
+        startSide(),
+        this.getItemLeftPosCss(this.layout.positions[i]!)
+      );
     }
 
     // If every item is at position 0, then let them lay out au naturel
     if (this.isSimpleLayout()) {
-      this.$container.height('auto');
-      this.$items.css({
-        position: 'relative',
-        top: 0,
-        'margin-bottom': settings.gutter + 'px',
-      });
+      this.container!.style.height = 'auto';
+      for (const item of this.items) {
+        Object.assign(item.style, {
+          position: 'relative',
+          top: '0',
+          marginBottom: `${settings.gutter}px`,
+        });
+      }
     } else {
-      this.$items.css('position', 'absolute');
+      for (const item of this.items) {
+        item.style.position = 'absolute';
+      }
 
       // Now position the items
       this.positionItems();
 
       // Update the positions as the items' heights change
-      this.addListener(this.$items, 'resize', 'onItemResize');
+      this.addListener(this.items, 'resize', 'onItemResize');
     }
   }
 
@@ -444,7 +496,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemWidthInPx(colspan: number): number {
     return (
-      (this.getItemWidth(colspan) / 100) * this.$container.width() -
+      (this.getItemWidth(colspan) / 100) * contentSize(this.container!).width -
       this.colGutterDrop
     );
   }
@@ -457,7 +509,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemLeftPosInPx(position: number): number {
     return (
-      ((this.getItemWidth(1) / 100) * this.$container.width() +
+      ((this.getItemWidth(1) / 100) * contentSize(this.container!).width +
         (this.settings!.gutter - this.colGutterDrop)) *
       position
     );
@@ -514,7 +566,7 @@ export class Grid extends Base<GridSettings> {
         top += settings.gutter;
       }
 
-      this.items[i].css('top', top);
+      this.items[i]!.style.top = `${top}px`;
 
       // Now add the new heights to those columns
       for (let col = layout.positions[i]!; col <= endingCol; col++) {
@@ -524,7 +576,7 @@ export class Grid extends Base<GridSettings> {
     }
 
     // Set the container height
-    this.$container.height(Math.max.apply(null, colHeights));
+    setContentHeight(this.container!, Math.max.apply(null, colHeights));
   }
 
   onItemResize(ev: any): void {
@@ -535,7 +587,7 @@ export class Grid extends Base<GridSettings> {
 
     if (item !== -1) {
       // Update the height and reposition the items
-      const newHeight = this.items[item].outerHeight();
+      const newHeight = this.items[item]!.offsetHeight;
 
       if (
         newHeight !==
@@ -549,12 +601,7 @@ export class Grid extends Base<GridSettings> {
   }
 
   #itemIndex(el: HTMLElement): number {
-    for (let i = 0; i < this.$items.length; i++) {
-      if (this.$items[i] === el) {
-        return i;
-      }
-    }
-    return -1;
+    return this.items.indexOf(el);
   }
 
   onRefreshCols(): void {
@@ -563,7 +610,10 @@ export class Grid extends Base<GridSettings> {
   }
 
   override destroy(): void {
-    jq()?.(this.$container).removeData('grid');
+    if (this.container) {
+      grids.delete(this.container);
+      jq()?.(this.container).removeData('grid');
+    }
     super.destroy();
   }
 }
diff --git a/resources/js/modules/grouped-entry-type-manager/EntryTypeOverrideSettings.vue b/resources/js/modules/grouped-entry-type-manager/EntryTypeOverrideSettings.vue
index 0c3867c3587..b10f2ddee4f 100644
--- a/resources/js/modules/grouped-entry-type-manager/EntryTypeOverrideSettings.vue
+++ b/resources/js/modules/grouped-entry-type-manager/EntryTypeOverrideSettings.vue
@@ -5,6 +5,7 @@
    */
   import {useForm} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
+  import {serializeFormInputs} from '@craftcms/ui/utilities/dom';
   import CpContainer from '@/common/components/CpContainer.vue';
   import HtmlFragmentRenderer from '@/common/components/HtmlFragmentRenderer.vue';
   import {useAppLayout} from '@/common/composables/useAppLayout';
@@ -14,7 +15,6 @@
   import {showError} from '@/modules/messages/messages';
 
   declare const Craft: any;
-  declare const $: any;
 
   const props = defineProps<{
     contextId: string;
@@ -37,7 +37,7 @@
   }));
 
   function serialize(): string {
-    return container ? $(container).find(':input').serialize() : '';
+    return container ? serializeFormInputs(container) : '';
   }
 
   function onReady(element: HTMLElement): void {
diff --git a/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ts b/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ts
index ac94d5a9e88..27634ac94ca 100644
--- a/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ts
+++ b/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ts
@@ -23,8 +23,6 @@ import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
 import {hasMousePointerEvents} from '@/common/craft/pointer';
 
 declare const Craft: any;
-declare const $: any;
-
 /** `$defaultColumnsContainer` is accepted as a jQuery alias. */
 export interface GroupedEntryTypeManagerSettings extends GarnishBaseSettings {
   /** Applied to cloned select ids and the default-columns inputs. */
diff --git a/resources/js/modules/link-field/link-field.ts b/resources/js/modules/link-field/link-field.ts
index 2acc248ec6a..1f5b6fbcc9f 100644
--- a/resources/js/modules/link-field/link-field.ts
+++ b/resources/js/modules/link-field/link-field.ts
@@ -14,7 +14,14 @@ import {jq} from '@/common/utils/jquery';
  * `.data('linkField')` jQuery seam (kept because the pair hands off across the
  * still-jQuery field markup). Booted from `Link.php`.
  */
+const linkFields = new WeakMap<Element, LinkField>();
+
 export class LinkField extends Base {
+  /** The Link field booted on `container`, for the inline scripts that need it. */
+  static forContainer(container: Element | null | undefined): LinkField | null {
+    return container ? (linkFields.get(container) ?? null) : null;
+  }
+
   container: HTMLElement | null = null;
 
   #labelInput: HTMLInputElement | null = null;
@@ -40,7 +47,8 @@ export class LinkField extends Base {
       return;
     }
 
-    // Legacy back-reference, read by LinkInput via jQuery `.data('linkField')`.
+    linkFields.set(this.container, this);
+    // Legacy back-reference for jQuery code reading `.data('linkField')`
     jq()?.(this.container).data('linkField', this);
 
     const typeSelect =
diff --git a/resources/js/modules/link-field/link-input.ts b/resources/js/modules/link-field/link-input.ts
index 2116704a119..7c172e4da4a 100644
--- a/resources/js/modules/link-field/link-input.ts
+++ b/resources/js/modules/link-field/link-input.ts
@@ -9,7 +9,7 @@ import {createTextInput as buildTextInput} from '@/modules/ui/legacy/text-input'
 import {resolveElement, type ElementArg} from '@/common/utils/dom';
 import {jq} from '@/common/utils/jquery';
 import punycode from 'punycode/';
-import type {LinkField} from './link-field';
+import {LinkField} from './link-field';
 import {
   removeLeft,
   removeRight,
@@ -44,7 +44,7 @@ interface LinkInputSettings extends GarnishBaseSettings {
  * jQuery-free, but carries a few documented seams: the chip's action menu is
  * built through `addActionsToChip()` (the smart `craft-action-menu` helper,
  * still in the cp bundle — same seam component-select uses), and the paired
- * {@link LinkField} instance is read via the legacy `.data('linkField')` cache.
+ * {@link LinkField} instance is found with {@link LinkField.forContainer}.
  * Booted from `BaseTextLinkType.php`.
  */
 export class LinkInput extends Base<LinkInputSettings> {
@@ -75,14 +75,11 @@ export class LinkInput extends Base<LinkInputSettings> {
     }
     this.setSettings(settings, LinkInput.defaults);
 
-    const $ = jq();
-    // Legacy self-reference + read the paired LinkField, both via `.data`.
-    $?.(this.container).data('linkInput', this);
-    this.#field =
-      $?.(this.container)
-        .closest('[data-link-field]')
-        .parent()
-        .data('linkField') ?? null;
+    // Legacy self-reference for jQuery code reading `.data('linkInput')`
+    jq()?.(this.container).data('linkInput', this);
+    this.#field = LinkField.forContainer(
+      this.container.closest('[data-link-field]')?.parentElement
+    );
 
     this.#chip = this.container.querySelector<HTMLElement>(':scope > .chip');
     this.#textInput =
diff --git a/resources/js/modules/preview-file-modal/preview-file-modal.test.ts b/resources/js/modules/preview-file-modal/preview-file-modal.test.ts
index d847e8b19c6..ee49324b486 100644
--- a/resources/js/modules/preview-file-modal/preview-file-modal.test.ts
+++ b/resources/js/modules/preview-file-modal/preview-file-modal.test.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {
   afterEach,
   beforeEach,
@@ -50,16 +49,15 @@ function stubOverflow(): void {
   vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
 }
 
-/** A stand-in for the legacy `Garnish.Select` holding asset elements. */
+/** A stand-in for a `Select` holding asset elements. */
 function elementSelect(ids: number[]) {
-  const $items = $(
-    ids.map((id) => `<div class="element" data-id="${id}"></div>`).join('')
-  );
   return {
-    $items,
-    getItemIndex: ($item: any) => $items.index($item),
-    getPreviousItem: (index: number) => $items.eq(index - 1),
-    getNextItem: (index: number) => $items.eq(index + 1),
+    $items: ids.map((id) => {
+      const item = document.createElement('div');
+      item.className = 'element';
+      item.dataset.id = String(id);
+      return item;
+    }),
     deselectAll: vi.fn(),
     selectItem: vi.fn(),
     focusItem: vi.fn(),
@@ -68,7 +66,6 @@ function elementSelect(ids: number[]) {
 
 describe('PreviewFileModal', () => {
   beforeEach(() => {
-    vi.stubGlobal('$', $);
     vi.stubGlobal('Craft', {
       t: (_category: string, message: string) => message,
       appendHeadHtml: vi.fn(),
@@ -205,7 +202,7 @@ describe('PreviewFileModal', () => {
           previewHtml: '<pre><code data-language="text">abc</code></pre>',
         },
       });
-    PreviewFileModal.showForAsset(select.$items.eq(0), select);
+    PreviewFileModal.showForAsset(select.$items[0], select);
     await settle();
 
     const [dialog] = openDialogs();
@@ -236,7 +233,7 @@ describe('PreviewFileModal', () => {
         ).toBe('2');
       });
     const select = elementSelect([1, 2]);
-    PreviewFileModal.showForAsset(select.$items.eq(0), select);
+    PreviewFileModal.showForAsset(select.$items[0], select);
     await settle();
 
     const [dialog] = openDialogs();
@@ -251,7 +248,7 @@ describe('PreviewFileModal', () => {
 
   it('moves between the assets of its element select in the same dialog', async () => {
     const select = elementSelect([1, 2, 3]);
-    PreviewFileModal.showForAsset(select.$items.eq(1), select);
+    PreviewFileModal.showForAsset(select.$items[1], select);
     await settle();
 
     const [dialog] = openDialogs();
@@ -266,13 +263,13 @@ describe('PreviewFileModal', () => {
     expect(openDialogs()).toEqual([dialog]);
     expect(dialog!.querySelector('.preview')!.textContent).toBe('3');
     expect(select.selectItem).toHaveBeenCalledWith(
-      select.$items.eq(2),
+      select.$items[2],
       false,
       false
     );
 
     dialog!.dispatchEvent(new Event('craft-after-hide'));
-    expect(select.focusItem).toHaveBeenCalledWith(select.$items.eq(2));
+    expect(select.focusItem).toHaveBeenCalledWith(select.$items[2]);
   });
 
   it('focuses the loaded preview, and makes it a tab stop when it overflows', async () => {
@@ -299,7 +296,7 @@ describe('PreviewFileModal', () => {
   it('scrolls an overflowing preview with the up and down arrows, rather than moving between assets', async () => {
     stubOverflow();
     const select = elementSelect([1, 2, 3]);
-    PreviewFileModal.showForAsset(select.$items.eq(1), select);
+    PreviewFileModal.showForAsset(select.$items[1], select);
     await settle();
 
     const [dialog] = openDialogs();
diff --git a/resources/js/modules/preview-file-modal/preview-file-modal.ts b/resources/js/modules/preview-file-modal/preview-file-modal.ts
index fec0e45a838..dfd7bb42e68 100644
--- a/resources/js/modules/preview-file-modal/preview-file-modal.ts
+++ b/resources/js/modules/preview-file-modal/preview-file-modal.ts
@@ -10,11 +10,17 @@ import {bootFocalPoint} from '@/modules/focal-point/focal-point';
 import {getActionUrl} from '@/common/craft/url';
 import {t} from '@craftcms/ui/utilities/translate';
 import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
-import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
+import {
+  appendBodyHtml,
+  appendElementHtml,
+  appendHeadHtml,
+} from '@craftcms/ui/utilities/dom';
+import {isPlainObject} from '@craftcms/garnish';
+import {resolveElement} from '@/common/utils/dom';
+import {jq} from '@/common/utils/jquery';
 import {showError, showNotice} from '@/modules/messages/messages';
 
 declare const Craft: any;
-declare const $: any;
 
 /** A `craft-dialog`. */
 interface PreviewDialog extends HTMLElement {
@@ -48,9 +54,9 @@ const EMPTY_CLASSES = 'zilch flex items-center justify-center';
  * element select.
  *
  * Preview templates reach the open preview through
- * `Craft.PreviewFileModal.openInstance`: `$container` is the jQuery-wrapped
- * element holding the preview HTML, and `resizePreviewImage()` fits an
- * image preview to the viewport once it has loaded. Top-level
+ * `Craft.PreviewFileModal.openInstance`: `container` is the element holding
+ * the preview HTML, and `resizePreviewImage()` fits an image preview to the
+ * viewport once it has loaded. Top-level
  * `slot="footer"` elements in a preview's HTML move to the start of the
  * dialog's footer, ahead of its Download and Close buttons.
  */
@@ -61,11 +67,10 @@ export class PreviewFileModal {
   assetId: number | null = null;
   elementSelect: any = null;
   $triggerElement: HTMLElement | null = null;
-  $bumperButtonStart: any = null;
-  $bumperButtonEnd: any = null;
+  $bumperButtonStart: HTMLButtonElement;
+  $bumperButtonEnd: HTMLButtonElement;
   dialog: PreviewDialog;
   container: HTMLElement;
-  $container: any;
   visible = false;
   requestId = 0;
   #downloadButton: HTMLElement;
@@ -96,7 +101,7 @@ export class PreviewFileModal {
     settings?: Partial<PreviewFileModalSettings>
   ) {
     // (assetId, settings) overload
-    if (settings === undefined && $.isPlainObject(elementSelectOrSettings)) {
+    if (settings === undefined && isPlainObject(elementSelectOrSettings)) {
       settings = elementSelectOrSettings;
       elementSelectOrSettings = null;
     }
@@ -122,15 +127,18 @@ export class PreviewFileModal {
     this.container.tabIndex = -1;
     this.container.setAttribute('role', 'region');
     this.container.setAttribute('aria-label', this.dialog.label);
-    this.$container = $(this.container);
     this.dialog.append(this.container);
 
-    this.$bumperButtonStart = $('<button/>', {
-      type: 'button',
-      class: 'skip-link top-0 start-0',
-      text: t('Close Preview'),
-    }).on('click', () => this.hide());
-    this.$bumperButtonEnd = this.$bumperButtonStart.clone(true);
+    const bumperButton = () => {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'skip-link top-0 start-0';
+      button.textContent = t('Close Preview');
+      button.addEventListener('click', () => this.hide());
+      return button;
+    };
+    this.$bumperButtonStart = bumperButton();
+    this.$bumperButtonEnd = bumperButton();
 
     this.#downloadButton = this.#footerButton(t('Download'), 'download', () => {
       // A real form post: the response is the file.
@@ -163,36 +171,44 @@ export class PreviewFileModal {
     );
   }
 
-  getSelectItem(): any {
-    const $item = this.elementSelect?.$items.filter(
-      `[data-id=${this.assetId}]`
+  /** The select's items, from a native select or a legacy jQuery one. */
+  #selectItems(): HTMLElement[] {
+    return Array.from(this.elementSelect?.$items ?? []);
+  }
+
+  getSelectItem(): HTMLElement | null {
+    return (
+      this.#selectItems().find(
+        (item) => item.dataset.id == String(this.assetId)
+      ) ?? null
     );
-    return $item?.length ? $item : null;
   }
 
   previewPreviousAsset(): void {
-    this.#previewSibling('getPreviousItem');
+    this.#previewSibling(-1);
   }
 
   previewNextAsset(): void {
-    this.#previewSibling('getNextItem');
+    this.#previewSibling(1);
   }
 
-  #previewSibling(getter: 'getPreviousItem' | 'getNextItem'): void {
-    const $element = this.getSelectItem();
-    if (!$element) return;
+  #previewSibling(step: 1 | -1): void {
+    const items = this.#selectItems();
+    const item = this.getSelectItem();
+    if (!item) return;
 
-    const index = this.elementSelect.getItemIndex($element);
-    const $sibling = this.elementSelect[getter](index);
-    if (
-      $sibling?.length &&
-      PreviewFileModal.showForAsset($sibling, this.elementSelect)
-    ) {
+    const sibling = items[items.indexOf(item) + step];
+    if (sibling && PreviewFileModal.showForAsset(sibling, this.elementSelect)) {
       this.elementSelect.deselectAll();
-      this.elementSelect.selectItem($sibling, false, false);
+      this.elementSelect.selectItem(this.#forSelect(sibling), false, false);
     }
   }
 
+  /** An item as the select takes it: legacy selects take jQuery collections. */
+  #forSelect(item: HTMLElement): any {
+    return Array.isArray(this.elementSelect.$items) ? item : jq()?.(item);
+  }
+
   /** Closes the preview, returning focus to the asset or whatever opened it. */
   hide(): void {
     if (!this.visible) return;
@@ -238,7 +254,8 @@ export class PreviewFileModal {
     startingHeight?: number | null
   ): void {
     this.assetId = assetId;
-    this.$container.empty().removeClass(EMPTY_CLASSES);
+    this.container.replaceChildren();
+    this.container.classList.remove(...EMPTY_CLASSES.split(' '));
     this.#removePreviewFooterItems();
 
     const [width, height] =
@@ -265,15 +282,16 @@ export class PreviewFileModal {
         onResponse();
 
         if (!response.data.previewHtml) {
-          this.$container
-            .addClass(EMPTY_CLASSES)
-            .append($('<p/>', {text: t('No preview available.')}));
+          const message = document.createElement('p');
+          message.textContent = t('No preview available.');
+          this.container.classList.add(...EMPTY_CLASSES.split(' '));
+          this.container.append(message);
           this._addBumperButtons();
           return;
         }
 
         this.container.dataset.assetId = String(assetId);
-        this.$container.append(response.data.previewHtml);
+        await appendElementHtml(response.data.previewHtml, this.container);
         bootFocalPoint(this.container);
         const text = this.container.querySelector('pre > code')?.textContent;
         highlightCodeBlocks(this.container);
@@ -346,9 +364,8 @@ export class PreviewFileModal {
   }
 
   _addBumperButtons(): void {
-    this.$container
-      .prepend(this.$bumperButtonStart)
-      .append(this.$bumperButtonEnd);
+    this.container.prepend(this.$bumperButtonStart);
+    this.container.append(this.$bumperButtonEnd);
   }
 
   /** Sizes the dialog to fit a `width` × `height` preview above its footer. */
@@ -427,11 +444,11 @@ export class PreviewFileModal {
   #onAfterHide = (ev: Event): void => {
     if (ev.target !== this.dialog) return;
 
-    const $element = this.getSelectItem();
+    const item = this.getSelectItem();
     this.destroy();
 
-    if ($element) {
-      this.elementSelect.focusItem($element);
+    if (item) {
+      this.elementSelect.focusItem(this.#forSelect(item));
     } else {
       this.#returnFocus()?.focus();
     }
@@ -493,37 +510,38 @@ export class PreviewFileModal {
     (window as any).imageFocalPoint?.renderFocal();
   }
 
-  static showForAsset($element: any, elementSelect?: any): boolean {
-    if (!$element.hasClass('element')) {
-      $element = $element.find('.element:first');
-    }
-    if (
-      !$element.hasClass('element') ||
-      hasAttr($element[0], 'data-folder-id')
-    ) {
+  /** Previews the asset `element` is, or contains. Takes jQuery collections too. */
+  static showForAsset(element: any, elementSelect?: any): boolean {
+    const root = resolveElement(element);
+    const asset = root?.classList.contains('element')
+      ? root
+      : root?.querySelector<HTMLElement>('.element');
+
+    if (!asset || hasAttr(asset, 'data-folder-id')) {
       return false;
     }
 
     const settings: Partial<PreviewFileModalSettings> = {};
-    if ($element.data('image-width')) {
-      settings.startingWidth = $element.data('image-width');
-      settings.startingHeight = $element.data('image-height');
+    if (asset.dataset.imageWidth) {
+      settings.startingWidth = Number(asset.dataset.imageWidth);
+      settings.startingHeight = Number(asset.dataset.imageHeight);
     }
 
+    const assetId = Number(asset.dataset.id);
     const instance = PreviewFileModal.openInstance;
     if (
       instance?.visible &&
       instance.elementSelect === (elementSelect ?? null)
     ) {
       instance.loadAsset(
-        $element.data('id'),
+        assetId,
         settings.startingWidth,
         settings.startingHeight
       );
       return true;
     }
 
-    new PreviewFileModal($element.data('id'), elementSelect, settings);
+    new PreviewFileModal(assetId, elementSelect, settings);
     return true;
   }
 }
diff --git a/resources/js/modules/slideout/README.md b/resources/js/modules/slideout/README.md
index b40cfdee73c..ea04cd0d3d3 100644
--- a/resources/js/modules/slideout/README.md
+++ b/resources/js/modules/slideout/README.md
@@ -73,13 +73,17 @@ ordering. `open()` registers with it; `close()` unregisters.
 
 - `containerSlideouts` (module export) — a `WeakMap` from the container
   element to its instance.
-- `$container.data('slideout')` — the jQuery back-reference (CP screens also
+- `$container.data('slideout')` — the jQuery back-reference, when jQuery is loaded (CP screens also
   set `data('cpScreen')`).
 
 ## `CpScreenSlideout`
 
+`Craft.CpScreenSlideout` and `Craft.ElementEditorSlideout` are registered by
+`compat.ts`, which only the Yii2 adapter loads; core imports the classes
+directly.
+
 ```ts
-import {CpScreenSlideout} from '@/modules/slideout';
+import {CpScreenSlideout} from '@/modules/slideout/cp-screen-slideout';
 
 const slideout = new CpScreenSlideout('fields/edit-field', {
   params: {fieldId: 1},
@@ -125,10 +129,10 @@ saved model's payload).
 
 ## The jQuery API surface
 
-The `$`-prefixed instance members are jQuery collections and are public API —
-external code reads them directly: `$container`, `$outerContainer`, `$shade`
-(the shade shared with every other open panel — don't remove it),
-and on CP screens `$header`, `$toolbar`, `$content`, `$sidebar`, `$footer`,
+The base slideout stores plain elements: `container`, `outerContainer` and
+`shade` (the shade shared with every other open panel — don't remove it).
+On CP screens the `$`-prefixed members are jQuery collections and are public
+API — external code reads them directly: `$container`, `$header`, `$toolbar`, `$content`, `$sidebar`, `$footer`,
 `$saveBtn`, etc. The same goes for the jQuery data entries the submit flow
 maintains: `data('initialSerializedValue')`, `data('delta-names')`,
 `data('initial-delta-values')`, and the optional `data('serializer')`
diff --git a/resources/js/modules/slideout/compat.ts b/resources/js/modules/slideout/compat.ts
index a82f672139c..2a78f7e8962 100644
--- a/resources/js/modules/slideout/compat.ts
+++ b/resources/js/modules/slideout/compat.ts
@@ -1,7 +1,18 @@
 import {compatify} from '@craftcms/garnish/compat';
+import {createElementEditor} from '@/common/slideouts/create-element-editor';
+import {CpScreenSlideout} from './cp-screen-slideout';
 import {ElementEditorSlideout} from './element-editor-slideout';
 import {registerCraftGlobals} from '@/common/craft-global';
 
+// Plugins subclass CP screen slideouts via the legacy `.extend()` API.
+const CompatCpScreenSlideout = compatify(CpScreenSlideout);
+
+Object.assign(CompatCpScreenSlideout, {
+  defaults: CpScreenSlideout.defaults,
+});
+
+registerCraftGlobals({CpScreenSlideout: CompatCpScreenSlideout});
+
 // It runs the legacy `Craft.ElementEditor`, which only the adapter loads.
 // Compatified so plugin subclasses keep working.
 const CompatElementEditorSlideout = compatify(ElementEditorSlideout);
@@ -11,3 +22,6 @@ Object.assign(CompatElementEditorSlideout, {
 });
 
 registerCraftGlobals({ElementEditorSlideout: CompatElementEditorSlideout});
+
+// The legacy element indexes open element editors through it.
+registerCraftGlobals({createElementEditor});
diff --git a/resources/js/modules/slideout/cp-screen-slideout.ts b/resources/js/modules/slideout/cp-screen-slideout.ts
index 1f04ee14daa..964b5e1aafa 100644
--- a/resources/js/modules/slideout/cp-screen-slideout.ts
+++ b/resources/js/modules/slideout/cp-screen-slideout.ts
@@ -134,6 +134,10 @@ export class CpScreenSlideout extends Slideout {
   hasSidebar = false;
 
   // --- jQuery public surface (see class docblock for why) -------------------
+  get $container(): any {
+    return this.container ? $(this.container) : null;
+  }
+
   $header: any = null;
   $toolbar: any = null;
   $tabContainer: any = null;
diff --git a/resources/js/modules/slideout/element-editor-params.ts b/resources/js/modules/slideout/element-editor-params.ts
index 22948176a4d..af8640ae040 100644
--- a/resources/js/modules/slideout/element-editor-params.ts
+++ b/resources/js/modules/slideout/element-editor-params.ts
@@ -23,55 +23,66 @@ export interface ElementEditorParams extends UiValues {
   prevalidate?: 1;
 }
 
+/** A numeric `data-*` value, as jQuery's `.data()` read it. */
+function numericData(element: HTMLElement | null, key: string): number | null {
+  const value = element?.dataset[key];
+  if (!value) {
+    return null;
+  }
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
 /**
  * The `elements/edit` params for an element editor: from the settings, falling
- * back to the `data-*` attributes of the element it was opened for.
+ * back to the `data-*` attributes of the element it was opened for. A jQuery
+ * collection's first element is used too.
  */
 export function elementEditorParams(
-  $element: any,
+  target: HTMLElement | ArrayLike<HTMLElement> | null | undefined,
   settings: ElementEditorTarget
 ): ElementEditorParams {
+  const element =
+    target instanceof HTMLElement ? target : (target?.[0] ?? null);
   const params: ElementEditorParams = {};
 
   if (settings.elementType) {
     params.elementType = settings.elementType;
   }
 
-  if (settings.elementId) {
-    params.elementId = settings.elementId;
-  } else if ($element?.data('id')) {
-    params.elementId = $element.data('id');
+  const elementId = settings.elementId || numericData(element, 'id');
+  if (elementId) {
+    params.elementId = elementId;
   }
 
   if (settings.draftId !== null && settings.draftId !== undefined) {
     params.draftId = settings.draftId || null; // could be false
-  } else if ($element?.data('draft-id')) {
-    params.draftId = $element.data('draft-id');
+  } else if (numericData(element, 'draftId')) {
+    params.draftId = numericData(element, 'draftId');
   } else if (
     settings.revisionId !== null &&
     settings.revisionId !== undefined
   ) {
     params.revisionId = settings.revisionId || null; // could be false
-  } else if ($element?.data('revision-id')) {
-    params.revisionId = $element.data('revision-id');
+  } else if (numericData(element, 'revisionId')) {
+    params.revisionId = numericData(element, 'revisionId');
   }
 
   if (settings.fieldId !== null && settings.fieldId !== undefined) {
     params.fieldId = settings.fieldId || null; // could be false
-  } else if ($element?.data('field-id')) {
-    params.fieldId = $element.data('field-id');
+  } else if (numericData(element, 'fieldId')) {
+    params.fieldId = numericData(element, 'fieldId');
   }
 
   if (settings.ownerId !== null && settings.ownerId !== undefined) {
     params.ownerId = settings.ownerId || null; // could be false
-  } else if ($element?.data('owner-id')) {
-    params.ownerId = $element.data('owner-id');
+  } else if (numericData(element, 'ownerId')) {
+    params.ownerId = numericData(element, 'ownerId');
   }
 
-  if (settings.siteId) {
-    params.siteId = settings.siteId;
-  } else if ($element?.data('site-id')) {
-    params.siteId = $element.data('site-id');
+  const siteId = settings.siteId || numericData(element, 'siteId');
+  if (siteId) {
+    params.siteId = siteId;
   }
 
   if (settings.prevalidate) {
diff --git a/resources/js/modules/slideout/element-editor-slideout.ts b/resources/js/modules/slideout/element-editor-slideout.ts
index 46d02b3011b..6814b5bd564 100644
--- a/resources/js/modules/slideout/element-editor-slideout.ts
+++ b/resources/js/modules/slideout/element-editor-slideout.ts
@@ -59,7 +59,7 @@ export interface ElementEditorSlideoutSettings extends CpScreenSlideoutSettings
  *
  * @example
  * ```ts
- * import {ElementEditorSlideout} from '@/modules/slideout';
+ * import {ElementEditorSlideout} from '@/modules/slideout/element-editor-slideout';
  *
  * const slideout = new ElementEditorSlideout($chip, {siteId: 2});
  * slideout.on('submit', ({data}) => console.log('saved', data.id));
diff --git a/resources/js/modules/slideout/globals.ts b/resources/js/modules/slideout/globals.ts
index 89b33ac2a62..965ffe1e4a1 100644
--- a/resources/js/modules/slideout/globals.ts
+++ b/resources/js/modules/slideout/globals.ts
@@ -1,6 +1,5 @@
 import {compatify} from '@craftcms/garnish/compat';
 import {Slideout} from './slideout';
-import {CpScreenSlideout} from './cp-screen-slideout';
 import {registerCraftGlobals} from '@/common/craft-global';
 
 // `compatify`, not the plain class: plugins subclass this global via the
@@ -25,13 +24,3 @@ Object.assign(CompatSlideout, {
 });
 
 registerCraftGlobals({Slideout: CompatSlideout});
-
-// Same reasoning one level down: plugins subclass CP screen slideouts via
-// the legacy `.extend()` API.
-const CompatCpScreenSlideout = compatify(CpScreenSlideout);
-
-Object.assign(CompatCpScreenSlideout, {
-  defaults: CpScreenSlideout.defaults,
-});
-
-registerCraftGlobals({CpScreenSlideout: CompatCpScreenSlideout});
diff --git a/resources/js/modules/slideout/index.ts b/resources/js/modules/slideout/index.ts
index 25b472f5cff..de4430cb58e 100644
--- a/resources/js/modules/slideout/index.ts
+++ b/resources/js/modules/slideout/index.ts
@@ -1,13 +1,5 @@
 import './globals';
 import {Slideout, type SlideoutSettings} from './slideout';
-import {
-  CpScreenSlideout,
-  type CpScreenSlideoutSettings,
-} from './cp-screen-slideout';
-import {
-  ElementEditorSlideout,
-  type ElementEditorSlideoutSettings,
-} from './element-editor-slideout';
 import {containerSlideouts} from './support';
 
 /**
@@ -20,12 +12,4 @@ import {containerSlideouts} from './support';
 // up here, via `Garnish.on(Slideout, 'open close')`. It now lives in the
 // shared panel stack, so Vue slideouts trigger it too.
 
-export {
-  Slideout,
-  type SlideoutSettings,
-  CpScreenSlideout,
-  type CpScreenSlideoutSettings,
-  ElementEditorSlideout,
-  type ElementEditorSlideoutSettings,
-  containerSlideouts,
-};
+export {Slideout, type SlideoutSettings, containerSlideouts};
diff --git a/resources/js/modules/slideout/slideout.browser.test.ts b/resources/js/modules/slideout/slideout.browser.test.ts
new file mode 100644
index 00000000000..5ff1a274bd3
--- /dev/null
+++ b/resources/js/modules/slideout/slideout.browser.test.ts
@@ -0,0 +1,57 @@
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import {Slideout} from './slideout';
+
+beforeEach(() => {
+  // The CP's config, which every control panel page sets
+  vi.stubGlobal('Craft', {slideoutPosition: 'end'});
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = '';
+});
+
+it('opens around its contents and tears down without jQuery', () => {
+  const trigger = document.createElement('button');
+  document.body.append(trigger);
+  trigger.focus();
+
+  const slideout = new Slideout('<div class="so-body">Hello</div>', {
+    containerAttributes: {id: 'my-slideout'},
+  });
+
+  const container = document.getElementById('my-slideout')!;
+  expect(container).toBe(slideout.container);
+  expect(container.classList).toContain('slideout');
+  expect(container.querySelector('.so-body')?.textContent).toBe('Hello');
+  expect(slideout.outerContainer!.classList).not.toContain('hidden');
+  expect(Slideout.instances['my-slideout']).toBe(slideout);
+  expect(slideout.triggerElement).toBe(trigger);
+
+  slideout.close();
+  expect(slideout.outerContainer!.classList).toContain('hidden');
+
+  slideout.destroy();
+  expect(document.getElementById('my-slideout')).toBeNull();
+  expect(Slideout.instances['my-slideout']).toBeUndefined();
+});
+
+it('returns focus to the menu that opened it once the menu has closed', async () => {
+  document.body.innerHTML = `
+    <craft-action-menu>
+      <button type="button" slot="invoker">Actions</button>
+      <div slot="content"><button type="button" id="item">Edit</button></div>
+    </craft-action-menu>`;
+  const item = document.getElementById('item')!;
+  item.focus();
+
+  const slideout = new Slideout('<div class="so-body"></div>');
+  // The menu closes as the slideout opens, hiding the item
+  item.hidden = true;
+  slideout.close();
+
+  await vi.waitFor(() =>
+    expect(document.activeElement?.textContent).toBe('Actions')
+  );
+  slideout.destroy();
+});
diff --git a/resources/js/modules/slideout/slideout.ts b/resources/js/modules/slideout/slideout.ts
index 328d5de4497..5850702a6cc 100644
--- a/resources/js/modules/slideout/slideout.ts
+++ b/resources/js/modules/slideout/slideout.ts
@@ -46,9 +46,11 @@ import {
   previewEditorOffset,
 } from '@/modules/elements/live-preview/previews';
 import {containerSlideouts} from './support';
+import {setElementAttributes} from '@/common/craft/attributes';
+import {resolveElement} from '@/common/utils/dom';
+import {jq} from '@/common/utils/jquery';
 
 declare const Craft: any;
-declare const $: any;
 
 // Re-exported because `cp-screen-slideout.ts` and legacy consumers reach for
 // it here; the lookup itself lives with the rest of the cross-stack
@@ -77,7 +79,7 @@ sharedLiveRegion.setAttribute('role', 'status');
 export interface SlideoutSettings extends GarnishBaseSettings {
   /** Tag name for the generated container element. Default `'div'`. */
   containerElement: string;
-  /** Attributes applied to the container element via jQuery's `$(tag, attrs)`. */
+  /** Attributes applied to the container element. */
   containerAttributes: Record<string, string | number | boolean>;
   /** Whether {@link Slideout.open} should be called immediately from `init`. Default `true`. */
   autoOpen: boolean;
@@ -95,6 +97,21 @@ export interface SlideoutSettings extends GarnishBaseSettings {
 type SlideoutContents = string | Node | ArrayLike<Node> | null;
 type SlideoutTrigger = string | Element | ArrayLike<Element> | null;
 
+function contentNodes(contents: SlideoutContents | undefined): Node[] {
+  if (contents == null) {
+    return [];
+  }
+  if (typeof contents === 'string') {
+    const template = document.createElement('template');
+    template.innerHTML = contents;
+    return Array.from(template.content.childNodes);
+  }
+  if (contents instanceof Node) {
+    return [contents];
+  }
+  return Array.from(contents);
+}
+
 /**
  * A slideout panel. Builds a container element around passed-in contents,
  * manages its shade, open/close transitions, and stacking against any other
@@ -165,11 +182,11 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     // Park it offscreen on the way out. The shared stack repositions what's
     // left, but a panel it no longer knows about has to see itself off.
     if (panel._inPreview) {
-      panel.$container.css('inset-inline-start', '100%');
+      panel.container!.style.insetInlineStart = '100%';
     } else if (panel.useMobileStyles) {
-      panel.$container.css('top', '100vh');
+      panel.container!.style.top = '100vh';
     } else {
-      panel.$container.css(Slideout.positionProp(), '100vw');
+      panel.container!.style.setProperty(Slideout.positionProp(), '100vw');
     }
 
     unregisterPanel(panel);
@@ -186,14 +203,14 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     syncPanelStack();
   }
 
-  // --- Instance state (jQuery-typed; see the class docblock for why) --------
+  // --- Instance state ----------------------------------------------------
 
-  $outerContainer: any = null;
-  $container: any = null;
-  $shade: any = null;
-  /** Plain element, not a jQuery collection — see the class docblock. */
+  outerContainer: HTMLElement | null = null;
+  container: HTMLElement | null = null;
+  shade: HTMLElement | null = null;
   $liveRegion: HTMLElement | null = null;
-  $triggerElement: any = null;
+  triggerElement: HTMLElement | null = null;
+
   isOpen = false;
   isOpening = false;
   useMobileStyles: boolean | null = null;
@@ -203,6 +220,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
   /** Fallback timeouts scheduled by {@link _afterTransition}, in case their transitionend event never fires. */
   _transitionTimeouts: Set<ReturnType<typeof setTimeout>> = new Set();
+  _transitionListeners = new Map<(ev: Event) => void, HTMLElement>();
 
   /** Stops sizing this to Live Preview's editor pane. See {@link open}. */
   _stopFollowingPreview: (() => void) | null = null;
@@ -211,7 +229,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
   /** The element the stack moves, reflows, and fires lifecycle events on. */
   get element(): HTMLElement {
-    return this.$container[0];
+    return this.container!;
   }
 
   /**
@@ -225,7 +243,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
   position(index: number, total: number): void {
     if (this._inPreview) {
       // Over a preview's editor, each covers the one before it.
-      this.$container.css('inset-inline-start', 0);
+      this.container!.style.insetInlineStart = '0';
 
       return;
     }
@@ -233,12 +251,12 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     if (this.useMobileStyles) {
       // A full-screen sheet slides up from the bottom; there's no room beside
       // it to stagger anything into.
-      this.$container.css('top', 0);
+      this.container!.style.top = '0';
 
       return;
     }
 
-    this.$container.css(
+    this.container!.style.setProperty(
       Slideout.positionProp(),
       `${45 * ((index + 1) / total)}vw`
     );
@@ -292,32 +310,32 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
   ): void {
     this.setSettings(settings, Slideout.defaults);
 
-    this.$outerContainer = $('<div/>', {
-      class: 'slideout-container cp-legacy hidden',
-    });
-    this.$container = $(
-      `<${this.settings!.containerElement}/>`,
-      this.settings!.containerAttributes
-    )
-      .attr('data-slideout', '')
-      .addClass('slideout cp-legacy')
-      .append(contents)
-      .data('slideout', this)
-      .appendTo(this.$outerContainer);
-
-    containerSlideouts.set(this.$container[0], this);
-
-    if (this.$container.attr('id')) {
-      Slideout.instances[this.$container.attr('id')] = this;
+    const outerContainer = document.createElement('div');
+    outerContainer.className = 'slideout-container cp-legacy hidden';
+    this.outerContainer = outerContainer;
+
+    const container = document.createElement(this.settings!.containerElement);
+    setElementAttributes(container, this.settings!.containerAttributes);
+    container.setAttribute('data-slideout', '');
+    container.classList.add('slideout', 'cp-legacy');
+    container.append(...contentNodes(contents));
+    outerContainer.append(container);
+    this.container = container;
+    jq()?.(container).data('slideout', this);
+
+    containerSlideouts.set(container, this);
+
+    if (container.id) {
+      Slideout.instances[container.id] = this;
     }
 
-    addModalAttributes(this.$outerContainer[0]);
+    addModalAttributes(outerContainer);
 
-    trapFocusWithin(this.$container[0]);
+    trapFocusWithin(container);
 
     // `appendChild` moves the one shared node, same as `appendTo` did.
     this.$liveRegion = sharedLiveRegion;
-    this.$container[0].appendChild(this.$liveRegion);
+    container.appendChild(this.$liveRegion);
 
     if (this.settings!.autoOpen) {
       this.open();
@@ -339,24 +357,26 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     this.useMobileStyles =
       !!previewEditor || isMobileBrowser() || document.body.clientWidth < 600;
 
-    this.$outerContainer.removeClass('so-mobile so-lp');
-    this.$container.removeClass('so-mobile so-lp');
+    const outerContainer = this.outerContainer!;
+    const container = this.container!;
+    outerContainer.classList.remove('so-mobile', 'so-lp');
+    container.classList.remove('so-mobile', 'so-lp');
 
     if (previewEditor) {
-      this.$outerContainer.addClass('so-lp');
-      this.$container.addClass('so-lp');
+      outerContainer.classList.add('so-lp');
+      container.classList.add('so-lp');
     } else if (this.useMobileStyles) {
-      this.$container.addClass('so-mobile');
+      container.classList.add('so-mobile');
     }
 
     // One shade, shared with every other open panel — Vue ones included —
     // and owned by the panel stack, which shows it, hides it, and routes
-    // clicks on it to the topmost panel's `handleShadeClick()`. Still kept on
-    // `$shade` because that's public API (see the class docblock), and
-    // because `updateWidthsForPreviewPane()` resizes it.
-    this.$shade = $(shadeElement());
+    // clicks on it to the topmost panel's `handleShadeClick()`. Kept on
+    // `shade` because `updateWidthsForPreviewPane()` resizes it.
+    this.shade = shadeElement();
 
-    this.$outerContainer.appendTo(bod).removeClass('hidden');
+    bod.append(outerContainer);
+    outerContainer.classList.remove('hidden');
 
     if (previewEditor) {
       // keep the width equal to the edit pane width
@@ -387,20 +407,17 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     this.isOpening = true;
 
     if (this._inPreview) {
-      this.$container.css({top: '', 'inset-inline-start': '100%'});
+      container.style.top = '';
+      container.style.insetInlineStart = '100%';
     } else if (this.useMobileStyles) {
-      this.$container.css({
-        top: '100vh',
-        [Slideout.positionProp()]: '',
-      });
+      container.style.top = '100vh';
+      container.style.setProperty(Slideout.positionProp(), '');
     } else {
-      this.$container.css({
-        top: '',
-        [Slideout.positionProp()]: '100vw',
-      });
+      container.style.top = '';
+      container.style.setProperty(Slideout.positionProp(), '100vw');
     }
 
-    this._afterTransition(this.$container, () => {
+    this._afterTransition(container, () => {
       this.isOpening = false;
       this.setFocusWithin();
     });
@@ -410,7 +427,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     // Before `addPanel`: registering with the stack is what hides the rest of
     // the page from assistive technology, and that needs this layer already
     // in place to know which container to leave alone.
-    uiLayerManager().addLayer(this.$outerContainer[0]);
+    uiLayerManager().addLayer(outerContainer);
 
     // Positions the panel (transitioning it in from the offscreen position
     // set above), shows the shade, and locks body scroll.
@@ -427,25 +444,26 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
   }
 
   setFocusWithin(): void {
-    setFocusWithin(this.$container[0]!);
+    setFocusWithin(this.container!);
   }
 
   /** Sizes the slideout to Live Preview's editor pane, which it covers. */
   updateWidthsForPreviewPane(editor: HTMLElement): void {
     const width = editor.offsetWidth;
     const start = previewEditorOffset(editor);
-    if (this.$shade) {
-      this.$shade.width(width);
-      this.$shade[0]!.style.insetInlineStart = `${start}px`;
+    if (this.shade) {
+      this.shade.style.width = `${width}px`;
+      this.shade.style.insetInlineStart = `${start}px`;
     }
-    this.$outerContainer.css({
-      width: `${width}px`,
-      '--lp-editor-start': `${start}px`,
-    });
+    this.outerContainer!.style.width = `${width}px`;
+    this.outerContainer!.style.setProperty('--lp-editor-start', `${start}px`);
   }
 
   setTriggerElement(trigger: SlideoutTrigger): void {
-    this.$triggerElement = $(trigger);
+    this.triggerElement =
+      typeof trigger === 'string'
+        ? document.querySelector<HTMLElement>(trigger)
+        : resolveElement(trigger);
   }
 
   close(): void {
@@ -464,28 +482,33 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     // this panel isn't necessarily the topmost layer any more. Before
     // `removePanel`, which is what restores the background layers — it reads
     // the highest remaining modal layer to decide what to un-hide.
-    uiLayerManager().removeLayer(this.$outerContainer[0]);
+    uiLayerManager().removeLayer(this.outerContainer!);
 
     // Hides the shade if this was the last panel open, and repositions the
     // rest of the stack.
     Slideout.removePanel(this);
-    this.$shade = null;
+    this.shade = null;
 
-    this._afterTransition(this.$container, () => {
-      this.$outerContainer.addClass('hidden');
+    this._afterTransition(this.container!, () => {
+      this.outerContainer?.classList.add('hidden');
       this.trigger('close');
     });
 
-    if (this.$triggerElement?.length) {
-      let focusTarget = $(this.$triggerElement)[0]; // Ensure we convert from jQuery to DOM element
+    if (this.triggerElement) {
+      let focusTarget: HTMLElement | null = this.triggerElement;
 
       // Check if target is still visible
       if (!focusTarget.checkVisibility()) {
-        // If it's a disclosure, get the disclosure trigger instead
+        // If it's in a menu, return focus to the menu's trigger instead
+        const actionMenu = focusTarget.closest('craft-action-menu');
         const disclosure = focusTarget.closest('.menu--disclosure');
-        if (disclosure) {
+        if (actionMenu) {
+          focusTarget = actionMenu.querySelector<HTMLElement>(
+            ':scope > [slot="invoker"]'
+          );
+        } else if (disclosure) {
           const disclosureId = disclosure.getAttribute('id');
-          focusTarget = document.querySelector(
+          focusTarget = document.querySelector<HTMLElement>(
             `[aria-controls="${disclosureId}"]`
           );
         } else {
@@ -495,7 +518,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
       if (focusTarget) {
         setTimeout(() => {
-          focusTarget.focus();
+          focusTarget!.focus();
         }, 150);
       }
     }
@@ -506,14 +529,13 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
    * expected duration if no event is emitted, or immediately if the user
    * prefers reduced motion.
    */
-  _afterTransition($target: any, callback: () => void): void {
+  _afterTransition(target: HTMLElement, callback: () => void): void {
     // If a user prefers reduced motion, perform the callback immediately
     if (prefersReducedMotion()) {
       callback();
       return;
     }
 
-    const target = $target[0];
     const styles = getComputedStyle(target);
     const properties = styles.transitionProperty
       .split(',')
@@ -549,7 +571,8 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
       clearTimeout(timeout);
       this._transitionTimeouts.delete(timeout);
-      $target.off('transitionend.slideout', onTransitionEnd);
+      target.removeEventListener('transitionend', onTransitionEnd);
+      this._transitionListeners.delete(onTransitionEnd);
       callback();
     };
     const onTransitionEnd = (ev: Event) => {
@@ -558,7 +581,8 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
       }
     };
 
-    $target.on('transitionend.slideout', onTransitionEnd);
+    target.addEventListener('transitionend', onTransitionEnd);
+    this._transitionListeners.set(onTransitionEnd, target);
     timeout = setTimeout(complete, transitionDuration + 50);
     this._transitionTimeouts.add(timeout);
   }
@@ -572,7 +596,10 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
     this._transitionTimeouts.forEach(clearTimeout);
     this._transitionTimeouts.clear();
 
-    this.$container.off('transitionend.slideout');
+    for (const [listener, target] of this._transitionListeners) {
+      target.removeEventListener('transitionend', listener);
+    }
+    this._transitionListeners.clear();
   }
 
   /**
@@ -586,16 +613,16 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
     // Only drop the reference — the shade is shared with every other panel
     // and belongs to the stack, so removing it would take it away from them.
-    this.$shade = null;
+    this.shade = null;
 
-    this.$outerContainer.remove();
+    this.outerContainer?.remove();
 
-    if (this.$container) {
-      containerSlideouts.delete(this.$container[0]);
+    if (this.container) {
+      containerSlideouts.delete(this.container);
     }
 
-    this.$outerContainer = null;
-    this.$container = null;
+    this.outerContainer = null;
+    this.container = null;
 
     // Must delete in place — `Craft.Slideout.instances` shares this object
     // reference (see `index.ts`), so a reassignment would strand it.
diff --git a/resources/js/modules/sortable-checkbox-select/index.ts b/resources/js/modules/sortable-checkbox-select/index.ts
index 9db6c3811c5..75d32b9979e 100644
--- a/resources/js/modules/sortable-checkbox-select/index.ts
+++ b/resources/js/modules/sortable-checkbox-select/index.ts
@@ -1,3 +1 @@
 import '@craftcms/ui/components/checkbox-select/checkbox-select';
-
-export {SortableCheckboxSelect} from './sortable-checkbox-select';
diff --git a/resources/js/modules/tabs/compat.ts b/resources/js/modules/tabs/compat.ts
new file mode 100644
index 00000000000..40bc4ac1722
--- /dev/null
+++ b/resources/js/modules/tabs/compat.ts
@@ -0,0 +1,6 @@
+import {Tabs} from './tabs';
+import {registerCraftGlobals} from '@/common/craft-global';
+
+// Created by the adapter's legacy CP screens, slideouts and element editor.
+// Core renders <craft-tabs> instead.
+registerCraftGlobals({Tabs});
diff --git a/resources/js/modules/tabs/globals.ts b/resources/js/modules/tabs/globals.ts
deleted file mode 100644
index 2eb1401eb29..00000000000
--- a/resources/js/modules/tabs/globals.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Tabs} from './tabs';
-import {registerCraftGlobals} from '@/common/craft-global';
-
-// Assign the legacy `Craft` global: `new Craft.Tabs(...)` is created by CP,
-// Preview, cp-screen-slideout, and matrix-entry. Plain modern ES class —
-// nothing subclasses it via the legacy `.extend()` API.
-registerCraftGlobals({Tabs});
diff --git a/resources/js/modules/tabs/index.ts b/resources/js/modules/tabs/index.ts
index 1d28338dc40..11a7ff6c0ab 100644
--- a/resources/js/modules/tabs/index.ts
+++ b/resources/js/modules/tabs/index.ts
@@ -1,4 +1,3 @@
-import './globals';
 import {Tabs} from './tabs';
 
 export {Tabs};
diff --git a/resources/js/modules/tabs/tabs.ts b/resources/js/modules/tabs/tabs.ts
index 403af2f5644..56eed88fb64 100644
--- a/resources/js/modules/tabs/tabs.ts
+++ b/resources/js/modules/tabs/tabs.ts
@@ -49,9 +49,9 @@ type TabArg = number | string | HTMLElement | {0?: HTMLElement} | null;
  *
  * jQuery-free logic, with two documented seams: the overflow menu button is the
  * legacy `.disclosureMenu()` plugin (read via `.data('trigger')`), and the
- * `selectTab`/`deselectTab` events carry a jQuery-wrapped `$tab` because every
- * consumer (CP, Preview, matrix-entry, cp-screen-slideout) reads
- * `ev.$tab.attr('href')`. Booted as `new Craft.Tabs(...)`, so exposed on
+ * `selectTab`/`deselectTab` events carry the tab as `tab`, and jQuery-wrapped
+ * as `$tab` when jQuery is loaded, for the legacy consumers (CP, Preview,
+ * matrix-entry, cp-screen-slideout) that read `ev.$tab.attr('href')`. Booted as `new Craft.Tabs(...)`, so exposed on
  * `window.Craft`.
  */
 export class Tabs extends Base<TabsSettings> {
@@ -251,7 +251,7 @@ export class Tabs extends Base<TabsSettings> {
       }
     }
 
-    this.trigger('selectTab', {$tab: jq()?.(tabEl)});
+    this.trigger('selectTab', {tab: tabEl, $tab: jq()?.(tabEl)});
 
     document.getElementById('content')?.dispatchEvent(new Event('scroll'));
 
@@ -270,7 +270,10 @@ export class Tabs extends Base<TabsSettings> {
     this.#selectedTab = null;
 
     const $ = jq();
-    this.trigger('deselectTab', {$tab: $ && tabEl ? $(tabEl) : undefined});
+    this.trigger('deselectTab', {
+      tab: tabEl,
+      $tab: $ && tabEl ? $(tabEl) : undefined,
+    });
   }
 
   makeTabFocusable(tab: TabArg): void {
diff --git a/resources/js/modules/two-step-verification/TwoStepVerification.vue b/resources/js/modules/two-step-verification/TwoStepVerification.vue
index 7ffc5eb33c4..dd090036156 100644
--- a/resources/js/modules/two-step-verification/TwoStepVerification.vue
+++ b/resources/js/modules/two-step-verification/TwoStepVerification.vue
@@ -114,9 +114,9 @@
     const slideout = new AuthMethodSetupSlideout(data);
     await appendHeadHtml(data.headHtml);
     await appendBodyHtml(data.bodyHtml);
-    slideout.$container
-      .find('.auth-method-close-btn')
-      .on('click', () => slideout.close());
+    slideout
+      .container!.querySelector('.auth-method-close-btn')
+      ?.addEventListener('click', () => slideout.close());
   }
 
   const columnHelper = createCraftColumnHelper<AuthMethod>();
diff --git a/resources/js/modules/ui/entry-field-layout-ui-host.ts b/resources/js/modules/ui/entry-field-layout-ui-host.ts
index 23cdb41c7f1..62553d3cfe5 100644
--- a/resources/js/modules/ui/entry-field-layout-ui-host.ts
+++ b/resources/js/modules/ui/entry-field-layout-ui-host.ts
@@ -12,7 +12,11 @@ import {
 import UiRenderer from './UiRenderer.vue';
 import UpdateFieldLayoutController from '@/actions/CraftCms/Cms/Http/Controllers/Elements/UpdateFieldLayoutController';
 import {isolateFieldUi, rebaseFieldUi, preserveFieldUis} from './html-field-ui';
-import {prepareHtmlNestedOwner} from '@/modules/elements/html-nested-owner';
+import {
+  legacyElementEditor,
+  prepareHtmlNestedOwner,
+} from '@/modules/elements/html-nested-owner';
+import {serializeFormInputs} from '@craftcms/ui/utilities/dom';
 import {
   NestedOwnerEditorKey,
   nestedOwnerContext,
@@ -234,7 +238,7 @@ export function defineEntryFieldLayoutUiHost(
                     return nativeOwner.resolveElementId?.(id) ?? id;
                   const form = this.closest('form');
                   const editor = form
-                    ? ($(form).data('elementEditor') as
+                    ? (legacyElementEditor(form) as
                         | {getDraftElementId?: (id: number) => number}
                         | undefined)
                     : undefined;
@@ -318,7 +322,7 @@ export function defineEntryFieldLayoutUiHost(
       ): Promise<UiPayload> {
         const form = this.closest('form');
         const editor = form
-          ? parseElementEditor($(form).data('elementEditor'))
+          ? parseElementEditor(legacyElementEditor(form))
           : null;
 
         if (!form || (!editor && !this.dataset.owner)) {
@@ -333,7 +337,7 @@ export function defineEntryFieldLayoutUiHost(
         const epoch = this.#refreshEpoch;
         const sequence = ++this.#refreshSequence;
         this.#refreshes.set(scopeKey, {scope, sequence});
-        const data = new URLSearchParams($(form).serialize());
+        const data = new URLSearchParams(serializeFormInputs(form));
         const metadata = this.#fieldPath
           ? this.requestMetadata()
           : {
@@ -348,7 +352,7 @@ export function defineEntryFieldLayoutUiHost(
               ...this.requestMetadata(),
             };
         if (this.#fieldPath) {
-          const ownerEditor = $(form).data('elementEditor') as
+          const ownerEditor = legacyElementEditor(form) as
             | {
                 getDraftElementId?: (id: number) => number;
               }
diff --git a/resources/js/modules/ui/nested-elements/nested-elements-control-host.ts b/resources/js/modules/ui/nested-elements/nested-elements-control-host.ts
index f1fc25ffcc5..feb1e6cff9f 100644
--- a/resources/js/modules/ui/nested-elements/nested-elements-control-host.ts
+++ b/resources/js/modules/ui/nested-elements/nested-elements-control-host.ts
@@ -1,6 +1,7 @@
 import type {CpComponentRegistry} from '@/bootstrap/components';
 import UpdateFieldLayoutController from '@/actions/CraftCms/Cms/Http/Controllers/Elements/UpdateFieldLayoutController';
 import {actionClient, appendBodyHtml, appendHeadHtml, t} from '@craftcms/ui';
+import {serializeFormInputs} from '@craftcms/ui/utilities/dom';
 import {createApp, defineComponent, h, shallowRef, type App} from 'vue';
 import {prepareHtmlNestedOwner} from '@/modules/elements/html-nested-owner';
 import {
@@ -131,7 +132,7 @@ export function defineNestedElementsControlHost(
         }
 
         const epoch = ++this.#epoch;
-        const data = new URLSearchParams($(form).serialize());
+        const data = new URLSearchParams(serializeFormInputs(form));
         for (const name of ['draftId', 'revisionId', 'ownerId', 'fieldId']) {
           data.delete(inputName([...this.#scope, name]));
         }
diff --git a/resources/js/pages/cp/Screen.test.ts b/resources/js/pages/cp/Screen.test.ts
index a592894175b..db8122aa750 100644
--- a/resources/js/pages/cp/Screen.test.ts
+++ b/resources/js/pages/cp/Screen.test.ts
@@ -83,3 +83,49 @@ it.each(['actionButton', 'actionMenu', 'contextMenu', 'all'])(
     }
   }
 );
+
+it('switches legacy tab panes without jQuery', async () => {
+  expect((window as any).jQuery).toBeUndefined();
+
+  host = document.createElement('div');
+  document.body.append(host);
+  app = createApp({
+    setup() {
+      provideLayoutSlotRegistry();
+
+      return () =>
+        h('div', [
+          h(LayoutSlotOutlet, {name: 'content-tabs'}),
+          h(Screen, {
+            tabs: `<div class="pane-tabs"><div role="tablist">
+              <a role="tab" id="tab-one" href="#pane-one" class="sel" aria-selected="true" tabindex="0">One</a>
+              <a role="tab" id="tab-two" href="#pane-two" aria-selected="false" tabindex="-1">Two</a>
+            </div></div>`,
+            content: `<div id="pane-one">First</div><div id="pane-two" class="hidden">Second</div>`,
+          }),
+        ]);
+    },
+  });
+  app.provide(ScreenPropsStoreKey, createScreenPropsStore());
+  app.provide(ScreenContentReadyKey, () => {});
+  app.mount(host);
+
+  await vi.waitFor(() => {
+    expect(host.querySelector('#tab-two')).not.toBeNull();
+    expect(host.querySelector('#pane-two')).not.toBeNull();
+  });
+
+  host.querySelector<HTMLElement>('#tab-two')!.click();
+
+  await vi.waitFor(() => {
+    expect(host.querySelector('#pane-two')!.classList.contains('hidden')).toBe(
+      false
+    );
+  });
+  expect(host.querySelector('#pane-one')!.classList.contains('hidden')).toBe(
+    true
+  );
+  expect(host.querySelector('#tab-two')!.getAttribute('aria-selected')).toBe(
+    'true'
+  );
+});
diff --git a/resources/js/pages/cp/Screen.vue b/resources/js/pages/cp/Screen.vue
index 4c176b3a6b6..8a912ea086b 100644
--- a/resources/js/pages/cp/Screen.vue
+++ b/resources/js/pages/cp/Screen.vue
@@ -14,6 +14,7 @@
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import {useScreenContentReady} from '@/common/composables/screen';
   import {useAppLayout} from '@/common/composables/useAppLayout';
+  import {Tabs} from '@/modules/tabs';
 
   const props = defineProps<{
     content?: string | null;
@@ -190,31 +191,25 @@
   });
 
   /**
-   * Boots the legacy tab controller over the injected tabs fragment.
+   * Boots the tab controller over the injected tabs fragment.
    *
-   * `Craft.Tabs` is never auto-initialized — it's constructed explicitly, the
-   * way `cp-screen-slideout` does for the same fragment. Without this the tab
-   * strip renders but selecting a tab does nothing, because nothing is
-   * toggling `.hidden` on the panes the legacy content declares.
+   * It's constructed explicitly, the way `cp-screen-slideout` does for the
+   * same fragment. Without this the tab strip renders but selecting a tab does
+   * nothing, because nothing is toggling `.hidden` on the panes the legacy
+   * content declares.
    */
-  let tabManager: any = null;
+  let tabManager: Tabs | null = null;
 
   function bootTabs(element: HTMLElement): void {
     fragmentReady();
 
-    const Tabs = (window as any).Craft?.Tabs;
-
-    if (!Tabs) {
-      return;
-    }
-
     const pane = (element.querySelector('.pane-tabs') ??
       element) as HTMLElement;
 
     tabManager = new Tabs(pane);
 
     const paneFor = (ev: any): HTMLElement | null => {
-      const href = ev?.$tab?.attr?.('href');
+      const href = ev?.tab?.getAttribute('href');
 
       return href ? document.querySelector<HTMLElement>(href) : null;
     };
@@ -228,7 +223,7 @@
   }
 
   onBeforeUnmount(() => {
-    tabManager?.destroy?.();
+    tabManager?.destroy();
     tabManager = null;
   });
 </script>
diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index 2aacb75eee0..b1d4b62dee4 100644
--- a/resources/templates/_includes/disclosuremenu.twig
+++ b/resources/templates/_includes/disclosuremenu.twig
@@ -1,10 +1,4 @@
-{% set id = id ?? "menu-#{random()}" %}
-{% set withButton = withButton ?? false %}
-{% set buttonSpinner = buttonSpinner ?? false %}
-{% set withSearchInput = withSearchInput ?? false %}
-{% set disabled = disabled ?? false %}
-
-{% set hasSelected = items|map(i => (i.items ?? [i]))|flatten(1)|contains('selected') %}
+{# Item macros for legacy menu markup #}
 
 {% macro itemType(item) %}
   {%- if item.type ?? false %}
@@ -83,126 +77,39 @@
       {% endapply -%}
     {% endtag %}
   {% endtag %}
-  {% if type == 'link' %}
-    {% js %}
-      $('#{{ id|namespaceInputId }}').on('keydown', (ev) => {
-        if (ev.keyCode === Garnish.SPACE_KEY) {
+  {% js %}
+    (() => {
+      const item = document.getElementById('{{ id|namespaceInputId }}');
+      {% if type == 'link' %}
+      item?.addEventListener('keydown', (ev) => {
+        if (ev.key === ' ') {
           ev.currentTarget.click();
         }
       });
-    {% endjs %}
-  {% endif %}
-  {% js %}
-    $('#{{ id|namespaceInputId }}').on('activate', () => {
-      setTimeout(() => {
-        $('#{{ menuId|namespaceInputId }}').data('disclosureMenu').hide();
-      }, 1);
-    });
+      {% endif %}
+      const hideMenu = () => {
+        setTimeout(() => {
+          // The menu is booted by the legacy jQuery plugin, when it's loaded
+          const menu = document.getElementById('{{ menuId|namespaceInputId }}');
+          window.jQuery?.(menu).data('disclosureMenu')?.hide();
+        }, 1);
+      };
+      // Garnish's activate event also covers Enter and Space, which it
+      // handles without a click
+      if (window.jQuery?.event?.special?.activate) {
+        window.jQuery(item).on('activate', hideMenu);
+      } else {
+        item?.addEventListener('click', hideMenu);
+      }
+    })();
   {% endjs %}
 {% endmacro %}
 
-{% if withButton %}
-  {% if html ?? false %}
-    {{ html|raw }}
-  {% elseif label ?? false %}
-    <span>{{ label }}</span>
-  {% endif %}
-
-  {% tag 'craft-button' with {
-    type: 'button',
-    variant: 'plain',
-    inherit: true,
-    icon: 'craft-icon' in (buttonHtml ?? ''),
-    size: 'small',
-    aria: {
-      controls: id,
-      label: hiddenLabel ?? null
-    },
-    data: {
-      'disclosure-trigger': true,
-    },
-    disabled: disabled ?? false,
-  }|merge(buttonAttributes ?? {}, recursive=true) %}
-    {%- apply spaceless %}
-      {% if buttonSpinner %}
-        <div role="status" class="visually-hidden"></div>
-      {% endif %}
-      {{ (buttonLabel or buttonHtml) ? tag('div', {
-        class: 'label',
-        text: buttonLabel ?? null,
-        html: buttonHtml ?? null,
-      }) }}
-      {% if buttonSpinner %}
-        <div class="spinner spinner-absolute">
-          <span class="visually-hidden">{{ 'Loading'|t('app') }}</span>
-        </div>
-      {% endif %}
-    {% endapply -%}
-  {% endtag %}
+{# Including this template directly renders the menu through `disclosureMenu()` #}
+{% if items is defined %}
+  {{ disclosureMenu(items, _context|filter((value, key) => key in [
+    'id', 'class', 'withButton', 'label', 'html', 'buttonLabel', 'buttonHtml',
+    'autoLabel', 'buttonAttributes', 'hiddenLabel', 'buttonSpinner', 'disabled',
+    'withSearchInput', 'omitIfEmpty', 'invoker',
+  ])) }}
 {% endif %}
-
-{% tag 'div' with {
-  id: id,
-  class: (class ?? [])|explodeClass|merge(['menu', 'menu--disclosure']),
-  data: {
-    'with-search-input': withSearchInput,
-  },
-} %}
-  {% block menu %}
-    {% set ulStarted = false %}
-    {% for item in items %}
-      {% set headingTag = item.headingTag ?? 'h3' %}
-      {% set type = _self.itemType(item) %}
-      {% if type in ['hr', 'group'] %}
-        {% if ulStarted %}
-          {{ '</ul>'|raw }}
-          {% set ulStarted = false %}
-        {% endif %}
-
-        {% if type == 'hr' %}
-          {{ tag('hr', {
-            class: (item.padded ?? true) ? 'padded' : null,
-          }) }}
-        {% else %}
-          {% tag 'div' with {
-            class: {
-              'menu-group': true,
-              hidden: item.hidden ?? false,
-            }|filter|keys
-          } %}
-            {% if item.heading is defined %}
-              {% tag headingTag with {
-                class: {
-                  h6: true,
-                  padded: item.padded ?? true,
-                }|filter|keys,
-              }|merge(item.headingAttributes ??{}, recursive=true) %}
-                {{ item.heading }}
-              {% endtag %}
-            {% endif %}
-            {% tag 'ul' with {
-              class: {
-                padded: hasSelected,
-              }|filter|keys,
-            }|merge(item.listAttributes ?? {}, recursive=true) %}
-              {% for groupItem in item.items %}
-                {{ _self.item(groupItem, id) }}
-              {% endfor %}
-            {% endtag %}
-          {% endtag %}
-        {% endif %}
-      {% else %}
-        {% if not ulStarted %}
-          {% if hasSelected %}
-            {{ '<ul class="padded">'|raw }}
-          {% else %}
-            {{ '<ul>'|raw }}
-          {% endif %}
-          {% set ulStarted = true %}
-        {% endif %}
-        {{ _self.item(item, id) }}
-      {% endif %}
-    {% endfor %}
-    {% if ulStarted %}{{ '</ul>'|raw }}{% endif %}
-  {% endblock %}
-{% endtag %}
diff --git a/resources/templates/_layouts/components/crumbs.twig b/resources/templates/_layouts/components/crumbs.twig
index 430372e220a..b444ccc0b17 100644
--- a/resources/templates/_layouts/components/crumbs.twig
+++ b/resources/templates/_layouts/components/crumbs.twig
@@ -39,21 +39,21 @@
               {% if hasMenuItems %}
                 {% set menuId = crumb.id is defined ? "#{crumb.id}-menu" : "crumb-menu#{random()}" %}
                 {% set menuLabel = crumb.menu.label ?? null %}
-                {{ tag('button', {
-                  class: ['btn', 'menubtn'],
-                  type: 'button',
-                  aria: {
-                    label: menuLabel,
-                    controls: menuId,
-                    describedby: menuLabel ? null : labelId,
-                  },
-                  data: {
-                    'disclosure-trigger': true,
-                  },
-                }) }}
                 {{ disclosureMenu(crumb.menu.items, {
                   id: menuId,
                   withButton: false,
+                  invoker: tag('button', {
+                    class: ['btn', 'menubtn'],
+                    type: 'button',
+                    aria: {
+                      label: menuLabel,
+                      controls: menuId,
+                      describedby: menuLabel ? null : labelId,
+                    },
+                    data: {
+                      'disclosure-trigger': true,
+                    },
+                  }),
                 }) }}
               {% endif %}
             {% endif %}
diff --git a/resources/templates/_special/setup-2fa.twig b/resources/templates/_special/setup-2fa.twig
index d5b537a852a..37b9a59e5b4 100644
--- a/resources/templates/_special/setup-2fa.twig
+++ b/resources/templates/_special/setup-2fa.twig
@@ -28,17 +28,17 @@
 {% endcss %}
 
 {% js %}
+  const setupBtn = document.getElementById('setup-2fa-btn');
   const setup = Craft.authMethodSetup = new Craft.AuthMethodSetup({
     onRefresh: () => {
-      if (Object.values(setup.methodListings).some(c => Garnish.hasAttr(c, 'data-active'))) {
-        $('#setup-2fa-btn').removeClass('hidden');
-      } else {
-        $('#setup-2fa-btn').addClass('hidden');
-      }
+      setupBtn.classList.toggle(
+        'hidden',
+        !Object.values(setup.methodListings).some(c => c.hasAttribute('data-active'))
+      );
     }
   });
 
-  $('#setup-2fa-btn').on('click', () => {
+  setupBtn.addEventListener('click', () => {
     window.location.reload();
   });
 {% endjs %}
diff --git a/resources/templates/settings/entry-types/_selection-settings.twig b/resources/templates/settings/entry-types/_selection-settings.twig
index 89ef4d504f0..f81d9bba1f4 100644
--- a/resources/templates/settings/entry-types/_selection-settings.twig
+++ b/resources/templates/settings/entry-types/_selection-settings.twig
@@ -12,9 +12,30 @@
 
 {% js %}
 (() => {
-  $(document).on('dblclick taphold', '#{{chipId|namespaceInputId}}', (ev) => {
-    $(ev.currentTarget).find('[data-edit-action]').first().click();
+  const chip = document.getElementById('{{ chipId|namespaceInputId }}');
+  const edit = () => chip?.querySelector('[data-edit-action]')?.click();
+  let pressTimer = null;
+  let pressStart = null;
+  const cancelPress = () => {
+    clearTimeout(pressTimer);
+    pressStart = null;
+  };
+  chip?.addEventListener('dblclick', edit);
+  // A long press edits on touch screens, unless the finger moves more than 10px
+  chip?.addEventListener('pointerdown', (ev) => {
+    if (ev.pointerType === 'touch') {
+      pressStart = {x: ev.clientX, y: ev.clientY};
+      pressTimer = setTimeout(edit, 750);
+    }
   });
+  chip?.addEventListener('pointermove', (ev) => {
+    if (pressStart && Math.hypot(ev.clientX - pressStart.x, ev.clientY - pressStart.y) > 10) {
+      cancelPress();
+    }
+  });
+  for (const type of ['pointerup', 'pointercancel']) {
+    chip?.addEventListener(type, cancelPress);
+  }
 })();
 {% endjs %}
 
diff --git a/src/Cp/Components/ActionMenu.php b/src/Cp/Components/ActionMenu.php
index f271d2aca5e..cf70d4e4d10 100644
--- a/src/Cp/Components/ActionMenu.php
+++ b/src/Cp/Components/ActionMenu.php
@@ -4,7 +4,9 @@
 
 namespace CraftCms\Cms\Cp\Components;
 
+use CraftCms\Cms\Cp\Html\ContentHtml;
 use CraftCms\Cms\Cp\Html\MenuHtml;
+use CraftCms\Cms\Cp\Html\StatusHtml;
 use CraftCms\Cms\Cp\Icons;
 use CraftCms\Cms\Element\Enums\MenuItemType;
 use CraftCms\Cms\Shared\Enums\Color;
@@ -272,9 +274,9 @@ protected function contentHtml(): string
      * Field mapping from the legacy `disclosureMenu()`/`menuitem.twig`
      * contract: `destructive` → `variant: 'danger'`, `color` → `iconColor`,
      * `url` → `href`, `action`/`params`/`confirm`/`redirect` → `action`.
-     * `label`/`html`, `description` and `handle` are kept as-is and become
-     * slotted content (HTML) or pass through to `craft-action-item` (client).
-     * Groups are flattened — `craft-action-item` has no group concept.
+     * `selected` → `current`. `label`/`html`, `description`, `handle`,
+     * `status` and `info` are kept as-is and become slotted content (HTML) or
+     * pass through to `craft-action-item` (client). Groups keep their heading.
      *
      * @param  list<array<string, mixed>>  $items
      * @return list<array<string, mixed>>
@@ -296,10 +298,15 @@ protected function toClientItems(array $items, MenuHtml $menuHtml): array
             }
 
             if ($type === MenuItemType::Group->value) {
-                $clientItems = [...$clientItems, ...$this->toClientItems(
-                    $menuHtml->normalizeMenuItems($item['items'] ?? []),
-                    $menuHtml,
-                )];
+                $clientItems[] = Arr::whereNotNull([
+                    'type' => MenuItemType::Group->value,
+                    'heading' => isset($item['heading']) ? (string) $item['heading'] : null,
+                    'hidden' => ($item['hidden'] ?? false) ?: null,
+                    'items' => $this->toClientItems(
+                        $menuHtml->normalizeMenuItems($item['items'] ?? []),
+                        $menuHtml,
+                    ),
+                ]);
 
                 continue;
             }
@@ -322,6 +329,9 @@ protected function toClientItems(array $items, MenuHtml $menuHtml): array
                 'target' => $type === MenuItemType::Link->value ? ($item['target'] ?? null) : null,
                 'disabled' => ($item['disabled'] ?? false) ?: null,
                 'hidden' => ($item['hidden'] ?? false) ?: null,
+                'current' => ($item['selected'] ?? false) ?: null,
+                'status' => isset($item['status']) ? (string) $item['status'] : null,
+                'info' => ! empty($item['info']) ? (string) $item['info'] : null,
                 'variant' => ($item['destructive'] ?? false) ? 'danger' : null,
                 'action' => $this->itemAction($item),
                 'attributes' => $item['attributes'] ?? null,
@@ -391,9 +401,14 @@ protected function itemAction(array $item): ?array
      */
     protected function itemHtml(array $item): string
     {
+        if (($item['type'] ?? null) === MenuItemType::Group->value) {
+            return $this->groupHtml($item);
+        }
+
         if (($item['type'] ?? null) === MenuItemType::HR->value) {
             return Html::tag('hr', '', [
                 'class' => 'action-menu__separator',
+                'hidden' => $item['hidden'] ?? false,
                 // `craft-action-menu`'s `::slotted()` styles can't reach a
                 // light-DOM `<hr>`, so style it inline (mirrors
                 // `action-menu.ts`'s `_renderItem()`).
@@ -414,6 +429,7 @@ protected function itemHtml(array $item): string
             'href' => $item['href'] ?? false,
             'disabled' => $item['disabled'] ?? false,
             'hidden' => $item['hidden'] ?? false,
+            'current' => $item['current'] ?? false,
             'variant' => $item['variant'] ?? false,
             'data-keywords' => $item['keywords'] ?? false,
             'action' => $action ? Json::encode($action, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) : false,
@@ -422,9 +438,45 @@ protected function itemHtml(array $item): string
         return Html::tag('craft-action-item', $this->itemContentHtml($item), $attributes);
     }
 
+    /**
+     * Renders a group as its heading followed by its members, as siblings of
+     * the other items, the way `craft-action-menu` renders a `group` item.
+     *
+     * @param  array<string, mixed>  $group
+     */
+    protected function groupHtml(array $group): string
+    {
+        $html = '';
+
+        if (isset($group['heading'])) {
+            $html .= Html::tag('div', Html::encode($group['heading']), [
+                'class' => 'action-menu__heading',
+                'role' => 'presentation',
+                'hidden' => $group['hidden'] ?? false,
+                // Matches the styling `action-menu.ts` gives the headings it renders
+                'style' => [
+                    'padding-block' => 'var(--c-spacing-xs)',
+                    'padding-inline' => 'calc(var(--c-spacing-sm) * 2 + 1px) var(--c-spacing-md)',
+                    'font-size' => 'var(--c-text-sm)',
+                    'font-weight' => 'bold',
+                ],
+            ]);
+        }
+
+        foreach ($group['items'] ?? [] as $item) {
+            // A hidden group hides everything in it
+            if ($group['hidden'] ?? false) {
+                $item['hidden'] = true;
+            }
+            $html .= $this->itemHtml($item);
+        }
+
+        return $html;
+    }
+
     /**
      * Renders a menu item's slotted content: its label (or raw `html`), plus
-     * optional secondary lines for its `handle` and `description` — the same
+     * optional secondary lines for its `handle`, `description` and `info` — the same
      * `menu-item-description` markup `_includes/menuitem.twig` uses.
      *
      * @param  array<string, mixed>  $item
@@ -435,6 +487,12 @@ protected function itemContentHtml(array $item): string
             ? Html::encode($item['label'])
             : (string) ($item['html'] ?? '');
 
+        if (isset($item['status'])) {
+            $labelHtml = Html::tag('span', app(StatusHtml::class)->statusIndicatorHtml($item['status']).$labelHtml, [
+                'class' => ['inline-flex', 'items-center', 'gap-xs'],
+            ]);
+        }
+
         $secondaryHtml = '';
 
         if (isset($item['handle'])) {
@@ -449,6 +507,15 @@ protected function itemContentHtml(array $item): string
             ]);
         }
 
+        if (isset($item['info'])) {
+            // Plain text, since the item is a button: an info icon or a link
+            // in it would nest one control inside another
+            $infoText = trim(strip_tags(app(ContentHtml::class)->parseMarkdown(Html::encode($item['info']))));
+            $secondaryHtml .= Html::tag('span', $infoText, [
+                'class' => ['menu-item-description', 'mt-2xs', 'text-xs', 'text-quiet'],
+            ]);
+        }
+
         if ($secondaryHtml === '') {
             return $labelHtml;
         }
diff --git a/src/Cp/Components/CheckboxGroup.php b/src/Cp/Components/CheckboxGroup.php
index 3eba5b0b723..7a17f58fe11 100644
--- a/src/Cp/Components/CheckboxGroup.php
+++ b/src/Cp/Components/CheckboxGroup.php
@@ -96,40 +96,53 @@ protected function customOptionsHtml(): string
 
         HtmlStack::jsWithVars(fn ($container, $button, $optionHtml) => <<<JS
             (() => {
-              const \$container = $($container);
-              const \$button = $($button);
+              const container = document.querySelector($container);
+              const button = document.querySelector($button);
+              if (!container || !button) {
+                return;
+              }
               const customOptionHtml = $optionHtml;
 
-              const initCustomOption = (\$option) => {
-                const \$checkbox = \$option.find('input[type=checkbox]');
-                const \$text = \$option.find('.text');
-                \$checkbox.on('change', () => {
-                  if (\$checkbox.prop('checked')) {
-                    \$text.prop('disabled', false).removeClass('disabled noteditable').focus();
+              const initCustomOption = (option) => {
+                const checkbox = option.querySelector('input[type=checkbox]');
+                const text = option.querySelector('.text');
+                if (!checkbox || !text) {
+                  return;
+                }
+                checkbox.addEventListener('change', () => {
+                  if (checkbox.checked) {
+                    text.disabled = false;
+                    text.classList.remove('disabled', 'noteditable');
+                    text.focus();
+                  } else if (text.value !== '') {
+                    text.disabled = true;
+                    text.classList.add('disabled', 'noteditable');
                   } else {
-                    if (\$text.val() !== '') {
-                      \$text.prop('disabled', true).addClass('disabled noteditable');
-                    } else {
-                      \$option.remove();
-                      \$button.focus();
-                    }
+                    option.remove();
+                    button.focus();
                   }
                 });
-                \$text.on('input', () => {
-                  \$checkbox.val(\$text.val());
+                text.addEventListener('input', () => {
+                  checkbox.value = text.value;
                 });
               };
 
-              const \$customOptions = \$container.children('[data-custom]');
-              for (let i = 0; i < \$customOptions.length; i++) {
-                initCustomOption(\$customOptions.eq(i));
+              for (const option of container.querySelectorAll(':scope > [data-custom]')) {
+                initCustomOption(option);
               }
 
-              \$button.on('activate', () => {
+              // craft-button fires click for Enter and Space too
+              button.addEventListener('click', () => {
                 const id = 'option' + Math.floor(Math.random() * 1000000000);
-                const \$newOption = $(customOptionHtml.replace(/__ID__/g, id)).insertBefore(\$button);
-                initCustomOption(\$newOption);
-                \$newOption.find('.text').focus();
+                const template = document.createElement('template');
+                template.innerHTML = customOptionHtml.replace(/__ID__/g, id).trim();
+                const nodes = [...template.content.childNodes];
+                button.before(...nodes);
+                const newOption = nodes.find((node) => node instanceof HTMLElement);
+                if (newOption) {
+                  initCustomOption(newOption);
+                  newOption.querySelector('.text')?.focus();
+                }
               });
             })();
             JS, [
diff --git a/src/Cp/FormFields.php b/src/Cp/FormFields.php
index 3a30534c430..fade647406d 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -545,11 +545,13 @@ public static function radioFromConfig(array $config): Radio
         if ($custom) {
             HtmlStack::jsWithVars(fn ($radio, $text) => <<<JS
                 (() => {
-                  const \$radio = $($radio);
-                  const \$text = $($text);
-                  \$text.on('input', () => {
-                    \$radio.val(\$text.val());
-                  });
+                  const radio = document.querySelector($radio);
+                  const text = document.querySelector($text);
+                  if (radio && text) {
+                    text.addEventListener('input', () => {
+                      radio.value = text.value;
+                    });
+                  }
                 })();
                 JS, [
                 'radio' => '#'.InputNamespace::namespaceId($id),
diff --git a/src/Cp/Html/MenuHtml.php b/src/Cp/Html/MenuHtml.php
index 68024d3ad95..5a3a6bf1ec8 100644
--- a/src/Cp/Html/MenuHtml.php
+++ b/src/Cp/Html/MenuHtml.php
@@ -4,16 +4,19 @@
 
 namespace CraftCms\Cms\Cp\Html;
 
+use CraftCms\Cms\Cp\Components\ActionMenu;
 use CraftCms\Cms\Element\ElementHelper;
 use CraftCms\Cms\Element\Enums\MenuItemType;
 use CraftCms\Cms\Site\Data\Site;
 use CraftCms\Cms\Site\Sites;
 use CraftCms\Cms\Support\Arr;
 use CraftCms\Cms\Support\Facades\SiteGroups;
+use CraftCms\Cms\Support\Html;
 use CraftCms\Cms\Support\Url;
 use CraftCms\Cms\View\TemplateMode;
 use Illuminate\Container\Attributes\Singleton;
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 
 use function CraftCms\Cms\t;
 use function CraftCms\Cms\template;
@@ -29,10 +32,52 @@ public function __construct(
     ) {}
 
     /**
+     * Renders a menu as a `<craft-action-menu>`.
+     *
+     * Takes the legacy disclosure menu config: `id`, `class`, `withButton`,
+     * `buttonLabel`/`buttonHtml`, `autoLabel` (label the button with the
+     * selected item), `hiddenLabel`, `buttonAttributes`, `buttonSpinner`,
+     * `disabled` and `withSearchInput`. Without a button, `invoker` supplies the
+     * element that opens it.
+     *
      * @param  list<array<string, mixed>>  $items
      * @param  array<string, mixed>  $config
      */
     public function disclosureMenu(array $items, array $config = []): string
+    {
+        $config = $this->disclosureMenuConfig($items, $config);
+
+        if ($config === null) {
+            return '';
+        }
+
+        $menu = ActionMenu::make()
+            ->menuItems($config['items'], normalize: false)
+            ->label($config['hiddenLabel'])
+            ->searchable((bool) ($config['withSearchInput'] ?? false))
+            ->disabled((bool) ($config['disabled'] ?? false))
+            ->attributes(array_filter([
+                'id' => $config['id'],
+                'class' => $config['class'],
+            ]));
+
+        $invoker = $config['withButton'] ? $this->menuButtonHtml($config) : ($config['invoker'] ?? null);
+        if ($invoker !== null) {
+            $menu->invoker(new HtmlString((string) $invoker));
+        }
+
+        return $menu->toHtml();
+    }
+
+    /**
+     * The menu config with its defaults and normalized `items`, or null when
+     * there are no items and the menu should be omitted.
+     *
+     * @param  list<array<string, mixed>>  $items
+     * @param  array<string, mixed>  $config
+     * @return array<string, mixed>|null
+     */
+    protected function disclosureMenuConfig(array $items, array $config): ?array
     {
         $config += [
             'id' => sprintf('menu-%s', mt_rand()),
@@ -48,9 +93,8 @@ public function disclosureMenu(array $items, array $config = []): string
 
         $items = Collection::make($this->disclosureMenuItems($items));
 
-        // If we're left without any items, just return an empty string
         if ($config['omitIfEmpty'] && $items->isEmpty()) {
-            return '';
+            return null;
         }
 
         $config['items'] = $items->all();
@@ -68,7 +112,60 @@ public function disclosureMenu(array $items, array $config = []): string
             }
         }
 
-        return template('_includes/disclosuremenu', $config, templateMode: TemplateMode::Cp);
+        return $config;
+    }
+
+    /** @param  array<string, mixed>  $config */
+    private function menuButtonHtml(array $config): string
+    {
+        $labelHtml = match (true) {
+            isset($config['html']) => (string) $config['html'],
+            isset($config['label']) => Html::encode((string) $config['label']),
+            default => '',
+        };
+        $buttonLabelHtml = match (true) {
+            isset($config['buttonHtml']) => (string) $config['buttonHtml'],
+            isset($config['buttonLabel']) => Html::encode((string) $config['buttonLabel']),
+            default => '',
+        };
+        $contentHtml = trim($labelHtml.$buttonLabelHtml);
+        $iconOnly = $contentHtml === '' || (
+            $labelHtml === '' &&
+            str_contains($buttonLabelHtml, 'craft-icon') &&
+            trim(strip_tags($buttonLabelHtml)) === ''
+        );
+
+        $ariaLabel = $config['hiddenLabel'] ?? ($iconOnly ? t('Actions') : null);
+
+        if ($contentHtml === '') {
+            $contentHtml = Html::tag('craft-icon', '', ['name' => 'ellipsis']);
+        } elseif (! $iconOnly && $ariaLabel !== null) {
+            // An aria-label would hide the visible text from assistive tech
+            $contentHtml = Html::tag('span', Html::encode((string) $ariaLabel), ['class' => 'sr-only']).' '.$contentHtml;
+            $ariaLabel = null;
+        }
+
+        if ($config['buttonSpinner'] ?? false) {
+            $contentHtml .= Html::tag('craft-spinner', '', [
+                'class' => ['spinner', 'hidden'],
+                'label' => t('Loading'),
+            ]);
+        }
+
+        $buttonAttributes = $config['buttonAttributes'];
+        unset($buttonAttributes['removeClass']);
+
+        return Html::tag('craft-button', $contentHtml, Arr::merge([
+            'type' => 'button',
+            'variant' => 'plain',
+            'inherit' => true,
+            'size' => 'small',
+            'icon' => $iconOnly,
+            'disabled' => (bool) ($config['disabled'] ?? false),
+            'aria' => [
+                'label' => $ariaLabel,
+            ],
+        ], $buttonAttributes));
     }
 
     /**
diff --git a/src/Entry/Elements/Entry.php b/src/Entry/Elements/Entry.php
index 72d60d9d190..806fafdf4fc 100644
--- a/src/Entry/Elements/Entry.php
+++ b/src/Entry/Elements/Entry.php
@@ -2537,23 +2537,23 @@ private function _applyActionBtnEntryTypeCompatibility(): void
 
         if (! $this->isEntryTypeCompatible()) {
             $js = <<<JS
-let applyDraftBtn = $('#action-buttons .tooltip-draft-btn')
-if (applyDraftBtn.length > 0) {
-  applyDraftBtn.addClass('disabled');
-  let tooltipBtn = `<craft-tooltip aria-label="$draftMessage">` +
-    applyDraftBtn.get(0).outerHTML +
-    `</craft-tooltip>`;
-  applyDraftBtn.replaceWith(tooltipBtn);
-}
-
-let revertRevisionBtn = $('#action-buttons .revision-draft-btn');
-if (revertRevisionBtn.length > 0) {
-  revertRevisionBtn.addClass('disabled');
-  let tooltipBtn = `<craft-tooltip aria-label="$revisionMessage">` +
-    revertRevisionBtn.get(0).outerHTML +
-    `</craft-tooltip>`;
-  revertRevisionBtn.replaceWith(tooltipBtn);
-}
+(() => {
+  const applyDraftBtn = document.querySelector('#action-buttons .tooltip-draft-btn');
+  if (applyDraftBtn) {
+    applyDraftBtn.classList.add('disabled');
+    applyDraftBtn.outerHTML = `<craft-tooltip aria-label="$draftMessage">` +
+      applyDraftBtn.outerHTML +
+      `</craft-tooltip>`;
+  }
+
+  const revertRevisionBtn = document.querySelector('#action-buttons .revision-draft-btn');
+  if (revertRevisionBtn) {
+    revertRevisionBtn.classList.add('disabled');
+    revertRevisionBtn.outerHTML = `<craft-tooltip aria-label="$revisionMessage">` +
+      revertRevisionBtn.outerHTML +
+      `</craft-tooltip>`;
+  }
+})();
 JS;
             HtmlStack::js($js);
         }
diff --git a/src/Field/Link.php b/src/Field/Link.php
index 6a31f45e06d..b877f6a3ebb 100644
--- a/src/Field/Link.php
+++ b/src/Field/Link.php
@@ -291,7 +291,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
         $id = $this->getInputId();
 
         HtmlStack::jsWithVars(fn ($id) => <<<JS
-new Craft.LinkField($('#' + $id));
+new Craft.LinkField(document.getElementById($id));
 JS, [
             InputNamespace::namespaceId($id),
         ]);
@@ -303,11 +303,11 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
         } else {
             $namespacedId = InputNamespace::namespaceId($id);
             $js = <<<JS
-$('#$namespacedId-type').on('change', e => {
-  const type = $('#$namespacedId-type').val();
-  $('#$namespacedId')
-    .attr('type', type)
-    .attr('inputmode', type);
+document.getElementById('$namespacedId-type')?.addEventListener('change', e => {
+  const type = e.target.value;
+  const input = document.getElementById('$namespacedId');
+  input?.setAttribute('type', type);
+  input?.setAttribute('inputmode', type);
 });
 JS;
             HtmlStack::js($js);
diff --git a/src/Field/LinkTypes/BaseElementLinkType.php b/src/Field/LinkTypes/BaseElementLinkType.php
index 780b4617285..58d0bae1ddc 100644
--- a/src/Field/LinkTypes/BaseElementLinkType.php
+++ b/src/Field/LinkTypes/BaseElementLinkType.php
@@ -167,20 +167,26 @@ public function inputHtml(Link $field, ?string $value, string $containerId): str
 
         HtmlStack::jsWithVars(fn ($id, $refHandle) => <<<JS
 (() => {
-  const container = $('#' + $id);
-  const field = container.closest('[data-link-field]').parent().data('linkField');
-  const input = container.next('input');
+  const container = document.getElementById($id);
+  const input = container?.nextElementSibling;
+  if (!container || !(input instanceof HTMLInputElement)) {
+    return;
+  }
+  const field = () => Craft.LinkField.forContainer(
+    container.closest('[data-link-field]')?.parentElement
+  );
   const refHandle = $refHandle;
-  container[0].addEventListener('selectElements', (ev) => {
+  container.addEventListener('selectElements', (ev) => {
     const element = ev.detail.elements[0];
-    input.val(`{\${refHandle}:\${element.id}@\${element.siteId}:url}`);
-    field.updateLabel(element.label);
-    field.updateFilename(element.\$element.data('filename'));
+    const chip = element.element ?? element.\$element?.[0];
+    input.value = `{\${refHandle}:\${element.id}@\${element.siteId}:url}`;
+    field()?.updateLabel(element.label);
+    field()?.updateFilename(chip?.dataset.filename ?? '');
   });
-  container[0].addEventListener('removeElements', () => {
-    input.val('');
-    field.updateLabel('');
-    field.updateFilename('');
+  container.addEventListener('removeElements', () => {
+    input.value = '';
+    field()?.updateLabel('');
+    field()?.updateFilename('');
   });
 })();
 JS, [
diff --git a/src/Field/Number.php b/src/Field/Number.php
index 0d06aa7bebe..db805e28cfb 100644
--- a/src/Field/Number.php
+++ b/src/Field/Number.php
@@ -312,10 +312,26 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
         $namespacedId = InputNamespace::namespaceId($id);
 
         $js = <<<JS
-(function() {
-    const input = \$('#$namespacedId');
-    input.on('input', () => {
-        Craft.filterNumberInputVal(input);
+(() => {
+    const input = document.getElementById('$namespacedId');
+    // Reduce the value to numeric characters, keeping the caret in place
+    input?.addEventListener('input', () => {
+        const value = input.value;
+        let caret = input.selectionStart;
+        let filtered = '';
+        for (let i = 0; i < value.length; i++) {
+            if (/[0-9.,-]/.test(value[i])) {
+                filtered += value[i];
+            } else if (caret !== null && i < caret) {
+                caret--;
+            }
+        }
+        if (filtered !== value) {
+            input.value = filtered;
+            if (caret !== null) {
+                input.setSelectionRange(caret, caret);
+            }
+        }
     });
 })();
 JS;
diff --git a/src/Ui/Nodes/ActionMenu.php b/src/Ui/Nodes/ActionMenu.php
index a0555184396..ff24f5a31ce 100644
--- a/src/Ui/Nodes/ActionMenu.php
+++ b/src/Ui/Nodes/ActionMenu.php
@@ -53,12 +53,24 @@ public static function make(string $uid, array $menuItems): self
         // path (where `ElementHtml` keys chip behavior off their prefixes).
         // Leaving them in `props()` would make the payload differ on every
         // render, which reads as a change to a refreshable UI.
-        foreach ($items as &$item) {
+        return new self($uid, self::withoutIds($items));
+    }
+
+    /**
+     * @param  list<array<string, mixed>>  $items
+     * @return list<array<string, mixed>>
+     */
+    private static function withoutIds(array $items): array
+    {
+        return array_map(function (array $item): array {
             unset($item['id']);
-        }
-        unset($item);
 
-        return new self($uid, $items);
+            if (isset($item['items'])) {
+                $item['items'] = self::withoutIds($item['items']);
+            }
+
+            return $item;
+        }, $items);
     }
 
     public static function renderHtml(NodePayload $node, UiPayload $payload, UiHtmlRenderer $renderer): string
diff --git a/src/View/LegacyAssets/CpAsset.php b/src/View/LegacyAssets/CpAsset.php
index e89f5964b1c..e5600e061b1 100644
--- a/src/View/LegacyAssets/CpAsset.php
+++ b/src/View/LegacyAssets/CpAsset.php
@@ -24,10 +24,6 @@ class CpAsset implements LegacyAssetInterface
         // TailwindResetAsset::class,
         AnimationBlockerAsset::class,
         D3Asset::class,
-        GarnishAsset::class,
-        JqueryAsset::class,
-        JqueryTouchEventsAsset::class,
-        VelocityAsset::class,
         ThemeAsset::class,
     ];
 
diff --git a/src/View/LegacyAssets/InputmaskAsset.php b/src/View/LegacyAssets/InputmaskAsset.php
index 7c2b298ce15..bb6f4e39e3a 100644
--- a/src/View/LegacyAssets/InputmaskAsset.php
+++ b/src/View/LegacyAssets/InputmaskAsset.php
@@ -17,7 +17,9 @@
  */
 class InputmaskAsset implements LegacyAssetInterface
 {
-    public array $depends = [];
+    public array $depends = [
+        JqueryAsset::class,
+    ];
 
     public function register(HtmlStack $htmlStack): void
     {
diff --git a/src/View/LegacyAssets/MoneyAsset.php b/src/View/LegacyAssets/MoneyAsset.php
index d860eab08da..a04e18cea7a 100644
--- a/src/View/LegacyAssets/MoneyAsset.php
+++ b/src/View/LegacyAssets/MoneyAsset.php
@@ -24,6 +24,7 @@ class MoneyAsset implements LegacyAssetInterface
 {
     public array $depends = [
         CpAsset::class,
+        GarnishAsset::class,
         InputmaskAsset::class,
     ];
 
diff --git a/tests/Feature/Http/Responses/CpScreenSlideoutTest.php b/tests/Feature/Http/Responses/CpScreenSlideoutTest.php
index c845cd38d08..72b41f43986 100644
--- a/tests/Feature/Http/Responses/CpScreenSlideoutTest.php
+++ b/tests/Feature/Http/Responses/CpScreenSlideoutTest.php
@@ -47,7 +47,7 @@ function editUrl(): string
 it('loads screen assets with the initial document', function () {
     get(editUrl())
         ->assertOk()
-        ->assertSee('/legacy/jquery/dist/jquery.js', false)
+        ->assertSee('/legacy/animationblocker/dist/AnimationBlocker.js', false)
         ->assertInertia(fn (AssertableInertia $page) => $page
             ->missing('headHtml')
             ->missing('bodyHtml'));
diff --git a/tests/Feature/Integration/UtilityPageAssetsTest.php b/tests/Feature/Integration/UtilityPageAssetsTest.php
index dcb070fdfba..d81def8b491 100644
--- a/tests/Feature/Integration/UtilityPageAssetsTest.php
+++ b/tests/Feature/Integration/UtilityPageAssetsTest.php
@@ -23,24 +23,22 @@
  * Utility pages used to drain the whole HtmlStack into their own Inertia page
  * props, which also swallowed the global CP asset bundle that
  * HandleInertiaRequests registers for every CP request. That left the root
- * template without jQuery or Garnish, so the page died
- * on `$ is not defined` before the Inertia app could mount.
+ * template without the `window.Craft` config the Inertia app boots from.
  */
 it('leaves the global CP asset bundle in the root template', function (string $id) {
     $html = get("/{$this->cpTrigger}/utilities/{$id}")
         ->assertOk()
         ->getContent();
 
-    // jQuery and Garnish are body-end JS files. The legacy cp.js bundle comes
+    // The legacy Craft.js bundle, and the jQuery and Garnish it needs, come
     // with the Yii2 adapter, not core…
     expect($html)
-        ->toContain('legacy/jquery/dist/jquery.js')
-        ->toContain('legacy/garnish/dist/garnish.js')
+        ->toContain('legacy/theme/dist/')
+        ->not->toContain('legacy/jquery/dist/jquery.js')
         ->not->toContain('legacy/cpcompat/dist/craft.js');
 
-    // …while the `window.Craft` config it reads is head JS. It has to land in
-    // the root template's <head>, ahead of the module scripts that boot the
-    // Inertia CP.
+    // …while the `window.Craft` config is head JS. It has to land in the root
+    // template's <head>, ahead of the module scripts that boot the Inertia CP.
     expect(Str::between($html, '<head>', '</head>'))
         ->toContain('window.Craft = Object.assign');
 })->with(['system-report', 'php-info', 'deprecation-errors']);
diff --git a/tests/Unit/Cp/FormFieldsTest.php b/tests/Unit/Cp/FormFieldsTest.php
index bba06e3a460..0e43f1f8d98 100644
--- a/tests/Unit/Cp/FormFieldsTest.php
+++ b/tests/Unit/Cp/FormFieldsTest.php
@@ -113,6 +113,36 @@ public function getFieldLayout(): FieldLayout
         expect($input->filter('craft-button')->text())->toBe('Add an entry')
             ->and($input->filter('input[type="hidden"][name="featuredEntryIds"][value=""]'))->toHaveCount(1);
     })->with([false, true]);
+
+    it('boots through a custom element rather than an inline script', function (?string $jsClass, string $element, ?string $inputClass) {
+        $html = FormFields::elementSelectHtml([
+            'id' => 'related',
+            'name' => 'relatedIds',
+            'elementType' => Entry::class,
+            'jsClass' => $jsClass,
+        ]);
+
+        $input = new Crawler($html)->filter($element);
+
+        expect($input)->toHaveCount(1)
+            ->and($input->attr('input-class'))->toBe($inputClass)
+            ->and(json_decode((string) $input->attr('settings'), true)['name'])->toBe('relatedIds')
+            ->and($html)->not->toContain('<script');
+    })->with([
+        'default' => [null, 'craft-entry-select-input', null],
+        'plugin class' => ['MyPlugin.SelectInput', 'craft-entry-select-input', 'MyPlugin.SelectInput'],
+    ]);
+
+    it('renders a plain container when disabled', function () {
+        $html = FormFields::elementSelectHtml([
+            'id' => 'related',
+            'elementType' => Entry::class,
+            'disabled' => true,
+        ]);
+
+        expect($html)->not->toContain('craft-element-select-input')
+            ->and($html)->toContainTag('div', ['id' => 'related']);
+    });
 });
 
 describe('customSelectFieldHtml', function () {
diff --git a/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 96656baaa21..ebf7babdfed 100644
--- a/tests/Unit/Cp/MenuHtmlTest.php
+++ b/tests/Unit/Cp/MenuHtmlTest.php
@@ -4,6 +4,9 @@
 
 use CraftCms\Cms\Cp\Html\MenuHtml;
 use CraftCms\Cms\Element\Enums\MenuItemType;
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\template;
 
 it('returns empty html for empty menu when omitIfEmpty is true', function () {
     $html = app(MenuHtml::class)->disclosureMenu([], ['omitIfEmpty' => true]);
@@ -23,3 +26,86 @@
         ->and($items[2]['type'])->toBe(MenuItemType::Group->value)
         ->and($items[2]['items'][0]['type'])->toBe(MenuItemType::Button->value);
 });
+
+it('renders a craft-action-menu with grouped headings and the selected item marked current', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([
+        ['label' => 'Primary', 'url' => '/primary', 'selected' => true],
+        ['heading' => 'More sites', 'items' => [
+            ['label' => 'Secondary', 'url' => '/secondary', 'status' => 'enabled'],
+        ]],
+        ['label' => 'Delete', 'action' => 'entries/delete', 'destructive' => true],
+    ], [
+        'id' => 'context-menu',
+        'autoLabel' => true,
+        'hiddenLabel' => 'Select context',
+        'withSearchInput' => true,
+    ]);
+
+    expect($html)->toContainTag('craft-action-menu', ['id' => 'context-menu', 'searchable' => true])
+        ->and($html)->toContainTag('craft-button', ['slot' => 'invoker', 'aria-label' => false])
+        ->and($html)->toContain('<span class="sr-only">Select context</span> Primary')
+        ->and($html)->toContainTag('craft-action-item', ['current' => true])
+        ->and($html)->toContain('<div class="action-menu__heading" role="presentation"')
+        ->and($html)->toContain('More sites')
+        ->and($html)->toContainTag('craft-action-item', ['variant' => 'danger'])
+        ->and($html)->not->toContain('data-disclosure-trigger')
+        ->and($html)->not->toContain('menu--disclosure');
+});
+
+it('uses the given invoker when the menu has no button of its own', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([['label' => 'Child']], [
+        'withButton' => false,
+        'invoker' => '<button type="button" class="btn menubtn">Crumb</button>',
+    ]);
+
+    expect($html)->toContainTag('button', ['slot' => 'invoker', 'class' => 'btn menubtn']);
+});
+
+it('renders the menu when _includes/disclosuremenu is included directly', function () {
+    $html = template('_includes/disclosuremenu', [
+        'items' => [['label' => 'Included item', 'url' => '/included']],
+        'id' => 'included-menu',
+        'hiddenLabel' => 'Included actions',
+    ], templateMode: TemplateMode::Cp);
+
+    expect($html)->toContainTag('craft-action-menu', ['id' => 'included-menu'])
+        ->and($html)->toContainTag('craft-button', ['slot' => 'invoker', 'aria-label' => 'Included actions'])
+        ->and($html)->toContain('Included item');
+});
+
+it('names an icon-only menu button when no label is given', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([['label' => 'Child']]);
+
+    expect($html)->toContainTag('craft-button', ['slot' => 'invoker', 'aria-label' => 'Actions']);
+});
+
+it('renders item info as text rather than a control inside the item', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([
+        ['label' => 'Child', 'info' => 'Read the **docs** <script>alert(1)</script>'],
+    ]);
+
+    expect($html)->not->toContain('craft-info-icon')
+        ->and($html)->not->toContain('<script>')
+        ->and($html)->toContain('Read the docs');
+});
+
+it('hides a hidden group along with everything in it', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([
+        ['label' => 'Visible', 'id' => 'visible'],
+        ['heading' => 'Other sites', 'hidden' => true, 'items' => [
+            ['label' => 'Omitted', 'id' => 'omitted'],
+        ]],
+    ]);
+
+    expect($html)->toMatch('/<div class="action-menu__heading"[^>]* hidden[ >]/')
+        ->and($html)->toContainTag('craft-action-item', ['id' => 'omitted', 'hidden' => true])
+        ->and($html)->toContainTag('craft-action-item', ['id' => 'visible', 'hidden' => false]);
+});
+
+it('keeps the visible text of a button with an icon and a label as its name', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([['label' => 'Child']], [
+        'buttonHtml' => '<craft-icon name="plus"></craft-icon> Add',
+    ]);
+
+    expect($html)->toContainTag('craft-button', ['slot' => 'invoker', 'aria-label' => false, 'icon' => false]);
+});
diff --git a/tests/Unit/Ui/ActionMenuNodeTest.php b/tests/Unit/Ui/ActionMenuNodeTest.php
index 529e9d47ac7..b6186c91472 100644
--- a/tests/Unit/Ui/ActionMenuNodeTest.php
+++ b/tests/Unit/Ui/ActionMenuNodeTest.php
@@ -55,6 +55,19 @@ function actionMenuUi(array $items, ?CopyAttribute $chip = null): Ui
         ->and(json_encode($node->props()))->toBeString();
 });
 
+it('keeps the payload of grouped items stable across renders', function () {
+    $menuItems = [
+        ['type' => 'group', 'heading' => 'Settings', 'items' => [
+            ['label' => 'Field settings'],
+        ]],
+    ];
+
+    $items = ActionMenu::make('menu', $menuItems)->props()['items'];
+
+    expect($items[0]['items'][0]['label'])->toBe('Field settings')
+        ->and($items)->toBe(ActionMenu::make('menu', $menuItems)->props()['items']);
+});
+
 it('converts a string action into an http descriptor', function () {
     $items = ActionMenu::make('menu', [
         ['label' => 'Delete', 'action' => 'fields/delete', 'params' => ['id' => 3]],
diff --git a/tests/Unit/View/LegacyAssetsTest.php b/tests/Unit/View/LegacyAssetsTest.php
new file mode 100644
index 00000000000..1edebdafdf8
--- /dev/null
+++ b/tests/Unit/View/LegacyAssetsTest.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\HtmlStack;
+use CraftCms\Cms\View\LegacyAssets\CpAsset;
+use CraftCms\Cms\View\LegacyAssets\InputmaskAsset;
+use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
+use CraftCms\Cms\View\LegacyAssets\MoneyAsset;
+
+it('loads the CP asset without jQuery or Garnish', function () {
+    app(InternalAssetRegistry::class)->register(CpAsset::class);
+    $html = app(HtmlStack::class)->headHtml().app(HtmlStack::class)->bodyHtml();
+
+    expect($html)->toContain('legacy/theme/dist/')
+        ->not->toContain('legacy/jquery/dist/jquery.js')
+        ->not->toContain('legacy/garnish/dist/garnish.js');
+});
+
+it('loads Garnish ahead of the legacy money input', function () {
+    app(InternalAssetRegistry::class)->register(MoneyAsset::class);
+    $html = app(HtmlStack::class)->headHtml().app(HtmlStack::class)->bodyHtml();
+
+    expect($html)->toContain('legacy/garnish/dist/garnish.js')
+        ->and(strpos($html, 'legacy/garnish/dist/garnish.js'))
+        ->toBeLessThan(strpos($html, 'legacy/money/dist/Money.js'));
+});
+
+it('loads jQuery ahead of the Inputmask plugin', function () {
+    app(InternalAssetRegistry::class)->register(InputmaskAsset::class);
+    $html = app(HtmlStack::class)->headHtml().app(HtmlStack::class)->bodyHtml();
+
+    expect($html)->toContain('legacy/jquery/dist/jquery.js')
+        ->and(strpos($html, 'legacy/jquery/dist/jquery.js'))
+        ->toBeLessThan(strpos($html, 'legacy/inputmask/dist/jquery.inputmask.bundle.js'));
+});
diff --git a/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php b/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
index bf17d1580ec..7c1395cc728 100644
--- a/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
+++ b/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
@@ -11,8 +11,11 @@
 
 /**
  * Asset bundle for the Focal Point class.
- * @deprecated 6.0.0 The focal point editor is part of the control panel's image previews, so this registers nothing.
+ * @deprecated 6.0.0 `Craft.FocalPoint` has been removed, so this registers nothing.
  */
 class FocalPointAsset extends AssetBundle
 {
+    public function registerAssetFiles($view)
+    {
+    }
 }
diff --git a/yii2-adapter/resources/js/cp-compat.ts b/yii2-adapter/resources/js/cp-compat.ts
index 1b6f970a85d..67b793bc58c 100644
--- a/yii2-adapter/resources/js/cp-compat.ts
+++ b/yii2-adapter/resources/js/cp-compat.ts
@@ -10,7 +10,8 @@ import '@/modules/auth-method-setup/compat';
 import '@/modules/customize-sources/compat';
 import '@/modules/data-table-sorter/compat';
 import '@/modules/editable-table/compat';
-import '@/modules/element-select-input/compat';
+import '@/modules/element-action-trigger/compat';
+import './element-select-input';
 import '@/modules/element-selector-modal/compat';
 import '@/modules/element-table-sorter/compat';
 import '@/modules/grouped-entry-type-manager/compat';
@@ -20,4 +21,5 @@ import '@/modules/interval-manager/compat';
 import '@/modules/prompt-handler/compat';
 import '@/modules/slideout/compat';
 import '@/modules/sortable-checkbox-select/compat';
+import '@/modules/tabs/compat';
 import '@/modules/ui/compat';
diff --git a/yii2-adapter/resources/js/element-select-input/asset-select-input.ts b/yii2-adapter/resources/js/element-select-input/asset-select-input.ts
new file mode 100644
index 00000000000..0dbcbaabea9
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/asset-select-input.ts
@@ -0,0 +1,357 @@
+import {Uploader} from '@/modules/uploader/uploader';
+import {UploadError} from '@/upload-client';
+import type {UploaderCallbacks} from '@/modules/uploader/base-uploader';
+import {BaseElementSelectInput} from './base-element-select-input';
+import {openAssetImageEditor} from '@/modules/image-editor';
+import {IntervalManager} from '@/modules/interval-manager/interval-manager';
+import '@craftcms/ui/components/progress-bar/progress-bar';
+import type CraftProgressBar from '@craftcms/ui/components/progress-bar/progress-bar';
+import '@/modules/asset-select-input/asset-select-input.css';
+import {t} from '@craftcms/ui/utilities/translate';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
+import {startSide} from '@/common/craft/direction';
+import {showError} from '@/modules/messages/messages';
+import {QueueService} from '@/modules/queue/queue';
+import {announce} from '@/common/announcer';
+import {getElementInfo} from './element-markup';
+
+declare const Craft: any;
+declare const Garnish: any;
+declare const $: any;
+
+/**
+ * AssetSelectInput — a port of `Craft.AssetSelectInput` onto
+ * {@link BaseElementSelectInput}. Extends the base element select with:
+ * - An upload button + hidden file input wired to the native uploader
+ * - A `<craft-progress-bar>` overlay during uploads, announced to screen readers
+ * - Shift-Space keyboard shortcut to open the file preview modal
+ *
+ * Notes:
+ * - `keydown` on the elements container is a native event — `addListener` works.
+ * - Upload lifecycle callbacks are passed in the uploader settings.
+ * - The upload button's `click` handler uses jQuery `.on()` because the file
+ *   input is replaced after each upload (see the comment in `_attachUploader`).
+ */
+export class AssetSelectInput extends BaseElementSelectInput {
+  $uploadBtn: any = null;
+  $fileInput: any = null;
+  uploader: any = null;
+  progressBar: CraftProgressBar | null = null;
+  #progressAnnouncer: IntervalManager | null = null;
+  openPreviewTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(settings?: any) {
+    super(settings);
+    if (new.target === AssetSelectInput) {
+      this.init(settings);
+    }
+  }
+
+  override init(...initArgs: any[]): void {
+    super.init(...initArgs);
+
+    if (this.settings.canUpload) {
+      this._attachUploader();
+    }
+
+    this.updateAddElementsBtn();
+
+    // SAFETY: This listener is attached specifically to the native keydown event.
+    this.addListener(this.$elementsContainer[0], 'keydown', ((
+      ev: KeyboardEvent
+    ) => {
+      if (ev.keyCode === Garnish.SPACE_KEY && ev.shiftKey) {
+        this.openPreview();
+        ev.stopPropagation();
+      }
+    }) as any);
+  }
+
+  override addElements($elements: any): void {
+    super.addElements($elements);
+
+    // Route the Open in Image Editor actions through this input, so new assets can replace the selected ones
+    for (let i = 0; i < $elements.length; i++) {
+      const $element = $elements.eq(i);
+      $element
+        .find('[id*="action-image-edit"]')
+        .each((_: number, btn: HTMLElement) => {
+          const $btn = $(btn);
+          // Remove the existing handler, and change the ID in case it hasn't been registered yet
+          $btn
+            .off('activate')
+            .attr('id', `${btn.id}-${Math.floor(Math.random() * 1000000)}`);
+          // `activate` is a jQuery synthetic event, so it needs `.on()` rather than `addListener()`.
+          $btn.on('activate', () => {
+            openAssetImageEditor($element.data('id'), (result) => {
+              if (result.newAssetId) {
+                this.replaceElement(
+                  $element.data('id'),
+                  result.newAssetId
+                ).catch(() => {});
+              }
+            }).catch((error) => showError(error?.response?.data?.message));
+          });
+        });
+    }
+  }
+
+  override elementSelectSettings(): any {
+    return Object.assign(super.elementSelectSettings(), {
+      makeFocusable: true,
+    });
+  }
+
+  clearOpenPreviewTimeout(): void {
+    if (this.openPreviewTimeout) {
+      clearTimeout(this.openPreviewTimeout);
+      this.openPreviewTimeout = null;
+    }
+  }
+
+  openPreview($element?: any): void {
+    if (Craft.PreviewFileModal.openInstance) {
+      Craft.PreviewFileModal.openInstance.hide();
+    } else {
+      if (!$element) {
+        $element = this.$elements
+          .filter(':focus')
+          .add(this.$elements.has(':focus'));
+      }
+      if ($element.length) {
+        Craft.PreviewFileModal.showForAsset($element, this.elementSelect);
+      }
+    }
+  }
+
+  _attachUploader(): void {
+    const shade = document.createElement('div');
+    shade.className = 'progress-shade';
+    this.progressBar = document.createElement('craft-progress-bar');
+    this.progressBar.label = t('Upload progress');
+    this.progressBar.hidden = true;
+    shade.append(this.progressBar);
+    this.$container[0].append(shade);
+
+    // The bar has no live region of its own, so progress is read out
+    // periodically while an upload runs.
+    this.#progressAnnouncer = new IntervalManager({
+      onInterval: () => announce(this.#progressMessage()),
+    });
+
+    if (this.$addElementBtn) {
+      this.$uploadBtn = $('<button/>', {
+        type: 'button',
+        class: 'btn dashed',
+        'aria-label':
+          this.settings.limit == 1 ? t('Upload a file') : t('Upload files'),
+        'aria-describedby': this.settings.describedBy,
+        text: this.settings.limit == 1 ? t('Upload a file') : t('Upload files'),
+      })
+        .prepend('<craft-icon name="upload"></craft-icon>')
+        .insertAfter(this.$addElementBtn);
+
+      this.$fileInput = $('<input/>', {
+        type: 'file',
+        class: 'hidden',
+        multiple: this.settings.limit != 1,
+      }).insertAfter(this.$uploadBtn);
+
+      // Trigger resize in case the field is inside an element editor HUD
+      $(window).trigger('resize');
+    }
+
+    const options: any = {
+      dropZone: this.$container.toArray(),
+      fileInput: this.$fileInput?.toArray(),
+    };
+
+    if (this.settings.criteria.kind !== undefined) {
+      options.allowedKinds = [this.settings.criteria.kind].flat();
+    }
+
+    options.canAddMoreFiles = this.canAddMoreFiles.bind(this);
+
+    options.on = {
+      start: this._onUploadStart.bind(this),
+      progress: this._onUploadProgress.bind(this),
+      done: this._onUploadComplete.bind(this),
+      fail: this._onUploadFailure.bind(this),
+    } satisfies UploaderCallbacks;
+
+    this.uploader = new Uploader(this.$container[0], options);
+
+    const params: any = {fieldId: this.settings.fieldId};
+    if (this.settings.sourceElementId) {
+      params.elementId = this.settings.sourceElementId;
+    }
+    if (this.settings.criteria.siteId) {
+      params.siteId = this.settings.criteria.siteId;
+    }
+    this.uploader.setParams(params);
+
+    if (this.$uploadBtn) {
+      this.$uploadBtn.on('click', () => {
+        this.$uploadBtn.next('input[type=file]').trigger('click');
+      });
+    }
+  }
+
+  override enableAddElementsBtn(): void {
+    if (this.$uploadBtn) {
+      this.$uploadBtn.removeClass('hidden');
+    }
+    super.enableAddElementsBtn();
+  }
+
+  override disableAddElementsBtn(): void {
+    if (this.$uploadBtn) {
+      this.$uploadBtn.addClass('hidden');
+    }
+    super.disableAddElementsBtn();
+  }
+
+  selectUploadedFile(element: any): void {
+    if (!this.canAddMoreElements()) return;
+
+    const $newElement = element.$element;
+    $newElement.appendTo(this.$elementsContainer);
+
+    const margin = -($newElement.outerWidth() + 10);
+    this.$addElementBtn.css('margin-' + startSide(), margin + 'px');
+
+    const animateCss: any = {};
+    animateCss['margin-' + startSide()] = 0;
+    this.$addElementBtn.velocity(animateCss, 'fast');
+
+    this.addElements($newElement);
+
+    // SAFETY: The legacy base declares modal dynamically and deletion restores lazy creation.
+    delete (this as any).modal;
+  }
+
+  _onUploadStart(): void {
+    this.$container.addClass('uploading');
+    this.progressBar?.reset();
+    this.progressBar?.show();
+    this.#progressAnnouncer?.start();
+  }
+
+  #hideProgress(): void {
+    this.progressBar?.hide();
+    this.#progressAnnouncer?.stop();
+    this.$container.removeClass('uploading');
+  }
+
+  #progressMessage(): string {
+    const bar = this.progressBar;
+    if (!bar || bar.pending || bar.progress === 100) {
+      return t('Processing');
+    }
+
+    return t('{num} percent complete', {num: bar.progress});
+  }
+
+  _onUploadProgress(
+    data: Parameters<NonNullable<UploaderCallbacks['progress']>>[0]
+  ): void {
+    const progress = Math.round(Math.min(data.loaded / data.total, 1) * 100);
+    if (this.progressBar) {
+      this.progressBar.progress = progress;
+    }
+  }
+
+  _onUploadComplete({
+    result,
+  }: Parameters<NonNullable<UploaderCallbacks['done']>>[0]): void {
+    actionClient
+      .post('app/render-elements', {
+        elements: [
+          {
+            type: 'CraftCms\\Cms\\Asset\\Elements\\Asset',
+            id: result.assetId,
+            siteId: this.settings.criteria.siteId,
+            instances: [
+              {
+                context: 'field',
+                ui: ['list', 'list-inline', 'large', 'thumbs'].includes(
+                  this.settings.viewMode
+                )
+                  ? 'chip'
+                  : 'card',
+                size: ['large', 'thumbs'].includes(this.settings.viewMode)
+                  ? 'large'
+                  : 'small',
+                showActionMenu: this.settings.showActionMenu,
+              },
+            ],
+          },
+        ],
+      })
+      .then(async ({data}: any) => {
+        const elementInfo = getElementInfo(data.elements[result.assetId][0]);
+        this.selectElements([elementInfo]);
+
+        await appendHeadHtml(data.headHtml);
+        await appendBodyHtml(data.bodyHtml);
+
+        if (this.uploader.isLastUpload()) {
+          this.#hideProgress();
+          this.$container.trigger('change');
+        }
+      })
+      .catch((error: any) => {
+        if (error?.response) {
+          showError(error.response.data.message);
+        } else {
+          showError();
+          throw error;
+        }
+      });
+
+    void QueueService.getInstance().runQueue();
+  }
+
+  _onUploadFailure({
+    error,
+    canceled,
+    file,
+  }: Parameters<NonNullable<UploaderCallbacks['fail']>>[0]): void {
+    if (canceled) {
+      this.#hideProgress();
+      return;
+    }
+
+    const response = error instanceof UploadError ? error.data : {};
+
+    let message = error instanceof Error ? error.message : undefined;
+    const filename = response.filename || file?.name;
+    const {errors} = response || {};
+
+    // SAFETY: The upload endpoint returns arrays of validation message strings.
+    const errorMessages: string[] = errors
+      ? (Object.values(errors).flat() as string[])
+      : [];
+
+    if (!message) {
+      if (errorMessages.length) {
+        message = errorMessages.join('\n');
+      } else if (filename) {
+        message = t('Upload failed for “{filename}”.', {filename});
+      } else {
+        message = t('Upload failed.');
+      }
+    }
+
+    showError(message);
+    this.#hideProgress();
+  }
+
+  canAddMoreFiles(slotsTaken: number): boolean {
+    return (
+      !this.settings.limit ||
+      this.$elements.length + slotsTaken < this.settings.limit
+    );
+  }
+}
diff --git a/yii2-adapter/resources/js/element-select-input/base-element-select-input.test.ts b/yii2-adapter/resources/js/element-select-input/base-element-select-input.test.ts
new file mode 100644
index 00000000000..0ce9bd75e8e
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/base-element-select-input.test.ts
@@ -0,0 +1,269 @@
+import jquery from 'jquery';
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {
+  BaseElementSelectInput,
+  type BaseElementSelectInputSettings,
+} from './base-element-select-input';
+import {EntrySelectInput} from './entry-select-input';
+import {TagSelectInput} from './tag-select-input';
+
+it('preserves legacy element select input extension points', () => {
+  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+
+  const input = new UninitializedElementSelectInput();
+
+  expect('_ignoreSearchBlur' in input).toBe(true);
+  expect('_initialized' in input).toBe(true);
+  expect('_$replaceElement' in input).toBe(true);
+  expect(
+    Object.getOwnPropertyDescriptor(
+      BaseElementSelectInput.prototype,
+      'thumbLoader'
+    )
+  ).toMatchObject({get: expect.any(Function)});
+  expect(
+    Object.getOwnPropertyDescriptor(
+      BaseElementSelectInput.prototype,
+      '_animateStructureElementAway'
+    )?.value
+  ).toBeInstanceOf(Function);
+
+  expect(
+    Object.getOwnPropertyDescriptor(EntrySelectInput.prototype, 'section')
+  ).toMatchObject({get: expect.any(Function)});
+  expect(
+    Object.getOwnPropertyDescriptor(
+      EntrySelectInput.prototype,
+      'showElementEditor'
+    )?.value
+  ).toBeInstanceOf(Function);
+
+  for (const method of [
+    'focusOption',
+    'searchForTags',
+    'focusSelectedOption',
+    'focusFirstOption',
+    'killSearchMenu',
+  ]) {
+    expect(Object.hasOwn(TagSelectInput.prototype, method)).toBe(true);
+  }
+  expect(
+    Object.getOwnPropertyDescriptor(TagSelectInput.prototype, 'fieldName')
+  ).toMatchObject({get: expect.any(Function)});
+
+  expect(BaseElementSelectInput.defaults).toMatchObject({
+    allowAdd: true,
+    allowRemove: true,
+    modalSettings: {},
+  });
+  expect(TagSelectInput.defaults).toMatchObject({tagGroupId: null});
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+/**
+ * An instance with just enough state stubbed to exercise the chip actions —
+ * `init()` needs the DOM, jQuery and garnish, none of which these behaviors
+ * touch.
+ */
+function chipActionInput(elementSelect: any = null) {
+  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+
+  const showModal = vi.fn();
+  const removeElement = vi.fn();
+  const input = new UninitializedElementSelectInput();
+  input.settings = {
+    allowRemove: true,
+    elementType: 'entry',
+    sortable: false,
+  } as BaseElementSelectInputSettings;
+  input.elementSelect = elementSelect;
+  input.showModal = showModal;
+  input.removeElement = removeElement;
+
+  return {input, showModal, removeElement};
+}
+
+it('stages the element the modal should replace', () => {
+  const {input, showModal} = chipActionInput();
+  const $chip = {chip: true};
+
+  input.showReplaceModal($chip);
+
+  expect(input._$replaceElement).toBe($chip);
+  expect(showModal).toHaveBeenCalledOnce();
+});
+
+it('removes the whole selection when the chip is part of it', () => {
+  const $chip = {chip: true};
+  const $selection = {selection: true};
+  const {input, removeElement} = chipActionInput({
+    isSelected: (candidate: any) => candidate === $chip,
+    getSelectedItems: () => $selection,
+  });
+
+  input.removeElementOrSelection($chip);
+  expect(removeElement).toHaveBeenCalledWith($selection);
+
+  const $other = {chip: true};
+  input.removeElementOrSelection($other);
+  expect(removeElement).toHaveBeenLastCalledWith($other);
+});
+
+it('routes its injected chip actions through those methods', () => {
+  vi.stubGlobal('Craft', {t: (_category: string, message: string) => message});
+
+  const {input, showModal, removeElement} = chipActionInput();
+  const $chip = {chip: true};
+  const actions = input.defineElementActions($chip);
+
+  expect(actions.map((action) => action.label)).toEqual(['Replace', 'Remove']);
+
+  actions[0].callback();
+  expect(input._$replaceElement).toBe($chip);
+  expect(showModal).toHaveBeenCalledOnce();
+
+  actions[1].callback();
+  expect(removeElement).toHaveBeenCalledWith($chip);
+});
+
+it("moves elements from their reorder buttons' menus", () => {
+  vi.stubGlobal('$', jquery);
+
+  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+
+  const input = new UninitializedElementSelectInput();
+  const list = document.createElement('ul');
+  list.innerHTML =
+    '<li><div class="element"><craft-reorder-button></craft-reorder-button></div></li>';
+  input.$elementsContainer = jquery(list);
+  input.moveElementForward = vi.fn();
+  input.moveElementBackward = vi.fn();
+  input.initReorderButtons();
+
+  const button = list.querySelector('craft-reorder-button')!;
+  const reorder = (direction: 'up' | 'down') =>
+    button.dispatchEvent(
+      new CustomEvent('craft-reorder', {
+        bubbles: true,
+        composed: true,
+        detail: {direction},
+      })
+    );
+
+  reorder('up');
+  expect(input.moveElementForward).toHaveBeenCalledOnce();
+  expect(vi.mocked(input.moveElementForward).mock.calls[0]![0][0]).toBe(button);
+
+  reorder('down');
+  expect(input.moveElementBackward).toHaveBeenCalledOnce();
+  expect(vi.mocked(input.moveElementBackward).mock.calls[0]![0][0]).toBe(
+    button
+  );
+});
+
+/**
+ * An instance with just enough stubbed to observe the order of
+ * `onModalSelect()`'s side effects — the real method wants jQuery, garnish and
+ * a live modal, none of which bear on when the replaced chip is dropped.
+ */
+function replaceFlowInput() {
+  class UninitializedElementSelectInput extends BaseElementSelectInput {}
+
+  const log: string[] = [];
+  const input = new UninitializedElementSelectInput();
+
+  input.settings = {
+    viewMode: 'list',
+    elementType: 'entry',
+    limit: null,
+    maintainHierarchy: false,
+    showActionMenu: false,
+    criteria: {},
+  } as BaseElementSelectInputSettings;
+  input.$elements = {length: 1};
+
+  const removeElement = vi.fn(() => {
+    log.push('removeElement');
+    input.$elements = {length: 0};
+    // Stands in for the host reacting to the value change. Vue schedules its
+    // re-render as a microtask, so anything that lands after this marker is
+    // too late to be part of the same combined update.
+    void Promise.resolve().then(() => log.push('host re-render'));
+  });
+  const selectElements = vi.fn(() => {
+    log.push('selectElements');
+  });
+
+  input.removeElement = removeElement;
+  input.selectElements = selectElements as never;
+  input.updateDisabledElementsInModal = vi.fn();
+
+  vi.stubGlobal('$', (value: unknown) => ({rendered: value}));
+  vi.spyOn(actionClient, 'post').mockImplementation(async () => {
+    log.push('render-elements');
+    return {data: {elements: {7: ['<div/>']}, headHtml: '', bodyHtml: ''}};
+  });
+  vi.stubGlobal('Craft', {
+    appendHeadHtml: vi.fn(),
+    appendBodyHtml: vi.fn(),
+    setElementSize: vi.fn(),
+  });
+
+  return {input, log, removeElement, selectElements};
+}
+
+it('drops the replaced chip only once the replacement has rendered', async () => {
+  const {input, log, removeElement} = replaceFlowInput();
+  const $chip = {chip: true};
+  input._$replaceElement = $chip;
+
+  await input.onModalSelect([{id: 7, siteId: 1}]);
+
+  expect(removeElement).toHaveBeenCalledWith($chip);
+  expect(input._$replaceElement).toBeNull();
+
+  // Removing before the request tore down hosts that key on this input's
+  // value, leaving the resumed flow writing into a detached DOM — Replace
+  // opened its modal but never completed. The removal and the insertion also
+  // have to share one synchronous stretch, so those hosts see a single
+  // combined change rather than an empty intermediate one.
+  expect(log).toEqual([
+    'render-elements',
+    'removeElement',
+    'selectElements',
+    'host re-render',
+  ]);
+});
+
+it('frees the replaced chip’s slot before applying the limit', async () => {
+  const {input, selectElements} = replaceFlowInput();
+  input.settings.limit = 1;
+  input._$replaceElement = {chip: true};
+
+  await input.onModalSelect([{id: 7, siteId: 1}]);
+
+  // The outgoing chip still occupied the field's only slot when the limit was
+  // applied, the replacement would be sliced away and nothing would be added.
+  expect(selectElements).toHaveBeenCalledWith([
+    expect.objectContaining({id: 7}),
+  ]);
+});
+
+it.each([
+  '<button class="btn add">Choose</button>',
+  '<button command="--add-element">Choose</button>',
+])('finds the add button in supported element picker markup', (html) => {
+  const {input} = chipActionInput();
+  const container = document.createElement('div');
+  container.innerHTML = html;
+  input.$container = {
+    find: (selector: string) => container.querySelectorAll(selector),
+  };
+
+  expect([...input.getAddElementsBtn()]).toEqual([container.firstElementChild]);
+});
diff --git a/yii2-adapter/resources/js/element-select-input/base-element-select-input.ts b/yii2-adapter/resources/js/element-select-input/base-element-select-input.ts
new file mode 100644
index 00000000000..aa4f8f92d34
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/base-element-select-input.ts
@@ -0,0 +1,1774 @@
+import {
+  BACKSPACE_KEY,
+  Base,
+  bod,
+  CustomSelect,
+  DELETE_KEY,
+  DOWN_KEY,
+  DragSort,
+  firstFocusableElement,
+  hasAttr,
+  isCtrlKeyPressed,
+  RETURN_KEY,
+  Select,
+  UP_KEY,
+  type GarnishBaseSettings,
+} from '@craftcms/garnish';
+import {
+  animate,
+  animateAll,
+  getElementInfo,
+  setElementSize,
+} from './element-markup';
+import {announce} from '@/common/announcer';
+import {loadElementThumbs} from '@/modules/element-thumb-loader/globals';
+import {iconSvg} from '@/common/craft/icon-svg';
+import {elementTypeName} from '@/common/craft/element-types';
+import {isRtl} from '@/common/craft/direction';
+import {getActionUrl} from '@/common/craft/url';
+import {t} from '@craftcms/ui/utilities/translate';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom';
+import {addActionsToChip} from '@/common/craft/chip-actions';
+import {hasMousePointerEvents} from '@/common/craft/pointer';
+import {showError} from '@/modules/messages/messages';
+
+declare const Craft: any;
+declare const $: any;
+
+const noop = () => {};
+
+type CriteriaValue =
+  | string
+  | number
+  | boolean
+  | null
+  | CriteriaValue[]
+  | ElementCriteria;
+
+interface ElementCriteria {
+  [key: string]: CriteriaValue;
+}
+
+interface ElementSelectModalSettings {
+  matchSiteBeforeDisablingElement?: boolean;
+  siteId?: number;
+}
+
+type ElementSelectViewMode =
+  | 'list'
+  | 'list-inline'
+  | 'thumbs'
+  | 'large'
+  | 'cards'
+  | 'cards-grid';
+
+export interface BaseElementSelectInputSettings extends GarnishBaseSettings {
+  id: string | null;
+  name: string | null;
+  fieldId: number | null;
+  elementType: string | null;
+  sources: string[] | null;
+  condition: ElementCriteria | null;
+  referenceElementId: number | null;
+  referenceElementOwnerId: number | null;
+  referenceElementSiteId: number | null;
+  criteria: ElementCriteria;
+  searchCriteria: ElementCriteria | null;
+  allowAdd: boolean;
+  allowRemove: boolean;
+  allowSelfRelations: boolean;
+  sourceElementId: number | null;
+  disabledElementIds: number[] | null;
+  viewMode: ElementSelectViewMode;
+  single: boolean;
+  maintainHierarchy: boolean;
+  branchLimit: number | null;
+  limit: number | null;
+  defaultPlacement: 'beginning' | 'end';
+  showSiteMenu: boolean;
+  siteIds: number[] | null;
+  modalStorageKey: string | null;
+  modalSettings: ElementSelectModalSettings;
+  onAddElements(): void;
+  onSelectElements(elements: Array<{id: number}>): void;
+  onRemoveElements(): void;
+  sortable: boolean;
+  selectable: boolean;
+  showActionMenu: boolean;
+  editable: boolean;
+  prevalidate: boolean;
+  editorSettings: Record<string, never>;
+  canUpload?: boolean;
+  describedBy?: string;
+  sectionId?: number;
+  tagGroupId?: number | null;
+  targetSiteId?: number;
+  selectionLabel?: string;
+}
+
+interface ActionMenuElement extends HTMLElement {
+  opened: boolean;
+}
+
+/**
+ * Settings defaults that don't rely on runtime globals.
+ * Craft.t() labels are resolved lazily in init() so Craft is available.
+ */
+const DEFAULTS: BaseElementSelectInputSettings = {
+  id: null,
+  name: null,
+  fieldId: null,
+  elementType: null,
+  sources: null,
+  condition: null,
+  referenceElementId: null,
+  referenceElementOwnerId: null,
+  referenceElementSiteId: null,
+  criteria: {},
+  searchCriteria: null,
+  allowAdd: true,
+  allowRemove: true,
+  allowSelfRelations: false,
+  sourceElementId: null,
+  disabledElementIds: null,
+  viewMode: 'list',
+  single: false,
+  maintainHierarchy: false,
+  branchLimit: null,
+  limit: null,
+  defaultPlacement: 'end',
+  showSiteMenu: false,
+  siteIds: null,
+  modalStorageKey: null,
+  modalSettings: {},
+  onAddElements: noop,
+  onSelectElements: noop,
+  onRemoveElements: noop,
+  sortable: true,
+  selectable: true,
+  // Whether chips get an action menu at all: it's forwarded to
+  // `app/render-elements` for the chips fetched after a selection, and gates
+  // the client-side `addActionsToChip()` injection in `addElements()`.
+  // Set it to `false` when the host renders the chips' menus itself (e.g.
+  // `ElementSelectControl.vue`).
+  showActionMenu: true,
+  editable: true,
+  prevalidate: false,
+  editorSettings: {},
+};
+
+/**
+ * BaseElementSelectInput — a port of `Craft.BaseElementSelectInput` onto the
+ * modern `@craftcms/garnish` `Base`. Manages a relational field's element list:
+ * drag-sort, element selection, search-as-you-type, and modal element picker.
+ *
+ * Seam notes:
+ * - The "Add" button uses `$(btn).on('activate', ...)` because `activate` is a
+ *   jQuery synthetic event; `addListener` (native addEventListener) would miss
+ *   jQuery-triggered activation.
+ * - `taphold` on element items likewise uses `$(el).on('taphold', ...)`.
+ * - `keydown` on element items uses `addListener` (native event).
+ * - `Garnish.Select` / `DragSort` / `CustomSelect` are imported from the
+ *   modern @craftcms/garnish package.
+ * - Booted via `new Craft.BaseElementSelectInput({id, …})` from PHP templates,
+ *   so there is no custom element — the class is registered on `window.Craft`
+ *   via `registerCraftGlobals`.
+ */
+export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings> {
+  declare settings: BaseElementSelectInputSettings;
+
+  static readonly ADD_FX_DURATION = 200;
+  static readonly REMOVE_FX_DURATION = 200;
+  static defaults = DEFAULTS;
+
+  elementSelect: any = null;
+  elementSort: any = null;
+  modal: any = null;
+  elementEditor: any = null;
+  modalFirstOpen = true;
+  openingModal = false;
+
+  $container: any = null;
+  $form: any = null;
+  $elementsContainer: any = null;
+  $elements: any = null;
+  $addElementBtn: any = null;
+  $spinner: any = null;
+
+  searchTimeout: ReturnType<typeof setTimeout> | null = null;
+  searchMenu: any = null;
+  $searchContainer: any = null;
+  $searchInput: any = null;
+  $searchSpinner: any = null;
+
+  modalStorageKey: string | null = null;
+
+  _$replaceElement: any = null;
+  _ignoreSearchBlur = false;
+  _initialized = false;
+
+  #handleShowElementEditor: ((ev: any) => void) | null = null;
+
+  constructor(settings?: any) {
+    super();
+    if (new.target === BaseElementSelectInput) {
+      this.init(settings);
+    }
+  }
+
+  get thumbLoader(): any {
+    console.warn(
+      'Craft.BaseElementSelectInput::thumbLoader is deprecated. Craft.cp.elementThumbLoader should be used instead.'
+    );
+    return Craft.cp.elementThumbLoader;
+  }
+
+  init(...initArgs: any[]): void {
+    // Legacy compat: positional arguments were once accepted.
+    let settings = initArgs[0];
+    if (!$.isPlainObject(settings)) {
+      const argNames = [
+        'id',
+        'name',
+        'elementType',
+        'sources',
+        'criteria',
+        'sourceElementId',
+        'limit',
+        'modalStorageKey',
+        'fieldId',
+      ];
+      const normalized: Partial<BaseElementSelectInputSettings> = {};
+      for (let i = 0; i < argNames.length; i++) {
+        if (initArgs[i] !== undefined) {
+          Object.assign(normalized, {[argNames[i]!]: initArgs[i]});
+        } else {
+          break;
+        }
+      }
+      settings = normalized;
+    }
+
+    this.settings = Object.assign(
+      {},
+      BaseElementSelectInput.defaults,
+      settings
+    );
+
+    if (this.settings.modalStorageKey) {
+      this.modalStorageKey =
+        'BaseElementSelectInput.' + this.settings.modalStorageKey;
+    }
+
+    if (this.settings.limit == 1 || this.settings.maintainHierarchy) {
+      this.settings.sortable = false;
+    }
+
+    this.$container = this.getContainer();
+    this.$form = this.$container.closest('form');
+    this.$container.data('elementSelect', this);
+
+    this.$elementsContainer = this.getElementsContainer();
+    this.$addElementBtn = this.getAddElementsBtn();
+    this.$spinner = this.getSpinner();
+    this.$searchContainer = this.getSearchContainer();
+    this.$searchInput = this.getSearchInput();
+    this.$searchSpinner = this.getSearchSpinner();
+
+    this.initElementSelect();
+    this.initElementSort();
+    this.initReorderButtons();
+    this.initSearch();
+    this.resetElements();
+
+    if (this.$addElementBtn.length) {
+      // activate is a jQuery synthetic event — must use jQuery .on(), not addListener.
+      $(this.$addElementBtn).on(
+        'activate.elementSelectInput',
+        () => void this.showModal()
+      );
+    }
+
+    requestAnimationFrame(() => {
+      this._initialized = true;
+    });
+
+    if (this.elementSelect) {
+      this.addListener(window, 'mousedown', (ev) => {
+        if (!(ev instanceof MouseEvent) || !(ev.target instanceof Element)) {
+          return;
+        }
+        const target = ev.target;
+        if (
+          !this.$container.is(target) &&
+          !this.$container.find(target).length &&
+          !$(target).closest('.menu').length
+        ) {
+          this.elementSelect.deselectAll();
+        }
+      });
+    }
+
+    setTimeout(() => {
+      this.elementEditor = this.$container
+        .closest('form')
+        .data('elementEditor');
+    }, 100);
+  }
+
+  override destroy(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+
+    if (this.searchMenu) {
+      this.killSearchMenu();
+    }
+
+    this.$addElementBtn?.off('.elementSelectInput');
+    this.$elementsContainer?.off('.elementSelectInput');
+    if (this.#handleShowElementEditor) {
+      this.$elements?.off('taphold', this.#handleShowElementEditor);
+      this.#handleShowElementEditor = null;
+    }
+
+    this.elementSort?.destroy?.();
+    this.elementSort = null;
+    this.elementSelect?.destroy?.();
+    this.elementSelect = null;
+    this.modal?.destroy?.();
+    this.modal = null;
+
+    super.destroy();
+  }
+
+  get totalSelected(): number {
+    return this.$elements.length;
+  }
+
+  getContainer(): any {
+    return $('#' + this.settings.id);
+  }
+
+  getElementsContainer(): any {
+    return this.$container.children('.elements');
+  }
+
+  getElements(): any {
+    if (this.$elementsContainer.hasClass('structure')) {
+      return this.$elementsContainer.find('> li .row .element');
+    } else {
+      return this.$elementsContainer.find('> li > .element');
+    }
+  }
+
+  getSearchContainer(): any {
+    return this.$container.find('.elementselect__search-input-wrapper');
+  }
+
+  getSearchInput(): any {
+    return this.$searchContainer.find('input');
+  }
+
+  getSearchSpinner(): any {
+    return this.$searchContainer.find('.spinner');
+  }
+
+  getAddElementsBtn(): any {
+    return this.$container.find('[command="--add-element"], .btn.add');
+  }
+
+  getSpinner(): any {
+    return this.$container.find('.spinner');
+  }
+
+  initElementSelect(): void {
+    if (this.settings.selectable) {
+      this.elementSelect = new Select(this.elementSelectSettings());
+    }
+  }
+
+  elementSelectSettings(): any {
+    return {
+      multi: this.settings.sortable,
+      filter: (target: Element) => {
+        return !$(target).closest('a[href],button,[role=button]').length;
+      },
+      makeFocusable: false,
+    };
+  }
+
+  /**
+   * Moves elements when their `<craft-reorder-button>`'s Move up/down menu
+   * items are chosen, whether the server or `createNewElement()` added it.
+   */
+  initReorderButtons(): void {
+    this.$elementsContainer.on(
+      'craft-reorder.elementSelectInput',
+      'craft-reorder-button',
+      (event: JQuery.TriggeredEvent) => {
+        const {direction} = (
+          event.originalEvent as CustomEvent<{direction: 'up' | 'down'}>
+        ).detail;
+        const $button = $(event.currentTarget);
+        if (direction === 'up') {
+          this.moveElementForward($button);
+        } else {
+          this.moveElementBackward($button);
+        }
+      }
+    );
+  }
+
+  initElementSort(): void {
+    if (this.settings.sortable && hasMousePointerEvents()) {
+      this.elementSort = new DragSort({
+        container: this.$elementsContainer,
+        filter: this.settings.selectable
+          ? () => {
+              if (
+                this.elementSort.$targetItem
+                  .children('.element')
+                  .hasClass('sel')
+              ) {
+                return this.elementSelect.getSelectedItems().parent('li');
+              } else {
+                return this.elementSort.$targetItem;
+              }
+            }
+          : null,
+        ignoreHandleSelector: '.delete',
+        handle: (() => {
+          switch (this.settings.viewMode) {
+            case 'list':
+            case 'list-inline':
+            case 'thumbs':
+            case 'large':
+              return '> .element > .chip-content > .chip-actions > .move-btn';
+            case 'cards':
+              return '> .element > .card-titlebar > .card-actions-container > .card-actions > .move-btn';
+            default:
+              return null;
+          }
+        })(),
+        axis: this.getElementSortAxis(),
+        collapseDraggees: true,
+        magnetStrength: 4,
+        helperLagBase: 1.5,
+        onBeforeDragStart: () => {
+          this.elementEditor?.pause();
+          // Disable the labels' overflow tooltips while dragging so they
+          // don't recompute/pop up during the drag.
+          this.$elementsContainer.find('craft-truncate').attr('disabled', true);
+        },
+        onDragStop: () => {
+          this.elementEditor?.resume();
+          this.$elementsContainer.find('craft-truncate').removeAttr('disabled');
+        },
+        onSortChange: () => {
+          this.onSortChange();
+        },
+      });
+    }
+  }
+
+  getElementSortAxis(): 'x' | 'y' | null {
+    if (
+      this.settings.viewMode === 'list' &&
+      !this.getElementsContainer().hasClass('inline-chips')
+    ) {
+      return 'y';
+    }
+    return null;
+  }
+
+  canAddMoreElements(): boolean {
+    return (
+      this.settings.allowAdd &&
+      (!this.settings.limit || this.$elements.length < this.settings.limit)
+    );
+  }
+
+  updateAddElementsBtn(): void {
+    if (this.canAddMoreElements()) {
+      this.enableAddElementsBtn();
+    } else {
+      this.disableAddElementsBtn();
+    }
+  }
+
+  enableAddElementsBtn(): void {
+    if (this.settings.allowAdd && this.$addElementBtn.length) {
+      this.$addElementBtn.removeClass('hidden');
+      this.$searchContainer.removeClass('hidden');
+    }
+    this.updateButtonContainer();
+  }
+
+  disableAddElementsBtn(): void {
+    if (this.$addElementBtn.length) {
+      this.$addElementBtn.addClass('hidden');
+      this.$searchContainer.addClass('hidden');
+    }
+    this.updateButtonContainer();
+  }
+
+  showSpinner(): void {
+    this.$spinner?.removeClass('hidden');
+    this.updateButtonContainer();
+  }
+
+  hideSpinner(): void {
+    this.$spinner?.addClass('hidden');
+    this.updateButtonContainer();
+  }
+
+  updateButtonContainer(): void {
+    const $container =
+      this.$addElementBtn.length && this.$addElementBtn.parent('.flex');
+    if ($container?.length) {
+      if ($container.children(':not(.hidden)').length) {
+        $container.removeClass('hidden');
+      } else {
+        $container.addClass('hidden');
+      }
+    }
+  }
+
+  getNextLogicalFocusElement(): any {
+    if (!this.canAddMoreElements()) {
+      return this.getLastActionBtn();
+    }
+
+    if (
+      this.$searchContainer.length &&
+      !this.$searchContainer.hasClass('hidden')
+    ) {
+      return this.$searchInput;
+    }
+
+    if (this.$addElementBtn.length && !this.$addElementBtn.hasClass('hidden')) {
+      return this.$addElementBtn;
+    }
+
+    return this.$container.attr('tabindex', '-1');
+  }
+
+  focusNextLogicalElement(): void {
+    const $focusTarget = this.getNextLogicalFocusElement();
+    if ($focusTarget?.length) {
+      $focusTarget.focus();
+    }
+  }
+
+  /** @deprecated */
+  focusLastRemoveBtn(): void {
+    this.focusLastActionBtn();
+  }
+
+  getLastActionBtn(): any {
+    return this.$container.find('.action-btn').last();
+  }
+
+  focusLastActionBtn(): void {
+    this.getLastActionBtn().focus();
+  }
+
+  resetElements(): void {
+    if (this.$elements !== null) {
+      this.removeElements(this.$elements);
+    } else {
+      this.$elements = $();
+    }
+    this.addElements(this.getElements());
+  }
+
+  addElements($elements: any): void {
+    for (let i = 0; i < $elements.length; i++) {
+      const $element = $elements.eq(i);
+      const actions = this.settings.showActionMenu
+        ? this.defineElementActions($element)
+        : [];
+
+      if (actions.length) {
+        addActionsToChip($element, actions);
+
+        const updateMoveButtons = () => {
+          const $li = $element.parent();
+          const $prev = $li.prev();
+          const $next = $li.next();
+
+          return {showForward: !!$prev.length, showBackward: !!$next.length};
+        };
+
+        // The common case (`ElementHtml::componentActionMenu()`): a modern
+        // `<craft-action-menu>`, whose `craft-action-item`s aren't jQuery
+        // disclosure-menu items, so there's no `disclosureMenu` data to read.
+        const element = $element[0];
+        const actionMenu =
+          element instanceof Element
+            ? element.querySelector<ActionMenuElement>('craft-action-menu')
+            : null;
+
+        if (actionMenu) {
+          const moveForwardItem = actionMenu.querySelector(
+            '[data-move-forward]'
+          );
+          const moveBackwardItem = actionMenu.querySelector(
+            '[data-move-backward]'
+          );
+
+          // No public "opening" event on `<craft-action-menu>` to defer to
+          // (mirroring the disclosure-menu `show` handler below), so watch
+          // its reflected `opened` attribute instead.
+          const observer = new MutationObserver(() => {
+            if (!actionMenu.opened) {
+              return;
+            }
+
+            const {showForward, showBackward} = updateMoveButtons();
+            moveForwardItem?.toggleAttribute('hidden', !showForward);
+            moveBackwardItem?.toggleAttribute('hidden', !showBackward);
+          });
+          observer.observe(actionMenu, {
+            attributes: true,
+            attributeFilter: ['opened'],
+          });
+        } else {
+          // An old-markup, or modern-chip-with-legacy-trigger, disclosure menu.
+          const disclosureMenu =
+            $element
+              .find(
+                '> .chip-content > .chip-actions .action-btn, > .card-titlebar > .card-actions-container > .card-actions .action-btn'
+              )
+              .data('disclosureMenu') ||
+            $element
+              .children('[slot="suffix"]')
+              .find('[data-disclosure-trigger]')
+              .first()
+              .data('disclosureMenu');
+
+          if (disclosureMenu) {
+            const moveForwardBtn = disclosureMenu.$container.find(
+              '[data-move-forward]'
+            )[0];
+            const moveBackwardBtn = disclosureMenu.$container.find(
+              '[data-move-backward]'
+            )[0];
+
+            disclosureMenu.on('show', () => {
+              const {showForward, showBackward} = updateMoveButtons();
+
+              if (moveForwardBtn) {
+                disclosureMenu.toggleItem(moveForwardBtn, showForward);
+              }
+              if (moveBackwardBtn) {
+                disclosureMenu.toggleItem(moveBackwardBtn, showBackward);
+              }
+            });
+          }
+        }
+      }
+
+      // Route the Edit actions through createElementEditor()
+      $element
+        .find('[id*="action-edit"]')
+        .each((_: number, btn: HTMLElement) => {
+          const $btn = $(btn);
+          // Remove the existing handler, and change the ID in case it hasn't been registered yet
+          $btn
+            .off('activate')
+            .attr('id', `${btn.id}-${Math.floor(Math.random() * 1000000)}`);
+          $btn.on('activate', (ev: any) => {
+            const cpEditUrl = $element.data('cp-url');
+            if (
+              cpEditUrl &&
+              ev.originalEvent &&
+              isCtrlKeyPressed(ev.originalEvent)
+            ) {
+              window.open(cpEditUrl);
+              return;
+            }
+            // focus on the button so that when the slideout is closed, it's returned to the button
+            $btn.focus();
+            this.createElementEditor($element);
+          });
+        });
+
+      if (this.settings.sortable) {
+        // Its menu reorders without a mouse, so it's shown on touch devices too.
+        const reorderButton = document.createElement('craft-reorder-button');
+        reorderButton.classList.add('move-btn');
+        if (this.getElementSortAxis() !== 'y') {
+          reorderButton.setAttribute('orientation', 'horizontal');
+        }
+        $(reorderButton).appendTo(
+          $element.find(
+            '> .chip-content > .chip-actions, > .card-titlebar > .card-actions-container > .card-actions'
+          )
+        );
+      }
+    }
+
+    loadElementThumbs($elements);
+
+    // `?.` rather than a bare call, matching `elementSort` below: `destroy()`
+    // nulls both, and a host that re-renders this input mid-selection can
+    // destroy the controller between the modal resolving and the chips landing.
+    // `onModalSelect()` keeps the non-structured path clear of that window, but
+    // `selectStructuredElements()` still awaits after the replaced chip is
+    // dropped, so the window survives there. Skipping is the right outcome
+    // anyway — the replacement element is on its way out.
+    if (this.settings.selectable) {
+      this.elementSelect?.addItems($elements);
+    }
+
+    if (this.settings.sortable) {
+      this.elementSort?.addItems($elements.parent('li'));
+    }
+
+    if (this.settings.editable) {
+      this.#handleShowElementEditor = (ev: any) => {
+        if (ev.type === 'taphold' && ev.target.nodeName === 'BUTTON') {
+          return;
+        }
+        const $element = $(ev.currentTarget);
+        if (
+          hasAttr($element[0], 'data-editable') &&
+          !$element.hasClass('disabled') &&
+          !$element.hasClass('loading')
+        ) {
+          this.createElementEditor($element);
+        }
+      };
+
+      // dblclick is a native event — addListener works.
+      this.addListener(
+        $elements.toArray(),
+        'dblclick',
+        this.#handleShowElementEditor
+      );
+
+      // taphold is a jQuery synthetic event — must use jQuery .on().
+      if ($.isTouchCapable()) {
+        $elements.on('taphold', this.#handleShowElementEditor);
+      }
+    }
+
+    // keydown is native — addListener works.
+    $elements.each((_: number, el: Element) => {
+      this.addListener(el, 'keydown', (ev) => {
+        if (!(ev instanceof KeyboardEvent)) {
+          return;
+        }
+        if ([BACKSPACE_KEY, DELETE_KEY].includes(ev.keyCode)) {
+          ev.stopPropagation();
+          ev.preventDefault();
+          const $selected = this.elementSelect?.getSelectedItems() ?? $();
+          for (let i = 0; i < $selected.length; i++) {
+            this.removeElement($selected.eq(i));
+          }
+        }
+      });
+    });
+
+    this.$elements = this.$elements.add($elements);
+    this.updateAddElementsBtn();
+    this.onAddElements();
+    this.onSortChange();
+  }
+
+  defineElementActions($element: any): any[] {
+    const actions: any[] = [];
+
+    if (this.settings.sortable) {
+      const axis = this.getElementSortAxis();
+      actions.push({
+        icon: async () =>
+          await iconSvg(
+            axis === 'y' ? 'arrow-up' : isRtl() ? 'arrow-right' : 'arrow-left'
+          ),
+        label: axis === 'y' ? t('Move up') : t('Move forward'),
+        callback: () => {
+          this.moveElementForward($element);
+        },
+        attributes: {'data-move-forward': true},
+      });
+      actions.push({
+        icon: async () =>
+          await iconSvg(
+            axis === 'y' ? 'arrow-down' : isRtl() ? 'arrow-left' : 'arrow-right'
+          ),
+        label: axis === 'y' ? t('Move down') : t('Move backward'),
+        callback: () => {
+          this.moveElementBackward($element);
+        },
+        attributes: {'data-move-backward': true},
+      });
+    }
+
+    if (this.settings.allowRemove) {
+      if (this.settings.elementType) {
+        actions.push({
+          icon: async () => await iconSvg('arrows-rotate'),
+          label: t('Replace'),
+          callback: () => {
+            this.showReplaceModal($element);
+          },
+        });
+      }
+
+      actions.push({
+        icon: async () => await iconSvg('remove'),
+        label: t('Remove'),
+        callback: () => {
+          this.removeElementOrSelection($element);
+        },
+      });
+    }
+
+    return actions;
+  }
+
+  /**
+   * Opens the element selector modal with `$element` staged as the chip the
+   * next selection should replace.
+   *
+   * The Replace behavior lives here rather than inline in
+   * {@link defineElementActions} so consumers that render the chip's action
+   * menu themselves — `ElementSelectControl.vue` via
+   * `<craft-element-select-input>.replaceElement()` — trigger the same flow as the
+   * client-injected menu the Twig stack still gets.
+   */
+  showReplaceModal($element: any): void {
+    this._$replaceElement = $element;
+    this.showModal();
+  }
+
+  /**
+   * Removes `$element`, or — when it's part of the current multi-selection —
+   * the whole selection, matching the Remove action's long-standing behavior.
+   * Shared with consumers that render the menu themselves; see
+   * {@link showReplaceModal}.
+   */
+  removeElementOrSelection($element: any): void {
+    if (this.elementSelect?.isSelected($element)) {
+      this.removeElement(this.elementSelect.getSelectedItems());
+    } else {
+      this.removeElement($element);
+    }
+  }
+
+  /** Opens an element's editor slideout. */
+  createElementEditor($element: any, settings?: Record<string, unknown>): void {
+    const params = Object.fromEntries(
+      Object.entries({
+        elementType: this.settings.elementType,
+        elementId: $element.data('id'),
+        draftId: $element.data('draft-id'),
+        siteId: $element.data('site-id'),
+        prevalidate: this.settings.prevalidate ? 1 : null,
+        ...settings,
+      }).filter(([, value]) => value !== null && value !== undefined)
+    );
+
+    void Craft.openSlideout(getActionUrl('elements/edit', params), {
+      opener: $element[0],
+      onSaved: ({data}: {data?: Record<string, any>}) => {
+        // An image saved as a new asset takes the edited asset's place.
+        if (data?.replacedAssetId && data.newAssetId) {
+          void this.replaceElement(data.replacedAssetId, data.newAssetId);
+        }
+      },
+    });
+  }
+
+  replaceElement(elementId: number, replacementId: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (!this.settings.allowRemove) {
+        reject('Elements cannot be removed from this input.');
+        return;
+      }
+
+      const $existing = this.$elements.filter(`[data-id="${elementId}"]`);
+
+      if (!$existing.length) {
+        reject(`No element selected with an ID of ${elementId}.`);
+        return;
+      }
+
+      this.showSpinner();
+
+      actionClient
+        .post('app/render-elements', {
+          elements: [
+            {
+              type: this.settings.elementType,
+              id: replacementId,
+              siteId: this.settings.criteria.siteId,
+              instances: [
+                {
+                  context: 'field',
+                  ui: ['list', 'list-inline', 'thumbs', 'large'].includes(
+                    this.settings.viewMode
+                  )
+                    ? 'chip'
+                    : 'card',
+                  size: ['thumbs', 'large'].includes(this.settings.viewMode)
+                    ? 'large'
+                    : 'small',
+                  showActionMenu: this.settings.showActionMenu,
+                },
+              ],
+            },
+          ],
+        })
+        .then(async ({data}: any) => {
+          this.removeElement($existing);
+          const elementInfo = getElementInfo(data.elements[replacementId][0]);
+          this.selectElements([elementInfo]).then(resolve);
+          await appendHeadHtml(data.headHtml);
+          await appendBodyHtml(data.bodyHtml);
+        })
+        .catch((e: any) => {
+          showError(e?.response?.data?.message);
+          reject(e?.response?.data?.message);
+        })
+        .finally(() => {
+          this.hideSpinner();
+        });
+    });
+  }
+
+  onSortChange(): void {
+    this.elementSelect?.resetItemOrder();
+    this.$elements = $().add(this.$elements);
+  }
+
+  moveElementForward($element: any): void {
+    const $li = $element.closest('li');
+    const $prev = $li.prev();
+    if ($prev.length) {
+      $li.insertBefore($prev);
+      this.onSortChange();
+    }
+  }
+
+  moveElementBackward($element: any): void {
+    const $li = $element.closest('li');
+    const $next = $li.next();
+    if ($next.length) {
+      $li.insertAfter($next);
+      this.onSortChange();
+    }
+  }
+
+  /**
+   * Removes elements from the field value without removing their DOM nodes.
+   */
+  removeElements($elements: any): void {
+    if (this.settings.selectable) {
+      this.elementSelect.removeItems($elements);
+    }
+
+    // Removing a relation makes it selectable again, so the modal's disabled
+    // set has to shrink to match.
+    this.updateDisabledElementsInModal();
+
+    $elements.children('input').prop('disabled', true);
+
+    let $nextElement: any, $prevElement: any;
+    if (this.settings.selectable) {
+      const lastIdx = this.$elements.index($elements.last());
+      $nextElement = this.$elements.eq(lastIdx + 1);
+      $prevElement = lastIdx - 1 >= 0 ? this.$elements.eq(lastIdx - 1) : null;
+    }
+
+    if ($nextElement?.length || $prevElement?.length) {
+      const $target = $nextElement?.length
+        ? this.getElementFocusTarget($nextElement)
+        : this.getElementFocusTarget($prevElement);
+      $target?.focus();
+    } else {
+      setTimeout(() => {
+        this.focusNextLogicalElement();
+      }, 200);
+    }
+
+    this.$elements = this.$elements.not($elements);
+    this.updateAddElementsBtn();
+    this.onSortChange();
+    this.onRemoveElements();
+  }
+
+  getElementFocusTarget($element: any): any {
+    if ($element.is(':focusable')) {
+      return $element;
+    }
+    const $first = firstFocusableElement($element[0]);
+    return $first ?? null;
+  }
+
+  /**
+   * Completely removes element(s) from the UI and field value.
+   */
+  removeElement($elements: any): void {
+    if (this.settings.maintainHierarchy) {
+      let $descendants = $();
+      for (let i = 0; i < $elements.length; i++) {
+        $descendants = $descendants.add(
+          $elements.eq(i).parent().siblings('ul').find('.element')
+        );
+      }
+      $elements = $elements.add($descendants);
+    }
+
+    $('[name]', $elements).removeAttr('name');
+    this.removeElements($elements);
+
+    if (this.settings.maintainHierarchy) {
+      for (let i = 0; i < $elements.length; i++) {
+        this._animateStructureElementAway($elements, i);
+      }
+    } else {
+      for (let i = 0; i < $elements.length; i++) {
+        const $element = $elements.eq(i);
+        const $li = $element.parent('li');
+        this.animateElementAway($element);
+        $li.remove();
+      }
+    }
+  }
+
+  async animateElementAway(
+    $element: any,
+    callback?: () => void
+  ): Promise<void> {
+    const offset = $element.offset();
+    const width = $element.width();
+
+    $element.appendTo($(bod)).css({
+      'z-index': 0,
+      position: 'absolute',
+      top: offset.top,
+      left: offset.left,
+      maxWidth: width + 'px',
+    });
+
+    await animate($element, {
+      opacity: -1,
+      left: offset.left + 100 * (isRtl() ? 1 : -1),
+    });
+
+    $element.remove();
+    callback?.();
+  }
+
+  async showModal(): Promise<void> {
+    if (!this._$replaceElement && !this.canAddMoreElements()) {
+      return;
+    }
+
+    if (this.modal) {
+      void this.modal.show();
+
+      return;
+    }
+
+    // Guards the await below: without it a double click opens two modals.
+    if (this.openingModal) {
+      return;
+    }
+
+    this.openingModal = true;
+
+    try {
+      this.modal = await this.createModal();
+      this.modalFirstOpen = false;
+    } finally {
+      this.openingModal = false;
+    }
+  }
+
+  /**
+   * The modal stack — Lit, Vue and the element index — is imported here rather
+   * than at module scope, so a page carrying a relation field doesn't load it
+   * unless a modal is actually opened.
+   */
+  async createModal(): Promise<any> {
+    const {elementType} = this.settings;
+
+    if (!elementType) {
+      throw new Error(
+        'An element select input needs an element type to open its selector.'
+      );
+    }
+
+    const {createElementSelectorModal} =
+      await import('@/modules/element-selector-modal/create-element-selector-modal');
+
+    return createElementSelectorModal(elementType, this.getModalSettings());
+  }
+
+  getModalSettings(): any {
+    const settings = Object.assign(
+      {
+        closeOtherModals: false,
+        storageKey: this.modalStorageKey,
+        sources: this.settings.sources,
+        condition: this.settings.condition,
+        referenceElementId: this.settings.referenceElementId
+          ? this.elementEditor?.getDraftElementId(
+              this.settings.referenceElementId
+            ) || this.settings.referenceElementId
+          : null,
+        referenceElementOwnerId: this.settings.referenceElementOwnerId
+          ? this.elementEditor?.getDraftElementId(
+              this.settings.referenceElementOwnerId
+            ) || this.settings.referenceElementOwnerId
+          : null,
+        referenceElementSiteId: this.settings.referenceElementSiteId,
+        criteria: Object.assign({}, this.settings.criteria),
+        multiSelect: this.settings.limit != 1,
+        hideOnSelect: false,
+        showSiteMenu: this.settings.showSiteMenu,
+        siteIds: this.settings.siteIds,
+        disabledElementIds: this.getDisabledElementIds(),
+        onSelect: this.onModalSelect.bind(this),
+        // Was `onHide`; the controller calls this one whenever it closes,
+        // whether that came from Cancel, Escape or a completed selection.
+        onClose: this.onModalHide.bind(this),
+        triggerElement: () => this.getNextLogicalFocusElement(),
+        modalTitle: t('Choose'),
+      },
+      this.settings.modalSettings
+    );
+
+    if (!this.modalFirstOpen) {
+      settings.preferStoredSource = true;
+    }
+
+    return settings;
+  }
+
+  getSelectedElementIds(): number[] {
+    const ids: number[] = [];
+    for (let i = 0; i < this.$elements.length; i++) {
+      if (
+        this.settings.modalSettings.matchSiteBeforeDisablingElement &&
+        this.settings.modalSettings.siteId
+      ) {
+        if (
+          this.$elements.eq(i).data('siteId') ==
+          this.settings.modalSettings.siteId
+        ) {
+          ids.push(this.$elements.eq(i).data('id'));
+        }
+      } else {
+        ids.push(this.$elements.eq(i).data('id'));
+      }
+    }
+    return ids;
+  }
+
+  getDisabledElementIds(): number[] {
+    const ids = this.getSelectedElementIds();
+
+    if (!this.settings.allowSelfRelations && this.settings.sourceElementId) {
+      ids.push(this.settings.sourceElementId);
+    }
+
+    if (this.settings.disabledElementIds) {
+      ids.push(...this.settings.disabledElementIds);
+    }
+
+    return ids;
+  }
+
+  async onModalSelect(elements: any[]): Promise<void> {
+    this.elementEditor?.pause();
+
+    const [inputUiType, inputUiSize] = (() => {
+      switch (this.settings.viewMode) {
+        case 'thumbs':
+        case 'large':
+          return ['chip', 'large'] as const;
+        case 'cards':
+        case 'cards-grid':
+          return ['card', null] as const;
+        default:
+          return ['chip', 'small'] as const;
+      }
+    })();
+
+    const {data} = await actionClient.post('app/render-elements', {
+      elements: [
+        {
+          type: this.settings.elementType,
+          id: elements.map((e) => e.id),
+          siteId: elements[0].siteId,
+          instances: [
+            {
+              context: 'field',
+              ui: inputUiType,
+              size: inputUiSize,
+              showActionMenu: this.settings.showActionMenu,
+            },
+          ],
+        },
+      ],
+    });
+
+    for (let i = 0; i < elements.length; i++) {
+      if (data.elements[elements[i].id] !== undefined) {
+        elements[i].$modalElement = elements[i].$element;
+        elements[i].$element = $(data.elements[elements[i].id][0]);
+      }
+    }
+
+    // Drop the chip being replaced only now that the replacement markup is in
+    // hand, and never before an await.
+    //
+    // Removing it earlier publishes an intermediate value — one element short
+    // and with no replacement yet — to hosts that re-render this input from
+    // it. `ElementSelectControl.vue` keys `<craft-element-select-input>` on its
+    // value, so that intermediate state tore the custom element down mid-flight
+    // and left the rest of this method, including the `selectElements()` that
+    // actually inserts the replacement, writing into a detached DOM. Replace
+    // could open its modal but never complete.
+    //
+    // Removing here keeps the removal and the insertion in the same
+    // synchronous stretch, so such hosts observe a single combined change and
+    // re-render once, with the replacement already in place. It still lands
+    // ahead of the limit math below, which needs the outgoing chip gone to
+    // free up its slot.
+    if (this._$replaceElement) {
+      this.removeElement(this._$replaceElement);
+      this._$replaceElement = null;
+    }
+
+    if (this.settings.maintainHierarchy) {
+      await this.selectStructuredElements(elements);
+    } else {
+      if (this.settings.limit) {
+        const slotsLeft = this.settings.limit - this.$elements.length;
+        if (elements.length > slotsLeft) {
+          elements = elements.slice(0, slotsLeft);
+        }
+      }
+
+      await this.selectElements(elements);
+      this.updateDisabledElementsInModal();
+    }
+
+    // `busy` is the controller's, held across this method because it is the
+    // awaited `onSelect`. Only the close is ours to ask for.
+    this.modal?.hide();
+
+    await appendHeadHtml(data.headHtml);
+    await appendBodyHtml(data.bodyHtml);
+
+    this.elementEditor?.resume();
+  }
+
+  onModalHide(): void {
+    if (
+      this.modal &&
+      this.settings.condition &&
+      this.settings.referenceElementId
+    ) {
+      this.modal.destroy();
+      this.modal = null;
+    }
+    this._$replaceElement = null;
+  }
+
+  async selectElements(elements: any[]): Promise<void> {
+    const animateElements: any[] = [];
+
+    for (const elementInfo of elements) {
+      const $inputElement = this.createNewElement(elementInfo);
+      this.appendElement($inputElement);
+      this.addElements($inputElement);
+      elementInfo.$element = $inputElement;
+
+      const $modalElement = elementInfo.$modalElement || elementInfo.$element;
+      if ($modalElement?.parent().length) {
+        animateElements.push({$modalElement, $inputElement});
+      }
+    }
+
+    this.animateElementsIntoPlace(animateElements);
+    this.onSelectElements(elements);
+  }
+
+  async selectStructuredElements(elements: any[]): Promise<void> {
+    const selectedElementIds =
+      this.settings.branchLimit == 1 ? [] : this.getSelectedElementIds();
+
+    for (const el of elements) {
+      selectedElementIds.push(el.id);
+    }
+
+    const data = {
+      elementIds: selectedElementIds,
+      siteId: elements[0].siteId,
+      containerId: this.settings.id,
+      name: this.settings.name,
+      branchLimit: this.settings.branchLimit,
+      selectionLabel: this.settings.selectionLabel,
+      elementType: this.settings.elementType,
+    };
+
+    const response = await actionClient.post(
+      'relational-fields/structured-input-html',
+      data
+    );
+
+    const $newInput = $(response.data.html);
+    const $newElementsContainer = $newInput.children('.elements');
+
+    this.$elementsContainer.replaceWith($newElementsContainer);
+    this.$elementsContainer = $newElementsContainer;
+
+    await appendHeadHtml(response.data.headHtml);
+    await appendBodyHtml(response.data.bodyHtml);
+
+    this.resetElements();
+
+    const filteredElements: any[] = [];
+    const animateElements: any[] = [];
+
+    for (const element of elements) {
+      const $inputElement = this.getElementById(element.id);
+      if ($inputElement) {
+        filteredElements.push(element);
+        animateElements.push({
+          $modalElement: element.$element,
+          $inputElement,
+        });
+      }
+    }
+
+    this.animateElementsIntoPlace(animateElements);
+    this.updateDisabledElementsInModal();
+    this.onSelectElements(filteredElements);
+  }
+
+  createNewElement(elementInfo: any): any {
+    const $element = elementInfo.$element.clone();
+    setElementSize(
+      $element,
+      ['thumbs', 'large'].includes(this.settings.viewMode) ? 'large' : 'small'
+    );
+    $element.addClass('removable').append(
+      $('<input/>', {
+        type: 'hidden',
+        name: this.settings.name + (this.settings.single ? '' : '[]'),
+        value: elementInfo.id,
+      })
+    );
+    return $element;
+  }
+
+  appendElement($element: any): void {
+    const $li = $('<li/>').append($element);
+    if (this.settings.defaultPlacement === 'beginning') {
+      $li.prependTo(this.$elementsContainer);
+    } else {
+      $li.appendTo(this.$elementsContainer);
+    }
+  }
+
+  async animateElementIntoPlace(
+    $modalElement: any,
+    $inputElement: any
+  ): Promise<void> {
+    await this.animateElementsIntoPlace([{$modalElement, $inputElement}]);
+  }
+
+  async animateElementsIntoPlace(
+    elements: Array<{$modalElement: any; $inputElement: any}>
+  ): Promise<void> {
+    const animations: any[] = [];
+
+    for (const {$modalElement, $inputElement} of elements) {
+      const oldOffset = $modalElement.offset();
+      const newOffset = $inputElement.offset();
+
+      const $helper = $inputElement
+        .clone()
+        .appendTo($(bod))
+        .width($inputElement.width());
+
+      $inputElement.css('visibility', 'hidden');
+
+      $helper.css({
+        position: 'absolute',
+        zIndex: 'var(--c-layer-drag)',
+        top: oldOffset.top,
+        left: oldOffset.left,
+      });
+
+      animations.push([$helper, {top: newOffset.top, left: newOffset.left}]);
+    }
+
+    await animateAll(animations);
+
+    for (const [$helper] of animations) {
+      $helper.remove();
+    }
+
+    for (const {$inputElement} of elements) {
+      $inputElement.css('visibility', '');
+    }
+  }
+
+  /**
+   * Republishes which elements the modal may not select.
+   *
+   * The modal's index reads this as a whole set rather than being told to
+   * enable or disable individual ids, so both directions are one assignment.
+   */
+  updateDisabledElementsInModal(): void {
+    this.modal?.setDisabledElementIds(this.getDisabledElementIds());
+  }
+
+  getElementById(id: number): any {
+    for (let i = 0; i < this.$elements.length; i++) {
+      const $element = this.$elements.eq(i);
+      if ($element.data('id') == id) {
+        return $element;
+      }
+    }
+  }
+
+  onSelectElements(elements: any[]): void {
+    this.trigger('selectElements', {elements});
+    this.settings.onSelectElements(elements);
+    this.$container.trigger('change');
+  }
+
+  onAddElements(): void {
+    this.trigger('addElements');
+    this.settings.onAddElements();
+    this.$container.trigger('change');
+  }
+
+  onRemoveElements(): void {
+    this.trigger('removeElements');
+    this.settings.onRemoveElements();
+    this.$container.trigger('change');
+  }
+
+  _animateStructureElementAway($allElements: any, i: number): void {
+    let callback: (() => void) | undefined;
+
+    if (i === $allElements.length - 1) {
+      const $li = $allElements.first().parent().parent();
+      const $ul = $li.parent();
+      callback = () => {
+        if ($ul[0] === this.$elementsContainer[0] || $li.siblings().length) {
+          $li.remove();
+        } else {
+          $ul.remove();
+        }
+      };
+    }
+
+    const func = () => {
+      this.animateElementAway($allElements.eq(i), callback);
+    };
+
+    if (i === 0) {
+      func();
+    } else {
+      setTimeout(func, 100 * i);
+    }
+  }
+
+  canCreateElements(): boolean {
+    return false;
+  }
+
+  async createElement(title: string): Promise<number | null> {
+    void title;
+    return null;
+  }
+
+  initSearch(): void {
+    if (!this.$searchInput.length) {
+      return;
+    }
+
+    this.addListener(this.$searchInput[0], 'input', () => {
+      if (this.searchTimeout) {
+        clearTimeout(this.searchTimeout);
+      }
+      this.searchTimeout = setTimeout(() => {
+        this.searchForTags();
+      }, 500);
+    });
+
+    this.addListener(this.$searchInput[0], 'keydown', (ev) => {
+      if (!(ev instanceof KeyboardEvent)) {
+        return;
+      }
+      if (ev.keyCode === RETURN_KEY) {
+        ev.preventDefault();
+      }
+
+      switch (ev.keyCode) {
+        case RETURN_KEY: {
+          ev.preventDefault();
+          if (this.searchMenu) {
+            this.selectSearchResult(this.searchMenu.$options.filter('.hover'));
+          }
+          return;
+        }
+        case DOWN_KEY: {
+          ev.preventDefault();
+          if (this.searchMenu) {
+            const $hoverOption = this.searchMenu.$options.filter('.hover');
+            if ($hoverOption.length) {
+              const $nextOption = $hoverOption
+                .parent()
+                .nextAll()
+                .find('.menu-item:not(.disabled)')
+                .first();
+              if ($nextOption.length) {
+                this.focusOption($nextOption);
+              }
+            } else {
+              this.focusOption(this.searchMenu.$options.eq(0));
+            }
+          }
+          return;
+        }
+        case UP_KEY: {
+          ev.preventDefault();
+          if (this.searchMenu) {
+            const $hoverOption = this.searchMenu.$options.filter('.hover');
+            if ($hoverOption.length) {
+              const $prevOption = $hoverOption
+                .parent()
+                .prevAll()
+                .find('.menu-item:not(.disabled)')
+                .last();
+              if ($prevOption.length) {
+                this.focusOption($prevOption);
+              }
+            } else {
+              this.focusOption(
+                this.searchMenu.$options.eq(this.searchMenu.$options.length - 1)
+              );
+            }
+          }
+          return;
+        }
+      }
+    });
+
+    this.addListener(this.$searchInput[0], 'focus', () => {
+      if (this.searchMenu) {
+        this.searchMenu.show();
+      }
+    });
+
+    this.addListener(this.$searchInput[0], 'blur', () => {
+      if (this._ignoreSearchBlur) {
+        this._ignoreSearchBlur = false;
+        return;
+      }
+      setTimeout(() => {
+        if (this.searchMenu) {
+          this.searchMenu.hide();
+        }
+      }, 1);
+    });
+  }
+
+  async searchForTags(): Promise<void> {
+    if (this.searchMenu) {
+      this.killSearchMenu();
+    }
+
+    const val = this.$searchInput.val();
+
+    if (val) {
+      this.$searchSpinner.removeClass('hidden');
+      announce(t('Loading'));
+
+      const excludeIds: number[] = [];
+      for (let i = 0; i < this.$elements.length; i++) {
+        const id = $(this.$elements[i]).data('id');
+        if (id) excludeIds.push(id);
+      }
+
+      if (this.settings.sourceElementId && !this.settings.allowSelfRelations) {
+        excludeIds.push(this.settings.sourceElementId);
+      }
+
+      let response: any;
+
+      try {
+        response = await actionClient.post('element-search/search', {
+          elementType: this.settings.elementType,
+          siteId: this.settings.criteria.siteId,
+          search: val,
+          criteria: this.settings.searchCriteria,
+          condition: this.settings.condition,
+          referenceElementId: this.settings.referenceElementId
+            ? this.elementEditor?.getDraftElementId(
+                this.settings.referenceElementId
+              ) || this.settings.referenceElementId
+            : null,
+          referenceElementOwnerId: this.settings.referenceElementOwnerId
+            ? this.elementEditor?.getDraftElementId(
+                this.settings.referenceElementOwnerId
+              ) || this.settings.referenceElementOwnerId
+            : null,
+          referenceElementSiteId: this.settings.referenceElementSiteId,
+          excludeIds,
+        });
+      } finally {
+        if (this.searchMenu) {
+          this.killSearchMenu();
+        }
+        this.$searchSpinner.addClass('hidden');
+        announce(t('Loading complete'));
+      }
+
+      const $menu = $('<div class="menu tagmenu"/>').appendTo($(bod));
+      const $ul = $('<ul/>').appendTo($menu);
+
+      for (const element of response.data.elements) {
+        const $li = $('<li/>').appendTo($ul);
+        const optionLabel = `${t('Existing {type}', {
+          type:
+            (this.settings.elementType
+              ? elementTypeName(this.settings.elementType)
+              : null) ?? t('element'),
+        })}: ${element.title}`;
+        $li.attr('aria-label', optionLabel);
+
+        const $item = $('<div class="menu-item"/>')
+          .appendTo($li)
+          .html(element.html)
+          .data('id', element.id);
+
+        if (element.exclude) {
+          $item.addClass('disabled');
+        }
+      }
+
+      if (!response.data.exactMatch && this.canCreateElements()) {
+        const $li = $('<li/>').appendTo($ul);
+        const optionLabel = `${t('Create {type}', {
+          type:
+            (this.settings.elementType
+              ? elementTypeName(this.settings.elementType)
+              : null) ?? t('element'),
+        })}: ${val}`;
+        $li.attr('aria-label', optionLabel);
+
+        $('<div class="menu-item"/>')
+          .appendTo($li)
+          .text(val)
+          .prepend('<craft-icon name="plus"></craft-icon>');
+      }
+
+      $ul.find('.menu-item:not(.disabled):first').addClass('hover');
+
+      this.searchMenu = new CustomSelect($menu[0], {
+        anchor: this.$searchInput[0],
+        onOptionSelect: (option: Element) => {
+          this.selectSearchResult(option);
+        },
+      });
+
+      this.$searchInput.attr('aria-controls', this.searchMenu.menuId);
+
+      this.searchMenu.on('show', () => {
+        this.$searchInput.attr('aria-expanded', 'true');
+        this.focusSelectedOption();
+        loadElementThumbs($menu);
+      });
+
+      this.searchMenu.on('hide', () => {
+        this.$searchInput.attr('aria-expanded', 'false');
+        this.$searchInput.removeAttr('aria-activedescendant');
+      });
+
+      // mousedown on menu → keep focus on search input (ignore next blur).
+      this.addListener($menu[0], 'mousedown', () => {
+        this._ignoreSearchBlur = true;
+      });
+
+      this.searchMenu.show();
+    } else {
+      this.$searchSpinner.addClass('hidden');
+    }
+  }
+
+  focusOption($option: any): void {
+    this.searchMenu.$options.removeClass('hover');
+    this.searchMenu.$ariaOptions.attr('aria-selected', 'false');
+    $option.addClass('hover');
+    this.$searchInput.attr(
+      'aria-activedescendant',
+      $option.parent('li').attr('id')
+    );
+  }
+
+  focusSelectedOption(): void {
+    const $option = this.searchMenu.$options.filter('.hover:first');
+    if ($option.length) {
+      this.focusOption($option);
+    } else {
+      this.focusFirstOption();
+    }
+  }
+
+  focusFirstOption(): void {
+    const $option = this.searchMenu.$options.first();
+    this.focusOption($option);
+  }
+
+  async selectSearchResult(option: any): Promise<void> {
+    const $option = $(option);
+
+    if ($option.hasClass('disabled')) {
+      return;
+    }
+
+    let id = $option.data('id');
+
+    if (!id && this.canCreateElements()) {
+      id = await this.createElement($option.text());
+    }
+
+    if (id) {
+      await this.onModalSelect([
+        {
+          id,
+          siteId: this.settings.criteria.siteId,
+        },
+      ]);
+    }
+
+    this.killSearchMenu();
+    this.$searchInput.val('');
+    setTimeout(() => {
+      this.focusNextLogicalElement();
+    }, 200);
+  }
+
+  killSearchMenu(): void {
+    this.searchMenu.hide();
+    this.searchMenu.destroy();
+    this.searchMenu = null;
+  }
+}
diff --git a/yii2-adapter/resources/js/element-select-input/element-markup.ts b/yii2-adapter/resources/js/element-select-input/element-markup.ts
new file mode 100644
index 00000000000..cf3e3300d9e
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/element-markup.ts
@@ -0,0 +1,118 @@
+import {PromiseQueue} from '@/common/utils/promise-queue';
+import {jq} from '@/common/utils/jquery';
+
+/**
+ * Helpers for legacy `div.element` markup, which element select inputs still
+ * render. They take and return jQuery collections, as their callers do.
+ */
+
+// oxlint-disable-next-line typescript/no-explicit-any
+type JQueryLike = any;
+
+export interface ElementInfo {
+  id: unknown;
+  siteId: unknown;
+  label: unknown;
+  status: unknown;
+  url: unknown;
+  hasThumb: boolean;
+  $element: JQueryLike;
+}
+
+/** The element's data, from it or the first `.element` inside it. */
+export function getElementInfo(element: unknown): ElementInfo {
+  const $: JQueryLike = jq();
+  let $element = $(element);
+
+  if (!$element.hasClass('element')) {
+    $element = $element.find('.element:first');
+  }
+
+  return {
+    id: $element.data('id'),
+    siteId: $element.data('site-id'),
+    label: $element.data('label'),
+    status: $element.data('status'),
+    url: $element.data('url'),
+    hasThumb: $element.hasClass('has-thumb'),
+    $element,
+  };
+}
+
+/** Switches an element between its `small` and `large` sizes. */
+export function setElementSize(element: unknown, size: string): void {
+  const $: JQueryLike = jq();
+  const $element = $(element);
+  const newSize = size === 'large' ? 'large' : 'small';
+
+  if ($element.hasClass(newSize)) {
+    return;
+  }
+
+  $element
+    .addClass(newSize)
+    .removeClass(newSize === 'small' ? 'large' : 'small');
+
+  if ($element.hasClass('has-thumb')) {
+    const $oldImg = $element.find('> .thumb > img');
+    $oldImg.replaceWith(
+      $('<img/>', {
+        sizes: `${newSize === 'small' ? 30 : 100}px`,
+        srcset: $oldImg.attr('srcset') || $oldImg.attr('data-pfsrcset'),
+      })
+    );
+  }
+}
+
+const transitions = new PromiseQueue();
+
+/** Animates an element to the given CSS, after any animations already running. */
+export function animate(
+  element: unknown,
+  css: Record<string, string | number>
+): Promise<unknown> {
+  return animateAll([[element, css]]);
+}
+
+/**
+ * Animates several elements at once, in a view transition, after any
+ * animations already running. Without view transitions, the CSS just applies.
+ */
+export function animateAll(
+  animations: Array<[unknown, Record<string, string | number>]>
+): Promise<unknown> {
+  const $: JQueryLike = jq();
+
+  return transitions.push(async () => {
+    const $animations = animations.map(
+      ([element, css]) => [$(element), css] as const
+    );
+
+    if (!document.startViewTransition) {
+      for (const [$element, css] of $animations) {
+        $element.css(css);
+      }
+      return;
+    }
+
+    for (const [$element] of $animations) {
+      if ($element.css('view-transition-name') === 'none') {
+        $element.css(
+          'view-transition-name',
+          `vt-${Math.floor(Math.random() * 100000)}`
+        );
+      }
+    }
+
+    try {
+      await document.startViewTransition(() => {
+        for (const [$element, css] of $animations) {
+          $element.css(css);
+        }
+      }).finished;
+    } catch (error) {
+      // An interrupted transition still leaves the new styles in place
+      console.warn(error);
+    }
+  });
+}
diff --git a/yii2-adapter/resources/js/element-select-input/entry-select-input.ts b/yii2-adapter/resources/js/element-select-input/entry-select-input.ts
new file mode 100644
index 00000000000..4eaa2d11f17
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/entry-select-input.ts
@@ -0,0 +1,80 @@
+import {BaseElementSelectInput} from './base-element-select-input';
+import {getActionUrl} from '@/common/craft/url';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+
+declare const Craft: any;
+
+/**
+ * EntrySelectInput — a port of `Craft.EntrySelectInput` onto
+ * {@link BaseElementSelectInput}. Adds the ability to create new entries inline:
+ * posts to `entries/create`, then opens the new entry in an element editor
+ * slideout for the user to complete before the entry is added to the field.
+ */
+export class EntrySelectInput extends BaseElementSelectInput {
+  constructor(settings?: any) {
+    super(settings);
+    if (new.target === EntrySelectInput) {
+      this.init(settings);
+    }
+  }
+
+  get section(): any {
+    if (!this.settings.sectionId) return null;
+    return Craft.publishableSections.find(
+      (s: any) => s.id === this.settings.sectionId
+    );
+  }
+
+  override canCreateElements(): boolean {
+    return !!this.section;
+  }
+
+  override async createElement(title: string): Promise<number | null> {
+    const response = await actionClient.post('entries/create', {
+      siteId: this.settings.criteria.siteId,
+      section: this.section.handle,
+      authorId: Craft.userId,
+      title,
+    });
+
+    const entry = response.data.entry;
+
+    try {
+      await this.showElementEditor(entry);
+    } catch {
+      return null;
+    }
+
+    return entry.id;
+  }
+
+  /** Resolves once the new entry is saved; rejects if it's closed unsaved. */
+  showElementEditor(entry: any): Promise<void> {
+    return new Promise((resolve, reject) => {
+      let saved = false;
+
+      void Craft.openSlideout(
+        getActionUrl('elements/edit', {
+          elementType: 'CraftCms\\Cms\\Entry\\Elements\\Entry',
+          siteId: this.settings.criteria.siteId,
+          elementId: entry.id,
+          draftId: entry.draftId,
+          fresh: 1,
+        }),
+        {
+          onSaved: ({draft}: {draft?: boolean}) => {
+            if (!draft) {
+              saved = true;
+              resolve();
+            }
+          },
+          onClosed: () => {
+            if (!saved) {
+              reject();
+            }
+          },
+        }
+      );
+    });
+  }
+}
diff --git a/yii2-adapter/resources/js/element-select-input/index.ts b/yii2-adapter/resources/js/element-select-input/index.ts
new file mode 100644
index 00000000000..1f279e05239
--- /dev/null
+++ b/yii2-adapter/resources/js/element-select-input/index.ts
@@ -0,0 +1,14 @@
+import {AssetSelectInput} from './asset-select-input';
+import {BaseElementSelectInput} from './base-element-select-input';
+import {EntrySelectInput} from './entry-select-input';
+import {TagSelectInput} from './tag-select-input';
+import {registerCraftGlobals} from '@/common/craft-global';
+
+// The jQuery-based inputs plugins boot and subclass by name, e.g.
+// `Craft.AssetSelectInput.extend()`. Core uses its own classes.
+registerCraftGlobals({
+  AssetSelectInput,
+  BaseElementSelectInput,
+  EntrySelectInput,
+  TagSelectInput,
+});
diff --git a/resources/js/modules/element-select-input/tag-select-input.ts b/yii2-adapter/resources/js/element-select-input/tag-select-input.ts
similarity index 100%
rename from resources/js/modules/element-select-input/tag-select-input.ts
rename to yii2-adapter/resources/js/element-select-input/tag-select-input.ts
diff --git a/yii2-adapter/resources/templates/_includes/disclosuremenu.twig b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
new file mode 100644
index 00000000000..eb1523a940b
--- /dev/null
+++ b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
@@ -0,0 +1,120 @@
+{% set id = id ?? "menu-#{random()}" %}
+{% set withButton = withButton ?? false %}
+{% set buttonSpinner = buttonSpinner ?? false %}
+{% set withSearchInput = withSearchInput ?? false %}
+{% set disabled = disabled ?? false %}
+
+{% set hasSelected = items|map(i => (i.items ?? [i]))|flatten(1)|contains('selected') %}
+
+{# The item macros are shared with core's legacy menu markup #}
+{% import '_includes/disclosuremenu.twig' as menuMacros %}
+
+{% if not withButton and (invoker ?? false) %}
+  {{ invoker|raw }}
+{% endif %}
+
+{% if withButton %}
+  {% if html ?? false %}
+    {{ html|raw }}
+  {% elseif label ?? false %}
+    <span>{{ label }}</span>
+  {% endif %}
+
+  {% tag 'craft-button' with {
+    type: 'button',
+    variant: 'plain',
+    inherit: true,
+    icon: 'craft-icon' in (buttonHtml ?? ''),
+    size: 'small',
+    aria: {
+      controls: id,
+      label: hiddenLabel ?? null
+    },
+    data: {
+      'disclosure-trigger': true,
+    },
+    disabled: disabled ?? false,
+  }|merge(buttonAttributes ?? {}, recursive=true) %}
+    {%- apply spaceless %}
+      {% if buttonSpinner %}
+        <div role="status" class="visually-hidden"></div>
+      {% endif %}
+      {{ (buttonLabel or buttonHtml) ? tag('div', {
+        class: 'label',
+        text: buttonLabel ?? null,
+        html: buttonHtml ?? null,
+      }) }}
+      {% if buttonSpinner %}
+        <div class="spinner spinner-absolute">
+          <span class="visually-hidden">{{ 'Loading'|t('app') }}</span>
+        </div>
+      {% endif %}
+    {% endapply -%}
+  {% endtag %}
+{% endif %}
+
+{% tag 'div' with {
+  id: id,
+  class: (class ?? [])|explodeClass|merge(['menu', 'menu--disclosure']),
+  data: {
+    'with-search-input': withSearchInput,
+  },
+} %}
+  {% block menu %}
+    {% set ulStarted = false %}
+    {% for item in items %}
+      {% set headingTag = item.headingTag ?? 'h3' %}
+      {% set type = menuMacros.itemType(item) %}
+      {% if type in ['hr', 'group'] %}
+        {% if ulStarted %}
+          {{ '</ul>'|raw }}
+          {% set ulStarted = false %}
+        {% endif %}
+
+        {% if type == 'hr' %}
+          {{ tag('hr', {
+            class: (item.padded ?? true) ? 'padded' : null,
+          }) }}
+        {% else %}
+          {% tag 'div' with {
+            class: {
+              'menu-group': true,
+              hidden: item.hidden ?? false,
+            }|filter|keys
+          } %}
+            {% if item.heading is defined %}
+              {% tag headingTag with {
+                class: {
+                  h6: true,
+                  padded: item.padded ?? true,
+                }|filter|keys,
+              }|merge(item.headingAttributes ??{}, recursive=true) %}
+                {{ item.heading }}
+              {% endtag %}
+            {% endif %}
+            {% tag 'ul' with {
+              class: {
+                padded: hasSelected,
+              }|filter|keys,
+            }|merge(item.listAttributes ?? {}, recursive=true) %}
+              {% for groupItem in item.items %}
+                {{ menuMacros.item(groupItem, id) }}
+              {% endfor %}
+            {% endtag %}
+          {% endtag %}
+        {% endif %}
+      {% else %}
+        {% if not ulStarted %}
+          {% if hasSelected %}
+            {{ '<ul class="padded">'|raw }}
+          {% else %}
+            {{ '<ul>'|raw }}
+          {% endif %}
+          {% set ulStarted = true %}
+        {% endif %}
+        {{ menuMacros.item(item, id) }}
+      {% endif %}
+    {% endfor %}
+    {% if ulStarted %}{{ '</ul>'|raw }}{% endif %}
+  {% endblock %}
+{% endtag %}
diff --git a/yii2-adapter/src/Cp/Html/LegacyMenuHtml.php b/yii2-adapter/src/Cp/Html/LegacyMenuHtml.php
new file mode 100644
index 00000000000..4bd893b8e9c
--- /dev/null
+++ b/yii2-adapter/src/Cp/Html/LegacyMenuHtml.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Yii2Adapter\Cp\Html;
+
+use CraftCms\Cms\Cp\Html\MenuHtml;
+use CraftCms\Cms\View\TemplateMode;
+use Override;
+
+use function CraftCms\Cms\template;
+
+/**
+ * Renders menus as the legacy disclosure menu markup, which the adapter's
+ * jQuery code and plugins built on it boot and reach into.
+ *
+ * @internal
+ */
+readonly class LegacyMenuHtml extends MenuHtml
+{
+    #[Override]
+    public function disclosureMenu(array $items, array $config = []): string
+    {
+        $config = $this->disclosureMenuConfig($items, $config);
+
+        if ($config === null) {
+            return '';
+        }
+
+        return template('yii2-adapter/_includes/disclosuremenu', $config, templateMode: TemplateMode::Cp);
+    }
+}
diff --git a/yii2-adapter/src/View/LegacyAssets/CraftJsAsset.php b/yii2-adapter/src/View/LegacyAssets/CraftJsAsset.php
index 7819a2144c1..9e770c7f9d1 100644
--- a/yii2-adapter/src/View/LegacyAssets/CraftJsAsset.php
+++ b/yii2-adapter/src/View/LegacyAssets/CraftJsAsset.php
@@ -7,6 +7,7 @@
 use CraftCms\Cms\View\HtmlStack;
 use CraftCms\Cms\View\LegacyAssets\CpAsset;
 use CraftCms\Cms\View\LegacyAssets\DatepickerI18nAsset;
+use CraftCms\Cms\View\LegacyAssets\GarnishAsset;
 use CraftCms\Cms\View\LegacyAssets\IframeResizerAsset;
 use CraftCms\Cms\View\LegacyAssets\JqueryPaymentAsset;
 use CraftCms\Cms\View\LegacyAssets\JqueryUiAsset;
@@ -19,7 +20,8 @@
 /**
  * The legacy `Craft` helpers and jQuery plugins (`Craft.js`), which plugins
  * got from `CpAsset` on any page they registered it on, front end included,
- * along with the vendor libraries `CpAsset` used to bring.
+ * along with the vendor libraries `CpAsset` used to bring, jQuery and Garnish
+ * among them.
  *
  * @internal
  */
@@ -27,6 +29,7 @@ class CraftJsAsset implements LegacyAssetInterface
 {
     public array $depends = [
         CpAsset::class,
+        GarnishAsset::class,
         JqueryUiAsset::class,
         JqueryPaymentAsset::class,
         DatepickerI18nAsset::class,
diff --git a/yii2-adapter/src/Yii2ServiceProvider.php b/yii2-adapter/src/Yii2ServiceProvider.php
index 64d1b70507b..d7bbc52422b 100644
--- a/yii2-adapter/src/Yii2ServiceProvider.php
+++ b/yii2-adapter/src/Yii2ServiceProvider.php
@@ -16,6 +16,7 @@
 use CraftCms\Cms\Asset\Exceptions\AssetTransformException;
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Condition\Conditions;
+use CraftCms\Cms\Cp\Html\MenuHtml;
 use CraftCms\Cms\Cp\Settings;
 use CraftCms\Cms\Database\LaravelMigrations;
 use CraftCms\Cms\Database\MigrationRepository;
@@ -56,6 +57,7 @@
 use CraftCms\Yii2Adapter\Console\OffCommand;
 use CraftCms\Yii2Adapter\Console\OnCommand;
 use CraftCms\Yii2Adapter\Console\RepairCategoryGroupStructureCommand;
+use CraftCms\Yii2Adapter\Cp\Html\LegacyMenuHtml;
 use CraftCms\Yii2Adapter\Cp\LegacySettings;
 use CraftCms\Yii2Adapter\Database\Migrator;
 use CraftCms\Yii2Adapter\Element\LegacyElementEditorScreen;
@@ -134,6 +136,7 @@ public function register(): void
         new FilesystemCompatibility()->register($this->app);
         $this->app->singleton(AssetFileKinds::class, LegacyAssetFileKinds::class);
         $this->app->singleton(Settings::class, LegacySettings::class);
+        $this->app->singleton(MenuHtml::class, LegacyMenuHtml::class);
         $this->app->singleton(GqlArguments::class, LegacyGqlArguments::class);
         $this->app->singleton(GqlDirectives::class, LegacyGqlDirectives::class);
         $this->app->singleton(GqlTypes::class, LegacyGqlTypes::class);
diff --git a/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php b/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php
index 17ee16734bd..3ca2722d63c 100644
--- a/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php
+++ b/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php
@@ -41,6 +41,7 @@ public static function isLocalized(): bool
     string $service,
     string $serviceClass,
     Closure $configureService,
+    string $bootMarker,
 ) {
     $originalService = Craft::$app->get($service);
     Craft::$app->set($service, Mockery::mock($serviceClass, $configureService));
@@ -88,9 +89,8 @@ public static function isLocalized(): bool
             ->and($payload->nodes[0]->control?->type)->toBe(LegacyHtmlControl::class)
             ->and($payload->nodes[1]->control?->type)->toBe(LegacyHtmlControl::class)
             ->and($payload->nodes[1]->control?->props['fragment']['html'])->toContain("name=\"fields[$handle]\"")
-            // The input boots through its custom element, or through the JS its template registers.
-            ->and($payload->nodes[1]->control?->props['fragment']['html'] . $payload->nodes[1]->control?->props['fragment']['bodyHtml'])
-            ->toMatch('/<craft-element-select-input |new Craft\\./')
+            // The input boots from the fragment, as a custom element or a script
+            ->and($payload->nodes[1]->control?->props['fragment']['html'] . $payload->nodes[1]->control?->props['fragment']['bodyHtml'])->toContain($bootMarker)
             ->and($html)->toContain("name=\"fields[$handle]\"")
             ->and(app(LegacyHtml::class)->expand($fieldValue))->toBe(['fields' => [$handle => '']])
             ->and(json_encode($payload, JSON_THROW_ON_ERROR))->toBeString();
@@ -115,6 +115,7 @@ function(MockInterface $service): void {
             $service->shouldReceive('getAllGroups')->andReturn([$group]);
             $service->shouldReceive('getGroupByUid')->with('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')->andReturn($group);
         },
+        '<craft-element-select-input',
     ],
     'Tags' => [
         Tags::class,
@@ -132,5 +133,6 @@ function(MockInterface $service): void {
             $service->shouldReceive('getAllTagGroups')->andReturn([$group]);
             $service->shouldReceive('getTagGroupByUid')->with('bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb')->andReturn($group);
         },
+        'new Craft.TagSelectInput',
     ],
 ]);