From 25ed18a24c6acb3a6370ad2a933e2f0234c59b82 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:30:43 -0600
Subject: [PATCH 01/41] Load the adapter-only jQuery modules only with the
 adapter

Core never runs the CP screen slideout, element action trigger,
createElementEditor(), data and element table sorters, sortable checkbox
select or tag select input; only the adapter and its legacy scripts do.
Core's entry points stop loading and exporting them, and their Craft.*
globals move to compat.ts, so they can keep jQuery.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                               |  1 +
 resources/js/common/slideouts/index.ts         |  6 +-----
 resources/js/cp.ts                             |  3 ---
 resources/js/legacy.ts                         |  3 ---
 .../js/modules/data-table-sorter/index.ts      |  3 ---
 .../{globals.ts => compat.ts}                  |  0
 .../js/modules/element-action-trigger/index.ts |  4 ----
 .../js/modules/element-select-input/index.ts   |  1 -
 .../js/modules/element-table-sorter/index.ts   |  3 ---
 resources/js/modules/slideout/compat.ts        | 14 ++++++++++++++
 resources/js/modules/slideout/globals.ts       | 11 -----------
 resources/js/modules/slideout/index.ts         | 18 +-----------------
 .../modules/sortable-checkbox-select/index.ts  |  2 --
 yii2-adapter/resources/js/cp-compat.ts         |  1 +
 14 files changed, 18 insertions(+), 52 deletions(-)
 delete mode 100644 resources/js/modules/data-table-sorter/index.ts
 rename resources/js/modules/element-action-trigger/{globals.ts => compat.ts} (100%)
 delete mode 100644 resources/js/modules/element-action-trigger/index.ts
 delete mode 100644 resources/js/modules/element-table-sorter/index.ts

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index acc6f6cc9c2..f4c14a4b428 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -811,6 +811,7 @@ 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`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
 - `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.
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/cp.ts b/resources/js/cp.ts
index fd52ba8e8c0..1cc1d41da69 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -47,10 +47,7 @@ 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..4cccc39507f 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -61,10 +61,7 @@ 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/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-select-input/index.ts b/resources/js/modules/element-select-input/index.ts
index cba35d7cad0..be18a249bc2 100644
--- a/resources/js/modules/element-select-input/index.ts
+++ b/resources/js/modules/element-select-input/index.ts
@@ -12,6 +12,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/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/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/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/yii2-adapter/resources/js/cp-compat.ts b/yii2-adapter/resources/js/cp-compat.ts
index 1b6f970a85d..58d450f52fd 100644
--- a/yii2-adapter/resources/js/cp-compat.ts
+++ b/yii2-adapter/resources/js/cp-compat.ts
@@ -10,6 +10,7 @@ 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-action-trigger/compat';
 import '@/modules/element-select-input/compat';
 import '@/modules/element-selector-modal/compat';
 import '@/modules/element-table-sorter/compat';

From bff7fcac90751ed3176a85155359953495912c6f Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:33:18 -0600
Subject: [PATCH 02/41] Port the auth method setup and entry type override
 settings off jQuery

The auth method listing refresh parses the new markup with a template
element, and the entry type override settings serialize their inputs with
serializeFormInputs(). The grouped entry type manager only declared $.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../auth-method-setup.test.ts                 | 37 +++++++++++++++++++
 .../auth-method-setup/auth-method-setup.ts    | 16 +++++---
 .../EntryTypeOverrideSettings.vue             |  4 +-
 .../grouped-entry-type-manager.ts             |  2 -
 4 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 resources/js/modules/auth-method-setup/auth-method-setup.test.ts

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..23f841c9a53 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. */
@@ -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/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. */

From 36e866477b3b970639138e46e81426f9bd69dec4 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:36:39 -0600
Subject: [PATCH 03/41] Build chip action fallbacks without jQuery

Chips with no action container fall back to the legacy disclosure menu,
which only the adapter provides. The fallback now checks for that plugin
first and builds its markup with the DOM, so without the adapter it does
nothing instead of throwing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/common/craft/chip-actions.test.ts      |  9 +++
 resources/js/common/craft/chip-actions.ts     | 62 ++++++++++---------
 2 files changed, 41 insertions(+), 30 deletions(-)

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)

From a3c37810a3e1f6ee092799f72ec7e31bd0f751e9 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:43:24 -0600
Subject: [PATCH 04/41] Port the grid layout off jQuery

Craft.Grid laid out dashboard widgets and field layout tabs through
jQuery collections and jQuery's box-model measurements. It works on plain
elements now, measuring content boxes itself, and still offers $container
and $items as jQuery collections for the legacy dashboard when jQuery is
loaded. The dashboard and field layout designer pass it elements.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/modules/dashboard/useDashboard.ts      |  11 +-
 .../field-layout-designer/drags.test.ts       |   5 +-
 .../js/modules/field-layout-designer/drags.ts |  22 +-
 .../field-layout-designer.ts                  |  14 +-
 .../js/modules/field-layout-designer/tab.ts   |  12 +-
 resources/js/modules/grid/grid.test.ts        |  28 ++
 resources/js/modules/grid/grid.ts             | 252 ++++++++++++------
 7 files changed, 221 insertions(+), 123 deletions(-)
 create mode 100644 resources/js/modules/grid/grid.test.ts

diff --git a/resources/js/modules/dashboard/useDashboard.ts b/resources/js/modules/dashboard/useDashboard.ts
index f09a932e887..6f6afb08867 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,
@@ -109,13 +108,13 @@ export function useDashboard(props: {
   function refreshGrid() {
     if (!grid) 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/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/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..1392c5e2a2b 100644
--- a/resources/js/modules/grid/grid.ts
+++ b/resources/js/modules/grid/grid.ts
@@ -7,8 +7,70 @@ import {startSide} from '@/common/craft/direction';
 import {resolveElement, type ElementArg} from '@/common/utils/dom';
 import {jq} from '@/common/utils/jquery';
 
-declare const Craft: any;
-declare const $: any;
+/** The content width, without padding, like jQuery's `width()`. */
+function contentWidth(el: HTMLElement): number {
+  const style = getComputedStyle(el);
+  return (
+    el.clientWidth -
+    parseFloat(style.paddingLeft || '0') -
+    parseFloat(style.paddingRight || '0')
+  );
+}
+
+/** The content height, without padding, like jQuery's `height()`. */
+function contentHeight(el: HTMLElement): number {
+  const style = getComputedStyle(el);
+  return (
+    el.clientHeight -
+    parseFloat(style.paddingTop || '0') -
+    parseFloat(style.paddingBottom || '0')
+  );
+}
+
+/** 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 +100,10 @@ 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. `$container` and `$items` still return jQuery
+ * collections when jQuery is loaded, for the legacy dashboard, and `addItems()`
+ * accepts them too. 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 +118,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 +148,64 @@ 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();
+  /** The container as a jQuery collection, for legacy callers. */
+  get $container(): any {
+    return this.container ? jq()?.(this.container) : null;
+  }
+
+  /** The items as a jQuery collection, for legacy callers. */
+  get $items(): any {
+    return jq()?.(this.items) ?? null;
+  }
+
+  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 +225,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 +242,12 @@ export class Grid extends Base<GridSettings> {
     if (settings.cols) {
       totalCols = settings.cols;
     } else {
-      totalCols = Math.floor(this.$container.width() / settings.minColWidth);
+      totalCols = Math.floor(contentWidth(container) / 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
+          (contentWidth(container) - 20) / settings.minColWidth
         );
       }
 
@@ -230,7 +301,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 = contentHeight(item);
         if (itemHeight > tallestItemHeight) {
           tallestItemHeight = itemHeight;
         }
@@ -249,7 +322,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 +335,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 +365,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 +386,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 +471,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 +526,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemWidthInPx(colspan: number): number {
     return (
-      (this.getItemWidth(colspan) / 100) * this.$container.width() -
+      (this.getItemWidth(colspan) / 100) * contentWidth(this.container!) -
       this.colGutterDrop
     );
   }
@@ -457,7 +539,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemLeftPosInPx(position: number): number {
     return (
-      ((this.getItemWidth(1) / 100) * this.$container.width() +
+      ((this.getItemWidth(1) / 100) * contentWidth(this.container!) +
         (this.settings!.gutter - this.colGutterDrop)) *
       position
     );
@@ -514,7 +596,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 +606,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 +617,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 +631,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 +640,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();
   }
 }

From c742a8a72b8a3a22c7a5d15e0656986fa382d6f9 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:47:59 -0600
Subject: [PATCH 05/41] Port the file preview modal and focal point editor off
 jQuery

The preview modal builds its markup with the DOM and inserts preview HTML
with appendElementHtml(), which runs its scripts as jQuery's append() did.
$container stays, as a jQuery collection when jQuery is loaded, for
preview templates. The focal point editor drags with pointer events, which
also covers touch, and its listeners now come off when it's destroyed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../modules/focal-point/focal-point.test.ts   |  64 ++++++++
 .../js/modules/focal-point/focal-point.ts     | 149 ++++++++++--------
 .../preview-file-modal.test.ts                |   1 -
 .../preview-file-modal/preview-file-modal.ts  |  59 ++++---
 4 files changed, 181 insertions(+), 92 deletions(-)
 create mode 100644 resources/js/modules/focal-point/focal-point.test.ts

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..65d62f2674e 100644
--- a/resources/js/modules/focal-point/focal-point.ts
+++ b/resources/js/modules/focal-point/focal-point.ts
@@ -4,14 +4,25 @@ 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;
+/** The content box size, without padding. */
+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'),
+  };
+}
 
 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 +39,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 +94,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 +204,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 +223,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 +241,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/preview-file-modal/preview-file-modal.test.ts b/resources/js/modules/preview-file-modal/preview-file-modal.test.ts
index d847e8b19c6..8cf8b4502f5 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
@@ -68,7 +68,6 @@ function elementSelect(ids: number[]) {
 
 describe('PreviewFileModal', () => {
   beforeEach(() => {
-    vi.stubGlobal('$', $);
     vi.stubGlobal('Craft', {
       t: (_category: string, message: string) => message,
       appendHeadHtml: vi.fn(),
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..fd4d8912fc5 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,16 @@ 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 {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,8 +53,8 @@ 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
+ * `Craft.PreviewFileModal.openInstance`: `container` is the element holding
+ * the preview HTML (`$container` wraps it in jQuery when that's loaded), 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 +66,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;
@@ -90,13 +94,18 @@ export class PreviewFileModal {
   });
   #destroyed = false;
 
+  /** The preview's container as a jQuery collection, for legacy preview templates. */
+  get $container(): any {
+    return jq()?.(this.container) ?? null;
+  }
+
   constructor(
     assetId: number,
     elementSelectOrSettings?: any,
     settings?: Partial<PreviewFileModalSettings>
   ) {
     // (assetId, settings) overload
-    if (settings === undefined && $.isPlainObject(elementSelectOrSettings)) {
+    if (settings === undefined && isPlainObject(elementSelectOrSettings)) {
       settings = elementSelectOrSettings;
       elementSelectOrSettings = null;
     }
@@ -122,15 +131,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.
@@ -238,7 +250,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 +278,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 +360,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. */

From f7b860d05621bdd6982cc6ee35481f08fc3d98de Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 2 Nov 2026 16:51:34 -0600
Subject: [PATCH 06/41] Port the CP modal and element deletion manager off
 jQuery

The CP modal builds its dialog with the DOM, inserts content with
appendElementHtml(), and keeps its delta-tracking state in private fields
instead of jQuery's data(); a serializer legacy code sets through data()
is still honoured. The element deletion manager builds its blockers with
the DOM, and both keep $container-style getters for legacy code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/modules/cp-modal/cp-modal.test.ts      |   2 -
 resources/js/modules/cp-modal/cp-modal.ts     | 226 ++++++++++--------
 .../element-deletion-manager.test.ts          |  58 +++++
 .../element-deletion-manager.ts               | 110 +++++----
 4 files changed, 247 insertions(+), 149 deletions(-)
 create mode 100644 resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts

diff --git a/resources/js/modules/cp-modal/cp-modal.test.ts b/resources/js/modules/cp-modal/cp-modal.test.ts
index 7c82050b5be..6363d29022d 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',
diff --git a/resources/js/modules/cp-modal/cp-modal.ts b/resources/js/modules/cp-modal/cp-modal.ts
index c8b6f843fdf..6f394ec0452 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,20 @@ 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');
+    return typeof serializer === 'function'
+      ? serializer()
+      : serializeFormInputs(this.#container);
+  }
+
   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/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..bbf29e01be6
--- /dev/null
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts
@@ -0,0 +1,58 @@
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {ElementDeletionManager} from './element-deletion-manager';
+
+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);
+});
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..2deff96e4a6 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,13 @@ 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 {jq} from '@/common/utils/jquery';
 import {elementTypeName} from '@/common/craft/element-types';
 import {elevatedSessionManager} from '@/modules/auth/elevated-session/manager';
 import {create} from '@craftcms/ui/utilities/create';
@@ -14,7 +20,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 +47,12 @@ export class ElementDeletionManager extends Base {
   elementIds: any = null;
   hardDelete = false;
   modal: CraftDialog | null = null;
-  $blockersContainer: any = null;
+  blockersContainer: HTMLElement | null = null;
+
+  /** The blockers' container as a jQuery collection, for legacy code. */
+  get $blockersContainer(): any {
+    return this.blockersContainer ? jq()?.(this.blockersContainer) : null;
+  }
   submitButton: CraftButton | null = null;
   blockers: any = null;
   succeeded = false;
@@ -178,18 +188,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,7 +267,12 @@ class Blocker extends Base {
   manager: any = null;
   data: any = null;
   id: any = null;
-  $container: any = null;
+  container: HTMLElement | null = null;
+
+  /** The blocker's container as a jQuery collection, for legacy code. */
+  get $container(): any {
+    return this.container ? jq()?.(this.container) : null;
+  }
   buttons: CraftButton[] = [];
 
   constructor(manager?: any, data?: any) {
@@ -273,14 +288,15 @@ class Blocker extends Base {
     this.buttons = [];
 
     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 +311,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);
+      void appendElementHtml(this.data.details, details);
 
       const setExpanded = (expanded: boolean): void => {
         const rtl = getComputedStyle(toggle).direction === 'rtl';
@@ -312,7 +328,7 @@ class Blocker extends Base {
           : rtl
             ? 'chevron-left'
             : 'chevron-right';
-        $details.prop('hidden', !expanded);
+        details.hidden = !expanded;
       };
 
       setExpanded(false);
@@ -320,13 +336,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 +354,6 @@ class Blocker extends Base {
           },
           action.label
         );
-        const $button = $(button);
         this.buttons.push(button);
 
         if (action.id) {
@@ -346,14 +361,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 +446,22 @@ class Blocker extends Base {
       }
     }
 
-    initLegacyUi(this.$container);
+    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);
   }
 }

From 0137a70d8096702d3a85f286d5e329532116597e Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 09:47:51 -0600
Subject: [PATCH 07/41] Port the charts off jQuery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Craft.charts draws into plain elements, deep-merges its settings with a
helper that matches jQuery's $.extend(true, …), and measures and positions
its tooltip itself. $container, $chart and $tip stay as jQuery getters for
legacy chart widgets. The content-box measurement the grid and focal point
editor each had moves to a shared contentSize() helper.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/common/utils/dom.ts              |  15 ++
 resources/js/modules/chart/chart.test.ts      |  66 +++++++
 resources/js/modules/chart/chart.ts           | 163 +++++++++++-------
 resources/js/modules/dashboard/NewUsers.vue   |   3 +-
 .../js/modules/focal-point/focal-point.ts     |  16 +-
 resources/js/modules/grid/grid.ts             |  34 +---
 6 files changed, 193 insertions(+), 104 deletions(-)
 create mode 100644 resources/js/modules/chart/chart.test.ts

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/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..b37ffcb5e27 100644
--- a/resources/js/modules/chart/chart.ts
+++ b/resources/js/modules/chart/chart.ts
@@ -1,11 +1,34 @@
 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';
+import {jq} from '@/common/utils/jquery';
+
+/** 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;
+    }
+
+    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;
+      }
+    }
+  }
 
-// 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;
+  return target;
+}
 
 declare global {
   interface Window {
@@ -35,7 +58,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 +96,48 @@ 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);
+  /** The tooltip as a jQuery collection, for legacy code. */
+  get $tip(): any {
+    return jq()?.(this.tip) ?? null;
+  }
+
+  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 +168,18 @@ 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;
+
+  /** The container as a jQuery collection, for legacy chart widgets. */
+  get $container(): any {
+    return this.container ? jq()?.(this.container) : null;
+  }
+
+  /** The chart element as a jQuery collection, for legacy chart widgets. */
+  get $chart(): any {
+    return this.chart ? jq()?.(this.chart) : null;
+  }
 
   chartBaseClass = 'cp-chart';
   dataTable: any = null;
@@ -155,8 +199,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 +222,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 +237,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 +255,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 +313,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 +326,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 +510,7 @@ export class Area extends BaseChart {
     }
 
     if (!this.tip) {
-      this.tip = new Tip(this.$chart);
+      this.tip = new Tip(this.chart);
     }
 
     // Define xAxisTickInterval
@@ -513,14 +554,14 @@ 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);
 
@@ -534,17 +575,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) {
@@ -572,7 +613,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/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/focal-point/focal-point.ts b/resources/js/modules/focal-point/focal-point.ts
index 65d62f2674e..27f3ae441dc 100644
--- a/resources/js/modules/focal-point/focal-point.ts
+++ b/resources/js/modules/focal-point/focal-point.ts
@@ -3,21 +3,7 @@ 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';
-
-/** The content box size, without padding. */
-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'),
-  };
-}
+import {contentSize} from '@/common/utils/dom';
 
 export class FocalPoint {
   private readonly target: HTMLElement;
diff --git a/resources/js/modules/grid/grid.ts b/resources/js/modules/grid/grid.ts
index 1392c5e2a2b..2903573bd78 100644
--- a/resources/js/modules/grid/grid.ts
+++ b/resources/js/modules/grid/grid.ts
@@ -4,29 +4,9 @@ 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';
 
-/** The content width, without padding, like jQuery's `width()`. */
-function contentWidth(el: HTMLElement): number {
-  const style = getComputedStyle(el);
-  return (
-    el.clientWidth -
-    parseFloat(style.paddingLeft || '0') -
-    parseFloat(style.paddingRight || '0')
-  );
-}
-
-/** The content height, without padding, like jQuery's `height()`. */
-function contentHeight(el: HTMLElement): number {
-  const style = getComputedStyle(el);
-  return (
-    el.clientHeight -
-    parseFloat(style.paddingTop || '0') -
-    parseFloat(style.paddingBottom || '0')
-  );
-}
-
 /** Sets the content height, accounting for `box-sizing`, like jQuery's `height(value)`. */
 function setContentHeight(el: HTMLElement, height: number | 'auto'): void {
   if (height === 'auto') {
@@ -242,12 +222,14 @@ export class Grid extends Base<GridSettings> {
     if (settings.cols) {
       totalCols = settings.cols;
     } else {
-      totalCols = Math.floor(contentWidth(container) / 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(
-          (contentWidth(container) - 20) / settings.minColWidth
+          (contentSize(container).width - 20) / settings.minColWidth
         );
       }
 
@@ -303,7 +285,7 @@ export class Grid extends Base<GridSettings> {
       ) {
         const item = this.items[i]!;
         setContentHeight(item, 'auto');
-        const itemHeight = contentHeight(item);
+        const itemHeight = contentSize(item).height;
         if (itemHeight > tallestItemHeight) {
           tallestItemHeight = itemHeight;
         }
@@ -526,7 +508,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemWidthInPx(colspan: number): number {
     return (
-      (this.getItemWidth(colspan) / 100) * contentWidth(this.container!) -
+      (this.getItemWidth(colspan) / 100) * contentSize(this.container!).width -
       this.colGutterDrop
     );
   }
@@ -539,7 +521,7 @@ export class Grid extends Base<GridSettings> {
 
   getItemLeftPosInPx(position: number): number {
     return (
-      ((this.getItemWidth(1) / 100) * contentWidth(this.container!) +
+      ((this.getItemWidth(1) / 100) * contentSize(this.container!).width +
         (this.settings!.gutter - this.colGutterDrop)) *
       position
     );

From abfc5c75daac3d6527d83f64deb8d329df062656 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 09:56:10 -0600
Subject: [PATCH 08/41] Port the slideout off jQuery

Craft.Slideout keeps its container, outer container, shade and trigger as
plain elements and positions and transitions them with the DOM. The
$-prefixed properties stay as jQuery getters for the CP screen slideout and
other legacy subclasses. The auth method setup slideout and two-step
verification read the plain container.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../auth-method-setup-slideout.ts             |  29 ++-
 .../auth-method-setup/auth-method-setup.ts    |   2 +-
 .../modules/slideout/slideout.browser.test.ts |  37 ++++
 resources/js/modules/slideout/slideout.ts     | 209 +++++++++++-------
 .../TwoStepVerification.vue                   |   6 +-
 5 files changed, 183 insertions(+), 100 deletions(-)
 create mode 100644 resources/js/modules/slideout/slideout.browser.test.ts

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.ts b/resources/js/modules/auth-method-setup/auth-method-setup.ts
index 23f841c9a53..cb75adc4970 100644
--- a/resources/js/modules/auth-method-setup/auth-method-setup.ts
+++ b/resources/js/modules/auth-method-setup/auth-method-setup.ts
@@ -144,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();
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..e7ed43a36b6
--- /dev/null
+++ b/resources/js/modules/slideout/slideout.browser.test.ts
@@ -0,0 +1,37 @@
+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();
+});
diff --git a/resources/js/modules/slideout/slideout.ts b/resources/js/modules/slideout/slideout.ts
index 328d5de4497..daadb1b6b40 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,33 @@ 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;
+
+  /** The outer container as a jQuery collection, for legacy code. */
+  get $outerContainer(): any {
+    return this.outerContainer ? jq()?.(this.outerContainer) : null;
+  }
+
+  /** The container as a jQuery collection, for legacy code. */
+  get $container(): any {
+    return this.container ? jq()?.(this.container) : null;
+  }
+
+  /** The shade as a jQuery collection, for legacy code. */
+  get $shade(): any {
+    return this.shade ? jq()?.(this.shade) : null;
+  }
+
+  /** The trigger element as a jQuery collection, for legacy code. */
+  get $triggerElement(): any {
+    return this.triggerElement ? jq()?.(this.triggerElement) : null;
+  }
   isOpen = false;
   isOpening = false;
   useMobileStyles: boolean | null = null;
@@ -203,6 +239,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 +248,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 +262,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 +270,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 +329,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 +376,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 +426,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 +446,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 +463,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,20 +501,20 @@ 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()) {
@@ -485,7 +522,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
         const disclosure = focusTarget.closest('.menu--disclosure');
         if (disclosure) {
           const disclosureId = disclosure.getAttribute('id');
-          focusTarget = document.querySelector(
+          focusTarget = document.querySelector<HTMLElement>(
             `[aria-controls="${disclosureId}"]`
           );
         } else {
@@ -495,7 +532,7 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
       if (focusTarget) {
         setTimeout(() => {
-          focusTarget.focus();
+          focusTarget!.focus();
         }, 150);
       }
     }
@@ -506,14 +543,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 +585,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 +595,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 +610,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 +627,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/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>();

From c68f39d6042e039a4c0d7f4330601d9d92f1ef43 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 10:00:36 -0600
Subject: [PATCH 09/41] Port the component select off jQuery

The create button listens for clicks, which a craft-button also fires on
Enter and Space, instead of Garnish's jQuery activate event. A chip's edit
shortcut uses a dblclick listener and VueUse's onLongPress for touch,
replacing the jQuery touch events plugin's taphold. The legacy disclosure
menu is only booted through jQuery when the adapter has loaded it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../component-select/component-select.test.ts | 21 ++++--
 .../component-select/component-select.ts      | 70 +++++++++++--------
 2 files changed, 54 insertions(+), 37 deletions(-)

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');
   }
 
   /**

From d5759f4566adca414d879d685e524d6297c127f3 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:00:07 -0600
Subject: [PATCH 10/41] Drop the jQuery getters from the ported slideout, grid,
 chart and modals

Only a handful of plugins read them, and they need Craft 6 updates anyway.
CP screen slideouts keep `$container`, since they're jQuery-based and plugins
subclass them through the adapter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                              |  1 +
 .../dashboard/src/Dashboard.js                |  6 +++---
 resources/js/modules/chart/chart.ts           | 16 ----------------
 .../element-deletion-manager.ts               |  9 ---------
 resources/js/modules/grid/grid.ts             | 14 +-------------
 .../preview-file-modal/preview-file-modal.ts  |  6 ------
 resources/js/modules/slideout/README.md       |  8 ++++----
 .../js/modules/slideout/cp-screen-slideout.ts |  4 ++++
 resources/js/modules/slideout/slideout.ts     | 19 -------------------
 9 files changed, 13 insertions(+), 70 deletions(-)

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index 328659f02a2..93ab1c78f64 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -836,6 +836,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - `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`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
+- `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.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.
diff --git a/packages/craftcms-legacy/dashboard/src/Dashboard.js b/packages/craftcms-legacy/dashboard/src/Dashboard.js
index 29cea513150..d4b42734b8b 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/resources/js/modules/chart/chart.ts b/resources/js/modules/chart/chart.ts
index b37ffcb5e27..30cbcb8a050 100644
--- a/resources/js/modules/chart/chart.ts
+++ b/resources/js/modules/chart/chart.ts
@@ -1,7 +1,6 @@
 import * as d3 from 'd3';
 import {Base, isPlainObject} from '@craftcms/garnish';
 import {contentSize, resolveElement, type ElementArg} from '@/common/utils/dom';
-import {jq} from '@/common/utils/jquery';
 
 /** A deep merge with the semantics of jQuery's `$.extend(true, …)`. */
 function deepExtend(target: any, ...sources: any[]): any {
@@ -114,11 +113,6 @@ export class Tip extends Base {
     this.hide();
   }
 
-  /** The tooltip as a jQuery collection, for legacy code. */
-  get $tip(): any {
-    return jq()?.(this.tip) ?? null;
-  }
-
   setContent(content: string | Node): void {
     if (typeof content === 'string') {
       this.tip.innerHTML = content;
@@ -171,16 +165,6 @@ export class BaseChart extends Base {
   container: HTMLElement | null = null;
   chart: HTMLElement | null = null;
 
-  /** The container as a jQuery collection, for legacy chart widgets. */
-  get $container(): any {
-    return this.container ? jq()?.(this.container) : null;
-  }
-
-  /** The chart element as a jQuery collection, for legacy chart widgets. */
-  get $chart(): any {
-    return this.chart ? jq()?.(this.chart) : null;
-  }
-
   chartBaseClass = 'cp-chart';
   dataTable: any = null;
 
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 2deff96e4a6..05d2ee82790 100644
--- a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
@@ -10,7 +10,6 @@ import {
   appendHeadHtml,
 } from '@craftcms/ui/utilities/dom';
 import {setElementAttributes} from '@/common/craft/attributes';
-import {jq} from '@/common/utils/jquery';
 import {elementTypeName} from '@/common/craft/element-types';
 import {elevatedSessionManager} from '@/modules/auth/elevated-session/manager';
 import {create} from '@craftcms/ui/utilities/create';
@@ -49,10 +48,6 @@ export class ElementDeletionManager extends Base {
   modal: CraftDialog | null = null;
   blockersContainer: HTMLElement | null = null;
 
-  /** The blockers' container as a jQuery collection, for legacy code. */
-  get $blockersContainer(): any {
-    return this.blockersContainer ? jq()?.(this.blockersContainer) : null;
-  }
   submitButton: CraftButton | null = null;
   blockers: any = null;
   succeeded = false;
@@ -269,10 +264,6 @@ class Blocker extends Base {
   id: any = null;
   container: HTMLElement | null = null;
 
-  /** The blocker's container as a jQuery collection, for legacy code. */
-  get $container(): any {
-    return this.container ? jq()?.(this.container) : null;
-  }
   buttons: CraftButton[] = [];
 
   constructor(manager?: any, data?: any) {
diff --git a/resources/js/modules/grid/grid.ts b/resources/js/modules/grid/grid.ts
index 2903573bd78..1d25b444bfc 100644
--- a/resources/js/modules/grid/grid.ts
+++ b/resources/js/modules/grid/grid.ts
@@ -80,9 +80,7 @@ interface GridLayout {
  * absolutely-positions the items. (This is why it can't be a CSS `display:grid`
  * — native masonry isn't shipped cross-browser.)
  *
- * It works on plain elements. `$container` and `$items` still return jQuery
- * collections when jQuery is loaded, for the legacy dashboard, and `addItems()`
- * accepts them too. Booted via `new Craft.Grid(...)` and the `.grid` jQuery
+ * 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> {
@@ -155,16 +153,6 @@ export class Grid extends Base<GridSettings> {
     });
   }
 
-  /** The container as a jQuery collection, for legacy callers. */
-  get $container(): any {
-    return this.container ? jq()?.(this.container) : null;
-  }
-
-  /** The items as a jQuery collection, for legacy callers. */
-  get $items(): any {
-    return jq()?.(this.items) ?? null;
-  }
-
   addItems(items: unknown): void {
     this.setItems([...this.items, ...toElements(items)]);
     this.refreshCols(true);
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 fd4d8912fc5..91f6d59b075 100644
--- a/resources/js/modules/preview-file-modal/preview-file-modal.ts
+++ b/resources/js/modules/preview-file-modal/preview-file-modal.ts
@@ -16,7 +16,6 @@ import {
   appendHeadHtml,
 } from '@craftcms/ui/utilities/dom';
 import {isPlainObject} from '@craftcms/garnish';
-import {jq} from '@/common/utils/jquery';
 import {showError, showNotice} from '@/modules/messages/messages';
 
 declare const Craft: any;
@@ -94,11 +93,6 @@ export class PreviewFileModal {
   });
   #destroyed = false;
 
-  /** The preview's container as a jQuery collection, for legacy preview templates. */
-  get $container(): any {
-    return jq()?.(this.container) ?? null;
-  }
-
   constructor(
     assetId: number,
     elementSelectOrSettings?: any,
diff --git a/resources/js/modules/slideout/README.md b/resources/js/modules/slideout/README.md
index b40cfdee73c..059c42a7155 100644
--- a/resources/js/modules/slideout/README.md
+++ b/resources/js/modules/slideout/README.md
@@ -125,10 +125,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/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/slideout.ts b/resources/js/modules/slideout/slideout.ts
index daadb1b6b40..870057cafbc 100644
--- a/resources/js/modules/slideout/slideout.ts
+++ b/resources/js/modules/slideout/slideout.ts
@@ -211,25 +211,6 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
   $liveRegion: HTMLElement | null = null;
   triggerElement: HTMLElement | null = null;
 
-  /** The outer container as a jQuery collection, for legacy code. */
-  get $outerContainer(): any {
-    return this.outerContainer ? jq()?.(this.outerContainer) : null;
-  }
-
-  /** The container as a jQuery collection, for legacy code. */
-  get $container(): any {
-    return this.container ? jq()?.(this.container) : null;
-  }
-
-  /** The shade as a jQuery collection, for legacy code. */
-  get $shade(): any {
-    return this.shade ? jq()?.(this.shade) : null;
-  }
-
-  /** The trigger element as a jQuery collection, for legacy code. */
-  get $triggerElement(): any {
-    return this.triggerElement ? jq()?.(this.triggerElement) : null;
-  }
   isOpen = false;
   isOpening = false;
   useMobileStyles: boolean | null = null;

From ec6715b130e2bcb07331f9b244f761e05c484cc1 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:08:23 -0600
Subject: [PATCH 11/41] Boot element select inputs through their custom
 elements

The element select template rendered an inline `new Craft.XSelectInput()`, so
core relation fields needed the Craft globals. It now always renders the
matching custom element, passing a plugin's class name as `input-class`, and
the Craft.* registrations move to the adapter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                              |  1 +
 .../js/modules/asset-select-input/globals.ts  |  6 ----
 .../js/modules/asset-select-input/index.ts    |  1 -
 .../js/modules/element-select-input/README.md |  9 +++---
 .../js/modules/element-select-input/compat.ts | 11 ++++++-
 .../modules/element-select-input/globals.ts   |  7 ----
 .../js/modules/element-select-input/index.ts  |  1 -
 .../_components/fieldtypes/Assets/input.twig  |  6 ----
 .../_includes/forms/elementSelect.twig        | 21 ++++++------
 tests/Unit/Cp/FormFieldsTest.php              | 32 +++++++++++++++++++
 10 files changed, 60 insertions(+), 35 deletions(-)
 delete mode 100644 resources/js/modules/asset-select-input/globals.ts
 delete mode 100644 resources/js/modules/element-select-input/globals.ts

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index 93ab1c78f64..f11acf0563c 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -836,6 +836,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - `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`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
+- 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.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`.
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/element-select-input/README.md b/resources/js/modules/element-select-input/README.md
index 2f6b1b33367..2b1eaa4c489 100644
--- a/resources/js/modules/element-select-input/README.md
+++ b/resources/js/modules/element-select-input/README.md
@@ -6,7 +6,8 @@ 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.
+`_includes/forms/elementSelect.twig` always boots through these elements. A
+core `jsClass` (`Craft.EntrySelectInput`, `Craft.AssetSelectInput`) picks the
+matching element; any other class name becomes `input-class`, which the Yii2
+adapter resolves to the plugin's class. The `Craft.*SelectInput` globals are
+registered by the adapter only (`compat.ts`).
diff --git a/resources/js/modules/element-select-input/compat.ts b/resources/js/modules/element-select-input/compat.ts
index 2390fac54e1..801b566cbaf 100644
--- a/resources/js/modules/element-select-input/compat.ts
+++ b/resources/js/modules/element-select-input/compat.ts
@@ -1,4 +1,13 @@
+import {AssetSelectInput} from '@/modules/asset-select-input/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';
 
-registerCraftGlobals({TagSelectInput});
+// Plugins boot and subclass these by name, e.g. `Craft.AssetSelectInput.extend()`.
+registerCraftGlobals({
+  AssetSelectInput,
+  BaseElementSelectInput,
+  EntrySelectInput,
+  TagSelectInput,
+});
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 be18a249bc2..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,
diff --git a/resources/templates/_components/fieldtypes/Assets/input.twig b/resources/templates/_components/fieldtypes/Assets/input.twig
index e943ef51c54..10b7412bbbc 100644
--- a/resources/templates/_components/fieldtypes/Assets/input.twig
+++ b/resources/templates/_components/fieldtypes/Assets/input.twig
@@ -1,7 +1,5 @@
 {% extends '_includes/forms/elementSelect.twig' %}
 
-{% set registerJs = false %}
-
 {% set jsSettings = {
     id: id|namespaceInputId,
     name: name|namespaceInputName,
@@ -40,7 +38,3 @@
     describedBy: (describedBy ?? false) ? describedBy|split(' ')|map(id => id|namespaceInputId)|join(' ') : null,
     allowSelfRelations: allowSelfRelations ?? false,
 } %}
-
-{% js %}
-    new {{ jsClass }}({{ jsSettings|json_encode|raw }});
-{% endjs %}
diff --git a/resources/templates/_includes/forms/elementSelect.twig b/resources/templates/_includes/forms/elementSelect.twig
index 0ea351d95d7..b664840508a 100644
--- a/resources/templates/_includes/forms/elementSelect.twig
+++ b/resources/templates/_includes/forms/elementSelect.twig
@@ -2,9 +2,18 @@
 
 {% set id = id ?? "elementselect#{random()}" -%}
 {% set elements = elements ?? [] -%}
-{% set jsClass = jsClass ?? 'Craft.BaseElementSelectInput' -%}
+{% set jsClass = jsClass ?? null -%}
 {% set inputClass = inputClass ?? null -%}
-{% set customElement = customElement ?? 'craft-element-select-input' -%}
+{# The core input classes have their own elements; any other class is a plugin's, booted by name #}
+{% set coreElements = {
+    'Craft.BaseElementSelectInput': 'craft-element-select-input',
+    'Craft.EntrySelectInput': 'craft-entry-select-input',
+    'Craft.AssetSelectInput': 'craft-asset-select-input',
+} -%}
+{% if jsClass and coreElements[jsClass] is not defined %}
+    {% set inputClass = inputClass ?? jsClass -%}
+{% endif %}
+{% set customElement = customElement ?? coreElements[jsClass] ?? 'craft-element-select-input' -%}
 {% set sources = sources ?? null -%}
 {% set condition = condition ?? null -%}
 {% set criteria = criteria ?? null -%}
@@ -22,7 +31,7 @@
 {% set disabled = (disabled ?? false) ? true : false %}
 {% set maintainHierarchy = maintainHierarchy ?? false %}
 {% set registerJs = registerJs ?? true %}
-{% set useCustomElement = useCustomElement ?? false %}
+{% set useCustomElement = useCustomElement ?? (registerJs and jsClass is not same as(false) and not disabled) %}
 {% set context = context ?? 'field' %}
 
 {% set allowAdd = allowAdd ?? true %}
@@ -151,9 +160,3 @@
         <craft-spinner class="spinner hidden"></craft-spinner>
     </div>
 {% endtag %}
-
-{% if not useCustomElement and not disabled and registerJs %}
-    {% js %}
-        new {{ jsClass }}({{ jsSettings|json_encode|raw }});
-    {% endjs %}
-{% endif %}
diff --git a/tests/Unit/Cp/FormFieldsTest.php b/tests/Unit/Cp/FormFieldsTest.php
index 37b1750a12c..205134fb3be 100644
--- a/tests/Unit/Cp/FormFieldsTest.php
+++ b/tests/Unit/Cp/FormFieldsTest.php
@@ -111,6 +111,38 @@ 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-element-select-input', null],
+        'entries' => ['Craft.EntrySelectInput', 'craft-entry-select-input', null],
+        'assets' => ['Craft.AssetSelectInput', 'craft-asset-select-input', null],
+        'plugin class' => ['MyPlugin.SelectInput', 'craft-element-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('checkboxFieldHtml', function () {

From 8a336dae0f94cb424133b5844ebdf92fdcd8ce60 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:12:23 -0600
Subject: [PATCH 12/41] Give the adapter its own jQuery element select inputs

Plugins subclass Craft.BaseElementSelectInput and Craft.AssetSelectInput and
use their jQuery members, so the adapter keeps copies of the current classes
for Craft.*. That frees core's classes to drop jQuery.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/modules/element-select-input/README.md |    4 +-
 yii2-adapter/resources/js/cp-compat.ts        |    2 +-
 .../asset-select-input.ts                     |  357 ++++
 .../base-element-select-input.test.ts         |    0
 .../base-element-select-input.ts              | 1774 +++++++++++++++++
 .../entry-select-input.ts                     |   80 +
 .../js/element-select-input/index.ts          |    5 +-
 .../element-select-input/tag-select-input.ts  |    0
 8 files changed, 2218 insertions(+), 4 deletions(-)
 create mode 100644 yii2-adapter/resources/js/element-select-input/asset-select-input.ts
 rename {resources/js/modules => yii2-adapter/resources/js}/element-select-input/base-element-select-input.test.ts (100%)
 create mode 100644 yii2-adapter/resources/js/element-select-input/base-element-select-input.ts
 create mode 100644 yii2-adapter/resources/js/element-select-input/entry-select-input.ts
 rename resources/js/modules/element-select-input/compat.ts => yii2-adapter/resources/js/element-select-input/index.ts (64%)
 rename {resources/js/modules => yii2-adapter/resources/js}/element-select-input/tag-select-input.ts (100%)

diff --git a/resources/js/modules/element-select-input/README.md b/resources/js/modules/element-select-input/README.md
index 2b1eaa4c489..9a925072787 100644
--- a/resources/js/modules/element-select-input/README.md
+++ b/resources/js/modules/element-select-input/README.md
@@ -10,4 +10,6 @@ existing plugin subclass escape hatch.
 core `jsClass` (`Craft.EntrySelectInput`, `Craft.AssetSelectInput`) picks the
 matching element; any other class name becomes `input-class`, which the Yii2
 adapter resolves to the plugin's class. The `Craft.*SelectInput` globals are
-registered by the adapter only (`compat.ts`).
+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/yii2-adapter/resources/js/cp-compat.ts b/yii2-adapter/resources/js/cp-compat.ts
index 58d450f52fd..daa648d8b7e 100644
--- a/yii2-adapter/resources/js/cp-compat.ts
+++ b/yii2-adapter/resources/js/cp-compat.ts
@@ -11,7 +11,7 @@ import '@/modules/customize-sources/compat';
 import '@/modules/data-table-sorter/compat';
 import '@/modules/editable-table/compat';
 import '@/modules/element-action-trigger/compat';
-import '@/modules/element-select-input/compat';
+import './element-select-input';
 import '@/modules/element-selector-modal/compat';
 import '@/modules/element-table-sorter/compat';
 import '@/modules/grouped-entry-type-manager/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..a94b76d9f78
--- /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 '@/common/craft/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/resources/js/modules/element-select-input/base-element-select-input.test.ts b/yii2-adapter/resources/js/element-select-input/base-element-select-input.test.ts
similarity index 100%
rename from resources/js/modules/element-select-input/base-element-select-input.test.ts
rename to yii2-adapter/resources/js/element-select-input/base-element-select-input.test.ts
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..fe69abdbae3
--- /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 '@/common/craft/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/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/resources/js/modules/element-select-input/compat.ts b/yii2-adapter/resources/js/element-select-input/index.ts
similarity index 64%
rename from resources/js/modules/element-select-input/compat.ts
rename to yii2-adapter/resources/js/element-select-input/index.ts
index 801b566cbaf..1f279e05239 100644
--- a/resources/js/modules/element-select-input/compat.ts
+++ b/yii2-adapter/resources/js/element-select-input/index.ts
@@ -1,10 +1,11 @@
-import {AssetSelectInput} from '@/modules/asset-select-input/asset-select-input';
+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';
 
-// Plugins boot and subclass these by name, e.g. `Craft.AssetSelectInput.extend()`.
+// The jQuery-based inputs plugins boot and subclass by name, e.g.
+// `Craft.AssetSelectInput.extend()`. Core uses its own classes.
 registerCraftGlobals({
   AssetSelectInput,
   BaseElementSelectInput,
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

From 3675c7c6978fcb3dabf5ee3b7d7e991c4a34ab41 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:25:39 -0600
Subject: [PATCH 13/41] Skip dashboard grid refreshes after it unmounts

A refresh queued before unmount ran against the destroyed grid and threw.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/modules/dashboard/useDashboard.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/modules/dashboard/useDashboard.ts b/resources/js/modules/dashboard/useDashboard.ts
index 6f6afb08867..3f3166d1a15 100644
--- a/resources/js/modules/dashboard/useDashboard.ts
+++ b/resources/js/modules/dashboard/useDashboard.ts
@@ -106,7 +106,8 @@ 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.setItems(
       Array.from(container.value!.children).filter((child) =>
@@ -114,7 +115,7 @@ export function useDashboard(props: {
       )
     );
     grid.refreshCols(true);
-    if (!grid.items.length) grid.container!.style.height = 'auto';
+    if (!grid.items.length) grid.container.style.height = 'auto';
   }
 
   function refreshTypes() {

From 568b40c9186a81bbe3b5532cf9035706c30ce514 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:29:48 -0600
Subject: [PATCH 14/41] Port core's element select inputs off jQuery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The base, entry and asset select inputs keep plain elements (container,
elementsContainer, elements…) and use native events: click for the Add
button, dblclick and a long press for editing, and craft-reorder for the
reorder buttons. The element markup helpers and file preview modal take plain
elements too, and the preview works with native selects. The adapter's copies
keep the jQuery versions for Craft.*.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/common/craft/element-markup.ts   |  144 +-
 .../asset-select-input/asset-select-input.ts  |  238 +--
 .../base-element-select-input.test.ts         |  126 ++
 .../base-element-select-input.ts              | 1717 ++++++++---------
 .../element-select-input.ce.ts                |   16 +-
 .../preview-file-modal.test.ts                |   28 +-
 .../preview-file-modal/preview-file-modal.ts  |   75 +-
 .../asset-select-input.ts                     |    2 +-
 .../base-element-select-input.ts              |    2 +-
 .../js/element-select-input/element-markup.ts |  118 ++
 10 files changed, 1237 insertions(+), 1229 deletions(-)
 create mode 100644 resources/js/modules/element-select-input/base-element-select-input.test.ts
 create mode 100644 yii2-adapter/resources/js/element-select-input/element-markup.ts

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/modules/asset-select-input/asset-select-input.ts b/resources/js/modules/asset-select-input/asset-select-input.ts
index dc6a55add7c..c06f358eebe 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,92 @@ 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 {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;
 
-  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 elementSelectSettings(): any {
-    return Object.assign(super.elementSelectSettings(), {
-      makeFocusable: true,
-    });
+  override elementSelectSettings(): Record<string, unknown> {
+    return {...super.elementSelectSettings(), makeFocusable: true};
   }
 
-  clearOpenPreviewTimeout(): void {
-    if (this.openPreviewTimeout) {
-      clearTimeout(this.openPreviewTimeout);
-      this.openPreviewTimeout = null;
+  /** Toggles the preview of `element`, or of the focused asset. */
+  openPreview(element?: HTMLElement): void {
+    if (PreviewFileModal.openInstance) {
+      PreviewFileModal.openInstance.hide();
+      return;
     }
-  }
 
-  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);
-      }
+    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);
 
     // The bar has no live region of its own, so progress is read out
     // periodically while an upload runs.
@@ -140,49 +95,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);
+    this.uploader = new Uploader(this.container, options);
 
-    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};
+    const params: Record<string, unknown> = {fieldId: this.settings.fieldId};
     if (this.settings.sourceElementId) {
       params.elementId = this.settings.sourceElementId;
     }
@@ -190,49 +152,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 +174,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 +223,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 +285,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/element-select-input/base-element-select-input.test.ts b/resources/js/modules/element-select-input/base-element-select-input.test.ts
new file mode 100644
index 00000000000..0104890b11d
--- /dev/null
+++ b/resources/js/modules/element-select-input/base-element-select-input.test.ts
@@ -0,0 +1,126 @@
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import {actionClient} from '@craftcms/ui/utilities/api/actionClient';
+import {BaseElementSelectInput} from './base-element-select-input';
+
+vi.mock('@/common/craft/icon-svg', () => ({
+  iconSvg: async () => document.createElement('svg'),
+}));
+
+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>`;
+}
+
+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,
+  });
+}
+
+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(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+it('reads its chips and hides Add once the limit is reached', () => {
+  const input = boot({limit: 2});
+
+  expect(input.getSelectedElementIds()).toEqual([1, 2]);
+  expect(addButton().classList.contains('hidden')).toBe(true);
+});
+
+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);
+
+  input.removeElement(input.getElementById(1)!);
+
+  expect(input.getSelectedElementIds()).toEqual([2]);
+  expect(postedIds()).toEqual(['2']);
+  expect(addButton().classList.contains('hidden')).toBe(false);
+  expect(change).toHaveBeenCalled();
+});
+
+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('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.showReplaceModal(input.getElementById(1)!);
+  await input.onModalSelect([{id: 5, siteId: 1}]);
+
+  expect(input.getSelectedElementIds()).toEqual([2, 5]);
+});
+
+it('moves a chip when its reorder button asks to', () => {
+  const input = boot();
+  const button = input
+    .getElementById(2)!
+    .querySelector('craft-reorder-button')!;
+
+  button.dispatchEvent(
+    new CustomEvent('craft-reorder', {detail: {direction: 'up'}, bubbles: true})
+  );
+
+  expect(input.getSelectedElementIds()).toEqual([2, 1]);
+  expect(postedIds()).toEqual(['2', '1']);
+});
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..6fb34649ddd 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,14 @@
 import {
   BACKSPACE_KEY,
   Base,
-  bod,
   CustomSelect,
   DELETE_KEY,
   DOWN_KEY,
   DragSort,
   firstFocusableElement,
+  getOffset,
   hasAttr,
-  isCtrlKeyPressed,
+  isFocusable,
   RETURN_KEY,
   Select,
   UP_KEY,
@@ -19,6 +19,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 +31,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 +66,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 +103,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 +114,6 @@ export interface BaseElementSelectInputSettings extends GarnishBaseSettings {
   canUpload?: boolean;
   describedBy?: string;
   sectionId?: number;
-  tagGroupId?: number | null;
   targetSiteId?: number;
   selectionLabel?: string;
 }
@@ -112,10 +122,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 +165,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 +180,40 @@ 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;
+  replacing: HTMLElement | null = null;
+  #ignoreSearchBlur = false;
+  #cleanups: Array<() => void> = [];
 
-  #handleShowElementEditor: ((ev: any) => void) | null = null;
-
-  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 +229,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 +250,33 @@ 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();
         }
       });
     }
 
+    // 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 +290,65 @@ 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.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 {
+    return this.container.querySelector<HTMLElement>('.spinner');
   }
 
   initElementSelect(): void {
@@ -396,12 +357,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 +371,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 +466,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 +479,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();
-    }
+    this.getNextLogicalFocusElement()?.focus();
   }
 
-  /** @deprecated */
-  focusLastRemoveBtn(): void {
-    this.focusLastActionBtn();
-  }
-
-  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 +577,101 @@ 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.#cleanups.push(
+          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;
+    }
 
-      // taphold is a jQuery synthetic event — must use jQuery .on().
-      if ($.isTouchCapable()) {
-        $elements.on('taphold', this.#handleShowElementEditor);
+    const moveForwardItem = actionMenu.querySelector('[data-move-forward]');
+    const moveBackwardItem = actionMenu.querySelector('[data-move-backward]');
+
+    // 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.#cleanups.push(() => observer.disconnect());
+  }
 
-    this.$elements = this.$elements.add($elements);
-    this.updateAddElementsBtn();
-    this.onAddElements();
-    this.onSortChange();
+  #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 +682,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 +691,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 +701,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 +716,50 @@ 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));
+  }
+
   /** 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 +769,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 +856,147 @@ 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));
+
+    // 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 +1035,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 +1054,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 +1069,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 +1101,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 +1122,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 +1135,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 +1167,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 +1184,402 @@ 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[] = [];
-
-    for (const elementInfo of elements) {
-      const $inputElement = this.createNewElement(elementInfo);
-      this.appendElement($inputElement);
-      this.addElements($inputElement);
-      elementInfo.$element = $inputElement;
+  async selectElements(elements: SelectedElement[]): Promise<void> {
+    const added: HTMLElement[] = [];
 
-      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);
-    }
-
-    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,
-    };
+    selectedElementIds.push(...elements.map((el) => el.id));
 
-    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);
 
+    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/element-select-input.ce.ts b/resources/js/modules/element-select-input/element-select-input.ce.ts
index df4cfdf0d22..b8b0bbd00f9 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
@@ -61,20 +61,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/preview-file-modal/preview-file-modal.test.ts b/resources/js/modules/preview-file-modal/preview-file-modal.test.ts
index 8cf8b4502f5..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(),
@@ -204,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();
@@ -235,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();
@@ -250,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();
@@ -265,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 () => {
@@ -298,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 91f6d59b075..6b258afe300 100644
--- a/resources/js/modules/preview-file-modal/preview-file-modal.ts
+++ b/resources/js/modules/preview-file-modal/preview-file-modal.ts
@@ -16,6 +16,8 @@ import {
   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;
@@ -169,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;
@@ -434,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();
     }
@@ -500,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/yii2-adapter/resources/js/element-select-input/asset-select-input.ts b/yii2-adapter/resources/js/element-select-input/asset-select-input.ts
index a94b76d9f78..0dbcbaabea9 100644
--- a/yii2-adapter/resources/js/element-select-input/asset-select-input.ts
+++ b/yii2-adapter/resources/js/element-select-input/asset-select-input.ts
@@ -14,7 +14,7 @@ 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';
+import {getElementInfo} from './element-markup';
 
 declare const Craft: any;
 declare const Garnish: any;
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
index fe69abdbae3..aa4f8f92d34 100644
--- 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
@@ -19,7 +19,7 @@ import {
   animateAll,
   getElementInfo,
   setElementSize,
-} from '@/common/craft/element-markup';
+} from './element-markup';
 import {announce} from '@/common/announcer';
 import {loadElementThumbs} from '@/modules/element-thumb-loader/globals';
 import {iconSvg} from '@/common/craft/icon-svg';
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);
+    }
+  });
+}

From 733ecb713697880de6e5ee66406a6b0284e3eaef Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:47:49 -0600
Subject: [PATCH 15/41] Stop core modules calling jQuery unconditionally

Field layout and nested element refreshes serialize the form natively, the
legacy element editor is looked up only when jQuery is present, element
editors read a chip's data attributes directly, and the asset mover's Undo
button listens for click.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../slideouts/create-element-editor.test.ts   | 10 ++--
 .../common/slideouts/create-element-editor.ts | 17 ++++---
 .../js/modules/asset-mover/asset-mover.ts     | 11 +++--
 .../js/modules/elements/html-nested-owner.ts  | 10 +++-
 .../modules/slideout/element-editor-params.ts | 47 ++++++++++++-------
 .../modules/ui/entry-field-layout-ui-host.ts  | 14 ++++--
 .../nested-elements-control-host.ts           |  3 +-
 7 files changed, 69 insertions(+), 43 deletions(-)

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/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/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/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/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]));
         }

From 756748d8411616670c35549394e0d71bc799b266 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 13:57:30 -0600
Subject: [PATCH 16/41] Drop jQuery from the inline scripts core templates emit

The disclosure menu items, the 2FA setup page and the entry type override
chip listen with addEventListener; the menu only reaches for the legacy
instance when jQuery is loaded.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../templates/_includes/disclosuremenu.twig   | 27 ++++++++++---------
 .../entry-type-select/selection-settings.twig | 14 ++++++++--
 resources/templates/_special/setup-2fa.twig   | 12 ++++-----
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index 2aacb75eee0..aa5695af13c 100644
--- a/resources/templates/_includes/disclosuremenu.twig
+++ b/resources/templates/_includes/disclosuremenu.twig
@@ -83,21 +83,24 @@
       {% 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 %}
+      item?.addEventListener('click', () => {
+        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);
+      });
+    })();
   {% endjs %}
 {% endmacro %}
 
diff --git a/resources/templates/_includes/forms/entry-type-select/selection-settings.twig b/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
index b7804bd2307..5b751ec5287 100644
--- a/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
+++ b/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
@@ -13,9 +13,19 @@
 
 {% 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;
+  chip?.addEventListener('dblclick', edit);
+  // A long press edits on touch screens
+  chip?.addEventListener('pointerdown', (ev) => {
+    if (ev.pointerType === 'touch') {
+      pressTimer = setTimeout(edit, 750);
+    }
   });
+  for (const type of ['pointerup', 'pointercancel', 'pointermove']) {
+    chip?.addEventListener(type, () => clearTimeout(pressTimer));
+  }
 })();
 {% endjs %}
 
diff --git a/resources/templates/_special/setup-2fa.twig b/resources/templates/_special/setup-2fa.twig
index f056b296eeb..00f2d7f90aa 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 %}

From eaf0b0191442ab9821bffb3b01a5377ad8d6a849 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 14:05:41 -0600
Subject: [PATCH 17/41] Stop core's CpAsset loading jQuery and Garnish

Core's control panel no longer needs them. The adapter's Craft.js asset brings
jQuery, Garnish, touch events and Velocity for plugins, and the legacy money
input depends on Garnish itself.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                              |  1 +
 src/View/LegacyAssets/CpAsset.php             |  4 ---
 src/View/LegacyAssets/MoneyAsset.php          |  1 +
 .../Http/Responses/CpScreenSlideoutTest.php   |  2 +-
 .../Integration/UtilityPageAssetsTest.php     | 14 ++++----
 tests/Unit/View/LegacyAssetsTest.php          | 32 +++++++++++++++++++
 .../src/View/LegacyAssets/CraftJsAsset.php    |  5 ++-
 7 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 tests/Unit/View/LegacyAssetsTest.php

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index f11acf0563c..78471d600be 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -836,6 +836,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - `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`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
+- 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`.
 - 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.ElementEditor` and `Craft.ElementEditorSlideout` are now provided by the Yii2 adapter. Core’s element editors, slideouts included, all use the Vue editor.
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/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..5cce3d5afec 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('window.Craft = Object.assign', 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/View/LegacyAssetsTest.php b/tests/Unit/View/LegacyAssetsTest.php
new file mode 100644
index 00000000000..6edaec93c68
--- /dev/null
+++ b/tests/Unit/View/LegacyAssetsTest.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\HtmlStack;
+use CraftCms\Cms\View\LegacyAssets\CpAsset;
+use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
+use CraftCms\Cms\View\LegacyAssets\MoneyAsset;
+
+function legacyAssetsHtml(string $asset): string
+{
+    app(InternalAssetRegistry::class)->register($asset);
+    $stack = app(HtmlStack::class);
+
+    return $stack->headHtml().$stack->bodyHtml();
+}
+
+it('loads the CP asset without jQuery or Garnish', function () {
+    $html = legacyAssetsHtml(CpAsset::class);
+
+    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 () {
+    $html = legacyAssetsHtml(MoneyAsset::class);
+
+    expect($html)->toContain('legacy/garnish/dist/garnish.js')
+        ->and(strpos($html, 'legacy/garnish/dist/garnish.js'))
+        ->toBeLessThan(strpos($html, 'legacy/money/dist/Money.js'));
+});
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,

From 9bd6ce983815a2f03f2afc0b666c76162c79af65 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 15:03:35 -0600
Subject: [PATCH 18/41] Expect relation fields to boot through their custom
 element

Categories fields no longer emit an inline script; their input boots from
the element select custom element.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../tests-laravel/Legacy/DeprecatedRelationFormTest.php     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php b/yii2-adapter/tests-laravel/Legacy/DeprecatedRelationFormTest.php
index 477ac1c066e..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,7 +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]\"")
-            ->and($payload->nodes[1]->control?->props['fragment']['bodyHtml'])->not->toBeEmpty()
+            // 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();
@@ -113,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,
@@ -130,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',
     ],
 ]);

From 8430ccb37b69f112c17ea388f9db05ac39f9bf2c Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 15:03:38 -0600
Subject: [PATCH 19/41] Render server menus as craft-action-menu

MenuHtml::disclosureMenu() builds a <craft-action-menu>, so core's menus no
longer need the jQuery disclosure menu plugin. Groups keep their headings,
the selected item is marked current, and statuses and info icons carry over.
The adapter binds a MenuHtml that keeps the legacy markup its jQuery code
and plugins rely on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                              |   1 +
 .../modules/slideout/slideout.browser.test.ts |  20 ++
 resources/js/modules/slideout/slideout.ts     |   9 +-
 .../templates/_includes/disclosuremenu.twig   | 114 +---------
 .../templates/_layouts/components/crumbs.twig |  24 +-
 src/Cp/Components/ActionMenu.php              |  73 +++++-
 src/Cp/Html/MenuHtml.php                      |  96 +++++++-
 tests/Unit/Cp/MenuHtmlTest.php                |  34 +++
 .../templates/_includes/disclosuremenu.twig   | 215 ++++++++++++++++++
 yii2-adapter/src/Cp/Html/LegacyMenuHtml.php   |  32 +++
 yii2-adapter/src/Yii2ServiceProvider.php      |   3 +
 11 files changed, 482 insertions(+), 139 deletions(-)
 create mode 100644 yii2-adapter/resources/templates/_includes/disclosuremenu.twig
 create mode 100644 yii2-adapter/src/Cp/Html/LegacyMenuHtml.php

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index 78471d600be..e97b692ec96 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -837,6 +837,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - `Craft.ui` and `Craft.EditableTable` are now provided by the Yii2 adapter.
 - `Craft.CpScreenSlideout`, `Craft.ElementActionTrigger`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
 - 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`.
+- 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.
 - 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.ElementEditor` and `Craft.ElementEditorSlideout` are now provided by the Yii2 adapter. Core’s element editors, slideouts included, all use the Vue editor.
diff --git a/resources/js/modules/slideout/slideout.browser.test.ts b/resources/js/modules/slideout/slideout.browser.test.ts
index e7ed43a36b6..5ff1a274bd3 100644
--- a/resources/js/modules/slideout/slideout.browser.test.ts
+++ b/resources/js/modules/slideout/slideout.browser.test.ts
@@ -35,3 +35,23 @@ it('opens around its contents and tears down without jQuery', () => {
   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 870057cafbc..5850702a6cc 100644
--- a/resources/js/modules/slideout/slideout.ts
+++ b/resources/js/modules/slideout/slideout.ts
@@ -499,9 +499,14 @@ export class Slideout extends Base<SlideoutSettings> implements StackedPanel {
 
       // 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<HTMLElement>(
             `[aria-controls="${disclosureId}"]`
diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index aa5695af13c..fe2b5cd075d 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 %}
@@ -103,109 +97,3 @@
     })();
   {% 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 %}
-{% 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/src/Cp/Components/ActionMenu.php b/src/Cp/Components/ActionMenu.php
index f271d2aca5e..6c71d6a4968 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,14 @@ 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,
+                    'items' => $this->toClientItems(
+                        $menuHtml->normalizeMenuItems($item['items'] ?? []),
+                        $menuHtml,
+                    ),
+                ]);
 
                 continue;
             }
@@ -322,6 +328,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,6 +400,10 @@ 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',
@@ -414,6 +427,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,6 +436,37 @@ 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',
+                // 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) {
+            $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
@@ -435,6 +480,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,12 +500,16 @@ protected function itemContentHtml(array $item): string
             ]);
         }
 
+        $infoHtml = isset($item['info'])
+            ? Html::tag('craft-info-icon', app(ContentHtml::class)->parseMarkdown(Html::encode($item['info'])))
+            : '';
+
         if ($secondaryHtml === '') {
-            return $labelHtml;
+            return $labelHtml.$infoHtml;
         }
 
         return Html::tag('span', $labelHtml.$secondaryHtml, [
             'class' => ['inline-flex', 'flex-col', 'items-start', 'gap-2xs'],
-        ]);
+        ]).$infoHtml;
     }
 }
diff --git a/src/Cp/Html/MenuHtml.php b/src/Cp/Html/MenuHtml.php
index 68024d3ad95..1dd71f9813d 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,53 @@ 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'));
+
+        $ariaLabel = $config['hiddenLabel'];
+
+        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']]);
+        }
+
+        $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/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 96656baaa21..02273af308b 100644
--- a/tests/Unit/Cp/MenuHtmlTest.php
+++ b/tests/Unit/Cp/MenuHtmlTest.php
@@ -23,3 +23,37 @@
         ->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']);
+});
diff --git a/yii2-adapter/resources/templates/_includes/disclosuremenu.twig b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
new file mode 100644
index 00000000000..bb8e54d5a0d
--- /dev/null
+++ b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
@@ -0,0 +1,215 @@
+{% 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') %}
+
+{% macro itemType(item) %}
+  {%- if item.type ?? false %}
+    {{- item.type }}
+  {%- elseif item.url ?? false %}
+    {{- 'link' }}
+  {%- elseif item.hr ?? false %}
+    {{- 'hr' }}
+  {%- elseif item.heading ?? item.items ?? false %}
+    {{- 'group' }}
+  {%- else %}
+    {{- 'button' }}
+  {%- endif %}
+{%- endmacro %}
+
+{% macro color(color) %}
+  {{- color is instance of ('CraftCms\\Cms\\Shared\\Enums\\Color') ? color.value : color -}}
+{% endmacro %}
+
+{% macro item(item, menuId) %}
+  {% set type = _self.itemType(item) %}
+  {% set id = item.id ?? "menu-item-#{random()}" %}
+  {% tag 'li' with {
+    class: {
+      hidden: item.hidden ?? false,
+    }|filter|keys,
+  }|merge(item.liAttributes ?? {}) %}
+    {% set selected = item.selected ?? false %}
+    {% tag (type == 'button' ? 'button' : 'a') with {
+      id: id,
+      class: {
+        'menu-item': true,
+        sel: selected,
+        error: item.destructive ?? false,
+        formsubmit: item.action ?? false,
+        disabled: item.disabled ?? false,
+      }|filter|keys,
+      href: type == 'button' ? null : url(item.url),
+      data: {
+        destructive: item.destructive ?? null,
+        action: item.action ?? null,
+        params: item.params ?? null,
+        confirm: item.confirm ?? null,
+        redirect: (item.redirect ?? false) ? item.redirect|hash : null,
+        'require-elevated-session': item.requireElevatedSession ?? false,
+        form: (item.action ?? false) ? 'false' : null,
+      }|filter,
+    }|merge(item.attributes ?? {}, recursive=true) %}
+      {%- apply spaceless %}
+        {% if item.icon ?? false %}
+          {{ tag('span', {
+            class: [
+              'icon',
+              _self.color(item.color ?? null),
+            ]|filter,
+            html: iconSvg(item.icon),
+          }) }}
+        {% endif %}
+        {% if item.status ?? false -%}
+          {{ statusIndicator(item.status) }}
+        {%- endif -%}
+        <span class="menu-item-label inline-flex flex-col items-start gap-2xs">
+          {{ item.label ?? item.html|raw }}
+          {% if item.description is defined %}
+            <span class="menu-item-description mt-2xs smalltext light">{{ item.description }}</span>
+          {% elseif item.handle is defined %}
+            <span class="menu-item-description mt-2xs smalltext light code">{{ item.handle }}</span>
+          {% endif %}
+        </span>
+        {% if selected %}
+          <span class="visually-hidden">, selected</span>
+        {% endif %}
+        {% if item.info is defined and item.info is not empty %}
+          <craft-info-icon>{{ item.info|e|cpmd }}</craft-info-icon>
+        {% endif %}
+      {% endapply -%}
+    {% endtag %}
+  {% endtag %}
+  {% js %}
+    (() => {
+      const item = document.getElementById('{{ id|namespaceInputId }}');
+      {% if type == 'link' %}
+      item?.addEventListener('keydown', (ev) => {
+        if (ev.key === ' ') {
+          ev.currentTarget.click();
+        }
+      });
+      {% endif %}
+      item?.addEventListener('click', () => {
+        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);
+      });
+    })();
+  {% endjs %}
+{% endmacro %}
+
+{% 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 = _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/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/Yii2ServiceProvider.php b/yii2-adapter/src/Yii2ServiceProvider.php
index 97f04db108e..f8fd0255759 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);

From fe3cb63b35746a5357f76888a1a31879a9ea1da9 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 3 Nov 2026 15:06:17 -0600
Subject: [PATCH 20/41] Move Craft.Tabs into the adapter

Only the adapter's legacy screens, slideouts and element editor create it;
core renders <craft-tabs>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-WIP.md                       | 2 +-
 resources/js/cp.ts                     | 1 -
 resources/js/legacy.ts                 | 1 -
 resources/js/modules/tabs/compat.ts    | 6 ++++++
 resources/js/modules/tabs/globals.ts   | 7 -------
 resources/js/modules/tabs/index.ts     | 1 -
 yii2-adapter/resources/js/cp-compat.ts | 1 +
 7 files changed, 8 insertions(+), 11 deletions(-)
 create mode 100644 resources/js/modules/tabs/compat.ts
 delete mode 100644 resources/js/modules/tabs/globals.ts

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index e97b692ec96..c4eec004d15 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -835,7 +835,7 @@ 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`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
+- `Craft.CpScreenSlideout`, `Craft.ElementActionTrigger`, `Craft.Tabs`, and `Craft.createElementEditor()` are now provided by the Yii2 adapter.
 - 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`.
 - 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.
 - 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.
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 1cc1d41da69..ce2643b44f3 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -44,7 +44,6 @@ 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/element-thumb-loader';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 4cccc39507f..5119baea4dc 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -58,7 +58,6 @@ 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/element-thumb-loader/index';
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/yii2-adapter/resources/js/cp-compat.ts b/yii2-adapter/resources/js/cp-compat.ts
index daa648d8b7e..67b793bc58c 100644
--- a/yii2-adapter/resources/js/cp-compat.ts
+++ b/yii2-adapter/resources/js/cp-compat.ts
@@ -21,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';

From df6151aff69e36cb5ee140bfe2bf35793de8e509 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 01:21:22 +0000
Subject: [PATCH 21/41] Make the adapter's FocalPointAsset register nothing

Core's FocalPointAsset and Craft.FocalPoint were removed, so the
deprecated adapter bundle referenced a class that no longer exists,
which failed PHPStan.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 CHANGELOG-WIP.md                                              | 1 +
 yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index c4eec004d15..671e3e95ac5 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -844,6 +844,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 - `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/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php b/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
index fcdc40455d3..7c1395cc728 100644
--- a/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
+++ b/yii2-adapter/legacy/web/assets/focalpoint/FocalPointAsset.php
@@ -8,16 +8,14 @@
 namespace craft\web\assets\focalpoint;
 
 use craft\web\AssetBundle;
-use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
 
 /**
  * Asset bundle for the Focal Point class.
- * @deprecated 6.0.0
+ * @deprecated 6.0.0 `Craft.FocalPoint` has been removed, so this registers nothing.
  */
 class FocalPointAsset extends AssetBundle
 {
     public function registerAssetFiles($view)
     {
-        app(InternalAssetRegistry::class)->register(\CraftCms\Cms\View\LegacyAssets\FocalPointAsset::class);
     }
 }

From ff284c115ae1ea3d8fa1a6c9be6bd0d4f01d366f Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:39:21 +0000
Subject: [PATCH 22/41] Port core's remaining inline $ scripts to the DOM

CpAsset no longer loads jQuery, so the Link field, the entry type
compatibility check, the range input and the relation field settings
threw on installs without the Yii2 adapter, stopping every inline
script after them. customSelect.twig's legacy menu only works with the
adapter, so it now returns early without jQuery.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../fieldtypes/elementfieldsettings.twig      | 29 +++++++---------
 .../_includes/forms/customSelect.twig         |  4 +++
 .../templates/_includes/forms/range.twig      | 19 ++++++-----
 src/Entry/Elements/Entry.php                  | 34 +++++++++----------
 src/Field/Link.php                            | 12 +++----
 5 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/resources/templates/_components/fieldtypes/elementfieldsettings.twig b/resources/templates/_components/fieldtypes/elementfieldsettings.twig
index 896996d2f9f..eb854ca931a 100644
--- a/resources/templates/_components/fieldtypes/elementfieldsettings.twig
+++ b/resources/templates/_components/fieldtypes/elementfieldsettings.twig
@@ -174,26 +174,25 @@
 {% if field.allowMultipleSources %}
 {% js %}
 (() => {
-  const $sourcesField = $('#{{ 'sources-field'|namespaceInputId }}');
-  const $inputs = $sourcesField.find('input');
-  const $searchField = $('#{{ 'show-search-input-field'|namespaceInputId }}');
+  const sourcesField = document.getElementById('{{ 'sources-field'|namespaceInputId }}');
+  const searchField = document.getElementById('{{ 'show-search-input-field'|namespaceInputId }}');
+  if (!sourcesField || !searchField) {
+    return;
+  }
 
   const updateSearchField = function() {
     let showSearchField = false;
-    if (!$sourcesField.is(':visible')) {
+    if (!sourcesField.getClientRects().length) {
       showSearchField = true;
     } else {
       let foundChecked = false;
-      for (let i = 0; i < $inputs.length; i++) {
-        const $input = $inputs.eq(i);
-        const val = $input.val();
-        const checked = $input.prop('checked');
-        if (val === '*') {
-          if (checked) {
+      for (const input of sourcesField.querySelectorAll('input')) {
+        if (input.value === '*') {
+          if (input.checked) {
             showSearchField = false;
             break;
           }
-        } else if (checked) {
+        } else if (input.checked) {
           if (foundChecked) {
             showSearchField = false;
             break;
@@ -204,14 +203,10 @@
       }
     }
 
-    if (showSearchField) {
-      $searchField.removeClass('hidden');
-    } else {
-      $searchField.addClass('hidden');
-    }
+    searchField.classList.toggle('hidden', !showSearchField);
   };
 
-  $inputs.on('change', () => {
+  sourcesField.addEventListener('change', () => {
     updateSearchField();
   });
 
diff --git a/resources/templates/_includes/forms/customSelect.twig b/resources/templates/_includes/forms/customSelect.twig
index 0a734cca73d..81b91cfec89 100644
--- a/resources/templates/_includes/forms/customSelect.twig
+++ b/resources/templates/_includes/forms/customSelect.twig
@@ -92,6 +92,10 @@
 {% if not disabled %}
   {% js %}
     (() => {
+      // jQuery comes with the Yii2 adapter
+      if (!window.jQuery) {
+        return;
+      }
       const $container = $('#{{ id|namespaceInputId }}');
       const $button = $('#{{ buttonId|namespaceInputId }}');
       const $buttonFlex = $button.find('.inline-flex:first');
diff --git a/resources/templates/_includes/forms/range.twig b/resources/templates/_includes/forms/range.twig
index 1fbd59971e4..406f7b68312 100644
--- a/resources/templates/_includes/forms/range.twig
+++ b/resources/templates/_includes/forms/range.twig
@@ -69,18 +69,21 @@
 
 {% js %}
   (() =>{
-    const $rangeInput = $('#{{ id|namespaceInputId }}');
-    const $numInput = $('#{{ numberInputId|namespaceInputId }}');
+    const rangeInput = document.getElementById('{{ id|namespaceInputId }}');
+    const numInput = document.getElementById('{{ numberInputId|namespaceInputId }}');
+    if (!rangeInput || !numInput) {
+      return;
+    }
 
-    $rangeInput.on('input', () => {
-      $numInput.val($rangeInput.val());
+    rangeInput.addEventListener('input', () => {
+      numInput.value = rangeInput.value;
     });
-    $numInput.on('input', () => {
-      $rangeInput.val($numInput.val());
+    numInput.addEventListener('input', () => {
+      rangeInput.value = numInput.value;
     });
-    $numInput.on('blur', () => {
+    numInput.addEventListener('blur', () => {
       // update the number input in case the value was out of bounds
-      $numInput.val($rangeInput.val());
+      numInput.value = rangeInput.value;
     });
   })();
 {% endjs %}
diff --git a/src/Entry/Elements/Entry.php b/src/Entry/Elements/Entry.php
index 6a4ca3af622..0fd122c76c7 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);

From bc77609f0d1122ca94381e29729074ba91f51636 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:39:21 +0000
Subject: [PATCH 23/41] Keep element select inputs through DOM moves

Moving a controller element (Matrix move up/down, drag-sorting)
destroyed and rebuilt its controller, duplicating chip actions and, on
Assets fields, the uploader. Teardown now waits a microtask and keeps
the controller when the element is back in the document.

A plugin's input-class is now waited for, for up to 10 seconds, so
markup inserted before the plugin's script boots once it loads.
AssetSelectInput now tears down its uploader and the controls it adds.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../web-components/ControllerElement.ts       | 16 +++++++---
 .../asset-select-input/asset-select-input.ts  | 19 ++++++++++++
 .../element-select-input.ce.test.ts           | 29 ++++++++++++++++++-
 .../element-select-input.ce.ts                | 29 +++++++++++++++++++
 4 files changed, 88 insertions(+), 5 deletions(-)

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/modules/asset-select-input/asset-select-input.ts b/resources/js/modules/asset-select-input/asset-select-input.ts
index c06f358eebe..eeb84c5a51c 100644
--- a/resources/js/modules/asset-select-input/asset-select-input.ts
+++ b/resources/js/modules/asset-select-input/asset-select-input.ts
@@ -27,6 +27,7 @@ export class AssetSelectInput extends BaseElementSelectInput {
   uploader: Uploader | null = null;
   progressBar: CraftProgressBar | null = null;
   #progressAnnouncer: IntervalManager | null = null;
+  #progressShade: HTMLElement | null = null;
 
   constructor(
     settings?: ConstructorParameters<typeof BaseElementSelectInput>[0]
@@ -60,6 +61,23 @@ export class AssetSelectInput extends BaseElementSelectInput {
     });
   }
 
+  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(): Record<string, unknown> {
     return {...super.elementSelectSettings(), makeFocusable: true};
   }
@@ -88,6 +106,7 @@ export class AssetSelectInput extends BaseElementSelectInput {
     this.progressBar.hidden = true;
     shade.append(this.progressBar);
     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.
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 80a50bf6988..cdd0f299c9a 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,36 @@ 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('boots a plugin input class whose script loads after the markup', async () => {
+  vi.stubGlobal('Craft', {initUiElements: vi.fn()});
+  const element = bootInput();
+
+  expect(receivedSettings).toBeUndefined();
+
+  window.Craft.PluginElementSelectInput = PluginElementSelectInput;
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+
+  expect(receivedSettings).toEqual({limit: 2, id: 'related-elements'});
+  expect(element.selectedIds).toEqual([7, 3]);
+});
+
 it('forwards the chip actions to the input, resolved by element ID', () => {
   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 b8b0bbd00f9..b13a29a6fe9 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
@@ -4,6 +4,8 @@ import {BaseElementSelectInput} from './base-element-select-input';
 import {EntrySelectInput} from './entry-select-input';
 import {initLegacyUi} from '@/common/craft/legacy-ui';
 
+const INPUT_CLASS_TIMEOUT = 10_000;
+
 type ElementSelectInputConstructor = new (
   settings?: ConstructorParameters<typeof BaseElementSelectInput>[0]
 ) => BaseElementSelectInput;
@@ -13,6 +15,33 @@ export default class CraftElementSelectInput extends ControllerElement<BaseEleme
   protected readonly defaultInputClass: ElementSelectInputConstructor =
     BaseElementSelectInput;
 
+  /**
+   * Markup inserted over AJAX (a new Matrix entry, a slideout) can connect
+   * before the script defining a plugin's `input-class` runs, so boot waits
+   * for the class, for up to {@link INPUT_CLASS_TIMEOUT} ms.
+   */
+  override connectedCallback(): void {
+    this.#bootOnceInputClassLoads(performance.now() + INPUT_CLASS_TIMEOUT);
+  }
+
+  #bootOnceInputClassLoads(deadline: number): void {
+    if (!this.isConnected) {
+      return;
+    }
+
+    const name = this.getAttribute('input-class');
+    if (
+      name &&
+      !(this.#globalInputClass(name) instanceof Function) &&
+      performance.now() < deadline
+    ) {
+      requestAnimationFrame(() => this.#bootOnceInputClassLoads(deadline));
+      return;
+    }
+
+    super.connectedCallback();
+  }
+
   protected create(): BaseElementSelectInput {
     initLegacyUi(this);
 

From 07d2aa83a91091e3bbc4b07bb7b6e89d5816bcd2 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:39:21 +0000
Subject: [PATCH 24/41] Render the menu when _includes/disclosuremenu is
 included directly

The template had become macros only, so plugin includes rendered
nothing. It now renders through disclosureMenu(), so the adapter's
legacy menu applies there too.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 resources/templates/_includes/disclosuremenu.twig |  9 +++++++++
 tests/Unit/Cp/MenuHtmlTest.php                    | 15 +++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index fe2b5cd075d..bbcff7c9a82 100644
--- a/resources/templates/_includes/disclosuremenu.twig
+++ b/resources/templates/_includes/disclosuremenu.twig
@@ -97,3 +97,12 @@
     })();
   {% endjs %}
 {% endmacro %}
+
+{# 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 %}
diff --git a/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 02273af308b..15254cbf5a0 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]);
@@ -57,3 +60,15 @@
 
     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');
+});

From 95f11adde548d80755eaa5cf79275f8ea9ecb02f Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:53:33 +0000
Subject: [PATCH 25/41] Measure chart tooltips after showing them

The tip was measured while hidden, so its width was 0: tips near the
right edge never flipped, and RTL tips covered their point. jQuery's
width() used to measure hidden elements by showing them briefly.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 resources/js/modules/chart/chart.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/modules/chart/chart.ts b/resources/js/modules/chart/chart.ts
index 30cbcb8a050..0bb40fc0a21 100644
--- a/resources/js/modules/chart/chart.ts
+++ b/resources/js/modules/chart/chart.ts
@@ -552,6 +552,9 @@ export class Area extends BaseChart {
         // 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;
@@ -577,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');

From e03663ce9b0482af3e3b20e18e017a7ca3d4d9c4 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:53:33 +0000
Subject: [PATCH 26/41] Route chip menu actions through their element select
 input

Edit and Open in Image Editor went to the global window listeners, so
Edit lost the input's prevalidate setting and an image saved as a new
asset no longer replaced its chip. The input now claims those events
for its own chips, as the jQuery version did.

Also drop replaced chips from the selection after a structured
selection, and use the field's own spinner rather than the search
input's.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../asset-select-input/asset-select-input.ts  | 26 ++++++++
 .../base-element-select-input.test.ts         | 29 +++++++++
 .../base-element-select-input.ts              | 64 ++++++++++++++++++-
 3 files changed, 118 insertions(+), 1 deletion(-)

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 eeb84c5a51c..a3aab33098e 100644
--- a/resources/js/modules/asset-select-input/asset-select-input.ts
+++ b/resources/js/modules/asset-select-input/asset-select-input.ts
@@ -3,6 +3,7 @@ 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 {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';
@@ -78,6 +79,31 @@ export class AssetSelectInput extends BaseElementSelectInput {
     super.destroy();
   }
 
+  /**
+   * 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;
+  }
+
   override elementSelectSettings(): Record<string, unknown> {
     return {...super.elementSelectSettings(), makeFocusable: true};
   }
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 0104890b11d..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
@@ -124,3 +124,32 @@ it('moves a chip when its reorder button asks to', () => {
   expect(input.getSelectedElementIds()).toEqual([2, 1]);
   expect(postedIds()).toEqual(['2', '1']);
 });
+
+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 editFrom = (trigger: Element) =>
+    window.dispatchEvent(
+      new CustomEvent('craft:edit-element', {detail: {trigger}})
+    );
+
+  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();
+
+  editFrom(addButton());
+  expect(globalListener).toHaveBeenCalledOnce();
+
+  input.destroy();
+  editFrom(document.querySelector('.chip-actions')!);
+  expect(openSlideout).toHaveBeenCalledOnce();
+  expect(globalListener).toHaveBeenCalledTimes(2);
+
+  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 6fb34649ddd..6eb54f5bd68 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
@@ -8,6 +8,7 @@ import {
   firstFocusableElement,
   getOffset,
   hasAttr,
+  isCtrlKeyPressed,
   isFocusable,
   RETURN_KEY,
   Select,
@@ -272,6 +273,17 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       });
     }
 
+    // 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.form
@@ -348,7 +360,10 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   }
 
   getSpinner(): HTMLElement | null {
-    return this.container.querySelector<HTMLElement>('.spinner');
+    // Not the search input's spinner, which is hidden once the limit is reached
+    return this.container.querySelector<HTMLElement>(
+      ':scope > .flex > .spinner'
+    );
   }
 
   initElementSelect(): void {
@@ -742,6 +757,51 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     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: HTMLElement,
@@ -1239,6 +1299,8 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     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.elements = [];
     this.resetElements();
 

From e7d2e70473a9333217364caec90f80efb4071b0d Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:53:33 +0000
Subject: [PATCH 27/41] Find the Link field without jQuery

LinkField was only reachable through jQuery's data cache, so LinkInput
and the element link types' script couldn't reach it without the
adapter. The script also read the element select input from that
cache, which the ported input no longer sets. LinkField.forContainer()
finds it now, and the script listens for the input's DOM events.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 resources/js/modules/link-field/link-field.ts | 10 +++++-
 resources/js/modules/link-field/link-input.ts | 17 +++++-----
 src/Field/LinkTypes/BaseElementLinkType.php   | 31 +++++++++++--------
 3 files changed, 34 insertions(+), 24 deletions(-)

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/src/Field/LinkTypes/BaseElementLinkType.php b/src/Field/LinkTypes/BaseElementLinkType.php
index bf78a4de199..0d8ac767147 100644
--- a/src/Field/LinkTypes/BaseElementLinkType.php
+++ b/src/Field/LinkTypes/BaseElementLinkType.php
@@ -167,21 +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 elementSelect = container.data('elementSelect');
+  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;
-  elementSelect.on('selectElements', (ev) => {
-    const element = ev.elements[0];
-    input.val(`{\${refHandle}:\${element.id}@\${element.siteId}:url}`);
-    field.updateLabel(element.label);
-    field.updateFilename(element.\$element.data('filename'));
+  container.addEventListener('selectElements', (ev) => {
+    const element = ev.detail.elements[0];
+    const chip = element.element ?? element.\$element?.[0];
+    input.value = `{\${refHandle}:\${element.id}@\${element.siteId}:url}`;
+    field()?.updateLabel(element.label);
+    field()?.updateFilename(chip?.dataset.filename ?? '');
   });
-  elementSelect.on('removeElements', () => {
-    input.val('');
-    field.updateLabel('');
-    field.updateFilename('');
+  container.addEventListener('removeElements', () => {
+    input.value = '';
+    field()?.updateLabel('');
+    field()?.updateFilename('');
   });
 })();
 JS, [

From 39cbced50346a58ca70de1ce8e1e21699160c0dd Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:53:33 +0000
Subject: [PATCH 28/41] Boot Screen.vue's fallback tabs without the adapter

Screen.vue read Tabs from window.Craft, which only the adapter sets now,
and read each tab's href through jQuery. It imports Tabs instead, and
Tabs events carry the tab element as well as $tab.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 resources/js/modules/tabs/tabs.ts    | 13 +++++---
 resources/js/pages/cp/Screen.test.ts | 46 ++++++++++++++++++++++++++++
 resources/js/pages/cp/Screen.vue     | 23 ++++++--------
 3 files changed, 63 insertions(+), 19 deletions(-)

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/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>

From 8e3229c484bab661875e5fca8e5d383a6300d713 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 05:53:33 +0000
Subject: [PATCH 29/41] Fix two accessibility problems in server-rendered menus

A menu item's info rendered a craft-info-icon inside the item's button,
nesting one control inside another; it's now a line of secondary text.
An icon-only menu button with no label is now named "Actions".

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 src/Cp/Components/ActionMenu.php | 17 +++++++++++------
 src/Cp/Html/MenuHtml.php         |  2 +-
 tests/Unit/Cp/MenuHtmlTest.php   | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/Cp/Components/ActionMenu.php b/src/Cp/Components/ActionMenu.php
index 6c71d6a4968..5ddf8543bfb 100644
--- a/src/Cp/Components/ActionMenu.php
+++ b/src/Cp/Components/ActionMenu.php
@@ -469,7 +469,7 @@ protected function groupHtml(array $group): string
 
     /**
      * 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
@@ -500,16 +500,21 @@ protected function itemContentHtml(array $item): string
             ]);
         }
 
-        $infoHtml = isset($item['info'])
-            ? Html::tag('craft-info-icon', app(ContentHtml::class)->parseMarkdown(Html::encode($item['info'])))
-            : '';
+        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.$infoHtml;
+            return $labelHtml;
         }
 
         return Html::tag('span', $labelHtml.$secondaryHtml, [
             'class' => ['inline-flex', 'flex-col', 'items-start', 'gap-2xs'],
-        ]).$infoHtml;
+        ]);
     }
 }
diff --git a/src/Cp/Html/MenuHtml.php b/src/Cp/Html/MenuHtml.php
index 1dd71f9813d..97f1c970da6 100644
--- a/src/Cp/Html/MenuHtml.php
+++ b/src/Cp/Html/MenuHtml.php
@@ -131,7 +131,7 @@ private function menuButtonHtml(array $config): string
         $contentHtml = trim($labelHtml.$buttonLabelHtml);
         $iconOnly = $contentHtml === '' || ($labelHtml === '' && str_contains($buttonLabelHtml, 'craft-icon'));
 
-        $ariaLabel = $config['hiddenLabel'];
+        $ariaLabel = $config['hiddenLabel'] ?? ($iconOnly ? t('Actions') : null);
 
         if ($contentHtml === '') {
             $contentHtml = Html::tag('craft-icon', '', ['name' => 'ellipsis']);
diff --git a/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 15254cbf5a0..184a56b20d2 100644
--- a/tests/Unit/Cp/MenuHtmlTest.php
+++ b/tests/Unit/Cp/MenuHtmlTest.php
@@ -72,3 +72,19 @@
         ->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');
+});

From 7079437e97923e2a5e1034ef4aa387b7de3884e8 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:05:55 +0000
Subject: [PATCH 30/41] Tidy server-rendered menus

Hidden menu groups now hide their heading too, and a menu button's
spinner is labelled "Loading" again. The adapter's legacy menu template
imports the item macros from core's instead of keeping a copy; its
markup is unchanged.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 src/Cp/Components/ActionMenu.php              |   2 +
 src/Cp/Html/MenuHtml.php                      |   5 +-
 tests/Unit/Cp/MenuHtmlTest.php                |  11 ++
 .../templates/_includes/disclosuremenu.twig   | 105 +-----------------
 4 files changed, 22 insertions(+), 101 deletions(-)

diff --git a/src/Cp/Components/ActionMenu.php b/src/Cp/Components/ActionMenu.php
index 5ddf8543bfb..111d0703737 100644
--- a/src/Cp/Components/ActionMenu.php
+++ b/src/Cp/Components/ActionMenu.php
@@ -301,6 +301,7 @@ protected function toClientItems(array $items, MenuHtml $menuHtml): array
                 $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,
@@ -450,6 +451,7 @@ protected function groupHtml(array $group): string
             $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)',
diff --git a/src/Cp/Html/MenuHtml.php b/src/Cp/Html/MenuHtml.php
index 97f1c970da6..500003416ee 100644
--- a/src/Cp/Html/MenuHtml.php
+++ b/src/Cp/Html/MenuHtml.php
@@ -142,7 +142,10 @@ private function menuButtonHtml(array $config): string
         }
 
         if ($config['buttonSpinner'] ?? false) {
-            $contentHtml .= Html::tag('craft-spinner', '', ['class' => ['spinner', 'hidden']]);
+            $contentHtml .= Html::tag('craft-spinner', '', [
+                'class' => ['spinner', 'hidden'],
+                'label' => t('Loading'),
+            ]);
         }
 
         $buttonAttributes = $config['buttonAttributes'];
diff --git a/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 184a56b20d2..53abcb8ef26 100644
--- a/tests/Unit/Cp/MenuHtmlTest.php
+++ b/tests/Unit/Cp/MenuHtmlTest.php
@@ -88,3 +88,14 @@
         ->and($html)->not->toContain('<script>')
         ->and($html)->toContain('Read the docs');
 });
+
+it('hides the heading of a hidden group', function () {
+    $html = app(MenuHtml::class)->disclosureMenu([
+        ['label' => 'Visible'],
+        ['heading' => 'Other sites', 'hidden' => true, 'items' => [
+            ['label' => 'Omitted', 'hidden' => true],
+        ]],
+    ]);
+
+    expect($html)->toMatch('/<div class="action-menu__heading"[^>]* hidden[ >]/');
+});
diff --git a/yii2-adapter/resources/templates/_includes/disclosuremenu.twig b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
index bb8e54d5a0d..eb1523a940b 100644
--- a/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
+++ b/yii2-adapter/resources/templates/_includes/disclosuremenu.twig
@@ -6,103 +6,8 @@
 
 {% set hasSelected = items|map(i => (i.items ?? [i]))|flatten(1)|contains('selected') %}
 
-{% macro itemType(item) %}
-  {%- if item.type ?? false %}
-    {{- item.type }}
-  {%- elseif item.url ?? false %}
-    {{- 'link' }}
-  {%- elseif item.hr ?? false %}
-    {{- 'hr' }}
-  {%- elseif item.heading ?? item.items ?? false %}
-    {{- 'group' }}
-  {%- else %}
-    {{- 'button' }}
-  {%- endif %}
-{%- endmacro %}
-
-{% macro color(color) %}
-  {{- color is instance of ('CraftCms\\Cms\\Shared\\Enums\\Color') ? color.value : color -}}
-{% endmacro %}
-
-{% macro item(item, menuId) %}
-  {% set type = _self.itemType(item) %}
-  {% set id = item.id ?? "menu-item-#{random()}" %}
-  {% tag 'li' with {
-    class: {
-      hidden: item.hidden ?? false,
-    }|filter|keys,
-  }|merge(item.liAttributes ?? {}) %}
-    {% set selected = item.selected ?? false %}
-    {% tag (type == 'button' ? 'button' : 'a') with {
-      id: id,
-      class: {
-        'menu-item': true,
-        sel: selected,
-        error: item.destructive ?? false,
-        formsubmit: item.action ?? false,
-        disabled: item.disabled ?? false,
-      }|filter|keys,
-      href: type == 'button' ? null : url(item.url),
-      data: {
-        destructive: item.destructive ?? null,
-        action: item.action ?? null,
-        params: item.params ?? null,
-        confirm: item.confirm ?? null,
-        redirect: (item.redirect ?? false) ? item.redirect|hash : null,
-        'require-elevated-session': item.requireElevatedSession ?? false,
-        form: (item.action ?? false) ? 'false' : null,
-      }|filter,
-    }|merge(item.attributes ?? {}, recursive=true) %}
-      {%- apply spaceless %}
-        {% if item.icon ?? false %}
-          {{ tag('span', {
-            class: [
-              'icon',
-              _self.color(item.color ?? null),
-            ]|filter,
-            html: iconSvg(item.icon),
-          }) }}
-        {% endif %}
-        {% if item.status ?? false -%}
-          {{ statusIndicator(item.status) }}
-        {%- endif -%}
-        <span class="menu-item-label inline-flex flex-col items-start gap-2xs">
-          {{ item.label ?? item.html|raw }}
-          {% if item.description is defined %}
-            <span class="menu-item-description mt-2xs smalltext light">{{ item.description }}</span>
-          {% elseif item.handle is defined %}
-            <span class="menu-item-description mt-2xs smalltext light code">{{ item.handle }}</span>
-          {% endif %}
-        </span>
-        {% if selected %}
-          <span class="visually-hidden">, selected</span>
-        {% endif %}
-        {% if item.info is defined and item.info is not empty %}
-          <craft-info-icon>{{ item.info|e|cpmd }}</craft-info-icon>
-        {% endif %}
-      {% endapply -%}
-    {% endtag %}
-  {% endtag %}
-  {% js %}
-    (() => {
-      const item = document.getElementById('{{ id|namespaceInputId }}');
-      {% if type == 'link' %}
-      item?.addEventListener('keydown', (ev) => {
-        if (ev.key === ' ') {
-          ev.currentTarget.click();
-        }
-      });
-      {% endif %}
-      item?.addEventListener('click', () => {
-        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);
-      });
-    })();
-  {% endjs %}
-{% endmacro %}
+{# 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 }}
@@ -159,7 +64,7 @@
     {% set ulStarted = false %}
     {% for item in items %}
       {% set headingTag = item.headingTag ?? 'h3' %}
-      {% set type = _self.itemType(item) %}
+      {% set type = menuMacros.itemType(item) %}
       {% if type in ['hr', 'group'] %}
         {% if ulStarted %}
           {{ '</ul>'|raw }}
@@ -193,7 +98,7 @@
               }|filter|keys,
             }|merge(item.listAttributes ?? {}, recursive=true) %}
               {% for groupItem in item.items %}
-                {{ _self.item(groupItem, id) }}
+                {{ menuMacros.item(groupItem, id) }}
               {% endfor %}
             {% endtag %}
           {% endtag %}
@@ -207,7 +112,7 @@
           {% endif %}
           {% set ulStarted = true %}
         {% endif %}
-        {{ _self.item(item, id) }}
+        {{ menuMacros.item(item, id) }}
       {% endif %}
     {% endfor %}
     {% if ulStarted %}{{ '</ul>'|raw }}{% endif %}

From 6a5a945e94aa73027e314f8b15cb15a1c4849df8 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:05:55 +0000
Subject: [PATCH 31/41] Load jQuery ahead of Inputmask

InputmaskAsset only got jQuery because MoneyAsset loaded Garnish first.
Also inline LegacyAssetsTest's global helper, and have
CpScreenSlideoutTest check for a CpAsset file rather than markup every
page has.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 src/View/LegacyAssets/InputmaskAsset.php      |  4 +++-
 .../Http/Responses/CpScreenSlideoutTest.php   |  2 +-
 tests/Unit/View/LegacyAssetsTest.php          | 24 +++++++++++--------
 3 files changed, 18 insertions(+), 12 deletions(-)

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/tests/Feature/Http/Responses/CpScreenSlideoutTest.php b/tests/Feature/Http/Responses/CpScreenSlideoutTest.php
index 5cce3d5afec..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('window.Craft = Object.assign', false)
+        ->assertSee('/legacy/animationblocker/dist/AnimationBlocker.js', false)
         ->assertInertia(fn (AssertableInertia $page) => $page
             ->missing('headHtml')
             ->missing('bodyHtml'));
diff --git a/tests/Unit/View/LegacyAssetsTest.php b/tests/Unit/View/LegacyAssetsTest.php
index 6edaec93c68..1edebdafdf8 100644
--- a/tests/Unit/View/LegacyAssetsTest.php
+++ b/tests/Unit/View/LegacyAssetsTest.php
@@ -4,19 +4,13 @@
 
 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;
 
-function legacyAssetsHtml(string $asset): string
-{
-    app(InternalAssetRegistry::class)->register($asset);
-    $stack = app(HtmlStack::class);
-
-    return $stack->headHtml().$stack->bodyHtml();
-}
-
 it('loads the CP asset without jQuery or Garnish', function () {
-    $html = legacyAssetsHtml(CpAsset::class);
+    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')
@@ -24,9 +18,19 @@ function legacyAssetsHtml(string $asset): string
 });
 
 it('loads Garnish ahead of the legacy money input', function () {
-    $html = legacyAssetsHtml(MoneyAsset::class);
+    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'));
+});

From 6d3e61eb82d5fd4239a8fbbd72cada31f5800d27 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:05:55 +0000
Subject: [PATCH 32/41] Release element select chips' listeners when they're
 removed

Each chip's long-press and action menu observer stayed registered until
the input was destroyed. The entry type chip's long press now also
survives small finger movements, as taphold did.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../base-element-select-input.ts              | 25 +++++++++++++++++--
 .../entry-type-select/selection-settings.twig | 17 ++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

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 6eb54f5bd68..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
@@ -206,6 +206,8 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
   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?: Partial<BaseElementSelectInputSettings>) {
     super();
@@ -306,6 +308,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       cleanup();
     }
     this.#cleanups = [];
+    this.#cleanUpChips([...this.#chipCleanups.keys()]);
 
     this.elementSort?.destroy();
     this.elementSort = null;
@@ -597,7 +600,8 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
 
       if (this.settings.editable) {
         this.addListener(element, 'dblclick', () => this.#editElement(element));
-        this.#cleanups.push(
+        this.#onChipCleanup(
+          element,
           onLongPress(
             element,
             (ev) => {
@@ -672,7 +676,22 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
       attributes: true,
       attributeFilter: ['opened'],
     });
-    this.#cleanups.push(() => observer.disconnect());
+    this.#onChipCleanup(element, () => observer.disconnect());
+  }
+
+  #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 {
@@ -943,6 +962,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
     }
 
     this.elements = this.elements.filter((el) => !removing.includes(el));
+    this.#cleanUpChips(removing);
 
     // Removing a relation makes it selectable again
     this.updateDisabledElementsInModal();
@@ -1301,6 +1321,7 @@ export class BaseElementSelectInput extends Base<BaseElementSelectInputSettings>
 
     // 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();
 
diff --git a/resources/templates/_includes/forms/entry-type-select/selection-settings.twig b/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
index 5b751ec5287..6eb079424bc 100644
--- a/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
+++ b/resources/templates/_includes/forms/entry-type-select/selection-settings.twig
@@ -16,15 +16,26 @@
   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
+  // 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);
     }
   });
-  for (const type of ['pointerup', 'pointercancel', 'pointermove']) {
-    chip?.addEventListener(type, () => clearTimeout(pressTimer));
+  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 %}

From c1da2e2855f7d43aa22fe9b60f1df7ac8c5e2b03 Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:05:55 +0000
Subject: [PATCH 33/41] Update docs for the ported slideout and preview modal

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../js/modules/preview-file-modal/preview-file-modal.ts   | 4 ++--
 resources/js/modules/slideout/README.md                   | 8 ++++++--
 resources/js/modules/slideout/element-editor-slideout.ts  | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

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 6b258afe300..dfd7bb42e68 100644
--- a/resources/js/modules/preview-file-modal/preview-file-modal.ts
+++ b/resources/js/modules/preview-file-modal/preview-file-modal.ts
@@ -55,8 +55,8 @@ const EMPTY_CLASSES = 'zilch flex items-center justify-center';
  *
  * Preview templates reach the open preview through
  * `Craft.PreviewFileModal.openInstance`: `container` is the element holding
- * the preview HTML (`$container` wraps it in jQuery when that's loaded), and `resizePreviewImage()` fits an
- * image preview to the viewport once it has loaded. Top-level
+ * 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.
  */
diff --git a/resources/js/modules/slideout/README.md b/resources/js/modules/slideout/README.md
index 059c42a7155..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},
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));

From e9934db9e75f3fde231df9b675ffe4d066620d5d Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:05:55 +0000
Subject: [PATCH 34/41] Note plugin-facing jQuery, menu, grid, and tab changes
 in the changelog

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 CHANGELOG-WIP.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index 671e3e95ac5..b53be910d19 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -835,11 +835,11 @@ 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.
-- 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`.
-- 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.
+- `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.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.

From a6c576571f86e5ab114fca86fbd375eddb22cd3b Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:38:31 +0000
Subject: [PATCH 35/41] Port the remaining core form scripts off jQuery

The checkbox group's custom options, a custom radio's text input, and
the Number field's input filter still called $ and threw on installs
without the Yii2 adapter, stopping every inline script after them. The
Number field also relied on the adapter's Craft.filterNumberInputVal().

Legacy menu items hide their menu on Garnish's activate event again
when it's available, since Enter and Space don't fire a click there.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../templates/_includes/disclosuremenu.twig   | 11 +++-
 src/Cp/Components/CheckboxGroup.php           | 59 +++++++++++--------
 src/Cp/FormFields.php                         | 12 ++--
 src/Field/Number.php                          | 24 ++++++--
 4 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index bbcff7c9a82..b1d4b62dee4 100644
--- a/resources/templates/_includes/disclosuremenu.twig
+++ b/resources/templates/_includes/disclosuremenu.twig
@@ -87,13 +87,20 @@
         }
       });
       {% endif %}
-      item?.addEventListener('click', () => {
+      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 %}
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 ea6278a8334..b14b784db55 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -543,11 +543,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/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;

From 70b5419235a12bf5453a9b534d1cf1e17f62190d Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 06:38:31 +0000
Subject: [PATCH 36/41] Hide all of a hidden menu group, and name only
 icon-only buttons

A hidden group hid only its heading, leaving its members operable.
A menu button with an icon and text was treated as icon-only and named
"Actions", hiding its visible label.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 src/Cp/Components/ActionMenu.php |  5 +++++
 src/Cp/Html/MenuHtml.php         |  6 +++++-
 tests/Unit/Cp/MenuHtmlTest.php   | 18 ++++++++++++++----
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/Cp/Components/ActionMenu.php b/src/Cp/Components/ActionMenu.php
index 111d0703737..cf70d4e4d10 100644
--- a/src/Cp/Components/ActionMenu.php
+++ b/src/Cp/Components/ActionMenu.php
@@ -408,6 +408,7 @@ protected function itemHtml(array $item): string
         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()`).
@@ -463,6 +464,10 @@ protected function groupHtml(array $group): string
         }
 
         foreach ($group['items'] ?? [] as $item) {
+            // A hidden group hides everything in it
+            if ($group['hidden'] ?? false) {
+                $item['hidden'] = true;
+            }
             $html .= $this->itemHtml($item);
         }
 
diff --git a/src/Cp/Html/MenuHtml.php b/src/Cp/Html/MenuHtml.php
index 500003416ee..5a3a6bf1ec8 100644
--- a/src/Cp/Html/MenuHtml.php
+++ b/src/Cp/Html/MenuHtml.php
@@ -129,7 +129,11 @@ private function menuButtonHtml(array $config): string
             default => '',
         };
         $contentHtml = trim($labelHtml.$buttonLabelHtml);
-        $iconOnly = $contentHtml === '' || ($labelHtml === '' && str_contains($buttonLabelHtml, 'craft-icon'));
+        $iconOnly = $contentHtml === '' || (
+            $labelHtml === '' &&
+            str_contains($buttonLabelHtml, 'craft-icon') &&
+            trim(strip_tags($buttonLabelHtml)) === ''
+        );
 
         $ariaLabel = $config['hiddenLabel'] ?? ($iconOnly ? t('Actions') : null);
 
diff --git a/tests/Unit/Cp/MenuHtmlTest.php b/tests/Unit/Cp/MenuHtmlTest.php
index 53abcb8ef26..ebf7babdfed 100644
--- a/tests/Unit/Cp/MenuHtmlTest.php
+++ b/tests/Unit/Cp/MenuHtmlTest.php
@@ -89,13 +89,23 @@
         ->and($html)->toContain('Read the docs');
 });
 
-it('hides the heading of a hidden group', function () {
+it('hides a hidden group along with everything in it', function () {
     $html = app(MenuHtml::class)->disclosureMenu([
-        ['label' => 'Visible'],
+        ['label' => 'Visible', 'id' => 'visible'],
         ['heading' => 'Other sites', 'hidden' => true, 'items' => [
-            ['label' => 'Omitted', 'hidden' => true],
+            ['label' => 'Omitted', 'id' => 'omitted'],
         ]],
     ]);
 
-    expect($html)->toMatch('/<div class="action-menu__heading"[^>]* hidden[ >]/');
+    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]);
 });

From 36809dd86102d69ae114a481a5c37803b6c78efd Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 12:02:01 +0000
Subject: [PATCH 37/41] Keep spaces in CP modal submissions

serializeFormInputs() encodes spaces as +, which findDeltaData() read as
a literal plus, so "Hello world" was saved as "Hello+world". jQuery's
serialize() used %20, which the modal now uses again.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 resources/js/modules/cp-modal/cp-modal.test.ts | 15 +++++++++++++++
 resources/js/modules/cp-modal/cp-modal.ts      |  4 +++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/resources/js/modules/cp-modal/cp-modal.test.ts b/resources/js/modules/cp-modal/cp-modal.test.ts
index 6363d29022d..c60fdf6e000 100644
--- a/resources/js/modules/cp-modal/cp-modal.test.ts
+++ b/resources/js/modules/cp-modal/cp-modal.test.ts
@@ -98,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 6f394ec0452..99926ef394c 100644
--- a/resources/js/modules/cp-modal/cp-modal.ts
+++ b/resources/js/modules/cp-modal/cp-modal.ts
@@ -439,9 +439,11 @@ export class CpModal extends Base {
   /** 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);
+      : serializeFormInputs(this.#container).replaceAll('+', '%20');
   }
 
   isDirty(): boolean {

From d71607bc16611f61e3ad8eae033d96ee6e0ca04a Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 14:08:54 +0000
Subject: [PATCH 38/41] Run scripts nested in appended HTML

appendElementHtml() recreated only top-level scripts, so a script inside a
wrapper element was cloned as already started and never ran. jQuery's .html()
ran them, so modal, file preview and element deletion content that wraps its
init scripts stopped working when those moved off jQuery.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 packages/craftcms-ui/src/utilities/dom.ts     | 12 +++++++++-
 .../utils/appendElementHtml.browser.test.ts   | 24 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/common/utils/appendElementHtml.browser.test.ts

diff --git a/packages/craftcms-ui/src/utilities/dom.ts b/packages/craftcms-ui/src/utilities/dom.ts
index 970b348b2ca..4f894dfa8ac 100644
--- a/packages/craftcms-ui/src/utilities/dom.ts
+++ b/packages/craftcms-ui/src/utilities/dom.ts
@@ -106,7 +106,17 @@ export async function appendElementHtml(
 
 function cloneNode(source: Node): Node {
   if (!(source instanceof HTMLScriptElement)) {
-    return source.cloneNode(true);
+    const node = source.cloneNode(true);
+
+    // Scripts nested in a wrapper clone as already started, so they'd never
+    // run. Recreate them, as jQuery's `.html()` did.
+    if (node instanceof Element) {
+      for (const script of node.querySelectorAll('script')) {
+        script.replaceWith(cloneNode(script));
+      }
+    }
+
+    return node;
   }
 
   const script = document.createElement('script');
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..5a35190e9b8
--- /dev/null
+++ b/resources/js/common/utils/appendElementHtml.browser.test.ts
@@ -0,0 +1,24 @@
+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']);
+});

From e0e1cd7f0fb84b863972598810b56c07f26fb47e Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 15:07:54 +0000
Subject: [PATCH 39/41] Load nested scripts in order before appendElementHtml()
 resolves

Recreating nested scripts all at once let an inline init script run before an
external library ahead of it had loaded, and let the promise resolve before
that load finished. Activate them one at a time, awaiting each external
script through the same path as top-level ones, so they run in order and
rejectOnError covers their failures.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 packages/craftcms-ui/src/utilities/dom.ts     | 36 +++++++++++++------
 .../utils/appendElementHtml.browser.test.ts   | 22 ++++++++++++
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/packages/craftcms-ui/src/utilities/dom.ts b/packages/craftcms-ui/src/utilities/dom.ts
index 4f894dfa8ac..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,19 +105,34 @@ export async function appendElementHtml(
   }
 }
 
-function cloneNode(source: Node): Node {
-  if (!(source instanceof HTMLScriptElement)) {
-    const node = source.cloneNode(true);
+/**
+ * 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;
+  }
 
-    // Scripts nested in a wrapper clone as already started, so they'd never
-    // run. Recreate them, as jQuery's `.html()` did.
-    if (node instanceof Element) {
-      for (const script of node.querySelectorAll('script')) {
-        script.replaceWith(cloneNode(script));
-      }
+  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);
     }
+  }
+}
 
-    return node;
+function cloneNode(source: Node): Node {
+  if (!(source instanceof HTMLScriptElement)) {
+    return source.cloneNode(true);
   }
 
   const script = document.createElement('script');
diff --git a/resources/js/common/utils/appendElementHtml.browser.test.ts b/resources/js/common/utils/appendElementHtml.browser.test.ts
index 5a35190e9b8..8943c0e8fca 100644
--- a/resources/js/common/utils/appendElementHtml.browser.test.ts
+++ b/resources/js/common/utils/appendElementHtml.browser.test.ts
@@ -22,3 +22,25 @@ it('runs scripts nested in wrapper elements, like jQuery .html() did', async ()
 
   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();
+});

From e45f74d81db07393b036579e7e86707d7a7e507d Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 15:29:14 +0000
Subject: [PATCH 40/41] Strip IDs from grouped action menu items in UI payloads

Groups now keep their items, which get random IDs. Only top-level IDs were
removed, so an unchanged menu's payload differed on every render and
ActionList.vue recreated its grouped items.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 src/Ui/Nodes/ActionMenu.php          | 20 ++++++++++++++++----
 tests/Unit/Ui/ActionMenuNodeTest.php | 13 +++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

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/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]],

From 5177d21280ce1dded3f577a376f8ae650db4e72a Mon Sep 17 00:00:00 2001
From: Brandon Kelly <brandon@pixelandtonic.com>
Date: Wed, 4 Nov 2026 15:29:14 +0000
Subject: [PATCH 41/41] Initialize deletion blockers once their details are in

The details markup was appended without waiting, so initLegacyUi() could run
before controls after an external script were added, and the response's body
scripts could run before those scripts loaded.

Amp-Thread-ID: https://ampcode.com/threads/T-01a1a41f-35f1-75f6-a070-f628cc4e7276
Co-authored-by: Amp <amp@ampcode.com>
---
 .../element-deletion-manager.test.ts          | 30 +++++++++++++++++++
 .../element-deletion-manager.ts               |  9 ++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

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
index bbf29e01be6..c171bcf38dc 100644
--- a/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.test.ts
@@ -1,7 +1,10 @@
 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();
@@ -56,3 +59,30 @@ it('lists the blockers and resolves one from its action', async () => {
   ).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 05d2ee82790..f9d43b7d54f 100644
--- a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
+++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts
@@ -86,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);
   }
@@ -265,6 +267,8 @@ class Blocker extends Base {
   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();
@@ -277,6 +281,7 @@ 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)}`;
     const container = document.createElement('div');
@@ -309,7 +314,7 @@ class Blocker extends Base {
       details.className = 'edm-details';
       details.hidden = true;
       container.append(details);
-      void appendElementHtml(this.data.details, details);
+      detailsAppended = appendElementHtml(this.data.details, details);
 
       const setExpanded = (expanded: boolean): void => {
         const rtl = getComputedStyle(toggle).direction === 'rtl';
@@ -437,7 +442,7 @@ class Blocker extends Base {
       }
     }
 
-    initLegacyUi(container);
+    this.ready = detailsAppended.then(() => initLegacyUi(container));
   }
 
   async resolve(message: any = null): Promise<void> {