diff --git a/.github/workflows/js-ci.yml b/.github/workflows/js-ci.yml
index 63b56aedf76..9dd5b60ac99 100644
--- a/.github/workflows/js-ci.yml
+++ b/.github/workflows/js-ci.yml
@@ -86,6 +86,13 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm run build:ui
 
+      # `build:cp` does not produce the Custom Elements Manifest (only the
+      # Storybook pre-hooks do), so generate it explicitly — it lands in the
+      # packages/craftcms-cp/dist cache path above for the downstream jobs.
+      - name: Build Custom Elements Manifest
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: cd ./packages/craftcms-ui && npm run build:manifest
+
       - name: Generate TypeScript types
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm run generate:types
diff --git a/.github/workflows/laravel-ci.yml b/.github/workflows/laravel-ci.yml
index 9a913005e37..8c5f8ac493b 100644
--- a/.github/workflows/laravel-ci.yml
+++ b/.github/workflows/laravel-ci.yml
@@ -129,6 +129,23 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      # ComponentManifestDriftTest needs the Custom Elements Manifest, which is
+      # gitignored (packages/craftcms-ui/dist). The cache key hashes everything
+      # the analyzer reads, so a hit is never stale; the cache itself is shared
+      # repo-wide, so whichever workflow generates it first serves the rest. On
+      # a miss the pinned npx run (~seconds) needs no npm install.
+      - name: Restore Custom Elements Manifest
+        id: cem
+        uses: actions/cache@v4
+        with:
+          path: packages/craftcms-ui/dist/custom-elements.json
+          key: cem-${{ hashFiles('packages/craftcms-ui/src/components/**', 'packages/craftcms-ui/custom-elements-manifest.config.mjs', 'packages/craftcms-ui/package.json', 'packages/craftcms-ui/tsconfig.json') }}
+
+      - name: Generate Custom Elements Manifest
+        if: steps.cem.outputs.cache-hit != 'true'
+        working-directory: packages/craftcms-ui
+        run: npx --yes @custom-elements-manifest/analyzer@0.11.0 analyze
+
       - name: Run tests
         uses: ./.github/actions/run-tests
         with:
diff --git a/AGENTS.md b/AGENTS.md
index f4ee338de38..9adbee3dc06 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -93,6 +93,8 @@ partially migrated; full migration means converting the inner form to a Vue comp
 **Custom elements** (anything with a hyphen in the tag name) are treated as native web components by the Vue compiler —
 they pass through to the browser without Vue trying to resolve them as Vue components.
 
+When porting behavior out of the legacy jQuery bundle (`packages/craftcms-legacy/cp/src/js/*.js`) into modern TypeScript, follow the shared module pattern documented in `resources/js/modules/README.md` — a logic class (`<name>.ts` on `@craftcms/garnish` `Base`), a `ControllerElement` custom element (`<name>.ce.ts`), an instance-registry `support.ts` WeakMap, and an `index.ts` shim that registers the element and assigns the legacy `window.Craft.*` global. Note the source-vs-`dist` gotcha in that README: after editing `packages/craftcms-garnish/src` (or `@craftcms/cp`), rebuild the package's `dist` or `npm run typecheck` won't see the change.
+
 ## Adapter Work
 
 `yii2-adapter` is compatibility code, not the implementation path for new core behavior. If you need to add adapter classes, follow its Composer autoload mapping. Do not put general adapter classes in `yii2-adapter/lib/`; that area is for vendored or library-style code.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index caeb9e78014..19ab8154a99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,47 @@
 
 - Plugins should no longer define `extra.laravel.providers` in `composer.json`. ([#19263](https://github.com/craftcms/cms/pull/19263))
 - Removed automatic plugin trait lifecycle hooks. ([#19263](https://github.com/craftcms/cms/pull/19263))
+- Added `CraftCms\Cms\Cp\Components\Button`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\ButtonGroup`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\Callout`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\Checkbox`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\CheckboxGroup`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\CheckboxSelect`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\ChoiceGroup`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\ComponentRegistry`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\Field`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\FieldGroup`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\Lightswitch`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\Radio`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\RadioGroup`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Components\ViewComponent`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\EvaluatesClosures`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\HasAppearance`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\HasDisabled`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\HasId`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\HasSize`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Concerns\HasVariant`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Enums\Appearance`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Enums\Size`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\Enums\Variant`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::buttonFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::buttonGroupFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::checkboxFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::checkboxGroupFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::checkboxSelectFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::lightswitchFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::radioFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::radioGroupFieldHtml()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Cp\FormFields::radioGroupFromConfig()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::button()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::buttonGroup()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::checkbox()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::checkboxGroup()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::checkboxSelect()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::lightswitch()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::radio()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\Twig\Variables\Cp::radioGroup()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
+- Added `CraftCms\Cms\ui()`. ([#19248](https://github.com/craftcms/cms/pull/19248))
 - Removed `CraftCms\Cms\Plugin\Events\PluginUnregistered`. ([#19263](https://github.com/craftcms/cms/pull/19263))
 - Removed `CraftCms\Cms\Plugin\Plugin::bootPlugin()`. `boot()` should be used instead. ([#19263](https://github.com/craftcms/cms/pull/19263))
 - Removed `CraftCms\Cms\Plugin\Plugin::registerPlugin()`. `register()` should be used instead. ([#19263](https://github.com/craftcms/cms/pull/19263))
diff --git a/packages/craftcms-garnish/README.md b/packages/craftcms-garnish/README.md
index a8740ec27d7..9c310866311 100644
--- a/packages/craftcms-garnish/README.md
+++ b/packages/craftcms-garnish/README.md
@@ -234,6 +234,29 @@ then the menu hides. `DisclosureMenu.getInstance(triggerOrContainer)` is the nat
 replacement for the legacy `$el.data('disclosureMenu')`. A legacy
 `new Garnish.DisclosureMenu($trigger, settings)` call ports across unchanged.
 
+#### Item selection — `Select`
+
+`Select` is the selection interface over a set of sibling items: click to select,
+shift-click to extend a contiguous range, and ctrl/⌘-click to toggle individual
+items (the ctrl/shift roles swap under `checkboxMode`). Selected items get the
+`selectedClass` (`sel` by default); arrow keys move the selection two-dimensionally
+by measuring item geometry, so it works for vertical lists and wrapping grids alike.
+It pairs naturally with `DragSort` for drag-a-multi-selection lists (see
+`<craft-component-select>`).
+
+```ts
+import {Select} from '@craftcms/garnish';
+
+const select = new Select({multi: true, filter: (t) => !(t as Element)?.closest('button')});
+select.addItems(list.querySelectorAll('li'));
+select.on('selectionChange', () => console.log(select.getSelectedItems()));
+```
+
+The constructor mirrors the legacy shape — `new Select(container, items?, settings?)`,
+with `new Select(settings)` / `new Select(container, settings)` param shifts — so a
+legacy `new Garnish.Select({...})` call ports across unchanged. `getSelectedItems()`
+returns a native `HTMLElement[]` (not a jQuery collection).
+
 **No-jQuery guarantee:** importing from `@craftcms/garnish` (the `.` entry) never
 pulls in jQuery, never reads `window.jQuery`/`$`, and never assigns
 `window.Garnish`. Those behaviors live exclusively in the `compat` entry.
diff --git a/packages/craftcms-garnish/docs/api-reference.md b/packages/craftcms-garnish/docs/api-reference.md
index 912708e1445..dabd134f392 100644
--- a/packages/craftcms-garnish/docs/api-reference.md
+++ b/packages/craftcms-garnish/docs/api-reference.md
@@ -533,6 +533,61 @@ are recomputed per insertion; lists `> 200` items use a viewport filter. Unlike
 
 ---
 
+## `Select`
+
+`class Select<S extends SelectSettings = SelectSettings> extends Base<S>` — the
+selection interface over a set of sibling items: click to select, shift-click to extend
+a contiguous range, ctrl/⌘-click to toggle individual items (ctrl/shift roles swap under
+`checkboxMode`). Selected items get the `selectedClass`; arrow keys move the selection
+two-dimensionally by measuring item geometry, so it spans vertical lists and wrapping
+grids. Commonly paired with `DragSort` to drag a multi-selection as a group.
+
+**Constructor:** `new Select(container?, items?, settings?)` — with `new Select(settings)`
+and `new Select(container, settings)` param-shifts (a plain-object arg is treated as the
+settings).
+
+### Statics
+
+| Member | Type | Description |
+| --- | --- | --- |
+| `Select.defaults` | `SelectSettings` | Default settings (below). |
+
+### Settings (`SelectSettings`)
+
+| Key | Default | Description |
+| --- | --- | --- |
+| `selectedClass` | `'sel'` | Class added to selected items. |
+| `checkboxClass` | `'checkbox'` | Class of a checkbox affordance inside an item; gets `aria-checked` toggled. |
+| `multi` | `false` | Allow more than one item selected at once. |
+| `allowEmpty` | `true` | Allow the selection to be emptied (container click / last-item deselect). |
+| `vertical` / `horizontal` | `false` | Constrain arrow-key nav to a single column / row. |
+| `handle` | `null` | What within each item receives the pointer listeners: selector / fn / element(s) / `null` (the item). |
+| `filter` | `null` | Gate before selecting: a selector string or `(target) => boolean` predicate. |
+| `checkboxMode` | `false` | Whether a checkbox affordance (not ctrl/shift) drives selection. |
+| `makeFocusable` | `false` | Give the focused item a roving `tabindex` (keyboard-navigable list). |
+| `waitForDoubleClicks` | `false` | Defer single-click (de)selection briefly so a double-click can pre-empt it. |
+| `onSelectionChange` | no-op | Fired (RAF-deferred) whenever the selection changes. |
+
+### Methods & properties
+
+| Member | Signature | Description |
+| --- | --- | --- |
+| `$items` / `$selectedItems` | `HTMLElement[]` | Tracked items / the selected subset (native arrays). |
+| `addItems` / `removeItems` | `(items) => void` | Track / untrack items (binds/unbinds their listeners). |
+| `selectItem` / `selectRange` / `selectAll` | `(item?, …) => void` | Select one / a contiguous range / everything (range & all are `multi`-only). |
+| `deselectItem` / `deselectAll` / `deselectOthers` | `(item?) => void` | Deselect one / all / all-but-one. |
+| `toggleItem` | `(item, preventScroll?) => void` | Toggle a single item (honoring `allowEmpty`). |
+| `isSelected` | `(item) => boolean` | Whether an item is selected. |
+| `getSelectedItems` | `() => HTMLElement[]` | The selected items, as a fresh array. |
+| `totalSelected` | `get => number` | How many are selected. |
+| `resetItemOrder` | `() => void` | Re-sort `$items` / `$selectedItems` into current DOM order (after a reorder). |
+| `focusItem` / `setFocusableItem` | `(item, …) => void` | Move DOM focus / set the roving-`tabindex` item. |
+
+**Events:** `selectionChange` (RAF-deferred), `focusItem` (`{item}`), plus `Base`'s
+`destroy`.
+
+---
+
 ## `UiLayerManager`
 
 `class UiLayerManager extends Base` — manages the stack of UI layers (document,
diff --git a/packages/craftcms-garnish/src/compat.ts b/packages/craftcms-garnish/src/compat.ts
index db1a0685878..2d79f695f20 100644
--- a/packages/craftcms-garnish/src/compat.ts
+++ b/packages/craftcms-garnish/src/compat.ts
@@ -135,6 +135,8 @@ export function toJq(value: unknown): JQueryCollection {
  *
  * @param value - The (possibly jQuery) value.
  * @returns The native element, or the value unchanged.
+ *
+ * @TODO replace instances of this with `toHtmlElement`
  */
 export function unwrapJq(value: unknown): unknown {
   if (value == null) {
@@ -147,6 +149,20 @@ export function unwrapJq(value: unknown): unknown {
   return value;
 }
 
+/**
+ * Unwrap a jQuery collection (truthy `.jquery`) to its first native element,
+ * pass a native `Element` through, and return `null` for anything else.
+ *
+ * This has some overlap with `unwrapJq` but the types are better here.
+ */
+export function toHtmlElement(value: unknown): HTMLElement | null {
+  if (isJquery(value)) {
+    return value.length && value[0] instanceof HTMLElement ? value[0] : null;
+  }
+
+  return value instanceof HTMLElement ? value : null;
+}
+
 /* ------------------------------------------------------------------------- *
  * compatify(ModernClass) — the legacy `.extend()` / `this.base()` shim
  * ------------------------------------------------------------------------- */
diff --git a/packages/craftcms-garnish/src/index.ts b/packages/craftcms-garnish/src/index.ts
index f865e963c12..2a6203ddc29 100644
--- a/packages/craftcms-garnish/src/index.ts
+++ b/packages/craftcms-garnish/src/index.ts
@@ -40,6 +40,7 @@ import {Drag, type DragSettings} from './drag/drag';
 import {DragDrop, type DragDropSettings} from './drag/drag-drop';
 import {DragSort, type DragSortSettings} from './drag/drag-sort';
 import {DragMove} from './drag-move';
+import {Select, type SelectSettings} from './select';
 import {ResizeHandle} from './icons/resize-handle';
 import {garnishClassBus, globals, win, doc, bod} from './globals';
 import type {Callback, Constructor, GarnishBaseSettings} from './types';
@@ -77,6 +78,8 @@ export {Drag, type DragSettings};
 export {DragDrop, type DragDropSettings};
 export {DragSort, type DragSortSettings};
 export {DragMove};
+export {Select, type SelectSettings};
+export type {SelectHandle, SelectFilter} from './select';
 export {ResizeHandle};
 export {win, doc, bod};
 
@@ -184,6 +187,7 @@ export const Garnish = {
   DragDrop,
   DragSort,
   DragMove,
+  Select,
   /** @deprecated Use UiLayerManager instead. */
   ShortcutManager: UiLayerManager,
 
diff --git a/packages/craftcms-garnish/src/select.ts b/packages/craftcms-garnish/src/select.ts
new file mode 100644
index 00000000000..22be33c9488
--- /dev/null
+++ b/packages/craftcms-garnish/src/select.ts
@@ -0,0 +1,1194 @@
+/**
+ * Select — modern, jQuery-free TypeScript port of Garnish's `Select`.
+ *
+ * A selection interface over a set of sibling items: click to select, shift-click
+ * to extend a range, and ctrl/⌘-click to toggle individual items (the ctrl/shift
+ * roles swap under `checkboxMode`). Selected items get the `selectedClass` (`sel`
+ * by default); arrow keys move the selection two-dimensionally by measuring item
+ * geometry, so it works for both vertical lists and wrapping grids.
+ *
+ * jQuery removals (mirroring the `Drag`/`DragSort` ports):
+ *
+ * - `$()` collections → native `HTMLElement[]` (`$items`, `$selectedItems`).
+ * - `$.data(item, 'select')` cross-selector guard → a module-scoped
+ *   {@link itemOwners} `WeakMap`; `$.data(item, 'select-handle')` /
+ *   `$handle.data('select-item')` → per-instance {@link itemHandles} /
+ *   {@link itemCheckboxes} `WeakMap`s + closures that capture the item.
+ * - `$item.offset()` / `.outerWidth()` / `.outerHeight()` (the 2D nav geometry)
+ *   → `getOffset` / `getOuterWidth` / `getOuterHeight`.
+ * - `$item.is(':focusable')` / `.find(':focusable:first')` → `isFocusable` /
+ *   `getFocusableElements(item)[0]`.
+ * - `Garnish.ltr/rtl` → `globals.ltr/rtl`; `Garnish.requestAnimationFrame` →
+ *   `utils/animation`; `$.noop` → `() => {}`.
+ *
+ * Unlike the legacy `Base.extend({init})` trampoline, this is a native
+ * `class extends Base` with a real constructor (see {@link Base}).
+ */
+
+import {Base} from './base';
+import {globals} from './globals';
+import {
+  X_AXIS,
+  Y_AXIS,
+  DOWN_KEY,
+  LEFT_KEY,
+  RIGHT_KEY,
+  RETURN_KEY,
+  SPACE_KEY,
+  UP_KEY,
+  A_KEY,
+} from './constants';
+import {
+  coerceElements,
+  getOffset,
+  getOuterHeight,
+  getOuterWidth,
+} from './utils/dom';
+import {isFocusable, getFocusableElements} from './utils/focusable';
+import {isCtrlKeyPressed, isPrimaryClick} from './utils/env';
+import {requestAnimationFrame, cancelAnimationFrame} from './utils/animation';
+import {isPlainObject} from './utils/misc';
+import type {GarnishEvent} from './events';
+import type {ElementInput, GarnishBaseSettings} from './types';
+
+// `keyCode` is deprecated but still populated on native KeyboardEvents in every
+// browser Craft supports, and the rest of the garnish core (HUD, DisclosureMenu,
+// EscManager, …) reads it against the numeric key constants — so this port does
+// too, for consistency.
+
+/** The handle for selecting an item: a selector, a function, an element, or `null` (the item itself). */
+export type SelectHandle =
+  | string
+  | ((item: HTMLElement) => HTMLElement | HTMLElement[] | null)
+  | HTMLElement
+  | HTMLElement[]
+  | null;
+
+/** The click/keydown filter: a selector string or a predicate over the event target. */
+export type SelectFilter =
+  | string
+  | ((target: EventTarget | null) => boolean)
+  | null;
+
+/** Settings accepted by {@link Select} (extends {@link GarnishBaseSettings}). */
+export interface SelectSettings extends GarnishBaseSettings {
+  /** Class added to selected items. */
+  selectedClass: string;
+  /** Class marking a checkbox affordance inside an item (gets `aria-checked`). */
+  checkboxClass: string;
+  /** Allow more than one item selected at a time. */
+  multi: boolean;
+  /** Allow the selection to be emptied (container click / last-item deselect). */
+  allowEmpty: boolean;
+  /** Constrain arrow-key navigation to a single vertical column. */
+  vertical: boolean;
+  /** Constrain arrow-key navigation to a single horizontal row. */
+  horizontal: boolean;
+  /** What within each item receives the pointer listeners; `null` → the item. */
+  handle: SelectHandle;
+  /** Gate: only start selecting when the pointer/key target passes this. */
+  filter: SelectFilter;
+  /** Whether a checkbox affordance (not ctrl/shift) drives selection. */
+  checkboxMode: boolean;
+  /** Give the focused item a roving `tabindex` (keyboard-navigable list). */
+  makeFocusable: boolean;
+  /** Defer single-click (de)selection briefly so a double-click can pre-empt it. */
+  waitForDoubleClicks: boolean;
+  /** Called (RAF-deferred) whenever the selection changes. */
+  onSelectionChange: () => void;
+}
+
+const noop = (): void => {};
+
+/**
+ * Item → owning {@link Select}. Module-scoped (not per-instance) so adding an
+ * item already claimed by another selector can warn and hand it over, matching
+ * the legacy `$.data(item, 'select')` guard.
+ */
+const itemOwners = new WeakMap<Element, Select>();
+
+/** Element the container is bound to → its {@link Select} (legacy `$container.data('select')`). */
+const containerOwners = new WeakMap<Element, Select>();
+
+/** Geometry lookups for {@link Select.getClosestItem}, keyed by axis. */
+const closestItemAxisProps = {
+  [X_AXIS]: {
+    midpointOffset: 'top',
+    midpointSize: getOuterHeight,
+    rowOffset: 'left',
+  },
+  [Y_AXIS]: {
+    midpointOffset: 'left',
+    midpointSize: getOuterWidth,
+    rowOffset: 'top',
+  },
+} as const;
+
+/** Direction lookups for {@link Select.getClosestItem}, keyed by `'<'` / `'>'`. */
+const closestItemDirectionProps = {
+  '<': {
+    step: -1,
+    isNextRow: (a: number, b: number): boolean => a < b,
+    isWrongDirection: (a: number, b: number): boolean => a > b,
+  },
+  '>': {
+    step: 1,
+    isNextRow: (a: number, b: number): boolean => a > b,
+    isWrongDirection: (a: number, b: number): boolean => a < b,
+  },
+} as const;
+
+/**
+ * Selection interface over a set of sibling items — the modern, jQuery-free
+ * port of `Garnish.Select`. See the file header for the porting notes.
+ *
+ * @typeParam S - The settings shape; defaults to {@link SelectSettings}.
+ *
+ * @fires selectionChange - (RAF-deferred) whenever the selected set changes.
+ * @fires focusItem - `{item}` when keyboard/pointer focus moves to an item.
+ */
+export class Select<S extends SelectSettings = SelectSettings> extends Base<S> {
+  /** Default {@link SelectSettings}. */
+  static readonly defaults: SelectSettings = {
+    selectedClass: 'sel',
+    checkboxClass: 'checkbox',
+    multi: false,
+    allowEmpty: true,
+    vertical: false,
+    horizontal: false,
+    handle: null,
+    filter: null,
+    checkboxMode: false,
+    makeFocusable: false,
+    waitForDoubleClicks: false,
+    onSelectionChange: noop,
+  };
+
+  /** The container element (its click deselects, when `allowEmpty`). */
+  $container: HTMLElement | null = null;
+
+  /** All tracked items, in the order they were added. */
+  $items: HTMLElement[] = [];
+
+  /** The currently-selected items (a subset of {@link $items}). */
+  $selectedItems: HTMLElement[] = [];
+
+  /** The item that last received focus. */
+  $focusedItem: HTMLElement | null = null;
+
+  /** The anchor item/index of the current selection range (shift-select origin). */
+  $first: HTMLElement | null = null;
+  first: number | null = null;
+
+  /** The far end item/index of the current selection range. */
+  $last: HTMLElement | null = null;
+  last: number | null = null;
+
+  /** The single roving-`tabindex` item, when `makeFocusable`. */
+  $focusable: HTMLElement | null = null;
+
+  /** The handle whose `mousedown` began a potential click (resolved in `mouseup`). */
+  private mousedownTarget: HTMLElement | null = null;
+  /** Pending single-click handler timer (see `waitForDoubleClicks`). */
+  private mouseUpTimeout: ReturnType<typeof setTimeout> | null = null;
+  /** RAF handle coalescing `selectionChange` emissions. */
+  private callbackFrame: number | null = null;
+  /** Set by an item's own `click` so the container's deselect click can be ignored. */
+  private ignoreClick = false;
+
+  /** Handles bound for each item (the item itself when no `handle` setting). */
+  private readonly itemHandles = new WeakMap<HTMLElement, HTMLElement[]>();
+  /** The `.checkbox` affordance within each item, if any. */
+  private readonly itemCheckboxes = new WeakMap<
+    HTMLElement,
+    HTMLElement | null
+  >();
+
+  /**
+   * @param container - The container element (or, via param-shift, the settings
+   *   or items when later args are omitted).
+   * @param items - Items to track right away (selector / element / list).
+   * @param settings - Settings overrides.
+   */
+  constructor(
+    container?: ElementInput | Partial<S>,
+    items?: ElementInput | Partial<S>,
+    settings?: Partial<S>
+  ) {
+    super();
+
+    // Param mapping (legacy parity):
+    //   (settings)            — first arg is a plain object
+    //   (container, settings) — second arg is a plain object
+    //   (container, items, settings)
+    let resolvedContainer: ElementInput = container as ElementInput;
+    let resolvedItems: ElementInput = items as ElementInput;
+    if (
+      items === undefined &&
+      settings === undefined &&
+      isPlainObject(container)
+    ) {
+      settings = container as Partial<S>;
+      resolvedContainer = null;
+      resolvedItems = null;
+    } else if (settings === undefined && isPlainObject(items)) {
+      settings = items as Partial<S>;
+      resolvedItems = null;
+    }
+
+    this.$container =
+      (coerceElements(resolvedContainer)[0] as HTMLElement) ?? null;
+
+    // Is this already a select?
+    if (this.$container && containerOwners.has(this.$container)) {
+      console.warn('Double-instantiating a select on an element');
+      containerOwners.get(this.$container)!.destroy();
+    }
+    if (this.$container) {
+      containerOwners.set(this.$container, this);
+    }
+
+    this.setSettings(settings, Select.defaults as Partial<S>);
+
+    this.$items = [];
+    this.$selectedItems = [];
+
+    this.addItems(resolvedItems);
+
+    if (
+      this.$container &&
+      this.settings!.allowEmpty &&
+      !this.settings!.checkboxMode
+    ) {
+      this.addListener(this.$container, 'click', () => {
+        if (this.ignoreClick) {
+          this.ignoreClick = false;
+        } else {
+          // Deselect all items on container click.
+          this.deselectAll(true);
+        }
+      });
+    }
+  }
+
+  // --- Queries ----------------------------------------------------------------
+
+  /** The index of an item within {@link $items}, or `-1`. */
+  getItemIndex(item: HTMLElement): number {
+    return this.$items.indexOf(item);
+  }
+
+  /** Whether an item is currently selected. */
+  isSelected(item: HTMLElement | null): boolean {
+    if (!item) {
+      return false;
+    }
+    return this.$selectedItems.indexOf(item) !== -1;
+  }
+
+  /** The selected items, as a fresh array (legacy returned a fresh jQuery set). */
+  getSelectedItems(): HTMLElement[] {
+    return [...this.$selectedItems];
+  }
+
+  /** `totalSelected` getter (legacy parity). */
+  get totalSelected(): number {
+    return this.getTotalSelected();
+  }
+
+  /** How many items are selected. */
+  getTotalSelected(): number {
+    return this.$selectedItems.length;
+  }
+
+  // --- Selection --------------------------------------------------------------
+
+  /** Select a single item, collapsing the range to it. */
+  selectItem(
+    item: HTMLElement,
+    focus?: boolean,
+    preventScroll?: boolean
+  ): void {
+    if (!this.settings!.multi) {
+      this.deselectAll();
+    }
+
+    this.$first = this.$last = item;
+    this.first = this.last = this.getItemIndex(item);
+
+    if (focus) {
+      this.focusItem(item, preventScroll);
+    }
+
+    this._selectItems([item]);
+  }
+
+  /** Select every item (multi only). */
+  selectAll(): void {
+    if (!this.settings!.multi || !this.$items.length) {
+      return;
+    }
+
+    this.first = 0;
+    this.last = this.$items.length - 1;
+    this.$first = this.$items[this.first]!;
+    this.$last = this.$items[this.last]!;
+
+    this._selectItems([...this.$items]);
+  }
+
+  /** Extend the selection from the anchor to `item` (multi only). */
+  selectRange(item: HTMLElement, preventScroll?: boolean): void {
+    if (!this.settings!.multi) {
+      this.selectItem(item, true, true);
+      return;
+    }
+
+    this.deselectAll();
+
+    this.$last = item;
+    this.last = this.getItemIndex(item);
+
+    this.focusItem(item, preventScroll);
+
+    let sliceFrom: number;
+    let sliceTo: number;
+    if (this.first! < this.last) {
+      sliceFrom = this.first!;
+      sliceTo = this.last + 1;
+    } else {
+      sliceFrom = this.last;
+      sliceTo = this.first! + 1;
+    }
+
+    this._selectItems(this.$items.slice(sliceFrom, sliceTo));
+  }
+
+  /** Deselect a single item, clearing the range anchor/end if it was one. */
+  deselectItem(item: HTMLElement): void {
+    const index = this.getItemIndex(item);
+    if (this.first === index) {
+      this.$first = null;
+      this.first = null;
+    }
+    if (this.last === index) {
+      this.$last = null;
+      this.last = null;
+    }
+
+    this._deselectItems([item]);
+  }
+
+  /** Deselect everything; pass `clearFirst` to also drop the range anchor/end. */
+  deselectAll(clearFirst?: boolean): void {
+    if (clearFirst) {
+      this.$first = this.first = this.$last = this.last = null;
+    }
+
+    this._deselectItems([...this.$items]);
+  }
+
+  /** Deselect everything else and select just `item`. */
+  deselectOthers(item: HTMLElement): void {
+    this.deselectAll();
+    this.selectItem(item, true, true);
+  }
+
+  /** Toggle a single item's selection (respecting `_canDeselect`). */
+  toggleItem(item: HTMLElement, preventScroll?: boolean): void {
+    if (!this.isSelected(item)) {
+      this.selectItem(item, true, preventScroll);
+    } else if (this._canDeselect([item])) {
+      this.deselectItem(item);
+    }
+  }
+
+  // --- Navigation getters -----------------------------------------------------
+
+  getFirstItem(): HTMLElement | undefined {
+    return this.$items[0];
+  }
+
+  getLastItem(): HTMLElement | undefined {
+    return this.$items[this.$items.length - 1];
+  }
+
+  isPreviousItem(index: number): boolean {
+    return index > 0;
+  }
+
+  isNextItem(index: number): boolean {
+    return index < this.$items.length - 1;
+  }
+
+  getPreviousItem(index: number): HTMLElement | undefined {
+    return this.isPreviousItem(index) ? this.$items[index - 1] : undefined;
+  }
+
+  getNextItem(index: number): HTMLElement | undefined {
+    return this.isNextItem(index) ? this.$items[index + 1] : undefined;
+  }
+
+  getItemToTheLeft(index: number): HTMLElement | undefined {
+    const next = globals.ltr
+      ? this.getPreviousItem(index)
+      : this.getNextItem(index);
+    const has = globals.ltr
+      ? this.isPreviousItem(index)
+      : this.isNextItem(index);
+    if (!has) {
+      return undefined;
+    }
+    if (this.settings!.horizontal) {
+      return next;
+    }
+    if (!this.settings!.vertical) {
+      return this.getClosestItem(index, X_AXIS, '<');
+    }
+    return undefined;
+  }
+
+  getItemToTheRight(index: number): HTMLElement | undefined {
+    const next = globals.ltr
+      ? this.getNextItem(index)
+      : this.getPreviousItem(index);
+    const has = globals.ltr
+      ? this.isNextItem(index)
+      : this.isPreviousItem(index);
+    if (!has) {
+      return undefined;
+    }
+    if (this.settings!.horizontal) {
+      return next;
+    }
+    if (!this.settings!.vertical) {
+      return this.getClosestItem(index, X_AXIS, '>');
+    }
+    return undefined;
+  }
+
+  getItemAbove(index: number): HTMLElement | undefined {
+    if (!this.isPreviousItem(index)) {
+      return undefined;
+    }
+    if (this.settings!.vertical) {
+      return this.getPreviousItem(index);
+    }
+    if (!this.settings!.horizontal) {
+      return this.getClosestItem(index, Y_AXIS, '<');
+    }
+    return undefined;
+  }
+
+  getItemBelow(index: number): HTMLElement | undefined {
+    if (!this.isNextItem(index)) {
+      return undefined;
+    }
+    if (this.settings!.vertical) {
+      return this.getNextItem(index);
+    }
+    if (!this.settings!.horizontal) {
+      return this.getClosestItem(index, Y_AXIS, '>');
+    }
+    return undefined;
+  }
+
+  /**
+   * The nearest item to `index` on the next row/column in a direction — the 2D
+   * geometry that lets arrow keys traverse a wrapping grid. Ported from the
+   * legacy midpoint-scan; reads live layout via `getOffset`/`getOuter*`.
+   */
+  getClosestItem(
+    index: number,
+    axis: typeof X_AXIS | typeof Y_AXIS,
+    dir: '<' | '>'
+  ): HTMLElement | undefined {
+    const axisProps = closestItemAxisProps[axis];
+    const dirProps = closestItemDirectionProps[dir];
+
+    const thisItem = this.$items[index]!;
+    const thisOffset = getOffset(thisItem);
+    const thisMidpoint =
+      thisOffset[axisProps.midpointOffset] +
+      Math.round(axisProps.midpointSize(thisItem) / 2);
+
+    let otherRowPos: number | null = null;
+    let smallestMidpointDiff: number | null = null;
+    let closestItem: HTMLElement | undefined;
+
+    // Go the other way if this is the X axis on an RTL page.
+    const step =
+      globals.rtl && axis === X_AXIS ? dirProps.step * -1 : dirProps.step;
+
+    for (
+      let i = index + step;
+      typeof this.$items[i] !== 'undefined';
+      i += step
+    ) {
+      const otherItem = this.$items[i]!;
+      const otherOffset = getOffset(otherItem);
+
+      // Are we on the next row yet?
+      if (
+        dirProps.isNextRow(
+          otherOffset[axisProps.rowOffset],
+          thisOffset[axisProps.rowOffset]
+        )
+      ) {
+        // Is this the first time we've seen this row?
+        if (otherRowPos === null) {
+          otherRowPos = otherOffset[axisProps.rowOffset];
+        } else if (otherOffset[axisProps.rowOffset] !== otherRowPos) {
+          // Have we gone too far?
+          break;
+        }
+
+        const otherMidpoint =
+          otherOffset[axisProps.midpointOffset] +
+          Math.round(axisProps.midpointSize(otherItem) / 2);
+        const midpointDiff = Math.abs(thisMidpoint - otherMidpoint);
+
+        // Are we getting warmer?
+        if (
+          smallestMidpointDiff === null ||
+          midpointDiff < smallestMidpointDiff
+        ) {
+          smallestMidpointDiff = midpointDiff;
+          closestItem = otherItem;
+        } else {
+          // Getting colder?
+          break;
+        }
+      } else if (
+        dirProps.isWrongDirection(
+          otherOffset[axisProps.rowOffset],
+          thisOffset[axisProps.rowOffset]
+        )
+      ) {
+        // Getting colder?
+        break;
+      }
+    }
+
+    return closestItem;
+  }
+
+  getFurthestItemToTheLeft(index: number): HTMLElement | undefined {
+    return this.getFurthestItem(index, 'getItemToTheLeft');
+  }
+
+  getFurthestItemToTheRight(index: number): HTMLElement | undefined {
+    return this.getFurthestItem(index, 'getItemToTheRight');
+  }
+
+  getFurthestItemAbove(index: number): HTMLElement | undefined {
+    return this.getFurthestItem(index, 'getItemAbove');
+  }
+
+  getFurthestItemBelow(index: number): HTMLElement | undefined {
+    return this.getFurthestItem(index, 'getItemBelow');
+  }
+
+  private getFurthestItem(
+    index: number,
+    getter:
+      | 'getItemToTheLeft'
+      | 'getItemToTheRight'
+      | 'getItemAbove'
+      | 'getItemBelow'
+  ): HTMLElement | undefined {
+    let item: HTMLElement | undefined;
+    let testItem: HTMLElement | undefined;
+
+    while ((testItem = this[getter](index))) {
+      item = testItem;
+      index = this.getItemIndex(item);
+    }
+
+    return item;
+  }
+
+  // --- Item management --------------------------------------------------------
+
+  /** Track item(s) for selection and bind their pointer/keyboard listeners. */
+  addItems(items: ElementInput): void {
+    const elements = coerceElements(items).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement
+    );
+
+    for (const item of elements) {
+      // Make sure this element doesn't belong to another selector (and isn't
+      // already ours — re-adding would duplicate it in `$items`).
+      const owner = itemOwners.get(item);
+      if (owner === this) {
+        continue;
+      }
+      if (owner) {
+        console.warn('Element was added to more than one selector');
+        owner.removeItems(item);
+      }
+
+      itemOwners.set(item, this);
+
+      const handles = this._resolveHandles(item);
+      this.itemHandles.set(item, handles);
+
+      const checkbox = this.settings!.checkboxClass
+        ? item.querySelector<HTMLElement>(`.${this.settings!.checkboxClass}`)
+        : null;
+      this.itemCheckboxes.set(item, checkbox);
+
+      for (const handle of handles) {
+        this.addListener(handle, 'mousedown', (ev: GarnishEvent) => {
+          this.onMouseDown(ev as unknown as MouseEvent, item, handle);
+        });
+        this.addListener(handle, 'mouseup', (ev: GarnishEvent) => {
+          this.onMouseUp(ev as unknown as MouseEvent, item, handle);
+        });
+        this.addListener(handle, 'click', () => {
+          this.ignoreClick = true;
+        });
+      }
+
+      if (checkbox) {
+        this.addListener(checkbox, 'keydown', (ev: GarnishEvent) => {
+          const kev = ev as unknown as KeyboardEvent;
+          if (
+            (kev.keyCode === RETURN_KEY || kev.keyCode === SPACE_KEY) &&
+            !kev.shiftKey &&
+            !isCtrlKeyPressed(kev)
+          ) {
+            kev.preventDefault();
+            this.onCheckboxActivate(kev, item);
+          }
+        });
+      }
+
+      this.addListener(item, 'keydown', (ev: GarnishEvent) => {
+        this.onKeyDown(ev as unknown as KeyboardEvent, item);
+      });
+
+      this.$items.push(item);
+    }
+
+    this.updateIndexes();
+  }
+
+  /** Stop tracking item(s), unbinding listeners and dropping them from the selection. */
+  removeItems(items: ElementInput): void {
+    const elements = coerceElements(items).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement
+    );
+
+    let itemsChanged = false;
+    let selectionChanged = false;
+
+    for (const item of elements) {
+      const index = this.$items.indexOf(item);
+      if (index !== -1) {
+        this._deinitItem(item);
+        this.$items.splice(index, 1);
+        itemsChanged = true;
+
+        const selectedIndex = this.$selectedItems.indexOf(item);
+        if (selectedIndex !== -1) {
+          this.$selectedItems.splice(selectedIndex, 1);
+          selectionChanged = true;
+        }
+      }
+    }
+
+    if (itemsChanged) {
+      this.updateIndexes();
+
+      if (selectionChanged) {
+        for (const item of elements) {
+          item.classList.remove(this.settings!.selectedClass);
+        }
+        this.onSelectionChange();
+      }
+    }
+  }
+
+  /** Stop tracking every item. */
+  removeAllItems(): void {
+    for (const item of this.$items) {
+      this._deinitItem(item);
+    }
+
+    this.$items = [];
+    this.$selectedItems = [];
+    this.updateIndexes();
+  }
+
+  /** Recompute the first/last indexes and the roving-focus item. */
+  updateIndexes(): void {
+    if (this.first !== null && this.$first) {
+      this.first = this.getItemIndex(this.$first);
+      this.setFocusableItem(this.$first);
+    } else if (this.$items.length) {
+      this.setFocusableItem(this.$items[0]!);
+    }
+
+    if (this.$focusedItem) {
+      this.focusItem(this.$focusedItem, true);
+    }
+
+    if (this.last !== null && this.$last) {
+      this.last = this.getItemIndex(this.$last);
+    }
+  }
+
+  /**
+   * Re-sort {@link $items} / {@link $selectedItems} into current DOM order — call
+   * after the items have been reordered in the DOM (legacy `resetItemOrder`).
+   */
+  resetItemOrder(): void {
+    this.$items = this._sortByDomOrder(this.$items);
+    this.$selectedItems = this._sortByDomOrder(this.$selectedItems);
+    this.updateIndexes();
+  }
+
+  /**
+   * Give a single item the roving `tabindex="0"` (when `makeFocusable`), so the
+   * list is a single tab stop rather than one stop per item.
+   */
+  setFocusableItem(item: HTMLElement): void {
+    if (this.settings!.makeFocusable) {
+      if (this.$focusable) {
+        this.$focusable.removeAttribute('tabindex');
+      }
+      item.setAttribute('tabindex', '0');
+      this.$focusable = item;
+    }
+  }
+
+  /** Move DOM focus onto an item (or its first focusable descendant). */
+  focusItem(item: HTMLElement, preventScroll?: boolean): void {
+    let focusableElement: HTMLElement | null;
+    if (this.settings!.makeFocusable) {
+      this.setFocusableItem(item);
+      focusableElement = item;
+    } else if (isFocusable(item)) {
+      focusableElement = item;
+    } else {
+      focusableElement = getFocusableElements(item)[0] ?? null;
+    }
+
+    if (focusableElement) {
+      focusableElement.focus({preventScroll: !!preventScroll});
+    }
+
+    this.$focusedItem = item;
+    this.trigger('focusItem', {item});
+  }
+
+  // --- Events -----------------------------------------------------------------
+
+  /** Pointer-down on a handle: begin a shift-range, checkbox-toggle, or pending click. */
+  onMouseDown(ev: MouseEvent, item: HTMLElement, handle: HTMLElement): void {
+    this.mousedownTarget = null;
+
+    // Ignore right/ctrl-clicks.
+    if (!isPrimaryClick(ev) && !isCtrlKeyPressed(ev)) {
+      return;
+    }
+
+    // Enforce the filter.
+    if (this.settings!.filter && !this._passesFilter(ev.target)) {
+      return;
+    }
+
+    if (this.first !== null && ev.shiftKey) {
+      // Shift key is consistent for both selection modes.
+      this.selectRange(item, true);
+    } else if (
+      this._actAsCheckbox(ev) &&
+      (!this.settings!.waitForDoubleClicks || !this.isSelected(item))
+    ) {
+      // Checkbox-style deselection is handled from onMouseUp().
+      this.toggleItem(item, true);
+    } else {
+      // Prepare for click handling in onMouseUp().
+      this.mousedownTarget = handle;
+    }
+  }
+
+  /** Pointer-up on a handle: resolve a plain click into (de)selection. */
+  onMouseUp(ev: MouseEvent, item: HTMLElement, handle: HTMLElement): void {
+    // Ignore right clicks.
+    if (!isPrimaryClick(ev) && !isCtrlKeyPressed(ev)) {
+      return;
+    }
+
+    // Enforce the filter (legacy applied jQuery `.is()` semantics here).
+    if (this.settings!.filter && !this._passesFilterIs(ev.target)) {
+      return;
+    }
+
+    // Was this a click?
+    if (!ev.shiftKey && handle === this.mousedownTarget) {
+      if (this.isSelected(item)) {
+        const handler = (): void => {
+          if (this._actAsCheckbox(ev)) {
+            this.deselectItem(item);
+          } else {
+            this.deselectOthers(item);
+          }
+        };
+
+        if (this.settings!.waitForDoubleClicks) {
+          // Wait a moment to see if this is a double click before deciding.
+          this.clearMouseUpTimeout();
+          this.mouseUpTimeout = setTimeout(handler, 300);
+        } else {
+          handler();
+        }
+      } else if (!this._actAsCheckbox(ev)) {
+        // Checkbox-style selection is handled from onMouseDown().
+        this.deselectAll();
+        this.selectItem(item, true, true);
+      }
+    }
+  }
+
+  /** Return/Space on a checkbox affordance: toggle that item's selection. */
+  onCheckboxActivate(ev: KeyboardEvent, item: HTMLElement): void {
+    ev.stopImmediatePropagation();
+
+    if (!this.isSelected(item)) {
+      this.selectItem(item);
+    } else {
+      this.deselectItem(item);
+    }
+  }
+
+  /** Keyboard navigation/selection over the items (arrows, space, ctrl+A). */
+  onKeyDown(ev: KeyboardEvent, item: HTMLElement): void {
+    // Ignore if the focus isn't on this item, its handle, or its checkbox.
+    const itemIsTarget = ev.target === item;
+    const handleIsTarget = (this.itemHandles.get(item) ?? []).includes(
+      ev.target as HTMLElement
+    );
+    const checkboxIsTarget =
+      !!this.settings!.checkboxClass &&
+      ev.target instanceof Element &&
+      ev.target.classList.contains(this.settings!.checkboxClass);
+
+    if (!itemIsTarget && !handleIsTarget && !checkboxIsTarget) {
+      return;
+    }
+
+    const ctrlKey = isCtrlKeyPressed(ev);
+    const shiftKey = ev.shiftKey;
+
+    let anchor: number;
+    if (!this.settings!.checkboxMode || !this.$focusable) {
+      anchor = (ev.shiftKey ? this.last : this.first) ?? 0;
+    } else {
+      anchor = this.$items.indexOf(this.$focusable);
+      if (anchor === -1) {
+        anchor = 0;
+      }
+    }
+
+    let nextItem: HTMLElement | undefined;
+
+    switch (ev.keyCode) {
+      case LEFT_KEY: {
+        ev.preventDefault();
+        if (this.first === null) {
+          nextItem = globals.ltr ? this.getLastItem() : this.getFirstItem();
+        } else if (ctrlKey) {
+          nextItem = this.getFurthestItemToTheLeft(anchor);
+        } else {
+          nextItem = this.getItemToTheLeft(anchor);
+        }
+        break;
+      }
+
+      case RIGHT_KEY: {
+        ev.preventDefault();
+        if (this.first === null) {
+          nextItem = globals.ltr ? this.getFirstItem() : this.getLastItem();
+        } else if (ctrlKey) {
+          nextItem = this.getFurthestItemToTheRight(anchor);
+        } else {
+          nextItem = this.getItemToTheRight(anchor);
+        }
+        break;
+      }
+
+      case UP_KEY: {
+        ev.preventDefault();
+        if (this.first === null) {
+          if (this.$focusable) {
+            nextItem =
+              (this.$focusable.previousElementSibling as HTMLElement | null) ??
+              undefined;
+          }
+          if (!this.$focusable || !nextItem) {
+            nextItem = this.getLastItem();
+          }
+        } else {
+          nextItem = ctrlKey
+            ? this.getFurthestItemAbove(anchor)
+            : this.getItemAbove(anchor);
+          if (!nextItem) {
+            nextItem = this.getFirstItem();
+          }
+        }
+        break;
+      }
+
+      case DOWN_KEY: {
+        ev.preventDefault();
+        if (this.first === null) {
+          if (this.$focusable) {
+            nextItem =
+              (this.$focusable.nextElementSibling as HTMLElement | null) ??
+              undefined;
+          }
+          if (!this.$focusable || !nextItem) {
+            nextItem = this.getFirstItem();
+          }
+        } else {
+          nextItem = ctrlKey
+            ? this.getFurthestItemBelow(anchor)
+            : this.getItemBelow(anchor);
+          if (!nextItem) {
+            nextItem = this.getLastItem();
+          }
+        }
+        break;
+      }
+
+      case SPACE_KEY: {
+        if (!ctrlKey && !shiftKey) {
+          ev.preventDefault();
+          if (this.isSelected(this.$focusable)) {
+            if (this.$focusable && this._canDeselect([this.$focusable])) {
+              this.deselectItem(this.$focusable);
+            }
+          } else if (this.$focusable) {
+            this.selectItem(this.$focusable, true, false);
+          }
+        }
+        break;
+      }
+
+      case A_KEY: {
+        if (ctrlKey) {
+          ev.preventDefault();
+          this.selectAll();
+        }
+        break;
+      }
+    }
+
+    // Is there an item queued up for focus/selection?
+    if (nextItem) {
+      if (!this.settings!.checkboxMode) {
+        if (this.first !== null && ev.shiftKey) {
+          this.selectRange(nextItem, false);
+        } else {
+          this.deselectAll();
+          this.selectItem(nextItem, true, false);
+        }
+      } else {
+        // Just set the new item to be focusable.
+        this.setFocusableItem(nextItem);
+        if (this.settings!.makeFocusable) {
+          nextItem.focus();
+        }
+        this.$focusedItem = nextItem;
+        this.trigger('focusItem', {item: nextItem});
+      }
+    }
+  }
+
+  /** Emit `selectionChange` on the next frame, coalescing bursts. */
+  onSelectionChange(): void {
+    if (this.callbackFrame) {
+      cancelAnimationFrame(this.callbackFrame);
+      this.callbackFrame = null;
+    }
+
+    this.callbackFrame = requestAnimationFrame(() => {
+      this.callbackFrame = null;
+      this.trigger('selectionChange');
+      this.settings!.onSelectionChange();
+    });
+  }
+
+  /** Cancel a pending single-click timer (see `waitForDoubleClicks`). */
+  clearMouseUpTimeout(): void {
+    if (this.mouseUpTimeout) {
+      clearTimeout(this.mouseUpTimeout);
+      this.mouseUpTimeout = null;
+    }
+  }
+
+  /** Tear down: release the container/items and run the base teardown. */
+  override destroy(): void {
+    if (this.$container) {
+      containerOwners.delete(this.$container);
+    }
+    this.removeAllItems();
+    super.destroy();
+  }
+
+  // --- Private ----------------------------------------------------------------
+
+  /** Whether this event should act as a checkbox toggle (ctrl inverts `checkboxMode`). */
+  private _actAsCheckbox(ev: MouseEvent): boolean {
+    if (isCtrlKeyPressed(ev)) {
+      return !this.settings!.checkboxMode;
+    }
+    return this.settings!.checkboxMode;
+  }
+
+  /** Whether the given items may be deselected without violating `allowEmpty`. */
+  private _canDeselect(items: HTMLElement[]): boolean {
+    return this.settings!.allowEmpty || this.totalSelected > items.length;
+  }
+
+  private _selectItems(items: HTMLElement[]): void {
+    for (const item of items) {
+      item.classList.add(this.settings!.selectedClass);
+
+      if (this.settings!.checkboxClass) {
+        for (const checkbox of item.querySelectorAll(
+          `.${this.settings!.checkboxClass}`
+        )) {
+          checkbox.setAttribute('aria-checked', 'true');
+        }
+      }
+
+      if (this.$selectedItems.indexOf(item) === -1) {
+        this.$selectedItems.push(item);
+      }
+    }
+
+    this.onSelectionChange();
+  }
+
+  private _deselectItems(items: HTMLElement[]): void {
+    for (const item of items) {
+      item.classList.remove(this.settings!.selectedClass);
+
+      if (this.settings!.checkboxClass) {
+        for (const checkbox of item.querySelectorAll(
+          `.${this.settings!.checkboxClass}`
+        )) {
+          checkbox.setAttribute('aria-checked', 'false');
+        }
+      }
+
+      const index = this.$selectedItems.indexOf(item);
+      if (index !== -1) {
+        this.$selectedItems.splice(index, 1);
+      }
+    }
+
+    this.onSelectionChange();
+  }
+
+  private _deinitItem(item: HTMLElement): void {
+    const handles = this.itemHandles.get(item) ?? [];
+    for (const handle of handles) {
+      this.removeAllListeners(handle);
+    }
+
+    const checkbox = this.itemCheckboxes.get(item);
+    if (checkbox) {
+      this.removeAllListeners(checkbox);
+    }
+
+    this.removeAllListeners(item);
+
+    this.itemHandles.delete(item);
+    this.itemCheckboxes.delete(item);
+    if (itemOwners.get(item) === this) {
+      itemOwners.delete(item);
+    }
+
+    if (this.$focusedItem === item) {
+      this.$focusedItem = null;
+    }
+    if (this.$focusable === item) {
+      this.$focusable = null;
+    }
+  }
+
+  /** Resolve the handle element(s) for an item from the `handle` setting. */
+  private _resolveHandles(item: HTMLElement): HTMLElement[] {
+    const handle = this.settings!.handle;
+    if (!handle) {
+      return [item];
+    }
+    if (typeof handle === 'string') {
+      return Array.from(item.querySelectorAll<HTMLElement>(handle));
+    }
+    if (typeof handle === 'function') {
+      const resolved = handle(item);
+      return this._toElements(resolved);
+    }
+    return this._toElements(handle);
+  }
+
+  private _toElements(
+    value: HTMLElement | HTMLElement[] | null
+  ): HTMLElement[] {
+    if (!value) {
+      return [];
+    }
+    return Array.isArray(value) ? value.filter(Boolean) : [value];
+  }
+
+  /** Filter check for `mousedown`/`keydown` — the direct `filter(target)` form. */
+  private _passesFilter(target: EventTarget | null): boolean {
+    const filter = this.settings!.filter;
+    if (!filter) {
+      return true;
+    }
+    if (typeof filter === 'function') {
+      return filter(target);
+    }
+    return target instanceof Element && target.matches(filter);
+  }
+
+  /**
+   * Filter check for `mouseup`, replicating legacy `$(target).is(filter)`:
+   * jQuery `.is(fn)` invokes `fn(index, element)` with `this === element`, a
+   * different call shape than {@link _passesFilter}. Preserved for exact parity.
+   */
+  private _passesFilterIs(target: EventTarget | null): boolean {
+    const filter = this.settings!.filter;
+    if (!filter) {
+      return true;
+    }
+    if (typeof filter === 'function') {
+      return !!(filter as (this: unknown, ...a: unknown[]) => unknown).call(
+        target,
+        0,
+        target
+      );
+    }
+    return target instanceof Element && target.matches(filter);
+  }
+
+  /** Sort a subset of items into current DOM order (for {@link resetItemOrder}). */
+  private _sortByDomOrder(items: HTMLElement[]): HTMLElement[] {
+    return [...items].sort((a, b) => {
+      const pos = a.compareDocumentPosition(b);
+      if (pos & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (pos & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+}
diff --git a/packages/craftcms-garnish/src/utils/dom.ts b/packages/craftcms-garnish/src/utils/dom.ts
index 12cff613dad..c200fc8bce5 100644
--- a/packages/craftcms-garnish/src/utils/dom.ts
+++ b/packages/craftcms-garnish/src/utils/dom.ts
@@ -61,6 +61,47 @@ export function hasAttr(elem: Element, attr: string): boolean {
   return elem.hasAttribute(attr);
 }
 
+/**
+ * The nearest sibling matching `selector` in the given direction, or `null`.
+ * Skips any intervening siblings that don't match — a directional analogue of
+ * `Element.closest()` scoped to siblings.
+ */
+export function nearestSibling(
+  elem: Element,
+  selector: string,
+  direction: 'previous' | 'next'
+): HTMLElement | null {
+  const step = (node: Element): Element | null =>
+    direction === 'previous'
+      ? node.previousElementSibling
+      : node.nextElementSibling;
+
+  for (let sibling = step(elem); sibling; sibling = step(sibling)) {
+    if (sibling.matches(selector)) {
+      return sibling as HTMLElement;
+    }
+  }
+  return null;
+}
+
+/**
+ * The value registered in `registry` for the nearest ancestor of `elem`
+ * (self excluded), or `null` — the native, WeakMap-keyed counterpart to
+ * jQuery's `$el.closest(sel).data(key)` back-reference lookup.
+ */
+export function closestRegistered<T>(
+  elem: Element,
+  registry: WeakMap<Element, T>
+): T | null {
+  for (let node = elem.parentElement; node; node = node.parentElement) {
+    const value = registry.get(node);
+    if (value !== undefined) {
+      return value;
+    }
+  }
+  return null;
+}
+
 /**
  * Offset of an element relative to the document, adjusted for a non-window
  * scroll container (parity with legacy `getOffset`).
diff --git a/packages/craftcms-garnish/src/utils/index.ts b/packages/craftcms-garnish/src/utils/index.ts
index 2031091f153..5a47b47ffbd 100644
--- a/packages/craftcms-garnish/src/utils/index.ts
+++ b/packages/craftcms-garnish/src/utils/index.ts
@@ -6,6 +6,8 @@ export {
   coerceElements,
   getElement,
   hasAttr,
+  nearestSibling,
+  closestRegistered,
   getOffset,
   getOuterWidth,
   getOuterHeight,
diff --git a/packages/craftcms-garnish/tests/select.test.ts b/packages/craftcms-garnish/tests/select.test.ts
new file mode 100644
index 00000000000..eb5a34e9e7d
--- /dev/null
+++ b/packages/craftcms-garnish/tests/select.test.ts
@@ -0,0 +1,164 @@
+import {afterEach, describe, expect, it} from 'vitest';
+
+import {Select} from '../src/select';
+
+// happy-dom has no layout, so the 2D-geometry navigation (`getClosestItem`,
+// which reads `getBoundingClientRect`/`offset*`) isn't exercised here — these
+// tests cover the pointer-driven selection model (click / shift / ctrl), item
+// membership, filtering, and teardown, which is what `<craft-component-select>`
+// relies on.
+
+function makeItem(): HTMLElement {
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  return el;
+}
+
+function fireMouse(
+  el: EventTarget,
+  type: string,
+  opts: MouseEventInit = {}
+): void {
+  el.dispatchEvent(new MouseEvent(type, {bubbles: true, button: 0, ...opts}));
+}
+
+/** A plain click = mousedown then mouseup (Select resolves clicks across both). */
+function click(el: HTMLElement, opts: MouseEventInit = {}): void {
+  fireMouse(el, 'mousedown', opts);
+  fireMouse(el, 'mouseup', opts);
+}
+
+describe('Select', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('selects an item on click', () => {
+    const a = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a]);
+
+    click(a);
+
+    expect(a.classList.contains('sel')).toBe(true);
+    expect(select.getSelectedItems()).toEqual([a]);
+
+    select.destroy();
+  });
+
+  it('extends a contiguous range with shift-click (multi)', () => {
+    const a = makeItem();
+    const b = makeItem();
+    const c = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a, b, c]);
+
+    click(a);
+    click(c, {shiftKey: true});
+
+    expect(select.getSelectedItems()).toEqual([a, b, c]);
+
+    select.destroy();
+  });
+
+  it('toggles individual items with ⌘/ctrl-click (multi)', () => {
+    const a = makeItem();
+    const b = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a, b]);
+
+    click(a);
+    click(b, {metaKey: true, ctrlKey: true});
+    expect(select.getSelectedItems()).toEqual([a, b]);
+
+    click(b, {metaKey: true, ctrlKey: true});
+    expect(select.getSelectedItems()).toEqual([a]);
+
+    select.destroy();
+  });
+
+  it('replaces the selection when multi is off', () => {
+    const a = makeItem();
+    const b = makeItem();
+    const select = new Select({multi: false});
+    select.addItems([a, b]);
+
+    click(a);
+    click(b);
+
+    expect(select.getSelectedItems()).toEqual([b]);
+    expect(a.classList.contains('sel')).toBe(false);
+
+    select.destroy();
+  });
+
+  it('drops removed items from the selection and item list', () => {
+    const a = makeItem();
+    const b = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a, b]);
+
+    click(a);
+    click(b, {shiftKey: true});
+    expect(select.getSelectedItems()).toEqual([a, b]);
+
+    select.removeItems(b);
+
+    expect(select.getSelectedItems()).toEqual([a]);
+    expect(select.$items).toEqual([a]);
+
+    select.destroy();
+  });
+
+  it('honors a function filter (clicks on excluded targets do not select)', () => {
+    const a = makeItem();
+    const btn = document.createElement('button');
+    a.appendChild(btn);
+
+    const select = new Select({
+      multi: true,
+      filter: (target) =>
+        !(target instanceof Element && target.closest('button')),
+    });
+    select.addItems([a]);
+
+    // A click originating on the button is filtered out.
+    click(btn);
+    expect(select.getSelectedItems()).toEqual([]);
+
+    // A click on the item body selects it.
+    click(a);
+    expect(select.getSelectedItems()).toEqual([a]);
+
+    select.destroy();
+  });
+
+  it('deselectAll clears the selection and its classes', () => {
+    const a = makeItem();
+    const b = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a, b]);
+
+    click(a);
+    click(b, {shiftKey: true});
+
+    select.deselectAll();
+
+    expect(select.getSelectedItems()).toEqual([]);
+    expect(a.classList.contains('sel')).toBe(false);
+    expect(b.classList.contains('sel')).toBe(false);
+
+    select.destroy();
+  });
+
+  it('does not re-add an item this select already owns', () => {
+    const a = makeItem();
+    const select = new Select({multi: true});
+    select.addItems([a]);
+    select.addItems([a]);
+
+    expect(select.$items).toEqual([a]);
+
+    select.destroy();
+  });
+});
diff --git a/packages/craftcms-garnish/tests/utils.test.ts b/packages/craftcms-garnish/tests/utils.test.ts
index 8dd976b2efd..524c22f3602 100644
--- a/packages/craftcms-garnish/tests/utils.test.ts
+++ b/packages/craftcms-garnish/tests/utils.test.ts
@@ -2,7 +2,7 @@ import {describe, expect, it} from 'vitest';
 
 import {getDist, within, isString, isTextNode} from '../src/utils/misc';
 import {getInputPostVal, getPostData, findInputs} from '../src/utils/forms';
-import {hasAttr} from '../src/utils/dom';
+import {hasAttr, nearestSibling, closestRegistered} from '../src/utils/dom';
 
 describe('misc utils', () => {
   it('getDist computes Euclidean distance', () => {
@@ -30,6 +30,34 @@ describe('dom utils', () => {
     el.setAttribute('href', '/x');
     expect(hasAttr(el, 'href')).toBe(true);
   });
+
+  it('nearestSibling skips non-matching siblings in each direction', () => {
+    const ul = document.createElement('ul');
+    ul.innerHTML =
+      '<li class="g" id="a"></li><li class="sep"></li><li class="g" id="b"></li><span></span><li class="g" id="c"></li>';
+    const b = ul.querySelector<HTMLElement>('#b')!;
+    expect(nearestSibling(b, 'li.g', 'previous')?.id).toBe('a');
+    expect(nearestSibling(b, 'li.g', 'next')?.id).toBe('c');
+    expect(
+      nearestSibling(ul.querySelector('#a')!, 'li.g', 'previous')
+    ).toBeNull();
+    expect(nearestSibling(ul.querySelector('#c')!, 'li.g', 'next')).toBeNull();
+  });
+
+  it('closestRegistered returns the nearest registered ancestor (self excluded)', () => {
+    const registry = new WeakMap<Element, string>();
+    const outer = document.createElement('div');
+    const inner = document.createElement('div');
+    const leaf = document.createElement('span');
+    outer.appendChild(inner);
+    inner.appendChild(leaf);
+    registry.set(outer, 'outer');
+    registry.set(inner, 'inner');
+    expect(closestRegistered(leaf, registry)).toBe('inner');
+    registry.set(leaf, 'leaf');
+    expect(closestRegistered(leaf, registry)).toBe('inner');
+    expect(closestRegistered(document.createElement('p'), registry)).toBeNull();
+  });
 });
 
 describe('forms utils', () => {
diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index e46532ab329..e145fefc0d9 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -63,15 +63,12 @@ import './js/ElementFieldSettings.js';
 import './js/ElementTableSorter.js';
 import './js/EntryIndex.js';
 import './js/EntrySelectInput.js';
-import './js/EntryTypeSelectInput.js';
 import './js/EnvVarGenerator.js';
 import './js/EntryMover.js';
 import './js/FormObserver.js';
 import './js/VolumeFolderSelectorModal.js';
 import './js/FieldToggle.js';
 import './js/Grid.js';
-import './js/GroupedEntryTypeManager.js';
-import './js/GroupedEntryTypeSelectInput.js';
 import './js/HandleGenerator.js';
 import './js/IconPicker.js';
 import './js/ImageUpload.js';
diff --git a/packages/craftcms-legacy/cp/src/css/_craft-disclosure.scss b/packages/craftcms-legacy/cp/src/css/_craft-disclosure.scss
deleted file mode 100644
index 43cd953bf2b..00000000000
--- a/packages/craftcms-legacy/cp/src/css/_craft-disclosure.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-craft-disclosure {
-  --disclosure-icon-transform: rotate(0deg);
-  --disclosure-icon-transform-active: rotate(-90deg);
-  display: contents;
-
-  [aria-expanded='true'] .cp-icon {
-    transform: var(--disclosure-icon-transform);
-  }
-}
-
-craft-disclosure [aria-expanded='false'] .cp-icon {
-  transform: var(--disclosure-icon-transform-active);
-}
-
-body.rtl craft-disclosure {
-  --disclosure-icon-transform-active: rotate(90deg);
-}
diff --git a/packages/craftcms-legacy/cp/src/css/_main.scss b/packages/craftcms-legacy/cp/src/css/_main.scss
index c718607b831..fe15bc4070b 100644
--- a/packages/craftcms-legacy/cp/src/css/_main.scss
+++ b/packages/craftcms-legacy/cp/src/css/_main.scss
@@ -1174,10 +1174,6 @@ i em {
   }
 }
 
-input.checkbox + label.smalltext {
-  padding-block-start: 2px;
-}
-
 .required::after {
   content: 'asterisk';
   margin-inline: 5px 0;
@@ -1839,10 +1835,6 @@ ul.icons {
     }
   }
 
-  div.checkbox {
-    margin-block-start: 2px;
-  }
-
   &.copyable {
     color: var(--fg-subtle);
 
@@ -4324,6 +4316,15 @@ table:not(.cp-table) {
   }
 }
 
+// Each chip's `<craft-chip>` box is `inline-flex`, so in a block list item it
+// lays out in a line box and picks up baseline leading — and the flex baseline
+// shifts with the prefix, so a chip with no icon/status renders ~11px taller
+// than one with. Making the `li` a flex container blockifies the chip (no line
+// box, no baseline), keeping every chip the same height.
+.componentselect .chips > li {
+  display: flex;
+}
+
 /* element select fields */
 .elementselect {
   position: relative;
@@ -7358,114 +7359,6 @@ textarea.text.fullwidth {
   }
 }
 
-input.checkbox {
-  opacity: 0;
-  position: absolute;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-
-  & + label:has(> .text) {
-    &::before {
-      inset-block-start: 6px;
-    }
-  }
-}
-
-input.checkbox + label,
-div.checkbox {
-  display: inline-block;
-  clear: none;
-  position: relative;
-  padding-inline-start: calc(var(--checkbox-size) + 0.35rem);
-  line-height: max(1rem, var(--checkbox-size));
-  min-height: max(1rem, var(--checkbox-size));
-  cursor: pointer;
-
-  &,
-  &::before {
-    // set the border radius on the container too, for (some) focus rings
-    border-radius: var(--input-border-radius);
-  }
-
-  &::before {
-    display: block;
-    position: absolute;
-    inset-inline-start: 0;
-    inset-block-start: 0;
-    width: var(--checkbox-size) !important;
-    height: var(--checkbox-size);
-    box-sizing: border-box;
-    content: '';
-    font-size: 0;
-    background-color: hsl(212deg 50% 99%);
-    border: var(--input-border);
-    background-clip: padding-box;
-  }
-
-  &:empty {
-    padding-inline-start: var(--checkbox-size);
-
-    &::after {
-      content: '';
-      font-size: 0;
-    }
-  }
-
-  .info {
-    height: 17px;
-    margin-block-start: -1px;
-  }
-}
-
-input.checkbox:disabled + label,
-.disabled div.checkbox {
-  cursor: not-allowed;
-}
-
-input.checkbox:checked + label::before,
-div.checkbox.checked::before,
-.sel div.checkbox::before,
-input.checkbox:indeterminate + label::before,
-div.checkbox.indeterminate::before,
-.elementselectormodal
-  .body
-  .content
-  .main
-  .elements
-  .disabled
-  .checkbox::before {
-  @include mixins.icon;
-  line-height: var(--checkbox-size);
-  color: var(--gray-900);
-}
-
-input.checkbox:checked:not(:indeterminate) + label::before,
-div.checkbox.checked:not(.indeterminate)::before,
-.sel:not(.matrixblock) div.checkbox:not(.indeterminate)::before,
-.sel.matrixblock > .actions div.checkbox:not(.indeterminate)::before,
-.elementselectormodal
-  .body
-  .content
-  .main
-  .elements
-  .disabled
-  .checkbox::before {
-  content: 'check' / '';
-  font-size: calc(var(--checkbox-size) * 0.8);
-}
-
-input.checkbox:indeterminate + label::before,
-div.checkbox.indeterminate::before {
-  content: 'minus';
-  font-size: 7px;
-  text-align: center;
-}
-
-input.checkbox:focus-visible + label::before,
-div.checkbox:focus-visible > ::before {
-  @include mixins.input-focused-styles;
-}
-
 .checkbox-icon {
   display: inline-flex;
   padding: 3px;
diff --git a/packages/craftcms-legacy/cp/src/css/craft.scss b/packages/craftcms-legacy/cp/src/css/craft.scss
index 4628c523337..28ed3f8603c 100644
--- a/packages/craftcms-legacy/cp/src/css/craft.scss
+++ b/packages/craftcms-legacy/cp/src/css/craft.scss
@@ -11,7 +11,6 @@
 @import 'cp';
 @import 'range';
 @import 'global-sidebar';
-@import 'craft-disclosure';
 @import 'craft-spinner';
 @import 'craft-tooltip';
 @import 'preview';
diff --git a/packages/craftcms-legacy/cp/src/js/ComponentSelectInput.js b/packages/craftcms-legacy/cp/src/js/ComponentSelectInput.js
index b2ac736cb3f..6b423b0ba92 100644
--- a/packages/craftcms-legacy/cp/src/js/ComponentSelectInput.js
+++ b/packages/craftcms-legacy/cp/src/js/ComponentSelectInput.js
@@ -264,33 +264,43 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
         Craft.addActionsToChip($component, actions);
 
         const disclosureMenu = this.getDisclosureMenu($component);
-        const moveForwardBtn = disclosureMenu.$container.find(
-          '[data-move-forward]'
-        )[0];
-        const moveBackwardBtn = disclosureMenu.$container.find(
-          '[data-move-backward]'
-        )[0];
-
-        disclosureMenu.on('show', () => {
-          const $li = $component.parent();
-          const $prev = $li.prev('li:has(.chip)');
-          const $next = $li.next('li:has(.chip)');
-
-          if (moveForwardBtn) {
-            disclosureMenu.toggleItem(moveForwardBtn, $prev.length);
-          }
-          if (moveBackwardBtn) {
-            disclosureMenu.toggleItem(moveBackwardBtn, $next.length);
-          }
-        });
 
-        this.addListener($component, 'dblclick,taphold', (ev) => {
-          // don't open the edit slideout if we are tapholding to drag
-          if (ev.type === 'taphold' && ev.target.nodeName === 'BUTTON') {
-            return;
-          }
-          disclosureMenu.$container.find('[data-edit-action]').click();
-        });
+        if (disclosureMenu) {
+          const moveForwardBtn = disclosureMenu.$container.find(
+            '[data-move-forward]'
+          )[0];
+          const moveBackwardBtn = disclosureMenu.$container.find(
+            '[data-move-backward]'
+          )[0];
+
+          // On the modern craft-action-menu shape, `on()`/`toggleItem()` are
+          // no-ops (see `getDisclosureMenu()`) — there's no real
+          // `Garnish.DisclosureMenu` "show" event to hook, so the move
+          // items just stay visible rather than toggling based on
+          // position. Move actions aren't part of the new self-booting
+          // `<craft-component-select>` at all; this only matters for
+          // legacy-path (`jsClass`) selects.
+          disclosureMenu.on('show', () => {
+            const $li = $component.parent();
+            const $prev = $li.prev('li:has(.chip)');
+            const $next = $li.next('li:has(.chip)');
+
+            if (moveForwardBtn) {
+              disclosureMenu.toggleItem(moveForwardBtn, $prev.length);
+            }
+            if (moveBackwardBtn) {
+              disclosureMenu.toggleItem(moveBackwardBtn, $next.length);
+            }
+          });
+
+          this.addListener($component, 'dblclick,taphold', (ev) => {
+            // don't open the edit slideout if we are tapholding to drag
+            if (ev.type === 'taphold' && ev.target.nodeName === 'BUTTON') {
+              return;
+            }
+            disclosureMenu.$container.find('[data-edit-action]').click();
+          });
+        }
       }
 
       if (this.settings.sortable && Craft.hasMousePointerEvents()) {
@@ -327,12 +337,17 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
             axis === 'y'
               ? Craft.t('app', 'Move up')
               : Craft.t('app', 'Move forward'),
-          onActivate: (el) => {
-            // don't use `this` in case the chip ends up getting assigned to a different component select
-            $(el)
-              .closest('.menu')
-              .data('disclosureMenu')
-              .$trigger.closest('.componentselect')
+          onActivate: () => {
+            // Resolve from `$component` (the chip), not `this` — in case the
+            // chip ends up getting assigned to a different component select.
+            // `$component` stays put in the DOM even when the menu it's
+            // opened from gets relocated (both the legacy
+            // `Garnish.DisclosureMenu` and Lion's overlay, which backs
+            // `craft-action-menu`, move their open content elsewhere in the
+            // document), so traversing from it — rather than from the
+            // clicked item — works for either action-menu shape.
+            $component
+              .closest('.componentselect')
               .data('componentSelect')
               .moveComponentForward($component);
           },
@@ -353,12 +368,10 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
             axis === 'y'
               ? Craft.t('app', 'Move down')
               : Craft.t('app', 'Move backward'),
-          onActivate: (el) => {
-            // don't use `this` in case the chip ends up getting assigned to a different component select
-            $(el)
-              .closest('.menu')
-              .data('disclosureMenu')
-              .$trigger.closest('.componentselect')
+          onActivate: () => {
+            // See the Move-forward comment above.
+            $component
+              .closest('.componentselect')
               .data('componentSelect')
               .moveComponentBackward($component);
           },
@@ -371,12 +384,10 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
       actions.push({
         icon: async () => await Craft.ui.icon('remove'),
         label: Craft.t('app', 'Remove'),
-        onActivate: (el) => {
-          // don't use `this` in case the chip ends up getting assigned to a different component select
-          $(el)
-            .closest('.menu')
-            .data('disclosureMenu')
-            .$trigger.closest('.componentselect')
+        onActivate: () => {
+          // See the Move-forward comment above.
+          $component
+            .closest('.componentselect')
             .data('componentSelect')
             .removeComponent($component);
         },
@@ -398,11 +409,65 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
       return actions;
     },
 
+    /**
+     * Resolves the chip's action menu, in whichever shape it's in.
+     *
+     * For the legacy disclosure-menu shape (old `div.chip`, or a
+     * `[data-disclosure-trigger]` a plugin still renders into the suffix
+     * slot), this returns the real `Garnish.DisclosureMenu` instance.
+     *
+     * For the modern self-booting `<craft-action-menu>` (what
+     * `ElementHtml::componentActionMenu()` renders now), there's no
+     * `Garnish.DisclosureMenu` to return — this returns a minimal shim
+     * instead, covering what this class actually relies on:
+     *
+     * - `$container`: the `[slot="content"]` node, for
+     *   `[data-edit-action]`/`[data-move-forward]`/`[data-move-backward]`
+     *   lookups.
+     * - `hideItem(el)`: functional — sets the modern `hidden` attribute
+     *   (the same consumer-owned-visibility channel used elsewhere), since
+     *   `EntryTypeSelectInput` calls it synchronously to hide the edit
+     *   action.
+     * - `on()`/`off()`/`toggleItem()`: no-ops. There's no real "show" event
+     *   to hook (`craft-action-menu` doesn't fire a Garnish-style `show`),
+     *   so the move-item visibility toggling in `addComponentInternal()`
+     *   simply never runs — the move items just stay visible. Move actions
+     *   aren't part of the new `<craft-component-select>` at all; this only
+     *   affects legacy-path (`jsClass`) selects using the modern chip
+     *   markup.
+     */
     getDisclosureMenu: function ($component) {
-      return $component
-        .find('> .chip-content > .chip-actions .action-btn')
-        .disclosureMenu()
-        .data('disclosureMenu');
+      const $trigger = $component
+        .find(
+          '> .chip-content > .chip-actions .action-btn, [slot="suffix"] [data-disclosure-trigger]'
+        )
+        .first();
+
+      if ($trigger.length) {
+        return $trigger.disclosureMenu().data('disclosureMenu');
+      }
+
+      const actionMenu = $component
+        .find('[slot="suffix"] craft-action-menu')
+        .get(0);
+      if (!actionMenu) {
+        return null;
+      }
+
+      let $content = $(actionMenu).children('[slot="content"]').first();
+      if (!$content.length) {
+        $content = $(actionMenu);
+      }
+
+      return {
+        $container: $content,
+        on: () => {},
+        off: () => {},
+        toggleItem: () => {},
+        hideItem: (el) => {
+          $(el).attr('hidden', '');
+        },
+      };
     },
 
     onChange() {
@@ -565,7 +630,10 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
       await Craft.appendHeadHtml(data.headHtml);
       await Craft.appendBodyHtml(data.bodyHtml);
 
-      if (this.settings.showDescription && $item) {
+      if ($item) {
+        // Initialize the chip's UI elements (its action menu's
+        // disclosure trigger, info icons, …). Chips rendered with the
+        // page get this from the global boot pass; fetched chips don't.
         Craft.initUiElements($item);
       }
     },
diff --git a/packages/craftcms-legacy/cp/src/js/Craft.js b/packages/craftcms-legacy/cp/src/js/Craft.js
index 1ff729651d2..451745e31b8 100644
--- a/packages/craftcms-legacy/cp/src/js/Craft.js
+++ b/packages/craftcms-legacy/cp/src/js/Craft.js
@@ -2472,6 +2472,23 @@ $.extend(Craft, {
   /**
    * Adds actions to a chip or card.
    *
+   * Supports both action-menu shapes:
+   *
+   * - The modern self-booting `<craft-action-menu>`, as rendered by
+   *   `ElementHtml::componentActionMenu()` (chips' `[slot="suffix"]`, or a
+   *   card's `.card-actions`) — `craft-action-item`s are built from the
+   *   action descriptors and injected into its `[slot="content"]`. These
+   *   self-boot, so no `Craft.initUiElements()` pass is required — which is
+   *   what makes this safe to call on chips fetched over AJAX.
+   * - The legacy jQuery `disclosureMenu()` shape (old `div.chip`/card
+   *   markup, or a plugin that still renders it that way).
+   *
+   * When neither shape is present yet (e.g. the chip's action menu was
+   * disabled at render time), a new `<craft-action-menu>` is built if a
+   * recognized container exists to hang it on; otherwise the legacy
+   * button + disclosure-menu markup is built from scratch, matching the
+   * pre-existing fallback.
+   *
    * @param {jQuery|HTMLElement} chip
    * @param {Array} actions
    * @param {boolean} [prepend]
@@ -2481,30 +2498,41 @@ $.extend(Craft, {
       return;
     }
 
-    // Try old-style chip/card containers first
-    let $actions = $(chip).find(
-      '> .chip-content > .chip-actions, > .card-titlebar > .card-actions-container > .card-actions'
-    );
+    // Whichever action container already exists: the modern craft-chip's
+    // `[slot="suffix"]`, or the (chip or card) `*-actions` container from
+    // either markup generation.
+    const $container = $(chip)
+      .find(
+        '> [slot="suffix"], > .chip-content > .chip-actions, > .card-titlebar > .card-actions-container > .card-actions'
+      )
+      .first();
+
+    // An existing modern menu — the common case for anything rendered by
+    // `ElementHtml::componentActionMenu()`.
+    let $actionMenu = $container.find('> craft-action-menu').first();
+    if ($actionMenu.length) {
+      this._addActionsToActionMenu($actionMenu.get(0), actions, prepend);
+      return;
+    }
 
-    let $actionMenuBtn;
+    // An existing legacy trigger — old markup, or a plugin that still
+    // renders the disclosure-menu shape.
+    let $actionMenuBtn = $container
+      .find('.action-btn, [data-disclosure-trigger]')
+      .first()
+      .removeClass('hidden');
 
-    if ($actions.length) {
-      // Old div.chip — look for existing .action-btn
-      $actionMenuBtn = $actions.find('.action-btn').removeClass('hidden');
-    } else {
-      // New craft-chip — look in [slot="suffix"] for an existing disclosure trigger
-      const $suffixSlot = $(chip).children('[slot="suffix"]');
-      if ($suffixSlot.length) {
-        $actions = $suffixSlot;
-        $actionMenuBtn = $actions
-          .find('[data-disclosure-trigger]')
-          .first()
-          .removeClass('hidden');
+    if (!$actionMenuBtn.length) {
+      if ($container.length) {
+        // A recognized container exists but has no menu yet — build a
+        // modern one.
+        $actionMenu = this._buildActionMenu().appendTo($container);
+        this._addActionsToActionMenu($actionMenu.get(0), actions, prepend);
+        return;
       }
-    }
 
-    if (!$actionMenuBtn?.length) {
-      // No existing action button — create one and wire it up
+      // No container at all — very old/custom markup. Build the legacy
+      // button + disclosure menu from scratch.
       const menuId = `actions-${Math.floor(Math.random() * 1000000)}`;
       const labelId = `${menuId}-label`;
       const $label = $('<label/>', {
@@ -2525,17 +2553,9 @@ $.extend(Craft, {
         class: 'menu menu--disclosure',
       });
 
-      if ($actions?.length) {
-        // Append into the found container (old chip-actions or [slot="suffix"])
-        $label.appendTo($actions);
-        $actionMenuBtn.appendTo($actions);
-        $menu.appendTo($actions);
-      } else {
-        // No container found — create a chip-actions div and append to the chip
-        const $newContainer = $('<div/>', {class: 'chip-actions'});
-        $newContainer.append($label, $actionMenuBtn, $menu);
-        $(chip).append($newContainer);
-      }
+      const $newContainer = $('<div/>', {class: 'chip-actions'});
+      $newContainer.append($label, $actionMenuBtn, $menu);
+      $(chip).append($newContainer);
     }
 
     const disclosureMenu = $actionMenuBtn
@@ -2566,6 +2586,131 @@ $.extend(Craft, {
     Craft.initUiElements(disclosureMenu.$container);
   },
 
+  /**
+   * Builds a new (empty) `<craft-action-menu>` with the standard "Actions"
+   * invoker — the same markup `ElementHtml::componentActionMenu()` renders —
+   * for chips/cards whose action menu wasn't pre-rendered (e.g.
+   * `showActionMenu: false`) but still need actions added client-side.
+   *
+   * @returns {jQuery}
+   */
+  _buildActionMenu() {
+    const $invoker = $('<craft-button/>', {
+      type: 'button',
+      slot: 'invoker',
+      appearance: 'plain',
+      variant: 'inherit',
+      size: 'small',
+      icon: '',
+      'aria-label': Craft.t('app', 'Actions'),
+    });
+    $('<craft-icon/>', {name: 'ellipsis'}).appendTo($invoker);
+
+    const $content = $('<div/>', {slot: 'content'});
+
+    return $('<craft-action-menu/>').append($invoker, $content);
+  },
+
+  /**
+   * Builds `craft-action-item`s from the same action-descriptor shape the
+   * jQuery `disclosureMenu()` plugin accepts (`icon`/`label`/`onActivate`/
+   * `callback`/`attributes`/`destructive`) and adds them to `actionMenu`'s
+   * `[slot="content"]` (creating it if missing). Safe actions come first,
+   * destructive ones after a separator, mirroring `disclosureMenuItems()`'s
+   * server-side grouping.
+   *
+   * Clicking an injected item closes the menu: `craft-action-menu` only
+   * auto-closes for default-slot items, and these live in the content
+   * container, so a `close-overlay` event is dispatched manually (mirrors
+   * `component-select.ts`'s Choose menu).
+   *
+   * @param {HTMLElement} actionMenu
+   * @param {Array} actions
+   * @param {boolean} [prepend]
+   * @returns {Promise<void>}
+   */
+  async _addActionsToActionMenu(actionMenu, actions, prepend = false) {
+    let $content = $(actionMenu).children('[slot="content"]').first();
+    if (!$content.length) {
+      $content = $('<div/>', {slot: 'content'}).appendTo(actionMenu);
+    }
+
+    const buildItem = async (action) => {
+      const item = document.createElement('craft-action-item');
+
+      if (action.destructive) {
+        item.setAttribute('variant', 'danger');
+      }
+
+      if (action.attributes) {
+        Craft.setElementAttributes(item, action.attributes);
+      }
+
+      if (action.icon) {
+        if (typeof action.icon === 'string') {
+          // A `data-icon`-style icon *name* — craft-action-item resolves it
+          // itself via <craft-icon>.
+          item.setAttribute('icon', action.icon);
+        } else {
+          // An Element, or an (async) factory returning one (e.g.
+          // `Craft.ui.icon()`) — slot it in directly.
+          const icon =
+            typeof action.icon === 'function'
+              ? await action.icon()
+              : action.icon;
+          if (icon instanceof Element) {
+            icon.setAttribute('slot', 'icon');
+            item.append(icon);
+          }
+        }
+      }
+
+      if (action.label) {
+        item.append(document.createTextNode(action.label));
+      }
+
+      const handler = action.onActivate || action.callback;
+      item.addEventListener('click', () => {
+        if (!item.disabled) {
+          handler?.(item);
+        }
+        item.dispatchEvent(new Event('close-overlay', {bubbles: true}));
+      });
+
+      return item;
+    };
+
+    const safeActions = actions.filter((a) => !a.destructive);
+    const destructiveActions = actions.filter((a) => a.destructive);
+
+    const [safeItems, destructiveItems] = await Promise.all([
+      Promise.all(safeActions.map(buildItem)),
+      Promise.all(destructiveActions.map(buildItem)),
+    ]);
+
+    const nodes = [...safeItems];
+
+    if (destructiveItems.length) {
+      if (safeItems.length || $content.children().length) {
+        const hr = document.createElement('hr');
+        hr.className = 'action-menu__separator';
+        Object.assign(hr.style, {
+          margin: '0',
+          border: '0',
+          borderBlockStart: '1px solid var(--c-color-neutral-border-quiet)',
+        });
+        nodes.push(hr);
+      }
+      nodes.push(...destructiveItems);
+    }
+
+    if (prepend) {
+      $content.prepend(nodes);
+    } else {
+      $content.append(nodes);
+    }
+  },
+
   /**
    * Submits a form.
    * @param {Object} $form
@@ -3256,3 +3401,17 @@ Garnish.NiceText.charsLeftHtml = (charsLeft) => {
 Garnish.$doc.ready(function () {
   Craft.initUiElements();
 });
+
+// Legacy compat: a lot of core action-menu items (Asset, Entry, User, Field,
+// Matrix, …) still attach custom behavior to a menu item via
+// `$('#' + id).on('activate', ...)` — the old `Garnish.DisclosureMenu`
+// item-selection event. `craft-action-item`s rendered by
+// `ElementHtml::componentActionMenu()` keep that same `id`, so a single
+// delegated listener re-dispatches a native click as `activate` for
+// anything still listening. It's a document-level delegate (not a
+// `Craft.initUiElements()` pass), so it keeps working for fetched/injected
+// chips too — items with no `activate` listener just get a harmless no-op
+// trigger.
+$(document).on('click', 'craft-action-item[id]', function () {
+  $(this).trigger('activate');
+});
diff --git a/packages/craftcms-legacy/cp/src/js/CraftDisclosure.js b/packages/craftcms-legacy/cp/src/js/CraftDisclosure.js
deleted file mode 100644
index d49d2975f9c..00000000000
--- a/packages/craftcms-legacy/cp/src/js/CraftDisclosure.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Very simple disclosure trigger.
- *
- * Allows you to wrap a button[type="button"] and target an element to toggle the `data-state` attribute on.
- * Set `aria-expanded` on the button
- */
-class CraftDisclosure extends HTMLElement {
-  static observedAttributes = ['state'];
-
-  get trigger() {
-    return this.querySelector('button[type="button"]');
-  }
-
-  get target() {
-    const trigger = this.trigger;
-    if (trigger) {
-      return document.getElementById(trigger.getAttribute('aria-controls'));
-    }
-  }
-
-  connectedCallback() {
-    const trigger = this.trigger;
-    if (!trigger) {
-      console.error(`craft-disclosure elements must include a button`, this);
-      return;
-    }
-
-    if (!this.target) {
-      console.error(
-        `No target with id ${trigger.getAttribute(
-          'aria-controls'
-        )} found for disclosure. `,
-        trigger
-      );
-      return;
-    }
-
-    this.storageKey =
-      this.getAttribute('storage-key') ||
-      `disclosure:${trigger.getAttribute('aria-controls')}`;
-    this.storageMode = this.getAttribute('storage-mode') || 'localStorage';
-    this.persist = this.hasAttribute('persist');
-
-    this.state = this.getInitialState();
-
-    if (!trigger.getAttribute('aria-expanded')) {
-      trigger.setAttribute('aria-expanded', 'false');
-    }
-
-    trigger.addEventListener('click', this.toggle.bind(this));
-
-    this.state === 'expanded' ? this.open() : this.close();
-  }
-
-  disconnectedCallback() {
-    this.open();
-    this.trigger.removeEventListener('click', this.toggle.bind(this));
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'state') {
-      if (newValue === 'expanded') {
-        this.handleOpen();
-      } else {
-        this.handleClose();
-      }
-    }
-  }
-
-  toggle(event) {
-    event.preventDefault();
-
-    if (this.expanded) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  getInitialState() {
-    if (this.persist) {
-      if (this.storageMode === 'localStorage') {
-        return localStorage.getItem(this.storageKey) || 'expanded';
-      } else if (this.storageMode === 'cookies') {
-        return Craft.getCookie(this.storageKey) || 'expanded';
-      }
-    }
-
-    if (this.getAttribute('state')) {
-      return this.getAttribute('state');
-    }
-
-    return 'expanded';
-  }
-
-  storeState(state) {
-    if (this.storageMode === 'localStorage') {
-      localStorage.setItem(this.storageKey, state);
-    } else if (this.storageMode === 'cookies') {
-      Craft.setCookie(this.storageKey, state);
-    }
-  }
-
-  handleOpen = () => {
-    const trigger = this.trigger;
-    const target = this.target;
-    if (trigger) {
-      trigger.setAttribute('aria-expanded', 'true');
-    }
-    this.expanded = true;
-    if (target) {
-      target.dataset.state = 'expanded';
-    }
-    this.dispatchEvent(new CustomEvent('open'));
-
-    this.storeState('expanded');
-  };
-
-  open() {
-    this.setAttribute('state', 'expanded');
-  }
-
-  handleClose = () => {
-    const trigger = this.trigger;
-    const target = this.target;
-    if (trigger) {
-      trigger.setAttribute('aria-expanded', 'false');
-    }
-    this.expanded = false;
-    if (target) {
-      target.dataset.state = 'collapsed';
-    }
-    this.dispatchEvent(new CustomEvent('close'));
-
-    this.storeState('collapsed');
-  };
-
-  close() {
-    this.setAttribute('state', 'collapsed');
-  }
-}
-
-customElements.define('craft-legacy-disclosure', CraftDisclosure);
diff --git a/packages/craftcms-legacy/cp/src/js/EntryTypeSelectInput.js b/packages/craftcms-legacy/cp/src/js/EntryTypeSelectInput.js
deleted file mode 100644
index d9de6702c14..00000000000
--- a/packages/craftcms-legacy/cp/src/js/EntryTypeSelectInput.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/** global: $ */
-/** global: jQuery */
-
-/**
- * Base component select input
- */
-Craft.EntryTypeSelectInput = Craft.ComponentSelectInput.extend(
-  {
-    init: function (settings = {}) {
-      this.base(
-        Object.assign({}, Craft.EntryTypeSelectInput.defaults, settings)
-      );
-    },
-
-    addComponentInternal: function ($component) {
-      if (this.settings.allowOverrides) {
-        const disclosureMenu = this.getDisclosureMenu($component);
-        const $editBtn = disclosureMenu.$container.find('[data-edit-action]');
-        if ($editBtn.length) {
-          disclosureMenu.hideItem($editBtn[0]);
-        }
-        if (this.settings.addItemsToActionMenus) {
-          Craft.addActionsToChip(
-            $component,
-            [
-              {
-                icon: async () => await Craft.ui.icon('gear'),
-                label: Craft.t('app', 'Settings'),
-                onActivate: (el) => {
-                  $(el)
-                    .closest('.menu')
-                    .data('disclosureMenu')
-                    .$trigger.closest('.componentselect')
-                    .data('componentSelect')
-                    .createSettings($component);
-                },
-              },
-            ],
-            true
-          );
-        }
-      }
-
-      this.base($component);
-    },
-
-    createSettings: async function ($component) {
-      let data;
-      try {
-        const response = await Craft.sendActionRequest(
-          'POST',
-          'entry-types/render-override-settings',
-          {
-            data: JSON.parse($component.find('input').val()),
-          }
-        );
-        data = response.data;
-      } catch (e) {
-        Craft.cp.displayError(e?.response?.data?.message);
-        throw e;
-      }
-
-      const settingsNamespace = data.namespace;
-      const slideout = await this.createSlideout(data);
-
-      slideout.$container.on('submit', (ev) => {
-        ev.preventDefault();
-        this.applySettings($component, slideout, settingsNamespace);
-      });
-      slideout.on('close', () => {
-        slideout.destroy();
-      });
-
-      this.trigger('createSettings');
-    },
-
-    async createSlideout(data) {
-      const $body = $('<div/>', {class: 'entry-type-override-settings-body'});
-      $('<div/>', {class: 'fields', html: data.settingsHtml}).appendTo($body);
-      const $footer = $('<div/>', {
-        class: 'entry-type-override-settings-footer',
-      });
-      $('<div/>', {class: 'flex-grow'}).appendTo($footer);
-      const $cancelBtn = Craft.ui
-        .createButton({
-          label: Craft.t('app', 'Close'),
-          spinner: true,
-        })
-        .appendTo($footer);
-      Craft.ui
-        .createSubmitButton({
-          class: 'secondary',
-          label: Craft.t('app', 'Apply'),
-          spinner: true,
-        })
-        .appendTo($footer);
-      const $contents = $body.add($footer);
-
-      const slideout = new Craft.Slideout($contents, {
-        containerElement: 'form',
-        containerAttributes: {
-          action: '',
-          method: 'post',
-          novalidate: '',
-          class: 'entry-type-override-settings',
-        },
-      });
-      slideout.on('open', () => {
-        // Hold off a sec until it's positioned...
-        Garnish.requestAnimationFrame(() => {
-          // Focus on the first text input
-          slideout.$container.find('.text:first').focus();
-        });
-      });
-
-      $cancelBtn.on('click', () => {
-        slideout.close();
-      });
-
-      if (data.headHtml) {
-        await Craft.appendHeadHtml(data.headHtml);
-      }
-      if (data.bodyHtml) {
-        await Craft.appendBodyHtml(data.bodyHtml);
-      }
-
-      Craft.initUiElements(slideout.$container);
-
-      return slideout;
-    },
-
-    async applySettings($component, slideout, settingsNamespace) {
-      // update the UI
-      let $submitBtn = slideout.$container
-        .find('button[type=submit]')
-        .addClass('loading');
-
-      // clear errors
-      slideout.$container.find('.field.has-errors').each((i, field) => {
-        const $field = $(field);
-        $field.removeClass('has-errors');
-        $field.children('.input').removeClass('errors prevalidate');
-        $field.children('ul.errors').remove();
-      });
-
-      try {
-        let data;
-
-        try {
-          const response = await Craft.sendActionRequest(
-            'POST',
-            'entry-types/apply-override-settings',
-            {
-              data: {
-                id: $component.data('id'),
-                settingsNamespace,
-                settings: slideout.$container.serialize(),
-              },
-            }
-          );
-          data = response.data;
-        } catch (e) {
-          let errors = e?.response?.data?.errors;
-          if (errors) {
-            Object.entries(errors).forEach(([name, fieldErrors]) => {
-              const $field = slideout.$container.find(
-                `[data-error-key="${name}"]`
-              );
-              if ($field.length) {
-                Craft.ui.addErrorsToField($field, fieldErrors);
-              }
-            });
-          }
-
-          Craft.cp.displayError(e?.response?.data?.message);
-          throw e;
-        }
-
-        const $newContainer = $(data.chipHtml);
-        $component
-          .find('.chip-label')
-          .replaceWith($newContainer.find('.chip-label'));
-
-        // Update the input with the new config, but keep the old group value around
-        const $input = $component.find('input');
-        const config = {...data.config};
-        const group = JSON.parse($input.val()).group;
-        if (group) {
-          config.group = group;
-        }
-        $input.val(JSON.stringify(config));
-
-        Craft.initUiElements($component);
-
-        this.trigger('applySettings');
-
-        slideout.close();
-        slideout.destroy();
-      } finally {
-        $submitBtn.removeClass('loading');
-      }
-    },
-
-    renderSettings: function (id) {
-      return Object.assign(this.base(), {
-        inputValue: this.settings.allowOverrides ? JSON.stringify({id}) : null,
-      });
-    },
-  },
-  {
-    defaults: {
-      allowOverrides: false,
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeManager.js b/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeManager.js
deleted file mode 100644
index 2acd7f0fa4d..00000000000
--- a/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeManager.js
+++ /dev/null
@@ -1,351 +0,0 @@
-(function ($) {
-  /** global: Craft */
-  /** global: Garnish */
-  /**
-   * Matrix settings class
-   */
-  Craft.GroupedEntryTypeManager = Garnish.Base.extend(
-    {
-      $container: null,
-      $groupsContainer: null,
-      $addGroupBtn: null,
-      groups: null,
-      groupSort: null,
-      entryTypeSort: null,
-
-      init: function ($container, settings = {}) {
-        this.$container = $container;
-        this.setSettings(settings, Craft.GroupedEntryTypeManager.defaults);
-
-        this.$container.data('entryTypeManager', this);
-
-        this.$groupsContainer = $container.find('.entry-type-groups');
-        this.$addGroupBtn = Craft.ui
-          .createButton({
-            class: 'dashed',
-            label: Craft.t('app', 'Add Group'),
-            icon: 'plus',
-          })
-          .appendTo(this.$container);
-
-        if (Craft.hasMousePointerEvents()) {
-          this.groupSort = new Garnish.DragSort({
-            container: this.$groupsContainer,
-            handle:
-              '> .entry-type-group--titlebar > .entry-type-group--actions > .move',
-            ignoreHandleSelector: null,
-            magnetStrength: 4,
-            helperLagBase: 1.5,
-          });
-
-          this.entryTypeSort = new Garnish.DragSort({
-            container: this.$groupsContainer,
-            ignoreHandleSelector: null,
-            handle: '> .chip > .chip-content > .chip-actions > .move',
-            collapseDraggees: true,
-            magnetStrength: 4,
-            helperLagBase: 1.5,
-            canInsertAfter: ($item) =>
-              !$item.hasClass('entry-type-group--caboose'),
-            onSortChange: () => {
-              this.refresh();
-            },
-          });
-        } else {
-          $('.entry-type-manager .move').hide();
-        }
-
-        this.groups = [];
-
-        const $groups = this.$groupsContainer.children('.entry-type-group');
-        $groups.each((i, container) => {
-          this.groups.push(
-            new Craft.GroupedEntryTypeManager.Group(this, $(container))
-          );
-        });
-
-        this.addListener(this.$addGroupBtn, 'activate', () => {
-          this.addGroup();
-        });
-      },
-
-      addGroup: async function () {
-        const name = prompt(Craft.t('app', 'Group Name'));
-        if (name === null || name === '') {
-          return;
-        }
-
-        const $container = $('<li/>', {
-          class: 'entry-type-group',
-          'data-name': name,
-        }).appendTo(this.$groupsContainer);
-        const $titlebar = $('<div/>', {
-          class: 'entry-type-group--titlebar',
-        }).appendTo($container);
-        $('<span/>', {
-          text: name,
-        }).appendTo($titlebar);
-
-        const tempId = Craft.namespaceId('TEMP_ID', this.settings.namespace);
-        const id = Craft.namespaceId(
-          `entry-type-select-${Math.floor(Math.random() * 1000000)}`,
-          this.settings.namespace
-        );
-        const selectContainerHtml =
-          this.settings.entryTypeSelectHtml.replaceAll(tempId, id);
-        const selectContainerJs = this.settings.entryTypeSelectJs.replaceAll(
-          tempId,
-          id
-        );
-        $(selectContainerHtml).appendTo($container);
-        await Craft.appendBodyHtml(selectContainerJs);
-        const group = new Craft.GroupedEntryTypeManager.Group(this, $container);
-        this.groups.push(group);
-
-        this.groups
-          .filter((g) => g !== group)
-          .forEach((g) => {
-            g.componentSelect.$components.each((i, c) => {
-              group.componentSelect.hideOption($(c).data('id'), false);
-            });
-          });
-      },
-
-      updateDefaultColumns: function () {
-        const values = this.settings.$defaultColumnsContainer
-          .find('input:checked')
-          .toArray()
-          .map((input) => input.value);
-        Craft.sendActionRequest('POST', 'matrix/default-table-column-options', {
-          data: {
-            entryTypeIds: this.groups
-              .map((g) => g.componentSelect.getSelectedComponentIds())
-              .flat(),
-          },
-        }).then(({data}) => {
-          this.settings.$defaultColumnsContainer.empty().append(
-            Craft.ui.createSortableCheckboxSelect({
-              name: Craft.namespaceInputName(
-                'defaultTableColumns',
-                this.settings.namespace
-              ),
-              options: data.options,
-              values: values,
-            })
-          );
-        });
-      },
-
-      refresh: function () {
-        this.groups.forEach((group) => {
-          group.refresh();
-        });
-      },
-    },
-    {
-      defaults: {
-        $defaultColumnsContainer: null,
-        namespace: null,
-        entryTypeSelectHtml: null,
-        entryTypeSelectJs: null,
-      },
-    }
-  );
-
-  Craft.GroupedEntryTypeManager.Group = Garnish.Base.extend({
-    manager: null,
-    $container: null,
-    $titlebar: null,
-    $headingContainer: null,
-    $dragHandle: null,
-    componentSelect: null,
-
-    init: function (manager, $container) {
-      this.manager = manager;
-      this.$container = $container;
-
-      this.$container.data('entryTypeGroup', this);
-
-      this.$titlebar = $container.find('.entry-type-group--titlebar');
-      this.$headingContainer = this.$titlebar.children('span');
-      const $actionsContainer = $('<div/>', {
-        class: 'entry-type-group--actions',
-      }).appendTo(this.$titlebar);
-
-      const menuId = `menu-${Math.floor(Math.random() * 1000000)}`;
-      const $menuButton = Craft.ui
-        .createButton({
-          class: 'menubtn action-btn',
-          controls: menuId,
-          ariaLabel: Craft.t('app', 'Actions'),
-        })
-        .attr('data-disclosure-trigger', 'true')
-        .appendTo($actionsContainer);
-      $('<div/>', {
-        id: menuId,
-        class: 'menu menu--disclosure',
-      }).appendTo($actionsContainer);
-      const disclosureMenu = $menuButton
-        .disclosureMenu()
-        .data('disclosureMenu');
-
-      disclosureMenu.addItem({
-        icon: async () => await Craft.ui.icon('pencil'),
-        label: Craft.t('app', 'Rename'),
-        onActivate: () => {
-          this.showNamePrompt();
-        },
-      });
-
-      disclosureMenu.addGroup();
-
-      const moveBackwardBtn = disclosureMenu.addItem({
-        icon: async () =>
-          await Craft.ui.icon(
-            Craft.orientation === 'ltr' ? 'arrow-left' : 'arrow-right'
-          ),
-        label: Craft.t('app', 'Move backward'),
-        onActivate: () => {
-          this.moveBackward();
-        },
-        attributes: {
-          'data-move-backward': true,
-        },
-      });
-
-      const moveForwardBtn = disclosureMenu.addItem({
-        icon: async () =>
-          await Craft.ui.icon(
-            Craft.orientation === 'ltr' ? 'arrow-right' : 'arrow-left'
-          ),
-        label: Craft.t('app', 'Move forward'),
-        onActivate: () => {
-          this.moveForward();
-        },
-        attributes: {
-          'data-move-forward': true,
-        },
-      });
-
-      disclosureMenu.addGroup();
-
-      disclosureMenu.addItem({
-        icon: 'remove',
-        label: Craft.t('app', 'Remove'),
-        destructive: true,
-        onActivate: () => {
-          this.remove();
-        },
-      });
-
-      disclosureMenu.on('show', () => {
-        const $prev = this.$container.prev('li.entry-type-group');
-        const $next = this.$container.next('li.entry-type-group');
-        disclosureMenu.toggleItem(moveBackwardBtn, $prev.length);
-        disclosureMenu.toggleItem(moveForwardBtn, $next.length);
-      });
-
-      this.componentSelect = this.$container
-        .find('.componentselect')
-        .data('componentSelect');
-
-      this.manager.entryTypeSort?.addItems(
-        this.componentSelect.$components.parent('li')
-      );
-      const $caboose = $('<li/>', {
-        class: 'entry-type-group--caboose',
-      }).appendTo(this.componentSelect.$list);
-      this.manager.entryTypeSort?.addItems($caboose);
-
-      this.componentSelect.on('change', () => {
-        this.manager.updateDefaultColumns();
-      });
-
-      if (Craft.hasMousePointerEvents()) {
-        this.$dragHandle = $('<button/>', {
-          type: 'button',
-          class: 'icon move',
-          title: Craft.t('app', 'Reorder'),
-          'aria-label': Craft.t('app', 'Reorder'),
-        }).appendTo($actionsContainer);
-      }
-
-      this.manager.groupSort?.addItems(this.$container);
-    },
-
-    get name() {
-      return this.$container.data('name');
-    },
-
-    showNamePrompt: function () {
-      const name = prompt(Craft.t('app', 'Group Name'), this.name);
-      if (name === null || name === '') {
-        return;
-      }
-
-      this.$container.data('name', name);
-
-      this.$headingContainer.text(name);
-
-      this.componentSelect.$components.each((i, chip) => {
-        const $chip = $(chip);
-        const $input = $chip.find('input');
-        const value = JSON.parse($input.val());
-        value.group = name;
-        $input.val(JSON.stringify(value));
-      });
-    },
-
-    moveBackward: function () {
-      const $prev = this.$container.prev('.entry-type-group');
-      if ($prev.length) {
-        this.$container.insertBefore($prev);
-      }
-    },
-
-    moveForward: function () {
-      const $next = this.$container.next('.entry-type-group');
-      if ($next.length) {
-        this.$container.insertAfter($next);
-      }
-    },
-
-    refresh: function () {
-      this.componentSelect.destroy();
-
-      setTimeout(() => {
-        this.componentSelect = new Craft.GroupedEntryTypeSelectInput(
-          Object.assign(this.componentSelect.settings, {
-            addItemsToActionMenus: false,
-          })
-        );
-
-        this.componentSelect.settings.addItemsToActionMenus = true;
-
-        this.componentSelect.$components.each((i, chip) => {
-          const $input = $(chip).find('input');
-          $input.val(
-            JSON.stringify(
-              Object.assign(JSON.parse($input.val()), {
-                group: this.name,
-              })
-            )
-          );
-        });
-      }, 1);
-    },
-
-    remove: function () {
-      this.componentSelect.removeComponents(this.componentSelect.$components);
-      this.manager.groups = this.manager.groups.filter((g) => g !== this);
-      this.$container.remove();
-      this.destroy();
-    },
-
-    destroy: function () {
-      this.componentSelect.destroy();
-      delete this.componentSelect;
-      this.base();
-    },
-  });
-})(jQuery);
diff --git a/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeSelectInput.js b/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeSelectInput.js
deleted file mode 100644
index 96e344429f4..00000000000
--- a/packages/craftcms-legacy/cp/src/js/GroupedEntryTypeSelectInput.js
+++ /dev/null
@@ -1,205 +0,0 @@
-(function ($) {
-  /** global: Craft */
-  /** global: Garnish */
-  /**
-   * Grouped entry type select input
-   */
-  Craft.GroupedEntryTypeSelectInput = Craft.EntryTypeSelectInput.extend({
-    init: function (settings = {}) {
-      this.base(settings);
-    },
-
-    /**
-     * @returns {Craft.GroupedEntryTypeManager.Group|null}
-     */
-    get group() {
-      return this.$container
-        .closest('.entry-type-group')
-        ?.data('entryTypeGroup');
-    },
-
-    /**
-     * @returns {Craft.GroupedEntryTypeManager|null}
-     */
-    get manager() {
-      return this.group?.manager;
-    },
-
-    initComponentSort: function () {
-      // use the manager's entryTypeSort instead
-    },
-
-    renderSettings: function (id) {
-      return Object.assign(this.base(), {
-        inputValue: JSON.stringify({
-          id,
-          group: this.group.name,
-        }),
-      });
-    },
-
-    insertComponent: function ($component) {
-      $('<li/>')
-        .append($component)
-        .insertBefore(this.$list.find('.entry-type-group--caboose'));
-    },
-
-    addComponents: function ($components) {
-      this.base($components);
-      this.manager?.entryTypeSort?.addItems($components.parent('li'));
-    },
-
-    addComponentInternal: function ($component) {
-      this.base($component);
-
-      if (this.settings.addItemsToActionMenus) {
-        const disclosureMenu = this.getDisclosureMenu($component);
-        const moveToPreviousGroupBtn = disclosureMenu.$container.find(
-          '[data-move-to-previous-group]'
-        )[0];
-        const moveToNextGroupBtn = disclosureMenu.$container.find(
-          '[data-move-to-next-group]'
-        )[0];
-
-        disclosureMenu.on('show', () => {
-          const $group = $component.closest('.entry-type-group');
-          const $prev = $group.prev('li.entry-type-group');
-          const $next = $group.next('li.entry-type-group');
-
-          if (moveToPreviousGroupBtn) {
-            disclosureMenu.toggleItem(moveToPreviousGroupBtn, $prev.length);
-          }
-          if (moveToNextGroupBtn) {
-            disclosureMenu.toggleItem(moveToNextGroupBtn, $next.length);
-          }
-        });
-      }
-    },
-
-    defineComponentActions: function ($component) {
-      const actions = this.base($component);
-
-      const lastMoveAction = actions.findLastIndex(
-        (a) => a.attributes && a.attributes['data-move-backward']
-      );
-
-      const moveActions = [
-        {
-          icon: async () =>
-            await Craft.ui.icon(
-              Craft.orientation === 'ltr' ? 'arrow-left' : 'arrow-right'
-            ),
-          label: Craft.t('app', 'Move to previous group'),
-          onActivate: (el) => {
-            // don't use `this` in case the chip ends up getting assigned to a different component select
-            $(el)
-              .closest('.menu')
-              .data('disclosureMenu')
-              .$trigger.closest('.componentselect')
-              .data('componentSelect')
-              .moveEntryTypeToPreviousGroup($component);
-          },
-          attributes: {
-            'data-move-to-previous-group': true,
-          },
-        },
-        {
-          icon: async () =>
-            await Craft.ui.icon(
-              Craft.orientation === 'ltr' ? 'arrow-right' : 'arrow-left'
-            ),
-          label: Craft.t('app', 'Move to next group'),
-          callback: (el) => {
-            // don't use `this` in case the chip ends up getting assigned to a different component select
-            $(el)
-              .closest('.menu')
-              .data('disclosureMenu')
-              .$trigger.closest('.componentselect')
-              .data('componentSelect')
-              .moveEntryTypeToNextGroup($component);
-          },
-          attributes: {
-            'data-move-to-next-group': true,
-          },
-        },
-      ];
-
-      if (lastMoveAction !== -1) {
-        actions.splice(lastMoveAction, 0, ...moveActions);
-      } else {
-        actions.push(...moveActions);
-      }
-
-      return actions;
-    },
-
-    moveEntryTypeToPreviousGroup: function ($entryType) {
-      const $li = $entryType.closest('li');
-      const $group = $li.closest('.entry-type-group');
-      const $prev = $group.prev('.entry-type-group');
-      if ($prev.length) {
-        $li.insertBefore(
-          $prev
-            .data('entryTypeGroup')
-            .componentSelect.$list.find('.entry-type-group--caboose')
-        );
-        this.manager.refresh();
-      }
-    },
-
-    moveEntryTypeToNextGroup: function ($entryType) {
-      const $li = $entryType.closest('li');
-      const $group = $li.closest('.entry-type-group');
-      const $next = $group.next('.entry-type-group');
-      if ($next.length) {
-        $li.insertBefore(
-          $next
-            .data('entryTypeGroup')
-            .componentSelect.$list.find('.entry-type-group--caboose')
-        );
-        this.manager.refresh();
-      }
-    },
-
-    showOption: function (id, propagate = true) {
-      this.base(id);
-
-      // also show in the other component selects
-      if (propagate) {
-        const updateOtherGroups = () => {
-          this.manager.groups.forEach((group) => {
-            if (group.componentSelect !== this) {
-              group.componentSelect.showOption(id, false);
-            }
-          });
-        };
-
-        if (this.manager) {
-          updateOtherGroups();
-        } else {
-          // try again once the UI is done initializing
-          setTimeout(() => {
-            if (this.manager) {
-              updateOtherGroups();
-            }
-          }, 1);
-        }
-      }
-    },
-
-    hideOption: function (id, propagate = true) {
-      this.base(id);
-
-      if (propagate) {
-        // also hide in the other component selects
-        setTimeout(() => {
-          this.manager.groups.forEach((group) => {
-            if (group.componentSelect !== this) {
-              group.componentSelect.hideOption(id, false);
-            }
-          });
-        }, 1);
-      }
-    },
-  });
-})(jQuery);
diff --git a/packages/craftcms-ui/scripts/generate-vue-wrappers.js b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
index 1030fdbf836..abc11461b03 100644
--- a/packages/craftcms-ui/scripts/generate-vue-wrappers.js
+++ b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
@@ -241,6 +241,20 @@ const GROUP_COMPONENTS = [
   },
 ];
 
+/**
+ * Chrome-only components with no model value of their own. The wrapper only
+ * bridges an `error` prop into the feedback slot; everything else (including
+ * the wrapped control) passes through via $attrs and the default slot.
+ */
+const CHROME_COMPONENTS = [
+  {
+    tagName: 'craft-field',
+    className: 'CraftField',
+    fileName: 'CraftField',
+    importPath: '../components/field/field',
+  },
+];
+
 /**
  * Select rich component — uses modelValue like VALUE_COMPONENTS but needs
  * a custom wrapper template for additional behaviour.
@@ -391,6 +405,36 @@ function generateGroupWrapper(component) {
 `;
 }
 
+function generateChromeWrapper(component) {
+  return `<!--
+  Auto-generated Vue wrapper for <${component.tagName}>
+  Chrome-only shell (no v-model); bridges an error prop into the feedback slot.
+  Generated by: scripts/generate-vue-wrappers.js
+-->
+<script setup lang="ts">
+  defineOptions({
+    name: '${component.className}',
+  });
+
+  defineProps<{
+    error?: null | string
+  }>()
+</script>
+
+<template>
+  <${component.tagName} v-bind="$attrs">
+    <slot></slot>
+
+    <div slot="feedback">
+      <ul class="error-list" v-if="error">
+        <li>{{ error }}</li>
+      </ul>
+    </div>
+  </${component.tagName}>
+</template>
+`;
+}
+
 function generateSelectRichWrapper(component) {
   return `<!--
   Auto-generated Vue wrapper for <${component.tagName}>
@@ -480,6 +524,19 @@ export default _default;
 `;
 }
 
+function generateChromeDeclaration(component) {
+  return `/**
+ * Auto-generated type declaration for ${component.fileName}.vue
+ * Generated by: scripts/generate-vue-wrappers.js
+ */
+import type {DefineComponent} from 'vue';
+declare const _default: DefineComponent<{
+  error?: string | null;
+}>;
+export default _default;
+`;
+}
+
 function generateGroupDeclaration(component) {
   return `/**
  * Auto-generated type declaration for ${component.fileName}.vue
@@ -508,6 +565,8 @@ const ALL_COMPONENTS = [
   ...CHECKED_COMPONENTS,
   // Form components (groups)
   ...GROUP_COMPONENTS,
+  // Field chrome shell
+  ...CHROME_COMPONENTS,
   // Choice inputs used inside groups (not typically needing v-model wrappers)
   {
     tagName: 'craft-radio',
@@ -756,6 +815,18 @@ export default function main() {
     count++;
   }
 
+  // Generate chrome-only wrappers
+  for (const component of CHROME_COMPONENTS) {
+    const content = generateChromeWrapper(component);
+    const filePath = resolve(VUE_DIR, `${component.fileName}.vue`);
+    writeFileSync(filePath, content);
+    const declContent = generateChromeDeclaration(component);
+    const declPath = resolve(VUE_DIR, `${component.fileName}.vue.d.ts`);
+    writeFileSync(declPath, declContent);
+    console.log(`  Generated: ${VUE_DIR}/${component.fileName}.vue`);
+    count++;
+  }
+
   // Generate select-rich wrapper
   {
     const component = SELECT_RICH_COMPONENT;
diff --git a/packages/craftcms-ui/src/components/action-item/action-item.styles.ts b/packages/craftcms-ui/src/components/action-item/action-item.styles.ts
index dde550d0166..dbf5a8c322d 100644
--- a/packages/craftcms-ui/src/components/action-item/action-item.styles.ts
+++ b/packages/craftcms-ui/src/components/action-item/action-item.styles.ts
@@ -5,6 +5,10 @@ export default css`
     display: contents;
   }
 
+  :host([hidden]) {
+    display: none;
+  }
+
   .action-item {
     border-color: var(--c-color-border-quiet, transparent);
     color: var(--c-color-on-quiet, inherit);
diff --git a/packages/craftcms-ui/src/components/action-item/action-item.ts b/packages/craftcms-ui/src/components/action-item/action-item.ts
index 07a9408cf32..4cdc614923a 100644
--- a/packages/craftcms-ui/src/components/action-item/action-item.ts
+++ b/packages/craftcms-ui/src/components/action-item/action-item.ts
@@ -19,13 +19,24 @@ import {Variant, type VariantValue} from '@src/constants/variants';
  */
 export default class CraftActionItem extends LitElement {
   static override styles = [variantsStyles, styles];
+
+  /**
+   * Delegate focus into the shadow root, so `host.focus()` (used by
+   * `craft-action-menu`'s keyboard navigation) lands on the internal
+   * button/anchor and native Enter/Space activation keeps working.
+   */
+  static override shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   @property() icon: string | null = null;
   /**
    * Optional Craft color name used to tint the item's icon. The icon renders
    * with `currentColor`, so we set the icon element's `color` to a matching
    * `--c-color-*` token.
    */
-  @property() iconColor: string | null = null;
+  @property({attribute: 'icon-color'}) iconColor: string | null = null;
   @property() href: string | null = null;
   @property({type: Boolean}) disabled: boolean = false;
   @property({reflect: true}) variant: VariantValue = Variant.Neutral;
@@ -34,7 +45,8 @@ export default class CraftActionItem extends LitElement {
   @property() type: 'button' | 'checkbox' = 'button';
   @property({type: Object}) action: BaseAction | null = null;
   @property({type: Object}) feedback: ActionFeedback | null = null;
-  @property({type: Number}) feedbackDuration: number = 1000;
+  @property({type: Number, attribute: 'feedback-duration'})
+  feedbackDuration: number = 1000;
   @property() confirm: string | null = null;
 
   @state() private state: AsyncState = AsyncStates.Idle;
diff --git a/packages/craftcms-ui/src/components/action-menu/action-menu.stories.ts b/packages/craftcms-ui/src/components/action-menu/action-menu.stories.ts
index 17375d7126e..71cdb1cb091 100644
--- a/packages/craftcms-ui/src/components/action-menu/action-menu.stories.ts
+++ b/packages/craftcms-ui/src/components/action-menu/action-menu.stories.ts
@@ -4,6 +4,8 @@ import {html} from 'lit';
 import {ref} from 'lit/directives/ref.js';
 
 import '../action-item/action-item.js';
+import '../button/button.js';
+import '../icon/icon.js';
 import './action-menu.js';
 import type CraftActionMenu from './action-menu.js';
 import type {ActionMenuItem} from './action-menu.types.js';
@@ -144,6 +146,103 @@ export const DataDrivenWithCustomInvoker: Story = {
     </craft-action-menu>`,
 };
 
+/**
+ * `searchable` adds a filter input to the top of the menu (slot-based mode).
+ * Items match on their visible text plus a `data-keywords` attribute — the
+ * channel for hidden search terms. Try typing "plainText": it matches the
+ * "Plain Text" item by its handle even though the visible label doesn't
+ * contain it.
+ */
+export const Searchable: Story = {
+  render: () =>
+    html`<craft-action-menu searchable>
+      <craft-button type="button" slot="invoker" appearance="secondary">
+        Add a field
+      </craft-button>
+
+      <div slot="content">
+        <craft-action-item icon="pen" data-keywords="plainText">
+          Plain Text
+        </craft-action-item>
+        <craft-action-item icon="caret-down" data-keywords="dropdown optedList">
+          Dropdown
+        </craft-action-item>
+        <craft-action-item icon="calendar" data-keywords="dateTime">
+          Date
+        </craft-action-item>
+        <craft-action-item icon="lightbulb" data-keywords="lightswitch boolean">
+          Lightswitch
+        </craft-action-item>
+        <craft-action-item icon="image" data-keywords="assets">
+          Assets
+        </craft-action-item>
+      </div>
+    </craft-action-menu>`,
+};
+
+/**
+ * `searchable` in data-driven mode: the `keywords` descriptor field is
+ * rendered onto the generated `craft-action-item` as `data-keywords`, so
+ * hidden terms (e.g. handles) match identically in both modes.
+ */
+export const SearchableDataDriven: Story = {
+  render: () => {
+    const actions: ActionMenuItem[] = [
+      {label: 'Plain Text', icon: 'pen', keywords: 'plainText'},
+      {label: 'Dropdown', icon: 'caret-down', keywords: 'dropdown optedList'},
+      {label: 'Date', icon: 'calendar', keywords: 'dateTime'},
+      {
+        label: 'Lightswitch',
+        icon: 'lightbulb',
+        keywords: 'lightswitch boolean',
+      },
+      {label: 'Assets', icon: 'image', keywords: 'assets'},
+    ];
+
+    return html`<craft-action-menu
+      searchable
+      .actions="${actions}"
+      label="Add a field"
+    ></craft-action-menu>`;
+  },
+};
+
+/**
+ * Search never overrides consumer-controlled visibility: items hidden with the
+ * `hidden` attribute stay hidden even when they match the query (filtering
+ * uses a separate `data-search-hidden` mechanism). This is how a consumer like
+ * component-select keeps already-selected options out of the menu while the
+ * user searches. "Dropdown" below is consumer-hidden — searching for it (or
+ * its keywords) never reveals it.
+ */
+export const SearchableWithHiddenItems: Story = {
+  render: () =>
+    html`<craft-action-menu searchable>
+      <craft-button type="button" slot="invoker" appearance="secondary">
+        Add a field
+      </craft-button>
+
+      <div slot="content">
+        <craft-action-item icon="pen" data-keywords="plainText">
+          Plain Text
+        </craft-action-item>
+        <craft-action-item
+          icon="caret-down"
+          data-keywords="dropdown optedList"
+          hidden
+        >
+          Dropdown
+        </craft-action-item>
+        <craft-action-item icon="calendar" data-keywords="dateTime">
+          Date
+        </craft-action-item>
+        <craft-action-item icon="image" data-keywords="assets">
+          Assets
+        </craft-action-item>
+      </div>
+    </craft-action-menu>`,
+};
+
 /**
  * Data-driven `display` item: the descriptor takes a DOM `Node` (or a function
  * returning one), not a framework component.
diff --git a/packages/craftcms-ui/src/components/action-menu/action-menu.test.ts b/packages/craftcms-ui/src/components/action-menu/action-menu.test.ts
new file mode 100644
index 00000000000..662c98a3645
--- /dev/null
+++ b/packages/craftcms-ui/src/components/action-menu/action-menu.test.ts
@@ -0,0 +1,423 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftActionMenu from './action-menu.js';
+import type CraftActionItem from '../action-item/action-item.js';
+import type {ActionMenuItem} from './action-menu.types.js';
+import './action-menu.js';
+
+/**
+ * Parses markup inertly and appends the complete subtree, matching how
+ * server-rendered islands reach the page — the element upgrades with its
+ * children present.
+ */
+async function createFromMarkup(markup: string): Promise<CraftActionMenu> {
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  document.body.append(template.content);
+  const element = document.body.querySelector(
+    'craft-action-menu'
+  ) as CraftActionMenu;
+  await element.updateComplete;
+  return element;
+}
+
+/** The slot-based fixture used by most filtering tests. */
+function slotBasedMarkup(attrs = 'searchable'): string {
+  return `
+    <craft-action-menu ${attrs}>
+      <button slot="invoker" type="button">Open</button>
+      <div slot="content">
+        <craft-action-item data-keywords="plainText">Plain Text</craft-action-item>
+        <craft-action-item data-keywords="dropdown optedList">Dropdown</craft-action-item>
+        <craft-action-item>Date</craft-action-item>
+      </div>
+    </craft-action-menu>
+  `;
+}
+
+function getSearchInput(element: CraftActionMenu): HTMLInputElement | null {
+  // Note: Lion moves the content node inside its overlay wrapper and strips
+  // the `slot` attribute, so query by the search container class instead.
+  return element.querySelector<HTMLInputElement>('.action-menu__search input');
+}
+
+function typeIntoSearch(element: CraftActionMenu, value: string): void {
+  const input = getSearchInput(element)!;
+  input.value = value;
+  input.dispatchEvent(new Event('input', {bubbles: true}));
+}
+
+function visibleLabels(element: CraftActionMenu): string[] {
+  return Array.from(element.querySelectorAll<HTMLElement>('craft-action-item'))
+    .filter((item) => !item.hasAttribute('data-search-hidden'))
+    .map((item) => item.textContent?.trim() ?? '');
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('searchable (slot-based)', () => {
+  it('inserts a search input at the top of the content when searchable', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+    const input = getSearchInput(element);
+
+    expect(input).not.toBeNull();
+    expect(input!.getAttribute('aria-label')).toBe('Search');
+    // The search container is the first child of the content node (the same
+    // container that holds the items).
+    const container = input!.closest('.action-menu__search')!;
+    const content = container.parentElement!;
+    expect(content.firstElementChild).toBe(container);
+    expect(content.querySelector('craft-action-item')).not.toBeNull();
+  });
+
+  it('does not insert a search input by default', async () => {
+    const element = await createFromMarkup(slotBasedMarkup(''));
+
+    expect(getSearchInput(element)).toBeNull();
+  });
+
+  it('filters items case-insensitively by text content', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+
+    typeIntoSearch(element, 'dROp');
+
+    expect(visibleLabels(element)).toEqual(['Dropdown']);
+  });
+
+  it('matches hidden terms via data-keywords', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+
+    // "plainText" appears in no visible label — only in data-keywords.
+    typeIntoSearch(element, 'plaintext');
+
+    expect(visibleLabels(element)).toEqual(['Plain Text']);
+  });
+
+  it('unhides items when the query is cleared', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+
+    typeIntoSearch(element, 'date');
+    expect(visibleLabels(element)).toEqual(['Date']);
+
+    typeIntoSearch(element, '');
+    expect(visibleLabels(element)).toEqual(['Plain Text', 'Dropdown', 'Date']);
+  });
+
+  it('never touches consumer-controlled visibility', async () => {
+    const element = await createFromMarkup(`
+      <craft-action-menu searchable>
+        <button slot="invoker" type="button">Open</button>
+        <div slot="content">
+          <craft-action-item hidden>Plain Text</craft-action-item>
+          <craft-action-item>Dropdown</craft-action-item>
+        </div>
+      </craft-action-menu>
+    `);
+    const hiddenItem = element.querySelector('craft-action-item[hidden]')!;
+
+    // A matching filter must not unhide the consumer-hidden item.
+    typeIntoSearch(element, 'plain');
+    expect(hiddenItem.hasAttribute('hidden')).toBe(true);
+    expect(hiddenItem.hasAttribute('data-search-hidden')).toBe(false);
+
+    // A non-matching filter hides via the dedicated attribute only.
+    typeIntoSearch(element, 'dropdown');
+    expect(hiddenItem.hasAttribute('data-search-hidden')).toBe(true);
+    expect(hiddenItem.hasAttribute('hidden')).toBe(true);
+  });
+
+  it('resets the filter when the menu closes', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+
+    element.opened = true;
+    await element.updateComplete;
+
+    typeIntoSearch(element, 'date');
+    expect(visibleLabels(element)).toEqual(['Date']);
+
+    element.opened = false;
+    await element.updateComplete;
+
+    expect(getSearchInput(element)!.value).toBe('');
+    expect(visibleLabels(element)).toEqual(['Plain Text', 'Dropdown', 'Date']);
+  });
+
+  it('clears the filter on Escape without closing the menu', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+    const input = getSearchInput(element)!;
+
+    typeIntoSearch(element, 'date');
+    expect(visibleLabels(element)).toEqual(['Date']);
+
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', {key: 'Escape', bubbles: true})
+    );
+
+    expect(input.value).toBe('');
+    expect(visibleLabels(element)).toEqual(['Plain Text', 'Dropdown', 'Date']);
+  });
+
+  it('removes the search input when searchable is turned off', async () => {
+    const element = await createFromMarkup(slotBasedMarkup());
+
+    typeIntoSearch(element, 'date');
+    element.searchable = false;
+    await element.updateComplete;
+
+    expect(getSearchInput(element)).toBeNull();
+    expect(visibleLabels(element)).toEqual(['Plain Text', 'Dropdown', 'Date']);
+  });
+
+  it('tolerates plain li items', async () => {
+    const element = await createFromMarkup(`
+      <craft-action-menu searchable>
+        <button slot="invoker" type="button">Open</button>
+        <ul slot="content">
+          <li data-keywords="alpha"><button type="button">One</button></li>
+          <li><button type="button">Two</button></li>
+        </ul>
+      </craft-action-menu>
+    `);
+    const items = Array.from(element.querySelectorAll('li'));
+
+    typeIntoSearch(element, 'alpha');
+
+    expect(items[0]!.hasAttribute('data-search-hidden')).toBe(false);
+    expect(items[1]!.hasAttribute('data-search-hidden')).toBe(true);
+    // The nested button is not filtered independently of its <li>.
+    expect(
+      items[1]!.querySelector('button')!.hasAttribute('data-search-hidden')
+    ).toBe(false);
+  });
+});
+
+describe('searchable (data-driven)', () => {
+  const actions: ActionMenuItem[] = [
+    {label: 'Plain Text', keywords: 'plainText'},
+    {label: 'Dropdown', keywords: 'dropdown optedList'},
+    {label: 'Date'},
+  ];
+
+  async function createDataDriven(): Promise<CraftActionMenu> {
+    const element = document.createElement(
+      'craft-action-menu'
+    ) as CraftActionMenu;
+    element.searchable = true;
+    element.actions = actions;
+    document.body.append(element);
+    await element.updateComplete;
+    return element;
+  }
+
+  it('renders keywords as a data-keywords attribute', async () => {
+    const element = await createDataDriven();
+    const item = Array.from(element.querySelectorAll('craft-action-item')).find(
+      (el) => el.textContent === 'Plain Text'
+    )!;
+
+    expect(item.getAttribute('data-keywords')).toBe('plainText');
+  });
+
+  it('inserts the search input into the generated content', async () => {
+    const element = await createDataDriven();
+
+    expect(getSearchInput(element)).not.toBeNull();
+  });
+
+  it('filters generated items by label and keywords', async () => {
+    const element = await createDataDriven();
+
+    typeIntoSearch(element, 'optedlist');
+    expect(visibleLabels(element)).toEqual(['Dropdown']);
+
+    typeIntoSearch(element, 'da');
+    expect(visibleLabels(element)).toEqual(['Date']);
+  });
+});
+
+describe('keyboard navigation', () => {
+  function pressKey(el: Element, key: string): KeyboardEvent {
+    const event = new KeyboardEvent('keydown', {
+      key,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    el.dispatchEvent(event);
+    return event;
+  }
+
+  /**
+   * happy-dom's focus fidelity for shadow hosts (delegatesFocus) is limited,
+   * so item-focus assertions record `focus()` calls instead of inspecting
+   * `document.activeElement`.
+   */
+  function spyOnItemFocus(element: CraftActionMenu): string[] {
+    const focused: string[] = [];
+    element.querySelectorAll('craft-action-item').forEach((item) => {
+      (item as CraftActionItem).focus = () => {
+        focused.push(item.textContent?.trim() ?? '');
+      };
+    });
+    return focused;
+  }
+
+  const keyboardMarkup = `
+    <craft-action-menu searchable>
+      <button slot="invoker" type="button">Open</button>
+      <div slot="content">
+        <craft-action-item>Plain Text</craft-action-item>
+        <craft-action-item>Dropdown</craft-action-item>
+        <craft-action-item>Date</craft-action-item>
+      </div>
+    </craft-action-menu>
+  `;
+
+  function getItem(element: CraftActionMenu, label: string): CraftActionItem {
+    return Array.from(element.querySelectorAll('craft-action-item')).find(
+      (item) => item.textContent?.trim() === label
+    ) as CraftActionItem;
+  }
+
+  it('ArrowDown from the search input focuses the first navigable item', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const focused = spyOnItemFocus(element);
+
+    const event = pressKey(getSearchInput(element)!, 'ArrowDown');
+
+    expect(focused).toEqual(['Plain Text']);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('ArrowUp from the search input focuses the last navigable item', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const focused = spyOnItemFocus(element);
+
+    pressKey(getSearchInput(element)!, 'ArrowUp');
+
+    expect(focused).toEqual(['Date']);
+  });
+
+  it('ArrowDown/ArrowUp move between items and wrap at the ends', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const focused = spyOnItemFocus(element);
+
+    pressKey(getItem(element, 'Plain Text'), 'ArrowDown');
+    pressKey(getItem(element, 'Date'), 'ArrowDown'); // wraps to first
+    pressKey(getItem(element, 'Plain Text'), 'ArrowUp'); // wraps to last
+
+    expect(focused).toEqual(['Dropdown', 'Plain Text', 'Date']);
+  });
+
+  it('Home/End jump to the first/last navigable item', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const focused = spyOnItemFocus(element);
+
+    pressKey(getItem(element, 'Dropdown'), 'End');
+    pressKey(getItem(element, 'Dropdown'), 'Home');
+
+    expect(focused).toEqual(['Date', 'Plain Text']);
+  });
+
+  it('skips consumer-hidden, filtered, and disabled items', async () => {
+    const element = await createFromMarkup(`
+      <craft-action-menu searchable>
+        <button slot="invoker" type="button">Open</button>
+        <div slot="content">
+          <craft-action-item>One</craft-action-item>
+          <craft-action-item hidden>Two</craft-action-item>
+          <craft-action-item disabled>Three</craft-action-item>
+          <craft-action-item>Four</craft-action-item>
+          <craft-action-item>Five</craft-action-item>
+        </div>
+      </craft-action-menu>
+    `);
+    getItem(element, 'Five').setAttribute('data-search-hidden', '');
+    const focused = spyOnItemFocus(element);
+
+    // Two (hidden), Three (disabled) and Five (filtered) are not navigable.
+    pressKey(getItem(element, 'One'), 'ArrowDown');
+    pressKey(getItem(element, 'Four'), 'ArrowDown'); // wraps past Five
+
+    expect(focused).toEqual(['Four', 'One']);
+  });
+
+  it('returns focus to the search input when typing on a focused item', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const input = getSearchInput(element)!;
+
+    const event = pressKey(getItem(element, 'Dropdown'), 'd');
+
+    expect(document.activeElement).toBe(input);
+    expect(input.value).toBe('d');
+    expect(event.defaultPrevented).toBe(true);
+    expect(visibleLabels(element)).toEqual(['Dropdown', 'Date']);
+
+    // Backspace deletes from the query.
+    pressKey(getItem(element, 'Dropdown'), 'Backspace');
+    expect(input.value).toBe('');
+    expect(visibleLabels(element)).toEqual(['Plain Text', 'Dropdown', 'Date']);
+  });
+
+  it('does not redirect modified or non-printable keys to the search input', async () => {
+    const element = await createFromMarkup(keyboardMarkup);
+    const input = getSearchInput(element)!;
+
+    const item = getItem(element, 'Dropdown');
+    item.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'c',
+        metaKey: true,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      })
+    );
+    pressKey(item, 'Enter');
+    pressKey(item, 'Tab');
+
+    expect(input.value).toBe('');
+    expect(document.activeElement).not.toBe(input);
+  });
+
+  it('does nothing on typing keys in non-searchable mode', async () => {
+    const element = await createFromMarkup(`
+      <craft-action-menu>
+        <button slot="invoker" type="button">Open</button>
+        <div slot="content">
+          <craft-action-item>One</craft-action-item>
+          <craft-action-item>Two</craft-action-item>
+        </div>
+      </craft-action-menu>
+    `);
+    const focused = spyOnItemFocus(element);
+
+    const typing = pressKey(getItem(element, 'One'), 'x');
+    expect(typing.defaultPrevented).toBe(false);
+
+    // Arrow navigation still works without a search input.
+    pressKey(getItem(element, 'One'), 'ArrowDown');
+    expect(focused).toEqual(['Two']);
+  });
+
+  it('focuses the first navigable item on open in non-searchable mode', async () => {
+    const element = await createFromMarkup(`
+      <craft-action-menu>
+        <button slot="invoker" type="button">Open</button>
+        <div slot="content">
+          <craft-action-item hidden>One</craft-action-item>
+          <craft-action-item>Two</craft-action-item>
+        </div>
+      </craft-action-menu>
+    `);
+    const focused = spyOnItemFocus(element);
+
+    element.opened = true;
+    await element.updateComplete;
+    // Lion dispatches `show` on the overlay controller asynchronously.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(focused).toEqual(['Two']);
+  });
+});
diff --git a/packages/craftcms-ui/src/components/action-menu/action-menu.ts b/packages/craftcms-ui/src/components/action-menu/action-menu.ts
index 9aa0b60f49f..f1f9863803d 100644
--- a/packages/craftcms-ui/src/components/action-menu/action-menu.ts
+++ b/packages/craftcms-ui/src/components/action-menu/action-menu.ts
@@ -49,6 +49,14 @@ export type {
  * the menu item layout. A consumer-slotted invoker always takes precedence over
  * the generated default.
  *
+ * Keyboard support follows the WAI-ARIA APG menu-button pattern (adapted —
+ * see `_onContentKeydown` and `_setupContent` for the roving-focus and ARIA
+ * trade-offs): on open, focus moves to the search input (`searchable`) or the
+ * first item; ArrowDown/ArrowUp move through the items (wrapping) and, from
+ * the search input, jump to the first/last item; Home/End jump to the ends;
+ * typing while an item is focused returns to the search input; Escape clears
+ * the filter first, then closes.
+ *
  * @slot invoker - Element that triggers the menu.
  * @slot content - Action items to be rendered in the menu.
  *
@@ -112,6 +120,16 @@ export default class CraftActionMenu extends CraftPopover {
    */
   @property({type: Boolean, reflect: true}) disabled = false;
 
+  /**
+   * Adds a search input to the top of the menu content that filters items as
+   * the user types. Works in both slot-based and data-driven modes. Items are
+   * matched case-insensitively against their text content plus an optional
+   * `data-keywords` attribute (the channel for hidden search terms such as
+   * handles; populated from the `keywords` descriptor field in data-driven
+   * mode). Defaults to `false`.
+   */
+  @property({type: Boolean, reflect: true}) searchable = false;
+
   @queryAssignedElements({slot: 'invoker'})
   invokerNodes!: HTMLElement[];
 
@@ -126,6 +144,18 @@ export default class CraftActionMenu extends CraftPopover {
   /** Generated light-DOM content container (data-driven mode only). */
   private _generatedContent: HTMLElement | null = null;
 
+  /** Generated light-DOM search container (only when `searchable`). */
+  private _searchContainer: HTMLElement | null = null;
+
+  /** The search input inside {@link _searchContainer}. */
+  private _searchInput: HTMLInputElement | null = null;
+
+  /**
+   * Whether the next Escape keyup should be swallowed because the matching
+   * keydown cleared the search filter (see {@link _onSearchKeydown}).
+   */
+  private _swallowNextEscUp = false;
+
   private _addEventListeners() {
     const content = this.contentNodes[0];
     if (!content) return;
@@ -191,17 +221,34 @@ export default class CraftActionMenu extends CraftPopover {
     const firstContent = this.contentNodes[0];
     if (firstContent) {
       firstContent.setAttribute('id', `content-${this.uid}`);
+      // Deliberately NOT `role="menu"`/`role="menuitem"` (WAI-ARIA APG menu
+      // pattern): each `craft-action-item` is its own shadow host, so a
+      // `menu` container here couldn't own `menuitem` children across the
+      // shadow boundaries without nesting them inside the items' internal
+      // (already interactive) buttons/links — and a search input isn't valid
+      // inside a `menu` either. Native button/link semantics are the
+      // semantically-safe fallback; the *keyboard behaviour* still follows
+      // the APG menu pattern (see `_onContentKeydown`).
       firstContent.setAttribute('role', 'none');
     }
+    this._wireContentKeydown();
   }
 
   override _setupOverlayCtrl() {
     super._setupOverlayCtrl();
+    // The controller dispatches `show` once the overlay is fully visible —
+    // the earliest point the search input can reliably receive focus.
+    this._overlayCtrl.addEventListener('show', this._onOverlayShow);
     this._setupInvoker();
     this._setupContent();
     this._addEventListeners();
   }
 
+  override _teardownOverlayCtrl() {
+    this._overlayCtrl?.removeEventListener('show', this._onOverlayShow);
+    super._teardownOverlayCtrl();
+  }
+
   override firstUpdated(changed: PropertyValues) {
     super.firstUpdated(changed);
     // craft-popover owns the shadow render, so wire the invoker slotchange
@@ -209,6 +256,10 @@ export default class CraftActionMenu extends CraftPopover {
     this.shadowRoot
       ?.querySelector<HTMLSlotElement>('slot[name="invoker"]')
       ?.addEventListener('slotchange', this._onInvokerSlotChange);
+    this.shadowRoot
+      ?.querySelector<HTMLSlotElement>('slot[name="content"]')
+      ?.addEventListener('slotchange', this._onContentSlotChange);
+    this._syncSearchInput();
   }
 
   /**
@@ -263,6 +314,15 @@ export default class CraftActionMenu extends CraftPopover {
       this._syncInvokerDisabled();
     }
 
+    if (changed.has('opened') && !this.opened && changed.get('opened')) {
+      // The menu just closed — clear the search filter for the next open.
+      this._resetSearchFilter();
+    }
+
+    if (changed.has('searchable')) {
+      this._syncSearchInput();
+    }
+
     if (this.actions === undefined) {
       return;
     }
@@ -364,7 +424,7 @@ export default class CraftActionMenu extends CraftPopover {
     el: CraftActionItem,
     action: ActionMenuItemButton | ActionMenuItemLink
   ): void {
-    const reserved = new Set(['type', 'label', 'onClick', 'href']);
+    const reserved = new Set(['type', 'label', 'onClick', 'href', 'keywords']);
     for (const [key, value] of Object.entries(action)) {
       if (reserved.has(key) || value === undefined) {
         continue;
@@ -402,6 +462,12 @@ export default class CraftActionMenu extends CraftPopover {
 
     this._applyItemProps(item, action);
 
+    // Hidden search terms for the `searchable` filter (same channel consumers
+    // use directly in slot-based mode).
+    if (action.keywords) {
+      item.setAttribute('data-keywords', action.keywords);
+    }
+
     if (action.label) {
       item.textContent = action.label;
     }
@@ -491,8 +557,366 @@ export default class CraftActionMenu extends CraftPopover {
         content.appendChild(node);
       }
     }
+
+    // `replaceChildren()` dropped the search input — re-insert it.
+    this._syncSearchInput();
+  }
+
+  /** Selector matching the items the search filter considers. */
+  private static readonly _filterableItemsSelector =
+    'craft-action-item, li, button';
+
+  /** The current light-DOM content container (generated or consumer-slotted). */
+  private _getContentNode(): HTMLElement | null {
+    if (this._generatedContent) {
+      return this._generatedContent;
+    }
+    // Once Lion's overlay controller is set up, the slotted content node is
+    // moved inside its content wrapper (a <dialog>) and loses its `slot`
+    // attribute — so prefer the node Lion has already resolved and cached.
+    if (this._cachedOverlayContentNode) {
+      return this._cachedOverlayContentNode;
+    }
+    return (
+      (Array.from(this.children).find((child) => child.slot === 'content') as
+        | HTMLElement
+        | undefined) ?? null
+    );
+  }
+
+  /**
+   * Ensure the search input is (or isn't) the first child of the current
+   * content node. The input lives in the *light-DOM* content container —
+   * mirroring how `_renderDataDrivenMenu` manages generated nodes — so Lion's
+   * overlay content handling keeps working in both modes.
+   */
+  private _syncSearchInput(): void {
+    const content = this._getContentNode();
+
+    // Keyboard navigation applies with or without the search input.
+    this._wireContentKeydown();
+
+    if (!this.searchable || !content) {
+      if (this._searchContainer?.isConnected) {
+        this._searchContainer.remove();
+      }
+      // Un-hide anything a previous filter hid.
+      if (content) {
+        this._clearFilterAttributes(content);
+      }
+      return;
+    }
+
+    if (!this._searchContainer) {
+      this._searchContainer = this._buildSearchContainer();
+    }
+
+    if (content.firstElementChild !== this._searchContainer) {
+      content.prepend(this._searchContainer);
+    }
+  }
+
+  /** Build the light-DOM search container (input + scoped style rules). */
+  private _buildSearchContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.className = 'action-menu__search';
+
+    // The container lives in light DOM (inside the slotted content node), so
+    // the shadow `::slotted()` selector can't reach it — ship the input
+    // styling and the `data-search-hidden` rule in a light-DOM <style>.
+    const style = document.createElement('style');
+    style.textContent = `
+      craft-action-menu [data-search-hidden] {
+        display: none !important;
+      }
+      craft-action-menu .action-menu__search input {
+        box-sizing: border-box;
+        width: 100%;
+        padding: var(--c-spacing-xs);
+        border: 1px solid var(--c-border-form);
+        border-radius: var(--c-radius-sm);
+        background-color: var(--c-surface-form);
+        font: inherit;
+      }
+    `;
+    container.appendChild(style);
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.setAttribute('inputmode', 'search');
+    input.autocomplete = 'off';
+    input.placeholder = t('Search');
+    input.setAttribute('aria-label', t('Search'));
+    input.addEventListener('input', () => {
+      this._applySearchFilter(input.value);
+    });
+    input.addEventListener('keydown', this._onSearchKeydown);
+    input.addEventListener('keyup', this._onSearchKeyup);
+    container.appendChild(input);
+
+    this._searchInput = input;
+    return container;
+  }
+
+  private _onSearchKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      // Move from the search input into the items (Down → first navigable
+      // item, Up → last). Other keys are left alone so typing keeps
+      // filtering.
+      const items = this._getNavigableItems();
+      if (items.length) {
+        event.preventDefault();
+        (event.key === 'ArrowDown'
+          ? items[0]
+          : items[items.length - 1]
+        )?.focus();
+      }
+      return;
+    }
+
+    if (event.key === 'Escape' && this._searchInput?.value) {
+      // Clear the filter instead of closing the menu (parity with the legacy
+      // disclosure menu). Lion's hides-on-esc handler listens on the content
+      // node, so stop both the keydown and the trailing keyup.
+      event.stopPropagation();
+      this._swallowNextEscUp = true;
+      this._searchInput.value = '';
+      this._applySearchFilter('');
+    } else if (event.key === 'Enter') {
+      // Don't submit a surrounding form from the search input.
+      event.preventDefault();
+    }
+  };
+
+  private _onSearchKeyup = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape' && this._swallowNextEscUp) {
+      event.stopPropagation();
+      this._swallowNextEscUp = false;
+    }
+  };
+
+  /** The filterable items in the content node (excluding the search UI). */
+  private _getFilterableItems(content: HTMLElement): HTMLElement[] {
+    return Array.from(
+      content.querySelectorAll<HTMLElement>(
+        CraftActionMenu._filterableItemsSelector
+      )
+    ).filter((el) => {
+      if (this._searchContainer?.contains(el)) {
+        return false;
+      }
+      // Only top-level items — e.g. skip a button nested inside a matched <li>.
+      const ancestor = el.parentElement?.closest(
+        CraftActionMenu._filterableItemsSelector
+      );
+      return !ancestor || !content.contains(ancestor);
+    });
+  }
+
+  /**
+   * Case-insensitively substring-match `value` against the item's text content
+   * plus its optional `data-keywords` attribute (the channel for hidden search
+   * terms such as handles).
+   */
+  private _itemMatchesSearch(item: HTMLElement, value: string): boolean {
+    const haystack = `${item.textContent ?? ''} ${
+      item.getAttribute('data-keywords') ?? ''
+    }`.toLowerCase();
+    return haystack.includes(value);
+  }
+
+  /**
+   * Toggle `data-search-hidden` on non-matching items. A dedicated attribute
+   * (hidden via the light-DOM style rule) is used instead of `hidden` or a
+   * class so the filter never clobbers consumer-controlled visibility — items
+   * the consumer has hidden stay hidden regardless of the filter.
+   */
+  private _applySearchFilter(rawValue: string): void {
+    const content = this._getContentNode();
+    if (!content) {
+      return;
+    }
+
+    const value = rawValue.trim().toLowerCase();
+    for (const item of this._getFilterableItems(content)) {
+      if (!value || this._itemMatchesSearch(item, value)) {
+        item.removeAttribute('data-search-hidden');
+      } else {
+        item.setAttribute('data-search-hidden', '');
+      }
+    }
+  }
+
+  private _clearFilterAttributes(content: HTMLElement): void {
+    content
+      .querySelectorAll('[data-search-hidden]')
+      .forEach((el) => el.removeAttribute('data-search-hidden'));
+  }
+
+  /** Clear the search input and un-hide all items (runs when the menu closes). */
+  private _resetSearchFilter(): void {
+    if (this._searchInput) {
+      this._searchInput.value = '';
+    }
+    const content = this._getContentNode();
+    if (content) {
+      this._clearFilterAttributes(content);
+    }
+  }
+
+  /**
+   * Initial focus once the overlay is fully shown: the search input when
+   * `searchable`, otherwise the first navigable item (APG menu-button
+   * pattern). Escape/outside-click closing restores focus to the invoker via
+   * Lion's `elementToFocusAfterHide` (which defaults to the invoker node).
+   */
+  private _onOverlayShow = (): void => {
+    if (!this.opened) {
+      return;
+    }
+    if (this.searchable) {
+      this._searchInput?.focus();
+    } else {
+      this._getNavigableItems()[0]?.focus();
+    }
+  };
+
+  /**
+   * The keyboard-navigable items: `craft-action-item` elements that are not
+   * consumer-hidden (`hidden`), not filtered out (`data-search-hidden`), and
+   * not disabled. Recomputed on every keystroke, since the search filter
+   * changes the set.
+   */
+  private _getNavigableItems(): CraftActionItem[] {
+    const content = this._getContentNode();
+    if (!content) {
+      return [];
+    }
+    return Array.from(
+      content.querySelectorAll<CraftActionItem>('craft-action-item')
+    ).filter(
+      (item) =>
+        !item.hasAttribute('hidden') &&
+        !item.hasAttribute('data-search-hidden') &&
+        !(item.disabled || item.hasAttribute('disabled'))
+    );
+  }
+
+  /**
+   * Attach the keyboard-navigation handler to the current content node.
+   * Idempotent — `addEventListener` dedupes an identical listener — so it is
+   * safe to call from every content (re)wiring path.
+   */
+  private _wireContentKeydown(): void {
+    this._getContentNode()?.addEventListener('keydown', this._onContentKeydown);
   }
 
+  /**
+   * Keyboard navigation between items (WAI-ARIA APG menu pattern, adapted):
+   *
+   * - ArrowDown/ArrowUp move to the next/previous navigable item and *wrap*
+   *   at the ends (the APG-recommended behaviour).
+   * - Home/End jump to the first/last navigable item.
+   * - In searchable mode, printable characters and Backspace return focus to
+   *   the search input and apply the keystroke there, so filtering continues
+   *   seamlessly (this includes Space — a search query may contain one).
+   * - Enter/Space activation is otherwise left to the item's internal native
+   *   button; Space on *link* items is wired manually since links don't
+   *   activate on Space.
+   * - Escape bubbles to Lion's `hidesOnEsc` handler on the content node,
+   *   which closes the menu and restores focus to the invoker.
+   *
+   * Keydown events from inside an item's shadow root are composed and
+   * retarget to the `craft-action-item` host, so a single listener on the
+   * light-DOM content container sees every item's keys.
+   */
+  private _onContentKeydown = (event: KeyboardEvent): void => {
+    // The search input has its own keydown handling.
+    if (this._searchContainer?.contains(event.target as Node)) {
+      return;
+    }
+
+    const items = this._getNavigableItems();
+    const currentItem =
+      (event.target as HTMLElement | null)?.closest?.('craft-action-item') ??
+      null;
+    const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (!items.length) {
+        return;
+      }
+      event.preventDefault();
+      let next: number;
+      if (event.key === 'ArrowDown') {
+        next = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        next =
+          currentIndex === -1
+            ? items.length - 1
+            : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[next]?.focus();
+      return;
+    }
+
+    if (event.key === 'Home' || event.key === 'End') {
+      if (!items.length) {
+        return;
+      }
+      event.preventDefault();
+      (event.key === 'Home' ? items[0] : items[items.length - 1])?.focus();
+      return;
+    }
+
+    if (event.key === ' ' && !this.searchable && currentItem?.href) {
+      // Links don't activate on Space natively; APG menus do.
+      event.preventDefault();
+      currentItem.click();
+      return;
+    }
+
+    if (currentItem) {
+      this._redirectTypingToSearch(event);
+    }
+  };
+
+  /**
+   * In searchable mode, typing while an item is focused returns focus to the
+   * search input and applies the keystroke there (append a printable
+   * character, or delete the last one on Backspace).
+   */
+  private _redirectTypingToSearch(event: KeyboardEvent): void {
+    if (!this.searchable || !this._searchInput) {
+      return;
+    }
+    const printable =
+      event.key.length === 1 &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.altKey;
+    if (!printable && event.key !== 'Backspace') {
+      return;
+    }
+
+    event.preventDefault();
+    const input = this._searchInput;
+    input.focus();
+    input.value =
+      event.key === 'Backspace'
+        ? input.value.slice(0, -1)
+        : input.value + event.key;
+    this._applySearchFilter(input.value);
+  }
+
+  /**
+   * (Re)insert the search input when consumer-slotted content arrives or
+   * changes after first render (slot-based mode).
+   */
+  private _onContentSlotChange = (): void => {
+    this._syncSearchInput();
+  };
+
   /**
    * When a consumer-slotted invoker arrives (or leaves) after `actions` was
    * set, re-evaluate whether our generated default invoker should exist and
diff --git a/packages/craftcms-ui/src/components/action-menu/action-menu.types.ts b/packages/craftcms-ui/src/components/action-menu/action-menu.types.ts
index ab2e8771427..3f794cf201d 100644
--- a/packages/craftcms-ui/src/components/action-menu/action-menu.types.ts
+++ b/packages/craftcms-ui/src/components/action-menu/action-menu.types.ts
@@ -45,6 +45,12 @@ interface ActionMenuItemInteractiveBase {
   variant?: VariantKey | string;
   disabled?: boolean;
   shortcut?: ActionShortcut;
+  /**
+   * Extra search terms (e.g. a handle) matched by the menu's `searchable`
+   * filter in addition to the item's visible text. Rendered onto the generated
+   * `craft-action-item` as a `data-keywords` attribute.
+   */
+  keywords?: string;
   onClick?: (event: Event) => void;
   [key: string]: unknown;
 }
diff --git a/packages/craftcms-ui/src/components/badge-indicator/badge-indicator.ts b/packages/craftcms-ui/src/components/badge-indicator/badge-indicator.ts
index 5a07cc593db..58df8f0fbef 100644
--- a/packages/craftcms-ui/src/components/badge-indicator/badge-indicator.ts
+++ b/packages/craftcms-ui/src/components/badge-indicator/badge-indicator.ts
@@ -14,13 +14,14 @@ export default class CraftBadgeIndicator extends LitElement {
   static override styles = [styles];
 
   /** Alternative text if the badge is not decorative */
-  @property() altText: string | null = null;
+  @property({attribute: 'alt-text'}) altText: string | null = null;
 
   /** Displays a number on the badge. If using `badgeCount`, the `badgeCountSuffix` should also be used to describe what the number represents. */
-  @property() badgeCount: number | null = null;
+  @property({attribute: 'badge-count'}) badgeCount: number | null = null;
 
   /** Visually hidden text that comes after the count to provide additional context. */
-  @property() badgeCountSuffix: string | null = null;
+  @property({attribute: 'badge-count-suffix'}) badgeCountSuffix: string | null =
+    null;
 
   /** Theme variant of the badge indicator. Defaults to "primary" */
   @property() variant: 'primary' | 'secondary' | 'inverse' = 'primary';
diff --git a/packages/craftcms-ui/src/components/button/button.styles.ts b/packages/craftcms-ui/src/components/button/button.styles.ts
index 23febdce482..88b6b11eec1 100644
--- a/packages/craftcms-ui/src/components/button/button.styles.ts
+++ b/packages/craftcms-ui/src/components/button/button.styles.ts
@@ -105,7 +105,7 @@ export default css`
   /*
   Icon
    */
-  :host([icon='']) {
+  :host([icon]:empty) {
     aspect-ratio: 1;
     padding-inline: 0;
     padding-block: 0;
diff --git a/packages/craftcms-ui/src/components/button/button.ts b/packages/craftcms-ui/src/components/button/button.ts
index b363aac5d15..856d022a2eb 100644
--- a/packages/craftcms-ui/src/components/button/button.ts
+++ b/packages/craftcms-ui/src/components/button/button.ts
@@ -106,7 +106,7 @@ export default class CraftButton extends LionButtonSubmit {
   }
 
   /** The computed accessible name */
-  @property() accessibleName: string;
+  @property({attribute: 'accessible-name'}) accessibleName: string;
 
   /** Visual appearance of the button */
   @property({reflect: true}) appearance: ButtonAppearance = 'solid';
diff --git a/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.stories.ts b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.stories.ts
new file mode 100644
index 00000000000..89be9a5f808
--- /dev/null
+++ b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.stories.ts
@@ -0,0 +1,69 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+
+import './checkbox-group.js';
+import '../checkbox/checkbox.js';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Controls/Checkbox Group',
+  component: 'craft-checkbox-group',
+  args: {},
+  render: function () {
+    return html`<craft-checkbox-group name="scientists[]" label="Scientists">
+      <craft-checkbox
+        label="Marie Curie"
+        .choiceValue=${'curie'}
+      ></craft-checkbox>
+      <craft-checkbox
+        label="Ada Lovelace"
+        .choiceValue=${'lovelace'}
+        .checked=${true}
+      ></craft-checkbox>
+      <craft-checkbox
+        label="Grace Hopper"
+        .choiceValue=${'hopper'}
+      ></craft-checkbox>
+    </craft-checkbox-group>`;
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+};
+
+export const ServerRendered: Story = {
+  render: () =>
+    html`<craft-checkbox-group label="Allowed kinds">
+      <div>
+        <craft-checkbox>
+          <input
+            slot="input"
+            type="checkbox"
+            id="kind-image"
+            name="allowedKinds[]"
+            value="image"
+            checked
+          />
+          <label slot="label" for="kind-image">Image</label>
+        </craft-checkbox>
+      </div>
+      <div>
+        <craft-checkbox>
+          <input
+            slot="input"
+            type="checkbox"
+            id="kind-video"
+            name="allowedKinds[]"
+            value="video"
+          />
+          <label slot="label" for="kind-video">Video</label>
+        </craft-checkbox>
+      </div>
+    </craft-checkbox-group>`,
+};
diff --git a/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.test.ts b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.test.ts
new file mode 100644
index 00000000000..170f0f3af14
--- /dev/null
+++ b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.test.ts
@@ -0,0 +1,68 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftCheckboxGroup from './checkbox-group.js';
+import './checkbox-group.js';
+import '../checkbox/checkbox.js';
+
+async function createFromMarkup(markup: string): Promise<CraftCheckboxGroup> {
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  document.body.append(template.content);
+  const element = document.body.querySelector(
+    'craft-checkbox-group'
+  ) as CraftCheckboxGroup;
+  await element.updateComplete;
+  return element;
+}
+
+const SSR_MARKUP = `
+  <craft-checkbox-group label="Kinds">
+    <div>
+      <craft-checkbox>
+        <input slot="input" type="checkbox" id="k1" name="kinds[]" value="image" checked>
+        <label slot="label" for="k1">Image</label>
+      </craft-checkbox>
+    </div>
+    <div>
+      <craft-checkbox>
+        <input slot="input" type="checkbox" id="k2" name="kinds[]" value="video">
+        <label slot="label" for="k2">Video</label>
+      </craft-checkbox>
+    </div>
+  </craft-checkbox-group>
+`;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SSR name adoption', () => {
+  it('adopts the group name from the slotted inputs instead of wiping theirs', async () => {
+    const element = await createFromMarkup(SSR_MARKUP);
+    const inputs = element.querySelectorAll('input[type="checkbox"]');
+
+    expect(element.name).toBe('kinds[]');
+    for (const input of inputs) {
+      expect((input as HTMLInputElement).name).toBe('kinds[]');
+    }
+  });
+
+  it('respects an explicit host name', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox-group name="parent[]">
+        <craft-checkbox>
+          <input slot="input" type="checkbox" name="child[]" value="a">
+        </craft-checkbox>
+      </craft-checkbox-group>
+    `);
+
+    expect(element.name).toBe('parent[]');
+  });
+
+  it('aggregates SSR checked state into the group modelValue', async () => {
+    const element = await createFromMarkup(SSR_MARKUP);
+    await element.registrationComplete;
+    await element.updateComplete;
+
+    expect(element.modelValue).toEqual(['image']);
+  });
+});
diff --git a/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.ts b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.ts
index c673f26e4ae..b32de2116c5 100644
--- a/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.ts
+++ b/packages/craftcms-ui/src/components/checkbox-group/checkbox-group.ts
@@ -1,7 +1,46 @@
 import {LionCheckboxGroup} from '@lion/ui/checkbox-group.js';
-import {css} from 'lit';
+import {css, type PropertyValues} from 'lit';
 
 export default class CraftCheckboxGroup extends LionCheckboxGroup {
+  private __ssrNameAdopted = false;
+
+  /**
+   * Adopts the group name from server-rendered checkbox inputs. Lion syncs
+   * each registered child's name to the group's (`name || ''`), so a
+   * nameless group would strip the SSR'd names and break native posting.
+   * Runs before `super.connectedCallback()` so the name is set before any
+   * child registers; `willUpdate` is the fallback for streaming parsing,
+   * where the element can connect before its children exist.
+   */
+  override connectedCallback() {
+    this.__adoptSlottedName();
+    super.connectedCallback();
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues) {
+    this.__adoptSlottedName();
+    super.willUpdate(changedProperties);
+  }
+
+  private __adoptSlottedName() {
+    if (this.__ssrNameAdopted || this.name) {
+      return;
+    }
+
+    const input = this.querySelector<HTMLInputElement>(
+      'input[type="checkbox"][name]'
+    );
+
+    if (!input) {
+      // Leave the flag unset so a later pass can still adopt once children
+      // have been parsed.
+      return;
+    }
+
+    this.__ssrNameAdopted = true;
+    this.name = input.name;
+  }
+
   static override get styles() {
     return [
       ...LionCheckboxGroup.styles,
diff --git a/packages/craftcms-ui/src/components/checkbox/checkbox.test.ts b/packages/craftcms-ui/src/components/checkbox/checkbox.test.ts
new file mode 100644
index 00000000000..5564ca0037b
--- /dev/null
+++ b/packages/craftcms-ui/src/components/checkbox/checkbox.test.ts
@@ -0,0 +1,153 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftCheckbox from './checkbox.js';
+import './checkbox.js';
+
+/**
+ * Parses markup inertly and appends the complete subtree, matching how
+ * server-rendered islands reach the page (`appendElementHtml` clones parsed
+ * nodes into the container) — the element upgrades with its children present.
+ */
+async function createFromMarkup(markup: string): Promise<CraftCheckbox> {
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  document.body.append(template.content);
+  const element = document.body.querySelector(
+    'craft-checkbox'
+  ) as CraftCheckbox;
+  await element.updateComplete;
+  return element;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SSR hydration', () => {
+  it('adopts state from a slotted input instead of wiping it', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" name="allowedKinds[]" value="image" checked>
+        <label slot="label">Image</label>
+      </craft-checkbox>
+    `);
+    const input = element.querySelector('input')!;
+
+    expect(element.name).toBe('allowedKinds[]');
+    expect(element.checked).toBe(true);
+    expect(input.name).toBe('allowedKinds[]');
+    expect(input.checked).toBe(true);
+    expect(input.value).toBe('image');
+  });
+
+  it('adopts disabled from the slotted input', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" name="agree" disabled>
+      </craft-checkbox>
+    `);
+
+    expect(element.disabled).toBe(true);
+    expect(element.querySelector('input')!.disabled).toBe(true);
+  });
+
+  it('lets host attributes win over the slotted input', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox name="fromHost">
+        <input slot="input" type="checkbox" name="fromInput">
+      </craft-checkbox>
+    `);
+
+    expect(element.name).toBe('fromHost');
+    expect(element.querySelector('input')!.name).toBe('fromHost');
+  });
+
+  it('keeps the label association so label clicks toggle', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" id="cb" name="agree" value="1">
+        <label slot="label" for="cb">I agree</label>
+      </craft-checkbox>
+    `);
+    const input = element.querySelector('input')!;
+    const label = element.querySelector('label')!;
+
+    expect(label.getAttribute('for')).toBe(input.id);
+
+    label.click();
+    await element.updateComplete;
+
+    expect(element.checked).toBe(true);
+    expect(input.checked).toBe(true);
+  });
+
+  it('still toggles through Lion after hydration', async () => {
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" name="agree" value="1">
+      </craft-checkbox>
+    `);
+    const input = element.querySelector('input')!;
+
+    input.click();
+    await element.updateComplete;
+
+    expect(element.checked).toBe(true);
+    expect(input.checked).toBe(true);
+  });
+
+  it('mirrors a direct input.checked write (no change event) onto the host', async () => {
+    // The legacy checkbox-select "All" handler flips options via jQuery
+    // `.prop('checked', …)`, which sets the property without firing an event.
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" name="sources[]" value="one">
+      </craft-checkbox>
+    `);
+    const input = element.querySelector('input')!;
+
+    input.checked = true;
+    expect(element.checked).toBe(true);
+
+    input.checked = false;
+    expect(element.checked).toBe(false);
+  });
+
+  it('mirrors a direct input.disabled write and allows selecting afterwards', async () => {
+    // The legacy "All" handler re-enables options via `.prop({checked, disabled})`
+    // with no events; a stale host `disabled` would make Lion swallow the
+    // next user toggle.
+    const element = await createFromMarkup(`
+      <craft-checkbox>
+        <input slot="input" type="checkbox" name="allowedKinds[]" value="image" checked disabled>
+      </craft-checkbox>
+    `);
+    const input = element.querySelector('input')!;
+
+    expect(element.disabled).toBe(true);
+
+    // "All" unchecked: options reset + re-enabled, properties only
+    input.checked = false;
+    input.disabled = false;
+    await element.updateComplete;
+
+    expect(element.disabled).toBe(false);
+    expect(element.checked).toBe(false);
+
+    // the user can now select the option
+    input.click();
+    await element.updateComplete;
+
+    expect(element.checked).toBe(true);
+    expect(input.checked).toBe(true);
+  });
+
+  it('remains client-drivable without slotted content', async () => {
+    const element = await createFromMarkup(
+      '<craft-checkbox name="agree" checked></craft-checkbox>'
+    );
+    const input = element.querySelector('input')!;
+
+    expect(input.name).toBe('agree');
+    expect(input.checked).toBe(true);
+  });
+});
diff --git a/packages/craftcms-ui/src/components/checkbox/checkbox.ts b/packages/craftcms-ui/src/components/checkbox/checkbox.ts
index ea5aa9e4139..13b63353704 100644
--- a/packages/craftcms-ui/src/components/checkbox/checkbox.ts
+++ b/packages/craftcms-ui/src/components/checkbox/checkbox.ts
@@ -1,8 +1,11 @@
 import {LionCheckbox} from '@lion/ui/checkbox-group.js';
 import {css, type PropertyValues} from 'lit';
 import {property} from 'lit/decorators.js';
+import {SsrChoiceInputMixin} from '../../mixins/SsrChoiceInputMixin.js';
+
+export default class CraftCheckbox extends SsrChoiceInputMixin(LionCheckbox) {
+  private __inputPatched = false;
 
-export default class CraftCheckbox extends LionCheckbox {
   /**
    * LionCheckbox has no native indeterminate state, so mirror this property onto
    * the underlying input. Used for "select all" affordances where some — but not
@@ -10,8 +13,16 @@ export default class CraftCheckbox extends LionCheckbox {
    */
   @property({type: Boolean, reflect: true}) indeterminate = false;
 
-  override updated(changedProperties: PropertyValues): void {
+  override connectedCallback() {
+    super.connectedCallback();
+    this.__patchSlottedInputProps();
+  }
+
+  // Patch fallback for streaming parsing, where the input can be absent on
+  // connect; also mirrors `indeterminate` onto the underlying input.
+  override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
+    this.__patchSlottedInputProps();
 
     const input = this._inputNode as HTMLInputElement | undefined;
     if (input) {
@@ -19,6 +30,72 @@ export default class CraftCheckbox extends LionCheckbox {
     }
   }
 
+  /**
+   * Keep the host's `checked`/`disabled` in step with the slotted input when
+   * the input's properties are written directly, bypassing Lion. Lion only
+   * learns of checkedness through `change`/`user-input-changed`, but the
+   * legacy checkbox select "All" handler flips every option with jQuery
+   * `.prop({checked, disabled})`, which sets the properties and fires no
+   * event — leaving Lion's model stale. A stale `checked` breaks consumers
+   * that read it off the host (`SortableCheckboxSelect`'s `isItemChecked`); a
+   * stale `disabled` is worse: Lion's `_toggleChecked` refuses user input
+   * while the host is disabled, so after unchecking "All" (which re-enables
+   * the inputs) no option could be selected.
+   *
+   * We wrap the input instance's own accessors to mirror external writes into
+   * the host, rather than overriding the host's properties — those are
+   * load-bearing for Lion (model sync, checkbox groups, its own input
+   * reflection), and reading them off the input there breaks that sync.
+   * Lion's own writes already match the host value, so the guard makes them
+   * no-ops and avoids recursion.
+   */
+  private __patchSlottedInputProps() {
+    if (this.__inputPatched) {
+      return;
+    }
+
+    const input = this.__slottedInputElement();
+    if (!input) {
+      return;
+    }
+
+    this.__inputPatched = true;
+
+    const host = this;
+
+    for (const prop of ['checked', 'disabled'] as const) {
+      const descriptor = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        prop
+      );
+      if (!descriptor?.get || !descriptor.set) {
+        continue;
+      }
+
+      const {get, set} = descriptor;
+
+      Object.defineProperty(input, prop, {
+        configurable: true,
+        enumerable: descriptor.enumerable,
+        get() {
+          return get.call(this);
+        },
+        set(value: boolean) {
+          set.call(this, value);
+          if (host[prop] !== value) {
+            host[prop] = value;
+          }
+        },
+      });
+    }
+  }
+
+  private __slottedInputElement(): HTMLInputElement | undefined {
+    return Array.from(this.children).find(
+      (child): child is HTMLInputElement =>
+        child instanceof HTMLInputElement && child.slot === 'input'
+    );
+  }
   static override get styles() {
     return [
       ...LionCheckbox.styles,
diff --git a/packages/craftcms-ui/src/components/copy-button/copy-button.ts b/packages/craftcms-ui/src/components/copy-button/copy-button.ts
index 6d56028f4ed..2d1def68141 100644
--- a/packages/craftcms-ui/src/components/copy-button/copy-button.ts
+++ b/packages/craftcms-ui/src/components/copy-button/copy-button.ts
@@ -53,7 +53,7 @@ export default class CraftCopyButton extends LitElement {
   @property({attribute: 'feedback-duration', type: Number}) feedbackDuration =
     1000;
 
-  @property()
+  @property({attribute: 'tooltip-label'})
   tooltipLabel: string | null = null;
 
   async copyValue() {
diff --git a/packages/craftcms-ui/src/components/disclosure/disclosure.stories.ts b/packages/craftcms-ui/src/components/disclosure/disclosure.stories.ts
index 1647b0cedff..d8acc6180e6 100644
--- a/packages/craftcms-ui/src/components/disclosure/disclosure.stories.ts
+++ b/packages/craftcms-ui/src/components/disclosure/disclosure.stories.ts
@@ -102,3 +102,21 @@ export const Accordion: Story = {
     </div>
   `,
 };
+
+// Without a slotted invoker, a default `craft-button` is rendered from the
+// `label` attribute.
+export const DefaultInvoker: Story = {
+  render: () => html`
+    <craft-disclosure label="Advanced settings">
+      <div slot="content" data-testid="target">This will toggle</div>
+    </craft-disclosure>
+  `,
+  play: async ({canvas, userEvent}) => {
+    const button = canvas
+      .getByText('Advanced settings')
+      .closest('craft-button') as HTMLElement;
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(button);
+    await expect(button).toHaveAttribute('aria-expanded', 'true');
+  },
+};
diff --git a/packages/craftcms-ui/src/components/disclosure/disclosure.ts b/packages/craftcms-ui/src/components/disclosure/disclosure.ts
index 16c313c34aa..81fedec2cd7 100644
--- a/packages/craftcms-ui/src/components/disclosure/disclosure.ts
+++ b/packages/craftcms-ui/src/components/disclosure/disclosure.ts
@@ -1,129 +1,189 @@
+import {LionCollapsible} from '@lion/ui/collapsible.js';
+import {css, html, type PropertyValues} from 'lit';
+import {property} from 'lit/decorators.js';
 import type {WindowWithCraft} from '@src/types/globals';
+import '../button/button.js';
 
 /**
- * Very simple disclosure trigger.
+ * A disclosure trigger supporting two modes:
  *
- * Allows you to wrap a button[type="button"] and target an element to toggle the `data-state` attribute on.
- * Set `aria-expanded` on the button
+ * **Slotted (collapsible) mode** — Lion's collapsible convention: a
+ * `slot="invoker"` trigger and `slot="content"` collapsible content. Without a
+ * slotted invoker, renders a default one from the `label` attribute:
+ *
+ *     <craft-button type="button" appearance="plain" icon="chevron-down">${label}</craft-button>
+ *
+ * **External-target mode** — wraps a bare `button[type="button"]` whose
+ * `aria-controls` names an element elsewhere in the document; toggling flips
+ * that target's `data-state` between `expanded`/`collapsed` (the consumer
+ * provides the CSS), mirrors `aria-expanded` on the button, and optionally
+ * persists the state to a cookie (`cookie-name`). This is the contract of the
+ * legacy `CraftDisclosure` element and `_includes/disclosure-toggle.twig`.
+ * The mode is chosen automatically when such a button is present.
  */
-export default class CraftDisclosure extends HTMLElement {
-  static observedAttributes = ['state'];
-  private cookieName: string | null = null;
-  private state: string = 'collapsed';
-  private expanded: boolean = false;
-
-  get trigger() {
-    return this.querySelector('button[type="button"]');
+export default class CraftDisclosure extends LionCollapsible {
+  static override get styles() {
+    return [
+      ...super.styles,
+      css`
+        ::slotted([slot='content']) {
+          margin-block-start: var(--c-spacing-lg);
+        }
+      `,
+    ];
   }
 
-  get target() {
-    if (!this.trigger) {
-      console.warn('No trigger found for disclosure.');
-      return null;
-    }
+  /** Text for the default invoker button (slotted mode). */
+  @property() label = '';
 
-    const targetSelector = this.trigger.getAttribute('aria-controls');
-    if (!targetSelector) {
-      console.warn('No target selector found for disclosure.');
-      return null;
-    }
+  /** External-target mode state. Reflected so consumers can set/read it. */
+  @property({reflect: true}) state: string | null = null;
 
-    return document.getElementById(targetSelector);
-  }
+  /** Cookie to persist the external-target state under (external mode). */
+  @property({attribute: 'cookie-name'}) cookieName: string | null = null;
 
-  connectedCallback() {
-    if (!this.trigger) {
-      console.error(`craft-disclosure elements must include a button`, this);
-      return;
-    }
+  private __defaultInvoker: HTMLElement | null = null;
 
-    if (!this.target) {
-      console.error(
-        `No target with id ${this.trigger.getAttribute(
-          'aria-controls'
-        )} found for disclosure. `,
-        this.trigger
-      );
-      return;
-    }
+  private __externalTrigger: HTMLElement | null = null;
 
-    this.cookieName = this.getAttribute('cookie-name');
-    this.state = this.getAttribute('state') ?? 'expanded';
+  private __externalExpanded = false;
 
-    this.trigger.setAttribute(
-      'aria-expanded',
-      this.state === 'expanded' ? 'true' : 'false'
+  /** The external element named by the trigger's `aria-controls`. */
+  private get __externalTarget(): HTMLElement | null {
+    const targetSelector =
+      this.__externalTrigger?.getAttribute('aria-controls');
+
+    return targetSelector ? document.getElementById(targetSelector) : null;
+  }
+
+  protected override render() {
+    return html`
+      <slot name="invoker"></slot>
+      <slot name="content"></slot>
+      <slot></slot>
+    `;
+  }
+
+  override connectedCallback() {
+    this.__externalTrigger = this.querySelector(
+      ':scope > button[type="button"][aria-controls]:not([slot])'
     );
 
-    this.trigger.addEventListener('click', this.toggle.bind(this));
+    if (!this.__externalTrigger) {
+      // Lion wires the click listener and aria state onto the slotted invoker
+      // during connect, so the default one has to exist in the light DOM first.
+      this.__ensureDefaultInvoker();
+    }
 
-    if (this.state === 'expanded') {
-      this.open();
-    } else {
-      this.close();
+    super.connectedCallback();
+
+    if (this.__externalTrigger) {
+      this.__setupExternalMode();
     }
   }
 
-  disconnectedCallback() {
-    this.open();
-    this.trigger?.removeEventListener('click', this.toggle.bind(this));
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.__externalTrigger) {
+      // Leave the target visible when the disclosure goes away (parity with
+      // the legacy element).
+      this.__handleExternalOpen();
+      this.__externalTrigger.removeEventListener(
+        'click',
+        this.__toggleExternal
+      );
+    }
   }
 
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'state') {
-      if (newValue === 'expanded') {
-        this.handleOpen();
-      } else {
-        this.handleClose();
+  protected override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('label') && this.__defaultInvoker) {
+      this.__defaultInvoker.textContent = this.label;
+    }
+
+    if (changedProperties.has('state') && this.__externalTrigger) {
+      if (this.state === 'expanded') {
+        this.__handleExternalOpen();
+      } else if (this.state === 'collapsed') {
+        this.__handleExternalClose();
       }
     }
   }
 
-  toggle() {
-    if (this.expanded) {
-      this.close();
-    } else {
-      this.open();
+  private __ensureDefaultInvoker() {
+    if (this._invokerNode) {
+      return;
     }
+
+    const button = document.createElement('craft-button');
+    button.slot = 'invoker';
+    button.setAttribute('type', 'button');
+    button.setAttribute('appearance', 'plain');
+    button.setAttribute('icon', 'chevron-down');
+    button.textContent = this.label;
+
+    this.__defaultInvoker = button;
+    this.prepend(button);
   }
 
-  handleOpen = () => {
-    this.trigger?.setAttribute('aria-expanded', 'true');
-    this.expanded = true;
-    this.dispatchEvent(new CustomEvent('open'));
+  private __setupExternalMode() {
+    const trigger = this.__externalTrigger!;
 
-    if (this.target) {
-      this.target.dataset.state = 'expanded';
+    if (!this.__externalTarget) {
+      console.error(
+        `No target with id ${trigger.getAttribute(
+          'aria-controls'
+        )} found for disclosure.`,
+        trigger
+      );
+      return;
     }
 
-    if (this.cookieName) {
-      (window as WindowWithCraft).Craft?.setCookie(this.cookieName, 'expanded');
+    trigger.addEventListener('click', this.__toggleExternal);
+
+    // Default to expanded when no initial state was given; the state change
+    // is applied by `updated()`.
+    if (this.state !== 'expanded' && this.state !== 'collapsed') {
+      this.state = 'expanded';
     }
+  }
+
+  private __toggleExternal = () => {
+    this.state = this.__externalExpanded ? 'collapsed' : 'expanded';
   };
 
-  open() {
-    this.setAttribute('state', 'expanded');
+  private __handleExternalOpen() {
+    this.__externalExpanded = true;
+    this.__externalTrigger?.setAttribute('aria-expanded', 'true');
+    this.dispatchEvent(new CustomEvent('open'));
+
+    const target = this.__externalTarget;
+    if (target) {
+      target.dataset.state = 'expanded';
+    }
+
+    this.__persistExternalState('expanded');
   }
 
-  handleClose = () => {
-    this.trigger?.setAttribute('aria-expanded', 'false');
-    this.expanded = false;
+  private __handleExternalClose() {
+    this.__externalExpanded = false;
+    this.__externalTrigger?.setAttribute('aria-expanded', 'false');
     this.dispatchEvent(new CustomEvent('close'));
 
-    if (this.target) {
-      this.target.dataset.state = 'collapsed';
+    const target = this.__externalTarget;
+    if (target) {
+      target.dataset.state = 'collapsed';
     }
 
+    this.__persistExternalState('collapsed');
+  }
+
+  private __persistExternalState(state: string) {
     if (this.cookieName) {
-      (window as WindowWithCraft).Craft?.setCookie(
-        this.cookieName,
-        'collapsed'
-      );
+      (window as WindowWithCraft).Craft?.setCookie(this.cookieName, state);
     }
-  };
-
-  close() {
-    this.setAttribute('state', 'collapsed');
   }
 }
 
diff --git a/packages/craftcms-ui/src/components/field/field.stories.ts b/packages/craftcms-ui/src/components/field/field.stories.ts
new file mode 100644
index 00000000000..5037efaec5b
--- /dev/null
+++ b/packages/craftcms-ui/src/components/field/field.stories.ts
@@ -0,0 +1,155 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+
+import './field.js';
+import '../input/input.js';
+
+const meta = {
+  title: 'Controls/Field',
+  component: 'craft-field',
+  args: {
+    label: 'Field label',
+    helpText: '',
+    required: false,
+    translatable: false,
+    fieldset: false,
+    readOnly: false,
+    disabled: false,
+    status: undefined,
+    statusLabel: undefined,
+    orientation: undefined,
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['ltr', 'rtl'],
+    },
+    status: {
+      control: 'select',
+      options: ['modified', 'outdated'],
+    },
+  },
+  render: ({
+    label,
+    helpText,
+    required,
+    translatable,
+    fieldset,
+    readOnly,
+    disabled,
+    status,
+    statusLabel,
+    orientation,
+  }) => {
+    return html`<craft-field
+      label=${label}
+      help-text=${helpText}
+      ?required=${required}
+      ?translatable=${translatable}
+      ?fieldset=${fieldset}
+      ?readonly=${readOnly}
+      ?disabled=${disabled}
+      status=${ifDefined(status || undefined)}
+      status-label=${ifDefined(statusLabel || undefined)}
+      orientation=${ifDefined(orientation || undefined)}
+    >
+      <input slot="input" type="text" />
+    </craft-field>`;
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const RequiredWithInstructions: Story = {
+  args: {
+    required: true,
+    helpText: 'Enter a value. This one is required.',
+  },
+};
+
+export const TipAndWarning: Story = {
+  render: () => html`
+    <craft-field label="Field label">
+      <input slot="input" type="text" />
+      <span slot="tip">You can use environment variables here.</span>
+      <span slot="warning">Changing this may break existing content.</span>
+    </craft-field>
+  `,
+};
+
+export const Errors: Story = {
+  render: () => html`
+    <craft-field label="Field label">
+      <input slot="input" type="text" />
+      <ul slot="feedback" class="errors">
+        <li>This field is required.</li>
+        <li>That doesn't look right.</li>
+      </ul>
+    </craft-field>
+  `,
+};
+
+export const StatusBadge: Story = {
+  args: {
+    status: 'modified',
+    statusLabel: 'This field has been modified.',
+  },
+};
+
+export const FieldsetMode: Story = {
+  render: () => html`
+    <craft-field label="Choose one" fieldset>
+      <div slot="input" style="display: flex; gap: 12px;">
+        <label><input type="radio" name="choice" value="a" /> A</label>
+        <label><input type="radio" name="choice" value="b" /> B</label>
+      </div>
+    </craft-field>
+  `,
+};
+
+export const Translatable: Story = {
+  args: {
+    translatable: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+  },
+};
+
+export const Rtl: Story = {
+  args: {
+    orientation: 'rtl',
+    label: 'RTL field',
+  },
+};
+
+export const LabelExtra: Story = {
+  render: () => html`
+    <craft-field label="Field label">
+      <input slot="input" type="text" />
+      <code slot="label-extra">myFieldHandle</code>
+    </craft-field>
+  `,
+};
+
+export const WithCraftInput: Story = {
+  render: () => html`
+    <craft-field
+      label="Site name"
+      help-text="What this site will be called in the control panel."
+      required
+    >
+      <craft-input slot="input" label-sr-only label="Site name"></craft-input>
+    </craft-field>
+  `,
+};
diff --git a/packages/craftcms-ui/src/components/field/field.styles.ts b/packages/craftcms-ui/src/components/field/field.styles.ts
new file mode 100644
index 00000000000..b993c08f526
--- /dev/null
+++ b/packages/craftcms-ui/src/components/field/field.styles.ts
@@ -0,0 +1,141 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    position: relative;
+    display: block;
+  }
+
+  /* A slotted control with a maxlength (reflected as has-maxlength) shrinks
+     the field to the control's width instead of spanning the column.
+     width="full" spans despite a maxlength; width="auto" shrinks without
+     one. */
+  :host([has-maxlength]:not([width='full'])),
+  :host([width='auto']) {
+    width: fit-content;
+  }
+
+  /* Stop the input chrome from flexing back out to the available space. */
+  :host([has-maxlength]:not([width='full'])) .input-group__input,
+  :host([width='auto']) .input-group__input {
+    flex: 0 0 auto;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Status badge (.field > .status-badge in the CP) */
+  .status-badge {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 2px;
+    height: 100%;
+    cursor: help;
+    z-index: 1;
+    border-radius: 1px;
+  }
+
+  .status-badge.modified {
+    background-color: var(--blue-600, #2563eb);
+    box-shadow: 0 0 5px hsl(221deg 83% 53% / 15%);
+  }
+
+  .status-badge.outdated {
+    background-color: var(--bg-pending, #c96a11);
+    box-shadow: 0 0 5px hsl(27deg 96% 61% / 15%);
+  }
+
+  /* Heading (.field > .heading in the CP) */
+  .heading {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-items: center;
+    font-weight: bold;
+    margin-block-end: var(--c-spacing-xs, 0.25rem);
+  }
+
+  .heading .flex-grow {
+    flex: 1 0 0;
+  }
+
+  ::slotted([slot='label']) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-items: center;
+  }
+
+  .read-only-badge {
+    font-size: calc(11rem / 16);
+    font-weight: normal;
+    line-height: 1.45;
+    padding-block: 0;
+    padding-inline: 0.25em;
+    background-color: var(--gray-100, #e9ebec);
+    color: var(--gray-700, #3f4d5a);
+    border: 1px solid var(--border-hairline, hsl(211deg 20% 44% / 25%));
+    border-radius: var(--c-radius-sm, 3px);
+  }
+
+  /* Instructions (.field > .instructions in the CP) */
+  .form-field__help-text {
+    display: block;
+    margin-block-end: var(--c-spacing-xs, 0.3125rem);
+  }
+
+  .form-field__group-two .form-field__help-text {
+    margin-block: var(--c-spacing-xs, 0.3125rem) 0;
+  }
+
+  /* Input container (.field > .input in the CP) */
+  .input-group {
+    position: relative;
+  }
+
+  .input-group.ltr {
+    direction: ltr;
+  }
+
+  .input-group.rtl {
+    direction: rtl;
+  }
+
+  .input-group.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-group__container {
+    display: flex;
+  }
+
+  .input-group__input {
+    flex: 1;
+    display: flex;
+  }
+
+  .input-group__container > .input-group__input ::slotted(.form-control) {
+    flex: 1 1 auto;
+    margin: 0;
+    font-size: 100%;
+  }
+
+  /* Tip/warning notices (field-notice.blade.php renders these with p-0 mt-1) */
+  .field-notice {
+    padding: 0;
+    margin-block-start: var(--c-spacing-xs, 0.25rem);
+  }
+
+  /* Error styling hook, mirroring .field.has-errors / .input.errors */
+  :host([has-errors]) ::slotted([slot='input']) {
+    border-color: var(--c-color-danger-border-loud);
+  }
+
+  :host([has-errors]) .form-field__feedback {
+    color: var(--c-color-danger-on-normal);
+  }
+`;
diff --git a/packages/craftcms-ui/src/components/field/field.test.ts b/packages/craftcms-ui/src/components/field/field.test.ts
new file mode 100644
index 00000000000..1896b00077f
--- /dev/null
+++ b/packages/craftcms-ui/src/components/field/field.test.ts
@@ -0,0 +1,402 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftField from './field.js';
+import './field.js';
+
+async function createField(
+  attrs: Record<string, string> = {},
+  innerHTML = '<input slot="input" type="text">'
+): Promise<CraftField> {
+  const element = document.createElement('craft-field') as CraftField;
+  for (const [name, value] of Object.entries(attrs)) {
+    element.setAttribute(name, value);
+  }
+  element.innerHTML = innerHTML;
+  document.body.append(element);
+  await element.updateComplete;
+  // Wait one more cycle for aria attribute reflection onto the input.
+  await element.updateComplete;
+  return element;
+}
+
+function input(element: CraftField): HTMLElement | null {
+  return element.querySelector('[slot="input"]');
+}
+
+function labelNode(element: CraftField): HTMLElement | null {
+  return element.querySelector('[slot="label"]');
+}
+
+function describedBy(element: CraftField): string[] {
+  return (input(element)?.getAttribute('aria-describedby') ?? '')
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-field label association', () => {
+  it('associates the generated label with the slotted input', async () => {
+    const element = await createField({label: 'My field'});
+
+    const label = labelNode(element);
+    const control = input(element);
+    expect(label).not.toBeNull();
+    expect(label!.textContent).toContain('My field');
+    expect(control!.id).toBeTruthy();
+    expect(label!.getAttribute('for')).toBe(control!.id);
+  });
+
+  it('links the label into the input aria-labelledby', async () => {
+    const element = await createField({label: 'My field'});
+
+    const labelledBy = input(element)?.getAttribute('aria-labelledby') ?? '';
+    expect(labelNode(element)!.id).toBeTruthy();
+    expect(labelledBy.split(/\s+/)).toContain(labelNode(element)!.id);
+  });
+
+  it('adopts a slotted label element', async () => {
+    const element = await createField(
+      {},
+      '<label slot="label">Custom label</label><input slot="input" type="text">'
+    );
+
+    expect(labelNode(element)!.getAttribute('for')).toBe(input(element)!.id);
+  });
+});
+
+describe('craft-field required indicator', () => {
+  it('renders the required spans inside the label', async () => {
+    const element = await createField({label: 'My field', required: ''});
+
+    const label = labelNode(element)!;
+    const srOnly = label.querySelector('span.visually-hidden');
+    const indicator = label.querySelector('span.required');
+    expect(srOnly?.textContent).toBe('Required');
+    expect(indicator).not.toBeNull();
+    expect(indicator!.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('removes the indicator when required is unset', async () => {
+    const element = await createField({label: 'My field', required: ''});
+
+    element.required = false;
+    await element.updateComplete;
+
+    expect(labelNode(element)!.querySelector('span.required')).toBeNull();
+  });
+
+  it('does not render an indicator without a label', async () => {
+    const element = await createField({required: ''});
+
+    expect(element.querySelector('span.required')).toBeNull();
+  });
+});
+
+describe('craft-field translatable indicator', () => {
+  it('renders the translation icon button inside the label', async () => {
+    const element = await createField({
+      label: 'My field',
+      translatable: '',
+      'translation-description': 'Translated per site.',
+    });
+
+    const tooltip = labelNode(element)!.querySelector('craft-tooltip');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip!.getAttribute('text')).toBe('Translated per site.');
+
+    const button = tooltip!.querySelector('button.t9n-indicator');
+    expect(button).not.toBeNull();
+    expect(button!.getAttribute('data-icon')).toBe('language');
+    expect(button!.getAttribute('aria-label')).toBe('Translated per site.');
+  });
+});
+
+describe('craft-field fieldset mode', () => {
+  it('exposes group semantics on the host', async () => {
+    const element = await createField({label: 'My group', fieldset: ''});
+
+    expect(element.getAttribute('role')).toBe('group');
+    expect(element.getAttribute('aria-labelledby')).toBe(
+      labelNode(element)!.id
+    );
+    expect(labelNode(element)!.hasAttribute('for')).toBe(false);
+  });
+
+  it('restores the label association when fieldset is unset', async () => {
+    const element = await createField({label: 'My group', fieldset: ''});
+
+    element.fieldset = false;
+    await element.updateComplete;
+
+    expect(element.hasAttribute('role')).toBe(false);
+    expect(element.hasAttribute('aria-labelledby')).toBe(false);
+    expect(labelNode(element)!.getAttribute('for')).toBe(input(element)!.id);
+  });
+});
+
+describe('craft-field aria-describedby wiring', () => {
+  it('links help text, tip, warning and feedback to the input', async () => {
+    const element = await createField(
+      {label: 'My field', 'help-text': 'Some instructions'},
+      '<input slot="input" type="text">' +
+        '<span slot="tip">A helpful tip</span>' +
+        '<span slot="warning">A dire warning</span>' +
+        '<ul slot="feedback"><li>Bad value</li></ul>'
+    );
+
+    const ids = describedBy(element);
+    const helpText = element.querySelector<HTMLElement>('[slot="help-text"]');
+    const tip = element.querySelector<HTMLElement>('[slot="tip"]');
+    const warning = element.querySelector<HTMLElement>('[slot="warning"]');
+    const feedback = element.querySelector<HTMLElement>('[slot="feedback"]');
+
+    for (const node of [helpText, tip, warning, feedback]) {
+      expect(node?.id).toBeTruthy();
+      expect(ids).toContain(node!.id);
+    }
+  });
+
+  it('renders tip and warning content inside callouts', async () => {
+    const element = await createField(
+      {label: 'My field'},
+      '<input slot="input" type="text">' +
+        '<span slot="tip">A helpful tip</span>' +
+        '<span slot="warning">A dire warning</span>'
+    );
+
+    const callouts = Array.from(
+      element.shadowRoot!.querySelectorAll('.field-notice')
+    );
+    expect(callouts).toHaveLength(2);
+
+    const [tip, warning] = callouts;
+    expect(tip!.getAttribute('variant')).toBe('info');
+    expect(tip!.getAttribute('icon')).toBe('lightbulb');
+    expect(tip!.querySelector('.cp-visually-hidden')?.textContent).toContain(
+      'Tip:'
+    );
+    expect(tip!.querySelector('slot[name="tip"]')).not.toBeNull();
+
+    expect(warning!.getAttribute('variant')).toBe('warning');
+    expect(warning!.hasAttribute('icon')).toBe(false);
+    expect(
+      warning!.querySelector('.cp-visually-hidden')?.textContent
+    ).toContain('Warning:');
+    expect(warning!.querySelector('slot[name="warning"]')).not.toBeNull();
+  });
+
+  it('renders no callouts without tip or warning content', async () => {
+    const element = await createField({label: 'My field'});
+    expect(element.shadowRoot!.querySelectorAll('.field-notice')).toHaveLength(
+      0
+    );
+  });
+});
+
+describe('craft-field status badge', () => {
+  it('renders the status badge with a visually hidden label', async () => {
+    const element = await createField({
+      label: 'My field',
+      status: 'modified',
+      'status-label': 'This field has been modified.',
+    });
+
+    const badge = element.shadowRoot!.querySelector('.status-badge');
+    expect(badge).not.toBeNull();
+    expect(badge!.classList.contains('modified')).toBe(true);
+    expect(badge!.getAttribute('title')).toBe('This field has been modified.');
+    expect(badge!.getAttribute('aria-hidden')).toBe('true');
+    expect(badge!.querySelector('.cp-visually-hidden')?.textContent).toBe(
+      'This field has been modified.'
+    );
+  });
+
+  it('renders no badge without a status', async () => {
+    const element = await createField({label: 'My field'});
+    expect(element.shadowRoot!.querySelector('.status-badge')).toBeNull();
+  });
+});
+
+describe('craft-field error state', () => {
+  it('reflects has-errors when feedback content is slotted', async () => {
+    const element = await createField(
+      {label: 'My field'},
+      '<input slot="input" type="text">' +
+        '<ul slot="feedback"><li>Bad value</li></ul>'
+    );
+
+    expect(element.hasAttribute('has-errors')).toBe(true);
+    const inputGroup = element.shadowRoot!.querySelector('.input-group');
+    expect(inputGroup!.classList.contains('errors')).toBe(true);
+  });
+
+  it('supports setting has-errors manually', async () => {
+    const element = await createField({label: 'My field', 'has-errors': ''});
+
+    expect(element.hasErrors).toBe(true);
+    expect(
+      element
+        .shadowRoot!.querySelector('.input-group')!
+        .classList.contains('errors')
+    ).toBe(true);
+  });
+
+  it('has no error hooks by default', async () => {
+    const element = await createField({label: 'My field'});
+
+    expect(element.hasAttribute('has-errors')).toBe(false);
+    expect(
+      element
+        .shadowRoot!.querySelector('.input-group')!
+        .classList.contains('errors')
+    ).toBe(false);
+  });
+});
+
+describe('craft-field orientation', () => {
+  it('defaults to ltr', async () => {
+    const element = await createField({label: 'My field'});
+    const inputGroup = element.shadowRoot!.querySelector('.input-group')!;
+    expect(inputGroup.classList.contains('ltr')).toBe(true);
+    expect(inputGroup.classList.contains('rtl')).toBe(false);
+  });
+
+  it('applies the orientation attribute to the input container', async () => {
+    const element = await createField({label: 'My field', orientation: 'rtl'});
+    expect(
+      element
+        .shadowRoot!.querySelector('.input-group')!
+        .classList.contains('rtl')
+    ).toBe(true);
+  });
+
+  it('inherits the direction from the closest dir attribute', async () => {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute('dir', 'rtl');
+    document.body.append(wrapper);
+
+    const element = document.createElement('craft-field') as CraftField;
+    element.setAttribute('label', 'My field');
+    element.innerHTML = '<input slot="input" type="text">';
+    wrapper.append(element);
+    await element.updateComplete;
+
+    expect(
+      element
+        .shadowRoot!.querySelector('.input-group')!
+        .classList.contains('rtl')
+    ).toBe(true);
+  });
+});
+
+describe('craft-field read-only badge', () => {
+  it('renders the badge in the heading when read-only', async () => {
+    const element = await createField({label: 'My field', readonly: ''});
+
+    const badge = element.shadowRoot!.querySelector(
+      '.heading .read-only-badge'
+    );
+    expect(badge?.textContent).toBe('Read Only');
+  });
+
+  it('renders no badge otherwise', async () => {
+    const element = await createField({label: 'My field'});
+    expect(element.shadowRoot!.querySelector('.read-only-badge')).toBeNull();
+  });
+});
+
+describe('craft-field label extras', () => {
+  it('renders a flex-grow spacer before slotted label extras', async () => {
+    const element = await createField(
+      {label: 'My field'},
+      '<input slot="input" type="text"><code slot="label-extra">handle</code>'
+    );
+
+    const heading = element.shadowRoot!.querySelector('.heading')!;
+    const spacer = heading.querySelector('.flex-grow');
+    const slot = heading.querySelector('slot[name="label-extra"]');
+    expect(spacer).not.toBeNull();
+    expect(slot).not.toBeNull();
+    expect(
+      spacer!.compareDocumentPosition(slot!) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
+  it('renders no spacer without label extras', async () => {
+    const element = await createField({label: 'My field'});
+    expect(element.shadowRoot!.querySelector('.flex-grow')).toBeNull();
+  });
+});
+
+describe('craft-field disabled state', () => {
+  it('adds the disabled class to the input container only', async () => {
+    const element = await createField({label: 'My field', disabled: ''});
+
+    expect(
+      element
+        .shadowRoot!.querySelector('.input-group')!
+        .classList.contains('disabled')
+    ).toBe(true);
+    // The shell must not touch the slotted input's state.
+    expect(input(element)!.hasAttribute('disabled')).toBe(false);
+    expect(input(element)!.hasAttribute('aria-disabled')).toBe(false);
+  });
+});
+
+describe('craft-field instructions position', () => {
+  it('renders instructions before the input by default', async () => {
+    const element = await createField({
+      label: 'My field',
+      'help-text': 'Some instructions',
+    });
+
+    expect(
+      element.shadowRoot!.querySelector(
+        '.form-field__group-one .form-field__help-text'
+      )
+    ).not.toBeNull();
+  });
+
+  it('renders instructions after the input when requested', async () => {
+    const element = await createField({
+      label: 'My field',
+      'help-text': 'Some instructions',
+      'instructions-position': 'after',
+    });
+
+    expect(
+      element.shadowRoot!.querySelector(
+        '.form-field__group-one .form-field__help-text'
+      )
+    ).toBeNull();
+    expect(
+      element.shadowRoot!.querySelector(
+        '.form-field__group-two .form-field__help-text'
+      )
+    ).not.toBeNull();
+  });
+});
+
+describe('craft-field heading prefix/suffix', () => {
+  it('renders heading-prefix and heading-suffix slots around the label', async () => {
+    const element = document.createElement('craft-field') as CraftField;
+    element.setAttribute('label', 'My field');
+    element.innerHTML = `
+      <input slot="input">
+      <span slot="heading-prefix">pre</span>
+      <span slot="heading-suffix">post</span>
+    `;
+    document.body.append(element);
+    await element.updateComplete;
+    await element.updateComplete;
+
+    const heading = element.shadowRoot!.querySelector('.heading')!;
+    const slotNames = Array.from(heading.querySelectorAll('slot')).map((s) =>
+      s.getAttribute('name')
+    );
+    expect(slotNames[0]).toBe('heading-prefix');
+    expect(slotNames[slotNames.length - 1]).toBe('heading-suffix');
+  });
+});
diff --git a/packages/craftcms-ui/src/components/field/field.ts b/packages/craftcms-ui/src/components/field/field.ts
new file mode 100644
index 00000000000..879bc4089ef
--- /dev/null
+++ b/packages/craftcms-ui/src/components/field/field.ts
@@ -0,0 +1,437 @@
+import {LitElement, html, nothing, type PropertyValues} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {FormControlMixin} from '@lion/ui/form-core.js';
+// Registers <craft-callout> globally for the tip/warning notices.
+import '../callout/callout.js';
+import {baseFieldStyles} from '@src/styles/form.styles';
+import visuallyHiddenStyles from '@src/styles/visually-hidden.styles.js';
+import styles from './field.styles.js';
+import {t} from '@src/utilities/translate';
+
+/**
+ * A generic form-field shell that renders the standard CP field chrome
+ * (label, instructions, tip/warning notices, errors and status badge) around
+ * any slotted control, mirroring the server-side field wrapper
+ * (`FormFields::fieldHtml()` / `forms/field.blade.php`).
+ *
+ * The shell never touches the slotted input's value, validation or events —
+ * it only provides the surrounding chrome and the label/description aria
+ * wiring supplied by Lion's `FormControlMixin`.
+ *
+ * @slot input - The wrapped control. Required.
+ * @slot label - The field label. Alternative to the `label` attribute.
+ * @slot help-text - The field instructions. Alternative to the `help-text`
+ *   attribute.
+ * @slot feedback - Validation errors (e.g. an error list).
+ * @slot tip - Tip notice content, rendered inside an info callout.
+ * @slot warning - Warning notice content, rendered inside a warning callout.
+ * @slot label-extra - Extra heading content (handle-copy buttons, action
+ *   menus), rendered after a flex-grow spacer.
+ */
+export default class CraftField extends FormControlMixin(LitElement) {
+  static override get styles() {
+    return [visuallyHiddenStyles, baseFieldStyles, styles];
+  }
+
+  /** Renders the required indicator inside the label. */
+  @property({type: Boolean, reflect: true}) required = false;
+
+  /** Renders the translation icon inside the label. */
+  @property({type: Boolean, reflect: true}) translatable = false;
+
+  /** Accessible description for the translation icon. */
+  @property({attribute: 'translation-description'})
+  translationDescription: string = t('This field is translatable.');
+
+  /**
+   * Group semantics: sets `role="group"` + `aria-labelledby` on the host
+   * instead of a `label[for]` association, like the server-side `fieldset`
+   * config option.
+   */
+  @property({type: Boolean, reflect: true}) fieldset = false;
+
+  /** Status badge modifier (e.g. `modified`, `outdated`). */
+  @property({reflect: true}) status?: string;
+
+  /** Human-facing label for the status badge. */
+  @property({attribute: 'status-label'}) statusLabel?: string;
+
+  /**
+   * Writing direction of the input container. Defaults to the closest `dir`
+   * attribute, falling back to the document direction.
+   */
+  @property({reflect: true}) orientation?: 'ltr' | 'rtl';
+
+  /**
+   * Style hook mirroring the server-side `.field.has-errors` class. Kept in
+   * sync automatically with the presence of `feedback` slot content; can
+   * also be set manually when no feedback node is slotted.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'has-errors'})
+  hasErrors = false;
+
+  /** Where the instructions render relative to the input. */
+  @property({attribute: 'instructions-position'})
+  instructionsPosition: 'before' | 'after' = 'before';
+
+  /**
+   * Overrides the inferred width behavior. By default, the field spans its
+   * column, unless the slotted control declares a `maxlength` (reflected
+   * onto the host as `has-maxlength`) — which shrinks the field to the
+   * control's width. `full` spans the column despite a `maxlength`; `auto`
+   * shrinks without one.
+   */
+  @property({type: String, reflect: true}) width?: 'full' | 'auto';
+
+  private __lightDomObserver = new MutationObserver(() =>
+    this.__onLightDomChanged()
+  );
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.__lightDomObserver.observe(this, {childList: true});
+    this.__syncHasErrors();
+    this.__syncHasMaxlength();
+  }
+
+  /**
+   * Reflects whether the slotted control declares a `maxlength` onto the
+   * host, where the stylesheet can react to it — a shadow stylesheet can't
+   * observe light-DOM children via `:host(:has(…))`.
+   */
+  private __syncHasMaxlength(): void {
+    this.toggleAttribute(
+      'has-maxlength',
+      this.querySelector(':scope > [slot="input"]')?.hasAttribute(
+        'maxlength'
+      ) ?? false
+    );
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.__lightDomObserver.disconnect();
+  }
+
+  override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('disabled')) {
+      // FormControlMixin reflects `aria-disabled` onto the slotted input, but
+      // the shell doesn't own the input (its disabled state is the input's
+      // own business), so undo that.
+      this._inputNode?.removeAttribute('aria-disabled');
+    }
+
+    if (changedProperties.has('fieldset')) {
+      this.__syncFieldsetSemantics();
+    }
+
+    if (
+      changedProperties.has('label') ||
+      changedProperties.has('required') ||
+      changedProperties.has('translatable') ||
+      changedProperties.has('translationDescription')
+    ) {
+      // FormControlMixin rewrites the label node's textContent when the label
+      // property changes, wiping any decorations, so re-sync afterwards.
+      this.__syncLabelDecorations();
+    }
+  }
+
+  /**
+   * The wrapped control. Exposed for consumers; the shell never mutates its
+   * value or listens to its events.
+   */
+  get control(): HTMLElement | undefined {
+    return this._inputNode ?? undefined;
+  }
+
+  protected get _resolvedOrientation(): 'ltr' | 'rtl' {
+    if (this.orientation) {
+      return this.orientation;
+    }
+    const dir =
+      (this.closest('[dir]') as HTMLElement | null)?.getAttribute('dir') ??
+      document.documentElement.getAttribute('dir');
+    return dir?.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
+  }
+
+  /**
+   * Links tip/warning notices (and any late-registered instructions or
+   * feedback nodes) into the input's `aria-describedby`, mirroring the
+   * server-side `describedBy` computation.
+   */
+  protected override _enhanceLightDomA11y(): void {
+    super._enhanceLightDomA11y();
+    this.__wireDescribedBy();
+  }
+
+  /**
+   * Registers aria references in insertion order instead of Lion's
+   * DOM-order reordering. The reorder implementation depends on
+   * `Element.assignedSlot`, which happy-dom doesn't populate, and insertion
+   * order already matches the template order here (label; help-text,
+   * feedback, tip, warning).
+   */
+  override addToAriaLabelledBy(
+    element: HTMLElement,
+    customConfig: {idPrefix?: string; reorder?: boolean} = {}
+  ): void {
+    super.addToAriaLabelledBy(element, {...customConfig, reorder: false});
+  }
+
+  override addToAriaDescribedBy(
+    element: HTMLElement,
+    customConfig: {idPrefix?: string; reorder?: boolean} = {}
+  ): void {
+    super.addToAriaDescribedBy(element, {...customConfig, reorder: false});
+  }
+
+  // `readOnly` (attribute: `readonly`) is inherited from FormControlMixin
+  // and renders the read-only badge in the heading.
+
+  override render() {
+    return html`
+      ${this._statusBadgeTemplate()}
+      <div class="form-field__group-one">${this._groupOneTemplate()}</div>
+      <div class="form-field__group-two">${this._groupTwoTemplate()}</div>
+    `;
+  }
+
+  protected override _groupOneTemplate() {
+    return html`
+      ${this._labelTemplate()}
+      ${this.instructionsPosition === 'before'
+        ? this._helpTextTemplate()
+        : nothing}
+    `;
+  }
+
+  protected override _groupTwoTemplate() {
+    return html`
+      ${this._inputGroupTemplate()}
+      ${this.instructionsPosition === 'after'
+        ? this._helpTextTemplate()
+        : nothing}
+      ${this._noticeTemplate('tip')} ${this._noticeTemplate('warning')}
+      ${this._feedbackTemplate()}
+    `;
+  }
+
+  /**
+   * The field heading: label, read-only badge, flex-grow spacer and label
+   * extras, mirroring `.field > .heading` in the Blade wrapper.
+   */
+  protected override _labelTemplate() {
+    return html`
+      <div class="heading form-field__label">
+        <slot name="heading-prefix"></slot>
+        <slot name="label"></slot>
+        ${this.readOnly
+          ? html`<span class="read-only-badge">${t('Read Only')}</span>`
+          : nothing}
+        ${this.__hasLightChild('label-extra')
+          ? html`<div class="flex-grow"></div>`
+          : nothing}
+        <slot name="label-extra"></slot>
+        <slot name="heading-suffix"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * The input container, mirroring the server-side
+   * `.input.{orientation}.errors.disabled` classes while keeping Lion's
+   * `input-group` structure.
+   */
+  protected override _inputGroupTemplate() {
+    const classes = {
+      'input-group': true,
+      input: true,
+      [this._resolvedOrientation]: true,
+      errors: this.hasErrors,
+      disabled: this.disabled,
+    };
+    return html`
+      <div class=${classMap(classes)}>
+        ${this._inputGroupBeforeTemplate()}
+        <div class="input-group__container">
+          ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
+          ${this._inputGroupSuffixTemplate()}
+        </div>
+        ${this._inputGroupAfterTemplate()}
+      </div>
+    `;
+  }
+
+  protected _statusBadgeTemplate() {
+    if (!this.status) {
+      return nothing;
+    }
+    return html`
+      <div
+        class="status-badge ${this.status}"
+        title=${ifDefined(this.statusLabel)}
+        aria-hidden="true"
+      >
+        <span class="cp-visually-hidden">${this.statusLabel}</span>
+      </div>
+    `;
+  }
+
+  /**
+   * Tip/warning notices, mirroring `forms/field-notice.blade.php`: an info
+   * callout with a lightbulb icon for tips, a warning callout (default icon)
+   * for warnings, each with a visually hidden prefix.
+   */
+  protected _noticeTemplate(kind: 'tip' | 'warning') {
+    if (!this.__hasLightChild(kind)) {
+      return nothing;
+    }
+    const isTip = kind === 'tip';
+    return html`
+      <craft-callout
+        class="field-notice"
+        variant=${isTip ? 'info' : 'warning'}
+        icon=${ifDefined(isTip ? 'lightbulb' : undefined)}
+        appearance="plain"
+      >
+        <span class="cp-visually-hidden"
+          >${isTip ? t('Tip:') : t('Warning:')}
+        </span>
+        <slot name=${kind}></slot>
+      </craft-callout>
+    `;
+  }
+
+  private __hasLightChild(slotName: string): boolean {
+    return this.__lightChild(slotName) !== undefined;
+  }
+
+  private __lightChild(slotName: string): HTMLElement | undefined {
+    return (Array.from(this.children) as HTMLElement[]).find(
+      (el) => el.slot === slotName
+    );
+  }
+
+  private __onLightDomChanged(): void {
+    this.__wireDescribedBy();
+    this.__syncHasErrors();
+    this.__syncLabelDecorations();
+    this.__syncHasMaxlength();
+    // Conditional templates (tip/warning callouts, label-extra spacer) depend
+    // on light DOM children.
+    this.requestUpdate();
+  }
+
+  private __wireDescribedBy(): void {
+    for (const slotName of ['help-text', 'feedback', 'tip', 'warning']) {
+      const node = this.__lightChild(slotName);
+      if (node) {
+        // Already-registered nodes are ignored by addToAriaDescribedBy.
+        this.addToAriaDescribedBy(node, {idPrefix: slotName});
+      }
+    }
+  }
+
+  private __syncHasErrors(): void {
+    const feedback = this.__lightChild('feedback');
+    if (!feedback) {
+      // No feedback node: leave manual control of `has-errors` alone.
+      return;
+    }
+    this.hasErrors = Boolean(
+      feedback.childElementCount || feedback.textContent?.trim()
+    );
+  }
+
+  private __syncFieldsetSemantics(): void {
+    const labelNode = this._labelNode;
+    if (this.fieldset) {
+      this.setAttribute('role', 'group');
+      if (labelNode) {
+        if (!labelNode.id) {
+          labelNode.id = `label-${this._inputId}`;
+        }
+        this.setAttribute('aria-labelledby', labelNode.id);
+        labelNode.removeAttribute('for');
+      }
+    } else {
+      if (this.getAttribute('role') === 'group') {
+        this.removeAttribute('role');
+      }
+      this.removeAttribute('aria-labelledby');
+      if (labelNode && this._inputNode) {
+        labelNode.setAttribute('for', this._inputNode.id || this._inputId);
+      }
+    }
+  }
+
+  /**
+   * Renders the required indicator and translation icon inside the label
+   * node, matching `FormFields::fieldHtml()`'s label internals. These live in
+   * the light DOM (like the server-rendered markup), so they pick up the CP's
+   * global `.visually-hidden`, `.required` and `.t9n-indicator` styles.
+   */
+  private __syncLabelDecorations(): void {
+    const labelNode = this._labelNode;
+    if (!labelNode) {
+      return;
+    }
+
+    for (const el of labelNode.querySelectorAll(
+      '[data-craft-field-decoration]'
+    )) {
+      el.remove();
+    }
+
+    if (!this.label) {
+      return;
+    }
+
+    if (this.required) {
+      const srLabel = document.createElement('span');
+      srLabel.className = 'visually-hidden';
+      srLabel.textContent = t('Required');
+      srLabel.setAttribute('data-craft-field-decoration', '');
+
+      const indicator = document.createElement('span');
+      indicator.className = 'required';
+      indicator.setAttribute('aria-hidden', 'true');
+      indicator.setAttribute('data-craft-field-decoration', '');
+
+      labelNode.append(srLabel, indicator);
+    }
+
+    if (this.translatable) {
+      const tooltip = document.createElement('craft-tooltip');
+      tooltip.setAttribute('placement', 'bottom');
+      tooltip.setAttribute('max-width', '200px');
+      tooltip.setAttribute('text', this.translationDescription);
+      tooltip.setAttribute('delay', '1000');
+      tooltip.setAttribute('data-craft-field-decoration', '');
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 't9n-indicator prevent-autofocus';
+      button.setAttribute('data-icon', 'language');
+      button.setAttribute('aria-label', this.translationDescription);
+
+      tooltip.append(button);
+      labelNode.append(tooltip);
+    }
+  }
+}
+
+if (!customElements.get('craft-field')) {
+  customElements.define('craft-field', CraftField);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-field': CraftField;
+  }
+}
diff --git a/packages/craftcms-ui/src/components/input/input.stories.ts b/packages/craftcms-ui/src/components/input/input.stories.ts
index 71ea43775de..9cc47a9ba1e 100644
--- a/packages/craftcms-ui/src/components/input/input.stories.ts
+++ b/packages/craftcms-ui/src/components/input/input.stories.ts
@@ -54,3 +54,15 @@ export const WithSuffix: Story = {
     </craft-input>
   `,
 };
+
+/** \`width="full"\` spans the column even when a \`maxlength\` is set. */
+export const FullWidthOverride: Story = {
+  render: () => html`
+    <craft-input label="Port" maxlength="6" width="full"></craft-input>
+  `,
+};
+
+/** \`width="auto"\` shrinks the control without requiring a \`maxlength\`. */
+export const AutoWidth: Story = {
+  render: () => html`<craft-input label="Handle" width="auto"></craft-input>`,
+};
diff --git a/packages/craftcms-ui/src/components/input/input.styles.ts b/packages/craftcms-ui/src/components/input/input.styles.ts
index 6371516a79f..a78aa4448ea 100644
--- a/packages/craftcms-ui/src/components/input/input.styles.ts
+++ b/packages/craftcms-ui/src/components/input/input.styles.ts
@@ -27,4 +27,24 @@ export default css`
   :host([hidden-input]) .input-group__container {
     display: none;
   }
+
+  /* A maxlength shrinks the control to the expected character width instead
+     of spanning the column. The width attribute decouples the behaviors:
+     width="full" spans despite a maxlength; width="auto" shrinks without
+     one. */
+  :host([maxlength]:not([width='full'])),
+  :host([width='auto']) {
+    width: fit-content;
+  }
+
+  :host([maxlength]:not([width='full'])) ::slotted([slot='input']),
+  :host([width='auto']) ::slotted([slot='input']) {
+    width: auto;
+  }
+
+  /* Stop the input chrome from flexing back out to the available space. */
+  :host([maxlength]:not([width='full'])) .input-group__container,
+  :host([width='auto']) .input-group__container {
+    flex: 0 0 auto;
+  }
 `;
diff --git a/packages/craftcms-ui/src/components/input/input.ts b/packages/craftcms-ui/src/components/input/input.ts
index 2f55dedd8a8..d37190503d4 100644
--- a/packages/craftcms-ui/src/components/input/input.ts
+++ b/packages/craftcms-ui/src/components/input/input.ts
@@ -18,6 +18,14 @@ export default class CraftInput extends LionInput {
   /** Renders the input at a smaller size. */
   @property({reflect: true, type: Boolean}) small = false;
 
+  /**
+   * Overrides the inferred width behavior. By default the control spans its
+   * column, unless `maxlength` is set — which shrinks the control to the
+   * expected character width. `full` spans the column despite a `maxlength`;
+   * `auto` shrinks to the input's intrinsic width without one.
+   */
+  @property({type: String, reflect: true}) width?: 'full' | 'auto';
+
   /** Center-aligns the input text. */
   @property({reflect: true, type: Boolean}) center = false;
 
@@ -35,10 +43,11 @@ export default class CraftInput extends LionInput {
   override connectedCallback() {
     super.connectedCallback();
 
-    if (this._inputNode && this.maxlength) {
-      if (this.maxlength > 0) {
-        this._inputNode.maxLength = this.maxlength;
-      }
+    if (this._inputNode && this.maxlength && this.maxlength > 0) {
+      this._inputNode.maxLength = this.maxlength;
+      // Give the input a matching intrinsic width, so the shrunk control
+      // (see `width`) fits the expected character count.
+      this._inputNode.size = this.maxlength;
     }
   }
 }
diff --git a/packages/craftcms-ui/src/components/radio-group/radio-group.stories.ts b/packages/craftcms-ui/src/components/radio-group/radio-group.stories.ts
new file mode 100644
index 00000000000..810ac2a676d
--- /dev/null
+++ b/packages/craftcms-ui/src/components/radio-group/radio-group.stories.ts
@@ -0,0 +1,75 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+
+import './radio-group.js';
+import '../radio/radio.js';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Controls/Radio Group',
+  component: 'craft-radio-group',
+  args: {},
+  render: function () {
+    return html`<craft-radio-group name="scientist" label="Scientists">
+      <craft-radio label="Marie Curie" .choiceValue=${'curie'}></craft-radio>
+      <craft-radio
+        label="Ada Lovelace"
+        .choiceValue=${'lovelace'}
+        .checked=${true}
+      ></craft-radio>
+      <craft-radio label="Grace Hopper" .choiceValue=${'hopper'}></craft-radio>
+    </craft-radio-group>`;
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+};
+
+export const ServerRendered: Story = {
+  render: () =>
+    html`<craft-radio-group label="Color">
+      <div>
+        <craft-radio>
+          <input
+            slot="input"
+            type="radio"
+            id="color-red"
+            name="color"
+            value="red"
+          />
+          <label slot="label" for="color-red">Red</label>
+        </craft-radio>
+      </div>
+      <div>
+        <craft-radio>
+          <input
+            slot="input"
+            type="radio"
+            id="color-green"
+            name="color"
+            value="green"
+            checked
+          />
+          <label slot="label" for="color-green">Green</label>
+        </craft-radio>
+      </div>
+      <div>
+        <craft-radio>
+          <input
+            slot="input"
+            type="radio"
+            id="color-blue"
+            name="color"
+            value="blue"
+          />
+          <label slot="label" for="color-blue">Blue</label>
+        </craft-radio>
+      </div>
+    </craft-radio-group>`,
+};
diff --git a/packages/craftcms-ui/src/components/radio-group/radio-group.test.ts b/packages/craftcms-ui/src/components/radio-group/radio-group.test.ts
new file mode 100644
index 00000000000..bcb241e21b7
--- /dev/null
+++ b/packages/craftcms-ui/src/components/radio-group/radio-group.test.ts
@@ -0,0 +1,74 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftRadioGroup from './radio-group.js';
+import './radio-group.js';
+import '../radio/radio.js';
+
+async function createFromMarkup(markup: string): Promise<CraftRadioGroup> {
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  document.body.append(template.content);
+  const element = document.body.querySelector(
+    'craft-radio-group'
+  ) as CraftRadioGroup;
+  await element.updateComplete;
+  return element;
+}
+
+const SSR_MARKUP = `
+  <craft-radio-group label="Color">
+    <div>
+      <craft-radio>
+        <input slot="input" type="radio" id="c1" name="color" value="red">
+        <label slot="label" for="c1">Red</label>
+      </craft-radio>
+    </div>
+    <div>
+      <craft-radio>
+        <input slot="input" type="radio" id="c2" name="color" value="green" checked>
+        <label slot="label" for="c2">Green</label>
+      </craft-radio>
+    </div>
+    <div>
+      <craft-radio>
+        <input slot="input" type="radio" id="c3" name="color" value="blue">
+        <label slot="label" for="c3">Blue</label>
+      </craft-radio>
+    </div>
+  </craft-radio-group>
+`;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SSR name adoption', () => {
+  it('adopts the group name from the slotted inputs instead of wiping theirs', async () => {
+    const element = await createFromMarkup(SSR_MARKUP);
+    const inputs = element.querySelectorAll('input[type="radio"]');
+
+    expect(element.name).toBe('color');
+    for (const input of inputs) {
+      expect((input as HTMLInputElement).name).toBe('color');
+    }
+  });
+
+  it('respects an explicit host name', async () => {
+    const element = await createFromMarkup(`
+      <craft-radio-group name="parent">
+        <craft-radio>
+          <input slot="input" type="radio" name="child" value="a">
+        </craft-radio>
+      </craft-radio-group>
+    `);
+
+    expect(element.name).toBe('parent');
+  });
+
+  it('aggregates SSR checked state into the group modelValue', async () => {
+    const element = await createFromMarkup(SSR_MARKUP);
+    await element.registrationComplete;
+    await element.updateComplete;
+
+    expect(element.modelValue).toBe('green');
+  });
+});
diff --git a/packages/craftcms-ui/src/components/radio-group/radio-group.ts b/packages/craftcms-ui/src/components/radio-group/radio-group.ts
index ff0f58d8cbb..a522afb8318 100644
--- a/packages/craftcms-ui/src/components/radio-group/radio-group.ts
+++ b/packages/craftcms-ui/src/components/radio-group/radio-group.ts
@@ -1,8 +1,47 @@
 import {LionRadioGroup} from '@lion/ui/radio-group.js';
 import {inputStyles} from '@src/styles/form.styles';
-import {css} from 'lit';
+import {css, type PropertyValues} from 'lit';
 
 export default class CraftRadioGroup extends LionRadioGroup {
+  private __ssrNameAdopted = false;
+
+  /**
+   * Adopts the group name from server-rendered radio inputs. Lion syncs
+   * each registered child's name to the group's (`name || ''`), so a
+   * nameless group would strip the SSR'd names and break native posting.
+   * Runs before `super.connectedCallback()` so the name is set before any
+   * child registers; `willUpdate` is the fallback for streaming parsing,
+   * where the element can connect before its children exist.
+   */
+  override connectedCallback() {
+    this.__adoptSlottedName();
+    super.connectedCallback();
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues) {
+    this.__adoptSlottedName();
+    super.willUpdate(changedProperties);
+  }
+
+  private __adoptSlottedName() {
+    if (this.__ssrNameAdopted || this.name) {
+      return;
+    }
+
+    const input = this.querySelector<HTMLInputElement>(
+      'input[type="radio"][name]'
+    );
+
+    if (!input) {
+      // Leave the flag unset so a later pass can still adopt once children
+      // have been parsed.
+      return;
+    }
+
+    this.__ssrNameAdopted = true;
+    this.name = input.name;
+  }
+
   static override get styles() {
     return [
       ...super.styles,
diff --git a/packages/craftcms-ui/src/components/radio/radio.test.ts b/packages/craftcms-ui/src/components/radio/radio.test.ts
new file mode 100644
index 00000000000..b7f9f770379
--- /dev/null
+++ b/packages/craftcms-ui/src/components/radio/radio.test.ts
@@ -0,0 +1,53 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftRadio from './radio.js';
+import './radio.js';
+
+async function createFromMarkup(markup: string): Promise<CraftRadio> {
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  document.body.append(template.content);
+  const element = document.body.querySelector('craft-radio') as CraftRadio;
+  await element.updateComplete;
+  return element;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SSR hydration', () => {
+  it('adopts state from a slotted input instead of wiping it', async () => {
+    const element = await createFromMarkup(`
+      <craft-radio>
+        <input slot="input" type="radio" id="r1" name="mode" value="auto" checked>
+        <label slot="label" for="r1">Auto</label>
+      </craft-radio>
+    `);
+    const input = element.querySelector('input')!;
+
+    expect(element.name).toBe('mode');
+    expect(element.checked).toBe(true);
+    expect(input.name).toBe('mode');
+    expect(input.checked).toBe(true);
+    expect(input.value).toBe('auto');
+  });
+
+  it('keeps the label association so label clicks select', async () => {
+    const element = await createFromMarkup(`
+      <craft-radio>
+        <input slot="input" type="radio" id="r2" name="mode" value="manual">
+        <label slot="label" for="r2">Manual</label>
+      </craft-radio>
+    `);
+    const input = element.querySelector('input')!;
+    const label = element.querySelector('label')!;
+
+    expect(label.getAttribute('for')).toBe(input.id);
+
+    label.click();
+    await element.updateComplete;
+
+    expect(element.checked).toBe(true);
+    expect(input.checked).toBe(true);
+  });
+});
diff --git a/packages/craftcms-ui/src/components/radio/radio.ts b/packages/craftcms-ui/src/components/radio/radio.ts
index 5533c52d194..d8c444b3eff 100644
--- a/packages/craftcms-ui/src/components/radio/radio.ts
+++ b/packages/craftcms-ui/src/components/radio/radio.ts
@@ -1,7 +1,8 @@
 import {LionRadio} from '@lion/ui/radio-group.js';
 import {css} from 'lit';
+import {SsrChoiceInputMixin} from '@src/mixins/SsrChoiceInputMixin';
 
-export default class CraftRadio extends LionRadio {
+export default class CraftRadio extends SsrChoiceInputMixin(LionRadio) {
   static override get styles() {
     return [
       ...super.styles,
diff --git a/packages/craftcms-ui/src/components/reorder-button/reorder-button.stories.ts b/packages/craftcms-ui/src/components/reorder-button/reorder-button.stories.ts
index d3c8b447fc3..211f0672427 100644
--- a/packages/craftcms-ui/src/components/reorder-button/reorder-button.stories.ts
+++ b/packages/craftcms-ui/src/components/reorder-button/reorder-button.stories.ts
@@ -14,6 +14,7 @@ const meta = {
     label: 'Reorder',
     position: 'middle',
     variant: 'neutral',
+    orientation: 'vertical',
     disabled: false,
   },
   argTypes: {
@@ -21,12 +22,17 @@ const meta = {
       control: {type: 'select'},
       options: ['first', 'middle', 'last'],
     },
+    orientation: {
+      control: {type: 'select'},
+      options: ['vertical', 'horizontal'],
+    },
   },
   render: (args) => html`
     <craft-reorder-button
       label="${args.label}"
       position="${args.position}"
       variant="${args.variant}"
+      orientation="${args.orientation}"
       ?disabled="${args.disabled}"
       @reorder="${(e: CustomEvent<{direction: 'up' | 'down'}>) =>
         console.log('reorder', e.detail.direction)}"
@@ -51,6 +57,11 @@ export const Last: Story = {
   args: {position: 'last'},
 };
 
+export const Horizontal: Story = {
+  name: 'Horizontal (move forward/backward)',
+  args: {orientation: 'horizontal'},
+};
+
 export const Disabled: Story = {
   args: {disabled: true},
 };
diff --git a/packages/craftcms-ui/src/components/reorder-button/reorder-button.ts b/packages/craftcms-ui/src/components/reorder-button/reorder-button.ts
index dfd33f7b53f..a56cc7d998d 100644
--- a/packages/craftcms-ui/src/components/reorder-button/reorder-button.ts
+++ b/packages/craftcms-ui/src/components/reorder-button/reorder-button.ts
@@ -9,10 +9,12 @@ import '../icon/icon.js';
 
 export type ReorderPosition = 'first' | 'middle' | 'last';
 export type ReorderDirection = 'up' | 'down';
+export type ReorderOrientation = 'vertical' | 'horizontal';
 
 /**
  * @summary A drag handle that also exposes "Move up"/"Move down" actions via a
- * menu, for reordering an item within a list.
+ * menu, for reordering an item within a list. Horizontal lists get "Move
+ * forward"/"Move backward" instead (see `orientation`).
  * @since 1.0
  *
  * @dependency craft-action-menu
@@ -21,8 +23,9 @@ export type ReorderDirection = 'up' | 'down';
  * @dependency craft-icon
  *
  * @fires {CustomEvent<{direction: ReorderDirection}>} reorder - Emitted when the
- *   user chooses "Move up" or "Move down". `event.detail.direction` is `'up'` or
- *   `'down'`.
+ *   user chooses a move action. `event.detail.direction` is `'up'` or `'down'`
+ *   regardless of orientation: `'up'` always means toward the start of the list
+ *   ("Move forward" when horizontal) and `'down'` toward the end.
  */
 export default class CraftReorderButton extends LitElement {
   static override styles = [styles];
@@ -36,6 +39,16 @@ export default class CraftReorderButton extends LitElement {
    */
   @property({reflect: true}) position: ReorderPosition = 'middle';
 
+  /**
+   * The list's flow direction. `vertical` (default) renders Move up/down;
+   * `horizontal` renders Move forward/backward, with left/right arrows that
+   * honor the closest writing direction (`dir` attribute, falling back to the
+   * document direction) so "forward" always points toward the start of the
+   * list. `position` semantics are unchanged: `first` disables the
+   * up/forward action, `last` the down/backward one.
+   */
+  @property({reflect: true}) orientation: ReorderOrientation = 'vertical';
+
   /** Theme variant forwarded to the underlying invoker button. */
   @property({reflect: true}) variant: string = 'neutral';
 
@@ -76,8 +89,32 @@ export default class CraftReorderButton extends LitElement {
     );
   }
 
+  /** Whether the closest writing direction is RTL (same lookup as `craft-field`). */
+  private _isRtl(): boolean {
+    const dir =
+      (this.closest('[dir]') as HTMLElement | null)?.getAttribute('dir') ??
+      document.documentElement.getAttribute('dir');
+    return dir?.toLowerCase() === 'rtl';
+  }
+
   override render() {
     const label = this.label ?? t('Reorder');
+    const horizontal = this.orientation === 'horizontal';
+    const rtl = horizontal && this._isRtl();
+    // "up" = toward the start of the list; on horizontal lists that's the
+    // inline-start side, so the arrows flip with the writing direction.
+    const upIcon = horizontal
+      ? rtl
+        ? 'arrow-right'
+        : 'arrow-left'
+      : 'arrow-up';
+    const downIcon = horizontal
+      ? rtl
+        ? 'arrow-left'
+        : 'arrow-right'
+      : 'arrow-down';
+    const upLabel = horizontal ? t('Move forward') : t('Move up');
+    const downLabel = horizontal ? t('Move backward') : t('Move down');
 
     return html`
       <craft-action-menu ?disabled="${this.disabled}">
@@ -102,20 +139,20 @@ export default class CraftReorderButton extends LitElement {
 
         <div slot="content">
           <craft-action-item
-            icon="arrow-up"
+            icon="${upIcon}"
             ?disabled="${this.position === 'first'}"
             @click="${() => this._reorder('up')}"
             data-action="moveUp"
             command="--move-up"
-            >${t('Move up')}</craft-action-item
+            >${upLabel}</craft-action-item
           >
           <craft-action-item
-            icon="arrow-down"
+            icon="${downIcon}"
             ?disabled="${this.position === 'last'}"
             @click="${() => this._reorder('down')}"
             data-action="moveDown"
             command="--move-down"
-            >${t('Move down')}</craft-action-item
+            >${downLabel}</craft-action-item
           >
         </div>
       </craft-action-menu>
diff --git a/packages/craftcms-ui/src/components/select-color/select-color.ts b/packages/craftcms-ui/src/components/select-color/select-color.ts
index d2bc6d589b0..6f761915719 100644
--- a/packages/craftcms-ui/src/components/select-color/select-color.ts
+++ b/packages/craftcms-ui/src/components/select-color/select-color.ts
@@ -37,7 +37,7 @@ export default class CraftSelectColor extends LitElement {
   /**
    * The currently selected color value.
    */
-  @property()
+  @property({attribute: 'model-value'})
   modelValue: string | null = null;
 
   /**
diff --git a/packages/craftcms-ui/src/index.ts b/packages/craftcms-ui/src/index.ts
index 6e3971c4214..dd43dfd4354 100644
--- a/packages/craftcms-ui/src/index.ts
+++ b/packages/craftcms-ui/src/index.ts
@@ -28,6 +28,7 @@ export {default as CraftCopyAttribute} from './components/copy-attribute/copy-at
 export {default as CraftCopyButton} from './components/copy-button/copy-button.js';
 export {default as CraftDialog} from './components/dialog/dialog.js';
 export {default as CraftDisclosure} from './components/disclosure/disclosure.js';
+export {default as CraftField} from './components/field/field.js';
 export {default as CraftFieldGroup} from './components/field-group/field-group.js';
 export {default as CraftIcon} from './components/icon/icon.js';
 export {default as CraftIndicator} from './components/indicator/indicator.js';
@@ -50,6 +51,7 @@ export {
   default as CraftReorderButton,
   type ReorderPosition,
   type ReorderDirection,
+  type ReorderOrientation,
 } from './components/reorder-button/reorder-button.js';
 export {default as CraftSelectColor} from './components/select-color/select-color.js';
 export {default as CraftSelectRich} from './components/select-rich/select-rich.js';
diff --git a/packages/craftcms-ui/src/mixins/SsrChoiceInputMixin.ts b/packages/craftcms-ui/src/mixins/SsrChoiceInputMixin.ts
new file mode 100644
index 00000000000..a29413cb654
--- /dev/null
+++ b/packages/craftcms-ui/src/mixins/SsrChoiceInputMixin.ts
@@ -0,0 +1,153 @@
+import type {LitElement, PropertyValues} from 'lit';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Constructor<T = object> = new (...args: any[]) => T;
+
+/** The public Lion choice-input surface the mixin drives. */
+interface ChoiceInputHost {
+  name: string;
+  value: string;
+  choiceValue: unknown;
+  checked: boolean;
+  disabled: boolean;
+}
+
+/** Lion-protected members the mixin needs; accessed via cast. */
+interface ChoiceInputInternals {
+  _inputId: string;
+  _inputNode: HTMLElement | undefined;
+}
+
+/**
+ * Makes a Lion choice input (checkbox, radio) adopt server-rendered state
+ * from a slotted light-DOM input. Lion treats the host as the source of
+ * truth and would otherwise push its defaults (no name, unchecked, empty
+ * value) onto the adopted input — `LionField`'s connectedCallback already
+ * reflects the empty formattedValue into the input, so adoption must happen
+ * before `super.connectedCallback()`. It also aligns `_inputId` with the
+ * SSR'd input's id so Lion's label `for` rewrite keeps label clicks working.
+ *
+ * Returns `Base`'s own type so the subclass keeps Lion's statics and member
+ * visibility; the mixin only adds lifecycle behavior.
+ */
+export const SsrChoiceInputMixin = <
+  T extends Constructor<LitElement & ChoiceInputHost>,
+>(
+  Base: T
+): T => {
+  class SsrChoiceInput extends Base {
+    private __ssrStateAdopted = false;
+
+    /**
+     * Guards Lion's constructor-time `value = ''` reflection. Checkbox and
+     * radio inputs have no dirty-value state, so writing the `value`
+     * property writes through to the content attribute — destroying the
+     * server-rendered value before adoption gets a chance to run. Class
+     * fields aren't initialized during `super()`, so `__ssrStateAdopted` is
+     * `undefined` (treated as not-yet-adopted) when the guard matters.
+     */
+    override set value(value: string) {
+      if (
+        value === '' &&
+        !this.__ssrStateAdopted &&
+        this.__slottedInput()?.hasAttribute('value')
+      ) {
+        return;
+      }
+
+      super.value = value;
+    }
+
+    override get value(): string {
+      return super.value;
+    }
+
+    override connectedCallback() {
+      this.__adoptSlottedInputState();
+      super.connectedCallback();
+    }
+
+    /**
+     * Fallback for streaming parsing, where the element can connect before
+     * its children exist and the adoption in `connectedCallback` finds no
+     * input.
+     */
+    protected override willUpdate(changedProperties: PropertyValues) {
+      this.__adoptSlottedInputState();
+      super.willUpdate(changedProperties);
+    }
+
+    /**
+     * Keeps the native input's `value` in sync with `choiceValue`. The input
+     * is the posting surface (native form submits, `serializeFormInputs`),
+     * and Lion's format reflection can overwrite it with a stale
+     * formattedValue on the first update cycle.
+     */
+    protected override updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+
+      const {_inputNode} = this as unknown as ChoiceInputInternals;
+      const choiceValue = this.choiceValue;
+
+      if (
+        typeof choiceValue === 'string' &&
+        choiceValue !== '' &&
+        _inputNode instanceof HTMLInputElement &&
+        _inputNode.value !== choiceValue
+      ) {
+        _inputNode.value = choiceValue;
+      }
+    }
+
+    private __slottedInput(): HTMLInputElement | undefined {
+      return Array.from(this.children).find(
+        (child): child is HTMLInputElement =>
+          child instanceof HTMLInputElement && child.slot === 'input'
+      );
+    }
+
+    private __adoptSlottedInputState() {
+      if (this.__ssrStateAdopted) {
+        return;
+      }
+
+      const input = this.__slottedInput();
+
+      if (!input) {
+        // Leave the flag unset so a later pass can still adopt once children
+        // have been parsed.
+        return;
+      }
+
+      this.__ssrStateAdopted = true;
+
+      // Lion rewrites the label's `for` to `_inputId` on connect; keep it
+      // pointing at the SSR'd input so label clicks keep toggling.
+      if (input.id) {
+        (this as unknown as ChoiceInputInternals)._inputId = input.id;
+      }
+      if (!this.name && input.name) {
+        this.name = input.name;
+      }
+
+      // Read the value from the attribute, not the property: Lion's
+      // constructor chain initializes `value = ''`, which writes into the
+      // slotted input's property before this hook can run — but never
+      // touches the attribute, so the server-rendered value survives there.
+      const value = input.getAttribute('value') ?? input.value;
+
+      if (value) {
+        this.choiceValue = value;
+        input.value = value;
+      }
+      if (input.checked) {
+        this.checked = true;
+      }
+      if (input.disabled) {
+        this.disabled = true;
+      }
+    }
+  }
+
+  return SsrChoiceInput as T;
+};
diff --git a/packages/craftcms-ui/src/styles/form.styles.ts b/packages/craftcms-ui/src/styles/form.styles.ts
index 1808c719561..695c957fab4 100644
--- a/packages/craftcms-ui/src/styles/form.styles.ts
+++ b/packages/craftcms-ui/src/styles/form.styles.ts
@@ -75,6 +75,7 @@ export const inputStyles = css`
     appearance: none;
     padding-inline: var(--c-input-spacing-inline);
     background-color: transparent;
+    width: 100%;
   }
 
   .input-group__container {
diff --git a/packages/craftcms-ui/src/utilities/api/actionClient.ts b/packages/craftcms-ui/src/utilities/api/actionClient.ts
index 6cac50742ce..e63a267c062 100644
--- a/packages/craftcms-ui/src/utilities/api/actionClient.ts
+++ b/packages/craftcms-ui/src/utilities/api/actionClient.ts
@@ -36,7 +36,11 @@ const csrf = new Csrf();
 actionClient.interceptors.request.use(async (config) => {
   // Resolve the base URL lazily so it reflects the runtime CP trigger. Config
   // isn't guaranteed to be initialized when this module is first imported.
-  config.baseURL = getActionUrl();
+  // Use the origin only: the generated action routes already include the CP
+  // trigger + action trigger (e.g. `/admin/actions/fields/render-settings`),
+  // so the base only needs the scheme + host (+ port). `URL.origin` supplies
+  // all three without the `protocol` trailing-colon / port-doubling pitfalls.
+  config.baseURL = new URL(getActionUrl()).origin;
 
   // Set X-Requested-With header
   config.headers.set('X-Requested-With', 'XMLHttpRequest');
diff --git a/packages/craftcms-ui/src/utilities/dom.test.ts b/packages/craftcms-ui/src/utilities/dom.test.ts
index cbe27b467cc..b70755ca9a7 100644
--- a/packages/craftcms-ui/src/utilities/dom.test.ts
+++ b/packages/craftcms-ui/src/utilities/dom.test.ts
@@ -297,6 +297,131 @@ describe('serializeFormInputs', () => {
       'types%5BPlainText%5D%5Bplaceholder%5D=a+b%26c'
     );
   });
+
+  test('serializes custom elements that hold their value on the host', async () => {
+    const {serializeFormInputs} = await freshImport();
+    if (!customElements.get('fake-rich-select')) {
+      customElements.define(
+        'fake-rich-select',
+        class extends HTMLElement {
+          name = 'volume';
+          serializedValue = '11';
+        }
+      );
+    }
+    document.body.innerHTML = `<div id="host"><fake-rich-select></fake-rich-select></div>`;
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe(
+      'volume=11'
+    );
+  });
+
+  test('expands array serializedValues into repeated params', async () => {
+    const {serializeFormInputs} = await freshImport();
+    if (!customElements.get('fake-multi-select')) {
+      customElements.define(
+        'fake-multi-select',
+        class extends HTMLElement {
+          name = 'kinds[]';
+          serializedValue = ['image', 'video'];
+        }
+      );
+    }
+    document.body.innerHTML = `<div id="host"><fake-multi-select></fake-multi-select></div>`;
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe(
+      'kinds%5B%5D=image&kinds%5B%5D=video'
+    );
+  });
+
+  test('applies choice semantics to hosts with a Lion choice modelValue', async () => {
+    const {serializeFormInputs} = await freshImport();
+    if (!customElements.get('fake-choice')) {
+      customElements.define(
+        'fake-choice',
+        class extends HTMLElement {
+          name = '';
+          modelValue = {value: '', checked: false};
+        }
+      );
+    }
+    document.body.innerHTML = `
+      <div id="host">
+        <fake-choice id="on"></fake-choice>
+        <fake-choice id="off"></fake-choice>
+      </div>
+    `;
+    const on = document.getElementById('on') as HTMLElement & {
+      name: string;
+      modelValue: {value: string; checked: boolean};
+    };
+    const off = document.getElementById('off') as typeof on;
+    on.name = 'agree';
+    on.modelValue = {value: '1', checked: true};
+    off.name = 'decline';
+    off.modelValue = {value: '1', checked: false};
+
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe(
+      'agree=1'
+    );
+  });
+
+  test('skips disabled custom elements', async () => {
+    const {serializeFormInputs} = await freshImport();
+    if (!customElements.get('fake-disabled-host')) {
+      customElements.define(
+        'fake-disabled-host',
+        class extends HTMLElement {
+          name = 'muted';
+          disabled = true;
+          serializedValue = 'x';
+        }
+      );
+    }
+    document.body.innerHTML = `<div id="host"><fake-disabled-host></fake-disabled-host></div>`;
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe('');
+  });
+
+  test('does not double-count hosts whose light DOM posts natively', async () => {
+    const {serializeFormInputs} = await freshImport();
+    if (!customElements.get('fake-lion-input')) {
+      customElements.define(
+        'fake-lion-input',
+        class extends HTMLElement {
+          name = 'title';
+          serializedValue = 'from-host';
+        }
+      );
+    }
+    document.body.innerHTML = `
+      <div id="host">
+        <fake-lion-input>
+          <input slot="input" name="title" value="from-input">
+        </fake-lion-input>
+      </div>
+    `;
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe(
+      'title=from-input'
+    );
+  });
+
+  test('captures an SSR-hydrated craft-checkbox exactly once', async () => {
+    const {serializeFormInputs} = await freshImport();
+    await import('../components/checkbox/checkbox.js');
+    document.body.innerHTML = `
+      <div id="host">
+        <craft-checkbox>
+          <input slot="input" type="checkbox" name="allowedKinds[]" value="image" checked>
+        </craft-checkbox>
+      </div>
+    `;
+    const checkbox = document.querySelector<
+      HTMLElement & {updateComplete: Promise<boolean>}
+    >('craft-checkbox')!;
+    await checkbox.updateComplete;
+
+    expect(serializeFormInputs(document.getElementById('host')!)).toBe(
+      'allowedKinds%5B%5D=image'
+    );
+  });
 });
 
 describe('serializeFormInputsAsObject', () => {
diff --git a/packages/craftcms-ui/src/utilities/dom.ts b/packages/craftcms-ui/src/utilities/dom.ts
index cdb4215e9fe..79e871100ab 100644
--- a/packages/craftcms-ui/src/utilities/dom.ts
+++ b/packages/craftcms-ui/src/utilities/dom.ts
@@ -154,11 +154,41 @@ export function isVisible(el: HTMLElement): boolean {
   return el.offsetWidth > 0 || el.offsetHeight > 0;
 }
 
+/**
+ * A custom element that carries form state on the host (e.g. Lion-based
+ * controls like `craft-select-rich` that have no light-DOM posting input).
+ */
+interface FormValueHost extends HTMLElement {
+  name?: unknown;
+  disabled?: unknown;
+  modelValue?: unknown;
+  serializedValue?: unknown;
+  value?: unknown;
+}
+
+/** Lion choice-input model shape (`craft-checkbox`, `craft-option`, …). */
+function isChoiceModelValue(
+  modelValue: unknown
+): modelValue is {value: unknown; checked: boolean} {
+  return (
+    typeof modelValue === 'object' &&
+    modelValue !== null &&
+    'checked' in modelValue &&
+    typeof (modelValue as {checked: unknown}).checked === 'boolean'
+  );
+}
+
 /**
  * Serializes every named form control inside a container into a URL-encoded
  * string, mirroring jQuery's `.serialize()` semantics (unchecked checkboxes
  * and radios, disabled controls, and buttons/files are omitted).
  *
+ * Custom elements that hold their value on the host (a `name` plus a Lion
+ * `modelValue`/`serializedValue`, or a `value` property) are serialized too —
+ * unless their light DOM contains a named native control, in which case that
+ * control is the posting surface and already covered (the SSR pattern used by
+ * `craft-checkbox`, `craft-switch`, etc.).
+ *
  * Unlike `FormData`, this works on any element — not just `<form>` — so it can
  * scope serialization to a fragment of a page-level form, such as a legacy
  * HTML island whose inputs aren't part of an Inertia form's state. Values are
@@ -234,5 +264,45 @@ function collectFormInputs(container: HTMLElement): URLSearchParams {
     params.append(control.name, control.value);
   }
 
+  for (const host of container.querySelectorAll<FormValueHost>('*')) {
+    if (!host.tagName.includes('-')) {
+      continue;
+    }
+
+    const name = host.name;
+
+    if (typeof name !== 'string' || name === '' || host.disabled === true) {
+      continue;
+    }
+
+    // A named native control in the host's light DOM is the posting surface;
+    // it was already serialized above.
+    if (host.querySelector('input[name], select[name], textarea[name]')) {
+      continue;
+    }
+
+    if (isChoiceModelValue(host.modelValue)) {
+      if (host.modelValue.checked) {
+        params.append(name, String(host.modelValue.value ?? ''));
+      }
+
+      continue;
+    }
+
+    const value = host.serializedValue ?? host.value;
+
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        params.append(name, String(item));
+      }
+    } else {
+      params.append(name, String(value));
+    }
+  }
+
   return params;
 }
diff --git a/resources/js/common/components/HtmlFragmentRenderer.vue b/resources/js/common/components/HtmlFragmentRenderer.vue
index bab8570bf99..36bc7358ca2 100644
--- a/resources/js/common/components/HtmlFragmentRenderer.vue
+++ b/resources/js/common/components/HtmlFragmentRenderer.vue
@@ -7,13 +7,22 @@
   } from '@craftcms/ui';
   import {onBeforeUnmount, ref, watch} from 'vue';
 
-  const props = defineProps<{
-    fragment?: CraftCms.Cms.View.HtmlFragment | null;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      fragment?: CraftCms.Cms.View.HtmlFragment | null;
+      /** Tag name for the container element. */
+      as?: string;
+    }>(),
+    {
+      fragment: null,
+      as: 'div',
+    }
+  );
 
   const container = ref<HTMLElement | null>(null);
   const disposers: AppendHtmlDisposer[] = [];
   let lastKey = '';
+  let lastElement: HTMLElement | null = null;
   let runId = 0;
 
   const disposeAll = () => {
@@ -52,18 +61,22 @@
       if (!element || key === '\u0000\u0000') {
         runId++;
         lastKey = '';
+        lastElement = null;
         disposeAll();
 
         return;
       }
 
-      if (key === lastKey) {
+      // Element identity matters too: a runtime `as` change swaps in a fresh
+      // empty container that needs the same fragment re-appended.
+      if (key === lastKey && element === lastElement) {
         return;
       }
 
       runId++;
       const currentRunId = runId;
       lastKey = key;
+      lastElement = element;
       disposeAll();
 
       if (
@@ -103,5 +116,5 @@
 </script>
 
 <template>
-  <div v-if="fragment" ref="container"></div>
+  <component :is="as" v-if="fragment" ref="container" />
 </template>
diff --git a/resources/js/common/layouts/AppLayout.vue b/resources/js/common/layouts/AppLayout.vue
index 055788bab83..14360e6c682 100644
--- a/resources/js/common/layouts/AppLayout.vue
+++ b/resources/js/common/layouts/AppLayout.vue
@@ -251,11 +251,7 @@
           </div>
         </slot>
         <main id="main" tabindex="-1" class="pb-2xl">
-          <component
-            :is="form ? 'form' : 'div'"
-            method="post"
-            @submit.prevent="save()"
-          >
+          <form method="post" @submit.prevent="form && save()">
             <slot name="header">
               <div :class="{container: true, 'container--full': fullWidth}">
                 <div class="index-grid index-grid--header">
@@ -381,7 +377,7 @@
                 </aside>
               </div>
             </div>
-          </component>
+          </form>
         </main>
       </slot>
     </div>
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index ed93ea722bf..60e165a4f87 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -13,6 +13,8 @@ import './modules/auth/elevated-session';
 import './modules/field-layout-designer';
 import './modules/editable-table';
 import './modules/generated-fields';
+import './modules/component-select';
+import './modules/grouped-entry-type-manager';
 import './modules/queue';
 
 window.Cp = Cp as unknown as typeof window.Cp;
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 15e9cd27067..9617fec23cb 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -13,6 +13,7 @@ import './modules/listbox/index';
 import './modules/field-layout-designer/index';
 import './modules/sortable-checkbox-select/index';
 import './modules/editable-table/index';
+import './modules/grouped-entry-type-manager/index';
 import './modules/queue/index';
 
 const {default: Cp} = await import('./bootstrap/cp.js');
diff --git a/resources/js/modules/README.md b/resources/js/modules/README.md
new file mode 100644
index 00000000000..ef94e05b06b
--- /dev/null
+++ b/resources/js/modules/README.md
@@ -0,0 +1,110 @@
+# CP JavaScript modules
+
+Home for Control-Panel behavior ported out of the legacy jQuery bundle
+(`packages/craftcms-legacy/cp/src/js/*.js`) into modern TypeScript. Each module
+is a self-contained folder that follows one shared pattern so the next port
+looks like the last one.
+
+Reference implementations, simplest to richest:
+[`sortable-checkbox-select`](./sortable-checkbox-select/),
+[`listbox`](./listbox/),
+[`grouped-entry-type-manager`](./grouped-entry-type-manager/),
+[`component-select`](./component-select/).
+
+## The port pattern
+
+A ported module is a folder of (usually) five files:
+
+| File | Role |
+| --- | --- |
+| `<name>.ts` | **The logic class.** A plain class extending `@craftcms/garnish` `Base`. This is the port of the legacy `Craft.Thing` — all behavior lives here. Constructed with `(container, settings)`; no custom-element or attribute concerns. |
+| `<name>.ce.ts` | **The custom element.** A thin `ControllerElement` subclass (`resources/js/common/web-components/`) that boots the logic class around the server-rendered markup it wraps, and tears it down on disconnect. `.ce` = "custom element". |
+| `support.ts` | **The instance registry.** A module-scoped `WeakMap<Element, Thing>` replacing the legacy jQuery `$el.data('thing')` back-reference, so other code can find the instance for an element. |
+| `index.ts` | **The shim + barrel.** Registers the element (`defineElement`), assigns the legacy `window.Craft.*` global (or deliberately doesn't — see below), and re-exports the class, element, types, and registry. This is the file `cp.ts` / `legacy.ts` imports. |
+| `README.md` | What legacy file it replaces, what changed, what stayed jQuery, and any deferred work. Mirror the existing ones. |
+
+### The logic class (`<name>.ts`)
+
+- `export class Thing extends Base<ThingSettings>`. Setup lives in an `init()`
+  method invoked from the constructor **only for the leaf class** via a
+  `new.target` guard — the construction contract shared by every port.
+- Provide a `destroy()` that undoes everything `init()` wired (listeners,
+  `DragSort`/observer teardown), then calls the `Base` teardown. `ControllerElement`
+  calls it on disconnect.
+- Register the instance in the `support.ts` WeakMap keyed by its container.
+- **Events:** use garnish pub/sub — `this.trigger('change')`. `ControllerElement`
+  re-emits every triggered event as a **bubbling DOM `CustomEvent`** on the
+  element (name preserved, garnish payload on `detail`), so consumers listen with
+  plain `addEventListener` and never import the class. Reserve a native
+  `dispatchEvent` only for events whose `detail` an ancestor mutates
+  synchronously (garnish's async-ish delivery won't do).
+- **What stays jQuery:** these classes are mostly orchestrators of still-jQuery
+  Craft/Garnish widgets, so the `Craft` / `$` / `Garnish` page globals survive at
+  those seams (`declare const Craft: any`). Port the class, not the whole
+  dependency tree — document the remaining seams in the README.
+
+### The custom element (`<name>.ce.ts`)
+
+`export default class CraftThing extends ControllerElement<Thing>`. Provide:
+
+- `rootSelector` — a CSS selector for the server-rendered child that signals the
+  markup is parsed (boot retries on `requestAnimationFrame` until it resolves, so
+  it survives both initial HTML parse and AJAX/Inertia-injected fragments).
+- `create(root)` — parse the element's attributes into the settings object and
+  return `new Thing(this, settings)`. Attribute parsing replaces the legacy
+  `{% js %}` settings blob.
+
+Most ports keep the element a **dumb boot/teardown wrapper** and expose the
+instance's API through the `support.ts` WeakMap (consumers do
+`closestRegistered(el, thingData)` from `@craftcms/garnish`). Use a **forwarding
+facade** — the element re-exposing the instance's methods — only when the
+element itself is the documented public API and consumers set boot-independent
+state on it (e.g. `component-select`, whose `getInputValue` hook may be assigned
+before the instance has booted; there the element owns the hook and the class
+reads it back through a settings callback).
+
+### The shim (`index.ts`)
+
+- `defineElement('craft-thing', CraftThing)` registers the element (guarded, so
+  double-import is safe).
+- Assign the legacy global so any remaining `new Craft.Thing(...)` boots keep
+  working: `window.Craft.Thing = Thing`. Assign the **plain modern ES class** —
+  **no `compatify`** — unless something still subclasses it via the legacy
+  `Garnish.Base.extend()` (nothing in core does). Re-attach static members the
+  legacy bundle exposed (`Thing.Item`, `Thing.Group`).
+- **Sometimes there is deliberately no global**, when the legacy class must
+  co-exist: `component-select` assigns nothing, because the legacy
+  `Craft.ComponentSelectInput` still ships for not-yet-migrated Twig surfaces and
+  overwriting it would break them. Say so in a comment and the README — the
+  "shim" is then the intentional absence of one.
+
+## Wiring it up
+
+1. Import the module for its side effects from the right entry point —
+   `resources/js/cp.ts` (Inertia/modern surfaces) and/or `resources/js/legacy.ts`
+   (legacy Twig surfaces). Importing `index.ts` is what registers the element and
+   assigns the global.
+2. Update the Twig/PHP that rendered the legacy markup to emit `<craft-thing>`
+   (with settings as attributes) instead of a manual `new Craft.Thing(...)`
+   `{% js %}` boot.
+3. Delete the legacy `cp/src/js/Thing.js`, remove its `import` from
+   `packages/craftcms-legacy/cp/src/Craft.js`, and **rebuild the legacy bundle**
+   (`cd packages/craftcms-legacy && npm run build`) — confirm the built
+   `cms-assets/resources/legacy/cp/dist/cp.js` no longer references it.
+
+## Verification
+
+- `npm run typecheck` (root) and `npx eslint` on the touched files; prettier.
+- Behavior is verified live against the dev install (the CP), since these manage
+  real server-rendered markup — typecheck/lint alone can't catch a broken boot.
+
+## Gotcha: `@craftcms/garnish` / `@craftcms/cp` are consumed two ways
+
+Both packages ship a `"development"` export condition pointing at their `src/`.
+The **Vite dev server** activates it, so the running app reads their **source** —
+edits under `packages/craftcms-garnish/src` are live with no rebuild. But
+**`vue-tsc` typecheck** resolves via the `types` condition to the built
+`dist/*.d.ts` (the app tsconfig has no `customConditions`, and adding one drags
+in `@craftcms/cp` source, which relies on that package's own path aliases). So
+after editing a package's `src`, **rebuild that package's `dist`**
+(`npm run build` in the package) or `npm run typecheck` won't see the change.
diff --git a/resources/js/modules/component-select/README.md b/resources/js/modules/component-select/README.md
new file mode 100644
index 00000000000..0aba2dfd503
--- /dev/null
+++ b/resources/js/modules/component-select/README.md
@@ -0,0 +1,172 @@
+# Component Select
+
+A TypeScript port of the legacy jQuery `Craft.ComponentSelectInput`
+(`packages/craftcms-legacy/cp/src/js/ComponentSelectInput.js`) onto the modern
+**`@craftcms/garnish`** `Base`, exposed as the self-booting
+`<craft-component-select>` custom element. It powers
+`_includes/forms/componentSelect.twig` and is orchestrated by
+[`<craft-entry-type-manager>`](../grouped-entry-type-manager/grouped-entry-type-manager.ts)
+for the Matrix field settings' grouped entry type UI.
+
+## The element-as-API-facade split
+
+Unlike a plain garnish port, this module splits into two files the way
+`grouped-entry-type-manager` and `sortable-checkbox-select` do:
+
+- **`component-select.ts`** — `ComponentSelect`, the `Base` subclass that owns
+  all the behavior: chip wiring, drag-sort, the Choose menu, the Create-button
+  slideout, and the `change` event.
+- **`component-select.ce.ts`** — `CraftComponentSelect`, the
+  `<craft-component-select>` custom element (a `ControllerElement`). It parses
+  attributes into `ComponentSelectSettings` and boots a `ComponentSelect`
+  around the element's light-DOM children.
+
+The twist here, relative to the other two ports: **the element stays the
+public API**, not the controller. `<craft-entry-type-manager>`'s `Group` class
+(and any other consumer) calls `.chips`, `.selectedIds`, `.addComponent()`,
+`.adoptChip()`, `.releaseSort()`, `.showOption()`/`.hideOption()`,
+`.openChooseMenu()`, and sets
+`.getInputValue` directly on the `<craft-component-select>` DOM element — the
+same surface the pre-split single-file version exposed. `component-select.ce.ts`
+re-exposes each of those as a forwarding member: the getters
+(`initialized`/`selectedIds`/`chips`) fall back to `false`/`[]` before boot,
+and the action methods (`addComponent`, `removeComponent`, `showOption`,
+`hideOption`, `openChooseMenu`, `adoptChip`, `releaseSort`, `moveComponent`)
+no-op via `this.instance?.method(...)` until `ControllerElement`'s retrying
+boot resolves the controller.
+
+`releaseSort()` is the seam the grouped entry type manager uses for cross-group
+chip drag: it destroys this select's own chip `DragSort` (and blocks its
+recreation) so one manager-level sorter can span every group's list — a
+per-select sorter can't drop into a sibling's list. The chips'
+`<craft-reorder-button>`s stay (they're the outer sorter's handles and still
+drive the touch move menu); the manager owns registering the chip `li`s with
+its sorter. Legacy `GroupedEntryTypeSelectInput.initComponentSort` no-op'd for
+the same reason.
+
+Why keep the element as the facade instead of exporting the controller as the
+API and having consumers reach through it? Two of the seams are
+boot-order–sensitive in ways a controller reference can't paper over:
+
+- **`getInputValue`.** `Group.init()` (in `grouped-entry-type-manager.ts`)
+  assigns `select.getInputValue = (id) => ...` immediately after querying
+  `container.querySelector('craft-component-select')` — which can run before
+  the select's own `ControllerElement` boot (a `requestAnimationFrame` retry)
+  has resolved `:scope > ul` and constructed the controller. If the hook lived
+  on the controller, that assignment would either throw (no instance yet) or
+  silently target an instance that gets replaced. Instead the element owns a
+  private `#getInputValue` field with a public accessor pair — boot-independent,
+  settable at any time — and `create()` passes the controller a **settings
+  callback**, `getInputValue: () => this.#getInputValue`, instead of a
+  snapshotted value. Every read inside `ComponentSelect` goes through
+  `this.settings.getInputValue?.()?.(id)`, so it always sees whatever the
+  element's field currently holds, including a value set after boot.
+- **`define-chip-actions`.** This event's `detail.actions` array is
+  synchronously mutated by ancestor listeners (`<craft-entry-type-manager>`
+  pushes its "Move to previous/next group" items into it) — a garnish
+  `trigger()` round-trip through the pub/sub emitter wouldn't preserve that
+  synchronous, single-array mutation contract the way a native
+  `dispatchEvent` does. So it stays a native, bubbling `CustomEvent` dispatched
+  directly on `container` (the element) from `ComponentSelect`, not routed
+  through `Base.trigger`.
+
+## Events
+
+- **`change`** — `ComponentSelect` emits it via garnish `this.trigger('change')`
+  whenever membership or order changes (add, remove, drag-sort, or a
+  reorder-menu move), suppressed until boot completes. `ControllerElement`'s
+  event bridge (`#bridgeEvents`, listening on the controller's `'*'`) re-emits
+  every garnish `trigger()` as a bubbling DOM `CustomEvent` of the same name on
+  `<craft-component-select>` — that's what `<craft-entry-type-manager>` listens
+  for (`container.addEventListener('change', ...)`) to resync cross-group
+  state.
+- **`define-chip-actions`** — dispatched natively (not via the bridge) on
+  `container` while a chip gets its one-time wiring; see above for why.
+
+## No legacy-global shim
+
+The other ported modules (`GroupedEntryTypeManager`, `SortableCheckboxSelect`)
+assign their class onto `window.Craft.*` so old `new Craft.Whatever(...)`
+call sites keep working. This module doesn't, on purpose: the legacy
+`Craft.ComponentSelectInput` (and its `Craft.EntryTypeSelectInput` subclass)
+still ship in the legacy bundle for Twig surfaces that haven't been migrated to
+`<craft-component-select>` yet, so there's nothing to alias — providing
+`window.Craft.ComponentSelect` would just be a second, incompatible
+implementation sitting next to the one legacy code actually calls. Migrated
+surfaces render the element instead of calling `new Craft.ComponentSelectInput(...)`,
+and the element (not this module's `ComponentSelect` controller) is the API
+they're written against. The module's "shim," such as it is, is that
+deliberate absence.
+
+## What deliberately stays jQuery / legacy seams
+
+`Craft.t`, `Craft.ui.icon`, `Craft.addActionsToChip` (with its jQuery
+`disclosureMenu()` fallback for old/plugin-rendered chip markup),
+`Craft.sendActionRequest`, `Craft.appendHeadHtml`/`appendBodyHtml`,
+`Craft.initUiElements`, `Craft.CpScreenSlideout`, and `Craft.hasMousePointerEvents`
+— accessed via the page globals (`declare const Craft/$`). The chip
+dblclick/taphold-to-edit shortcut and the create-button `activate` binding
+stay jQuery event wiring (`$(chip).on(...)`, `$createBtn.on('activate', ...)`).
+
+## Files
+
+- `component-select.ts` — the `ComponentSelect` `Base` subclass (all behavior),
+  plus the exported `ComponentSelectSettings` and `DefineChipActionsEventDetail`
+  interfaces and the module-scoped `wiredChips` WeakSet.
+- `component-select.ce.ts` — `<craft-component-select>`, the self-booting
+  custom element (a `ControllerElement`) and the public API facade; owns
+  attribute parsing (`#parseSettings`/`#boolAttr`) and the `getInputValue`
+  backing field.
+- `support.ts` — the `componentSelectData` WeakMap (container → controller),
+  used for owner-resolution lookups (`closestRegistered`) from chip action
+  handlers and the reorder button.
+- `index.ts` — registers `<craft-component-select>` and re-exports the element,
+  the controller, the settings/event types, and `componentSelectData`.
+  Imported (for its side effect) from `resources/js/cp.ts`.
+
+## Chip selection (`selectable`)
+
+Restored on top of the modern **`@craftcms/garnish` `Select`** (the jQuery-free
+port of `Garnish.Select`), mirroring how `DragSort` is used. When `selectable`
+is on, `ComponentSelect` builds a `Select` over the chips (`component-select.ts`,
+`#initSelect`) so a chip can be **clicked / shift-clicked / ⌘-clicked** to build
+a selection (`multi` follows `sortable`, legacy `multi: this.settings.sortable`),
+and:
+
+- **Backspace/Delete** on a selected chip removes the whole selection
+  (`#initChipRemovalShortcut` → `#removeSelected`), matching the legacy
+  `addComponents` keydown handler.
+- **Dragging a chip that's part of the selection** drags the whole group — the
+  `DragSort` `filter` (`#draggeeFilter`) returns every selected chip's `li` when
+  the grabbed chip is selected, else just the grabbed `li` (legacy
+  `initComponentSort`'s filter).
+- A window `mousedown` outside the container clears the selection (legacy
+  deselect-on-outside-click); `Select`'s own container-click also deselects.
+
+Selection membership is (re-)added in `init` + the list observer (and removed on
+chip removal / observer-remove), the same lifecycle as `DragSort` membership, so
+it survives a disconnect/reconnect and chip adoption across selects.
+
+### Default: on, but no checkbox
+
+The `selectable` attribute defaults to **`true`**, matching the legacy
+`Craft.ComponentSelectInput` default (`selectable: true`) — the task's "keep
+behavior identical to legacy defaults." Legacy achieved this via a *split* the
+template preserves: the JS class defaulted `selectable: true` (selection always
+on) while the Twig rendered chips with **no** checkbox affordance by default
+(`checkbox: selectable ?? false`, with the Twig `selectable` var undefined). The
+template reproduces both from the one caller-facing `selectable` var by reading
+it with two different fallbacks — `selectable ?? true` for the element's
+`selectable` attribute, `selectable ?? false` for the chip `checkbox` — so an
+explicit value drives both, while absence gives selection-on + checkbox-off.
+Pass `selectable: false` to the Twig (or `selectable="false"` on the element) to
+turn selection off; pass `selectable: true` to also render chip checkboxes.
+
+The legacy `addItemsToActionMenus` setting stays folded into always-on.
+
+## Deferred
+
+- Behavioral/browser verification (add/remove/reorder chips, chip selection +
+  Backspace/Delete + multi-drag, the Choose menu, the Create-button slideout,
+  limit handling, and the `<craft-entry-type-manager>` integration) is left to
+  manual testing.
diff --git a/resources/js/modules/component-select/component-select.ce.ts b/resources/js/modules/component-select/component-select.ce.ts
new file mode 100644
index 00000000000..06370177847
--- /dev/null
+++ b/resources/js/modules/component-select/component-select.ce.ts
@@ -0,0 +1,181 @@
+import type {ReorderDirection} from '@craftcms/ui';
+import {ControllerElement} from '@/common/web-components';
+import {
+  ComponentSelect,
+  type ComponentSelectSettings,
+} from './component-select';
+
+/**
+ * `<craft-component-select>` — a light-DOM progressive-enhancement port of the
+ * legacy `Craft.ComponentSelectInput` (jQuery/Garnish). It wraps the
+ * server-rendered markup from `_includes/forms/componentSelect.twig` and boots
+ * a {@link ComponentSelect} controller around it (see that file for the
+ * behavior). This element is a `ControllerElement` facade: it owns attribute
+ * parsing and is the public API surface consumers use — `selectedIds`,
+ * `addComponent`, `removeComponent`, plus the seams
+ * `<craft-entry-type-manager>` drives (`showOption`/`hideOption`, `adoptChip`,
+ * `moveComponent`, `openChooseMenu`, the `getInputValue` hook, and the
+ * `define-chip-actions` event) — there is no jQuery `.data('componentSelect')`
+ * back-reference like the legacy class kept.
+ *
+ * Every forwarding member below guards for the pre-boot window (the
+ * `ControllerElement` base retries on `requestAnimationFrame` until
+ * {@link rootSelector} resolves): getters fall back to `false`/`[]`, and the
+ * action methods no-op until `this.instance` exists. `getInputValue` is the
+ * one exception — it's stored on the element itself (not the controller), so
+ * it survives being set before boot completes; see its accessor below.
+ */
+export default class CraftComponentSelect extends ControllerElement<ComponentSelect> {
+  protected readonly rootSelector = ':scope > ul';
+
+  /**
+   * Backing field for the {@link getInputValue} hook. Owned by the element —
+   * not the controller — so a consumer that sets it before boot (or across a
+   * disconnect/reconnect) never loses it. The controller reads the current
+   * value lazily via `settings.getInputValue`, a closure passed in
+   * {@link create} that always dereferences this field.
+   */
+  #getInputValue: ((id: string | number) => string | null) | null = null;
+
+  /**
+   * Optional per-instance hook: the hidden-input value a newly-rendered chip
+   * should carry (legacy `renderSettings().inputValue`). Set by wrapping
+   * elements that need structured values — `<craft-entry-type-manager>` uses
+   * it to render `{id, group}` JSON. When absent (or it returns `null`), the
+   * server renders its default input for the chip.
+   */
+  get getInputValue(): ((id: string | number) => string | null) | null {
+    return this.#getInputValue;
+  }
+
+  set getInputValue(value: ((id: string | number) => string | null) | null) {
+    this.#getInputValue = value;
+  }
+
+  // `root` (the `:scope > ul`) is unused here — the controller re-resolves it
+  // off `this` (the container) since it needs to re-query on every boot, and
+  // there's no benefit to threading the already-resolved node through.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected create(root: HTMLElement): ComponentSelect {
+    return new ComponentSelect(this, {
+      ...this.#parseSettings(),
+      getInputValue: () => this.#getInputValue,
+    });
+  }
+
+  // --- Public API -------------------------------------------------------------
+
+  /** Whether boot has completed (markup resolved and behavior wired). */
+  get initialized(): boolean {
+    return this.instance?.initialized ?? false;
+  }
+
+  /** The ids of the currently selected components, in DOM order. */
+  get selectedIds(): Array<string | number> {
+    return this.instance?.selectedIds ?? [];
+  }
+
+  /** The selected component chips, in DOM order. */
+  get chips(): HTMLElement[] {
+    return this.instance?.chips ?? [];
+  }
+
+  /** Show/hide the Choose-menu option for a component id. No-op before boot. */
+  showOption(id: string | number): void {
+    this.instance?.showOption(id);
+  }
+
+  hideOption(id: string | number): void {
+    this.instance?.hideOption(id);
+  }
+
+  /** Open the Choose menu. No-op before boot. */
+  openChooseMenu(): void {
+    this.instance?.openChooseMenu();
+  }
+
+  /** Adopt a chip `li` rendered by another `craft-component-select`. No-op before boot. */
+  adoptChip(li: HTMLElement): void {
+    this.instance?.adoptChip(li);
+  }
+
+  /** Hand chip drag-sorting to an outer coordinator. No-op before boot. */
+  releaseSort(): void {
+    this.instance?.releaseSort();
+  }
+
+  /** Render + append a chip for the given component. Resolves immediately, before boot. */
+  async addComponent(
+    type: string,
+    id: string | number,
+    addToMenu = false
+  ): Promise<void> {
+    await this.instance?.addComponent(type, id, addToMenu);
+  }
+
+  /** Remove a chip. No-op before boot. */
+  removeComponent(el: HTMLElement, animate = true): void {
+    this.instance?.removeComponent(el, animate);
+  }
+
+  /** Move a chip's `li` one slot toward the start or end. No-op before boot. */
+  moveComponent(li: HTMLElement, direction: ReorderDirection): void {
+    this.instance?.moveComponent(li, direction);
+  }
+
+  // --- Attribute parsing --------------------------------------------------------
+
+  /**
+   * Boolean attribute with a legacy default: absent → the default; present with
+   * `"false"`/`"0"` → false (so default-true settings like `sortable` can be
+   * switched off); any other presence → true.
+   */
+  #boolAttr(name: string, fallback: boolean): boolean {
+    const value = this.getAttribute(name);
+    if (value === null) {
+      return fallback;
+    }
+    return value !== 'false' && value !== '0';
+  }
+
+  /**
+   * Attribute-driven configuration, replacing the legacy `{% js %}` settings
+   * boot. `getInputValue` is intentionally left unset here — {@link create}
+   * fills it with a closure over {@link #getInputValue} (optional properties
+   * don't need to be present; `Omit<ComponentSelectSettings, 'getInputValue'>`
+   * would collapse to an index-signature type here, since
+   * `ComponentSelectSettings` extends `GarnishBaseSettings`, so the full type
+   * is used instead).
+   */
+  #parseSettings(): ComponentSelectSettings {
+    const limitAttr = this.getAttribute('limit');
+    const limit =
+      limitAttr !== null && limitAttr !== '' ? Number(limitAttr) || null : null;
+
+    const settings: ComponentSelectSettings = {
+      name: this.getAttribute('name'),
+      limit,
+      sortable: this.#boolAttr('sortable', true),
+      selectable: this.#boolAttr('selectable', true),
+      showHandles: this.#boolAttr('show-handles', false),
+      showDescription: this.#boolAttr('show-description', false),
+      showActionMenus: this.#boolAttr('show-action-menus', true),
+      hyperlinks: this.#boolAttr('hyperlinks', false),
+      createAction: this.getAttribute('create-action'),
+      disabled: this.#boolAttr('disabled', false),
+    };
+
+    // No reason to be sortable when only one selection is allowed (legacy parity).
+    if (settings.limit === 1) {
+      settings.sortable = false;
+    }
+
+    return settings;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-component-select': CraftComponentSelect;
+  }
+}
diff --git a/resources/js/modules/component-select/component-select.ts b/resources/js/modules/component-select/component-select.ts
new file mode 100644
index 00000000000..f0b177d806a
--- /dev/null
+++ b/resources/js/modules/component-select/component-select.ts
@@ -0,0 +1,1155 @@
+import {
+  Base,
+  DragSort,
+  Select,
+  Y_AXIS,
+  closestRegistered,
+  prefersReducedMotion,
+  type GarnishBaseSettings,
+} from '@craftcms/garnish';
+import type {CraftActionMenu, ReorderDirection} from '@craftcms/ui';
+import {componentSelectData} from './support';
+
+// `Craft` and `$` (jQuery) remain page globals. The Choose menu and the
+// *chip* action menus are both modern, self-booting `craft-action-menu`s
+// now, but the controller still pairs `@craftcms/garnish` `DragSort` with
+// still-jQuery Craft seams — `Craft.addActionsToChip` (which also carries a
+// jQuery `disclosureMenu()` fallback for old/plugin-rendered chip markup)
+// and `Craft.sendActionRequest` — so jQuery survives there.
+declare const Craft: any;
+declare const $: any;
+
+/** Removal fade duration, ms (legacy `Craft.ComponentSelectInput.REMOVE_FX_DURATION`). */
+const REMOVE_FX_DURATION = 200;
+
+/**
+ * Chips that already have their one-time wiring (hidden option, reorder
+ * button, action-menu items). Keyed on the chip element itself, so it survives
+ * moves within a list and a disconnect/reconnect of the select (the wiring
+ * lives on the chip's DOM and stays valid). Module-scoped — not per-instance —
+ * so a chip `li` adopted by a *different* select (see
+ * {@link ComponentSelect.adoptChip}) keeps its wiring instead of being wired
+ * twice; the chip's actions resolve their owning select at event time.
+ */
+const wiredChips = new WeakSet<HTMLElement>();
+
+/**
+ * Detail for the bubbling `define-chip-actions` `CustomEvent` dispatched while
+ * a chip gets its one-time wiring. Listeners — `<craft-entry-type-manager>`
+ * adds its "Move to previous/next group" items this way — may push
+ * `Craft.addActionsToChip` action descriptors into `actions`; contributed
+ * actions land before the built-in Replace/Remove items.
+ */
+export interface DefineChipActionsEventDetail {
+  /** The chip being wired. */
+  chip: HTMLElement;
+  /** `Craft.addActionsToChip` action descriptors to add to the chip's menu. */
+  actions: any[];
+}
+
+/**
+ * Attribute-driven configuration, replacing the legacy `{% js %}` settings boot.
+ * Defaults match `Craft.ComponentSelectInput.defaults`, except
+ * `addItemsToActionMenus` (folded into always-on for now). Fully resolved
+ * (attributes + defaults) by `<craft-component-select>` before the controller
+ * is constructed — see `component-select.ce.ts`'s `#parseSettings`.
+ */
+export interface ComponentSelectSettings extends GarnishBaseSettings {
+  /** Base input name used when rendering newly-added chips' hidden inputs. */
+  name: string | null;
+  /** Max number of selected components; `null` → unlimited. */
+  limit: number | null;
+  /** Whether the chips can be reordered. Forced off when `limit` is 1. */
+  sortable: boolean;
+  /**
+   * Whether chips can be selected (click / shift-click / ⌘-click), which enables
+   * Backspace/Delete removal of the selection and dragging a multi-selection as
+   * a group. Matches the legacy `Craft.ComponentSelectInput` default of `true`;
+   * multi-selection itself follows {@link sortable} (legacy `multi: sortable`).
+   */
+  selectable: boolean;
+  /** Whether newly-rendered chips should show component handles. */
+  showHandles: boolean;
+  /** Whether newly-rendered chips should show component descriptions. */
+  showDescription: boolean;
+  /** Whether newly-rendered chips should include an action menu. */
+  showActionMenus: boolean;
+  /** Whether chip labels should hyperlink to the component's edit page. */
+  hyperlinks: boolean;
+  /** CP screen action for the Create button's slideout, if there is one. */
+  createAction: string | null;
+  /** Whether the select is read-only (no behavior is wired at all). */
+  disabled: boolean;
+  /**
+   * Lazy accessor for the per-instance {@link ComponentSelectSettings} input
+   * hook: the ELEMENT owns the mutable `getInputValue` property (consumers —
+   * `<craft-entry-type-manager>`'s `Group` — set it directly on
+   * `<craft-component-select>`, possibly before this controller has booted),
+   * so the controller can't just close over a snapshot. `component-select.ce.ts`
+   * passes `() => this.#getInputValue`, and every read below goes through
+   * `this.settings.getInputValue?.()?.(id)` to always see the current value.
+   */
+  getInputValue?: () => ((id: string | number) => string | null) | null;
+}
+
+/**
+ * Component select controller — a `@craftcms/garnish` `Base` port of the
+ * legacy jQuery `Craft.ComponentSelectInput`, orchestrating the server-rendered
+ * markup from `_includes/forms/componentSelect.twig` — a `ul.components` of
+ * `li > craft-chip` (each chip carries `data-type`/`data-id` and a hidden
+ * input with its value), a Choose `craft-action-menu` (its `[command="--choose-item"]` invoker
+ * + `craft-action-item[data-id]` options), and an optional Create button
+ * (`[command="--create-item"]`). Setup lives in {@link init}, invoked from the constructor
+ * only for the leaf class (`new.target` guard), the same construction
+ * contract as the other garnish ports.
+ *
+ * This is one half of `<craft-component-select>`'s split: the element
+ * (`component-select.ce.ts`) is a `ControllerElement` facade — the public API
+ * consumers see (`selectedIds`, {@link addComponent}, {@link removeComponent},
+ * the seams `<craft-entry-type-manager>` drives: {@link showOption} /
+ * {@link hideOption}, {@link adoptChip}, {@link moveComponent},
+ * {@link openChooseMenu}, the `getInputValue` hook) — while this class does
+ * the work. Nothing renders into a shadow root, so the server markup stays
+ * the source of truth and works without JS.
+ *
+ * @fires change - Garnish `trigger('change')` whenever membership or order
+ *   changes (add, remove, drag-sort, or a reorder-menu move); the
+ *   `ControllerElement` bridge re-emits it as a bubbling DOM `CustomEvent` on
+ *   `<craft-component-select>`. Suppressed during boot.
+ */
+export class ComponentSelect extends Base<ComponentSelectSettings> {
+  container: HTMLElement;
+  override settings: ComponentSelectSettings;
+
+  #list: HTMLUListElement | null = null;
+  #addBtn: HTMLElement | null = null;
+  #createBtn: HTMLElement | null = null;
+
+  /** The Choose `craft-action-menu` (the `--add-item` is its slotted invoker). */
+  #menu: CraftActionMenu | null = null;
+
+  #dragSort: any = null;
+  #select: Select | null = null;
+  #listObserver: MutationObserver | null = null;
+
+  /**
+   * When set, an outer coordinator owns chip drag-sorting (the grouped entry
+   * type manager runs one `DragSort` across every group), so this select never
+   * builds its own — see {@link releaseSort}.
+   */
+  #sortManagedExternally = false;
+
+  /** jQuery-wrapped Create button the activate handler is bound to. */
+  #$createBtn: any = null;
+
+  #initialized = false;
+
+  constructor(container: HTMLElement, settings: ComponentSelectSettings) {
+    super();
+    this.container = container;
+    this.settings = settings;
+    if (new.target === ComponentSelect) {
+      this.init(container, settings);
+    }
+  }
+
+  /**
+   * Resolve the server-rendered children and wire behavior. The
+   * `ControllerElement` base already retried until `:scope > ul` resolved
+   * before constructing this controller, so — unlike the pre-split element —
+   * there's no boot retry loop here.
+   */
+  init(container: HTMLElement, settings: ComponentSelectSettings): void {
+    this.container = container;
+    this.settings = settings;
+
+    const list = this.container.querySelector<HTMLUListElement>(':scope > ul');
+    if (!list) {
+      return;
+    }
+
+    this.#list = list;
+    this.#addBtn = this.container.querySelector<HTMLElement>(
+      '[command="--choose-item"]'
+    );
+    this.#createBtn = this.container.querySelector<HTMLElement>(
+      '[command="--create-item"]'
+    );
+    // The Choose menu hosts the add button as its slotted invoker. (Chips
+    // never contain a light-DOM craft-action-menu, so resolving through the
+    // invoker just guards against future markup around it.)
+    this.#menu = this.#addBtn?.closest('craft-action-menu') ?? null;
+
+    // Object back-reference for event-time resolution (the chip actions'
+    // `owner()` lookups) and external consumers.
+    componentSelectData.set(this.container, this);
+
+    // Disabled selects render static markup; the legacy Twig never booted JS
+    // for them either.
+    if (this.settings.disabled) {
+      this.#initialized = true;
+      return;
+    }
+
+    this.#initSelect();
+    this.#initDragSort();
+
+    for (const chip of this.#chips()) {
+      this.#initChip(chip);
+      // Sorter/selection membership is (re-)added here rather than in #initChip
+      // so a disconnect/reconnect — which builds a fresh DragSort + Select but
+      // keeps the chips' one-time wiring — still repopulates both.
+      const li = chip.closest('li');
+      if (li && this.settings.sortable) {
+        this.#dragSort?.addItems(li);
+      }
+      if (this.settings.selectable) {
+        this.#select?.addItems(chip);
+      }
+    }
+
+    this.#observeList();
+    this.#updateButtons();
+    this.#updateReorderPositions();
+
+    // One delegated listener covers current options and any added later by the
+    // create flow. Shadow retargeting makes `ev.target` the option host, and
+    // the item's native <button> fires click on Enter/Space, so this is the
+    // whole activation story.
+    this.#menu?.addEventListener('click', this.#handleMenuClick);
+
+    if (this.#createBtn && this.settings.createAction) {
+      this.#$createBtn = $(this.#createBtn);
+      this.#$createBtn.on('activate', this.#handleCreateActivate);
+    }
+
+    this.#initialized = true;
+  }
+
+  /**
+   * Detach listeners, dispose the sorter/observer, and release the back-
+   * reference so the controller can be re-booted (mirrors the pre-split
+   * element's `disconnectedCallback`).
+   */
+  override destroy(): void {
+    this.#listObserver?.disconnect();
+    this.#listObserver = null;
+
+    this.#dragSort?.destroy?.();
+    this.#dragSort = null;
+
+    this.#select?.destroy();
+    this.#select = null;
+
+    this.#menu?.removeEventListener('click', this.#handleMenuClick);
+    this.#menu = null;
+
+    this.#$createBtn?.off('activate', this.#handleCreateActivate);
+    this.#$createBtn = null;
+
+    this.#initialized = false;
+    componentSelectData.delete(this.container);
+
+    super.destroy();
+  }
+
+  // --- Public API -------------------------------------------------------------
+
+  /** Whether boot has completed (markup resolved and behavior wired). */
+  get initialized(): boolean {
+    return this.#initialized;
+  }
+
+  /**
+   * The ids of the currently selected components, in DOM order (legacy
+   * `getSelectedComponentIds`). Numeric ids come back as numbers, matching the
+   * legacy jQuery `.data('id')` coercion.
+   */
+  get selectedIds(): Array<string | number> {
+    return this.chips.map((chip) => {
+      const id = chip.dataset.id ?? '';
+      const numeric = Number(id);
+      return id !== '' && !Number.isNaN(numeric) ? numeric : id;
+    });
+  }
+
+  /**
+   * The selected component chips, in DOM order (legacy `getComponents`). Chips
+   * mid removal-fade (`li[data-removing]`) are excluded. Public so wrapping
+   * elements — `<craft-entry-type-manager>` — can enumerate chips without
+   * re-querying the select's internal DOM structure.
+   */
+  get chips(): HTMLElement[] {
+    return this.#chips();
+  }
+
+  /**
+   * Show/hide the Choose-menu option for a component id (legacy
+   * `showOption`/`hideOption`, minus the cross-select propagation — that is
+   * `<craft-entry-type-manager>`'s job now). Refreshes the add/create button
+   * visibility, which depends on the remaining visible options.
+   */
+  showOption(id: string | number): void {
+    this.#showOption(id);
+    this.#updateButtons();
+  }
+
+  hideOption(id: string | number): void {
+    this.#hideOption(id);
+    this.#updateButtons();
+  }
+
+  /** Open the Choose menu (the chip Replace action's path). */
+  openChooseMenu(): void {
+    if (this.#menu) {
+      this.#menu.opened = true;
+    }
+  }
+
+  /**
+   * Adopt a chip `li` that was rendered — and wired — by ANOTHER
+   * `craft-component-select` (the `<craft-entry-type-manager>` "Move to
+   * previous/next group" path), appending it to this select's list. Both
+   * selects' list observers transfer sorter membership; the chip's one-time
+   * wiring travels with it (see the module-scoped `wiredChips`), and its
+   * actions resolve their owning select at event time, so nothing is re-wired.
+   * The caller owns updating the chip's hidden-input value and any
+   * cross-select option visibility.
+   */
+  adoptChip(li: HTMLElement): void {
+    this.#list?.append(li);
+  }
+
+  /**
+   * Hand chip drag-sorting to an outer coordinator (the
+   * `<craft-entry-type-manager>` runs one `DragSort` across all groups so a
+   * chip can be dragged *between* them — one sorter can't drop into a sibling
+   * select's list). Destroys this select's own `DragSort` and stops it from
+   * being recreated; the legacy `GroupedEntryTypeSelectInput.initComponentSort`
+   * no-op'd for the same reason. The chips' `<craft-reorder-button>`s stay —
+   * they are the outer sorter's drag handles and still drive the touch move
+   * menu — and the caller owns registering the chip `li`s with its sorter.
+   * Idempotent, so the manager can call it again after any re-boot.
+   */
+  releaseSort(): void {
+    this.#sortManagedExternally = true;
+    this.#dragSort?.destroy?.();
+    this.#dragSort = null;
+  }
+
+  /**
+   * Render + append a chip for the given component via the
+   * `app/render-components` action (legacy `addComponent`). When the select is
+   * at its `limit`, the last chip is replaced. The response's head/body HTML is
+   * appended so any chip-level JS boots. Pass `addToMenu: true` (the create
+   * flow) to also add a — hidden — Choose-menu option for the component; see
+   * {@link #addMenuOption}.
+   */
+  async addComponent(
+    type: string,
+    id: string | number,
+    addToMenu = false
+  ): Promise<void> {
+    const {data} = await Craft.sendActionRequest(
+      'POST',
+      'app/render-components',
+      {
+        data: {
+          components: [
+            {
+              type,
+              id,
+              instances: [this.#renderSettings(id)],
+            },
+          ],
+        },
+      }
+    );
+
+    // At the limit, adding replaces the last chip (legacy behavior, sans fade).
+    if (!this.#canAddMore()) {
+      const chips = this.#chips();
+      const last = chips[chips.length - 1];
+      if (last) {
+        this.removeComponent(last, false);
+      }
+    }
+
+    const li = document.createElement('li');
+    li.innerHTML = data.components[type][id][0];
+    this.#list?.append(li); // the list observer wires the chip + sorter
+
+    if (addToMenu) {
+      this.#addMenuOption(type, id, li.querySelector('craft-chip'));
+    }
+
+    await Craft.appendHeadHtml(data.headHtml);
+    await Craft.appendBodyHtml(data.bodyHtml);
+
+    if (this.settings.showDescription) {
+      // Descriptions render an info icon that needs a UI-elements boot.
+      Craft.initUiElements($(li));
+    }
+
+    this.#onChange();
+  }
+
+  /**
+   * Remove a chip — `el` may be the `craft-chip`, its `li`, or anything inside
+   * either (legacy `removeComponent` + `removeComponents`). Hidden inputs are
+   * disabled first so the value can't post if the form submits mid-removal,
+   * the chip's Choose-menu option is restored, and focus moves to the next
+   * chip or the add button.
+   *
+   * All state changes (inputs, option, `change`) land immediately, matching
+   * the legacy order; only the DOM node lingers through the fade. The fading
+   * `li` is flagged `data-removing` so counts, `selectedIds`, and reorder
+   * positions already exclude it, and it leaves the sorter right away.
+   */
+  removeComponent(el: HTMLElement, animate = true): void {
+    const chip =
+      el.closest<HTMLElement>('craft-chip') ??
+      el.querySelector<HTMLElement>('craft-chip');
+    const li = chip?.closest('li') ?? null;
+    if (!chip || !li) {
+      return;
+    }
+
+    // Form-submit safety: neutralize the inputs before the node goes away.
+    for (const input of Array.from(chip.querySelectorAll('input'))) {
+      input.disabled = true;
+      input.removeAttribute('name');
+    }
+
+    this.#showOption(chip.dataset.id);
+    wiredChips.delete(chip);
+    this.#select?.removeItems(chip);
+
+    li.dataset.removing = '';
+    this.#dragSort?.removeItems(li);
+
+    // The next still-selected chip, for the focus handoff.
+    let nextLi = li.nextElementSibling as HTMLElement | null;
+    while (nextLi && nextLi.dataset.removing !== undefined) {
+      nextLi = nextLi.nextElementSibling as HTMLElement | null;
+    }
+
+    const finish = (): void => {
+      li.remove(); // the list observer re-confirms the sorter removal
+    };
+
+    if (animate) {
+      this.#animateAway(li, finish);
+    } else {
+      finish();
+    }
+
+    this.#focusAfterRemoval(nextLi);
+    this.#onChange();
+  }
+
+  /**
+   * Move a chip's `li` one slot toward the start (`'up'` — Move forward on
+   * horizontal lists) or the end (`'down'`) — the reorder button's menu path.
+   * Public so the reorder handler can call it on the chip's *current* owner
+   * after an {@link adoptChip} move.
+   */
+  moveComponent(li: HTMLElement, direction: ReorderDirection): void {
+    const sibling =
+      direction === 'up' ? li.previousElementSibling : li.nextElementSibling;
+    if (!sibling) {
+      return;
+    }
+
+    if (direction === 'up') {
+      sibling.before(li);
+    } else {
+      sibling.after(li);
+    }
+
+    this.#onChange();
+  }
+
+  // --- Boot ---------------------------------------------------------------------
+
+  /** Delegated Choose-menu option activation. */
+  #handleMenuClick = (ev: Event): void => {
+    const option = (ev.target as Element | null)?.closest<HTMLElement>(
+      'craft-action-item[data-id]'
+    );
+    if (!option || option.hasAttribute('hidden')) {
+      return;
+    }
+
+    // craft-action-menu only auto-closes for default-slot items; these live in
+    // the content container, so close explicitly.
+    if (this.#menu) {
+      this.#menu.opened = false;
+    }
+
+    this.addComponent(option.dataset.type ?? '', option.dataset.id ?? '');
+  };
+
+  /**
+   * Create button activation: open a CP screen slideout for `create-action`,
+   * add the newly-created component on submit (plus a Choose-menu option for
+   * it), and hand focus back to the Create button when the slideout closes
+   * (legacy `ComponentSelectInput.init`).
+   */
+  #handleCreateActivate = (): void => {
+    const slideout = new Craft.CpScreenSlideout(this.settings.createAction);
+
+    slideout.on('submit', (ev: any) => {
+      const data = ev.response.data;
+      this.addComponent(data.modelClass, data.modelId, true);
+    });
+
+    slideout.on('close', () => {
+      this.#createBtn?.focus();
+    });
+  };
+
+  // --- Chips ----------------------------------------------------------------------
+
+  /**
+   * The selected component chips, in DOM order (legacy `getComponents`).
+   * Chips mid removal-fade (`li[data-removing]`) are already excluded.
+   */
+  #chips(): HTMLElement[] {
+    if (!this.#list) {
+      return [];
+    }
+    return Array.from(
+      this.#list.querySelectorAll<HTMLElement>(
+        ':scope > li:not([data-removing]) > craft-chip'
+      )
+    );
+  }
+
+  /**
+   * One-time wiring for a chip: hide its Choose-menu option, give its `li` a
+   * reorder button, and add its action-menu items. WeakSet-guarded so a `li`
+   * moved within the list (which re-fires the observer as remove+add) isn't
+   * wired twice.
+   */
+  #initChip(chip: HTMLElement): void {
+    if (wiredChips.has(chip)) {
+      return;
+    }
+    wiredChips.add(chip);
+
+    this.#hideOption(chip.dataset.id);
+
+    const li = chip.closest('li');
+    if (li && this.settings.sortable) {
+      this.#initReorderButton(li);
+    }
+
+    this.#addChipActions(chip);
+    this.#initChipEditShortcut(chip);
+
+    if (this.settings.selectable) {
+      this.#initChipRemovalShortcut(chip);
+    }
+  }
+
+  /**
+   * Backspace/Delete while a chip (or a focusable inside it) is focused removes
+   * the whole current selection (legacy `addComponents` keydown handler). Like
+   * the other chip handlers this lives on the chip and needs no teardown — it
+   * goes away with the chip — and resolves the chip's owning select at event
+   * time, since a chip can be adopted by a different select.
+   */
+  #initChipRemovalShortcut(chip: HTMLElement): void {
+    chip.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Backspace' || ev.key === 'Delete') {
+        ev.stopPropagation();
+        ev.preventDefault();
+        (
+          closestRegistered(chip, componentSelectData) ?? this
+        ).#removeSelected();
+      }
+    });
+  }
+
+  /** Remove every currently-selected chip (the Backspace/Delete path). */
+  #removeSelected(): void {
+    // Snapshot: removeComponent mutates the selection as each chip leaves.
+    const selected = this.#select?.getSelectedItems() ?? [];
+    for (const chip of selected) {
+      this.removeComponent(chip);
+    }
+  }
+
+  /**
+   * Add the chip's action-menu items through the `Craft.addActionsToChip` seam
+   * (it finds — or creates — the self-booting `craft-action-menu` inside the
+   * `craft-chip`'s `[slot="suffix"]`, building `craft-action-item`s from these
+   * descriptors). A bubbling `define-chip-actions` event — dispatched natively
+   * on {@link container} (NOT via garnish `trigger`, since its `detail.actions`
+   * array is synchronously mutated by ancestor listeners) — lets a wrapping
+   * element contribute extra actions ahead of the built-in Replace/Remove —
+   * see {@link DefineChipActionsEventDetail}. The legacy Move
+   * forward/backward actions are intentionally not ported — the
+   * `<craft-reorder-button>` owns reordering now.
+   *
+   * Like the legacy handlers, these avoid a hard `this`: a chip CAN end up
+   * assigned to a different component select (see {@link adoptChip}), so each
+   * handler resolves the chip's owning select — via the `support.ts` registry —
+   * at event time.
+   */
+  #addChipActions(chip: HTMLElement): void {
+    if (!Craft?.addActionsToChip) {
+      return;
+    }
+
+    const owner = (): ComponentSelect =>
+      closestRegistered(chip, componentSelectData) ?? this;
+
+    const actions: any[] = [];
+
+    this.container.dispatchEvent(
+      new CustomEvent<DefineChipActionsEventDetail>('define-chip-actions', {
+        bubbles: true,
+        detail: {chip, actions},
+      })
+    );
+
+    if (this.#menu) {
+      actions.push({
+        icon: 'arrows-rotate',
+        label: Craft.t('app', 'Replace'),
+        callback: () => {
+          // Open the Choose menu; picking an option adds the replacement (and,
+          // at the limit, drops this chip). The legacy jQuery menu re-anchored
+          // itself to the chip (`$alignmentElement`); Lion's dropdown config
+          // anchors to the invoker, so that nicety is dropped as a
+          // simplification.
+          owner().openChooseMenu();
+        },
+      });
+    }
+
+    actions.push({
+      icon: 'remove',
+      label: Craft.t('app', 'Remove'),
+      onActivate: () => owner().removeComponent(chip),
+      destructive: true,
+    });
+
+    Craft.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.
+   */
+  #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 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');
+      }
+    });
+  }
+
+  /**
+   * The chip's own action menu (legacy `getDisclosureMenu`), in whichever
+   * shape it's in — mirroring `Craft.addActionsToChip`'s own resolution:
+   *
+   * - Modern self-booting `craft-action-menu` (what
+   *   `ElementHtml::componentActionMenu()` renders now): returns
+   *   `{$container}` pointing at its `[slot="content"]` node — a plain
+   *   object, not a real `Garnish.DisclosureMenu`, since there isn't one.
+   * - Legacy shape (old markup, or a `[data-disclosure-trigger]` a plugin
+   *   still renders into the suffix slot, or the old `.chip-actions
+   *   .action-btn`): booted on demand through the jQuery
+   *   `disclosureMenu()` plugin, returning the real instance.
+   */
+  #chipDisclosureMenu(chip: HTMLElement): any {
+    const actionMenu = chip.querySelector<HTMLElement>(
+      '[slot="suffix"] craft-action-menu'
+    );
+    if (actionMenu) {
+      const container =
+        actionMenu.querySelector<HTMLElement>('[slot="content"]') ?? actionMenu;
+      return {$container: container};
+    }
+
+    const $trigger = $(chip)
+      .find(
+        '[slot="suffix"] [data-disclosure-trigger], .chip-actions .action-btn'
+      )
+      .first();
+
+    return $trigger.length
+      ? $trigger.disclosureMenu().data('disclosureMenu')
+      : null;
+  }
+
+  /**
+   * Settings each rendered chip instance is requested with (legacy
+   * `renderSettings`). Includes an `inputValue` when the
+   * {@link ComponentSelectSettings.getInputValue} hook supplies one (legacy
+   * `EntryTypeSelectInput.renderSettings`) — read lazily through
+   * `this.settings.getInputValue?.()` so a hook set on the element after boot
+   * is still honored.
+   */
+  #renderSettings(id: string | number): Record<string, unknown> {
+    const settings: Record<string, unknown> = {
+      showActionMenu: this.settings.showActionMenus,
+      showHandle: this.settings.showHandles,
+      showDescription: this.settings.showDescription,
+      inputName: this.settings.name,
+      hyperlink: this.settings.hyperlinks,
+    };
+
+    const inputValue = this.settings.getInputValue?.()?.(id);
+    if (inputValue != null) {
+      settings.inputValue = inputValue;
+    }
+
+    return settings;
+  }
+
+  // --- Sorting ---------------------------------------------------------------------
+
+  /**
+   * Chip selection (legacy `initComponentSelect`): a `@craftcms/garnish`
+   * `Select` over the chips, enabling click / shift-click / ⌘-click selection.
+   * `multi` follows `sortable` (legacy `multi: this.settings.sortable`); the
+   * filter keeps clicks on a chip's own links/buttons (its label link, action
+   * menu, reorder button) from selecting it. `makeFocusable` is off — selection
+   * exists for Backspace/Delete removal and group drag, not keyboard roving.
+   *
+   * A window `mousedown` outside the container clears the selection, mirroring
+   * the legacy deselect-on-outside-click. Bound via garnish `addListener`, so
+   * `Base.destroy` (via {@link destroy}'s `super.destroy()`) tears it down.
+   */
+  #initSelect(): void {
+    if (!this.settings.selectable) {
+      return;
+    }
+
+    this.#select = new Select({
+      multi: this.settings.sortable,
+      filter: (target: EventTarget | null) =>
+        !(target instanceof Element
+          ? target.closest('a[href],button,[role=button]')
+          : null),
+      makeFocusable: false,
+    });
+
+    this.addListener(window, 'mousedown', (ev: any) => {
+      const target = ev.target as Node | null;
+      if (target !== this.container && !this.container.contains(target)) {
+        this.#select?.deselectAll();
+      }
+    });
+  }
+
+  /**
+   * Drag-to-sort on the chips list, mirroring the sortable-checkbox-select
+   * setup: the `<craft-reorder-button>` is the handle, and membership is kept
+   * in sync by {@link init} and the list observer. Vertical lists sort on the
+   * y axis; `inline-chips` lists are unrestricted (legacy
+   * `getComponentSortAxis`). On touch there's no sorter — the reorder button's
+   * menu handles reordering. When `selectable`, a `filter` drags the whole
+   * selection as a group whenever the grabbed chip is part of it (legacy
+   * `initComponentSort`'s filter).
+   */
+  #initDragSort(): void {
+    if (
+      this.#dragSort ||
+      this.#sortManagedExternally ||
+      !this.settings.sortable ||
+      !Craft.hasMousePointerEvents()
+    ) {
+      return;
+    }
+
+    this.#dragSort = new DragSort({
+      container: this.#list,
+      handle: 'craft-reorder-button',
+      axis: this.#list?.classList.contains('inline-chips') ? null : Y_AXIS,
+      filter: this.settings.selectable ? () => this.#draggeeFilter() : null,
+      collapseDraggees: true,
+      magnetStrength: 4,
+      helperLagBase: 1.5,
+    });
+    this.#dragSort.on('sortChange', () => this.#onChange());
+  }
+
+  /**
+   * The `li`s a drag should move: the whole selection (each selected chip's
+   * `li`) when the grabbed chip is selected, otherwise just the grabbed `li`
+   * (legacy `initComponentSort` filter, which keyed off the target chip's `sel`
+   * class). Runs at drag start off the sorter's current `$targetItem`.
+   */
+  #draggeeFilter(): HTMLElement[] {
+    const targetLi = this.#dragSort?.$targetItem as HTMLElement | null;
+    if (!targetLi) {
+      return [];
+    }
+
+    const chip = targetLi.querySelector<HTMLElement>(':scope > craft-chip');
+    if (chip && this.#select?.isSelected(chip)) {
+      return this.#select
+        .getSelectedItems()
+        .map((selectedChip: HTMLElement) => selectedChip.closest('li'))
+        .filter((li: HTMLLIElement | null): li is HTMLLIElement => li !== null);
+    }
+
+    return [targetLi];
+  }
+
+  /**
+   * Append the `<craft-reorder-button>` to the chip's suffix slot, beside the
+   * action menu — it is both the DragSort handle and the move-action menu,
+   * replacing the legacy `.move` handle button and the chip menu's Move
+   * forward/backward actions. `inline-chips` lists get the button's
+   * `horizontal` orientation (Move forward/backward labels with RTL-aware
+   * arrows).
+   */
+  #initReorderButton(li: HTMLElement): void {
+    const chip = li.querySelector('craft-chip');
+    if (!chip || li.querySelector('craft-reorder-button')) {
+      return;
+    }
+
+    // The server always renders the suffix container (it holds the action
+    // menu), but be defensive for chips built elsewhere.
+    let suffix = chip.querySelector(':scope > [slot="suffix"]');
+    if (!suffix) {
+      suffix = document.createElement('div');
+      suffix.setAttribute('slot', 'suffix');
+      chip.append(suffix);
+    }
+
+    const btn = document.createElement('craft-reorder-button');
+    if (this.#list?.classList.contains('inline-chips')) {
+      btn.setAttribute('orientation', 'horizontal');
+    }
+    btn.addEventListener('reorder', (event: Event) => {
+      const {direction} = (event as CustomEvent<{direction: ReorderDirection}>)
+        .detail;
+      // Resolve the owning select at event time — the li may have been
+      // adopted by a different select since this listener was bound.
+      (closestRegistered(li, componentSelectData) ?? this).moveComponent(
+        li,
+        direction
+      );
+    });
+    suffix.append(btn);
+  }
+
+  /**
+   * Watch the list for `li`s added or removed after boot — an added chip gets
+   * its one-time wiring and joins the sorter; a removed one leaves it. A move
+   * within the list fires as remove+add for the same node, which is why sorter
+   * membership is re-added here and chip wiring is WeakSet-guarded. Watches
+   * direct children only (`childList`, no `subtree`), so appending the reorder
+   * button inside an `li` can't re-trigger it.
+   */
+  #observeList(): void {
+    if (!this.#list) {
+      return;
+    }
+
+    this.#listObserver = new MutationObserver((mutations) => {
+      let changed = false;
+
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node instanceof HTMLElement && node.matches('li')) {
+            const chip = node.querySelector<HTMLElement>(':scope > craft-chip');
+            if (chip) {
+              this.#initChip(chip);
+              if (this.settings.sortable) {
+                this.#dragSort?.addItems(node); // no-op if already registered
+              }
+              if (this.settings.selectable) {
+                this.#select?.addItems(chip); // no-op if already registered
+              }
+              changed = true;
+            }
+          }
+        }
+
+        for (const node of mutation.removedNodes) {
+          if (node instanceof HTMLElement && node.matches('li')) {
+            this.#dragSort?.removeItems(node);
+            if (this.settings.selectable) {
+              const chip = node.querySelector<HTMLElement>(
+                ':scope > craft-chip'
+              );
+              if (chip) {
+                this.#select?.removeItems(chip);
+              }
+            }
+            changed = true;
+          }
+        }
+      }
+
+      // Button visibility + reorder positions only; the `change` event stays
+      // with the explicit mutation paths (add/remove/move/drag) so a drag
+      // doesn't double-fire it.
+      if (changed) {
+        this.#updateButtons();
+        this.#updateReorderPositions();
+      }
+    });
+
+    this.#listObserver.observe(this.#list, {childList: true});
+  }
+
+  /**
+   * Set each reorder button's `position` (`first`/`middle`/`last`) so Move up
+   * is disabled on the first chip and Move down on the last, and disable the
+   * buttons entirely when there's nothing to reorder against.
+   */
+  #updateReorderPositions(): void {
+    if (!this.#list || !this.settings.sortable) {
+      return;
+    }
+
+    // Chip `li`s only — a grouped select's list can also hold a manager-owned
+    // `entry-type-group--caboose` sentinel `li` (no chip), which must not count
+    // toward the reorder count or it'd wrongly enable a lone chip's button.
+    const lis = this.#chips()
+      .map((chip) => chip.closest<HTMLElement>('li'))
+      .filter((li): li is HTMLElement => li !== null);
+
+    lis.forEach((li, index) => {
+      const btn = li.querySelector('craft-reorder-button');
+      if (!btn) {
+        return;
+      }
+
+      btn.toggleAttribute('disabled', lis.length < 2);
+      btn.setAttribute(
+        'position',
+        index === 0 ? 'first' : index === lis.length - 1 ? 'last' : 'middle'
+      );
+    });
+  }
+
+  // --- Choose menu (craft-action-menu) ----------------------------------------
+
+  /**
+   * The Choose menu's option elements. A descendant query on the menu host —
+   * not `[slot="content"] >` — because Lion's overlay controller relocates the
+   * content node inside its wrapper (dropping the `slot` attribute) once the
+   * overlay boots.
+   */
+  #options(): HTMLElement[] {
+    if (!this.#menu) {
+      return [];
+    }
+    return Array.from(
+      this.#menu.querySelectorAll<HTMLElement>('craft-action-item[data-id]')
+    );
+  }
+
+  #getOption(id: string | number): HTMLElement | null {
+    const key = String(id);
+    return this.#options().find((option) => option.dataset.id === key) ?? null;
+  }
+
+  /**
+   * Option visibility rides the consumer-owned `hidden` attribute; the menu's
+   * `searchable` filter uses its own `data-search-hidden` channel, so the two
+   * compose without clobbering each other.
+   */
+  #showOption(id: string | number | undefined): void {
+    if (id !== undefined) {
+      this.#getOption(id)?.removeAttribute('hidden');
+    }
+  }
+
+  #hideOption(id: string | number | undefined): void {
+    if (id !== undefined) {
+      this.#getOption(id)?.setAttribute('hidden', '');
+    }
+  }
+
+  /**
+   * Add a Choose-menu option for a newly-created component (the create flow):
+   * a `craft-action-item` built client-side from the rendered chip's
+   * `data-label`/`data-handle`, replacing the legacy server round-trip
+   * (`withMenuItems: true` + `menuId`). `data-keywords` carries the label +
+   * handle for the menu's `searchable` filter, matching the server-rendered
+   * options. Starts `hidden` — the component was just selected. Activation
+   * needs no wiring; the boot-time delegated click listener covers it.
+   * (Trade-off vs. server markup: no icon/color.)
+   */
+  #addMenuOption(
+    type: string,
+    id: string | number,
+    chip: HTMLElement | null
+  ): void {
+    // Append beside an existing option when there is one; otherwise fall back
+    // to the content container (which may have lost its `slot` attribute to
+    // Lion's relocation, hence the two-step lookup).
+    const container =
+      this.#options().pop()?.parentElement ??
+      this.#menu?.querySelector<HTMLElement>('[slot="content"]');
+    if (!container) {
+      return;
+    }
+
+    const label = chip?.dataset.label ?? String(id);
+    const handle = chip?.dataset.handle;
+
+    const option = document.createElement('craft-action-item');
+    option.dataset.type = type;
+    option.dataset.id = String(id);
+    option.dataset.keywords = [label, handle].filter(Boolean).join(' ');
+    option.setAttribute('hidden', '');
+
+    const labelWrap = document.createElement('span');
+    labelWrap.className = 'inline-flex flex-col items-start gap-2xs';
+
+    const labelEl = document.createElement('span');
+    labelEl.textContent = label;
+    labelWrap.append(labelEl);
+
+    if (this.settings.showHandles && handle) {
+      const handleEl = document.createElement('span');
+      handleEl.className = 'menu-item-description mt-2xs smalltext light code';
+      handleEl.textContent = handle;
+      labelWrap.append(handleEl);
+    }
+
+    option.append(labelWrap);
+    container.append(option);
+  }
+
+  // --- Limit / focus ------------------------------------------------------------
+
+  /** Whether another component may be added under the `limit`. */
+  #canAddMore(): boolean {
+    return !this.settings.limit || this.#chips().length < this.settings.limit;
+  }
+
+  /**
+   * Hide/show the add + create buttons per the `limit` and remaining options,
+   * and collapse their flex wrapper when both are hidden (legacy
+   * `updateButtons`). The add button is the menu's slotted invoker, so the
+   * wrapper is resolved via `closest` and the check reads the buttons
+   * directly rather than the wrapper's immediate children.
+   */
+  #updateButtons(): void {
+    const canAdd = this.#canAddMore();
+
+    if (this.#menu) {
+      const hasVisibleOptions = this.#options().some(
+        (option) => !option.hasAttribute('hidden')
+      );
+      this.#menu.classList.toggle('hidden', !canAdd || !hasVisibleOptions);
+    }
+
+    if (this.#createBtn) {
+      this.#createBtn.classList.toggle('hidden', !canAdd);
+    }
+
+    const isHidden = (btn: HTMLElement | null): boolean =>
+      !btn || btn.classList.contains('hidden');
+
+    const wrapper = (this.#menu ?? this.#createBtn)?.closest(
+      '[data-id="component-select-footer"]'
+    ) as HTMLElement | null;
+    wrapper?.classList.toggle(
+      'hidden',
+      isHidden(this.#menu) && isHidden(this.#createBtn)
+    );
+  }
+
+  /**
+   * After a removal, move focus to the following chip's action button, else to
+   * the add button (when more can be added), else to the last remaining chip's
+   * action button (legacy `focusNextLogicalElement`).
+   */
+  #focusAfterRemoval(nextLi: HTMLElement | null): void {
+    const target =
+      this.#chipActionButton(nextLi) ??
+      (this.#canAddMore() && this.#addBtn
+        ? this.#addBtn
+        : this.#chipActionButton(this.#chips().pop()?.closest('li') ?? null));
+
+    target?.focus();
+  }
+
+  /** A focusable control within a chip's `li` — its action-menu trigger. */
+  #chipActionButton(li: HTMLElement | null): HTMLElement | null {
+    return (
+      li?.querySelector<HTMLElement>(
+        'craft-chip [data-disclosure-trigger], craft-chip button, craft-chip a[href]'
+      ) ?? null
+    );
+  }
+
+  /**
+   * Fade + collapse a chip's `li` before removal — the legacy velocity
+   * `animateComponentAway`, as a WAAPI animation with no velocity dependency.
+   * Collapses the layout axis (width for `inline-chips`, height otherwise) and
+   * runs immediately when the user prefers reduced motion or WAAPI is
+   * unavailable.
+   */
+  #animateAway(li: HTMLElement, done: () => void): void {
+    if (prefersReducedMotion() || typeof li.animate !== 'function') {
+      done();
+      return;
+    }
+
+    const inline = this.#list?.classList.contains('inline-chips') ?? false;
+    const property = inline ? 'width' : 'height';
+    const size = inline ? li.offsetWidth : li.offsetHeight;
+
+    li.style.overflow = 'hidden';
+    // The chip is already removed state-wise; don't let the ghost take clicks.
+    li.style.pointerEvents = 'none';
+
+    const animation = li.animate(
+      [
+        {opacity: 1, [property]: `${size}px`},
+        {opacity: 0, [property]: '0px'},
+      ],
+      {duration: REMOVE_FX_DURATION, easing: 'ease-out', fill: 'forwards'}
+    );
+
+    animation.addEventListener('finish', done);
+    animation.addEventListener('cancel', done);
+  }
+
+  // --- Change -------------------------------------------------------------------
+
+  /**
+   * Membership or order changed: refresh button visibility + reorder positions
+   * and emit `change` (suppressed during boot, legacy parity) via garnish
+   * `trigger` — the `ControllerElement` bridge re-dispatches it as a bubbling
+   * DOM `CustomEvent` on `<craft-component-select>`.
+   */
+  #onChange(): void {
+    // Re-sync the selection's cached item order after add/remove/reorder/drag
+    // (legacy `onChange`'s `componentSelect?.resetItemOrder()`).
+    this.#select?.resetItemOrder();
+
+    this.#updateButtons();
+    this.#updateReorderPositions();
+
+    if (this.#initialized) {
+      this.trigger('change');
+    }
+  }
+}
diff --git a/resources/js/modules/component-select/index.ts b/resources/js/modules/component-select/index.ts
new file mode 100644
index 00000000000..323fba1f44f
--- /dev/null
+++ b/resources/js/modules/component-select/index.ts
@@ -0,0 +1,19 @@
+import {ComponentSelect} from './component-select';
+import CraftComponentSelect from '@/modules/component-select/component-select.ce';
+import {defineElement} from '@/common/web-components';
+
+// Guarded registration (mirrors the `customElements.get()` check the
+// `@craftcms/cp` components do).
+defineElement('craft-component-select', CraftComponentSelect);
+
+// Unlike the other ported modules there is no `window.Craft.*` assignment:
+// the legacy `Craft.ComponentSelectInput` still ships in the legacy bundle
+// for the not-yet-migrated Twig surfaces, and `<craft-component-select>` (the
+// element, not this controller) is the public API for the ported ones — see
+// the module README's "No legacy-global shim" section.
+export {CraftComponentSelect, ComponentSelect};
+export type {
+  ComponentSelectSettings,
+  DefineChipActionsEventDetail,
+} from './component-select';
+export {componentSelectData} from './support';
diff --git a/resources/js/modules/component-select/support.ts b/resources/js/modules/component-select/support.ts
new file mode 100644
index 00000000000..93da18ff72c
--- /dev/null
+++ b/resources/js/modules/component-select/support.ts
@@ -0,0 +1,13 @@
+import type {ComponentSelect} from './component-select';
+
+/**
+ * WeakMap replacing what would otherwise be a jQuery `.data('componentSelect')`
+ * back-reference (matching the grouped-entry-type-manager /
+ * sortable-checkbox-select pattern). Keyed by the `<craft-component-select>`
+ * element (the controller's `container`); a chip's action-menu items and its
+ * `<craft-reorder-button>` resolve their *owning* select through it at event
+ * time — via `closestRegistered` — so a chip adopted by a different select
+ * (see `ComponentSelect.adoptChip`) keeps working without being re-wired. See
+ * the module README.
+ */
+export const componentSelectData = new WeakMap<Element, ComponentSelect>();
diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index ccd74821030..48bb7853d44 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -171,7 +171,7 @@ export class EditableTable extends Base<EditableTableSettings> {
     this.initialized = true;
     this.removeListener(window, 'resize');
 
-    const $container = this.$table.closest('.input');
+    const $container = this.$table.closest('.input, craft-field');
     if ($container.length && this.$table.width() > $container.width()) {
       $container.css('overflow-x', 'auto');
     }
diff --git a/resources/js/modules/entry-types/components/EntryTypeChip.vue b/resources/js/modules/entry-types/components/EntryTypeChip.vue
index 6b33703b855..4a6c4f03c50 100644
--- a/resources/js/modules/entry-types/components/EntryTypeChip.vue
+++ b/resources/js/modules/entry-types/components/EntryTypeChip.vue
@@ -88,7 +88,7 @@
   // into chips, but for right now this is the only spot
   craft-chip::part(prefix) {
     align-self: start;
-    height: 1lh;
+    min-height: 1lh;
     justify-content: center;
   }
 
diff --git a/resources/js/modules/grouped-entry-type-manager/README.md b/resources/js/modules/grouped-entry-type-manager/README.md
new file mode 100644
index 00000000000..31f15a5784c
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/README.md
@@ -0,0 +1,110 @@
+# Grouped Entry Type Manager
+
+A TypeScript port of the legacy jQuery `Craft.GroupedEntryTypeManager` (+ its
+`Group` inner class) and the cross-group behaviors of
+`Craft.GroupedEntryTypeSelectInput` onto the modern **`@craftcms/garnish`**
+`Base`. It powers the Matrix field settings' grouped entry type UI
+(`_components/fieldtypes/Matrix/settings.twig`), orchestrating the self-booting
+[`<craft-component-select>`](../component-select/component-select.ts) elements
+that replaced the legacy `Craft.ComponentSelectInput` chain.
+
+## What changed
+
+- **Class system.** `Garnish.Base.extend({…})` → `class extends Base`; `init()`
+  is still the setup method but is invoked from a `constructor` via the
+  `new.target` leaf guard (the same construction contract as the
+  SortableCheckboxSelect / EditableTable ports);
+  `Craft.GroupedEntryTypeManager.Group` → the exported `Group` class.
+- **Select orchestration, not subclassing.** The legacy
+  `GroupedEntryTypeSelectInput` subclassed the jQuery select input to propagate
+  option visibility, inject chip actions, and stamp `{id, group}` input values.
+  Those now ride `craft-component-select`'s public seams: the bubbling `change`
+  event (cross-group option sync in `refresh()`), the bubbling
+  `define-chip-actions` event ("Move to previous/next group" items, plus the
+  per-field override "Settings" item when `allow-overrides` is set), the
+  `getInputValue` hook (group-aware chip input JSON), `adoptChip()` (menu
+  moves between groups), and `releaseSort()` (each select hands its chip
+  `DragSort` to the manager's cross-group one — see below).
+- **Per-field entry-type overrides.** When `<craft-entry-type-manager>` carries
+  `allow-overrides` (the Matrix field always sets it), each entry-type chip
+  gets a gear "Settings" action — replacing its default "Entry type settings"
+  item (which edits the shared entry type globally) — that opens a
+  `Craft.Slideout` to override the entry type's name/handle/description *for
+  this field*. This ports `Craft.EntryTypeSelectInput`'s
+  `createSettings`/`applySettings` (never carried over when Matrix moved to the
+  web-component select) into `entry-type-override-settings.ts`, wired from
+  `handleDefineChipActions`. Applying writes the override config into the chip's
+  `{id, group, …}` hidden-input JSON (preserving the group) and refreshes the
+  chip label + override indicators.
+- **Titlebar controls.** The legacy jQuery menubtn + `.move` handle →
+  a data-driven `craft-action-menu` (Rename / Remove) plus a horizontal
+  `<craft-reorder-button>` that is both the group's `DragSort` handle and its
+  Move forward/backward menu (replacing the legacy menu's move items).
+- **Cross-group chip drag.** One manager-level `DragSort` (`initChipSort` /
+  `syncChipSort`) spans every group's `ul.components` so a chip can be *dragged*
+  between groups — a per-select sorter can't drop into a sibling's list. Each
+  child select `releaseSort()`s its own chip sorter (legacy
+  `GroupedEntryTypeSelectInput.initComponentSort` no-op'd for the same reason);
+  the manager registers every chip `li` plus a per-group
+  `entry-type-group--caboose` sentinel `li` (the end-of-list / empty-group drop
+  target, gated out of `canInsertAfter`). On drop, `refresh()` rewrites the
+  moved chip's `{group}` JSON (`Group.refresh`) and re-syncs. On touch there's
+  no `DragSort` at all — the reorder menu's "Move to previous/next group" items
+  handle it.
+- **`.data()` → WeakMap.** `$container.data('entryTypeManager')` /
+  `.data('entryTypeGroup')` → module-level WeakMaps
+  (`support.ts`'s `groupedEntryTypeManagerData`, and an internal `groupData`).
+  The chip/titlebar handlers resolve the live instances through them at event
+  time, so a destroy/re-boot (ControllerElement teardown) takes over cleanly.
+- **No JS blob for new groups.** The legacy `entryTypeSelectHtml` +
+  `entryTypeSelectJs` pair → a `<template data-entry-type-select>` cloned
+  client-side (TEMP_ID swap); the select inside self-boots.
+- **ESM/bundle wiring.** Imported from `resources/js/cp.ts`; the legacy
+  `GroupedEntryTypeManager.js` and `GroupedEntryTypeSelectInput.js` are removed
+  from the legacy `Craft.js` bundle.
+
+## What deliberately stays jQuery / legacy seams
+
+`Craft.t`, `Craft.ui.icon`, `Craft.namespaceId` / `namespaceInputName`,
+`Craft.hasMousePointerEvents`, `Craft.sendActionRequest`, and the
+jQuery-returning `Craft.ui.createSortableCheckboxSelect` (the Default Table
+Columns rebuild) — accessed via the page globals (`declare const Craft/$`).
+
+## Construction & global
+
+`window.Craft.GroupedEntryTypeManager` is assigned the **plain modern ES
+class** (plus `.Group`) — **no `compatify`**, because nothing subclasses it via
+the legacy `Garnish.Base.extend()`. The legacy settings keys are still
+accepted (`$defaultColumnsContainer` unwraps; `entryTypeSelectJs` is ignored).
+`Craft.GroupedEntryTypeSelectInput` is gone without replacement — its behavior
+lives in the manager + `craft-component-select` now.
+
+The `<craft-entry-type-manager>` custom element self-boots the class around the
+markup it wraps (attributes: `namespace`, `default-columns-id`, `disabled` for
+read-only inertness) and attaches the chip move-action listener ahead of its
+deferred boot, so chips wired by earlier-booting selects still get their items.
+
+## Files
+
+- `grouped-entry-type-manager.ts` — the `GroupedEntryTypeManager` and `Group`
+  classes, plus `attachChipMoveActions`.
+- `entry-type-override-settings.ts` — `editEntryTypeOverrides(chip)`, the
+  per-field override slideout flow (render → `Craft.Slideout` → apply).
+- `grouped-entry-type-manager.ce.ts` — `<craft-entry-type-manager>`, the
+  self-booting custom element (a `ControllerElement`).
+- `support.ts` — the `.data()`-replacement WeakMap.
+- `index.ts` — assigns `window.Craft.GroupedEntryTypeManager` (+ `.Group`) and
+  registers `<craft-entry-type-manager>`. Imported from `resources/js/cp.ts`.
+- `components/` — unrelated Vue components (Inertia section settings), imported
+  directly by path.
+
+## Deferred
+
+- **Overrides on newly-added chips.** A chip added from the Choose menu carries
+  only `{id, group}` until its "Settings" action is used (which writes the
+  overrides directly). Threading override fields through the `getInputValue`
+  hook / `app/render-components` payload so a freshly-added chip can be rendered
+  *with* overrides is a separate follow-up.
+- Behavioral/browser verification (add/rename/remove/reorder groups, chip
+  moves — menu *and* cross-group drag — option sync, default-columns rebuild,
+  and the override editor) is left to manual testing.
diff --git a/resources/js/modules/grouped-entry-type-manager/entry-type-override-settings.ts b/resources/js/modules/grouped-entry-type-manager/entry-type-override-settings.ts
new file mode 100644
index 00000000000..1fcff099a82
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/entry-type-override-settings.ts
@@ -0,0 +1,199 @@
+// `Craft` and `$` (jQuery) remain page globals. The entry-type override editor
+// is a still-jQuery `Craft.Slideout` orchestrating server-rendered settings
+// HTML, so the same legacy seams the rest of the manager leans on survive here
+// (`Craft.sendActionRequest`, `Craft.Slideout`, `Craft.ui`,
+// `Craft.initUiElements`, `Craft.cp.displayError`).
+declare const Craft: any;
+declare const $: any;
+
+/**
+ * Open the per-field entry-type override editor for a chip — the port of
+ * `Craft.EntryTypeSelectInput.createSettings`/`applySettings` onto the
+ * web-component `<craft-component-select>` path. POSTs the chip's current
+ * `{id, group, name?, handle?, description?}` JSON to
+ * `entry-types/render-override-settings`, opens a `Craft.Slideout` with the
+ * returned settings form, and on submit applies the overrides back onto the
+ * chip (label + indicators + hidden-input JSON) via {@link applyOverrides}.
+ *
+ * Self-contained and chip-local: overriding an entry type's name/handle/
+ * description changes neither its id nor its group, so no manager-level
+ * refresh is needed. `<craft-entry-type-manager>` wires the "Settings" chip
+ * action that calls this (see `handleDefineChipActions`).
+ */
+export async function editEntryTypeOverrides(chip: HTMLElement): Promise<void> {
+  const input = chip.querySelector('input');
+  if (!input) {
+    return;
+  }
+
+  let data;
+  try {
+    const response = await Craft.sendActionRequest(
+      'POST',
+      'entry-types/render-override-settings',
+      {data: JSON.parse(input.value)}
+    );
+    data = response.data;
+  } catch (e: any) {
+    Craft.cp.displayError(e?.response?.data?.message);
+    throw e;
+  }
+
+  const settingsNamespace = data.namespace;
+  const slideout = await createSlideout(data);
+
+  slideout.$container.on('submit', (ev: Event) => {
+    ev.preventDefault();
+    void applyOverrides(chip, slideout, settingsNamespace);
+  });
+  slideout.on('close', () => {
+    slideout.destroy();
+  });
+}
+
+/** Build the override-settings `Craft.Slideout` (legacy `createSlideout`). */
+async function createSlideout(data: any): Promise<any> {
+  const $body = $('<div/>', {class: 'entry-type-override-settings-body'});
+  $('<div/>', {class: 'fields', html: data.settingsHtml}).appendTo($body);
+
+  const $footer = $('<div/>', {class: 'entry-type-override-settings-footer'});
+  $('<div/>', {class: 'flex-grow'}).appendTo($footer);
+  const $cancelBtn = Craft.ui
+    .createButton({label: Craft.t('app', 'Close'), spinner: true})
+    .appendTo($footer);
+  Craft.ui
+    .createSubmitButton({
+      class: 'secondary',
+      label: Craft.t('app', 'Apply'),
+      spinner: true,
+    })
+    .appendTo($footer);
+
+  const slideout = new Craft.Slideout($body.add($footer), {
+    containerElement: 'form',
+    containerAttributes: {
+      action: '',
+      method: 'post',
+      novalidate: '',
+      class: 'entry-type-override-settings',
+    },
+  });
+
+  slideout.on('open', () => {
+    // Hold off a frame until it's positioned, then focus the first text input.
+    requestAnimationFrame(() => {
+      slideout.$container.find('.text:first').focus();
+    });
+  });
+
+  $cancelBtn.on('click', () => {
+    slideout.close();
+  });
+
+  if (data.headHtml) {
+    await Craft.appendHeadHtml(data.headHtml);
+  }
+  if (data.bodyHtml) {
+    await Craft.appendBodyHtml(data.bodyHtml);
+  }
+
+  Craft.initUiElements(slideout.$container);
+
+  return slideout;
+}
+
+/**
+ * Submit the override form and write the result back onto the chip (legacy
+ * `applySettings`): swap the label's contents, then rewrite the hidden-input
+ * JSON with the new `{id, name, handle, description}` config while preserving
+ * the group the manager stamped.
+ */
+async function applyOverrides(
+  chip: HTMLElement,
+  slideout: any,
+  settingsNamespace: string
+): Promise<void> {
+  const $submitBtn = slideout.$container
+    .find('button[type=submit]')
+    .addClass('loading');
+
+  // Clear any errors from a previous submit.
+  slideout.$container
+    .find('.field.has-errors')
+    .each((_i: number, field: HTMLElement) => {
+      const $field = $(field);
+      $field.removeClass('has-errors');
+      $field.children('.input').removeClass('errors prevalidate');
+      $field.children('ul.errors').remove();
+    });
+
+  try {
+    let data;
+
+    try {
+      const response = await Craft.sendActionRequest(
+        'POST',
+        'entry-types/apply-override-settings',
+        {
+          data: {
+            id: chip.dataset.id,
+            settingsNamespace,
+            settings: slideout.$container.serialize(),
+          },
+        }
+      );
+      data = response.data;
+    } catch (e: any) {
+      const errors = e?.response?.data?.errors;
+      if (errors) {
+        Object.entries(errors).forEach(([name, fieldErrors]) => {
+          const $field = slideout.$container.find(`[data-error-key="${name}"]`);
+          if ($field.length) {
+            Craft.ui.addErrorsToField($field, fieldErrors);
+          }
+        });
+      }
+
+      Craft.cp.displayError(e?.response?.data?.message);
+      throw e;
+    }
+
+    // Swap the label's contents (name/handle/description/indicators), keeping
+    // the existing label node so its `id` + aria wiring stay intact — the
+    // modern `craft-chip` markup labels by an `id$="-label"` element, not the
+    // legacy `.chip-label` class the old input replaced wholesale.
+    const label = chip.querySelector<HTMLElement>(':scope > [id$="-label"]');
+    const template = document.createElement('template');
+    template.innerHTML = (data.chipHtml ?? '').trim();
+    const newLabel = template.content.querySelector<HTMLElement>(
+      'craft-chip > [id$="-label"]'
+    );
+    if (label && newLabel) {
+      label.innerHTML = newLabel.innerHTML;
+    }
+
+    // Write the new override config into the hidden input, preserving the
+    // group the manager stamped (legacy `applySettings`).
+    const input = chip.querySelector('input');
+    if (input) {
+      const config = {...data.config};
+      try {
+        const group = JSON.parse(input.value).group;
+        if (group) {
+          config.group = group;
+        }
+      } catch {
+        // Not a JSON value — nothing to preserve.
+      }
+      input.value = JSON.stringify(config);
+    }
+
+    // Re-init any UI within the chip (description info icon, indicator tooltips).
+    Craft.initUiElements($(chip));
+
+    slideout.close();
+    slideout.destroy();
+  } finally {
+    $submitBtn.removeClass('loading');
+  }
+}
diff --git a/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ce.ts b/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ce.ts
new file mode 100644
index 00000000000..35da7888f6d
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ce.ts
@@ -0,0 +1,61 @@
+import {
+  attachChipMoveActions,
+  GroupedEntryTypeManager,
+} from '@/modules/grouped-entry-type-manager/grouped-entry-type-manager';
+import {ControllerElement} from '@/common/web-components';
+
+/**
+ * `<craft-entry-type-manager>` — boots a {@link GroupedEntryTypeManager}
+ * around the server-rendered markup it wraps (the Matrix field settings'
+ * grouped entry type UI), so Twig can emit the element instead of a manual
+ * `new Craft.GroupedEntryTypeManager(...)` boot.
+ *
+ * Attributes:
+ * - `namespace` — the field settings' input namespace.
+ * - `default-columns-id` — id of the container the Default Table Columns
+ *   select is rebuilt into (it lives outside this element, so it's resolved
+ *   lazily at rebuild time).
+ * - `allow-overrides` — whether entry-type chips get the per-field override
+ *   editor (the gear "Settings" chip action).
+ * - `disabled` — read-only settings; the element stays inert (no boot),
+ *   matching the legacy `{% if not readOnly %}` guard.
+ *
+ * The boot gates on the `<template data-entry-type-select>` child rather than
+ * the groups list: the template is the last-rendered child in the Twig, so its
+ * presence also guarantees the groups (and their selects) are fully parsed.
+ */
+export default class CraftEntryTypeManager extends ControllerElement<GroupedEntryTypeManager> {
+  protected readonly rootSelector = ':scope > template[data-entry-type-select]';
+
+  override connectedCallback(): void {
+    if (this.hasAttribute('disabled')) {
+      return;
+    }
+
+    // Attached ahead of the deferred boot so the (stateless) listener is in
+    // place before any child `craft-component-select` boots and wires its
+    // chips — otherwise the initial chips would miss their "Move to
+    // previous/next group" actions.
+    attachChipMoveActions(this);
+
+    super.connectedCallback();
+  }
+
+  protected create(root: HTMLElement): GroupedEntryTypeManager {
+    return new GroupedEntryTypeManager(this, {
+      namespace: this.getAttribute('namespace'),
+      allowOverrides: this.hasAttribute('allow-overrides'),
+      entryTypeSelectHtml: (root as HTMLTemplateElement).innerHTML,
+      defaultColumnsContainer: () => {
+        const id = this.getAttribute('default-columns-id');
+        return id ? document.getElementById(id) : null;
+      },
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-entry-type-manager': CraftEntryTypeManager;
+  }
+}
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
new file mode 100644
index 00000000000..9c021c2c815
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/grouped-entry-type-manager.ts
@@ -0,0 +1,917 @@
+import {
+  Base,
+  DragSort,
+  closestRegistered,
+  nearestSibling,
+  type GarnishBaseSettings,
+} from '@craftcms/garnish';
+import {toHtmlElement} from '@craftcms/garnish/compat';
+import type {
+  CraftActionMenu,
+  CraftReorderButton,
+  ReorderDirection,
+} from '@craftcms/ui';
+import type {
+  CraftComponentSelect,
+  DefineChipActionsEventDetail,
+} from '@/modules/component-select';
+import {editEntryTypeOverrides} from './entry-type-override-settings';
+import {groupedEntryTypeManagerData} from './support';
+
+// `Craft` and `$` (jQuery) remain page globals; the manager leans on the same
+// legacy seams as `craft-component-select` — `Craft.t`/`Craft.ui.icon` for the
+// menu items it builds, `Craft.namespaceId`/`namespaceInputName` for the
+// select-template cloning, and `Craft.sendActionRequest` +
+// `Craft.ui.createSortableCheckboxSelect` (jQuery-returning) for the default
+// table columns rebuild.
+declare const Craft: any;
+declare const $: any;
+
+/**
+ * Settings for {@link GroupedEntryTypeManager}. The legacy
+ * `Craft.GroupedEntryTypeManager` settings keys are still accepted for
+ * compatibility: `$defaultColumnsContainer` (jQuery) maps onto
+ * `defaultColumnsContainer`, and `entryTypeSelectJs` is ignored (the
+ * web-component select self-boots, so there is no JS blob to run).
+ */
+export interface GroupedEntryTypeManagerSettings extends GarnishBaseSettings {
+  /**
+   * The field settings' input namespace (legacy `settings.namespace`), used to
+   * clone the select template and to name the rebuilt default-columns inputs.
+   */
+  namespace?: string | null;
+  /**
+   * Server-rendered `<craft-component-select>` markup for new groups, with
+   * `TEMP_ID` placeholder ids (legacy `settings.entryTypeSelectHtml`).
+   */
+  entryTypeSelectHtml?: string | null;
+  /**
+   * The container the Default Table Columns checkbox select is rebuilt into
+   * (legacy `settings.$defaultColumnsContainer`). May be a lazy resolver —
+   * the container lives outside the manager's markup and may not be parsed
+   * yet when the manager boots.
+   */
+  defaultColumnsContainer?: Element | (() => Element | null) | null;
+  /**
+   * Whether entry-type chips get the per-field override editor (legacy
+   * `EntryTypeSelectInput` `allowOverrides`). Drives the chip "Settings" action
+   * — see {@link handleDefineChipActions}. Set from the `allow-overrides`
+   * attribute on `<craft-entry-type-manager>`.
+   */
+  allowOverrides?: boolean;
+}
+
+/** Group `li` → its {@link Group} instance (latest boot wins). */
+const groupData = new WeakMap<Element, Group>();
+
+/** Containers that already have the `define-chip-actions` listener. */
+const chipActionsAttached = new WeakSet<Element>();
+
+/** The `.entry-type-group` selector, shared by the sibling-group lookups. */
+const GROUP_SELECTOR = 'li.entry-type-group';
+
+/**
+ * Class of the empty sentinel `<li>` appended to each group's chip list. It is
+ * a valid drop target for the cross-group {@link GroupedEntryTypeManager.chipSort}
+ * — giving an end-of-list, and crucially an *empty group*, somewhere to drop —
+ * but is gated out of `canInsertAfter` so a chip can only land *before* it
+ * (legacy `entry-type-group--caboose`).
+ */
+const CABOOSE_CLASS = 'entry-type-group--caboose';
+
+/** The adjacent `.entry-type-group` in the given direction, or `null`. */
+function siblingGroup(
+  group: HTMLElement,
+  direction: 'previous' | 'next'
+): HTMLElement | null {
+  return nearestSibling(group, GROUP_SELECTOR, direction);
+}
+
+/** The manager owning an element, resolved through the `support.ts` registry. */
+function managerFor(el: Element): GroupedEntryTypeManager | null {
+  return closestRegistered(el, groupedEntryTypeManagerData);
+}
+
+/**
+ * Whether a chip's entry type may be overridden per-field. Read statelessly —
+ * chips are wired by their select's own boot, which can run before the manager
+ * boots (see {@link attachChipMoveActions}) — so it prefers the
+ * `<craft-entry-type-manager>` element's `allow-overrides` attribute (always in
+ * the DOM), falling back to the manager's setting for standalone construction.
+ */
+function overridesAllowed(chip: HTMLElement): boolean {
+  const el = chip.closest<HTMLElement>('craft-entry-type-manager');
+  if (el) {
+    return el.hasAttribute('allow-overrides');
+  }
+  return !!managerFor(chip)?.settings.allowOverrides;
+}
+
+/** Rewrite the `group` key in a chip's hidden-input JSON value. */
+function setChipGroupValue(chip: HTMLElement, name: string): void {
+  const input = chip.querySelector('input');
+  if (!input) {
+    return;
+  }
+  try {
+    const value = JSON.parse(input.value);
+    value.group = name;
+    input.value = JSON.stringify(value);
+  } catch {
+    // Not a JSON value (plugin-rendered chip?) — leave it alone.
+  }
+}
+
+/**
+ * Contribute the "Move to previous/next group" items to a chip's action menu
+ * while its `craft-component-select` wires it (legacy
+ * `GroupedEntryTypeSelectInput.defineComponentActions`), positioned before the
+ * select's built-in Replace/Remove. Stateless: the initial `hidden` state
+ * comes from the DOM at wiring time ({@link GroupedEntryTypeManager.refresh}
+ * keeps it current afterwards), and activation resolves the manager through
+ * the `support.ts` registry — so the listener can be attached before the
+ * manager instance exists and survives a destroy/re-boot.
+ */
+function handleDefineChipActions(
+  ev: CustomEvent<DefineChipActionsEventDetail>
+): void {
+  const {chip, actions} = ev.detail;
+  const group = chip.closest<HTMLElement>('li.entry-type-group');
+  if (!group) {
+    return;
+  }
+
+  if (overridesAllowed(chip)) {
+    // The chip's server-rendered "Entry type settings" item edits the *shared*
+    // entry type globally; when per-field overrides are on it's replaced with a
+    // Settings action scoped to this field (legacy
+    // `EntryTypeSelectInput.addComponentInternal`'s `allowOverrides` branch,
+    // which likewise hid `[data-edit-action]`).
+    chip.querySelector('[data-edit-action]')?.setAttribute('hidden', '');
+    actions.push({
+      icon: 'gear',
+      label: Craft.t('app', 'Settings'),
+      onActivate: () => void editEntryTypeOverrides(chip),
+    });
+  }
+
+  const ltr = Craft.orientation !== 'rtl';
+
+  actions.push(
+    {
+      icon: ltr ? 'arrow-left' : 'arrow-right',
+      label: Craft.t('app', 'Move to previous group'),
+      onActivate: () => managerFor(chip)?.moveChipToGroup(chip, 'previous'),
+      attributes: {
+        'data-move-to-previous-group': true,
+        hidden: !siblingGroup(group, 'previous') || null,
+      },
+    },
+    {
+      icon: ltr ? 'arrow-right' : 'arrow-left',
+      label: Craft.t('app', 'Move to next group'),
+      onActivate: () => managerFor(chip)?.moveChipToGroup(chip, 'next'),
+      attributes: {
+        'data-move-to-next-group': true,
+        hidden: !siblingGroup(group, 'next') || null,
+      },
+    }
+  );
+}
+
+/**
+ * Attach the chip move-action listener to a manager container (idempotent).
+ * `<craft-entry-type-manager>` calls this from its `connectedCallback` — ahead
+ * of its deferred boot — so the listener is in place before any child select
+ * boots and wires its chips; {@link GroupedEntryTypeManager.init} calls it too
+ * for standalone (legacy-shim) construction. The listener stays for the
+ * container's lifetime: it is stateless (see {@link handleDefineChipActions}),
+ * so there is nothing to tear down on destroy.
+ */
+export function attachChipMoveActions(container: Element): void {
+  if (chipActionsAttached.has(container)) {
+    return;
+  }
+  chipActionsAttached.add(container);
+  container.addEventListener(
+    'define-chip-actions',
+    handleDefineChipActions as EventListener
+  );
+}
+
+/**
+ * Grouped entry type manager — a port of `Craft.GroupedEntryTypeManager` (+
+ * the cross-group parts of `Craft.GroupedEntryTypeSelectInput`) onto
+ * `@craftcms/garnish` `Base`, orchestrating the self-booting
+ * `<craft-component-select>` elements instead of the legacy jQuery
+ * `ComponentSelectInput` classes. Setup lives in {@link init}, invoked from
+ * the constructor only for the leaf class (`new.target` guard) — the same
+ * construction contract as the other ports.
+ *
+ * The container holds `ul.entry-type-groups > li.entry-type-group[data-name]`,
+ * each with a `.entry-type-group--titlebar` (`span` heading) and a select of
+ * entry-type chips; each group gets a {@link Group}. Manager-level behavior:
+ * the Add Group button, the group `DragSort` (each titlebar's
+ * `<craft-reorder-button>` is the handle), the cross-group chip `DragSort`
+ * (see {@link initChipSort}), cross-group Choose-menu option sync (an entry
+ * type selected in ANY group is hidden in EVERY group's menu — driven from the
+ * selects' bubbling `change` events rather than a select subclass), per-chip
+ * "Move to previous/next group" actions (see {@link attachChipMoveActions}),
+ * group-aware `{id, group}` hidden-input values (each select's `getInputValue`
+ * hook), and the Default Table Columns rebuild on membership changes.
+ *
+ * Cross-group chip drag (legacy `Craft.GroupedEntryTypeSelectInput` +
+ * `entry-type-group--caboose`): a chip can be *dragged* from one group into
+ * another. Each `craft-component-select` runs its own chip `DragSort`, and one
+ * per-select sorter can't drop into a sibling's list, so the manager takes
+ * ownership — each child select {@link CraftComponentSelect.releaseSort
+ * releases its sorter} and the manager runs a single {@link chipSort} across
+ * every group's `ul.components` (see {@link initChipSort} /
+ * {@link syncChipSort}). The menu-based moves stay for touch, where there is
+ * no `DragSort` at all.
+ */
+export class GroupedEntryTypeManager extends Base<GroupedEntryTypeManagerSettings> {
+  container: HTMLElement | null = null;
+  override settings: GroupedEntryTypeManagerSettings = {};
+  groupsList: HTMLUListElement | null = null;
+  addGroupBtn: HTMLElement | null = null;
+  groupSort: any = null;
+  chipSort: any = null;
+
+  constructor(container?: any, settings?: any) {
+    super();
+    if (new.target === GroupedEntryTypeManager) {
+      this.init(container, settings);
+    }
+  }
+
+  init(container: any, settings: any = {}): void {
+    this.container = toHtmlElement(container);
+    this.settings = {
+      namespace: settings?.namespace ?? null,
+      entryTypeSelectHtml: settings?.entryTypeSelectHtml ?? null,
+      // `$defaultColumnsContainer` is the legacy (jQuery) key.
+      defaultColumnsContainer:
+        settings?.defaultColumnsContainer ??
+        toHtmlElement(settings?.$defaultColumnsContainer),
+      allowOverrides: settings?.allowOverrides ?? false,
+    };
+
+    if (!this.container) {
+      return;
+    }
+
+    this.groupsList = this.container.querySelector('ul.entry-type-groups');
+    if (!this.groupsList) {
+      return;
+    }
+
+    // Object back-reference for event-time resolution (the chip actions) and
+    // external consumers; replaces the legacy `$container.data(...)` write —
+    // nothing legacy reads that anymore.
+    groupedEntryTypeManagerData.set(this.container, this);
+
+    // Usually already attached by `<craft-entry-type-manager>`; needed here
+    // for standalone construction.
+    attachChipMoveActions(this.container);
+
+    this.container.addEventListener('change', this.handleChange);
+
+    this.initAddGroupBtn();
+    this.initGroupSort();
+    this.initChipSort();
+
+    for (const el of this.groupEls()) {
+      this.initGroup(el);
+      this.groupSort?.addItems(el);
+    }
+
+    // First cross-group sync once every select has booted (they wire their own
+    // chips first; the union of selected ids isn't complete until then).
+    this.whenSelectsReady(() => this.refresh());
+  }
+
+  /**
+   * Detach listeners and dispose the group sorter so the controller can be
+   * re-booted. The groups' titlebar wiring stays on their DOM (it resolves the
+   * live {@link Group} through `groupData` at event time), as does the
+   * container's `define-chip-actions` listener (stateless; resolves through
+   * the registry, which this clears).
+   */
+  override destroy(): void {
+    this.container?.removeEventListener('change', this.handleChange);
+    this.addGroupBtn?.removeEventListener('click', this.handleAddGroupClick);
+
+    this.groupSort?.destroy?.();
+    this.groupSort = null;
+
+    this.chipSort?.destroy?.();
+    this.chipSort = null;
+
+    if (this.container) {
+      groupedEntryTypeManagerData.delete(this.container);
+    }
+
+    super.destroy();
+  }
+
+  // --- Groups ---------------------------------------------------------------------
+
+  initGroup(el: HTMLElement): Group {
+    return new Group(this, el);
+  }
+
+  /** The group `li`s, in DOM order. */
+  groupEls(): HTMLElement[] {
+    if (!this.groupsList) {
+      return [];
+    }
+    return Array.from(
+      this.groupsList.querySelectorAll<HTMLElement>(
+        ':scope > li.entry-type-group'
+      )
+    );
+  }
+
+  /** The {@link Group} instances, in DOM order. */
+  get groups(): Group[] {
+    return this.groupEls()
+      .map((el) => groupData.get(el))
+      .filter((group): group is Group => group !== undefined);
+  }
+
+  /** Every group's select, in group order. */
+  selects(): CraftComponentSelect[] {
+    return this.groups
+      .map((group) => group.select)
+      .filter((select): select is CraftComponentSelect => select !== null);
+  }
+
+  /** The dashed Add Group button (legacy `$addGroupBtn`), created once. */
+  initAddGroupBtn(): void {
+    if (!this.container) {
+      return;
+    }
+
+    let btn = this.container.querySelector<HTMLElement>(
+      ':scope > .add-group-btn'
+    );
+    if (!btn) {
+      btn = document.createElement('craft-button');
+      btn.setAttribute('type', 'button');
+      btn.setAttribute('icon', 'plus');
+      btn.setAttribute('appearance', 'outline');
+      btn.setAttribute('--command', 'add-group');
+      btn.textContent = Craft.t('app', 'Add Group');
+      this.container.append(btn);
+    }
+    // (Re-)attach even when the button survived a destroy/re-boot — destroy
+    // removed the previous instance's listener.
+    btn.addEventListener('click', this.handleAddGroupClick);
+    this.addGroupBtn = btn;
+
+    // Without a select template there is nothing to add (defensive; the Twig
+    // always renders it on the editable path).
+    this.addGroupBtn.classList.toggle(
+      'hidden',
+      !this.settings.entryTypeSelectHtml
+    );
+  }
+
+  handleAddGroupClick = (): void => {
+    this.addGroup();
+  };
+
+  /**
+   * Drag-to-sort on the groups themselves. The titlebar's
+   * `<craft-reorder-button>` is the handle — scoped so the chips' reorder
+   * buttons inside each group's select can't grab a whole group. On touch
+   * there's no sorter; the reorder button's menu handles moving.
+   */
+  initGroupSort(): void {
+    if (this.groupSort || !Craft.hasMousePointerEvents()) {
+      return;
+    }
+
+    this.groupSort = new DragSort({
+      container: this.groupsList,
+      handle:
+        ':scope > .entry-type-group--titlebar > .entry-type-group--actions > craft-reorder-button',
+      ignoreHandleSelector: null,
+      magnetStrength: 4,
+      helperLagBase: 1.5,
+    });
+    this.groupSort.on('sortChange', () => this.refresh());
+  }
+
+  /**
+   * One `DragSort` spanning every group's chip list (legacy `entryTypeSort`),
+   * so a chip can be dragged between groups. The chips' `<craft-reorder-button>`
+   * is the handle — matching each `craft-component-select`'s own chip sort,
+   * whose ownership the manager takes over ({@link syncChipSort} calls
+   * {@link CraftComponentSelect.releaseSort} on each). No axis lock: groups flow
+   * horizontally while chips stack vertically, so drops are 2-D. The
+   * `entry-type-group--caboose` sentinels are valid drop targets but never
+   * insert-after (so a chip lands *before* them, i.e. inside the group). On
+   * touch there's no sorter; the reorder button's menu handles moving. Items
+   * are (un)registered lazily in {@link syncChipSort}.
+   */
+  initChipSort(): void {
+    if (this.chipSort || !Craft.hasMousePointerEvents()) {
+      return;
+    }
+
+    this.chipSort = new DragSort({
+      container: this.groupsList,
+      handle: 'craft-reorder-button',
+      collapseDraggees: true,
+      magnetStrength: 4,
+      helperLagBase: 1.5,
+      canInsertAfter: (item: HTMLElement) =>
+        !item.classList.contains(CABOOSE_CLASS),
+    });
+    this.chipSort.on('sortChange', () => this.refresh());
+  }
+
+  /** Add Group (legacy `addGroup`): prompt for a name, clone the select template. */
+  addGroup(): void {
+    if (!this.groupsList || !this.settings.entryTypeSelectHtml) {
+      return;
+    }
+
+    const name = prompt(Craft.t('app', 'Group Name'));
+    if (name === null || name === '') {
+      return;
+    }
+
+    const el = document.createElement('li');
+    el.className = 'entry-type-group';
+    el.dataset.name = name;
+
+    const titlebar = document.createElement('div');
+    titlebar.className = 'entry-type-group--titlebar';
+    const heading = document.createElement('span');
+    heading.textContent = name;
+    titlebar.append(heading);
+    el.append(titlebar);
+
+    // Swap the template's namespaced TEMP_ID placeholders for a unique
+    // namespaced id, then let the cloned `<craft-component-select>` self-boot.
+    const namespace = this.settings.namespace ?? null;
+    const tempId = Craft.namespaceId('TEMP_ID', namespace);
+    const id = Craft.namespaceId(
+      `entry-type-select-${Math.floor(Math.random() * 1000000)}`,
+      namespace
+    );
+    el.insertAdjacentHTML(
+      'beforeend',
+      this.settings.entryTypeSelectHtml.replaceAll(tempId, id)
+    );
+
+    this.groupsList.append(el);
+    this.initGroup(el);
+    this.groupSort?.addItems(el);
+
+    // Hide the other groups' selections in the new select (and set its
+    // reorder position) once it has booted.
+    this.whenSelectsReady(() => this.refresh());
+  }
+
+  // --- Chips ----------------------------------------------------------------------
+
+  /**
+   * Move a chip into the adjacent group (legacy
+   * `moveEntryTypeToPreviousGroup`/`moveEntryTypeToNextGroup`): the target
+   * select adopts the chip's `li` — both selects' observers transfer sorter
+   * membership and reorder positions — and the chip's input JSON gets the new
+   * group name.
+   */
+  moveChipToGroup(chip: HTMLElement, direction: 'previous' | 'next'): void {
+    const li = chip.closest('li');
+    const groupEl = chip.closest<HTMLElement>('li.entry-type-group');
+    if (!li || !groupEl) {
+      return;
+    }
+
+    const target = siblingGroup(groupEl, direction);
+    const targetSelect = target ? groupData.get(target)?.select : null;
+    if (!target || !targetSelect) {
+      return;
+    }
+
+    targetSelect.adoptChip(li);
+    setChipGroupValue(chip, target.dataset.name ?? '');
+    this.refresh();
+  }
+
+  // --- Sync -----------------------------------------------------------------------
+
+  /**
+   * Membership somewhere changed (a select's bubbling `change`): re-sync the
+   * cross-group state and rebuild the default table columns (legacy `Group`'s
+   * `componentSelect.on('change')`). Native `change` events from other
+   * controls inside the container (e.g. a Choose menu's search input) are
+   * ignored.
+   */
+  handleChange = (ev: Event): void => {
+    if (!(ev.target as Element | null)?.matches?.('craft-component-select')) {
+      return;
+    }
+    this.refresh();
+    void this.updateDefaultColumns();
+  };
+
+  /**
+   * Recompute all cross-group state: each group's position-dependent state
+   * (via {@link Group.refresh}), and the Choose-menu option visibility — an
+   * entry type selected in ANY group is hidden in EVERY group's menu (legacy
+   * `showOption`/`hideOption` propagation).
+   */
+  refresh(): void {
+    const groups = this.groups;
+    groups.forEach((group, index) => group.refresh(index, groups.length));
+
+    // Keep the cross-group chip sorter's items + cabooses in step with the
+    // current DOM (new/removed chips, added/removed groups).
+    this.syncChipSort();
+
+    // Choose-menu options: hidden iff selected in any group. Option ids are
+    // enumerated from the select's light DOM (the Choose menu's
+    // `craft-action-item[data-id]`s — items inside chips' action menus don't
+    // count), then toggled through the select's public API so its add/create
+    // button visibility stays correct.
+    const selects = this.selects();
+    const selected = new Set(
+      selects.flatMap((select) => select.selectedIds.map(String))
+    );
+    for (const select of selects) {
+      const options = Array.from(
+        select.querySelectorAll<HTMLElement>('craft-action-item[data-id]')
+      ).filter((option) => !option.closest('craft-chip'));
+      for (const option of options) {
+        const id = option.dataset.id ?? '';
+        if (selected.has(id)) {
+          select.hideOption(id);
+        } else {
+          select.showOption(id);
+        }
+      }
+    }
+  }
+
+  /**
+   * Bring {@link chipSort} in line with the current DOM: take sort ownership
+   * from each child select (they defer to this manager-level sorter, like the
+   * legacy `GroupedEntryTypeSelectInput.initComponentSort` no-op), make sure
+   * every group's list ends in a caboose drop-target sentinel, and register
+   * every chip `li` + caboose as a sort item — dropping any that have gone away
+   * (removed chips, a caboose whose group is gone). `$items` is re-sorted into
+   * DOM order afterward so the sorter's prev/next walk stays correct across the
+   * separate group lists. No-op on touch, where {@link chipSort} is `null`.
+   */
+  syncChipSort(): void {
+    if (!this.chipSort) {
+      return;
+    }
+
+    const wanted: HTMLElement[] = [];
+
+    for (const group of this.groups) {
+      const select = group.select;
+      const list = select?.querySelector<HTMLElement>(':scope > ul');
+      if (!select || !list) {
+        continue;
+      }
+
+      // Hand chip sorting to this manager (idempotent — safe every refresh,
+      // and re-releases a select that re-booted its own sorter).
+      select.releaseSort();
+
+      for (const chip of group.chips()) {
+        const li = chip.closest<HTMLElement>('li');
+        if (li) {
+          wanted.push(li);
+        }
+      }
+
+      wanted.push(this.ensureCaboose(list));
+    }
+
+    // Drop stale items first (so a released select's handles are free), then
+    // register newcomers; both calls are idempotent.
+    const keep = new Set(wanted);
+    for (const item of [...(this.chipSort.$items as HTMLElement[])]) {
+      if (!keep.has(item)) {
+        this.chipSort.removeItems(item);
+      }
+    }
+    this.chipSort.addItems(wanted);
+
+    // `addItems` appends newcomers, so re-sort into DOM order for the prev/next
+    // walk (the sorter only re-sorts once a drag actually moves something).
+    (this.chipSort.$items as HTMLElement[]).sort((a, b) =>
+      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+  }
+
+  /**
+   * Ensure `list` (a group's `ul.components`) ends in a
+   * {@link CABOOSE_CLASS} sentinel `<li>`, creating it if missing and keeping
+   * it last (a Choose-menu add appends the new chip after it). Returns the
+   * caboose so {@link syncChipSort} can register it as a drop target.
+   */
+  ensureCaboose(list: HTMLElement): HTMLElement {
+    let caboose = list.querySelector<HTMLElement>(
+      `:scope > li.${CABOOSE_CLASS}`
+    );
+    if (!caboose) {
+      caboose = document.createElement('li');
+      caboose.className = CABOOSE_CLASS;
+      caboose.setAttribute('aria-hidden', 'true');
+    }
+    if (caboose !== list.lastElementChild) {
+      list.append(caboose);
+    }
+    return caboose;
+  }
+
+  /**
+   * Rebuild the Default Table Columns checkbox select from the current
+   * membership (legacy `updateDefaultColumns`), preserving the checked values.
+   */
+  async updateDefaultColumns(): Promise<void> {
+    const {defaultColumnsContainer} = this.settings;
+    const container =
+      typeof defaultColumnsContainer === 'function'
+        ? defaultColumnsContainer()
+        : (defaultColumnsContainer ?? null);
+    if (!container) {
+      return;
+    }
+
+    const values = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input:checked')
+    ).map((input) => input.value);
+
+    try {
+      const {data} = await Craft.sendActionRequest(
+        'POST',
+        'matrix/default-table-column-options',
+        {
+          data: {
+            entryTypeIds: this.selects().flatMap(
+              (select) => select.selectedIds
+            ),
+          },
+        }
+      );
+
+      $(container)
+        .empty()
+        .append(
+          Craft.ui.createSortableCheckboxSelect({
+            name: Craft.namespaceInputName(
+              'defaultTableColumns',
+              this.settings.namespace ?? null
+            ),
+            options: data.options,
+            values,
+          })
+        );
+    } catch {
+      // Same silence as the legacy implementation — the next membership
+      // change retries.
+    }
+  }
+
+  /**
+   * Run `callback` once every group's select reports `initialized` (rAF-polled
+   * — the selects have their own retrying boots), bailing if the container
+   * leaves the document meanwhile.
+   */
+  whenSelectsReady(callback: () => void): void {
+    const poll = (): void => {
+      if (!this.container?.isConnected) {
+        return;
+      }
+      if (this.selects().some((select) => !select.initialized)) {
+        requestAnimationFrame(poll);
+        return;
+      }
+      callback();
+    };
+    poll();
+  }
+}
+
+/**
+ * A single entry type group within a {@link GroupedEntryTypeManager} — the
+ * port of the legacy `Craft.GroupedEntryTypeManager.Group`. Owns the titlebar
+ * controls: a `craft-action-menu` (Rename / Remove) plus a horizontal
+ * `<craft-reorder-button>` that is both the group's drag handle and its Move
+ * forward/backward menu (the groups flow horizontally, wrapping — this
+ * replaces the legacy `.move` handle and the menu's Move backward/forward
+ * items). Also installs the select's `getInputValue` hook so new chips carry
+ * `{id, group}` JSON (legacy `GroupedEntryTypeSelectInput.renderSettings`).
+ *
+ * The titlebar wiring is created only when missing (a destroy/re-boot keeps
+ * the DOM), and its handlers resolve the *live* Group through `groupData` at
+ * event time, so a re-booted manager's instances take over seamlessly.
+ */
+export class Group extends Base {
+  manager: GroupedEntryTypeManager;
+  container: HTMLElement;
+
+  constructor(manager?: GroupedEntryTypeManager, container?: any) {
+    super();
+    // Assigned here (not just in init) so TS sees them as definitely assigned.
+    this.manager = manager!;
+    this.container = toHtmlElement(container)!;
+    if (new.target === Group) {
+      this.init(manager!, container);
+    }
+  }
+
+  init(manager: GroupedEntryTypeManager, container: any): void {
+    this.manager = manager;
+    this.container = toHtmlElement(container)!;
+
+    groupData.set(this.container, this);
+
+    const titlebar = this.container.querySelector<HTMLElement>(
+      ':scope > .entry-type-group--titlebar'
+    );
+    if (titlebar && !titlebar.querySelector('.entry-type-group--actions')) {
+      const actions = document.createElement('div');
+      actions.className = 'entry-type-group--actions';
+      actions.append(this.buildActionMenu(), this.buildReorderButton());
+      titlebar.append(actions);
+    }
+
+    // New chips' hidden inputs carry `{id, group}` JSON. Resolved live so
+    // renames and group moves are always reflected.
+    const select = this.select;
+    if (select) {
+      select.getInputValue = (id) => {
+        const numeric = Number(id);
+        return JSON.stringify({
+          id: id !== '' && !Number.isNaN(numeric) ? numeric : id,
+          group: this.container.dataset.name ?? '',
+        });
+      };
+    }
+  }
+
+  /** The group's name (the `data-name` attribute, kept current by {@link rename}). */
+  get name(): string {
+    return this.container.dataset.name ?? '';
+  }
+
+  /** The group's `craft-component-select`, or `null` (e.g. mid-parse). */
+  get select(): CraftComponentSelect | null {
+    return this.container.querySelector('craft-component-select');
+  }
+
+  /** The group's chips, skipping any mid removal-fade. */
+  chips(): HTMLElement[] {
+    return this.select?.chips ?? [];
+  }
+
+  /** The titlebar's Rename / Remove menu, in data-driven `.actions` mode. */
+  buildActionMenu(): CraftActionMenu {
+    // No global tag-map entry for the cp components, hence the cast.
+    const menu = document.createElement('craft-action-menu') as CraftActionMenu;
+    const container = this.container;
+
+    // Items generated from `.actions` live in the menu's content container,
+    // which doesn't auto-close on click — dispatch `close-overlay` manually,
+    // mirroring `Craft.addActionsToChip`.
+    const close = (ev: Event): void => {
+      (ev.target as Element | null)?.dispatchEvent(
+        new Event('close-overlay', {bubbles: true})
+      );
+    };
+
+    menu.actions = [
+      {
+        icon: 'pencil',
+        label: Craft.t('app', 'Rename'),
+        onClick: (ev: Event) => {
+          close(ev);
+          groupData.get(container)?.rename();
+        },
+      },
+      {type: 'hr'},
+      {
+        icon: 'trash',
+        label: Craft.t('app', 'Remove'),
+        variant: 'danger',
+        onClick: (ev: Event) => {
+          close(ev);
+          groupData.get(container)?.remove();
+        },
+      },
+    ];
+
+    return menu;
+  }
+
+  /**
+   * The titlebar's `<craft-reorder-button>` — drag handle + move menu.
+   * `position`/`disabled` are kept current by {@link refresh}.
+   */
+  buildReorderButton(): CraftReorderButton {
+    const btn = document.createElement(
+      'craft-reorder-button'
+    ) as CraftReorderButton;
+    const container = this.container;
+    btn.setAttribute('orientation', 'horizontal');
+    btn.addEventListener('reorder', (event: Event) => {
+      const {direction} = (event as CustomEvent<{direction: ReorderDirection}>)
+        .detail;
+      groupData.get(container)?.move(direction);
+    });
+    return btn;
+  }
+
+  /** Rename (legacy `showNamePrompt`): heading, `data-name`, chip JSON. */
+  rename(): void {
+    const name = prompt(Craft.t('app', 'Group Name'), this.name);
+    if (name === null || name === '') {
+      return;
+    }
+
+    this.container.dataset.name = name;
+
+    const heading = this.container.querySelector(
+      ':scope > .entry-type-group--titlebar > span'
+    );
+    if (heading) {
+      heading.textContent = name;
+    }
+
+    for (const chip of this.chips()) {
+      setChipGroupValue(chip, name);
+    }
+  }
+
+  /**
+   * Remove (legacy `remove`): drop the `li` — its select tears itself down on
+   * disconnect — then restore its selections to the other groups' Choose menus
+   * and rebuild the default table columns.
+   */
+  remove(): void {
+    this.manager.groupSort?.removeItems(this.container);
+    this.container.remove();
+    this.manager.refresh();
+    void this.manager.updateDefaultColumns();
+    this.destroy();
+  }
+
+  /** Move the group one slot toward the start (`'up'`) or the end (`'down'`). */
+  move(direction: ReorderDirection): void {
+    const sibling = siblingGroup(
+      this.container,
+      direction === 'up' ? 'previous' : 'next'
+    );
+    if (!sibling) {
+      return;
+    }
+
+    if (direction === 'up') {
+      sibling.before(this.container);
+    } else {
+      sibling.after(this.container);
+    }
+
+    this.manager.refresh();
+  }
+
+  /**
+   * Recompute this group's position-dependent state: the reorder button's
+   * `position`/`disabled`, the chips' `{group}` hidden-input value (so a chip
+   * dragged in from another group picks up this group's name — legacy
+   * `refresh`), and the chips' "Move to previous/next group" item visibility
+   * (hidden at the ends).
+   */
+  refresh(index: number, total: number): void {
+    const btn = this.container.querySelector(
+      ':scope > .entry-type-group--titlebar craft-reorder-button'
+    );
+    btn?.toggleAttribute('disabled', total < 2);
+    btn?.setAttribute(
+      'position',
+      index === 0 ? 'first' : index === total - 1 ? 'last' : 'middle'
+    );
+
+    for (const chip of this.chips()) {
+      setChipGroupValue(chip, this.name);
+      chip
+        .querySelector('[data-move-to-previous-group]')
+        ?.toggleAttribute('hidden', index === 0);
+      chip
+        .querySelector('[data-move-to-next-group]')
+        ?.toggleAttribute('hidden', index === total - 1);
+    }
+  }
+}
diff --git a/resources/js/modules/grouped-entry-type-manager/index.ts b/resources/js/modules/grouped-entry-type-manager/index.ts
new file mode 100644
index 00000000000..45047a3f29a
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/index.ts
@@ -0,0 +1,28 @@
+import {Group, GroupedEntryTypeManager} from './grouped-entry-type-manager';
+import CraftEntryTypeManager from '@/modules/grouped-entry-type-manager/grouped-entry-type-manager.ce';
+import {defineElement} from '@/common/web-components';
+
+// Re-expose the Group sub-class on the constructor, as the legacy bundle did
+// (`Craft.GroupedEntryTypeManager.Group`).
+(GroupedEntryTypeManager as any).Group = Group;
+
+// Assign onto the legacy `Craft` global so any remaining
+// `new Craft.GroupedEntryTypeManager(...)` boots (plugins) keep working — the
+// legacy GroupedEntryTypeManager.js/GroupedEntryTypeSelectInput.js are removed
+// from the legacy bundle. Nothing subclasses it via legacy `.extend()`, so —
+// like `SortableCheckboxSelect` — it needs no compat shim and is assigned as
+// the modern ES class directly. (`Craft.GroupedEntryTypeSelectInput` is gone
+// without replacement: the cross-group select behavior now lives in the
+// manager + `craft-component-select`, not a select subclass.)
+const craft = (window as any).Craft ?? ((window as any).Craft = {});
+craft.GroupedEntryTypeManager = GroupedEntryTypeManager;
+
+defineElement('craft-entry-type-manager', CraftEntryTypeManager);
+
+export {GroupedEntryTypeManager, Group, CraftEntryTypeManager};
+export {attachChipMoveActions} from './grouped-entry-type-manager';
+export type {GroupedEntryTypeManagerSettings} from './grouped-entry-type-manager';
+export {groupedEntryTypeManagerData} from './support';
+
+// The Vue components in ./components (EntryTypeChip.vue, EntryTypeSelect.vue)
+// are a separate, Inertia-page concern and are imported directly by path.
diff --git a/resources/js/modules/grouped-entry-type-manager/support.ts b/resources/js/modules/grouped-entry-type-manager/support.ts
new file mode 100644
index 00000000000..a5daf299b56
--- /dev/null
+++ b/resources/js/modules/grouped-entry-type-manager/support.ts
@@ -0,0 +1,14 @@
+import type {GroupedEntryTypeManager} from './grouped-entry-type-manager';
+
+/**
+ * WeakMap replacing the legacy jQuery `$container.data('entryTypeManager')`
+ * back-reference (matching the sortable-checkbox-select / garnish pattern).
+ * Keyed by the manager's container element; the chips' "Move to previous/next
+ * group" actions resolve their manager through it at activation time (see
+ * `handleDefineChipActions`), which is what lets a chip keep working after its
+ * manager is destroyed and re-booted. See the module README.
+ */
+export const groupedEntryTypeManagerData = new WeakMap<
+  Element,
+  GroupedEntryTypeManager
+>();
diff --git a/resources/js/modules/listbox/listbox.ts b/resources/js/modules/listbox/listbox.ts
index adb0ff4e2e8..b620b6c5736 100644
--- a/resources/js/modules/listbox/listbox.ts
+++ b/resources/js/modules/listbox/listbox.ts
@@ -29,6 +29,7 @@
 
 import {Base, type GarnishBaseSettings} from '@craftcms/garnish';
 import {containerListboxes} from './support';
+import {toHtmlElement} from '@craftcms/garnish/compat';
 
 /** No-op default for the `onChange` setting (native replacement for `$.noop`). */
 const noop = (): void => {};
@@ -132,7 +133,7 @@ export class Listbox extends Base<ListboxSettings> {
 
     // Unwrap a jQuery-collection container to its first native element. Legacy
     // callers pass `$container`; this class also accepts a raw Element.
-    const containerEl = unwrapJq(containerArg);
+    const containerEl = toHtmlElement(containerArg);
 
     if (containerEl) {
       this.$container = containerEl;
@@ -245,17 +246,6 @@ export class Listbox extends Base<ListboxSettings> {
   }
 }
 
-/**
- * Unwrap a jQuery collection (truthy `.jquery`) to its first native element,
- * pass a native `Element` through, and return `null` for anything else.
- */
-function unwrapJq(value: unknown): HTMLElement | null {
-  if (value && typeof value === 'object' && (value as any).jquery) {
-    return ((value as any)[0] as HTMLElement | undefined) ?? null;
-  }
-  return value instanceof Element ? (value as HTMLElement) : null;
-}
-
 function isPlainObject(val: unknown): val is Record<string, unknown> {
   return (
     typeof val === 'object' &&
diff --git a/resources/js/modules/sortable-checkbox-select/README.md b/resources/js/modules/sortable-checkbox-select/README.md
index 8080873cb67..b6fe91de697 100644
--- a/resources/js/modules/sortable-checkbox-select/README.md
+++ b/resources/js/modules/sortable-checkbox-select/README.md
@@ -64,7 +64,7 @@ favor of the `support.ts` WeakMap alone.
 
 - `sortable-checkbox-select.ts` — the `SortableCheckboxSelect` class and the
   `Item` class.
-- `sortable-checkbox-select.wc.ts` — `<craft-sortable-checkbox-select>`, the
+- `sortable-checkbox-select.ce.ts` — `<craft-sortable-checkbox-select>`, the
   self-booting custom element.
 - `support.ts` — the `.data()`-mirror WeakMap.
 - `index.ts` — assigns `window.Craft.SortableCheckboxSelect` (+ `.Item`) and
diff --git a/resources/js/modules/sortable-checkbox-select/sortable-checkbox-select.ts b/resources/js/modules/sortable-checkbox-select/sortable-checkbox-select.ts
index 3bc563b4abd..bd85266e3ed 100644
--- a/resources/js/modules/sortable-checkbox-select/sortable-checkbox-select.ts
+++ b/resources/js/modules/sortable-checkbox-select/sortable-checkbox-select.ts
@@ -166,6 +166,21 @@ export class SortableCheckboxSelect extends Base {
     super.destroy();
   }
 
+  /**
+   * Whether an item is checked. The checkbox is either a direct-child native
+   * `<input type=checkbox>` (legacy markup) or an input slotted inside a
+   * `<craft-checkbox>`. Always read the native input — never the
+   * `craft-checkbox` host: the host's `checked` is Lion state that updates in
+   * Lion's own `change` listener, which can run *after* ours (making every
+   * read one toggle stale), and it isn't adopted yet when this runs at boot.
+   * The input's checkedness is already current when `change` fires.
+   */
+  isItemChecked(item: HTMLElement): boolean {
+    return !!item.querySelector<HTMLInputElement>(
+      ':scope > input[type=checkbox], :scope > craft-checkbox input[type=checkbox]'
+    )?.checked;
+  }
+
   /**
    * Recompute every item's reorder state: a button is enabled only when its item is
    * checked and 2+ items are checked overall. Enabled ⇒ in the sorter (draggable);
@@ -184,9 +199,7 @@ export class SortableCheckboxSelect extends Base {
       )
     );
 
-    const isChecked = (item: HTMLElement): boolean =>
-      !!item.querySelector<HTMLInputElement>(':scope > input[type=checkbox]')
-        ?.checked;
+    const isChecked = (item: HTMLElement): boolean => this.isItemChecked(item);
 
     const enableReorder = items.filter(isChecked).length >= 2;
 
@@ -229,11 +242,7 @@ export class SortableCheckboxSelect extends Base {
       )
     );
 
-    const checkedFlags = items.map(
-      (item) =>
-        !!item.querySelector<HTMLInputElement>(':scope > input[type=checkbox]')
-          ?.checked
-    );
+    const checkedFlags = items.map((item) => this.isItemChecked(item));
     const firstCheckedIndex = checkedFlags.indexOf(true);
     const lastCheckedIndex = checkedFlags.lastIndexOf(true);
 
@@ -279,7 +288,11 @@ export class Item extends Base {
   init(select: SortableCheckboxSelect, item: any): void {
     this.select = select;
     this.$item = $(item);
-    this.$checkbox = this.$item.children('input[type=checkbox]');
+    // The checkbox is either a direct-child native input (legacy markup) or a
+    // slotted input inside a `<craft-checkbox>`, so match by descendant rather
+    // than direct child — otherwise the change listener never binds and
+    // checking items never enables reordering.
+    this.$checkbox = this.$item.find('input[type=checkbox]').first();
 
     // Always-present drag handle + Move up/down menu, before the checkbox.
     this.reorderBtn = document.createElement('craft-reorder-button');
diff --git a/resources/js/pages/settings/fields/Edit.vue b/resources/js/pages/settings/fields/Edit.vue
index dafad782439..a4d15a06d0d 100644
--- a/resources/js/pages/settings/fields/Edit.vue
+++ b/resources/js/pages/settings/fields/Edit.vue
@@ -13,7 +13,10 @@
   import Pane from '@/common/components/Pane.vue';
   import {useInputGenerator} from '@/common/composables/useInputGenerator';
   import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
-  import {store} from '@/actions/CraftCms/Cms/Http/Controllers/FieldsController';
+  import {
+    renderSettings,
+    store,
+  } from '@/actions/CraftCms/Cms/Http/Controllers/FieldsController';
 
   interface FieldTypeOption {
     value: string;
@@ -95,7 +98,7 @@
       settingsFragment.value = null;
 
       try {
-        const {data} = await actionClient.post('fields/render-settings', {
+        const {data} = await actionClient.post(renderSettings().url, {
           type,
           oldType,
           settings,
@@ -304,7 +307,10 @@
             <div v-if="settingsLoading" class="flex justify-center p-4">
               <craft-spinner></craft-spinner>
             </div>
-            <HtmlFragmentRenderer :fragment="settingsFragment" />
+            <HtmlFragmentRenderer
+              as="craft-field-group"
+              :fragment="settingsFragment"
+            />
           </div>
         </div>
       </craft-field-group>
diff --git a/resources/templates/_components/auth/methods/RecoveryCodes/form.twig b/resources/templates/_components/auth/methods/RecoveryCodes/form.twig
index d6a257da86f..8934ee7beaf 100644
--- a/resources/templates/_components/auth/methods/RecoveryCodes/form.twig
+++ b/resources/templates/_components/auth/methods/RecoveryCodes/form.twig
@@ -16,7 +16,6 @@
                 }) }}
                 {{ forms.submitButton({
                     label: 'Verify'|t('app'),
-                    spinner: true,
                 }) }}
             </div>
         {% endblock %}
diff --git a/resources/templates/_components/auth/methods/RecoveryCodes/setup.twig b/resources/templates/_components/auth/methods/RecoveryCodes/setup.twig
index ba0bb5fdd59..989abbfc538 100644
--- a/resources/templates/_components/auth/methods/RecoveryCodes/setup.twig
+++ b/resources/templates/_components/auth/methods/RecoveryCodes/setup.twig
@@ -6,7 +6,6 @@
 
 {{ forms.submitButton({
     label: 'Generate recovery codes'|t('app'),
-    spinner: true,
 }) }}
 
 <script type="module">
diff --git a/resources/templates/_components/auth/methods/TOTP/form.twig b/resources/templates/_components/auth/methods/TOTP/form.twig
index fa7375c3119..cf157cd3fc4 100644
--- a/resources/templates/_components/auth/methods/TOTP/form.twig
+++ b/resources/templates/_components/auth/methods/TOTP/form.twig
@@ -19,7 +19,6 @@
         }) }}
         {{ forms.submitButton({
           label: 'Verify'|t('app'),
-          spinner: true,
         }) }}
       </div>
     {% endblock %}
diff --git a/resources/templates/_components/fieldtypes/Addresses/settings.twig b/resources/templates/_components/fieldtypes/Addresses/settings.twig
index cddf1a83c2e..ca50ac1b5c5 100644
--- a/resources/templates/_components/fieldtypes/Addresses/settings.twig
+++ b/resources/templates/_components/fieldtypes/Addresses/settings.twig
@@ -32,30 +32,28 @@
   disabled: readOnly,
 }) }}
 
-{% embed '_includes/forms/field.twig' with {
-  label: 'View Mode'|t('app'),
-  instructions: 'Choose how nested {type} should be presented to authors.'|t('app', {
-    type: 'addresses'|t('app'),
-  }),
-} %}
-  {% block input %}
-    <div class="flex items-start gap-l fieldtoggle" data-target-prefix="view-mode--">
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/cards.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'cards', {
-          checked: field.viewMode == 'cards',
-          disabled: readOnly,
-        }) }}
-        {{ 'Cards'|t('app') }}
-      </label>
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/index.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'index', {
-          checked: field.viewMode == 'index',
-          disabled: readOnly,
-        }) }}
-        {{ 'Index'|t('app') }}
-      </label>
-    </div>
-  {% endblock %}
-{% endembed %}
+<craft-field
+  label="{{ 'View Mode'|t }}" help-text="{{ 'Choose how nested {type} should be presented to authors.' |t('app', {
+  type: 'addresses'|t('app'),
+}) }}"
+>
+
+  <div class="flex items-start gap-l fieldtoggle mt-1" data-target-prefix="view-mode--" slot="input">
+    <label class="nowrap">
+      <img class="mb-xs" src="{{ baseIconsUrl }}/cards.svg" width="80" height="60" alt="">
+      {{ input('radio', 'viewMode', 'cards', {
+        checked: field.viewMode == 'cards',
+        disabled: readOnly,
+      }) }}
+      {{ 'Cards'|t('app') }}
+    </label>
+    <label class="nowrap">
+      <img class="mb-xs" src="{{ baseIconsUrl }}/index.svg" width="80" height="60" alt="">
+      {{ input('radio', 'viewMode', 'index', {
+        checked: field.viewMode == 'index',
+        disabled: readOnly,
+      }) }}
+      {{ 'Index'|t('app') }}
+    </label>
+  </div>
+</craft-field>
diff --git a/resources/templates/_components/fieldtypes/Assets/settings.twig b/resources/templates/_components/fieldtypes/Assets/settings.twig
index 83220cea643..84eb0daa333 100644
--- a/resources/templates/_components/fieldtypes/Assets/settings.twig
+++ b/resources/templates/_components/fieldtypes/Assets/settings.twig
@@ -5,11 +5,12 @@
   {% embed '_includes/forms/field.twig' with config %}
     {% block input %}
       {% import '_includes/forms.twig' as forms %}
-      <div class="flex flex-nowrap">
+      <div class="flex flex-nowrap items-center gap-2">
         <div>
-          {{ forms.select({
+          {{ forms.selectField({
             id: "#{config.id}-source",
             name: "#{config.name}Source",
+            label: 'Source'|t,
             options: config.sourceOptions,
             value: config.sourceValue,
             describedBy: describedBy,
@@ -17,8 +18,9 @@
           }) }}
         </div>
         <div class="flex-grow">
-          {{ forms.text({
+          {{ forms.textField({
             class: 'ltr',
+            label: 'Subpath'|t,
             id: "#{config.id}-subpath",
             name: "#{config.name}Subpath",
             value: config.subpathValue,
@@ -57,58 +59,62 @@
       id: 'restricted-location-settings',
       class: not field.restrictLocation ? 'hidden' : false,
     } %}
-      {{ _self.uploadLocationField({
-        id: 'restricted-location',
-        label: 'Asset Location'|t('app'),
-        instructions: 'The location where assets can be selected from.'|t('app'),
-        tip: dynamicPathTip,
-        name: 'restrictedLocation',
-        sourceOptions: sourceOptions,
-        sourceValue: field.restrictedLocationSource,
-        subpathValue: field.restrictedLocationSubpath,
-        errors: field.errors.get('restrictedLocationSubpath'),
-      }) }}
-
-      {{ forms.lightswitchField({
-        label: 'Allow subfolders'|t('app'),
-        name: 'allowSubfolders',
-        on: field.allowSubfolders,
-        toggle: 'allow-subfolders-settings',
-      }) }}
-
-      {% tag('div') with {
-        id: 'allow-subfolders-settings',
-        class: not field.allowSubfolders ? 'hidden' : false,
-      } %}
-        {{ forms.textField({
-          class: 'ltr',
-          name: 'restrictedDefaultUploadSubpath',
-          label: 'Default Upload Location'|t('app'),
-          value: field.restrictedDefaultUploadSubpath,
-          instructions: 'Where assets should be stored (relative to **Asset Location**) when they are uploaded directly to the field.'|t('app'),
+      <craft-field-group>
+        {{ _self.uploadLocationField({
+          id: 'restricted-location',
+          label: 'Asset Location'|t('app'),
+          instructions: 'The location where assets can be selected from.'|t('app'),
           tip: dynamicPathTip,
-          placeholder: 'path/to/subfolder'|t('app'),
+          name: 'restrictedLocation',
+          sourceOptions: sourceOptions,
+          sourceValue: field.restrictedLocationSource,
+          subpathValue: field.restrictedLocationSubpath,
+          errors: field.errors.get('restrictedLocationSubpath'),
+        }) }}
+
+        {{ forms.lightswitchField({
+          label: 'Allow subfolders'|t('app'),
+          name: 'allowSubfolders',
+          on: field.allowSubfolders,
+          toggle: 'allow-subfolders-settings',
         }) }}
-      {% endtag %}
+
+        {% tag('div') with {
+          id: 'allow-subfolders-settings',
+          class: not field.allowSubfolders ? 'hidden' : false,
+        } %}
+          {{ forms.textField({
+            class: 'ltr',
+            name: 'restrictedDefaultUploadSubpath',
+            label: 'Default Upload Location'|t('app'),
+            value: field.restrictedDefaultUploadSubpath,
+            instructions: 'Where assets should be stored (relative to **Asset Location**) when they are uploaded directly to the field.'|t('app'),
+            tip: dynamicPathTip,
+            placeholder: 'path/to/subfolder'|t('app'),
+          }) }}
+        {% endtag %}
+      </craft-field-group>
     {% endtag %}
 
     {% tag('div') with {
       id: 'unrestricted-location-settings',
       class: field.restrictLocation ? 'hidden' : false,
     } %}
-      {{ block('sourcesField') }}
-
-      {{ _self.uploadLocationField({
-        id: 'default-upload-location',
-        label: 'Default Upload Location'|t('app'),
-        instructions: 'Where assets should be stored when they are uploaded directly to the field.'|t('app'),
-        tip: dynamicPathTip,
-        name: 'defaultUploadLocation',
-        sourceOptions: sourceOptions,
-        sourceValue: field.defaultUploadLocationSource,
-        subpathValue: field.defaultUploadLocationSubpath,
-        errors: field.errors.get('defaultUploadLocationSubpath'),
-      }) }}
+      <craft-field-group>
+        {{ block('sourcesField') }}
+
+        {{ _self.uploadLocationField({
+          id: 'default-upload-location',
+          label: 'Default Upload Location'|t('app'),
+          instructions: 'Where assets should be stored when they are uploaded directly to the field.'|t('app'),
+          tip: dynamicPathTip,
+          name: 'defaultUploadLocation',
+          sourceOptions: sourceOptions,
+          sourceValue: field.defaultUploadLocationSource,
+          subpathValue: field.defaultUploadLocationSubpath,
+          errors: field.errors.get('defaultUploadLocationSubpath'),
+        }) }}
+      </craft-field-group>
     {% endtag %}
 
     <hr>
@@ -145,6 +151,7 @@
       id="restrict-allowed-types"{% if not field.restrictFiles %} class="hidden indent"{% endif %}
       data-error-key="allowedKinds"
     >
+      <legend class="font-bold">{{ 'Allowed Kinds'|t }}</legend>
       {% for option in field.getFileKindOptions() %}
         {{ forms.checkboxField({
           label: option.label,
diff --git a/resources/templates/_components/fieldtypes/Date/settings.twig b/resources/templates/_components/fieldtypes/Date/settings.twig
index 56dd19f1eff..5d4314324dd 100644
--- a/resources/templates/_components/fieldtypes/Date/settings.twig
+++ b/resources/templates/_components/fieldtypes/Date/settings.twig
@@ -2,71 +2,71 @@
 
 {% set targetPrefix = "datetime#{random()}-" %}
 {{ forms.radioGroupField({
-    id: 'dateTime',
-    name: 'dateTime',
-    options: options,
-    value: value,
-    toggle: true,
-    targetPrefix: ".#{targetPrefix}",
-    tip: value == 'showTime' ? 'Time fields are better suited for managing Time-only values.'|t('app'),
-    disabled: readOnly,
+  id: 'dateTime',
+  name: 'dateTime',
+  options: options,
+  value: value,
+  toggle: true,
+  targetPrefix: ".#{targetPrefix}",
+  tip: value == 'showTime' ? 'Time fields are better suited for managing Time-only values.'|t('app'),
+  disabled: readOnly,
 }) }}
 
 {{ forms.selectField({
-    fieldClass: [
-        "#{targetPrefix}showTime",
-        "#{targetPrefix}showBoth",
-        value == 'showDate' ? 'hidden',
-    ]|filter,
-    label: "Minute Increment"|t('app'),
-    instructions: 'The number of minutes that timepicker options should be incremented by. (Authors can enter a specific time manually.)'|t('app'),
-    id: 'minuteIncrement',
-    name: 'minuteIncrement',
-    options: incrementOptions,
-    value: field.minuteIncrement ? field.minuteIncrement : 30,
-    disabled: readOnly,
+  fieldClass: [
+    "#{targetPrefix}showTime",
+    "#{targetPrefix}showBoth",
+    value == 'showDate' ? 'hidden',
+  ]|filter,
+  label: "Minute Increment"|t('app'),
+  instructions: 'The number of minutes that timepicker options should be incremented by. (Authors can enter a specific time manually.)'|t('app'),
+  id: 'minuteIncrement',
+  name: 'minuteIncrement',
+  options: incrementOptions,
+  value: field.minuteIncrement ? field.minuteIncrement : 30,
+  disabled: readOnly,
 }) }}
 
 {{ forms.lightswitchField({
-    fieldClass: [
-        "#{targetPrefix}showTime",
-        "#{targetPrefix}showBoth",
-        value == 'showDate' ? 'hidden',
-    ]|filter,
-    label: 'Show Time Zone'|t('app'),
-    instructions: 'Whether authors should be able to choose which time zone the time is in.'|t('app'),
-    id: 'show-time-zone',
-    name: 'showTimeZone',
-    on: field.showTimeZone,
-    disabled: readOnly,
+  fieldClass: [
+    "#{targetPrefix}showTime",
+    "#{targetPrefix}showBoth",
+    value == 'showDate' ? 'hidden',
+  ]|filter,
+  label: 'Show Time Zone'|t('app'),
+  instructions: 'Whether authors should be able to choose which time zone the time is in.'|t('app'),
+  id: 'show-time-zone',
+  name: 'showTimeZone',
+  on: field.showTimeZone,
+  disabled: readOnly,
 }) }}
 
 {{ forms.dateField({
-    fieldClass: [
-        "#{targetPrefix}showDate",
-        "#{targetPrefix}showBoth",
-        value == 'showTime' ? 'hidden',
-    ]|filter,
-    label: 'Min Date'|t('app'),
-    id: 'min',
-    name: 'min',
-    value: field.min,
-    errors: field.errors.get('min'),
-    data: {'error-key': 'min'},
-    disabled: readOnly,
+  fieldClass: [
+    "#{targetPrefix}showDate",
+    "#{targetPrefix}showBoth",
+    value == 'showTime' ? 'hidden',
+  ]|filter,
+  label: 'Min Date'|t('app'),
+  id: 'min',
+  name: 'min',
+  value: field.min,
+  errors: field.errors.get('min'),
+  data: {'error-key': 'min'},
+  disabled: readOnly,
 }) }}
 
 {{ forms.dateField({
-    fieldClass: [
-        "#{targetPrefix}showDate",
-        "#{targetPrefix}showBoth",
-        value == 'showTime' ? 'hidden',
-    ]|filter,
-    label: 'Max Date'|t('app'),
-    id: 'max',
-    name: 'max',
-    value: field.max,
-    errors: field.errors.get('max'),
-    data: {'error-key': 'max'},
-    disabled: readOnly,
+  fieldClass: [
+    "#{targetPrefix}showDate",
+    "#{targetPrefix}showBoth",
+    value == 'showTime' ? 'hidden',
+  ]|filter,
+  label: 'Max Date'|t('app'),
+  id: 'max',
+  name: 'max',
+  value: field.max,
+  errors: field.errors.get('max'),
+  data: {'error-key': 'max'},
+  disabled: readOnly,
 }) }}
diff --git a/resources/templates/_components/fieldtypes/Entries/settings.twig b/resources/templates/_components/fieldtypes/Entries/settings.twig
index 50471f56d4d..3f10283cca0 100644
--- a/resources/templates/_components/fieldtypes/Entries/settings.twig
+++ b/resources/templates/_components/fieldtypes/Entries/settings.twig
@@ -2,31 +2,31 @@
 {% import '_includes/forms.twig' as forms %}
 
 {% block fieldSettings %}
-    {{ block('sourcesField') }}
-    {{ block('selectionConditionField') }}
+  {{ block('sourcesField') }}
+  {{ block('selectionConditionField') }}
 
-    {{ forms.lightswitchField({
-        label: 'Show unpermitted sections'|t('app'),
-        instructions: 'Whether to show sections that the user doesn’t have permission to view.'|t('app'),
-        id: 'showUnpermittedSections',
-        name: 'showUnpermittedSections',
-        on: field.showUnpermittedSections,
-    }) }}
+  {{ forms.lightswitchField({
+    label: 'Show unpermitted sections'|t('app'),
+    instructions: 'Whether to show sections that the user doesn’t have permission to view.'|t('app'),
+    id: 'showUnpermittedSections',
+    name: 'showUnpermittedSections',
+    on: field.showUnpermittedSections,
+  }) }}
 
-    {{ forms.lightswitchField({
-        label: 'Show unpermitted entries'|t('app'),
-        instructions: 'Whether to show entries that the user doesn’t have permission to view, per the “View other users’ entries” permission.'|t('app'),
-        id: 'showUnpermittedEntries',
-        name: 'showUnpermittedEntries',
-        on: field.showUnpermittedEntries,
-    }) }}
+  {{ forms.lightswitchField({
+    label: 'Show unpermitted entries'|t('app'),
+    instructions: 'Whether to show entries that the user doesn’t have permission to view, per the “View other users’ entries” permission.'|t('app'),
+    id: 'showUnpermittedEntries',
+    name: 'showUnpermittedEntries',
+    on: field.showUnpermittedEntries,
+  }) }}
 
-    {{ block('maintainHierarchy') }}
-    {{ block('limitFields') }}
-    {{ block('defaultPlacementField') }}
-    {{ block('viewModeField') }}
-    {{ block('selectionLabelField') }}
-    {{ block('showSearchInputField') }}
-    {{ block('validateRelatedElementsField') }}
-    {{ block('advancedSettings') }}
+  {{ block('maintainHierarchy') }}
+  {{ block('limitFields') }}
+  {{ block('defaultPlacementField') }}
+  {{ block('viewModeField') }}
+  {{ block('selectionLabelField') }}
+  {{ block('showSearchInputField') }}
+  {{ block('validateRelatedElementsField') }}
+  {{ block('advancedSettings') }}
 {% endblock %}
diff --git a/resources/templates/_components/fieldtypes/Link/link-settings.twig b/resources/templates/_components/fieldtypes/Link/link-settings.twig
index 7ebf69a40b9..bdf828e68dd 100644
--- a/resources/templates/_components/fieldtypes/Link/link-settings.twig
+++ b/resources/templates/_components/fieldtypes/Link/link-settings.twig
@@ -7,7 +7,9 @@
 {% set showLabelFieldErrors = namespace ? field.errors.get("#{namespace}ShowLabelField") : field.errors.get('showLabelField') %}
 {% set advancedFieldsErrors = namespace ? field.errors.get("#{namespace}AdvancedFields") : field.errors.get('advancedFields') %}
 
-{{ forms.checkboxSelectField({
+<craft-field-group>
+
+  {{ forms.checkboxSelectField({
     label: 'Allowed Link Types'|t('app'),
     instructions: 'The link types that should be available when inserting links.'|t('app'),
     id: 'types',
@@ -20,32 +22,31 @@
     required: true,
     errors: allowedTypesErrors ?? null,
     disabled: readOnly,
-}) }}
+  }) }}
 
-{% for typeId, settings in linkTypeSettings %}
-    <div id="types-{{ typeId }}" class="{{ typeId not in allowedTypes ? 'hidden' }} pt-s">
-        <hr>
-        <a class="fieldtoggle mt-s mb-s" data-target="types-{{ typeId }}-settings">{{ settings.label }}</a>
-        <div id="types-{{ typeId }}-settings" class="hidden indent">
-            {{ settings.html|raw }}
-        </div>
-    </div>
-{% endfor %}
+  {% for typeId, settings in linkTypeSettings %}
+    <hr />
+    <craft-disclosure label="{{ settings.label }}" class="inline-block justify-self-start">
+      <div id="types-{{ typeId }}-settings" slot="content">
+        {{ settings.html|raw }}
+      </div>
+    </craft-disclosure>
+  {% endfor %}
 
-<hr>
+  <hr>
 
-{{ forms.lightswitchField({
+  {{ forms.lightswitchField({
     label: 'Show the “Label” field'|t('app'),
     id: 'showLabelField',
     name: showLabelFieldName,
     on: showLabelField,
     errors: showLabelFieldErrors ?? null,
     disabled: readOnly,
-}) }}
+  }) }}
 
-<hr>
+  <hr>
 
-{{ forms.checkboxSelectField({
+  {{ forms.checkboxSelectField({
     label: 'Advanced Fields'|t('app'),
     instructions: 'Choose which advanced fields should be available when inserting links.'|t('app'),
     id: 'advancedFields',
@@ -55,4 +56,5 @@
     sortable: true,
     errors: advancedFieldsErrors ?? null,
     disabled: readOnly,
-}) }}
+  }) }}
+</craft-field-group>
diff --git a/resources/templates/_components/fieldtypes/Markdown/settings.twig b/resources/templates/_components/fieldtypes/Markdown/settings.twig
index 839d1b309be..f2fefd7ce3d 100644
--- a/resources/templates/_components/fieldtypes/Markdown/settings.twig
+++ b/resources/templates/_components/fieldtypes/Markdown/settings.twig
@@ -1,19 +1,21 @@
 {% import "_includes/forms" as forms %}
 
-<div id="markdown-flavor-settings" class="{{ field.encode ? 'hidden' }}">
+<craft-field-group>
+
+  <div id="markdown-flavor-settings" class="{{ field.encode ? 'hidden' }}">
     {{ forms.selectField({
-        label: 'Markdown Flavor'|t('app'),
-        instructions: 'The Markdown flavor that should be used when rendering this field.'|t('app'),
-        id: 'flavor',
-        name: 'flavor',
-        options: flavorOptions,
-        value: field.flavor,
-        errors: field.errors.get('flavor'),
-        disabled: readOnly,
+      label: 'Markdown Flavor'|t('app'),
+      instructions: 'The Markdown flavor that should be used when rendering this field.'|t('app'),
+      id: 'flavor',
+      name: 'flavor',
+      options: flavorOptions,
+      value: field.flavor,
+      errors: field.errors.get('flavor'),
+      disabled: readOnly,
     }) }}
-</div>
+  </div>
 
-{{ forms.lightswitchField({
+  {{ forms.lightswitchField({
     label: 'Inline Only'|t('app'),
     instructions: 'Whether the field should only render inline Markdown, without wrapping paragraphs.'|t('app'),
     id: 'inlineOnly',
@@ -21,9 +23,9 @@
     on: field.inlineOnly,
     errors: field.errors.get('inlineOnly'),
     disabled: readOnly,
-}) }}
+  }) }}
 
-{{ forms.lightswitchField({
+  {{ forms.lightswitchField({
     label: 'Show Toolbar'|t('app'),
     instructions: 'Whether the editor toolbar should be visible.'|t('app'),
     id: 'showToolbar',
@@ -32,22 +34,22 @@
     toggle: 'toolbar-button-settings',
     errors: field.errors.get('showToolbar'),
     disabled: readOnly,
-}) }}
+  }) }}
 
-<div id="toolbar-button-settings" class="{{ not field.showToolbar ? 'hidden' }}">
+  <div id="toolbar-button-settings" class="{{ not field.showToolbar ? 'hidden' }}">
     {{ forms.checkboxSelectField({
-        label: 'Toolbar Buttons'|t('app'),
-        instructions: 'Choose which buttons should be available in the editor toolbar.'|t('app'),
-        id: 'toolbarButtons',
-        name: 'toolbarButtons',
-        options: toolbarButtonOptions,
-        values: field.toolbarButtons,
-        errors: field.errors.get('toolbarButtons'),
-        disabled: readOnly,
+      label: 'Toolbar Buttons'|t('app'),
+      instructions: 'Choose which buttons should be available in the editor toolbar.'|t('app'),
+      id: 'toolbarButtons',
+      name: 'toolbarButtons',
+      options: toolbarButtonOptions,
+      values: field.toolbarButtons,
+      errors: field.errors.get('toolbarButtons'),
+      disabled: readOnly,
     }) }}
-</div>
+  </div>
 
-{{ forms.lightswitchField({
+  {{ forms.lightswitchField({
     label: 'Show Stats'|t('app'),
     instructions: 'Whether the editor should show character, word, and line counts.'|t('app'),
     id: 'showStats',
@@ -55,9 +57,9 @@
     on: field.showStats,
     errors: field.errors.get('showStats'),
     disabled: readOnly,
-}) }}
+  }) }}
 
-{{ forms.textField({
+  {{ forms.textField({
     label: "Placeholder Text"|t('app'),
     instructions: "The text that will be shown if the field doesn’t have a value."|t('app'),
     id: 'placeholder',
@@ -65,9 +67,9 @@
     value: field.placeholder,
     errors: field.errors.get('placeholder'),
     disabled: readOnly,
-}) }}
+  }) }}
 
-{{ forms.textField({
+  {{ forms.textField({
     label: "Initial Rows"|t('app'),
     id: 'initialRows',
     name: 'initialRows',
@@ -75,73 +77,75 @@
     size: 3,
     errors: field.errors.get('initialRows'),
     disabled: readOnly,
-}) }}
+  }) }}
 
-{% embed '_includes/forms/field' with {
+  {% embed '_includes/forms/field' with {
     label: 'Field Limit'|t('app'),
     instructions: "The maximum number of characters or bytes the field is allowed to have."|t('app'),
     id: 'fieldLimit',
     errors: field.errors.get(field.byteLimit ? 'byteLimit' : 'charLimit'),
     disabled: readOnly,
-} %}
+  } %}
     {% import "_includes/forms" as forms %}
     {% block input %}
-        <div class="flex">
-            {{ forms.text({
-                id: 'fieldLimit',
-                name: 'fieldLimit',
-                value: field.charLimit ?? field.byteLimit,
-                size: 3,
-                disabled: readOnly,
-            }) }}
-            {{ forms.select({
-                id: 'limitUnit',
-                name: 'limitUnit',
-                options: [
-                    { value: 'chars', label: 'Characters'|t('app') },
-                    { value: 'bytes', label: 'Bytes'|t('app') },
-                ],
-                value: field.byteLimit ? 'bytes' : 'chars',
-                disabled: readOnly,
-            }) }}
-        </div>
+      <div class="flex">
+        {{ forms.text({
+          id: 'fieldLimit',
+          name: 'fieldLimit',
+          value: field.charLimit ?? field.byteLimit,
+          size: 3,
+          disabled: readOnly,
+        }) }}
+        {{ forms.select({
+          id: 'limitUnit',
+          name: 'limitUnit',
+          options: [
+            { value: 'chars', label: 'Characters'|t('app') },
+            { value: 'bytes', label: 'Bytes'|t('app') },
+          ],
+          value: field.byteLimit ? 'bytes' : 'chars',
+          disabled: readOnly,
+        }) }}
+      </div>
     {% endblock %}
-{% endembed %}
+  {% endembed %}
 
-<hr>
+  <hr>
 
-<a class="fieldtoggle" data-target="links">{{ 'Links'|t('app') }}</a>
-<div id="links" class="hidden">
-    <div class="indent">
-        {% include '_components/fieldtypes/Link/link-settings' with linkSettings only %}
+  <craft-disclosure
+    label="{{ 'Links'|t('app') }}"
+    class="justify-self-start"
+  >
+    <div slot="content">
+      {% include '_components/fieldtypes/Link/link-settings' with linkSettings only %}
     </div>
-</div>
+  </craft-disclosure>
 
-<hr>
+  <hr>
 
-<a class="fieldtoggle" data-target="assets">{{ 'Assets'|t('app') }}</a>
-<div id="assets" class="hidden">
-    {% if volumeOptions|length %}
+  <craft-disclosure label="{{ 'Assets'|t('app') }}" class="justify-self-start">
+    <craft-field-group slot="content">
+      {% if volumeOptions|length %}
         {{ forms.checkboxSelectField({
-            label: 'Available Volumes'|t('app'),
-            instructions: 'The volumes that should be available when selecting assets.'|t('app'),
-            id: 'availableVolumes',
-            name: 'availableVolumes',
-            options: volumeOptions,
-            values: field.availableVolumes,
-            showAllOption: true,
-            errors: field.errors.get('availableVolumes'),
-            disabled: readOnly,
+          label: 'Available Volumes'|t('app'),
+          instructions: 'The volumes that should be available when selecting assets.'|t('app'),
+          id: 'availableVolumes',
+          name: 'availableVolumes',
+          options: volumeOptions,
+          values: field.availableVolumes,
+          showAllOption: true,
+          errors: field.errors.get('availableVolumes'),
+          disabled: readOnly,
         }) }}
-    {% else %}
+      {% else %}
         {{ forms.field({
-            label: 'Available Volumes'|t('app'),
-            instructions: 'The volumes that should be available when selecting assets.'|t('app'),
-            id: 'availableVolumes',
+          label: 'Available Volumes'|t('app'),
+          instructions: 'The volumes that should be available when selecting assets.'|t('app'),
+          id: 'availableVolumes',
         }, '<p class="error">' ~ 'No volumes exist yet.'|t('app') ~ '</p>') }}
-    {% endif %}
+      {% endif %}
 
-    {{ forms.lightswitchField({
+      {{ forms.lightswitchField({
         label: 'Show unpermitted volumes'|t('app'),
         instructions: 'Whether to show volumes that the user doesn’t have permission to view.'|t('app'),
         id: 'showUnpermittedVolumes',
@@ -149,9 +153,9 @@
         on: field.showUnpermittedVolumes,
         errors: field.errors.get('showUnpermittedVolumes'),
         disabled: readOnly,
-    }) }}
+      }) }}
 
-    {{ forms.lightswitchField({
+      {{ forms.lightswitchField({
         label: 'Show unpermitted files'|t('app'),
         instructions: 'Whether to show files that the user doesn’t have permission to view, per the “View files uploaded by other users” permission.'|t('app'),
         id: 'showUnpermittedFiles',
@@ -159,27 +163,37 @@
         on: field.showUnpermittedFiles,
         errors: field.errors.get('showUnpermittedFiles'),
         disabled: readOnly,
-    }) }}
+      }) }}
 
-    {% if volumeOptions|length %}
+      {% if volumeOptions|length %}
         {{ forms.selectField({
-            label: 'Upload Volume'|t('app'),
-            instructions: 'The volume where pasted or dropped files should be uploaded.'|t('app'),
-            id: 'uploadVolume',
-            name: 'uploadVolume',
-            options: [{ label: 'No uploads'|t('app'), value: '' }]|merge(volumeOptions),
-            value: field.uploadVolume,
-            errors: field.errors.get('uploadVolume'),
-            disabled: readOnly,
+          label: 'Upload Volume'|t('app'),
+          instructions: 'The volume where pasted or dropped files should be uploaded.'|t('app'),
+          id: 'uploadVolume',
+          name: 'uploadVolume',
+          options: [{ label: 'No uploads'|t('app'), value: '' }]|merge(volumeOptions),
+          value: field.uploadVolume,
+          errors: field.errors.get('uploadVolume'),
+          disabled: readOnly,
         }) }}
-    {% endif %}
-</div>
+      {% endif %}
+    </craft-field-group>
+  </craft-disclosure>
+
+  <hr>
+
+  <craft-disclosure>
+    <craft-button
+      type="button"
+      appearance="plain"
+      class="justify-self-start"
+      icon="chevron-down"
+      slot="invoker"
+    >{{ 'Advanced'|t('app') }}</craft-button>
 
-<hr>
+    <craft-field-group slot="content">
 
-<a class="fieldtoggle" data-target="advanced">{{ 'Advanced'|t('app') }}</a>
-<div id="advanced" class="hidden">
-    {{ forms.lightswitchField({
+      {{ forms.lightswitchField({
         label: 'Encode HTML'|t('app'),
         instructions: 'Whether HTML should be encoded before rendering the Markdown.'|t('app'),
         warning: 'Enabling this will enforce the Original Markdown flavor.'|t('app'),
@@ -189,9 +203,9 @@
         reverseToggle: 'markdown-flavor-settings',
         errors: field.errors.get('encode'),
         disabled: readOnly,
-    }) }}
+      }) }}
 
-    {{ forms.lightswitchField({
+      {{ forms.lightswitchField({
         label: 'Sanitize HTML'|t('app'),
         instructions: 'Removes any potentially-malicious code on save, by running the submitted data through an HTML sanitizer.'|t('app'),
         warning: 'Disable this at your own risk!'|t('app'),
@@ -201,21 +215,23 @@
         toggle: 'html-sanitizer-settings',
         errors: field.errors.get('sanitizeHtml'),
         disabled: readOnly,
-    }) }}
+      }) }}
 
-    <div id="html-sanitizer-settings" class="{{ not field.sanitizeHtml ? 'hidden' }}">
+      <div id="html-sanitizer-settings" class="{{ not field.sanitizeHtml ? 'hidden' }}">
         {{ forms.selectField({
-            label: 'HTML Sanitizer'|t('app'),
-            instructions: 'You can register custom HTML sanitizers as {ext} files in {path}.'|t('app', {
-                ext: '`.php`',
-                path: '`config/craft/sanitizers/`',
-            }),
-            id: 'htmlSanitizer',
-            name: 'htmlSanitizer',
-            options: htmlSanitizerOptions,
-            value: field.htmlSanitizer ?? 'default',
-            errors: field.errors.get('htmlSanitizer'),
-            disabled: readOnly,
+          label: 'HTML Sanitizer'|t('app'),
+          instructions: 'You can register custom HTML sanitizers as {ext} files in {path}.'|t('app', {
+            ext: '`.php`',
+            path: '`config/craft/sanitizers/`',
+          }),
+          id: 'htmlSanitizer',
+          name: 'htmlSanitizer',
+          options: htmlSanitizerOptions,
+          value: field.htmlSanitizer ?? 'default',
+          errors: field.errors.get('htmlSanitizer'),
+          disabled: readOnly,
         }) }}
-    </div>
-</div>
+      </div>
+    </craft-field-group>
+  </craft-disclosure>
+</craft-field-group>
diff --git a/resources/templates/_components/fieldtypes/Matrix/create-button.twig b/resources/templates/_components/fieldtypes/Matrix/create-button.twig
index 9a8f5fbb593..5e5878ac945 100644
--- a/resources/templates/_components/fieldtypes/Matrix/create-button.twig
+++ b/resources/templates/_components/fieldtypes/Matrix/create-button.twig
@@ -3,7 +3,6 @@
   {{ forms.button({
     label: createButtonLabel,
     class: ['dashed', 'add', 'icon', 'wrap'],
-    spinner: true,
     attributes: {
       data: {
         type: entryTypes|first.handle,
diff --git a/resources/templates/_components/fieldtypes/Matrix/settings.twig b/resources/templates/_components/fieldtypes/Matrix/settings.twig
index fb85b946062..60a2cc1504a 100644
--- a/resources/templates/_components/fieldtypes/Matrix/settings.twig
+++ b/resources/templates/_components/fieldtypes/Matrix/settings.twig
@@ -1,85 +1,100 @@
 {% import "_includes/forms" as forms %}
 
-{% embed '_includes/forms/field.twig' with {
-  label: 'Entry Types'|t('app'),
-  instructions: 'Choose the types of entries that can be created in this field.'|t('app'),
-  id: 'entry-types',
-  disabled: readOnly,
-} %}
-  {% block input %}
-    {% import "_includes/forms" as forms %}
-    {% set groupedEntryTypes = entryTypes.groupBy(et => (et.group ?? 'General'|t('app'))) %}
-    {% if not groupedEntryTypes|length %}
-      {% set groupedEntryTypes = {
-        ('General'|t('app')): [],
-      } %}
-    {% endif %}
-    {{ hiddenInput('entryTypes', '') }}
-    <div id="entry-type-manager" class="entry-type-manager">
-      <ul class="entry-type-groups mb-s">
-        {% for groupName, entryTypes in groupedEntryTypes %}
-          {% tag 'li' with {
-            class: 'entry-type-group',
-            data: {
-              name: groupName,
-            },
-          } %}
-            <div class="entry-type-group--titlebar">
-              <span>{{ groupName }}</span>
-            </div>
-            {{ forms.entryTypeSelect(entryTypeSelectConfig|merge({
-              id: "entry-type-select-#{random()}",
-              values: entryTypes,
-              includeGroupInValues: true,
-              disabled: readOnly,
-            })) }}
-          {% endtag %}
-        {% endfor %}
-      </ul>
-    </div>
-  {% endblock %}
-{% endembed %}
-
-{% if Sites.isMultiSite() %}
-  {{ forms.selectField({
-    label: 'Propagation Method'|t('app'),
-    instructions: 'Which sites should entries be saved to?'|t('app'),
-    id: 'propagationMethod',
-    name: 'propagationMethod',
-    options: [
-      { value: 'none', label: 'Only save entries to the site they were created in'|t('app') },
-      { value: 'siteGroup', label: 'Save entries to other sites in the same site group'|t('app') },
-      { value: 'language', label: 'Save entries to other sites with the same language'|t('app') },
-      { value: 'all', label: 'Save entries to all sites the owner element is saved in'|t('app') },
-      { value: 'custom', label: 'Custom…'|t('app') },
-    ],
-    value: field.propagationMethod.value,
-    toggle: true,
-    targetPrefix: 'propagation-method-',
+<craft-field-group>
+  {% embed '_includes/forms/field.twig' with {
+    label: 'Entry Types'|t('app'),
+    instructions: 'Choose the types of entries that can be created in this field.'|t('app'),
+    id: 'entry-types',
     disabled: readOnly,
-  }) }}
-
-  {% tag 'div' with {
-    id: 'propagation-method-custom',
-    class: field.propagationMethod.value != 'custom' ? 'hidden' : null,
   } %}
-    {{ forms.textField({
-      label: 'Propagation Key Format'|t('app'),
-      instructions: 'Template that defines the field’s custom “propagation key” format. Entries will be saved to all sites that produce the same key.'|t('app'),
-      id: 'propagation-key-format',
-      class: 'code',
-      name: 'propagationKeyFormat',
-      value: field.propagationKeyFormat,
-      errors: field.errors.get('propagationKeyFormat'),
+    {% block input %}
+      {% import "_includes/forms" as forms %}
+      {% set groupedEntryTypes = entryTypes.groupBy(et => (et.group ?? 'General'|t('app'))) %}
+      {% if not groupedEntryTypes|length %}
+        {% set groupedEntryTypes = {
+          ('General'|t('app')): [],
+        } %}
+      {% endif %}
+      {{ hiddenInput('entryTypes', '') }}
+      <craft-entry-type-manager
+        id="entry-type-manager"
+        class="entry-type-manager"
+        slot="input"
+        namespace="{{ InputNamespace.get() ?: false }}"
+        default-columns-id="{{ 'default-table-columns-input'|namespaceInputId }}"
+        {% if entryTypeSelectConfig.allowOverrides ?? false %}allow-overrides{% endif %}
+        {% if readOnly %}disabled{% endif %}
+      >
+        <ul class="entry-type-groups mb-s">
+          {% for groupName, entryTypes in groupedEntryTypes %}
+            {% tag 'li' with {
+              class: 'entry-type-group',
+              data: {
+                name: groupName,
+              },
+            } %}
+              <div class="entry-type-group--titlebar">
+                <span>{{ groupName }}</span>
+              </div>
+              {{ forms.entryTypeSelect(entryTypeSelectConfig|merge({
+                id: "entry-type-select-#{random()}",
+                values: entryTypes,
+                includeGroupInValues: true,
+                disabled: readOnly,
+              })) }}
+            {% endtag %}
+          {% endfor %}
+        </ul>
+        {% if not readOnly and entryTypeSelectHtml %}
+          {# Server-rendered select markup for new groups; the manager clones it,
+             swapping the namespaced TEMP_ID placeholders for a unique id, and the
+             `<craft-component-select>` inside self-boots — no JS blob needed. #}
+          <template data-entry-type-select>{{ entryTypeSelectHtml|raw }}</template>
+        {% endif %}
+      </craft-entry-type-manager>
+    {% endblock %}
+  {% endembed %}
+
+  {% if Sites.isMultiSite() %}
+    {{ forms.selectField({
+      label: 'Propagation Method'|t('app'),
+      instructions: 'Which sites should entries be saved to?'|t('app'),
+      id: 'propagationMethod',
+      name: 'propagationMethod',
+      options: [
+        { value: 'none', label: 'Only save entries to the site they were created in'|t('app') },
+        { value: 'siteGroup', label: 'Save entries to other sites in the same site group'|t('app') },
+        { value: 'language', label: 'Save entries to other sites with the same language'|t('app') },
+        { value: 'all', label: 'Save entries to all sites the owner element is saved in'|t('app') },
+        { value: 'custom', label: 'Custom…'|t('app') },
+      ],
+      value: field.propagationMethod.value,
+      toggle: true,
+      targetPrefix: 'propagation-method-',
       disabled: readOnly,
     }) }}
-  {% endtag %}
 
-  {% if field.id and field.propagationMethod.value != 'none' %}
-    {% js %}
-    (function() {
-      var showingWarning = false;
-      $("#{{ 'propagationMethod'|namespaceInputId }}").on('change', function() {
+    {% tag 'div' with {
+      id: 'propagation-method-custom',
+      class: field.propagationMethod.value != 'custom' ? 'hidden' : null,
+    } %}
+      {{ forms.textField({
+        label: 'Propagation Key Format'|t('app'),
+        instructions: 'Template that defines the field’s custom “propagation key” format. Entries will be saved to all sites that produce the same key.'|t('app'),
+        id: 'propagation-key-format',
+        class: 'code',
+        name: 'propagationKeyFormat',
+        value: field.propagationKeyFormat,
+        errors: field.errors.get('propagationKeyFormat'),
+        disabled: readOnly,
+      }) }}
+    {% endtag %}
+
+    {% if field.id and field.propagationMethod.value != 'none' %}
+      {% js %}
+      (function() {
+        var showingWarning = false;
+        $("#{{ 'propagationMethod'|namespaceInputId }}").on('change', function() {
                     if ($(this).val() !== '{{ field.propagationMethod.value }}') {
                         if (!showingWarning) {
                             $('<p/>', {'class': 'warning', text: "{{ 'Applying this change to existing entries can take some time.'|t('app')|e('js') }}"})
@@ -93,252 +108,243 @@
                 });
             })();
         {% endjs %}
+    {% endif %}
   {% endif %}
-{% endif %}
 
-{% set headlessMode = config('craft.general.headlessMode') %}
-{% set siteRows = [] %}
-{% set siteErrors = [] %}
+  {% set headlessMode = config('craft.general.headlessMode') %}
+  {% set siteRows = [] %}
+  {% set siteErrors = [] %}
 
-{% for site in Sites.getAllSites() %}
-  {% set siteSettings = field.siteSettings[site.uid] ?? null %}
-  {% if siteSettings %}
-    {% for attribute, errors in siteSettings.errors ?? [] %}
-      {% set siteErrors = siteErrors|merge(errors) %}
-    {% endfor %}
-  {% endif %}
-  {% set siteRows = siteRows|merge({
-    (site.uid): {
-      heading: site.name|t('site')|e,
+  {% for site in Sites.getAllSites() %}
+    {% set siteSettings = field.siteSettings[site.uid] ?? null %}
+    {% if siteSettings %}
+      {% for attribute, errors in siteSettings.errors ?? [] %}
+        {% set siteErrors = siteErrors|merge(errors) %}
+      {% endfor %}
+    {% endif %}
+    {% set siteRows = siteRows|merge({
+      (site.uid): {
+        heading: site.name|t('site')|e,
+        uriFormat: {
+          value: siteSettings.uriFormat ?? null,
+          hasErrors: siteSettings.errors.uriFormat is defined,
+        },
+        template: not headlessMode ? {
+          value: siteSettings.template ?? null,
+          hasErrors: siteSettings.errors.template is defined,
+        },
+      }|filter
+    }) %}
+  {% endfor %}
+
+  {{ forms.editableTableField({
+    label: 'Site Settings'|t('app'),
+    instructions: 'Choose the site-specific settings for nested entries.'|t('app'),
+    id: 'site-settings',
+    name: 'siteSettings',
+    cols: {
+      heading: {
+        type: 'heading',
+        heading: 'Site'|t('app'),
+        thin: true
+      },
       uriFormat: {
-        value: siteSettings.uriFormat ?? null,
-        hasErrors: siteSettings.errors.uriFormat is defined,
+        type: 'singleline',
+        heading: 'Entry URI Format'|t('app'),
+        info: 'What entry URIs should look like for the site. Leave blank if entries don’t have URLs.'|t('app'),
+        placeholder: 'Leave blank if entries don’t have URLs'|t('app'),
+        code: true,
       },
       template: not headlessMode ? {
-        value: siteSettings.template ?? null,
-        hasErrors: siteSettings.errors.template is defined,
+        type: 'template',
+        heading: 'Template'|t('app'),
+        info: 'Which template should be loaded when an entry’s URL is requested.'|t('app'),
+        code: true
       },
-    }|filter
-  }) %}
-{% endfor %}
-
-{{ forms.editableTableField({
-  label: 'Site Settings'|t('app'),
-  instructions: 'Choose the site-specific settings for nested entries.'|t('app'),
-  id: 'site-settings',
-  name: 'siteSettings',
-  cols: {
-    heading: {
-      type: 'heading',
-      heading: 'Site'|t('app'),
-      thin: true
-    },
-    uriFormat: {
-      type: 'singleline',
-      heading: 'Entry URI Format'|t('app'),
-      info: 'What entry URIs should look like for the site. Leave blank if entries don’t have URLs.'|t('app'),
-      placeholder: 'Leave blank if entries don’t have URLs'|t('app'),
-      code: true,
-    },
-    template: not headlessMode ? {
-      type: 'template',
-      heading: 'Template'|t('app'),
-      info: 'Which template should be loaded when an entry’s URL is requested.'|t('app'),
-      code: true
-    },
-  }|filter,
-  rows: siteRows,
-  fullWidth: true,
-  allowAdd: false,
-  allowDelete: false,
-  allowReorder: false,
-  errors: siteErrors|unique,
-  data: {'error-key': 'siteSettings'},
-  static: readOnly,
-}) }}
-
-{{ forms.textField({
-  label: 'Min {type}'|t('app', {
-    type: 'Entries'|t('app'),
-  }),
-  instructions: 'The minimum number of {type} the field is allowed to have.'|t('app', {
-    type: 'entries'|t('app'),
-  }),
-  id: 'min-entries',
-  name: 'minEntries',
-  value: field.minEntries,
-  size: 3,
-  errors: field.errors.get('minEntries'),
-  data: {'error-key': 'minEntries'},
-  disabled: readOnly,
-}) }}
+    }|filter,
+    rows: siteRows,
+    fullWidth: true,
+    allowAdd: false,
+    allowDelete: false,
+    allowReorder: false,
+    errors: siteErrors|unique,
+    data: {'error-key': 'siteSettings'},
+    static: readOnly,
+  }) }}
 
-{{ forms.textField({
-  label: 'Max {type}'|t('app', {
-    type: 'Entries'|t('app'),
-  }),
-  instructions: 'The maximum number of {type} the field is allowed to have.'|t('app', {
-    type: 'entries'|t('app'),
-  }),
-  id: 'max-entries',
-  name: 'maxEntries',
-  value: field.maxEntries,
-  size: 3,
-  errors: field.errors.get('maxEntries'),
-  data: {'error-key': 'maxEntries'},
-  disabled: readOnly,
-}) }}
+  {{ forms.textField({
+    label: 'Min {type}'|t('app', {
+      type: 'Entries'|t('app'),
+    }),
+    instructions: 'The minimum number of {type} the field is allowed to have.'|t('app', {
+      type: 'entries'|t('app'),
+    }),
+    id: 'min-entries',
+    name: 'minEntries',
+    value: field.minEntries,
+    size: 3,
+    errors: field.errors.get('minEntries'),
+    data: {'error-key': 'minEntries'},
+    disabled: readOnly,
+  }) }}
 
-{{ forms.lightswitchField({
-  label: 'Enable versioning for entries in this field'|t('app'),
-  id: 'enableVersioning',
-  name: 'enableVersioning',
-  on: field.enableVersioning,
-  errors: field.errors.get('enableVersioning'),
-  data: {'error-key': 'enableVersioning'},
-  disabled: readOnly,
-}) }}
+  {{ forms.textField({
+    label: 'Max {type}'|t('app', {
+      type: 'Entries'|t('app'),
+    }),
+    instructions: 'The maximum number of {type} the field is allowed to have.'|t('app', {
+      type: 'entries'|t('app'),
+    }),
+    id: 'max-entries',
+    name: 'maxEntries',
+    value: field.maxEntries,
+    size: 3,
+    errors: field.errors.get('maxEntries'),
+    data: {'error-key': 'maxEntries'},
+    disabled: readOnly,
+  }) }}
 
-<hr>
+  {{ forms.lightswitchField({
+    label: 'Enable versioning for entries in this field'|t('app'),
+    id: 'enableVersioning',
+    name: 'enableVersioning',
+    on: field.enableVersioning,
+    errors: field.errors.get('enableVersioning'),
+    data: {'error-key': 'enableVersioning'},
+    disabled: readOnly,
+  }) }}
 
-{% embed '_includes/forms/field.twig' with {
-  label: 'View Mode'|t('app'),
-  instructions: 'Choose how nested {type} should be presented to authors.'|t('app', {
-    type: 'entries'|t('app'),
-  }),
-} %}
-  {% block input %}
-    <div class="flex items-start gap-l">
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/cards.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'cards', {
-          checked: field.viewMode == 'cards',
-          class: 'fieldtoggle',
-          disabled: readOnly,
-          data: {'target-prefix': 'view-mode--'},
-        }) }}
-        {{ 'Cards'|t('app') }}
-      </label>
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/cards-grid.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'cards-grid', {
-          checked: field.viewMode == 'cards-grid',
-          class: 'fieldtoggle',
-          disabled: readOnly,
-          data: {'target-prefix': 'view-mode--'},
-        }) }}
-        {{ 'Card grid'|t('app') }}
-      </label>
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/blocks.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'blocks', {
-          checked: field.viewMode == 'blocks',
-          class: 'fieldtoggle',
-          disabled: readOnly,
-          data: {'target-prefix': 'view-mode--'},
-        }) }}
-        {{ 'Blocks'|t('app') }}
-      </label>
-      <label class="nowrap">
-        <img class="mb-xs" src="{{ baseIconsUrl }}/index.svg" width="80" height="60" alt="">
-        {{ input('radio', 'viewMode', 'index', {
-          checked: field.viewMode == 'index',
-          class: 'fieldtoggle',
-          disabled: readOnly,
-          data: {'target-prefix': 'view-mode--'},
-        }) }}
-        {{ 'Index'|t('app') }}
-      </label>
-    </div>
-  {% endblock %}
-{% endembed %}
+  <hr>
 
-{% tag 'div' with {
-  id: "view-mode--index",
-  class: field.viewMode != 'index' ? 'hidden' : null,
-} %}
-  {{ forms.lightswitchField({
-    label: 'Include Table View'|t('app'),
-    instructions: 'Whether the element index should allow viewing nested {type} in a table.'|t('app', {
+  {% embed '_includes/forms/field.twig' with {
+    label: 'View Mode'|t('app'),
+    instructions: 'Choose how nested {type} should be presented to authors.'|t('app', {
       type: 'entries'|t('app'),
     }),
-    id: 'include-table-view',
-    name: 'includeTableView',
-    on: field.includeTableView,
-    toggle: '#default-table-columns-container',
-    disabled: readOnly,
-  }) }}
+  } %}
+    {% block input %}
+      <div class="flex items-start gap-l">
+        <label class="nowrap">
+          <img class="mb-xs" src="{{ baseIconsUrl }}/cards.svg" width="80" height="60" alt="">
+          {{ input('radio', 'viewMode', 'cards', {
+            checked: field.viewMode == 'cards',
+            class: 'fieldtoggle',
+            disabled: readOnly,
+            data: {'target-prefix': 'view-mode--'},
+          }) }}
+          {{ 'Cards'|t('app') }}
+        </label>
+        <label class="nowrap">
+          <img class="mb-xs" src="{{ baseIconsUrl }}/cards-grid.svg" width="80" height="60" alt="">
+          {{ input('radio', 'viewMode', 'cards-grid', {
+            checked: field.viewMode == 'cards-grid',
+            class: 'fieldtoggle',
+            disabled: readOnly,
+            data: {'target-prefix': 'view-mode--'},
+          }) }}
+          {{ 'Card grid'|t('app') }}
+        </label>
+        <label class="nowrap">
+          <img class="mb-xs" src="{{ baseIconsUrl }}/blocks.svg" width="80" height="60" alt="">
+          {{ input('radio', 'viewMode', 'blocks', {
+            checked: field.viewMode == 'blocks',
+            class: 'fieldtoggle',
+            disabled: readOnly,
+            data: {'target-prefix': 'view-mode--'},
+          }) }}
+          {{ 'Blocks'|t('app') }}
+        </label>
+        <label class="nowrap">
+          <img class="mb-xs" src="{{ baseIconsUrl }}/index.svg" width="80" height="60" alt="">
+          {{ input('radio', 'viewMode', 'index', {
+            checked: field.viewMode == 'index',
+            class: 'fieldtoggle',
+            disabled: readOnly,
+            data: {'target-prefix': 'view-mode--'},
+          }) }}
+          {{ 'Index'|t('app') }}
+        </label>
+      </div>
+    {% endblock %}
+  {% endembed %}
 
-  {% tag 'div' with {
-    id: 'default-table-columns-container',
-    class: not field.includeTableView ? 'hidden' : null,
+  {% tag 'craft-field-group' with {
+    id: "view-mode--index",
+    class: field.viewMode != 'index' ? 'hidden' : null,
   } %}
-    {% embed '_includes/forms/field.twig' with {
-      label: 'Default Table Columns'|t('app'),
-      instructions: 'Choose which table columns should be visible by default.'|t('app'),
-      id: 'default-table-columns',
+    {{ forms.lightswitchField({
+      label: 'Include Table View'|t('app'),
+      instructions: 'Whether the element index should allow viewing nested {type} in a table.'|t('app', {
+        type: 'entries'|t('app'),
+      }),
+      id: 'include-table-view',
+      name: 'includeTableView',
+      on: field.includeTableView,
+      toggle: '#default-table-columns-container',
+      disabled: readOnly,
+    }) }}
+
+    {% tag 'div' with {
+      id: 'default-table-columns-container',
+      class: not field.includeTableView ? 'hidden' : null,
     } %}
-      {% block input %}
-        <div id="default-table-columns-input"></div>
-      {% endblock %}
-    {% endembed %}
+      {% embed '_includes/forms/field.twig' with {
+        label: 'Default Table Columns'|t('app'),
+        instructions: 'Choose which table columns should be visible by default.'|t('app'),
+        id: 'default-table-columns',
+      } %}
+        {% block input %}
+          <div id="default-table-columns-input"></div>
+        {% endblock %}
+      {% endembed %}
+
+      {% set options = [] %}
+      {% for viewMode in indexViewModes %}
+        {% set options = options|merge([{
+          label: viewMode.title,
+          value: viewMode.mode,
+        }]) %}
+      {% endfor %}
+      {{ forms.selectField({
+        label: 'Default View Mode'|t('app'),
+        id: 'default-view-mode',
+        name: 'defaultIndexViewMode',
+        options: options,
+        value: field.defaultIndexViewMode,
+        disabled: readOnly,
+      }) }}
+    {% endtag %}
 
-    {% set options = [] %}
-    {% for viewMode in indexViewModes %}
-      {% set options = options|merge([{
-        label: viewMode.title,
-        value: viewMode.mode,
-      }]) %}
-    {% endfor %}
     {{ forms.selectField({
-      label: 'Default View Mode'|t('app'),
-      id: 'default-view-mode',
-      name: 'defaultIndexViewMode',
-      options: options,
-      value: field.defaultIndexViewMode,
+      label: '{type} Per Page'|t('app', {
+        type: 'Entries'|t('app'),
+      }),
+      instructions: 'The total number of {type} to display per page within the element index.'|t('app', {
+        type: 'entries'|t('app'),
+      }),
+      id: 'page-size',
+      name: 'pageSize',
+      options: [10, 20, 50, 100]|map(num => {label: num, value: num}),
+      value: field.pageSize ?? 50,
       disabled: readOnly,
     }) }}
   {% endtag %}
 
-  {{ forms.selectField({
-    label: '{type} Per Page'|t('app', {
-      type: 'Entries'|t('app'),
-    }),
-    instructions: 'The total number of {type} to display per page within the element index.'|t('app', {
-      type: 'entries'|t('app'),
-    }),
-    id: 'page-size',
-    name: 'pageSize',
-    options: [10, 20, 50, 100]|map(num => {label: num, value: num}),
-    value: field.pageSize ?? 50,
+  {{ forms.textField({
+    label: '“New” Button Label'|t('app'),
+    instructions: 'The text label for the entry creation button.'|t('app'),
+    id: 'create-button-label',
+    name: 'createButtonLabel',
+    value: field.createButtonLabel,
+    placeholder: defaultCreateButtonLabel,
+    errors: field.errors.get('createButtonLabel'),
     disabled: readOnly,
   }) }}
-{% endtag %}
-
-{{ forms.textField({
-  label: '“New” Button Label'|t('app'),
-  instructions: 'The text label for the entry creation button.'|t('app'),
-  id: 'create-button-label',
-  name: 'createButtonLabel',
-  value: field.createButtonLabel,
-  placeholder: defaultCreateButtonLabel,
-  errors: field.errors.get('createButtonLabel'),
-  disabled: readOnly,
-}) }}
+</craft-field-group>
 
 {% js %}
-  (() => {
-    const $defaultColumnsContainer = $("#{{ 'default-table-columns-input'|namespaceInputId }}");
-
-    {% if not readOnly %}
-      const $entryTypesContainer = $("#{{ 'entry-type-manager'|namespaceInputId }}");
-      new Craft.GroupedEntryTypeManager($entryTypesContainer, {
-        $defaultColumnsContainer,
-        namespace: {{ InputNamespace.get()|json_encode|raw }},
-        entryTypeSelectHtml: {{ entryTypeSelectHtml|json_encode|raw }},
-        entryTypeSelectJs: {{ entryTypeSelectJs|json_encode|raw }},
-      });
-    {% endif %}
+(() => {
+  const $defaultColumnsContainer = $("#{{ 'default-table-columns-input'|namespaceInputId }}");
 
     const config = {
       name: {{ 'defaultTableColumns'|namespaceInputName|json_encode|raw }},
diff --git a/resources/templates/_components/fieldtypes/PlainText/settings.twig b/resources/templates/_components/fieldtypes/PlainText/settings.twig
index 95af983889f..d735b124045 100644
--- a/resources/templates/_components/fieldtypes/PlainText/settings.twig
+++ b/resources/templates/_components/fieldtypes/PlainText/settings.twig
@@ -54,7 +54,9 @@
     {% endblock %}
 {% endembed %}
 
+
 <fieldset>
+  <craft-field-group>
     {{ forms.lightswitchField({
         label: "Use a monospaced font"|t('app'),
         name: 'code',
@@ -69,6 +71,7 @@
         toggle: 'initialRowsContainer',
         disabled: readOnly,
     }) }}
+  </craft-field-group>
 </fieldset>
 
 <div id="initialRowsContainer" class="nested-fields{% if not field.multiline %} hidden{% endif %}" data-error-key="initialRows">
diff --git a/resources/templates/_components/fieldtypes/elementfieldsettings.twig b/resources/templates/_components/fieldtypes/elementfieldsettings.twig
index 6434238612a..896996d2f9f 100644
--- a/resources/templates/_components/fieldtypes/elementfieldsettings.twig
+++ b/resources/templates/_components/fieldtypes/elementfieldsettings.twig
@@ -63,6 +63,7 @@
                 name: 'minRelations',
                 value: field.minRelations,
                 size: 2,
+                maxlength: 2,
                 errors: field.errors.get('minRelations'),
                 data: {'error-key': 'minRelations'},
             }) }}
@@ -76,6 +77,7 @@
                 name: 'maxRelations',
                 value: field.maxRelations,
                 size: 2,
+                maxlength: 2,
                 errors: field.errors.get('maxRelations'),
                 data: {'error-key': 'maxRelations'},
             }) }}
@@ -149,25 +151,23 @@
     {% block advancedSettings %}
         <hr>
 
-        <button type="button" class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('app') }}</button>
-        <div id="advanced" class="hidden">
-
-            {{ forms.lightswitchField({
-                label: 'Allow self relations'|t('app'),
-                instructions: 'Whether {type} elements should be allowed to relate to themselves.'|t('app', { type: elementType }),
-                id: 'allow-self-relations',
-                name: 'allowSelfRelations',
-                on: field.allowSelfRelations,
-            }) }}
-
-            {% if Sites.isMultiSite() %}
-
-                {% block targetSiteField %}
-                    {{ field.getTargetSiteFieldHtml()|raw }}
-                {% endblock %}
-            {% endif %}
-
+      <craft-disclosure label="{{ "Advanced"|t('app') }}">
+        <div slot="content">
+          {{ forms.lightswitchField({
+            label: 'Allow self relations'|t('app'),
+            instructions: 'Whether {type} elements should be allowed to relate to themselves.'|t('app', { type: elementType }),
+            id: 'allow-self-relations',
+            name: 'allowSelfRelations',
+            on: field.allowSelfRelations,
+          }) }}
+
+          {% if Sites.isMultiSite() %}
+            {% block targetSiteField %}
+              {{ field.getTargetSiteFieldHtml()|raw }}
+            {% endblock %}
+          {% endif %}
         </div>
+        </craft-disclosure>
     {% endblock %}
 {% endblock %}
 
diff --git a/resources/templates/_components/widgets/CraftSupport/body.twig b/resources/templates/_components/widgets/CraftSupport/body.twig
index 66e9d165c88..c8fd10bfb8e 100644
--- a/resources/templates/_components/widgets/CraftSupport/body.twig
+++ b/resources/templates/_components/widgets/CraftSupport/body.twig
@@ -148,7 +148,6 @@
                 {{ forms.submitButton({
                     class: ['fullwidth', 'disabled'],
                     label: 'Send'|t('app'),
-                    spinner: true,
                 }) }}
             </form>
         </div>
diff --git a/resources/templates/_includes/forms.twig b/resources/templates/_includes/forms.twig
index 3048c146687..ca0045b8827 100644
--- a/resources/templates/_includes/forms.twig
+++ b/resources/templates/_includes/forms.twig
@@ -374,7 +374,10 @@
 
 
 {% macro editableTableField(config) %}
-    {% set config = config|merge({id: config.id ?? "editabletable#{random()}"}) %}
+  {% set config = config|merge({
+    id: config.id ?? "editabletable#{random()}",
+    width: config.width ?? 'full',
+  }) %}
     {{ _self.field(config, 'template:_includes/forms/editableTable') }}
 {% endmacro %}
 
diff --git a/resources/templates/_includes/forms/button.twig b/resources/templates/_includes/forms/button.twig
index 234b02f6b30..5bfb28de59e 100644
--- a/resources/templates/_includes/forms/button.twig
+++ b/resources/templates/_includes/forms/button.twig
@@ -1,64 +1,11 @@
-{% set spinner = spinner ?? false -%}
-{% set busyMessage = busyMessage ?? false %}
-{% set failureMessage = failureMessage ?? false %}
-{% set retryMessage = retryMessage ?? false %}
-{% set successMessage = successMessage ?? false %}
-{% set enableLiveRegion = busyMessage or failureMessage or retryMessage or successMessage %}
-{% set icon = icon ?? null %}
-{% set iconHtml = iconHtml ?? null %}
-{% set label = label ?? null %}
-{% set labelHtml = labelHtml ?? null %}
+{# Renders a <craft-button> web component from the legacy button variables
+   (`type`, `id`, `class`, `disabled`, `readOnly`, `label`/`labelHtml`,
+   `icon`/`iconHtml`, `spinner`, `busyMessage`/`failureMessage`/
+   `retryMessage`/`successMessage`, `attributes`).
 
-{# the "disabled" class takes care of disabling the button,
-   but the "read-only" class is needed so that it is allowed to have custom tabindex attribute #}
-{% set hasIcon = icon or icon is same as('0') %}
-{% set hasLabel = label or label is same as('0') %}
-{% set hasLabelHtml = labelHtml or labelHtml is same as('0') %}
+   The legacy-to-component mapping lives in FormFields::buttonFromConfig().
+   `spinner` is absorbed — the web component renders its own spinner while
+   loading; the busy/failure/retry/success messages pass through as data
+   attributes. #}
 
-{% set attributes = {
-    type: type ?? 'button',
-    id: id ?? false,
-    class: (class ?? [])|explodeClass|merge([
-        'btn',
-        not (hasIcon or hasLabel or hasLabelHtml) ? 'btn-empty' : null,
-        (disabled ?? readOnly ?? false) ? 'disabled',
-        (readOnly ?? false) ? 'read-only',
-    ]|filter),
-    data: {
-        'busy-message': busyMessage,
-        'failure-message': failureMessage,
-        'retry-message': retryMessage,
-        'success-message': successMessage,
-    }|merge(attributes.data ?? {}),
-}|merge(attributes ?? {}) -%}
-
-{% apply spaceless %}
-    {% if spinner and enableLiveRegion %}
-        <div role="status" class="visually-hidden"></div>
-    {% endif %}
-    {% tag 'button' with attributes %}
-        {% if hasIcon or hasLabel or hasLabelHtml %}
-            <div class="inline-flex">
-                {% if hasIcon or iconHtml %}
-                    {% if hasIcon %}
-                        <div class="cp-icon">{{ iconSvg(icon) }}</div>
-                    {% elseif iconHtml %}
-                        {{ iconHtml|raw }}
-                    {% endif %}
-                {% endif %}
-                {% if hasLabel or hasLabelHtml %}
-                    {{ tag('div', {
-                        class: 'label',
-                        text: hasLabel ? label : null,
-                        html: hasLabelHtml ? labelHtml : null,
-                    }) }}
-                {% endif %}
-            </div>
-        {% endif %}
-        {% if spinner %}
-            <div class="spinner spinner-absolute">
-                <span class="visually-hidden">{{ 'Loading'|t('app') }}</span>
-            </div>
-        {% endif %}
-    {% endtag %}
-{% endapply -%}
+{{- craft.cp.button(_context)|raw -}}
diff --git a/resources/templates/_includes/forms/buttonGroup.twig b/resources/templates/_includes/forms/buttonGroup.twig
index b2faff50c1e..ef8c3973a11 100644
--- a/resources/templates/_includes/forms/buttonGroup.twig
+++ b/resources/templates/_includes/forms/buttonGroup.twig
@@ -1,59 +1,9 @@
-{%- set options = options ?? [] %}
-{%- set value = value ?? null %}
-{%- set disabled = disabled ?? false %}
-{%- set static = static ?? false %}
-{%- set appearance = appearance ?? 'outline' %}
-{%- set size = size ?? null %}
+{# Renders a <craft-button-group> (wrapped in a <craft-listbox>) from the
+   legacy buttonGroup variables (`options`, `value`, `name`, `id`, `class`,
+   `appearance`, `size`, `disabled`, `static`, `labelledBy`,
+   `containerAttributes`).
 
-{%- set id = id ?? "button-group-#{random()}" %}
-{%- set class = (class ?? [])|explodeClass %}
+   The legacy-to-component mapping lives in
+   FormFields::buttonGroupFromConfig(). #}
 
-{%- set containerAttributes = {
-  id,
-  class,
-  role: 'group',
-  aria: {
-    labelledby: labelledBy ?? false,
-  },
-}|merge(containerAttributes ?? [], recursive=true) %}
-
-{% tag 'craft-listbox' with { disabled: (disabled or static) ? true : false } %}
-  {% tag 'craft-button-group' with containerAttributes %}
-    {%- for key, option in options %}
-      {%- if option is not iterable %}
-        {%- set option = {label: option, value: key} %}
-      {%- endif %}
-      {%- set selected = option.value is defined and option.value == value %}
-      {% tag 'craft-button' with {
-        type: 'button',
-        appearance: option.appearance ?? appearance,
-        size: option.size ?? size,
-        active: selected ? 'true' : null,
-        class: (option.class ?? [])|explodeClass,
-        aria: {
-          pressed: selected ? 'true' : 'false',
-        },
-        data: {
-          value: option.value ?? null,
-        },
-        value: option.value ?? null,
-        disabled: disabled or static,
-      }|merge(option.attributes ?? {}, recursive=true)|filter %}
-        {% if option.icon ?? false %}
-          <craft-icon name="{{ option.icon }}" slot="prefix"></craft-icon>
-        {% endif %}
-        {%- if option.labelHtml is defined -%}
-          {{ option.labelHtml|raw }}
-        {%- else -%}
-          {{ option.label ?? '' }}
-        {%- endif -%}
-      {% endtag %}
-    {% endfor %}
-  {% endtag %}
-  {% if name ?? false %}
-    {% set inputId = "#{id}-input" %}
-    {{ hiddenInput(name, value, {
-      id: inputId,
-    }) }}
-  {% endif %}
-{% endtag %}
+{{- craft.cp.buttonGroup(_context)|raw -}}
diff --git a/resources/templates/_includes/forms/checkbox.twig b/resources/templates/_includes/forms/checkbox.twig
index 1787de0fd67..9260263da56 100644
--- a/resources/templates/_includes/forms/checkbox.twig
+++ b/resources/templates/_includes/forms/checkbox.twig
@@ -1,85 +1,16 @@
-{% from '_includes/forms' import text %}
-{%- apply spaceless %}
-
-{% set id = id ?? "checkbox#{random()}" %}
-{% set label = checkboxLabel ?? label ?? null %}
-{% set labelId = labelId ?? "#{id}-label" %}
-{% set color = color ?? null %}
-{% set icon = icon ?? null %}
-
-{% set aria = (inputAttributes.aria ?? {})|merge(aria ?? {}) %}
-{% set inputAttributes = {
-    id: id,
-    class: (class ?? [])|explodeClass|merge([
-        (targetPrefix ?? toggle ?? reverseToggle ?? false) ? 'fieldtoggle' : null,
-        'checkbox'
-    ]|filter),
-    checked: (checked ?? false) and checked,
-    autofocus: (autofocus ?? false) and not Request.isMobileBrowser(true),
-    disabled: (disabled ?? false) ? true : false,
-    aria: aria|merge({
-        labelledby: (aria.label ?? false) ? false : (labelledBy ?? false),
-        describedby: describedBy ?? aria.describedby ?? false,
-    }),
-    data: (data ?? {})|merge({
-        'target-prefix': targetPrefix ?? false,
-        target: toggle ?? false,
-        'reverse-target': reverseToggle ?? false,
-    }),
-}|merge(inputAttributes ?? [], recursive=true) %}
-
-{% if block('attr') is defined %}
-    {%- set inputAttributes = inputAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
-{% endif %}
-
-{% if name is defined and (name|length < 3 or name|slice(-2) != '[]') %}
-    {{ hiddenInput(name, '') }}
+{# Renders a <craft-checkbox> web component from the legacy checkbox
+   variables (`id`, `name`, `value`, `checked`, `label`/`checkboxLabel`,
+   `labelId`, `info`, `icon`, `color`, `custom`, `autofocus`, `disabled`,
+   `toggle`/`reverseToggle`/`targetPrefix`, `labelledBy`/`describedBy`,
+   `class`, `aria`, `data`, `inputAttributes` and an `attr` block).
+
+   The legacy-to-component mapping lives in
+   FormFields::checkboxFromConfig(); the native input, label, always-post
+   hidden input and custom-option input all render in the light DOM. #}
+
+{%- set inputAttributes = inputAttributes ?? {} %}
+{%- if block('attr') is defined %}
+  {%- set inputAttributes = inputAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{{ input('checkbox', name ?? null, value ?? 1, inputAttributes) }}
-
-{% tag 'label' with {
-    for: id,
-    id: labelId,
-} %}
-    {% if custom ?? false %}
-        {{ 'Custom:'|t('app') }}
-    {% else %}
-        {% if icon or color %}
-            <div class="flex flex-nowrap gap-xs">
-                {% if icon %}
-                    {% set style = {
-                        '--icon-color': color,
-                    }|filter %}
-                    {{ tag('span', {
-                        class: 'cp-icon puny',
-                        style,
-                        html: iconSvg(icon),
-                    }) }}
-                {% else %}
-                    <div class="color small">
-                        <div class="color-preview" style="background-color: {{ color }}"></div>
-                    </div>
-                {% endif %}
-                <span>{{ label }}</span>
-            </div>
-        {% else %}
-            {{ label }}
-        {% endif %}
-
-    {% endif %}
-    {% if info ?? null %}
-        <span class="info">{{ info|md|raw }}</span>
-    {% endif %}
-{% endtag %}
-
-{% if custom ?? false %}
-    <div class="custom-option-wrapper">
-        {{ text({
-            value: value ?? null,
-            class: 'small custom-option-input',
-            labelledBy: labelId,
-        }) }}
-    </div>
-{% endif %}
-{% endapply -%}
+{{- craft.cp.checkbox(_context)|raw -}}
diff --git a/resources/templates/_includes/forms/checkboxGroup.twig b/resources/templates/_includes/forms/checkboxGroup.twig
index 5681c2628f0..dce2766c1cc 100644
--- a/resources/templates/_includes/forms/checkboxGroup.twig
+++ b/resources/templates/_includes/forms/checkboxGroup.twig
@@ -1,104 +1,14 @@
-{% import '_includes/forms' as forms %}
+{# Renders a checkbox group from the legacy checkboxGroup variables (`id`,
+   `name`, `options`, `values`, `describedBy`, `autofocus`,
+   `allowCustomOptions`, `containerAttributes` and an `attr` block).
 
-{% set id = id ?? "checkbox-group-#{random()}" %}
-{%- set options = options ?? [] %}
-{%- set values = values ?? [] %}
-{%- set optionName = (name ?? false) ? "#{name}[]" : null %}
+   The legacy-to-component mapping — including the custom-option template and
+   its JS wiring — lives in FormFields::checkboxGroupFromConfig(); this
+   template only handles the `attr` block. #}
 
-{% set fieldsetAttributes = {
-    id,
-    class: ['checkbox-group'],
-} %}
-
-{% if block('attr') is defined %}
-    {%- set fieldsetAttributes = fieldsetAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+{%- set containerAttributes = containerAttributes ?? {} %}
+{%- if block('attr') is defined %}
+  {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% tag 'div' with fieldsetAttributes %}
-    {% if name ?? false %}
-        {{ hiddenInput(name, '') }}
-    {% endif -%}
-
-    {%- for key, option in options %}
-        {%- if option is not iterable %}
-            {%- set option = {label: option, value: key} %}
-        {%- endif %}
-        {% tag 'div' with {
-            data: {custom: option.custom ?? false},
-        } %}
-            {% include "_includes/forms/checkbox" with {
-                describedBy: describedBy ?? false,
-                name: optionName,
-                checked: option.value is defined and option.value in values,
-                autofocus: loop.first and (autofocus ?? false) and not Request.isMobileBrowser(true),
-            }|merge(option) only %}
-        {% endtag %}
-    {%- endfor %}
-
-    {% if allowCustomOptions ?? false %}
-        {% set addBtnId = "#{id}-add-btn" %}
-        {{ forms.button({
-            id: addBtnId,
-            class: ['dashed', 'small', 'icon', 'add'],
-            label: 'Add option'|t('app'),
-        }) }}
-
-        {% set customOptionHtml %}
-            {% namespace view.namespace %}
-                {% tag 'div' with {
-                    data: {custom: true},
-                } %}
-                    {% include '_includes/forms/checkbox' with {
-                        id: '__ID__',
-                        label: null,
-                        value: '',
-                        describedBy: describedBy ?? false,
-                        name: optionName,
-                        checked: true,
-                        custom: true,
-                    } only %}
-                {% endtag %}
-            {% endnamespace %}
-        {% endset %}
-
-        {% js %}
-          (() => {
-            const $container = $('#{{ id|namespaceInputId }}');
-            const $button = $('#{{ addBtnId|namespaceInputId }}');
-            const customOptionHtml = {{ customOptionHtml|json_encode|raw }};
-
-            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();
-                } else {
-                  if ($text.val() !== '') {
-                    $text.prop('disabled', true).addClass('disabled noteditable');
-                  } else {
-                    $option.remove();
-                    $button.focus();
-                  }
-                }
-              });
-              $text.on('input', () => {
-                $checkbox.val($text.val());
-              });
-            };
-
-            const $customOptions = $container.children('[data-custom]');
-            for (let i = 0; i < $customOptions.length; i++) {
-              initCustomOption($customOptions.eq(i));
-            }
-
-            $button.on('activate', () => {
-              const id = 'option' + Math.floor(Math.random() * 1000000000);
-              const $newOption = $(customOptionHtml.replace(/__ID__/g, id)).insertBefore($button);
-              initCustomOption($newOption);
-              $newOption.find('.text').focus();
-            });
-          })();
-        {% endjs %}
-    {% endif %}
-{% endtag %}
+{{ craft.cp.checkboxGroup(_context)|raw }}
diff --git a/resources/templates/_includes/forms/checkboxSelect.twig b/resources/templates/_includes/forms/checkboxSelect.twig
index f4a196ece6f..ad343cc6acb 100644
--- a/resources/templates/_includes/forms/checkboxSelect.twig
+++ b/resources/templates/_includes/forms/checkboxSelect.twig
@@ -1,78 +1,16 @@
-{%- set id = id ?? "checkbox-select-#{random()}" %}
-{%- set options = options ?? [] %}
-{%- set values = values ?? [] %}
-{%- set disabled = disabled ?? false %}
-{%- set sortable = sortable ?? false %}
-{%- set storageKey = storageKey ?? null %}
+{# Renders a checkbox select from the legacy checkboxSelect variables (`id`,
+   `name`, `options`, `values`, `showAllOption`, `allLabel`, `allValue`,
+   `sortable`, `storageKey`, `disabled`, `describedBy`, `targetPrefix`,
+   `autofocus`, `class`, `containerAttributes` and an `attr` block).
 
-{% set options = options|map((value, key) => value is iterable ? value : {
-    label: value,
-    value: key,
-}) %}
-
-{% if sortable and values|length %}
-    {% set options = collect(options)
-        .sortBy(o => values|indexOf(o.value, PHP_INT_MAX))
-        .all() %}
-{% endif %}
-
-{%- set showAllOption = showAllOption ?? false %}
-{%- if showAllOption %}
-    {%- set allLabel = allLabel ?? "All"|t('app') %}
-    {%- set allValue = allValue ?? '*' %}
-    {%- set allChecked = (values == allValue) %}
-{%- endif %}
-
-{% set containerAttributes = {
-    id,
-    class: ['cp-checkbox-select']|merge((class ?? [])|explodeClass),
-    data: {
-      'storage-key': storageKey,
-    },
-}|merge(containerAttributes ?? [], recursive=true) %}
+   The legacy-to-component mapping — including the sortable pre-ordering of
+   options by the `values` order — lives in
+   FormFields::checkboxSelectFromConfig(); this template only handles the
+   `attr` block. #}
 
+{%- set containerAttributes = containerAttributes ?? {} %}
 {%- if block('attr') is defined %}
-    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+  {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% if sortable %}
-  <craft-sortable-checkbox-select {% if disabled %}disabled{% endif %}>
-{% endif %}
-
-{% tag 'fieldset' with containerAttributes %}
-    {%- if showAllOption %}
-        <div>
-            {% include "_includes/forms/checkbox" with {
-                describedBy: describedBy ?? false,
-                class: ['cp-checkbox-select__item', 'all'],
-                label: raw("<b>#{allLabel}</b>"),
-                name: name ?? null,
-                value: allValue,
-                checked: allChecked,
-                autofocus: (autofocus ?? false) and not Request.isMobileBrowser(true),
-                targetPrefix: targetPrefix ?? null,
-                disabled: disabled
-            } only %}
-        </div>
-    {%- elseif name is defined and (name|length < 3 or name|slice(-2) != '[]') %}
-        {{- hiddenInput(name, '') }}
-    {%- endif %}
-    {%- for key, option in options %}
-        <div class="cp-checkbox-select__item">
-            {% set selected = (showAllOption and allChecked) or (option.value is defined and option.value in values) %}
-            {# The drag handle is the <craft-reorder-button> that
-                   Craft.SortableCheckboxSelect prepends to each item (it is both
-                   the drag handle and the Move up/down action menu). #}
-            {% include "_includes/forms/checkbox" with {
-                name: (name ?? false) ? "#{name}[]" : null,
-                checked: selected,
-                disabled: (showAllOption and allChecked) or disabled,
-                targetPrefix: targetPrefix ?? null,
-            }|merge(option) only %}
-        </div>
-    {% endfor %}
-{% endtag %}
-
-{% if sortable %}
-  </craft-sortable-checkbox-select>
-{% endif %}
+{{ craft.cp.checkboxSelect(_context)|raw }}
diff --git a/resources/templates/_includes/forms/componentSelect.twig b/resources/templates/_includes/forms/componentSelect.twig
index 0016d653568..b8c374f3418 100644
--- a/resources/templates/_includes/forms/componentSelect.twig
+++ b/resources/templates/_includes/forms/componentSelect.twig
@@ -18,7 +18,15 @@
 {% set createAction = createAction ?? null %}
 {% set disabled = (disabled ?? false) ? true : false %}
 {% set registerJs = registerJs ?? true %}
-{% set jsClass = jsClass ?? 'Craft.ComponentSelectInput' %}
+
+{# Legacy escape hatch: callers that pass an explicit jsClass (e.g. plugins with
+   Craft.ComponentSelectInput subclasses) get the original disclosure-menu markup
+   + `{% js %}` boot below. Everyone else — including entryTypeSelect.twig, which
+   now defaults to the web-component path — gets the self-booting
+   `<craft-component-select>` element, configured via attributes, with a
+   `craft-action-menu` Choose menu and no registered JS. #}
+{% set jsClass = jsClass ?? null %}
+{% set legacy = jsClass is not empty %}
 
 {# sort the options by handle, then label #}
 {% if showHandles %}
@@ -35,8 +43,38 @@
   {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% tag 'div' with containerAttributes %}
+{% if not legacy %}
+  {# Settings ride on attributes (parsed in the element's connectedCallback).
+     Booleans: bare attribute = on, "false" = off, absent = the component's
+     default — so default-true settings are emitted explicitly either way. #}
+  {# Emit `name` raw (NOT `|namespaceInputName`): the ambient `namespaceInputs`
+     pass already namespaces every `name="…"` attribute — including this custom
+     element's — exactly once, the same way it namespaces the chips' hidden
+     inputs (which also pass `name` through raw). Pre-namespacing here would
+     double-apply the namespace, so the JS would render new chips with an
+     over-nested `types[…][types][…]…` input name. #}
+  {# `selectable` defaults on (legacy `Craft.ComponentSelectInput` default),
+     independent of the chips' `checkbox` affordance below (which stays off by
+     default) — matching the legacy split where JS selection was always on but
+     chips rendered no checkbox unless a caller opted in. #}
+  {% set containerAttributes = containerAttributes|merge({
+    name: (name ?? false) ? name : false,
+    limit: limit ?: false,
+    sortable: sortable ? true : 'false',
+    selectable: (selectable ?? true) ? true : 'false',
+    'show-handles': showHandles ? true : 'false',
+    'show-description': showDescription ? true : 'false',
+    'show-action-menus': showActionMenus ? true : 'false',
+    hyperlinks: hyperlinks ? true : 'false',
+    'create-action': createAction ?: false,
+    disabled: disabled,
+    'data-id': 'component-select'
+  }) %}
+{% endif %}
+
+{% tag legacy ? 'div' : 'craft-component-select' with containerAttributes %}
   {% tag 'ul' with {
+    'data-id': 'component-select-items',
     class: [
       'components',
       'chips',
@@ -66,56 +104,105 @@
     {% endapply -%}
   {% endtag %}
 
-  <div class="flex flex-nowrap">
+  <div data-id="component-select-footer" class="flex flex-nowrap pt-2">
     {% set valueIds = values|map(component => component.getId()) %}
 
-    {% set buttonAttributeClasses = ['dashed', 'add-btn'] %}
-    {% if disabled and limit and valueIds|length >= limit %}
+    {% if legacy %}
+      {% set buttonAttributeClasses = ['dashed', 'add-btn'] %}
+      {% if disabled and limit and valueIds|length >= limit %}
         {% set buttonAttributeClasses = buttonAttributeClasses|merge(['hidden']) %}
-    {% endif %}
+      {% endif %}
 
-    {# the disclosureMenu already has support for description (shows below the label),
-    so the description that goes into the info icon needs to be keyed by something else - 'info' #}
-    {{ disclosureMenu(options|map(component => {
-      type: 'button',
-      label: component.getUiLabel(),
-      handle: showHandles and component is instance of('craft\\base\\Grippable') ? component.getHandle() : null,
-      info: showDescription and component is instance of('craft\\base\\Describable') ? component.getDescription() : null,
-      icon: component is instance of('craft\\base\\Iconic') ? component.getIcon() : null,
-      color: component is instance of('craft\\base\\Colorable') ? component.getColor() : null,
-      attributes: {
-        data: {
-          type: className(component),
-          id: component.getId(),
-          handle: showHandles and component is instance of('craft\\base\\Grippable') ? component.getHandle() : null,
+      {# the disclosureMenu already has support for description (shows below the label),
+      so the description that goes into the info icon needs to be keyed by something else - 'info' #}
+      {{ disclosureMenu(options|map(component => {
+        type: 'button',
+        label: component.getUiLabel(),
+        handle: showHandles and component is instance of('craft\\base\\Grippable') ? component.getHandle() : null,
+        info: showDescription and component is instance of('craft\\base\\Describable') ? component.getDescription() : null,
+        icon: component is instance of('craft\\base\\Iconic') ? component.getIcon() : null,
+        color: component is instance of('craft\\base\\Colorable') ? component.getColor() : null,
+        attributes: {
+          data: {
+            type: className(component),
+            id: component.getId(),
+            handle: showHandles and component is instance of('craft\\base\\Grippable') ? component.getHandle() : null,
+          },
+        },
+        liAttributes: {
+          class: {
+            hidden: component.getId() in valueIds
+          }|filter|keys,
         },
-      },
-      liAttributes: {
-        class: {
-          hidden: component.getId() in valueIds
-        }|filter|keys,
-      },
-    }), {
-      buttonLabel: 'Choose'|t('app'),
-      buttonAttributes: {
-        class: buttonAttributeClasses,
-      },
-      omitIfEmpty: false,
-      withSearchInput,
-      disabled,
-    }) }}
+      }), {
+        buttonLabel: 'Choose'|t('app'),
+        buttonAttributes: {
+          class: buttonAttributeClasses,
+        },
+        omitIfEmpty: false,
+        withSearchInput,
+        disabled,
+      }) }}
+    {% else %}
+      <craft-action-menu {% if withSearchInput %}searchable{% endif %} class="mr-1">
+        <craft-button
+          type="button"
+          slot="invoker"
+          icon="chevron-down"
+          command="--choose-item"
+          appearance="outline"
+          {{ attr({disabled: disabled}) }}
+        >
+          {{ 'Choose'|t('app') }}
+        </craft-button>
+
+        <div slot="content">
+          {% for component in options %}
+            {% set optionHandle = showHandles and component is instance of('craft\\base\\Grippable') ? component.getHandle() : null %}
+            {% set optionDescription = showDescription and component is instance of('craft\\base\\Describable') ? component.getDescription() : null %}
+            {# `hidden` is consumer-owned visibility (already selected); the menu's
+               `searchable` filter uses the separate `data-search-hidden` channel and
+               matches against textContent + `data-keywords`. #}
+            {% tag 'craft-action-item' with {
+              icon: component is instance of('craft\\base\\Iconic') ? (component.getIcon() ?: false) : false,
+              'icon-color': component is instance of('craft\\base\\Colorable') ? (component.getColor().value ?? false) : false,
+              hidden: component.getId() in valueIds,
+              data: {
+                type: className(component),
+                id: component.getId(),
+                keywords: [optionHandle, optionDescription]|filter|join(' ') ?: false,
+              },
+            } %}
+              {%- apply spaceless %}
+                <span class="inline-flex flex-col items-start gap-2xs">
+                  <span>{{ component.getUiLabel() }}</span>
+                  {% if optionHandle %}
+                    <span class="menu-item-description mt-2xs smalltext light code">{{ optionHandle }}</span>
+                  {% endif %}
+                  {% if optionDescription %}
+                    <span class="menu-item-description mt-2xs smalltext light">{{ optionDescription }}</span>
+                  {% endif %}
+                </span>
+              {% endapply -%}
+            {% endtag %}
+          {% endfor %}
+        </div>
+      </craft-action-menu>
+    {% endif %}
 
     {% if createAction and not disabled %}
       {{ forms.button({
-        class: ['dashed', 'create-btn'],
+        class: ['create-btn'],
         label: 'Create'|t('app'),
         icon: 'plus',
+        appearance: 'outline',
+        command: '--create-item',
       }) }}
     {% endif %}
   </div>
 {% endtag %}
 
-{% if not disabled and registerJs %}
+{% if legacy and not disabled and registerJs %}
   {% set jsSettings = {
     id: id|namespaceInputId,
     name: name|namespaceInputName,
@@ -129,8 +216,8 @@
   }|merge(jsSettings ?? {}) %}
 
   {% js %}
-    (() => {
-      new {{ jsClass }}({{ jsSettings|json_encode|raw }});
+  (() => {
+    new {{ jsClass }}({{ jsSettings|json_encode|raw }});
     })();
   {% endjs %}
 {% endif %}
diff --git a/resources/templates/_includes/forms/editableTable.twig b/resources/templates/_includes/forms/editableTable.twig
index 7522a887589..388fb4d63c1 100644
--- a/resources/templates/_includes/forms/editableTable.twig
+++ b/resources/templates/_includes/forms/editableTable.twig
@@ -14,56 +14,36 @@
 {%- set allowReorder = (allowReorder ?? false) and not staticRows %}
 {%- set allowDelete = (allowDelete ?? false) and not staticRows %}
 
-{% set actionMenuItems = [
-  {
-    icon: 'arrow-up',
-    label: 'Move up'|t('app'),
-    attributes: {
-      data: {action: 'moveUp'},
-    },
-  },
-  {
-    icon: 'arrow-down',
-    label: 'Move down'|t('app'),
-    attributes: {
-      data: {action: 'moveDown'},
-    },
-  },
-] %}
-
-{% if not static %}
-    {{ hiddenInput(name, '') }}
-{% endif %}
 
 {% macro cellClass(fullWidth, col, class) %}
-    {{- (class is iterable ? class : [class])|merge([
-        "#{col.type}-cell",
-        col.type in [
-            'autosuggest',
-            'color',
-            'date',
-            'email',
-            'multiline',
-            'number',
-            'singleline',
-            'template',
-            'time',
-            'url',
-        ] ? 'textual' : null,
-        fullWidth and (col.thin ?? false) ? 'thin' : null,
-        col.info is defined ? 'has-info' : null,
-    ]|filter)|join(' ') -}}
+  {{- (class is iterable ? class : [class])|merge([
+    "#{col.type}-cell",
+    col.type in [
+      'autosuggest',
+      'color',
+      'date',
+      'email',
+      'multiline',
+      'number',
+      'singleline',
+      'template',
+      'time',
+      'url',
+    ] ? 'textual' : null,
+    fullWidth and (col.thin ?? false) ? 'thin' : null,
+    col.info is defined ? 'has-info' : null,
+  ]|filter)|join(' ') -}}
 {% endmacro %}
 
 {% set tableAttributes = {
-    id: id,
-    class: [
-        'editable',
-        'cp-table cp-table--editable',
-        fullWidth ? 'w-full',
-        static ? 'static cp-table--static',
-        totalRows == 0 ? 'hidden',
-    ]|filter,
+  id: id,
+  class: [
+    'editable',
+    'cp-table cp-table--editable',
+    fullWidth ? 'w-full',
+    static ? 'static cp-table--static',
+    totalRows == 0 ? 'hidden',
+  ]|filter,
 } %}
 
 {%- if block('attr') is defined %}
@@ -71,255 +51,265 @@
 {% endif %}
 
 {% for col in cols %}
-    {%- switch col.type %}
-        {%- case 'time' %}
-            {%- do registerLegacyAsset('CraftCms\\Cms\\View\\LegacyAssets\\TimepickerAsset') %}
-        {%- case 'template' %}
-            {%- do registerLegacyAsset("CraftCms\\Cms\\View\\LegacyAssets\\VueAsset") %}
-    {%- endswitch %}
+  {%- switch col.type %}
+  {%- case 'time' %}
+    {%- do registerLegacyAsset('CraftCms\\Cms\\View\\LegacyAssets\\TimepickerAsset') %}
+  {%- case 'template' %}
+    {%- do registerLegacyAsset("CraftCms\\Cms\\View\\LegacyAssets\\VueAsset") %}
+  {%- endswitch %}
 {% endfor %}
 
-<span role="status" class="sr-only" data-status-message></span>
-{% tag 'table' with tableAttributes %}
+<div slot="input">
+  <span role="status" class="sr-only" data-status-message></span>
+  {% if not static %}
+    {{ hiddenInput(name, '') }}
+  {% endif %}
+  {% tag 'table' with tableAttributes %}
     {% for col in cols %}
-        <col>
+      <col>
     {% endfor %}
     {% if (allowDelete and allowReorder) %}
-        <colgroup span="2"></colgroup>
+      <colgroup span="2"></colgroup>
     {% else %}
-        {% if allowDelete %}<col>{% endif %}
-        {% if allowReorder %}<col>{% endif %}
+      {% if allowDelete %}
+        <col>{% endif %}
+      {% if allowReorder %}
+        <col>{% endif %}
     {% endif %}
     {% if includeRowId %}
-        <col> {# for hidden row ID #}
+      <col> {# for hidden row ID #}
     {% endif %}
     {% if cols|filter(c => (c.headingHtml ?? c.heading ?? c.info ?? '') is not same as(''))|length %}
-        <thead>
-            <tr>
-                {% for col in cols %}
-                    {% set columnHeadingId = "#{id}-heading-#{loop.index}" %}
-                    <th id="{{ columnHeadingId }}" scope="col" class="{{ _self.cellClass(fullWidth, col, col.class ?? []) }}">
-                        {%- if col.headingHtml is defined %}
-                            {{- col.headingHtml|raw }}
-                        {%- elseif col.heading ?? false %}
-                            {{- col.heading }}
-                        {%- else %}
-                            &nbsp;
-                        {%- endif %}
-                        {%- if col.info is defined -%}
-                            <span class="info{% if static %} disabled{% endif %}"{% if static %} disabled=""{% endif %}>{{ col.info|md|raw }}</span>
-                        {%- endif -%}
-                    </th>
-                {% endfor %}
-                {% if (allowDelete or allowReorder) %}
-                    <th colspan="{{ not allowDelete or not allowReorder ? 1 : 2 }}" scope="colgroup"><span class="sr-only">{{ 'Row actions'|t('app') }}</span></th>
-                {% endif %}
-                {% if includeRowId %}
-                    <th class="hidden">Row ID</th>
-                {% endif %}
-            </tr>
-        </thead>
+      <thead>
+        <tr>
+          {% for col in cols %}
+            {% set columnHeadingId = "#{id}-heading-#{loop.index}" %}
+            <th id="{{ columnHeadingId }}" scope="col" class="{{ _self.cellClass(fullWidth, col, col.class ?? []) }}">
+              {%- if col.headingHtml is defined %}
+                {{- col.headingHtml|raw }}
+              {%- elseif col.heading ?? false %}
+                {{- col.heading }}
+              {%- else %}
+                &nbsp;
+              {%- endif %}
+              {%- if col.info is defined -%}
+                <span class="info{% if static %} disabled{% endif %}"{% if static %} disabled=""{% endif %}>{{ col.info|md|raw }}</span>
+              {%- endif -%}
+            </th>
+          {% endfor %}
+          {% if (allowDelete or allowReorder) %}
+            <th colspan="{{ not allowDelete or not allowReorder ? 1 : 2 }}" scope="colgroup">
+              <span class="sr-only">{{ 'Row actions'|t('app') }}</span></th>
+          {% endif %}
+          {% if includeRowId %}
+            <th class="hidden">Row ID</th>
+          {% endif %}
+        </tr>
+      </thead>
     {% endif %}
     <tbody>
-        {% for rowId, row in rows %}
-            {% set rowNumber = loop.index %}
-            {% set rowName = 'Row {index}'|t('app', {index: rowNumber}) %}
-            {% set actionBtnLabel = "#{rowName} #{'Actions'|t('app')}" %}
-            <tr data-id="{{ rowId }}">
-                {% for colId, col in cols %}
-                    {% set cell = row[colId] is defined ? row[colId] : (defaultValues[colId] ?? null) %}
-                    {% set value = cell.value is defined ? cell.value : cell %}
-                    {% if col.width ?? false %}
-                        {% set width = col.width|trim %}
-                        {% set width = width ends with 'px' ? width|slice(0, width|length - 2) : width %}
-                        {% set minWidth = width ends with '%' ? col.width : "#{col.width}px" %}
-                        {% set widthAttributes = " width=\"#{width}\" style=\"min-width: #{minWidth}\"" %}
-                    {% else %}
-                        {% set widthAttributes = '' %}
+      {% for rowId, row in rows %}
+        {% set rowNumber = loop.index %}
+        {% set rowName = 'Row {index}'|t('app', {index: rowNumber}) %}
+        {% set actionBtnLabel = "#{rowName} #{'Actions'|t('app')}" %}
+        <tr data-id="{{ rowId }}">
+          {% for colId, col in cols %}
+            {% set cell = row[colId] is defined ? row[colId] : (defaultValues[colId] ?? null) %}
+            {% set value = cell.value is defined ? cell.value : cell %}
+            {% if col.width ?? false %}
+              {% set width = col.width|trim %}
+              {% set width = width ends with 'px' ? width|slice(0, width|length - 2) : width %}
+              {% set minWidth = width ends with '%' ? col.width : "#{col.width}px" %}
+              {% set widthAttributes = " width=\"#{width}\" style=\"min-width: #{minWidth}\"" %}
+            {% else %}
+              {% set widthAttributes = '' %}
+            {% endif %}
+            {% if col.type == 'heading' %}
+              <th
+                scope="row"
+                class="{{ _self.cellClass(fullWidth, col, cell.class ?? col.class ?? []) }}"{{ widthAttributes|raw }}>{{ value|raw }}</th>
+            {% elseif col.type == 'html' %}
+              <td class="{{ _self.cellClass(fullWidth, col, cell.class ?? col.class ?? []) }}"{{ widthAttributes|raw }}>{{ value|raw }}</td>
+            {% else %}
+              {% set headingId = "#{id}-heading-#{loop.index}" %}
+              {% set hasErrors = cell.errors.isNotEmpty() ?? false %}
+              {% set cellName = name~'['~rowId~']['~colId~']' %}
+              {% set isCode = (col.code ?? false) or col.type == 'color' %}
+              <td class="{{ _self.cellClass(fullWidth, col, col.class ?? []) }} {% if isCode %}code{% endif %} {% if hasErrors %}error{% endif %}"{{ widthAttributes|raw }}>
+                {% block tablecell %}
+                  {%- switch col.type -%}
+                  {%- case 'checkbox' -%}
+                    <div class="checkbox-wrapper">
+                      {% include "_includes/forms/checkbox" with {
+                        name: cellName,
+                        value:  col.value ?? 1,
+                        checked: value is not empty,
+                        disabled: static,
+                        labelledBy: headingId,
+                        describedBy: describedBy,
+                      } only %}
+                    </div>
+                  {%- case 'icon' -%}
+                    {% include '_includes/forms/iconPicker' with {
+                      name: cellName,
+                      value,
+                      small: true,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'color' -%}
+                    {% include "_includes/forms/color" with {
+                      name: cellName,
+                      value: value,
+                      small: true,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'date' -%}
+                    {% include "_includes/forms/date" with {
+                      name: cellName,
+                      value: value,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'lightswitch' -%}
+                    {% include "_includes/forms/lightswitch" with {
+                      name: cellName,
+                      on: value,
+                      value: col.value ?? 1,
+                      small: true,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {% case 'select' -%}
+                    {% include "_includes/forms/select" with {
+                      class: 'small',
+                      name: cellName,
+                      options: cell.options ?? col.options,
+                      value: value,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'time' -%}
+                    {% include "_includes/forms/time" with {
+                      name: cellName,
+                      value: value,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'email' or 'url' -%}
+                    {% include "_includes/forms/text" with {
+                      type: col.type,
+                      name: cellName,
+                      placeholder: col.placeholder ?? null,
+                      value:  value,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- case 'autosuggest' or 'template' -%}
+                    {% include "_includes/forms/autosuggest" with {
+                      name: cellName,
+                      suggestTemplates: col.type == 'template',
+                      suggestEnvVars: col.suggestEnvVars ?? false,
+                      suggestAliases: col.suggestAliases ?? false,
+                      value: value,
+                      disabled: static,
+                      labelledBy: headingId,
+                      describedBy: describedBy,
+                    } only %}
+                  {%- default -%}
+                    {% if col.type == 'number' and col.locale ?? false %}
+                      {{ hiddenInput("#{cellName}[locale]", col.locale) }}
+                      {% set cellName = "#{cellName}[value]" %}
+                      {% set value = value|number(locale=col.locale) %}
                     {% endif %}
-                    {% if col.type == 'heading' %}
-                        <th scope="row" class="{{ _self.cellClass(fullWidth, col, cell.class ?? col.class ?? []) }}"{{ widthAttributes|raw }}>{{ value|raw }}</th>
-                    {% elseif col.type == 'html' %}
-                        <td class="{{ _self.cellClass(fullWidth, col, cell.class ?? col.class ?? []) }}"{{ widthAttributes|raw }}>{{ value|raw }}</td>
+                    {% if static %}
+                      <pre class="noteditable">{{ value }}</pre>
                     {% else %}
-                        {% set headingId = "#{id}-heading-#{loop.index}" %}
-                        {% set hasErrors = cell.errors.isNotEmpty() ?? false %}
-                        {% set cellName = name~'['~rowId~']['~colId~']' %}
-                        {% set isCode = (col.code ?? false) or col.type == 'color' %}
-                        <td class="{{ _self.cellClass(fullWidth, col, col.class ?? []) }} {% if isCode %}code{% endif %} {% if hasErrors %}error{% endif %}"{{ widthAttributes|raw }}>
-                            {% block tablecell %}
-                                {%- switch col.type -%}
-                                    {%- case 'checkbox' -%}
-                                        <div class="checkbox-wrapper">
-                                            {% include "_includes/forms/checkbox" with {
-                                                name: cellName,
-                                                value:  col.value ?? 1,
-                                                checked: value is not empty,
-                                                disabled: static,
-                                                labelledBy: headingId,
-                                                describedBy: describedBy,
-                                            } only %}
-                                        </div>
-                                    {%- case 'icon' -%}
-                                        {% include '_includes/forms/iconPicker' with {
-                                          name: cellName,
-                                          value,
-                                          small: true,
-                                          disabled: static,
-                                          labelledBy: headingId,
-                                          describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'color' -%}
-                                        {% include "_includes/forms/color" with {
-                                            name: cellName,
-                                            value: value,
-                                            small: true,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'date' -%}
-                                        {% include "_includes/forms/date" with {
-                                            name: cellName,
-                                            value: value,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'lightswitch' -%}
-                                        {% include "_includes/forms/lightswitch" with {
-                                            name: cellName,
-                                            on: value,
-                                            value: col.value ?? 1,
-                                            small: true,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {% case 'select' -%}
-                                        {% include "_includes/forms/select" with {
-                                            class: 'small',
-                                            name: cellName,
-                                            options: cell.options ?? col.options,
-                                            value: value,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'time' -%}
-                                        {% include "_includes/forms/time" with {
-                                            name: cellName,
-                                            value: value,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'email' or 'url' -%}
-                                        {% include "_includes/forms/text" with {
-                                            type: col.type,
-                                            name: cellName,
-                                            placeholder: col.placeholder ?? null,
-                                            value:  value,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- case 'autosuggest' or 'template' -%}
-                                        {% include "_includes/forms/autosuggest" with {
-                                            name: cellName,
-                                            suggestTemplates: col.type == 'template',
-                                            suggestEnvVars: col.suggestEnvVars ?? false,
-                                            suggestAliases: col.suggestAliases ?? false,
-                                            value: value,
-                                            disabled: static,
-                                            labelledBy: headingId,
-                                            describedBy: describedBy,
-                                        } only %}
-                                    {%- default -%}
-                                        {% if col.type == 'number' and col.locale ?? false %}
-                                            {{ hiddenInput("#{cellName}[locale]", col.locale) }}
-                                            {% set cellName = "#{cellName}[value]" %}
-                                            {% set value = value|number(locale=col.locale) %}
-                                        {% endif %}
-                                        {% if static %}
-                                            <pre class="noteditable">{{ value }}</pre>
-                                        {% else %}
-                                            {% if value %}
-                                                <div class="editable-table-preview" aria-hidden="true">{{ value }}</div>
-                                            {% endif %}
-                                            {{ tag('textarea', {
-                                                name: cellName,
-                                                rows: col.rows ?? 1,
-                                                placeholder: col.placeholder ?? false,
-                                                autocomplete: isCode ? 'off' : false,
-                                                autocorrect: isCode ? 'off' : false,
-                                                autocapitalize: isCode ? 'off' : false,
-                                                spellcheck: isCode ? 'false' : false,
-                                                aria: {
-                                                    labelledby: headingId,
-                                                    describedby: describedBy,
-                                                },
-                                                html: value,
-                                            }) }}
-                                        {% endif %}
-                                {%- endswitch -%}
-                            {% endblock %}
-                        </td>
+                      {% if value %}
+                        <div class="editable-table-preview" aria-hidden="true">{{ value }}</div>
+                      {% endif %}
+                      {{ tag('textarea', {
+                        name: cellName,
+                        rows: col.rows ?? 1,
+                        placeholder: col.placeholder ?? false,
+                        autocomplete: isCode ? 'off' : false,
+                        autocorrect: isCode ? 'off' : false,
+                        autocapitalize: isCode ? 'off' : false,
+                        spellcheck: isCode ? 'false' : false,
+                        aria: {
+                          labelledby: headingId,
+                          describedby: describedBy,
+                        },
+                        html: value,
+                      }) }}
                     {% endif %}
-                {% endfor %}
-                {% if allowReorder -%}
-                    <td class="thin action">
-                      <div class="flex flex-nowrap">
-                        <craft-reorder-button aria-label="{{ 'Reorder'|t('app') }}"></craft-reorder-button>
-                      </div>
-                    </td>
-                {%- endif -%}
-                {%- if allowDelete -%}
-                    <td class="thin action">
-                      <craft-button
-                        icon="x"
-                        size="small"
-                        appearance="plain"
-                        aria-label="{{ 'Delete row {index}'|t('app', {
-                          index: rowNumber,
-                        }) }}"
-                        variant="danger"
-                        command="--delete-row"
-                        {% if minRows and totalRows <= minRows %}disabled{% endif %}
-                      >
-                      </craft-button>
-                    </td>
-                {%- endif -%}
-                {% for inputName, value in row.hiddenInputs ?? [] %}
-                    {{ hiddenInput("#{name}[#{rowId}][#{inputName}]", value) }}
-                {% endfor %}
-                {% if includeRowId and (row.rowId ?? false) %}
-                    {{ hiddenInput("#{name}[#{rowId}][rowId]", row.rowId) }}
-                {% endif %}
-            </tr>
-        {% endfor %}
+                  {%- endswitch -%}
+                {% endblock %}
+              </td>
+            {% endif %}
+          {% endfor %}
+          {% if allowReorder -%}
+            <td class="thin action">
+              <div class="flex flex-nowrap">
+                <craft-reorder-button aria-label="{{ 'Reorder'|t('app') }}"></craft-reorder-button>
+              </div>
+            </td>
+          {%- endif -%}
+          {%- if allowDelete -%}
+            <td class="thin action">
+              <craft-button
+                icon="x"
+                size="small"
+                appearance="plain"
+                aria-label="{{ 'Delete row {index}'|t('app', {
+                  index: rowNumber,
+                }) }}"
+                variant="danger"
+                command="--delete-row"
+                {% if minRows and totalRows <= minRows %}disabled{% endif %}
+              >
+              </craft-button>
+            </td>
+          {%- endif -%}
+          {% for inputName, value in row.hiddenInputs ?? [] %}
+            {{ hiddenInput("#{name}[#{rowId}][#{inputName}]", value) }}
+          {% endfor %}
+          {% if includeRowId and (row.rowId ?? false) %}
+            {{ hiddenInput("#{name}[#{rowId}][rowId]", row.rowId) }}
+          {% endif %}
+        </tr>
+      {% endfor %}
     </tbody>
-{% endtag %}
+  {% endtag %}
 
-{% if allowAdd %}
-  {% set buttonText = addRowLabel ?? "Add a row"|t('app') %}
-  <div
-    class="border border-dashed border-neutral-border-quiet rounded-bl-md rounded-br-md border-t-0 p-1 pt-2 -mt-1"
-  >
-    <craft-button type="button" appearance="plain" size="small" class="w-full" command="--add-row">
-      <craft-icon name="plus"></craft-icon>
-      {{ buttonText }}
-    </craft-button>
-  </div>
-{% endif %}
+  {% if allowAdd %}
+    {% set buttonText = addRowLabel ?? "Add a row"|t('app') %}
+    <div
+      class="border border-dashed border-neutral-border-quiet rounded-bl-md rounded-br-md border-t-0 p-1 pt-2 -mt-1"
+    >
+      <craft-button type="button" appearance="plain" size="small" class="w-full" command="--add-row">
+        <craft-icon name="plus"></craft-icon>
+        {{ buttonText }}
+      </craft-button>
+    </div>
+  {% endif %}
+</div>
 
 {% if initJs %}
-    {% set jsId = id|namespaceInputId|e('js') %}
-    {% set jsName = name|namespaceInputName|e('js') %}
-    {% set jsCols = cols|json_encode %}
-    {% set defaultValues = defaultValues ?? null %}
-    {% js %}
-        new Craft.EditableTable("{{ jsId }}", "{{ jsName }}", {{ jsCols|raw }}, {
+  {% set jsId = id|namespaceInputId|e('js') %}
+  {% set jsName = name|namespaceInputName|e('js') %}
+  {% set jsCols = cols|json_encode %}
+  {% set defaultValues = defaultValues ?? null %}
+  {% js %}
+  new Craft.EditableTable("{{ jsId }}", "{{ jsName }}", {{ jsCols|raw }}, {
             defaultValues: {{ defaultValues ? defaultValues|json_encode|raw : '{}' }},
             allowAdd: {{ allowAdd ? 'true' : 'false' }},
             allowDelete: {{ allowDelete ? 'true' : 'false' }},
diff --git a/resources/templates/_includes/forms/entryTypeSelect.twig b/resources/templates/_includes/forms/entryTypeSelect.twig
index e146654a2d3..0d17d8b02f1 100644
--- a/resources/templates/_includes/forms/entryTypeSelect.twig
+++ b/resources/templates/_includes/forms/entryTypeSelect.twig
@@ -6,7 +6,7 @@
   showIndicators: showIndicators ?? allowOverrides,
   showDescription: showDescription ?? allowOverrides,
   createAction: (create ?? false) ? 'entry-types/new' : null,
-  jsClass: jsClass ?? 'Craft.EntryTypeSelectInput',
+  jsClass: jsClass ?? false,
   jsSettings: {
     allowOverrides,
   }|merge(jsSettings ?? {}),
diff --git a/resources/templates/_includes/forms/fld/custom-field-settings.twig b/resources/templates/_includes/forms/fld/custom-field-settings.twig
index 5e41460699c..18e731b3adb 100644
--- a/resources/templates/_includes/forms/fld/custom-field-settings.twig
+++ b/resources/templates/_includes/forms/fld/custom-field-settings.twig
@@ -18,43 +18,45 @@
 
     {% js %}
       (() => {
-        const componentSelect = $("#{{ fieldSelectId|namespaceInputId }}").data('componentSelect');
+        const componentSelect = document.getElementById("{{ fieldSelectId|namespaceInputId }}");
         let replaced = false;
 
         const oldName = {{ defaultLabel|json_encode|raw }};
         const oldHandle = {{ defaultHandle|json_encode|raw }};
         const oldInstructions = {{ defaultInstructions|json_encode|raw }};
 
-        const $labelInput = $("#{{ 'label'|namespaceInputId }}");
-        const $handleInput = $("#{{ 'handle'|namespaceInputId }}");
-        const $instructionsInput = $("#{{ 'instructions'|namespaceInputId }}");
+        const labelInput = document.getElementById("{{ 'label'|namespaceInputId }}");
+        const handleInput = document.getElementById("{{ 'handle'|namespaceInputId }}");
+        const instructionsInput = document.getElementById("{{ 'instructions'|namespaceInputId }}");
 
-        componentSelect.on('change', () => {
-          const $chip = componentSelect.getComponents().first();
+        componentSelect.addEventListener('change', () => {
+          const chip = componentSelect.querySelector('ul > li:not([data-removing]) > craft-chip');
 
-          if (!$chip.length) {
+          if (!chip) {
             return;
           }
 
-          const newName = $chip.data('label');
-          const newHandle = $chip.data('handle');
-          const newInstructions = $chip.data('instructions');
-
-          $labelInput.attr('placeholder', newName);
-          $handleInput.attr('placeholder', newHandle);
-          $instructionsInput.attr('placeholder', newInstructions);
+          if (chip.dataset.label != null) {
+            labelInput.placeholder = chip.dataset.label;
+          }
+          if (chip.dataset.handle != null) {
+            handleInput.placeholder = chip.dataset.handle;
+          }
+          if (chip.dataset.instructions != null) {
+            instructionsInput.placeholder = chip.dataset.instructions;
+          }
 
           if (!replaced) {
             // Override the name/handle/instructions for consistency with the old field,
             // if they weren't already being overridden
-            if (!$labelInput.val()) {
-              $labelInput.val(oldName);
+            if (!labelInput.value) {
+              labelInput.value = oldName;
             }
-            if (!$handleInput.val()) {
-              $handleInput.val(oldHandle);
+            if (!handleInput.value) {
+              handleInput.value = oldHandle;
             }
-            if (!$instructionsInput.val()) {
-              $instructionsInput.val(oldInstructions);
+            if (!instructionsInput.value) {
+              instructionsInput.value = oldInstructions;
             }
           }
 
diff --git a/resources/templates/_includes/forms/lightswitch.twig b/resources/templates/_includes/forms/lightswitch.twig
index 1033721562d..f4a684a93d3 100644
--- a/resources/templates/_includes/forms/lightswitch.twig
+++ b/resources/templates/_includes/forms/lightswitch.twig
@@ -1,83 +1,16 @@
-{%- set id = id ?? "lightswitch#{random()}" %}
-{%- set on = on ?? false %}
-{%- set indeterminate = not on and (indeterminate ?? false) %}
-{%- set value = value ?? '1' %}
-{%- set indeterminateValue = indeterminateValue ?? '-' %}
-{%- set small = small ?? false %}
-{%- set toggle = toggle ?? null %}
-{%- set reverseToggle = reverseToggle ?? null %}
-{%- set disabled = (disabled ?? false) ? true : false %}
-{%- set onLabel = onLabel ?? label ?? false %}
-{%- set offLabel = offLabel ?? false %}
-{%- set hasOnLabel = onLabel is not same as(false) %}
-{%- set hasOffLabel = offLabel is not same as(false) %}
-{%- set hasLabels = hasOnLabel or hasOffLabel %}
-{%- set descriptionId = descriptionId ?? "#{id}-desc" %}
+{# Renders a <craft-switch> web component from the legacy lightswitch
+   variables (`id`, `name`, `value`, `on`, `indeterminate`,
+   `indeterminateValue`, `small`, `disabled`, `label`, `onLabel`, `offLabel`,
+   `toggle`, `reverseToggle`, `labelledBy`/`labelId`, `describedBy`,
+   `containerAttributes` and an `attr` block).
 
-{%- set containerAttributes = {
-    id: id,
-    class: [
-        'lightswitch',
-        on ? 'on' : null,
-        hasLabels ? 'has-labels' : null,
-        indeterminate ? 'indeterminate' : null,
-        small ? 'small' : null,
-        toggle or reverseToggle ? 'fieldtoggle' : null,
-        disabled ? 'noteditable' : null,
-    ]|filter,
-    data: {
-        value: value != '1' ? value : false,
-        'indeterminate-value': indeterminateValue != '-' ? indeterminateValue : false,
-        target: toggle ?: false,
-        'reverse-target': reverseToggle ?: false,
-    },
-    type: 'button',
-    role: 'switch',
-    aria: {
-        checked: on ? 'true' : (indeterminate ? 'mixed' : 'false'),
-        labelledby: labelledBy ?? labelId ?? false,
-        describedby: [describedBy ?? null, hasLabels ? descriptionId : null]|filter|join(' ') ?: false,
-    },
-    disabled: disabled ?? false
-}|merge(containerAttributes ?? [], recursive=true) %}
+   The legacy-to-component mapping — and the deprecation of unsupported
+   legacy params — lives in FormFields::lightswitchFromConfig(); this
+   template only handles the `attr` block. #}
 
+{%- set containerAttributes = containerAttributes ?? {} %}
 {%- if block('attr') is defined %}
-    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+  {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% set input %}
-    {% tag 'button' with containerAttributes %}
-        <div class="lightswitch-container">
-            <div class="handle"></div>
-        </div>
-        {% if name is defined -%}
-            {{ hiddenInput(name, on ? value : (indeterminate ? indeterminateValue : ''), {disabled: disabled}) }}
-        {%- endif %}
-    {% endtag %}
-{% endset %}
-
-{% if hasLabels -%}
-    <div class="lightswitch-outer-container">
-        {% if hasLabels %}
-            {{ tag('span', {
-                id: descriptionId,
-                class: 'visually-hidden',
-                text: [
-                    onLabel ? 'Check for {onLabel}.'|t('app', {onLabel: onLabel}),
-                    offLabel ? 'Uncheck for {offLabel}.'|t('app', {offLabel: offLabel}),
-                ]|filter|join(' '),
-            }) }}
-        {% endif %}
-        <div class="lightswitch-inner-container">
-            {% if hasOffLabel %}
-                <span data-toggle="off" aria-hidden="true">{{ offLabel }}</span>
-            {% endif %}
-            {{ input }}
-            {% if hasOnLabel %}
-                <span data-toggle="on" aria-hidden="true">{{ onLabel }}</span>
-            {% endif %}
-        </div>
-    </div>
-{% else %}
-    {{ input }}
-{%- endif %}
+{{ craft.cp.lightswitch(_context)|raw }}
diff --git a/resources/templates/_includes/forms/radio.twig b/resources/templates/_includes/forms/radio.twig
index c7f12ccb365..4847e8844c1 100644
--- a/resources/templates/_includes/forms/radio.twig
+++ b/resources/templates/_includes/forms/radio.twig
@@ -1,82 +1,15 @@
-{% from '_includes/forms' import text %}
+{# Renders a <craft-radio> from the legacy radio variables (`id`, `name`,
+   `value`, `checked`, `label`/`radioLabel`, `labelId`, `icon`, `color`,
+   `custom`, `autofocus`, `disabled`, `describedBy`, `class`,
+   `inputAttributes`, `containerAttributes` and an `attr` block).
 
-{% set id = id ?? "radio#{random()}" %}
-{% set label = radioLabel ?? label ?? null %}
-{% set labelId = labelId ?? "#{id}-label" %}
-{% set color = color ?? null %}
-{% set icon = icon ?? null %}
-
-{% set containerAttributes = {
-    for: id,
-    id: labelId,
-}|merge(containerAttributes ?? []) %}
+   The legacy-to-component mapping — including the custom-option "Other:"
+   text input and its JS wiring — lives in FormFields::radioFromConfig();
+   this template only handles the `attr` block. #}
 
+{%- set containerAttributes = containerAttributes ?? {} %}
 {%- if block('attr') is defined %}
-    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+  {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% set inputAttributes = {
-    type: 'radio',
-    id: id,
-    class: (class ?? [])|explodeClass|merge(['radio']),
-    name: name ?? false,
-    value: value ?? '1',
-    checked: checked ?? false,
-    autofocus: (autofocus ?? false) and not Request.isMobileBrowser(true),
-    disabled: disabled ?? false,
-    aria: {
-        describedby: describedBy ?? false,
-    },
-}|merge(inputAttributes ?? [], recursive=true) %}
-
-{{ tag('input', inputAttributes) }}
-
-{% tag 'label' with containerAttributes %}
-    {% if custom ?? false %}
-        {{ 'Other:'|t('app') }}
-    {% else %}
-        <div class="flex flex-nowrap gap-xs">
-            {% if icon or color %}
-                {% if icon %}
-                    {% set style = {
-                        '--icon-color': color,
-                    }|filter %}
-                    {{ tag('span', {
-                        class: 'cp-icon puny',
-                        style,
-                        html: iconSvg(icon),
-                    }) }}
-                {% else %}
-                    <div class="color small">
-                        <div class="color-preview" style="background-color: {{ color }}"></div>
-                    </div>
-                {% endif %}
-                <span>{{ label }}</span>
-            {% else %}
-                {{ label }}
-            {% endif %}
-        </div>
-    {% endif %}
-{% endtag %}
-
-{% if custom ?? false %}
-    {% set textId = "#{id}-text" %}
-    <div class="custom-option-wrapper">
-        {{ text({
-            id: textId,
-            value: value ?? null,
-            class: 'small custom-option-input',
-            labelledBy: labelId,
-        }) }}
-    </div>
-
-    {% js %}
-        (() => {
-            const $radio = $('#{{ id|namespaceInputId }}');
-            const $text = $('#{{ textId|namespaceInputId }}');
-            $text.on('input', () => {
-                $radio.val($text.val());
-            });
-        })();
-    {% endjs %}
-{% endif %}
+{{ craft.cp.radio(_context)|raw }}
diff --git a/resources/templates/_includes/forms/radioGroup.twig b/resources/templates/_includes/forms/radioGroup.twig
index 633a6435edc..d631ae9fbea 100644
--- a/resources/templates/_includes/forms/radioGroup.twig
+++ b/resources/templates/_includes/forms/radioGroup.twig
@@ -1,38 +1,14 @@
-{%- set options = options ?? [] %}
-{%- set value = value ?? null %}
-{%- set disabled = disabled ?? false %}
+{# Renders a radio group from the legacy radioGroup variables (`id`, `name`,
+   `options`, `value`, `toggle`, `targetPrefix`, `disabled`, `describedBy`,
+   `autofocus`, `class`, `containerAttributes` and an `attr` block).
 
-{%- set id = id ?? "radio-group-#{random()}" %}
-{%- set class = (class ?? [])|explodeClass|merge([
-    'radio-group',
-    (toggle ?? false) ? 'fieldtoggle' : null,
-]|filter) %}
-
-{%- set containerAttributes = {
-    id,
-    class,
-    data: {
-        'target-prefix': (toggle ?? false) ? (targetPrefix ?? '#') : false,
-    },
-}|merge(containerAttributes ?? [], recursive=true) %}
+   The legacy-to-component mapping lives in
+   FormFields::radioGroupFromConfig(); this template only handles the `attr`
+   block. #}
 
+{%- set containerAttributes = containerAttributes ?? {} %}
 {%- if block('attr') is defined %}
-    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+  {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% tag 'div' with containerAttributes %}
-    {%- for key, option in options %}
-        {%- if option is not iterable %}
-            {%- set option = {label: option, value: key} %}
-        {%- endif %}
-        <div>
-            {% include "_includes/forms/radio" with {
-                describedBy: describedBy ?? null,
-                name: name ?? null,
-                checked: (option.value is defined and option.value == value and (option.value or not (option.custom ?? false))),
-                autofocus: loop.first and (autofocus ?? false) and not Request.isMobileBrowser(true),
-                disabled: disabled,
-            }|merge(option) only %}
-        </div>
-    {% endfor %}
-{% endtag %}
+{{ craft.cp.radioGroup(_context)|raw }}
diff --git a/resources/templates/_special/licensing-issues.twig b/resources/templates/_special/licensing-issues.twig
index bf68d1fd99c..a8fcadc4700 100644
--- a/resources/templates/_special/licensing-issues.twig
+++ b/resources/templates/_special/licensing-issues.twig
@@ -47,7 +47,6 @@
           icon: 'refresh',
           label: 'Refresh'|t('app'),
           class: 'hairline',
-          spinner: true,
         }) }}
       </div>
     </div>
diff --git a/resources/templates/dashboard/_index.twig b/resources/templates/dashboard/_index.twig
index d3e7671bdde..9933d45ebf2 100644
--- a/resources/templates/dashboard/_index.twig
+++ b/resources/templates/dashboard/_index.twig
@@ -57,7 +57,7 @@
                             <div class="settings"></div>
                             <hr>
                             <div class="buttons clearafter">
-                                {{ forms.submitButton({label: 'Save'|t('app'), spinner: true}) }}
+                                {{ forms.submitButton({label: 'Save'|t('app')}) }}
                                 {{ forms.button({label: 'Cancel'|t('app'), class: 'cancel-btn'}) }}
                             </div>
                         </form>
diff --git a/resources/templates/users/_auth-methods.twig b/resources/templates/users/_auth-methods.twig
index ef83c21ecd6..884d5eea5e9 100644
--- a/resources/templates/users/_auth-methods.twig
+++ b/resources/templates/users/_auth-methods.twig
@@ -54,7 +54,6 @@
       {% if not isActive %}
         {{ forms.button({
           class: ['auth-method-setup-btn', 'hairline'],
-          spinner: true,
           type: 'button',
           label: 'Set up'|t('app'),
           attributes: {
diff --git a/resources/templates/users/_passkeys.twig b/resources/templates/users/_passkeys.twig
index 093e5a6a5c0..267768227df 100644
--- a/resources/templates/users/_passkeys.twig
+++ b/resources/templates/users/_passkeys.twig
@@ -11,7 +11,6 @@
   name: 'addSecurityKey',
   id: 'add-passkey-btn',
   label: 'Add a passkey'|t('app'),
-  spinner: true,
 }) }}
 
 <div id="passkey-errors" class="hidden"></div>
diff --git a/resources/views/forms/field-notice.blade.php b/resources/views/forms/field-notice.blade.php
deleted file mode 100644
index 3b0615b224a..00000000000
--- a/resources/views/forms/field-notice.blade.php
+++ /dev/null
@@ -1,25 +0,0 @@
-@php
-    /**
-     * Tip/warning notice for a form field. Split out of FormFields::fieldHtml.
-     *
-     * The label span keeps its trailing space (inside the span) so screen
-     * readers announce "Tip: …" with a natural pause, matching the legacy
-     * output.
-     *
-     * @var string $id
-     * @var string $variant 'info' or 'warning'
-     * @var string $icon Icon to disply as a prefix
-     * @var string $label Visually hidden prefix, e.g. t('Tip:')
-     * @var string $content Pre-parsed markdown paragraph HTML
-     */
-@endphp
-<craft-callout
-    id="{{ $id }}"
-    variant="{{ $variant }}"
-    @if($icon) icon="{{$icon}}" @endif
-    appearance="plain"
-    class="p-0 mt-1"
->
-    <span class="visually-hidden">{!! $label !!} </span>
-    {!! $content !!}
-</craft-callout>
diff --git a/resources/views/forms/field.blade.php b/resources/views/forms/field.blade.php
deleted file mode 100644
index 40fc4bc012a..00000000000
--- a/resources/views/forms/field.blade.php
+++ /dev/null
@@ -1,79 +0,0 @@
-@php
-    /**
-     * CP form field wrapper: heading, instructions, input container, notices,
-     * and errors. Ported from the string-built markup in FormFields::fieldHtml,
-     * which still owns all config defaulting and passes precomputed values here.
-     *
-     * Raw echoes are intentional throughout: every value is either
-     * caller-supplied HTML (label, input, headingPrefix/Suffix, labelExtra) or
-     * HTML prerendered by FormFields (labelHtml, notices, error list), matching
-     * the legacy unencoded concatenation.
-     *
-     * Inline runs (label internals, notice spans, input container) stay on one
-     * line — whitespace between inline elements is visible in the CP.
-     *
-     * Declared in a PHP docblock (rather than a Blade comment) so PhpStorm types
-     * these variables.
-     *
-     * @var array $fieldAttributes Merged attributes for the outer .field div
-     * @var array|null $status [status, label] or null
-     * @var string $statusId
-     * @var string|null $statusClass
-     * @var string|null $statusLabel
-     * @var bool $showHeading
-     * @var string|null $headingPrefix
-     * @var string|null $headingSuffix
-     * @var string|null $labelElementHtml Full <label>/<legend> element, or null
-     * @var bool $static
-     * @var bool $showLabelExtra
-     * @var string|null $actionMenuHtml
-     * @var string|null $attributeCopyHtml
-     * @var string|null $labelExtra
-     * @var string $instructionsId
-     * @var string|null $instructionsContent Markdown-parsed instructions
-     * @var string $instructionsPosition 'before' or 'after'
-     * @var array $inputContainerAttributes Merged attributes for the .input div
-     * @var string $input
-     * @var string $tipId
-     * @var string|null $tipContent
-     * @var string $warningId
-     * @var string|null $warningContent
-     * @var string|null $errorListHtml
-     */
-
-    use CraftCms\Cms\Support\Html;
-
-    use function CraftCms\Cms\t;
-@endphp
-<div{!! Html::renderTagAttributes($fieldAttributes) !!}>
-    @if ($status)
-        <div id="{{ $statusId }}" class="status-badge {{ $statusClass }}" title="{{ $statusLabel }}" aria-hidden="true"><span class="visually-hidden">{!! $statusLabel !!}</span></div>
-    @endif
-    @if ($showHeading)
-        <div class="heading font-bold mb-1">
-            {!! $headingPrefix !!}{!! $labelElementHtml !!}
-            @if ($static)
-                <span class="read-only-badge">{!! t('Read Only') !!}</span>
-            @endif
-            @if ($showLabelExtra)
-                <div class="flex-grow"></div>
-                {!! $actionMenuHtml !!}{!! $attributeCopyHtml !!}{!! $labelExtra !!}
-            @endif
-            {!! $headingSuffix !!}
-        </div>
-    @endif
-    @if ($instructionsContent && $instructionsPosition === 'before')
-        <div id="{{ $instructionsId }}" class="instructions">{!! $instructionsContent !!}</div>
-    @endif
-    <div{!! Html::renderTagAttributes($inputContainerAttributes) !!}>{!! $input !!}</div>
-    @if ($instructionsContent && $instructionsPosition === 'after')
-        <div id="{{ $instructionsId }}" class="instructions">{!! $instructionsContent !!}</div>
-    @endif
-    @if ($tipContent)
-            @include('c::forms.field-notice', ['id' => $tipId, 'variant' => 'info', 'icon' => 'lightbulb', 'label' => t('Tip:'), 'content' => $tipContent])
-    @endif
-    @if ($warningContent)
-            @include('c::forms.field-notice', ['id' => $warningId, 'variant' => 'warning', 'icon' => '', 'label' => t('Warning:'), 'content' => $warningContent])
-    @endif
-    {!! $errorListHtml !!}
-</div>
diff --git a/src/Condition/BaseLightswitchConditionRule.php b/src/Condition/BaseLightswitchConditionRule.php
index 246dcc53b8a..43cea8ac3dc 100644
--- a/src/Condition/BaseLightswitchConditionRule.php
+++ b/src/Condition/BaseLightswitchConditionRule.php
@@ -4,7 +4,7 @@
 
 namespace CraftCms\Cms\Condition;
 
-use CraftCms\Cms\Cp\FormFields;
+use CraftCms\Cms\Cp\Components\Lightswitch;
 use CraftCms\Cms\Support\Html;
 use Override;
 
@@ -34,12 +34,12 @@ protected function inputHtml(): string
                 'id' => $labelId,
             ]).
             Html::tag('div',
-                FormFields::lightswitchHtml([
-                    'id' => $lightswitchId,
-                    'on' => $this->value,
-                    'name' => 'value',
-                    'labelledBy' => $labelId,
-                ])
+                Lightswitch::make()
+                    ->id($lightswitchId)
+                    ->on($this->value)
+                    ->name('value')
+                    ->labelledBy($labelId)
+                    ->toHtml()
             );
     }
 
diff --git a/src/Cp/Components/Button.php b/src/Cp/Components/Button.php
new file mode 100644
index 00000000000..e91a07172e7
--- /dev/null
+++ b/src/Cp/Components/Button.php
@@ -0,0 +1,206 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasAppearance;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Cp\Concerns\HasSize;
+use CraftCms\Cms\Cp\Concerns\HasVariant;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
+use Stringable;
+
+/**
+ * PHP counterpart to the `<craft-button>` web component.
+ *
+ *     Button::make()
+ *         ->label(t('Save'))
+ *         ->type('submit')
+ *         ->variant('primary')
+ *         ->icon('check');
+ *
+ * The label fills the default slot (plain strings are HTML-encoded; pass an
+ * `Htmlable` for markup labels). With `href` set, the component renders as a
+ * link styled as a button.
+ */
+class Button extends ViewComponent
+{
+    use HasAppearance;
+    use HasDisabled;
+    use HasId;
+    use HasSize;
+    use HasVariant;
+
+    protected string|Closure $type = 'button';
+
+    protected string|Closure|null $icon = null;
+
+    protected bool|Closure $loading = false;
+
+    protected bool|Closure $active = false;
+
+    protected string|Closure|null $accessibleName = null;
+
+    protected string|Closure|null $align = null;
+
+    protected string|Closure|null $href = null;
+
+    protected string|Closure|null $target = null;
+
+    protected string|Closure|null $command = null;
+
+    protected string|Closure|null $value = null;
+
+    protected string|Closure|null $iconPosition = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-button';
+    }
+
+    /** @param 'button'|'submit'|'reset'|Closure $type */
+    public function type(string|Closure $type): static
+    {
+        $this->type = $type;
+
+        return $this;
+    }
+
+    /** The button label (default slot). Plain strings are HTML-encoded. */
+    public function label(string|Htmlable|Stringable|ViewComponent|Closure|null $label): static
+    {
+        $this->slots[static::DEFAULT_SLOT] = $label;
+
+        return $this;
+    }
+
+    /** Icon name, rendered by the web component before the label. */
+    public function icon(string|Closure|null $icon): static
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    /** Content before the label (typically an icon component). Strings are trusted HTML. */
+    public function prefix(string|Htmlable|Stringable|ViewComponent|Closure|null $prefix): static
+    {
+        $this->slots['prefix'] = fn (): mixed => $this->trustedHtml($this->evaluate($prefix));
+
+        return $this;
+    }
+
+    /** Content after the label (typically an icon component). Strings are trusted HTML. */
+    public function suffix(string|Htmlable|Stringable|ViewComponent|Closure|null $suffix): static
+    {
+        $this->slots['suffix'] = fn (): mixed => $this->trustedHtml($this->evaluate($suffix));
+
+        return $this;
+    }
+
+    public function loading(bool|Closure $loading = true): static
+    {
+        $this->loading = $loading;
+
+        return $this;
+    }
+
+    /** Pressed/selected state (e.g. within a button group). */
+    public function active(bool|Closure $active = true): static
+    {
+        $this->active = $active;
+
+        return $this;
+    }
+
+    /** Accessible name override, for icon-only buttons. */
+    public function accessibleName(string|Closure|null $accessibleName): static
+    {
+        $this->accessibleName = $accessibleName;
+
+        return $this;
+    }
+
+    /** @param 'start'|'center'|'end'|Closure|null $align */
+    public function align(string|Closure|null $align): static
+    {
+        $this->align = $align;
+
+        return $this;
+    }
+
+    /** Renders the button as a link. */
+    public function href(string|Closure|null $href, string|Closure|null $target = null): static
+    {
+        $this->href = $href;
+
+        if ($target !== null) {
+            $this->target = $target;
+        }
+
+        return $this;
+    }
+
+    /** Invoker Commands API command (e.g. `--add-row`). */
+    public function command(string|Closure|null $command): static
+    {
+        $this->command = $command;
+
+        return $this;
+    }
+
+    /** The value submitted with the form, or used for selection within a button group. */
+    public function value(string|Closure|null $value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    /** @param 'prefix'|'suffix'|Closure|null $iconPosition Where the icon renders relative to the label. */
+    public function iconPosition(string|Closure|null $iconPosition): static
+    {
+        $this->iconPosition = $iconPosition;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $type = (string) $this->evaluate($this->type);
+
+        return [
+            'id' => $this->getId(),
+            'type' => $this->evaluate($this->href) === null ? $type : null,
+            'variant' => $this->getVariant(),
+            'appearance' => $this->getAppearance(),
+            'size' => $this->getSize(),
+            'icon' => $this->evaluate($this->icon),
+            'icon-position' => $this->evaluate($this->iconPosition),
+            'loading' => (bool) $this->evaluate($this->loading),
+            'active' => $this->evaluate($this->active) ? 'true' : null,
+            'value' => $this->evaluate($this->value),
+            'disabled' => $this->isDisabled(),
+            'accessible-name' => $this->evaluate($this->accessibleName),
+            'align' => $this->evaluate($this->align),
+            'href' => $this->evaluate($this->href),
+            'target' => $this->evaluate($this->target),
+            'command' => $this->evaluate($this->command),
+        ];
+    }
+
+    /** Strings on trusted-HTML slots render unencoded, matching FormFields. */
+    private function trustedHtml(mixed $value): mixed
+    {
+        if (is_string($value) || ($value instanceof Stringable && ! $value instanceof Htmlable && ! $value instanceof ViewComponent)) {
+            return new HtmlString((string) $value);
+        }
+
+        return $value;
+    }
+}
diff --git a/src/Cp/Components/ButtonGroup.php b/src/Cp/Components/ButtonGroup.php
new file mode 100644
index 00000000000..76227e1254b
--- /dev/null
+++ b/src/Cp/Components/ButtonGroup.php
@@ -0,0 +1,97 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+
+/**
+ * PHP counterpart to the `<craft-button-group>` web component: a group of
+ * buttons. With `name` set the component enters radio mode — it owns single
+ * selection and, being form-associated, submits the selected `value` itself
+ * (no hidden input needed). Each option button carries its own `value`, which
+ * the component matches against the group's `value`.
+ *
+ *     ButtonGroup::make()
+ *         ->name('alignment')
+ *         ->value('left')
+ *         ->buttons([
+ *             Button::make()->label(t('Left'))->value('left'),
+ *             Button::make()->label(t('Right'))->value('right'),
+ *         ]);
+ */
+class ButtonGroup extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+
+    protected string|Closure|null $labelledBy = null;
+
+    protected string|Closure|null $name = null;
+
+    protected string|Closure|null $value = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-button-group';
+    }
+
+    /**
+     * The grouped buttons (default slot).
+     *
+     * @param  iterable<array-key, mixed>|Closure  $buttons
+     */
+    public function buttons(iterable|Closure $buttons): static
+    {
+        $this->slots[static::DEFAULT_SLOT] = $buttons;
+
+        return $this;
+    }
+
+    public function labelledBy(string|Closure|null $labelledBy): static
+    {
+        $this->labelledBy = $labelledBy;
+
+        return $this;
+    }
+
+    /** Renders a hidden input posting the selected value under this name. */
+    public function name(string|Closure|null $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    /** The currently selected value, posted by the hidden input. */
+    public function value(string|Closure|null $value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    /**
+     * The `<craft-button-group>` web component is form-associated: with `name`
+     * set it enters radio mode, owns selection, and submits the selected
+     * `value` itself (via ElementInternals). So `name`/`value` ride on the host
+     * — no wrapping `<craft-listbox>` or hidden input is needed. Child buttons
+     * carry their own `value`, which the component matches against the group's.
+     */
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'id' => $this->getId(),
+            'name' => $this->evaluate($this->name),
+            'value' => $this->evaluate($this->value),
+            'role' => 'group',
+            'aria' => [
+                'labelledby' => $this->evaluate($this->labelledBy),
+            ],
+        ];
+    }
+}
diff --git a/src/Cp/Components/Callout.php b/src/Cp/Components/Callout.php
new file mode 100644
index 00000000000..04a25c60e58
--- /dev/null
+++ b/src/Cp/Components/Callout.php
@@ -0,0 +1,93 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasAppearance;
+use CraftCms\Cms\Cp\Concerns\HasVariant;
+use Illuminate\Contracts\Support\Htmlable;
+use Stringable;
+
+/**
+ * PHP counterpart to the `<craft-callout>` web component.
+ *
+ *     Callout::make()
+ *         ->variant('warning')
+ *         ->title(t('Heads up'))
+ *         ->content(t('Changing this may result in data loss.'));
+ *
+ * Renders directly (no Blade view) — the component is a single element whose
+ * chrome lives in the web component. Content strings are HTML-encoded; pass
+ * an `Htmlable` for trusted markup.
+ */
+class Callout extends ViewComponent
+{
+    use HasAppearance;
+    use HasVariant;
+
+    protected string|Closure|null $title = null;
+
+    protected string|Closure|null $icon = null;
+
+    protected string|Closure|null $rounded = null;
+
+    protected bool|Closure $inline = false;
+
+    protected function tagName(): string
+    {
+        return 'craft-callout';
+    }
+
+    public function title(string|Closure|null $title): static
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    /** Icon name; the web component falls back to a variant-specific default. */
+    public function icon(string|Closure|null $icon): static
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    /** @param 'all'|'start'|'end'|'none'|Closure|null $rounded */
+    public function rounded(string|Closure|null $rounded): static
+    {
+        $this->rounded = $rounded;
+
+        return $this;
+    }
+
+    public function inline(bool|Closure $inline = true): static
+    {
+        $this->inline = $inline;
+
+        return $this;
+    }
+
+    /** The callout body (default slot). */
+    public function content(string|Htmlable|Stringable|ViewComponent|Closure|null $content): static
+    {
+        $this->slots[static::DEFAULT_SLOT] = $content;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'variant' => $this->getVariant(),
+            'appearance' => $this->getAppearance(),
+            'title' => $this->evaluate($this->title),
+            'icon' => $this->evaluate($this->icon),
+            'rounded' => $this->evaluate($this->rounded),
+            'inline' => (bool) $this->evaluate($this->inline),
+        ];
+    }
+}
diff --git a/src/Cp/Components/Checkbox.php b/src/Cp/Components/Checkbox.php
new file mode 100644
index 00000000000..2d298b5d579
--- /dev/null
+++ b/src/Cp/Components/Checkbox.php
@@ -0,0 +1,400 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Cp\Html\ContentHtml;
+use CraftCms\Cms\Cp\Icons;
+use CraftCms\Cms\Support\Arr;
+use CraftCms\Cms\Support\Html;
+use Illuminate\Contracts\Support\Htmlable;
+use Stringable;
+
+use function CraftCms\Cms\t;
+
+/**
+ * PHP counterpart to the `<craft-checkbox>` web component. The native input
+ * and label render in the light DOM (the web component is a Lion styling
+ * shell), so input namespacing, form posting and legacy JS hooks
+ * (Craft.FieldToggle) keep working.
+ *
+ *     Checkbox::make()
+ *         ->name('remember')
+ *         ->label(t('Remember me'))
+ *         ->checked($user->remember);
+ *
+ * Posting matches the legacy checkbox template: a scalar-named checkbox is
+ * preceded by an always-post hidden input (empty value), so unchecking posts
+ * an empty string; `name[]`-style checkboxes post nothing when unchecked.
+ */
+class Checkbox extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+
+    protected string|Closure|null $name = null;
+
+    protected string|Closure $value = '1';
+
+    protected bool|Closure $checked = false;
+
+    protected bool|Closure $autofocus = false;
+
+    protected string|Htmlable|Stringable|Closure|null $label = null;
+
+    protected string|Closure|null $labelId = null;
+
+    protected bool|Closure $indeterminate = false;
+
+    protected string|Stringable|Closure|null $info = null;
+
+    protected string|Closure|null $icon = null;
+
+    protected string|Closure|null $color = null;
+
+    protected bool|Closure $custom = false;
+
+    protected string|Htmlable|Closure|null $customInput = null;
+
+    protected string|Closure|null $toggle = null;
+
+    protected string|Closure|null $reverseToggle = null;
+
+    protected string|Closure|null $targetPrefix = null;
+
+    protected string|Closure|null $labelledBy = null;
+
+    protected string|Closure|bool|null $describedBy = null;
+
+    /** @var array<string, mixed> Additional attributes for the native input. */
+    protected array $inputAttributes = [];
+
+    protected function tagName(): string
+    {
+        return 'craft-checkbox';
+    }
+
+    /**
+     * The `<craft-checkbox>` host owns the indeterminate state: `indeterminate`
+     * isn't a native input attribute (it's a JS-only property), so the web
+     * component reflects it from the host and mirrors it onto the slotted input.
+     */
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'indeterminate' => (bool) $this->evaluate($this->indeterminate),
+        ];
+    }
+
+    /** Default attributes for the native input. */
+    protected function inputDefaults(): array
+    {
+        return [
+            'type' => 'checkbox',
+            'class' => ['checkbox'],
+        ];
+    }
+
+    /** Whether a scalar-named control gets an always-post hidden input. */
+    protected function rendersAlwaysPostInput(): bool
+    {
+        return true;
+    }
+
+    /** The label text shown in custom-option mode. */
+    protected function customLabelText(): string
+    {
+        return t('Custom:');
+    }
+
+    public function name(string|Closure|null $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    /** The value posted when checked. */
+    public function value(string|int|float|Closure $value): static
+    {
+        $this->value = is_int($value) || is_float($value) ? (string) $value : $value;
+
+        return $this;
+    }
+
+    public function checked(bool|Closure $checked = true): static
+    {
+        $this->checked = $checked;
+
+        return $this;
+    }
+
+    public function autofocus(bool|Closure $autofocus = true): static
+    {
+        $this->autofocus = $autofocus;
+
+        return $this;
+    }
+
+    /** The checkbox label. Plain strings are HTML-encoded. */
+    public function label(string|Htmlable|Stringable|Closure|null $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function labelId(string|Closure|null $labelId): static
+    {
+        $this->labelId = $labelId;
+
+        return $this;
+    }
+
+    public function indeterminate(bool|Closure $indeterminate = true): static
+    {
+        $this->indeterminate = $indeterminate;
+
+        return $this;
+    }
+
+    /** Info popover content beside the label; supports markdown. */
+    public function info(string|Stringable|Closure|null $info): static
+    {
+        $this->info = $info;
+
+        return $this;
+    }
+
+    /** Icon name shown before the label (tinted by `color` when set). */
+    public function icon(string|Closure|null $icon): static
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    /** Color swatch (or icon tint) shown before the label. */
+    public function color(string|Closure|null $color): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    /**
+     * Custom-option mode: the label reads "Custom:" and the given input HTML
+     * (trusted) renders after the checkbox for the custom value.
+     */
+    public function custom(string|Htmlable|Closure|null $customInput): static
+    {
+        $this->custom = $customInput !== null;
+        $this->customInput = $customInput;
+
+        return $this;
+    }
+
+    /** Whether the checkbox is in custom-option mode. */
+    public function hasCustomInput(): bool
+    {
+        return (bool) $this->evaluate($this->custom);
+    }
+
+    /** Selector (or element id) of a container to reveal while checked. */
+    public function toggle(string|Closure|null $toggle): static
+    {
+        $this->toggle = $toggle;
+
+        return $this;
+    }
+
+    /** Selector (or element id) of a container to reveal while unchecked. */
+    public function reverseToggle(string|Closure|null $reverseToggle): static
+    {
+        $this->reverseToggle = $reverseToggle;
+
+        return $this;
+    }
+
+    /** Craft.FieldToggle target prefix, combined with the checkbox value. */
+    public function targetPrefix(string|Closure|null $targetPrefix): static
+    {
+        $this->targetPrefix = $targetPrefix;
+
+        return $this;
+    }
+
+    public function labelledBy(string|Closure|null $labelledBy): static
+    {
+        $this->labelledBy = $labelledBy;
+
+        return $this;
+    }
+
+    public function describedBy(string|Closure|bool|null $describedBy): static
+    {
+        $this->describedBy = $describedBy;
+
+        return $this;
+    }
+
+    /**
+     * Merges additional HTML attributes onto the native input element. These
+     * win over the computed defaults, so they can also override things like
+     * `type`:
+     *
+     *     Checkbox::make()->inputAttributes(['type' => 'other-type']);
+     *
+     * The component always renders a raw `<input>` tag — the web component
+     * adopts it as its form control, so it can never be another form-control
+     * component itself.
+     *
+     * @param  array<string, mixed>  $attributes
+     */
+    public function inputAttributes(array $attributes): static
+    {
+        $this->inputAttributes = Arr::merge(
+            static::normalizeClasses($this->inputAttributes),
+            static::normalizeClasses($attributes),
+        );
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function renderSlots(): string
+    {
+        return $this->inputHtml().$this->labelHtml().parent::renderSlots();
+    }
+
+    /**
+     * Renders the always-post hidden input before the host and the custom
+     * option input after it, mirroring the legacy checkbox template.
+     */
+    #[\Override]
+    protected function renderMarkup(): string
+    {
+        $name = $this->evaluate($this->name);
+        $alwaysPost = $this->rendersAlwaysPostInput() && $name !== null && ! str_ends_with($name, '[]');
+
+        return implode('', array_filter([
+            $alwaysPost ? (string) Html::hiddenInput($name, '') : '',
+            parent::renderMarkup(),
+            $this->customInputHtml(),
+        ]));
+    }
+
+    protected function inputHtml(): string
+    {
+        $toggle = $this->evaluate($this->toggle);
+        $reverseToggle = $this->evaluate($this->reverseToggle);
+        $targetPrefix = $this->evaluate($this->targetPrefix);
+
+        $attributes = Arr::merge(Arr::merge($this->inputDefaults(), [
+            'slot' => 'input',
+            'id' => $this->getId(),
+            'name' => $this->evaluate($this->name),
+            'value' => $this->evaluate($this->value),
+            'checked' => (bool) $this->evaluate($this->checked),
+            'autofocus' => (bool) $this->evaluate($this->autofocus) && ! request()->isMobileBrowser(true),
+            'disabled' => $this->isDisabled(),
+            'class' => array_filter([
+                ($targetPrefix ?? $toggle ?? $reverseToggle) !== null ? 'fieldtoggle' : null,
+            ]),
+            'aria' => [
+                'labelledby' => $this->evaluate($this->labelledBy),
+                'describedby' => $this->evaluate($this->describedBy),
+            ],
+            'data' => [
+                'target-prefix' => $targetPrefix,
+                'target' => $toggle,
+                'reverse-target' => $reverseToggle,
+            ],
+        ]),
+            $this->inputAttributes,
+        );
+
+        return Html::tag('input', '', $attributes);
+    }
+
+    protected function labelHtml(): string
+    {
+        $label = $this->evaluate($this->label);
+        $info = (string) ($this->evaluate($this->info) ?? '');
+
+        $content = implode('', array_filter([
+            (bool) $this->evaluate($this->custom) ? Html::encode($this->customLabelText()) : $this->labelContentHtml($label),
+            $info !== ''
+                ? Html::tag('span', app(ContentHtml::class)->parseMarkdown($info), ['class' => 'info'])
+                : '',
+        ]));
+
+        if ($content === '') {
+            return '';
+        }
+
+        return Html::tag('label', $content, [
+            'slot' => 'label',
+            'for' => $this->getId(),
+            'id' => $this->getLabelId(),
+        ]);
+    }
+
+    protected function labelContentHtml(mixed $label): string
+    {
+        $labelHtml = $label === null ? '' : $this->renderContent($label);
+
+        $icon = $this->evaluate($this->icon);
+        $color = $this->evaluate($this->color);
+
+        if ($icon === null && $color === null) {
+            return $labelHtml;
+        }
+
+        $chip = $icon !== null
+            ? Html::tag('span', Icons::svg($icon), [
+                'class' => 'cp-icon puny',
+                'style' => $color !== null ? "--icon-color: $color;" : null,
+            ])
+            : Html::tag('div', Html::tag('div', '', [
+                'class' => 'color-preview',
+                'style' => "background-color: $color",
+            ]), ['class' => 'color small']);
+
+        return Html::tag('div', $chip.Html::tag('span', $labelHtml), [
+            'class' => 'flex flex-nowrap gap-xs',
+        ]);
+    }
+
+    protected function customInputHtml(): string
+    {
+        if (! (bool) $this->evaluate($this->custom)) {
+            return '';
+        }
+
+        $input = $this->evaluate($this->customInput);
+        $input = $input instanceof Htmlable ? $input->toHtml() : (string) $input;
+
+        return $input !== ''
+            ? Html::tag('div', $input, ['class' => 'custom-option-wrapper'])
+            : '';
+    }
+
+    protected function getLabelId(): ?string
+    {
+        $labelId = $this->evaluate($this->labelId);
+
+        if ($labelId !== null) {
+            return (string) $labelId;
+        }
+
+        $id = $this->getId();
+
+        return $id !== null ? "$id-label" : null;
+    }
+}
diff --git a/src/Cp/Components/CheckboxGroup.php b/src/Cp/Components/CheckboxGroup.php
new file mode 100644
index 00000000000..257d33d2a85
--- /dev/null
+++ b/src/Cp/Components/CheckboxGroup.php
@@ -0,0 +1,149 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Support\Facades\HtmlStack;
+use CraftCms\Cms\Support\Facades\InputNamespace;
+use CraftCms\Cms\Support\Html;
+use Illuminate\Contracts\Support\Htmlable;
+
+use function CraftCms\Cms\t;
+
+/**
+ * Checkbox group container — the PHP counterpart to the legacy
+ * `_includes/forms/checkboxGroup` template. Renders an always-post hidden
+ * input followed by {@see Checkbox} children, each in its own wrapper
+ * element, plus an optional "Add option" button for custom options.
+ *
+ *     CheckboxGroup::make()
+ *         ->id('colors')
+ *         ->name('colors')
+ *         ->options([
+ *             Checkbox::make()->label(t('Red'))->name('colors[]')->value('red'),
+ *             Checkbox::make()->label(t('Blue'))->name('colors[]')->value('blue'),
+ *         ]);
+ */
+class CheckboxGroup extends ChoiceGroup
+{
+    protected string|Htmlable|Closure|null $customOptionTemplate = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-checkbox-group';
+    }
+
+    /**
+     * Enables user-added custom options. The template is the markup for one
+     * new option, with `__ID__` placeholders for the generated input id, and
+     * should already be namespaced for the active input namespace.
+     */
+    public function customOptionTemplate(string|Htmlable|Closure|null $template): static
+    {
+        $this->customOptionTemplate = $template;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'id' => $this->getId(),
+            'class' => 'checkbox-group',
+        ];
+    }
+
+    /** The always-post hidden input. */
+    #[\Override]
+    protected function leadingHtml(): string
+    {
+        $name = $this->evaluate($this->name);
+
+        return $name !== null ? (string) Html::hiddenInput($name, '') : '';
+    }
+
+    #[\Override]
+    protected function optionWrapperAttributes(ViewComponent $option): array
+    {
+        return [
+            'data' => [
+                'custom' => $option instanceof Checkbox && $option->hasCustomInput() ? true : null,
+            ],
+        ];
+    }
+
+    #[\Override]
+    protected function trailingHtml(): string
+    {
+        return $this->customOptionsHtml();
+    }
+
+    /**
+     * The "Add option" button, with the custom-option wiring registered on
+     * the JS stack (ported from the legacy checkboxGroup template).
+     */
+    protected function customOptionsHtml(): string
+    {
+        $template = $this->evaluate($this->customOptionTemplate);
+
+        if ($template === null || $template === '') {
+            return '';
+        }
+
+        $id = $this->getId();
+        $addButtonId = "$id-add-btn";
+
+        HtmlStack::jsWithVars(fn ($container, $button, $optionHtml) => <<<JS
+            (() => {
+              const \$container = $($container);
+              const \$button = $($button);
+              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();
+                  } else {
+                    if (\$text.val() !== '') {
+                      \$text.prop('disabled', true).addClass('disabled noteditable');
+                    } else {
+                      \$option.remove();
+                      \$button.focus();
+                    }
+                  }
+                });
+                \$text.on('input', () => {
+                  \$checkbox.val(\$text.val());
+                });
+              };
+
+              const \$customOptions = \$container.children('[data-custom]');
+              for (let i = 0; i < \$customOptions.length; i++) {
+                initCustomOption(\$customOptions.eq(i));
+              }
+
+              \$button.on('activate', () => {
+                const id = 'option' + Math.floor(Math.random() * 1000000000);
+                const \$newOption = $(customOptionHtml.replace(/__ID__/g, id)).insertBefore(\$button);
+                initCustomOption(\$newOption);
+                \$newOption.find('.text').focus();
+              });
+            })();
+            JS, [
+            'container' => '#'.InputNamespace::namespaceId($id),
+            'button' => '#'.InputNamespace::namespaceId($addButtonId),
+            'optionHtml' => $template instanceof Htmlable ? $template->toHtml() : (string) $template,
+        ]);
+
+        return Button::make()
+            ->id($addButtonId)
+            ->label(t('Add option'))
+            ->attributes(['class' => ['dashed', 'small', 'icon', 'add']])
+            ->toHtml();
+    }
+}
diff --git a/src/Cp/Components/CheckboxSelect.php b/src/Cp/Components/CheckboxSelect.php
new file mode 100644
index 00000000000..e29a0643827
--- /dev/null
+++ b/src/Cp/Components/CheckboxSelect.php
@@ -0,0 +1,117 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Support\Html;
+
+/**
+ * Checkbox select — the PHP counterpart to the legacy
+ * `_includes/forms/checkboxSelect` template. Renders a
+ * `fieldset.cp-checkbox-select` of {@see Checkbox} items, with an optional
+ * "All" checkbox (or an always-post hidden input) first, optionally wrapped
+ * in a `<craft-sortable-checkbox-select>` for drag reordering.
+ *
+ *     CheckboxSelect::make()
+ *         ->id('sources')
+ *         ->name('sources')
+ *         ->allCheckbox(Checkbox::make()->label(t('All'))->name('sources')->value('*'))
+ *         ->options([...]);
+ */
+class CheckboxSelect extends ChoiceGroup
+{
+    use HasDisabled;
+
+    protected Checkbox|Closure|null $allCheckbox = null;
+
+    protected bool|Closure $sortable = false;
+
+    protected string|Closure|null $storageKey = null;
+
+    protected function tagName(): string
+    {
+        return 'fieldset';
+    }
+
+    /** The "All" checkbox, rendered before the items. */
+    public function allCheckbox(Checkbox|Closure|null $allCheckbox): static
+    {
+        $this->allCheckbox = $allCheckbox;
+
+        return $this;
+    }
+
+    /** Wraps the fieldset in a `<craft-sortable-checkbox-select>`. */
+    public function sortable(bool|Closure $sortable = true): static
+    {
+        $this->sortable = $sortable;
+
+        return $this;
+    }
+
+    /** Storage key for persisting the sort order client-side. */
+    public function storageKey(string|Closure|null $storageKey): static
+    {
+        $this->storageKey = $storageKey;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'id' => $this->getId(),
+            'class' => 'cp-checkbox-select',
+            'data' => [
+                'storage-key' => $this->evaluate($this->storageKey),
+            ],
+        ];
+    }
+
+    /**
+     * The "All" checkbox — or, without one, the always-post hidden input for
+     * a non-array name.
+     */
+    #[\Override]
+    protected function leadingHtml(): string
+    {
+        $allCheckbox = $this->evaluate($this->allCheckbox);
+
+        if ($allCheckbox !== null) {
+            return Html::tag('div', $allCheckbox->toHtml());
+        }
+
+        $name = $this->evaluate($this->name);
+
+        if ($name !== null && (strlen($name) < 3 || ! str_ends_with($name, '[]'))) {
+            return (string) Html::hiddenInput($name, '');
+        }
+
+        return '';
+    }
+
+    #[\Override]
+    protected function optionWrapperAttributes(ViewComponent $option): array
+    {
+        return ['class' => 'cp-checkbox-select__item'];
+    }
+
+    /** Wraps the fieldset in the sortable web component when enabled. */
+    #[\Override]
+    protected function renderMarkup(): string
+    {
+        $html = parent::renderMarkup();
+
+        if (! $this->evaluate($this->sortable)) {
+            return $html;
+        }
+
+        return Html::tag('craft-sortable-checkbox-select', $html, [
+            'disabled' => $this->isDisabled(),
+        ]);
+    }
+}
diff --git a/src/Cp/Components/ChoiceGroup.php b/src/Cp/Components/ChoiceGroup.php
new file mode 100644
index 00000000000..eb12d1a0003
--- /dev/null
+++ b/src/Cp/Components/ChoiceGroup.php
@@ -0,0 +1,72 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Support\Html;
+
+/**
+ * Base class for choice-group containers (checkbox groups, checkbox selects,
+ * radio groups): a host element rendering option components, each in its own
+ * wrapper element, with hooks for leading/trailing content.
+ */
+abstract class ChoiceGroup extends ViewComponent
+{
+    use HasId;
+
+    /** @var iterable<ViewComponent>|Closure */
+    protected iterable|Closure $options = [];
+
+    protected string|Closure|null $name = null;
+
+    /** @param iterable<ViewComponent>|Closure $options */
+    public function options(iterable|Closure $options): static
+    {
+        $this->options = $options;
+
+        return $this;
+    }
+
+    /** The group's base input name. */
+    public function name(string|Closure|null $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    /** Rendered before the options (hidden inputs, an "All" checkbox, …). */
+    protected function leadingHtml(): string
+    {
+        return '';
+    }
+
+    /** Rendered after the options (add-option buttons, …). */
+    protected function trailingHtml(): string
+    {
+        return '';
+    }
+
+    /** Attributes for each option's wrapper element. */
+    protected function optionWrapperAttributes(ViewComponent $option): array
+    {
+        return [];
+    }
+
+    #[\Override]
+    protected function renderSlots(): string
+    {
+        $html = [$this->leadingHtml()];
+
+        foreach ($this->evaluate($this->options) as $option) {
+            $html[] = Html::tag('div', $option->toHtml(), $this->optionWrapperAttributes($option));
+        }
+
+        $html[] = $this->trailingHtml();
+
+        return implode('', $html).parent::renderSlots();
+    }
+}
diff --git a/src/Cp/Components/ComponentRegistry.php b/src/Cp/Components/ComponentRegistry.php
new file mode 100644
index 00000000000..6bdea5cade7
--- /dev/null
+++ b/src/Cp/Components/ComponentRegistry.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Illuminate\Container\Attributes\Singleton;
+use InvalidArgumentException;
+
+/**
+ * Maps template-facing component names to their {@see ViewComponent} classes,
+ * backing the `ui()` helper and the `ui` Twig function. Plugins can register
+ * additional components.
+ */
+#[Singleton]
+class ComponentRegistry
+{
+    /** @var array<string, class-string<ViewComponent>> */
+    private array $components = [
+        'button' => Button::class,
+        'button-group' => ButtonGroup::class,
+        'callout' => Callout::class,
+        'checkbox' => Checkbox::class,
+        'checkbox-group' => CheckboxGroup::class,
+        'checkbox-select' => CheckboxSelect::class,
+        'field' => Field::class,
+        'field-group' => FieldGroup::class,
+        'lightswitch' => Lightswitch::class,
+        'radio' => Radio::class,
+        'radio-group' => RadioGroup::class,
+    ];
+
+    /**
+     * @param  class-string<ViewComponent>  $class
+     */
+    public function register(string $name, string $class): void
+    {
+        if (! is_subclass_of($class, ViewComponent::class)) {
+            throw new InvalidArgumentException(sprintf('%s is not a %s.', $class, ViewComponent::class));
+        }
+
+        $this->components[$name] = $class;
+    }
+
+    public function make(string $name, array $config = []): ViewComponent
+    {
+        $class = $this->components[$name] ?? throw new InvalidArgumentException(sprintf(
+            'Unknown UI component "%s". Available: %s',
+            $name,
+            implode(', ', array_keys($this->components)),
+        ));
+
+        return $class::make()->configure($config);
+    }
+}
diff --git a/src/Cp/Components/Field.php b/src/Cp/Components/Field.php
new file mode 100644
index 00000000000..485ae80cfe9
--- /dev/null
+++ b/src/Cp/Components/Field.php
@@ -0,0 +1,336 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\EvaluatesClosures;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Cp\Html\ContentHtml;
+use CraftCms\Cms\Support\Facades\Markdown;
+use CraftCms\Cms\Support\Html;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
+use Stringable;
+use Twig\Markup;
+
+use function CraftCms\Cms\t;
+
+/**
+ * PHP counterpart to the `<craft-field>` web component — the generic form
+ * field shell (label, instructions, tip/warning, errors, status) around any
+ * control.
+ *
+ *     Field::make()
+ *         ->label(t('Handle'))
+ *         ->required()
+ *         ->instructions(t('How you’ll refer to this field in the templates.'))
+ *         ->input(fn () => FormFields::textHtml(['name' => 'handle']))
+ *         ->errors($model->errors()->get('handle'));
+ *
+ * Every setter accepts a literal value or a Closure evaluated at render time
+ * (with dependency injection — see {@see EvaluatesClosures}).
+ */
+class Field extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+
+    protected string|Htmlable|Stringable|ViewComponent|Closure|null $label = null;
+
+    protected string|Htmlable|Stringable|ViewComponent|Closure|null $input = null;
+
+    protected string|Stringable|Closure|null $instructions = null;
+
+    protected string|Closure $instructionsPosition = 'before';
+
+    protected bool|Closure $required = false;
+
+    protected bool|Closure $translatable = false;
+
+    protected string|Closure|null $translationDescription = null;
+
+    protected bool|Closure $fieldset = false;
+
+    protected string|Closure|null $status = null;
+
+    protected string|Closure|null $statusLabel = null;
+
+    protected string|Closure|null $orientation = null;
+
+    protected bool|Closure $readOnly = false;
+
+    protected string|Closure|null $width = null;
+
+    protected string|Htmlable|ViewComponent|Closure|null $headingPrefix = null;
+
+    protected string|Htmlable|ViewComponent|Closure|null $headingSuffix = null;
+
+    /** @var array<array-key, string>|Closure */
+    protected array|Closure $errors = [];
+
+    protected string|Stringable|Closure|null $tip = null;
+
+    protected string|Stringable|Closure|null $warning = null;
+
+    protected string|Htmlable|ViewComponent|Closure|null $labelExtra = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-field';
+    }
+
+    /** A string renders as the `label` attribute; markup or a component renders into the label slot. */
+    public function label(string|Htmlable|Stringable|ViewComponent|Closure|null $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    /**
+     * The wrapped control. Strings are treated as trusted HTML (matching
+     * `FormFields`), and should have a single root element so the `slot`
+     * attribute lands on the control itself rather than a wrapper.
+     */
+    public function input(string|Htmlable|Stringable|ViewComponent|Closure|null $input): static
+    {
+        $this->input = $input;
+
+        return $this;
+    }
+
+    /** Field instructions; supports the same markdown as the Twig field macro. */
+    public function instructions(string|Stringable|Closure|null $instructions): static
+    {
+        $this->instructions = $instructions;
+
+        return $this;
+    }
+
+    /** @param 'before'|'after'|Closure $position Relative to the input. */
+    public function instructionsPosition(string|Closure $position): static
+    {
+        $this->instructionsPosition = $position;
+
+        return $this;
+    }
+
+    public function required(bool|Closure $required = true): static
+    {
+        $this->required = $required;
+
+        return $this;
+    }
+
+    public function translatable(bool|Closure $translatable = true, string|Closure|null $description = null): static
+    {
+        $this->translatable = $translatable;
+
+        if ($description !== null) {
+            $this->translationDescription = $description;
+        }
+
+        return $this;
+    }
+
+    /** Renders the label as a group legend (`role="group"`) instead of a `<label>`. */
+    public function fieldset(bool|Closure $fieldset = true): static
+    {
+        $this->fieldset = $fieldset;
+
+        return $this;
+    }
+
+    public function status(string|Closure|null $status, string|Closure|null $label = null): static
+    {
+        $this->status = $status;
+
+        if ($label !== null) {
+            $this->statusLabel = $label;
+        }
+
+        return $this;
+    }
+
+    /** @param 'ltr'|'rtl'|Closure|null $orientation */
+    public function orientation(string|Closure|null $orientation): static
+    {
+        $this->orientation = $orientation;
+
+        return $this;
+    }
+
+    /** Marks the field read-only (renders the "Read Only" badge). */
+    public function readOnly(bool|Closure $readOnly = true): static
+    {
+        $this->readOnly = $readOnly;
+
+        return $this;
+    }
+
+    /** Heading content rendered before the label. Strings are trusted HTML. */
+    public function headingPrefix(string|Htmlable|ViewComponent|Closure|null $headingPrefix): static
+    {
+        $this->headingPrefix = $headingPrefix;
+
+        return $this;
+    }
+
+    /** Heading content rendered after the label extras. Strings are trusted HTML. */
+    public function headingSuffix(string|Htmlable|ViewComponent|Closure|null $headingSuffix): static
+    {
+        $this->headingSuffix = $headingSuffix;
+
+        return $this;
+    }
+
+    /** @param array<array-key, string>|Closure $errors Plain-text messages; encoded on render. */
+    public function errors(array|Closure $errors): static
+    {
+        $this->errors = $errors;
+
+        return $this;
+    }
+
+    /** Tip notice; supports inline markdown. */
+    public function tip(string|Stringable|Closure|null $tip): static
+    {
+        $this->tip = $tip;
+
+        return $this;
+    }
+
+    /** Warning notice; supports inline markdown. */
+    public function warning(string|Stringable|Closure|null $warning): static
+    {
+        $this->warning = $warning;
+
+        return $this;
+    }
+
+    /** Extra heading content (handle-copy buttons, action menus). Strings are trusted HTML. */
+    public function labelExtra(string|Htmlable|ViewComponent|Closure|null $labelExtra): static
+    {
+        $this->labelExtra = $labelExtra;
+
+        return $this;
+    }
+
+    /**
+     * Overrides the inferred width behavior. By default the field spans its
+     * column, unless the slotted control declares a `maxlength` — which
+     * shrinks it to the control's width. `full` spans the column despite a
+     * `maxlength`; `auto` shrinks without one.
+     *
+     * @param  'full'|'auto'|Closure|null  $width
+     */
+    public function width(string|Closure|null $width): static
+    {
+        $this->width = $width;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $label = $this->evaluate($this->label);
+
+        return [
+            'id' => $this->getId(),
+            'label' => is_string($label)
+            || ($label instanceof Stringable && ! $label instanceof Htmlable && ! $label instanceof Markup)
+                ? $label
+                : null,
+            'required' => (bool) $this->evaluate($this->required),
+            'translatable' => (bool) $this->evaluate($this->translatable),
+            'translation-description' => $this->evaluate($this->translationDescription),
+            'fieldset' => (bool) $this->evaluate($this->fieldset),
+            'status' => $this->evaluate($this->status),
+            'status-label' => $this->evaluate($this->statusLabel),
+            'orientation' => $this->evaluate($this->orientation),
+            'width' => $this->evaluate($this->width),
+            'readonly' => (bool) $this->evaluate($this->readOnly),
+            'disabled' => $this->isDisabled(),
+            'has-errors' => $this->evaluatedErrors() !== [],
+            'instructions-position' => $this->evaluate($this->instructionsPosition) === 'after' ? 'after' : null,
+        ];
+    }
+
+    #[\Override]
+    protected function renderSlots(): string
+    {
+        $label = $this->evaluate($this->label);
+        $instructions = (string) ($this->evaluate($this->instructions) ?? '');
+        $tip = (string) ($this->evaluate($this->tip) ?? '');
+        $warning = (string) ($this->evaluate($this->warning) ?? '');
+        $errors = $this->evaluatedErrors();
+
+        return implode('', array_filter([
+            $label instanceof Htmlable || $label instanceof Markup
+                ? $this->renderSlot('label', $label)
+                : '',
+            $this->renderSlot('input', $this->trustedHtml($this->evaluate($this->input))),
+            $instructions !== ''
+                ? $this->renderSlot('help-text', new HtmlString(
+                    Html::tag('div', app(ContentHtml::class)->parseMarkdown($instructions)),
+                ))
+                : '',
+            $tip !== '' ? $this->renderSlot('tip', new HtmlString($this->parseNotice($tip))) : '',
+            $warning !== '' ? $this->renderSlot('warning', new HtmlString($this->parseNotice($warning))) : '',
+            $this->renderSlot('label-extra', $this->trustedHtml($this->evaluate($this->labelExtra))),
+            $this->renderSlot('heading-prefix', $this->trustedHtml($this->evaluate($this->headingPrefix))),
+            $this->renderSlot('heading-suffix', $this->trustedHtml($this->evaluate($this->headingSuffix))),
+            $errors !== [] ? $this->renderSlot('feedback', new HtmlString($this->errorListHtml($errors))) : '',
+            parent::renderSlots(),
+        ]));
+    }
+
+    /** @return array<array-key, string> */
+    protected function evaluatedErrors(): array
+    {
+        return array_values(array_filter((array) $this->evaluate($this->errors)));
+    }
+
+    /** @param array<array-key, string> $errors */
+    protected function errorListHtml(array $errors): string
+    {
+        return Html::tag(
+            'ul',
+            implode('', array_map(
+                fn (string $error): string => Html::tag('li', Html::encode($error)),
+                $errors,
+            )),
+            [
+                'class' => 'error-list',
+                'aria' => ['label' => t('Validation errors')],
+            ],
+        );
+    }
+
+    /**
+     * Inline-markdown parsing for notices, matching the field wrapper's
+     * tips/warnings. Wrapped in a `<span>` so mixed inline content slots as a
+     * single root element.
+     */
+    protected function parseNotice(string $message): string
+    {
+        return Html::tag(
+            'span',
+            Html::decodeDoubles(Markdown::parseParagraph(Html::encodeInvalidTags($message))),
+        );
+    }
+
+    /** Strings on trusted-HTML properties render unencoded, matching FormFields. */
+    protected function trustedHtml(mixed $value): mixed
+    {
+        if (is_string($value) || ($value instanceof Stringable && ! $value instanceof Htmlable && ! $value instanceof ViewComponent)) {
+            return new HtmlString((string) $value);
+        }
+
+        return $value;
+    }
+}
diff --git a/src/Cp/Components/FieldGroup.php b/src/Cp/Components/FieldGroup.php
new file mode 100644
index 00000000000..e35cd5b0c4e
--- /dev/null
+++ b/src/Cp/Components/FieldGroup.php
@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+
+/**
+ * PHP counterpart to the `<craft-field-group>` web component: a grid
+ * container for a list of fields.
+ *
+ *     FieldGroup::make()->children([
+ *         Field::make()->label(t('Name'))->input(...),
+ *         Field::make()->label(t('Handle'))->input(...),
+ *     ]);
+ *
+ * Renders directly (no Blade view). Children may be components, `Htmlable`s,
+ * or plain strings (HTML-encoded).
+ */
+class FieldGroup extends ViewComponent
+{
+    protected string|Closure|null $gap = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-field-group';
+    }
+
+    /**
+     * The grouped fields (default slot).
+     *
+     * @param  iterable<array-key, mixed>|Closure  $children
+     */
+    public function children(iterable|Closure $children): static
+    {
+        $this->slots[static::DEFAULT_SLOT] = $children;
+
+        return $this;
+    }
+
+    /** Grid gap, as a CSS length (sets the component's `--gap` custom property). */
+    public function gap(string|Closure|null $gap): static
+    {
+        $this->gap = $gap;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $gap = $this->evaluate($this->gap);
+
+        return [
+            'style' => $gap !== null ? "--gap: $gap;" : null,
+        ];
+    }
+}
diff --git a/src/Cp/Components/Lightswitch.php b/src/Cp/Components/Lightswitch.php
new file mode 100644
index 00000000000..11a6b1167fd
--- /dev/null
+++ b/src/Cp/Components/Lightswitch.php
@@ -0,0 +1,298 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Cp\Concerns\HasSize;
+use CraftCms\Cms\Cp\Html\ContentHtml;
+use CraftCms\Cms\Support\Arr;
+use CraftCms\Cms\Support\Html;
+use Illuminate\Support\HtmlString;
+use Stringable;
+
+/**
+ * PHP counterpart to the `<craft-switch>` web component, mirroring the
+ * `_includes/forms/lightswitch` template.
+ *
+ *     Lightswitch::make()
+ *         ->name('enabled')
+ *         ->on($entry->enabled)
+ *         ->toggle('#enabled-settings');
+ *
+ * The switch button and hidden input render in the light DOM so input
+ * namespacing and legacy JS hooks (Craft.FieldToggle) keep working, and so
+ * the posted value matches the legacy behavior exactly: `value` when on,
+ * `indeterminateValue` when indeterminate, an empty string when off, nothing
+ * when unnamed.
+ */
+class Lightswitch extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+    use HasSize;
+
+    protected const string DEFAULT_VALUE = '1';
+
+    protected const string DEFAULT_INDETERMINATE_VALUE = '-';
+
+    protected bool|Closure $on = false;
+
+    protected bool|Closure $indeterminate = false;
+
+    protected string|Closure|null $name = null;
+
+    /** @var array<string, mixed> Additional attributes for the switch button. */
+    protected array $buttonAttributes = [];
+
+    protected string|Closure $value = self::DEFAULT_VALUE;
+
+    protected string|Closure $indeterminateValue = self::DEFAULT_INDETERMINATE_VALUE;
+
+    protected string|Closure|null $label = null;
+
+    protected string|Closure|null $onLabel = null;
+
+    protected string|Closure|null $offLabel = null;
+
+    protected string|Closure|null $toggle = null;
+
+    protected string|Closure|null $reverseToggle = null;
+
+    protected string|Closure|null $labelledBy = null;
+
+    protected string|Closure|null $describedBy = null;
+
+    protected string|Stringable|Closure|null $instructions = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-switch';
+    }
+
+    public function on(bool|Closure $on = true): static
+    {
+        $this->on = $on;
+
+        return $this;
+    }
+
+    /** Mixed state; only meaningful while the switch is off. */
+    public function indeterminate(bool|Closure $indeterminate = true): static
+    {
+        $this->indeterminate = $indeterminate;
+
+        return $this;
+    }
+
+    /** Renders a hidden input posting the switch state under this name. */
+    public function name(string|Closure|null $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    /** The value posted when the switch is on. */
+    public function value(string|int|float|Closure $value): static
+    {
+        $this->value = is_int($value) || is_float($value) ? (string) $value : $value;
+
+        return $this;
+    }
+
+    /** The value posted when the switch is indeterminate. */
+    public function indeterminateValue(string|Closure $indeterminateValue): static
+    {
+        $this->indeterminateValue = $indeterminateValue;
+
+        return $this;
+    }
+
+    public function label(string|Closure|null $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    /** State label rendered after the control; omitted when equal to the label. */
+    public function onLabel(string|Closure|null $onLabel): static
+    {
+        $this->onLabel = $onLabel;
+
+        return $this;
+    }
+
+    /** State label rendered before the control. */
+    public function offLabel(string|Closure|null $offLabel): static
+    {
+        $this->offLabel = $offLabel;
+
+        return $this;
+    }
+
+    /** Selector (or element id) of a container to reveal while the switch is on. */
+    public function toggle(string|Closure|null $toggle): static
+    {
+        $this->toggle = $toggle;
+
+        return $this;
+    }
+
+    /** Selector (or element id) of a container to reveal while the switch is off. */
+    public function reverseToggle(string|Closure|null $reverseToggle): static
+    {
+        $this->reverseToggle = $reverseToggle;
+
+        return $this;
+    }
+
+    public function labelledBy(string|Closure|null $labelledBy): static
+    {
+        $this->labelledBy = $labelledBy;
+
+        return $this;
+    }
+
+    public function describedBy(string|Closure|null $describedBy): static
+    {
+        $this->describedBy = $describedBy;
+
+        return $this;
+    }
+
+    /** Help text below the switch; supports markdown. */
+    public function instructions(string|Stringable|Closure|null $instructions): static
+    {
+        $this->instructions = $instructions;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $on = (bool) $this->evaluate($this->on);
+        $label = $this->evaluate($this->label);
+        $onLabel = $this->evaluate($this->onLabel) ?? $label;
+        $offLabel = $this->evaluate($this->offLabel);
+        $value = (string) $this->evaluate($this->value);
+        $indeterminateValue = (string) $this->evaluate($this->indeterminateValue);
+
+        return [
+            'checked' => $on,
+            'indeterminate' => $this->effectiveIndeterminateValue() !== null,
+            'disabled' => $this->isDisabled(),
+            'size' => $this->getSize(),
+            'value' => $value !== self::DEFAULT_VALUE ? $value : null,
+            'indeterminate-value' => $indeterminateValue !== self::DEFAULT_INDETERMINATE_VALUE ? $indeterminateValue : null,
+            'label' => $label,
+            'on-label' => $onLabel !== null && $onLabel !== $label ? $onLabel : null,
+            'off-label' => $offLabel,
+        ];
+    }
+
+    #[\Override]
+    protected function renderSlots(): string
+    {
+        $instructions = (string) ($this->evaluate($this->instructions) ?? '');
+
+        return implode('', array_filter([
+            $this->switchButtonHtml(),
+            $this->hiddenInputHtml(),
+            $instructions !== ''
+                ? $this->renderSlot('help-text', new HtmlString(
+                    Html::tag('div', app(ContentHtml::class)->parseMarkdown($instructions)),
+                ))
+                : '',
+            parent::renderSlots(),
+        ]));
+    }
+
+    /**
+     * Merges additional HTML attributes onto the `craft-switch-button`
+     * element. These win over the computed defaults.
+     *
+     * @param  array<string, mixed>  $attributes
+     */
+    public function buttonAttributes(array $attributes): static
+    {
+        $this->buttonAttributes = Arr::merge(
+            static::normalizeClasses($this->buttonAttributes),
+            static::normalizeClasses($attributes),
+        );
+
+        return $this;
+    }
+
+    protected function switchButtonHtml(): string
+    {
+        $on = (bool) $this->evaluate($this->on);
+        $indeterminate = $this->effectiveIndeterminateValue() !== null;
+        $toggle = $this->evaluate($this->toggle);
+        $reverseToggle = $this->evaluate($this->reverseToggle);
+
+        return Html::tag('craft-switch-button', '', Arr::merge(
+            [
+                'slot' => 'input',
+                'id' => $this->getId(),
+                'role' => 'switch',
+                'size' => $this->getSize() ?? 'medium',
+                'checked' => $on,
+                'indeterminate' => $indeterminate,
+                'disabled' => $this->isDisabled(),
+                'class' => array_filter([
+                    $toggle || $reverseToggle ? 'fieldtoggle' : null,
+                ]),
+                'data' => [
+                    'tag-name' => 'craft-switch-button',
+                    'target' => $toggle ?: null,
+                    'reverse-target' => $reverseToggle ?: null,
+                ],
+                'aria' => [
+                    'checked' => $on ? 'true' : ($indeterminate ? 'mixed' : 'false'),
+                    'labelledby' => $this->evaluate($this->labelledBy),
+                    'describedby' => $this->evaluate($this->describedBy),
+                ],
+            ],
+            $this->buttonAttributes,
+        ));
+    }
+
+    protected function hiddenInputHtml(): string
+    {
+        $name = $this->evaluate($this->name);
+
+        if ($name === null) {
+            return '';
+        }
+
+        return (string) Html::hiddenInput($name, $this->postedValue(), [
+            'disabled' => $this->isDisabled(),
+            'slot' => 'hidden-input',
+        ]);
+    }
+
+    protected function postedValue(): string
+    {
+        if ($this->evaluate($this->on)) {
+            return (string) $this->evaluate($this->value);
+        }
+
+        return $this->effectiveIndeterminateValue() ?? '';
+    }
+
+    /** The effective indeterminate posting value, or `null` when not indeterminate. */
+    private function effectiveIndeterminateValue(): ?string
+    {
+        if ($this->evaluate($this->on) || ! $this->evaluate($this->indeterminate)) {
+            return null;
+        }
+
+        return (string) $this->evaluate($this->indeterminateValue);
+    }
+}
diff --git a/src/Cp/Components/Radio.php b/src/Cp/Components/Radio.php
new file mode 100644
index 00000000000..2c330068e1a
--- /dev/null
+++ b/src/Cp/Components/Radio.php
@@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use CraftCms\Cms\Support\Html;
+
+use function CraftCms\Cms\t;
+
+/**
+ * PHP counterpart to the `<craft-radio>` web component. Shares the light-DOM
+ * SSR surface with {@see Checkbox} — a native input and label the web
+ * component adopts — with radio posting semantics: no always-post hidden
+ * input (the group posts a single value), and custom-option mode labeled
+ * "Other:" with the text input in its own wrapper.
+ */
+class Radio extends Checkbox
+{
+    #[\Override]
+    protected function tagName(): string
+    {
+        return 'craft-radio';
+    }
+
+    /** Radios have no indeterminate state, so drop the Checkbox host attribute. */
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [];
+    }
+
+    #[\Override]
+    protected function inputDefaults(): array
+    {
+        return [
+            'type' => 'radio',
+            'class' => ['radio'],
+        ];
+    }
+
+    #[\Override]
+    protected function rendersAlwaysPostInput(): bool
+    {
+        return false;
+    }
+
+    #[\Override]
+    protected function customLabelText(): string
+    {
+        return t('Other:');
+    }
+
+    #[\Override]
+    protected function customInputHtml(): string
+    {
+        $html = parent::customInputHtml();
+
+        return $html === '' ? '' : Html::tag('div', $html, ['class' => 'custom-option-wrapper']);
+    }
+}
diff --git a/src/Cp/Components/RadioGroup.php b/src/Cp/Components/RadioGroup.php
new file mode 100644
index 00000000000..8b73a77f4d5
--- /dev/null
+++ b/src/Cp/Components/RadioGroup.php
@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+
+/**
+ * Radio group container — the PHP counterpart to the `<craft-radio-group>`
+ * web component (and to the legacy `_includes/forms/radioGroup` template).
+ * Renders {@see Radio} options, each in its own wrapper; a single value posts
+ * under the shared name, so there is no always-post hidden input. The web
+ * component adopts that shared name from the slotted radio inputs.
+ *
+ *     RadioGroup::make()
+ *         ->id('mode')
+ *         ->options([
+ *             Radio::make()->label(t('Auto'))->name('mode')->value('auto'),
+ *             Radio::make()->label(t('Manual'))->name('mode')->value('manual'),
+ *         ]);
+ */
+class RadioGroup extends ChoiceGroup
+{
+    protected bool|Closure $toggle = false;
+
+    protected string|Closure|null $targetPrefix = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-radio-group';
+    }
+
+    /** Marks the group as a field toggle (reveals `{targetPrefix}{value}` containers). */
+    public function toggle(bool|Closure $toggle = true): static
+    {
+        $this->toggle = $toggle;
+
+        return $this;
+    }
+
+    public function targetPrefix(string|Closure|null $targetPrefix): static
+    {
+        $this->targetPrefix = $targetPrefix;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $toggle = (bool) $this->evaluate($this->toggle);
+
+        return [
+            'id' => $this->getId(),
+            'class' => array_filter([
+                'radio-group',
+                $toggle ? 'fieldtoggle' : null,
+            ]),
+            'data' => [
+                'target-prefix' => $toggle ? ($this->evaluate($this->targetPrefix) ?? '#') : null,
+            ],
+        ];
+    }
+}
diff --git a/src/Cp/Components/ViewComponent.php b/src/Cp/Components/ViewComponent.php
new file mode 100644
index 00000000000..f8017cae7f5
--- /dev/null
+++ b/src/Cp/Components/ViewComponent.php
@@ -0,0 +1,278 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use CraftCms\Cms\Cp\Concerns\EvaluatesClosures;
+use CraftCms\Cms\Support\Arr;
+use CraftCms\Cms\Support\Html;
+use CraftCms\Cms\Support\Str;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
+use InvalidArgumentException;
+use Stringable;
+use Twig\Markup;
+
+/**
+ * Base class for PHP components that render a Craft custom element, following
+ * the shape explored in craftcms/cms#19032 so generated components (from the
+ * custom elements manifest) and hand-written ones share one API.
+ *
+ * Subclasses provide {@see self::tagName()} and {@see self::hostAttributes()},
+ * plus typed fluent setters. This base supplies attribute merging and slot
+ * handling.
+ *
+ * Slot and attribute values may be Closures, resolved lazily at render time
+ * with dependency injection (see {@see EvaluatesClosures}) — Filament-style
+ * callback properties:
+ *
+ *     Field::make()->label(fn (GeneralConfig $config) => ...)
+ *
+ * A slot value may resolve to a string, an {@see Htmlable}/{@see Stringable},
+ * or another {@see ViewComponent} (rendered into the slot, with its `slot`
+ * attribute set for you). Plain strings are HTML-encoded; pass an `Htmlable`
+ * (e.g. `HtmlString`) for trusted markup.
+ */
+abstract class ViewComponent implements Htmlable, Stringable
+{
+    use EvaluatesClosures;
+
+    /** Key under which the default (unnamed) slot is stored. */
+    protected const DEFAULT_SLOT = '';
+
+    /** @var array<string, mixed> Additional host HTML attributes. */
+    protected array $attributes = [];
+
+    /** @var array<string, mixed> Slot content keyed by slot name. */
+    protected array $slots = [];
+
+    final public function __construct() {}
+
+    public static function make(): static
+    {
+        return app(static::class);
+    }
+
+    /**
+     * Applies a config array by calling the matching fluent setters —
+     * kebab/snake keys are camelized, so Twig-style hashes work:
+     *
+     *     {{ ui('callout', {variant: 'warning', content: 'Careful!'}) }}
+     */
+    public function configure(array $config): static
+    {
+        foreach ($config as $key => $value) {
+            $method = Str::camel((string) $key);
+
+            // Only fluent setters are configurable — evaluated getters
+            // (get*/is*) and the rendering API would otherwise swallow the
+            // value silently, since PHP ignores extra arguments.
+            $notASetter = in_array($method, ['configure', 'make', 'evaluate', 'toHtml'], true)
+                || preg_match('/^(get|is|render)[A-Z]/', $method) === 1;
+
+            if ($notASetter || ! method_exists($this, $method)) {
+                throw new InvalidArgumentException(sprintf(
+                    'Unknown %s config key "%s".',
+                    static::class,
+                    $key,
+                ));
+            }
+
+            $this->$method($value);
+        }
+
+        return $this;
+    }
+
+    /**
+     * Merges additional HTML attributes (e.g. `class`) onto the host element.
+     *
+     * @param  array<string, mixed>  $attributes
+     */
+    public function attributes(array $attributes): static
+    {
+        $this->attributes = Arr::merge(
+            self::normalizeClasses($this->attributes),
+            self::normalizeClasses($attributes),
+        );
+
+        return $this;
+    }
+
+    /**
+     * Assigns this component to a named slot of its parent.
+     */
+    public function slot(string $name): static
+    {
+        $this->attributes['slot'] = $name;
+
+        return $this;
+    }
+
+    /**
+     * The custom element tag name, e.g. `craft-field`.
+     */
+    abstract protected function tagName(): string;
+
+    /**
+     * Host element attributes derived from the component's typed properties.
+     * Values follow {@see Html::renderTagAttributes()} semantics: `true`
+     * renders a bare attribute, `null`/`false` omit it.
+     *
+     * @return array<string, mixed>
+     */
+    protected function hostAttributes(): array
+    {
+        return [];
+    }
+
+    /**
+     * The Blade view backing this component, or `null` to render markup
+     * directly (the right default for single-element components and
+     * manifest-generated classes). View-backed components receive
+     * {@see self::viewData()}.
+     */
+    protected ?string $view = null;
+
+    public function toHtml(): string
+    {
+        if ($this->view !== null) {
+            return view($this->view, $this->viewData())->render();
+        }
+
+        return $this->renderMarkup();
+    }
+
+    /**
+     * Direct markup rendering: the custom element tag wrapping the resolved
+     * slot content.
+     */
+    protected function renderMarkup(): string
+    {
+        return Html::tag(
+            $this->tagName(),
+            $this->renderSlots(),
+            $this->renderedAttributes(),
+        );
+    }
+
+    /**
+     * Data passed to a view-backed component's Blade template. The base
+     * payload keeps slot-attachment and attribute semantics in PHP so
+     * templates stay layout-only; subclasses add their own evaluated pieces.
+     *
+     * @return array<string, mixed>
+     */
+    protected function viewData(): array
+    {
+        return [
+            'component' => $this,
+            'tagName' => $this->tagName(),
+            'attributes' => new HtmlString(Html::renderTagAttributes($this->renderedAttributes())),
+            'slots' => new HtmlString($this->renderSlots()),
+        ];
+    }
+
+    /** @return array<string, mixed> */
+    protected function renderedAttributes(): array
+    {
+        return Arr::merge($this->attributes, $this->hostAttributes());
+    }
+
+    public function __toString(): string
+    {
+        return $this->toHtml();
+    }
+
+    /**
+     * Resolves and concatenates all assigned slot content.
+     */
+    protected function renderSlots(): string
+    {
+        $html = '';
+
+        foreach ($this->slots as $name => $content) {
+            $html .= $this->renderSlot($name, $content);
+        }
+
+        return $html;
+    }
+
+    protected function renderSlot(string $name, mixed $content): string
+    {
+        $resolved = $this->evaluate($content);
+
+        if ($resolved === null || $resolved === '') {
+            return '';
+        }
+
+        // The default slot may hold a list of children (e.g. a field group's
+        // fields); render each in turn.
+        if ($name === static::DEFAULT_SLOT && is_iterable($resolved)) {
+            $html = '';
+
+            foreach ($resolved as $item) {
+                $html .= $this->renderSlot($name, $item);
+            }
+
+            return $html;
+        }
+
+        // A nested component drops straight into the named slot.
+        if ($name !== static::DEFAULT_SLOT && $resolved instanceof self) {
+            return $resolved->slot($name)->toHtml();
+        }
+
+        $rendered = $this->renderContent($resolved);
+
+        if ($name === static::DEFAULT_SLOT) {
+            return $rendered;
+        }
+
+        return $this->slotted($rendered, $name);
+    }
+
+    /**
+     * Renders a resolved content value to HTML: `Htmlable` passes through raw,
+     * Twig `Markup` (e.g. `{% set %}` captures) is pre-escaped by Twig, and
+     * anything else is treated as literal text and encoded.
+     */
+    protected function renderContent(mixed $resolved): string
+    {
+        return match (true) {
+            $resolved instanceof Htmlable => $resolved->toHtml(),
+            $resolved instanceof Markup => (string) $resolved,
+            default => Html::encode((string) $resolved),
+        };
+    }
+
+    /**
+     * Assigns rendered HTML to a named slot: sets `slot` directly on a single
+     * root element, or wraps the content in a `<span>`. Setting the attribute
+     * on the root element matters for slots whose element the component
+     * inspects (e.g. a field's `input` slot, which must not be a wrapper).
+     */
+    protected function slotted(string $html, string $slot): string
+    {
+        if (str_starts_with(ltrim($html), '<')) {
+            try {
+                return Html::modifyTagAttributes($html, ['slot' => $slot]);
+            } catch (InvalidArgumentException) {
+                // Fall through to wrapping.
+            }
+        }
+
+        return Html::tag('span', $html, ['slot' => $slot]);
+    }
+
+    /** Explodes `class` strings into arrays so merges union them. */
+    protected static function normalizeClasses(array $attributes): array
+    {
+        if (isset($attributes['class'])) {
+            $attributes['class'] = Html::explodeClass($attributes['class']);
+        }
+
+        return $attributes;
+    }
+}
diff --git a/src/Cp/Concerns/EvaluatesClosures.php b/src/Cp/Concerns/EvaluatesClosures.php
new file mode 100644
index 00000000000..d2d20107f5c
--- /dev/null
+++ b/src/Cp/Concerns/EvaluatesClosures.php
@@ -0,0 +1,100 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+use ReflectionFunction;
+use ReflectionNamedType;
+
+/**
+ * Filament-style callback properties: any configurable value may be a Closure,
+ * resolved at render time. Closure parameters are injected by name first, then
+ * by type, then from the container, so callers can type-hint whatever they
+ * need:
+ *
+ *     Field::make()->label(fn (Field $field) => ...)
+ *     Field::make()->required(fn (GeneralConfig $config) => ...)
+ */
+trait EvaluatesClosures
+{
+    /**
+     * @template T
+     *
+     * @param  T|Closure  $value
+     * @param  array<string, mixed>  $namedInjections  Parameter-name => value
+     * @param  array<class-string, mixed>  $typedInjections  Type => value
+     * @return T
+     */
+    public function evaluate(
+        mixed $value,
+        array $namedInjections = [],
+        array $typedInjections = [],
+    ): mixed {
+        if (! $value instanceof Closure) {
+            return $value;
+        }
+
+        $namedInjections = [
+            ...$this->defaultEvaluationNamedInjections(),
+            ...$namedInjections,
+        ];
+        $typedInjections = [
+            ...$this->defaultEvaluationTypedInjections(),
+            ...$typedInjections,
+        ];
+
+        $arguments = [];
+
+        foreach (new ReflectionFunction($value)->getParameters() as $parameter) {
+            $name = $parameter->getName();
+
+            if (array_key_exists($name, $namedInjections)) {
+                $arguments[$name] = $namedInjections[$name];
+
+                continue;
+            }
+
+            $type = $parameter->getType();
+
+            if ($type instanceof ReflectionNamedType && ! $type->isBuiltin()) {
+                $typeName = $type->getName();
+
+                foreach ($typedInjections as $class => $injection) {
+                    if (is_a($class, $typeName, true)) {
+                        $arguments[$name] = $injection;
+
+                        continue 2;
+                    }
+                }
+
+                $arguments[$name] = app($typeName);
+
+                continue;
+            }
+
+            if ($parameter->isDefaultValueAvailable()) {
+                $arguments[$name] = $parameter->getDefaultValue();
+            }
+        }
+
+        return $value(...$arguments);
+    }
+
+    /** @return array<string, mixed> */
+    protected function defaultEvaluationNamedInjections(): array
+    {
+        return [
+            'component' => $this,
+        ];
+    }
+
+    /** @return array<class-string, mixed> */
+    protected function defaultEvaluationTypedInjections(): array
+    {
+        return [
+            static::class => $this,
+        ];
+    }
+}
diff --git a/src/Cp/Concerns/HasAppearance.php b/src/Cp/Concerns/HasAppearance.php
new file mode 100644
index 00000000000..8b6baa7b344
--- /dev/null
+++ b/src/Cp/Concerns/HasAppearance.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+use CraftCms\Cms\Cp\Enums\Appearance;
+
+/**
+ * Fluent `appearance` support for components whose custom element accepts the
+ * shared appearances. Strings (e.g. from Twig `ui()` config) are validated
+ * against the {@see Appearance} enum.
+ */
+trait HasAppearance
+{
+    protected Appearance|string|Closure|null $appearance = null;
+
+    public function appearance(Appearance|string|Closure|null $appearance): static
+    {
+        $this->appearance = $appearance;
+
+        return $this;
+    }
+
+    public function getAppearance(): ?string
+    {
+        $appearance = $this->evaluate($this->appearance);
+
+        if ($appearance === null) {
+            return null;
+        }
+
+        return $appearance instanceof Appearance ? $appearance->value : Appearance::from($appearance)->value;
+    }
+}
diff --git a/src/Cp/Concerns/HasDisabled.php b/src/Cp/Concerns/HasDisabled.php
new file mode 100644
index 00000000000..411ae06b1ed
--- /dev/null
+++ b/src/Cp/Concerns/HasDisabled.php
@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+
+/** Fluent `disabled` support. */
+trait HasDisabled
+{
+    protected bool|Closure $disabled = false;
+
+    public function disabled(bool|Closure $disabled = true): static
+    {
+        $this->disabled = $disabled;
+
+        return $this;
+    }
+
+    public function isDisabled(): bool
+    {
+        return (bool) $this->evaluate($this->disabled);
+    }
+}
diff --git a/src/Cp/Concerns/HasId.php b/src/Cp/Concerns/HasId.php
new file mode 100644
index 00000000000..79f7cf656b1
--- /dev/null
+++ b/src/Cp/Concerns/HasId.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+
+/**
+ * Fluent `id` support. The component decides where the id lands — e.g. the
+ * host element for a field, or the slotted control for a form input.
+ */
+trait HasId
+{
+    protected string|Closure|null $id = null;
+
+    public function id(string|Closure|null $id): static
+    {
+        $this->id = $id;
+
+        return $this;
+    }
+
+    public function getId(): ?string
+    {
+        $id = $this->evaluate($this->id);
+
+        return $id !== null ? (string) $id : null;
+    }
+}
diff --git a/src/Cp/Concerns/HasSize.php b/src/Cp/Concerns/HasSize.php
new file mode 100644
index 00000000000..cd516e9bfb2
--- /dev/null
+++ b/src/Cp/Concerns/HasSize.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+use CraftCms\Cms\Cp\Enums\Size;
+
+/**
+ * Fluent `size` support for components whose custom element accepts the
+ * shared sizes. Strings (e.g. from Twig `ui()` config) are validated against
+ * the {@see Size} enum.
+ */
+trait HasSize
+{
+    protected Size|string|Closure|null $size = null;
+
+    public function size(Size|string|Closure|null $size): static
+    {
+        $this->size = $size;
+
+        return $this;
+    }
+
+    public function getSize(): ?string
+    {
+        $size = $this->evaluate($this->size);
+
+        if ($size === null) {
+            return null;
+        }
+
+        return $size instanceof Size ? $size->value : Size::from($size)->value;
+    }
+}
diff --git a/src/Cp/Concerns/HasVariant.php b/src/Cp/Concerns/HasVariant.php
new file mode 100644
index 00000000000..214f87e93a0
--- /dev/null
+++ b/src/Cp/Concerns/HasVariant.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Concerns;
+
+use Closure;
+use CraftCms\Cms\Cp\Enums\Variant;
+
+/**
+ * Fluent `variant` support for components whose custom element accepts the
+ * shared semantic variants. Strings (e.g. from Twig `ui()` config) are
+ * validated against the {@see Variant} enum.
+ */
+trait HasVariant
+{
+    protected Variant|string|Closure|null $variant = null;
+
+    public function variant(Variant|string|Closure|null $variant): static
+    {
+        $this->variant = $variant;
+
+        return $this;
+    }
+
+    public function getVariant(): ?string
+    {
+        $variant = $this->evaluate($this->variant);
+
+        if ($variant === null) {
+            return null;
+        }
+
+        return $variant instanceof Variant ? $variant->value : Variant::from($variant)->value;
+    }
+}
diff --git a/src/Cp/Enums/Appearance.php b/src/Cp/Enums/Appearance.php
new file mode 100644
index 00000000000..e182ca37262
--- /dev/null
+++ b/src/Cp/Enums/Appearance.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Enums;
+
+/**
+ * Visual appearances shared across the CP component system. Mirrors the
+ * `Appearance` constants in `@craftcms/cp` (src/constants/appearances.ts).
+ */
+enum Appearance: string
+{
+    case Solid = 'solid';
+    case OutlineFill = 'outline-fill';
+    case Fill = 'fill';
+    case Outline = 'outline';
+    case Plain = 'plain';
+}
diff --git a/src/Cp/Enums/Size.php b/src/Cp/Enums/Size.php
new file mode 100644
index 00000000000..6ab23ab8230
--- /dev/null
+++ b/src/Cp/Enums/Size.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Enums;
+
+/**
+ * Component sizes shared across the CP component system (the union of the
+ * `size` properties in `@craftcms/cp`; not every component accepts every
+ * size).
+ */
+enum Size: string
+{
+    case Zero = 'zero';
+    case Small = 'small';
+    case Medium = 'medium';
+    case Large = 'large';
+}
diff --git a/src/Cp/Enums/Variant.php b/src/Cp/Enums/Variant.php
new file mode 100644
index 00000000000..2c47cf553e2
--- /dev/null
+++ b/src/Cp/Enums/Variant.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Enums;
+
+/**
+ * Semantic variants shared across the CP component system. Mirrors the
+ * `Variant` constants in `@craftcms/cp` (src/constants/variants.ts).
+ */
+enum Variant: string
+{
+    case Neutral = 'neutral';
+    case Success = 'success';
+    case Warning = 'warning';
+    case Danger = 'danger';
+    case Info = 'info';
+}
diff --git a/src/Cp/FormFields.php b/src/Cp/FormFields.php
index 37ff8c3122d..bfef0a700ec 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -7,16 +7,28 @@
 use CommerceGuys\Addressing\Subdivision\SubdivisionRepository as BaseSubdivisionRepository;
 use CraftCms\Cms\Address\Addresses;
 use CraftCms\Cms\Address\Elements\Address;
-use CraftCms\Cms\Cp\Html\ContentHtml;
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Components\ButtonGroup;
+use CraftCms\Cms\Cp\Components\Checkbox;
+use CraftCms\Cms\Cp\Components\CheckboxGroup;
+use CraftCms\Cms\Cp\Components\CheckboxSelect;
+use CraftCms\Cms\Cp\Components\Field;
+use CraftCms\Cms\Cp\Components\Lightswitch;
+use CraftCms\Cms\Cp\Components\Radio;
+use CraftCms\Cms\Cp\Components\RadioGroup;
+use CraftCms\Cms\Cp\Enums\Size;
 use CraftCms\Cms\Cp\Html\MenuHtml;
 use CraftCms\Cms\Element\Validation\ElementRules;
 use CraftCms\Cms\Support\Arr;
+use CraftCms\Cms\Support\Facades\Deprecator;
+use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Facades\I18N;
-use CraftCms\Cms\Support\Facades\Markdown;
+use CraftCms\Cms\Support\Facades\InputNamespace;
 use CraftCms\Cms\Support\Facades\Sites;
 use CraftCms\Cms\Support\Html;
 use CraftCms\Cms\Support\Str;
 use CraftCms\Cms\View\TemplateMode;
+use Illuminate\Support\HtmlString;
 use Illuminate\Support\ViewErrorBag;
 use Illuminate\Validation\ConditionalRules;
 use Illuminate\Validation\Rules\RequiredIf;
@@ -29,34 +41,35 @@
 
 readonly class FormFields
 {
+    /**
+     * Renders a `<craft-field>` for the given input, via the {@see Field} UI
+     * component. The field chrome (heading, notices, error list) lives in the
+     * web component; aria wiring between the label, descriptors and the
+     * slotted control happens client-side, so `labelledBy`/`describedBy` are
+     * only passed to input templates when explicitly configured.
+     */
     public static function fieldHtml(string|Stringable|callable $input, array $config = []): string
+    {
+        return self::fieldFromConfig($input, $config)->toHtml();
+    }
+
+    /**
+     * Maps the legacy field config surface onto the {@see Field} component —
+     * the PHP twin of the `_includes/forms/field` glue template.
+     */
+    private static function fieldFromConfig(string|Stringable|callable $input, array $config): Field
     {
         $attribute = $config['attribute'] ?? $config['id'] ?? null;
         $id = $config['id'] ??= 'field'.mt_rand();
-        $labelId = $config['labelId'] ?? "$id-label";
-        $instructionsId = $config['instructionsId'] ?? "$id-instructions";
-        $tipId = $config['tipId'] ?? "$id-tip";
-        $warningId = $config['warningId'] ?? "$id-warning";
-        $errorsId = $config['errorsId'] ?? "$id-errors";
-        $statusId = $config['statusId'] ?? "$id-status";
-
-        $instructions = $config['instructions'] ?? null;
-        $tip = $config['tip'] ?? null;
-        $warning = $config['warning'] ?? null;
+
         $errors = $config['errors'] ?? null;
         if ($errors instanceof ViewErrorBag) {
             $errors = $errors->get($attribute);
         }
-        $status = $config['status'] ?? null;
-        $disabled = $config['disabled'] ?? false;
-        $static = $config['static'] ?? false;
 
-        $fieldset = $config['fieldset'] ?? false;
-        $fieldId = $config['fieldId'] ?? "$id-field";
+        $status = $config['status'] ?? null;
         $label = $config['fieldLabel'] ?? $config['label'] ?? null;
 
-        $data = $config['data'] ?? [];
-
         if ($label === '__blank__') {
             $label = null;
         }
@@ -67,27 +80,10 @@ public static function fieldHtml(string|Stringable|callable $input, array $confi
             $input = (string) $input;
         }
 
-        if (is_callable($input) || str_starts_with($input, 'template:')) {
-            // Set labelledBy and describedBy values in case the input template supports it
-            if (! isset($config['labelledBy']) && $label) {
-                $config['labelledBy'] = $labelId;
-            }
-            if (! isset($config['describedBy'])) {
-                $descriptorIds = array_filter([
-                    $errors ? $errorsId : null,
-                    $status ? $statusId : null,
-                    $instructions ? $instructionsId : null,
-                    $tip ? $tipId : null,
-                    $warning ? $warningId : null,
-                ]);
-                $config['describedBy'] = $descriptorIds ? implode(' ', $descriptorIds) : null;
-            }
-
-            if (is_callable($input)) {
-                $input = $input($config);
-            } else {
-                $input = self::renderTemplate(substr($input, 9), $config);
-            }
+        if (is_callable($input)) {
+            $input = $input($config);
+        } elseif (str_starts_with($input, 'template:')) {
+            $input = self::renderTemplate(substr($input, 9), $config);
         }
 
         if ($siteId) {
@@ -99,17 +95,8 @@ public static function fieldHtml(string|Stringable|callable $input, array $confi
             $site = null;
         }
 
-        $required = (bool) ($config['required'] ?? false);
-        $instructionsPosition = $config['instructionsPosition'] ?? 'before';
-        $orientation = $config['orientation'] ?? ($site ? $site->getLocale() : I18N::getLocale())->getOrientation();
         $translatable = Sites::isMultiSite() ? ($config['translatable'] ?? ($site !== null)) : false;
 
-        $fieldClass = array_merge(array_filter([
-            'field',
-            ($config['first'] ?? false) ? 'first' : null,
-            $errors ? 'has-errors' : null,
-        ]), Html::explodeClass($config['fieldClass'] ?? []));
-
         $showAttribute = (
             ($config['showAttribute'] ?? false) &&
             currentUser()->isAdmin() &&
@@ -119,77 +106,9 @@ public static function fieldHtml(string|Stringable|callable $input, array $confi
             ! empty($config['actionMenuItems']) &&
             ($label || $showAttribute || isset($config['labelExtra']))
         );
-        $showLabelExtra = $showAttribute || $showActionMenu || isset($config['labelExtra']);
 
-        $translationDescription = $config['translationDescription'] ?? t('This field is translatable.');
-        $translationIconHtml = Html::button('', [
-            'class' => ['t9n-indicator', 'prevent-autofocus'],
-            'data' => [
-                'icon' => 'language',
-            ],
-            'aria' => [
-                'label' => $translationDescription,
-            ],
-        ]);
-
-        $translationIconHtml = Html::tag('craft-tooltip', $translationIconHtml, [
-            'placement' => 'bottom',
-            'max-width' => '200px',
-            'text' => $translationDescription,
-            'delay' => '1000',
-        ]);
-
-        if ($label) {
-            $labelHtml = $label.(
-                ($required
-                    ? Html::tag('span', t('Required'), [
-                        'class' => ['visually-hidden'],
-                    ]).
-                    Html::tag('span', '', [
-                        'class' => ['required'],
-                        'aria' => [
-                            'hidden' => 'true',
-                        ],
-                    ])
-                    : '').
-                ($translatable ? $translationIconHtml : '')
-            );
-        } else {
-            $labelHtml = '';
-        }
-
-        return view('c::forms.field', [
-            'fieldAttributes' => Arr::merge(
-                [
-                    'class' => $fieldClass,
-                    'id' => $fieldId,
-                    'aria' => [
-                        'labelledby' => $fieldset ? $labelId : null,
-                    ],
-                    'role' => $fieldset ? 'group' : null,
-                    'data' => [
-                        'attribute' => $attribute,
-                    ] + $data,
-                ],
-                $config['fieldAttributes'] ?? []
-            ),
-            'status' => $status,
-            'statusId' => $statusId,
-            'statusClass' => $status ? Str::toString($status[0]) : null,
-            'statusLabel' => $status ? $status[1] : null,
-            'showHeading' => $label || $showLabelExtra,
-            'headingPrefix' => $config['headingPrefix'] ?? null,
-            'headingSuffix' => $config['headingSuffix'] ?? null,
-            'labelElementHtml' => $label
-                ? Html::tag($fieldset ? 'legend' : 'label', $labelHtml, Arr::merge([
-                    'id' => $labelId,
-                    'class' => $config['labelClass'] ?? null,
-                    'for' => ! $fieldset ? $id : null,
-                ], $config['labelAttributes'] ?? []))
-                : null,
-            'static' => $static,
-            'showLabelExtra' => $showLabelExtra,
-            'actionMenuHtml' => $showActionMenu
+        $labelExtra = implode('', array_filter([
+            $showActionMenu
                 ? app(MenuHtml::class)->disclosureMenu($config['actionMenuItems'], [
                     'hiddenLabel' => t('Actions'),
                     'buttonAttributes' => [
@@ -197,61 +116,130 @@ public static function fieldHtml(string|Stringable|callable $input, array $confi
                     ],
                 ])
                 : null,
-            'attributeCopyHtml' => $showAttribute
+            $showAttribute
                 ? self::renderTemplate('_includes/forms/copytextbtn', [
                     'id' => "$id-attribute",
                     'class' => ['code', 'small', 'light'],
                     'value' => $config['attribute'],
                 ])
                 : null,
-            'labelExtra' => isset($config['labelExtra']) ? (string) $config['labelExtra'] : null,
-            'instructionsId' => $instructionsId,
-            'instructionsContent' => $instructions
-                ? app(ContentHtml::class)->parseMarkdown($instructions)
-                : null,
-            'instructionsPosition' => $instructionsPosition,
-            'inputContainerAttributes' => Arr::merge(
+            isset($config['labelExtra']) ? (string) $config['labelExtra'] : null,
+        ]));
+
+        return Field::make()
+            ->id($config['fieldId'] ?? "$id-field")
+            ->label($label !== null ? (string) $label : null)
+            ->required((bool) ($config['required'] ?? false))
+            ->translatable($translatable, $config['translationDescription'] ?? null)
+            ->fieldset((bool) ($config['fieldset'] ?? false))
+            ->readOnly((bool) ($config['static'] ?? false))
+            ->disabled((bool) ($config['disabled'] ?? false))
+            ->orientation($config['orientation'] ?? ($site ? $site->getLocale() : I18N::getLocale())->getOrientation())
+            ->status($status ? Str::toString($status[0]) : null, $status[1] ?? null)
+            ->instructions($config['instructions'] ?? null)
+            ->instructionsPosition($config['instructionsPosition'] ?? 'before')
+            ->tip($config['tip'] ?? null)
+            ->warning($config['warning'] ?? null)
+            ->errors($errors !== null ? collect($errors)->map(fn ($error): string => (string) $error)->all() : [])
+            ->headingPrefix($config['headingPrefix'] ?? null)
+            ->headingSuffix($config['headingSuffix'] ?? null)
+            ->labelExtra($labelExtra !== '' ? $labelExtra : null)
+            ->input($input)
+            ->width($config['width'] ?? null)
+            ->attributes(Arr::merge(
                 [
-                    'class' => array_filter([
-                        'input',
-                        $orientation,
-                        $errors ? 'errors' : null,
-                        $disabled ? 'disabled' : null,
-                    ]),
+                    'class' => array_merge(array_filter([
+                        'field',
+                        ($config['first'] ?? false) ? 'first' : null,
+                    ]), Html::explodeClass($config['fieldClass'] ?? [])),
+                    'data' => [
+                        'attribute' => $attribute,
+                    ] + ($config['data'] ?? []),
                 ],
-                $config['inputContainerAttributes'] ?? []
-            ),
-            'input' => $input,
-            'tipId' => $tipId,
-            'tipContent' => self::noticeContent($tip),
-            'warningId' => $warningId,
-            'warningContent' => self::noticeContent($warning),
-            'errorListHtml' => $errors
-                ? self::renderTemplate('_includes/forms/errorList', [
-                    'id' => $errorsId,
-                    'errors' => $errors,
-                ])
-                : null,
-        ])->render();
+                // Transitional: the input container lives in the web
+                // component's shadow DOM now, so per-instance container
+                // attributes land on the host until callers migrate.
+                Arr::merge(
+                    $config['inputContainerAttributes'] ?? [],
+                    $config['fieldAttributes'] ?? [],
+                ),
+            ));
     }
 
-    private static function noticeContent(string|Stringable|null $message): ?string
+    /**
+     * Logs deprecations for legacy config keys that the new UI components no
+     * longer support (or support with changed behavior). Keys that map
+     * faithfully onto the components don't warn.
+     *
+     * @param  array<string, string>  $messages  Key => what to use instead
+     */
+    private static function deprecateConfig(string $component, array $config, array $messages): void
     {
-        if (! $message) {
-            return null;
+        foreach ($messages as $key => $message) {
+            if (array_key_exists($key, $config)) {
+                Deprecator::log(
+                    "$component-config-$key",
+                    "The `$key` $component config option $message",
+                );
+            }
         }
-
-        return Html::decodeDoubles(Markdown::parseParagraph(Html::encodeInvalidTags((string) $message)));
     }
 
-    public static function buttonHtml(array $config): string
+    /**
+     * Maps the legacy button config surface onto the {@see Button} component,
+     * the translation layer between the legacy Twig config array and the
+     * component. `spinner` is absorbed (the web component renders its own
+     * spinner when loading); the busy/failure/retry/success messages pass
+     * through as data attributes for the legacy submit JS.
+     */
+    public static function buttonFromConfig(array $config): Button
     {
-        return self::renderTemplate('_includes/forms/button', $config);
-    }
+        self::deprecateConfig('button', $config, [
+            'spinner' => 'has been deprecated. `<craft-button>` renders its own spinner while loading.',
+        ]);
 
-    public static function buttonGroupHtml(array $config): string
-    {
-        return self::renderTemplate('_includes/forms/buttonGroup', $config);
+        $label = $config['label'] ?? null;
+        $labelHtml = $config['labelHtml'] ?? null;
+        $readOnly = (bool) ($config['readOnly'] ?? false);
+        $size = Size::tryFrom($config['size'] ?? '');
+        $classArray = Html::explodeClass($config['class'] ?? []);
+
+        if (! $size && in_array('small', $classArray)) {
+            $size = Size::Small;
+            // Remove the small class
+            Arr::forget($classArray, 'small');
+            self::deprecateConfig('button', $config, [
+                'class.small' => 'has been deprecated. Use size="small" instead.',
+            ]);
+        }
+
+        $attributes = $config['attributes'] ?? [];
+
+        return Button::make()
+            ->id($config['id'] ?? null)
+            ->type($config['type'] ?? 'button')
+            ->label($labelHtml !== null ? new HtmlString((string) $labelHtml) : ($label !== null ? (string) $label : null))
+            ->icon($config['icon'] ?? null)
+            ->prefix(! isset($config['icon']) ? ($config['iconHtml'] ?? null) : null)
+            ->disabled((bool) ($config['disabled'] ?? $readOnly))
+            ->size($size)
+            ->appearance($config['appearance'] ?? null)
+            ->command($config['command'] ?? null)
+            ->attributes(Arr::merge(
+                [
+                    'class' => array_merge(
+                        Html::explodeClass($config['class'] ?? []),
+                        array_filter([$readOnly ? 'read-only' : null]),
+                    ),
+                    'data' => array_filter([
+                        'busy-message' => $config['busyMessage'] ?? null,
+                        'failure-message' => $config['failureMessage'] ?? null,
+                        'retry-message' => $config['retryMessage'] ?? null,
+                        'success-message' => $config['successMessage'] ?? null,
+                    ]),
+                ],
+                $attributes
+            ));
     }
 
     public static function buttonGroupFieldHtml(array $config): string
@@ -259,7 +247,65 @@ public static function buttonGroupFieldHtml(array $config): string
         $config['id'] ??= 'buttongroup'.mt_rand();
         $config['fieldset'] = true;
 
-        return self::fieldHtml('template:_includes/forms/buttonGroup', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::buttonGroupFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
+    /**
+     * Maps the legacy buttonGroup config surface onto the {@see ButtonGroup}
+     * component, applying the group-level appearance/size defaults and the
+     * selected state to each option's button.
+     */
+    public static function buttonGroupFromConfig(array $config): ButtonGroup
+    {
+        $value = $config['value'] ?? null;
+        $appearance = $config['appearance'] ?? 'outline';
+        $size = $config['size'] ?? null;
+        $disabled = ($config['disabled'] ?? false) || ($config['static'] ?? false);
+
+        $buttons = [];
+
+        foreach (($config['options'] ?? []) as $key => $option) {
+            if (! is_array($option)) {
+                $option = ['label' => $option, 'value' => $key];
+            }
+
+            $optionValue = $option['value'] ?? null;
+            $selected = $optionValue !== null && $optionValue == $value;
+
+            $buttons[] = Button::make()
+                ->label(isset($option['labelHtml'])
+                    ? new HtmlString((string) $option['labelHtml'])
+                    : ($option['label'] ?? null))
+                ->icon($option['icon'] ?? null)
+                ->appearance($option['appearance'] ?? $appearance)
+                ->size($option['size'] ?? $size)
+                ->active($selected)
+                ->disabled($disabled)
+                ->attributes(Arr::merge(
+                    [
+                        'class' => Html::explodeClass($option['class'] ?? []),
+                        'value' => $optionValue,
+                        'data' => ['value' => $optionValue],
+                        'aria' => ['pressed' => $selected ? 'true' : 'false'],
+                    ],
+                    $option['attributes'] ?? [],
+                ));
+        }
+
+        return ButtonGroup::make()
+            ->id($config['id'] ?? 'button-group-'.mt_rand())
+            ->labelledBy($config['labelledBy'] ?? null)
+            ->name($config['name'] ?? null)
+            ->value($value !== null ? (string) $value : null)
+            ->disabled($disabled)
+            ->buttons($buttons)
+            ->attributes(Arr::merge(
+                ['class' => Html::explodeClass($config['class'] ?? [])],
+                $config['containerAttributes'] ?? [],
+            ));
     }
 
     public static function checkboxFieldHtml(array $config): string
@@ -273,7 +319,57 @@ public static function checkboxFieldHtml(array $config): string
         // Don't pass along `label` since it's ambiguous
         unset($config['label']);
 
-        return self::fieldHtml('template:_includes/forms/checkbox', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::checkboxFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
+    /**
+     * Maps the legacy checkbox config surface onto the {@see Checkbox}
+     * component. Legacy semantics preserved: `checkboxLabel` wins over
+     * `label`, aria-labelledby is suppressed when an `aria-label` is
+     * configured, and custom-option mode renders a text input for the value.
+     */
+    public static function checkboxFromConfig(array $config): Checkbox
+    {
+        $id = $config['id'] ?? 'checkbox'.mt_rand();
+        $labelId = $config['labelId'] ?? "$id-label";
+        $aria = Arr::merge($config['inputAttributes']['aria'] ?? [], $config['aria'] ?? []);
+        $custom = (bool) ($config['custom'] ?? false);
+
+        return Checkbox::make()
+            ->id($id)
+            ->labelId($labelId)
+            ->name($config['name'] ?? null)
+            ->value($config['value'] ?? 1)
+            ->checked((bool) ($config['checked'] ?? false))
+            ->autofocus((bool) ($config['autofocus'] ?? false))
+            ->disabled((bool) ($config['disabled'] ?? false))
+            ->label($config['checkboxLabel'] ?? $config['label'] ?? null)
+            ->info($config['info'] ?? null)
+            ->icon($config['icon'] ?? null)
+            ->color($config['color'] ?? null)
+            ->custom($custom
+                ? self::textHtml([
+                    'value' => $config['value'] ?? null,
+                    'class' => 'small custom-option-input',
+                    'labelledBy' => $labelId,
+                ])
+                : null)
+            ->toggle($config['toggle'] ?? null)
+            ->reverseToggle($config['reverseToggle'] ?? null)
+            ->targetPrefix($config['targetPrefix'] ?? null)
+            ->labelledBy(empty($aria['label']) ? ($config['labelledBy'] ?? null) : null)
+            ->describedBy($config['describedBy'] ?? $aria['describedby'] ?? null)
+            ->inputAttributes(Arr::merge(
+                [
+                    'class' => Html::explodeClass($config['class'] ?? []),
+                    'aria' => $aria,
+                    'data' => $config['data'] ?? [],
+                ],
+                $config['inputAttributes'] ?? [],
+            ));
     }
 
     public static function checkboxSelectFieldHtml(array $config): string
@@ -281,19 +377,262 @@ public static function checkboxSelectFieldHtml(array $config): string
         $config['id'] ??= 'checkboxselect'.mt_rand();
         $config['fieldset'] = true;
 
-        return self::fieldHtml('template:_includes/forms/checkboxSelect', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::checkboxSelectFromConfig($c)->toHtml(),
+            $config,
+        );
     }
 
-    public static function checkboxGroupHtml(array $config): string
+    /**
+     * Maps the legacy checkboxSelect config surface onto the
+     * {@see CheckboxSelect} component — the PHP twin of the
+     * `_includes/forms/checkboxSelect` glue template. Legacy semantics
+     * preserved: sortable pre-orders options by the `values` order, and a
+     * checked "All" option checks and disables every item.
+     */
+    public static function checkboxSelectFromConfig(array $config): CheckboxSelect
     {
-        return self::renderTemplate('_includes/forms/checkboxGroup', $config);
+        $id = $config['id'] ?? 'checkbox-select-'.mt_rand();
+        $name = $config['name'] ?? null;
+        $values = $config['values'] ?? [];
+        $disabled = (bool) ($config['disabled'] ?? false);
+        $sortable = (bool) ($config['sortable'] ?? false);
+
+        $options = collect($config['options'] ?? [])
+            ->map(fn ($option, $key) => is_array($option) ? $option : [
+                'label' => $option,
+                'value' => $key,
+            ])
+            ->values();
+
+        if ($sortable && is_array($values) && $values !== []) {
+            $options = $options
+                ->sortBy(function (array $option) use ($values): int {
+                    $index = array_search($option['value'] ?? null, $values);
+
+                    return $index === false ? PHP_INT_MAX : $index;
+                })
+                ->values();
+        }
+
+        $showAllOption = (bool) ($config['showAllOption'] ?? false);
+        $allChecked = false;
+        $allCheckbox = null;
+
+        if ($showAllOption) {
+            $allLabel = $config['allLabel'] ?? t('All');
+            $allValue = $config['allValue'] ?? '*';
+            $allChecked = $values == $allValue;
+
+            $allCheckbox = self::checkboxFromConfig([
+                'describedBy' => $config['describedBy'] ?? null,
+                'class' => ['cp-checkbox-select__item', 'all'],
+                'label' => new HtmlString("<b>$allLabel</b>"),
+                'name' => $name,
+                'value' => $allValue,
+                'checked' => $allChecked,
+                'autofocus' => $config['autofocus'] ?? false,
+                'targetPrefix' => $config['targetPrefix'] ?? null,
+                'disabled' => $disabled,
+            ]);
+        }
+
+        $checkboxes = $options
+            ->map(fn (array $option): Checkbox => self::checkboxFromConfig(array_merge([
+                'name' => $name !== null ? "{$name}[]" : null,
+                'checked' => ($showAllOption && $allChecked)
+                    || (isset($option['value']) && is_array($values) && in_array($option['value'], $values)),
+                'disabled' => ($showAllOption && $allChecked) || $disabled,
+                'targetPrefix' => $config['targetPrefix'] ?? null,
+            ], $option)))
+            ->all();
+
+        return CheckboxSelect::make()
+            ->id($id)
+            ->name($showAllOption ? null : $name)
+            ->allCheckbox($allCheckbox)
+            ->options($checkboxes)
+            ->sortable($sortable)
+            ->storageKey($config['storageKey'] ?? null)
+            ->disabled($disabled)
+            ->attributes(Arr::merge(
+                ['class' => Html::explodeClass($config['class'] ?? [])],
+                $config['containerAttributes'] ?? [],
+            ));
+    }
+
+    public static function radioGroupFieldHtml(array $config): string
+    {
+        $config['id'] ??= 'radiogroup'.mt_rand();
+        $config['fieldset'] = true;
+
+        return self::fieldHtml(
+            fn (array $c): string => self::radioGroupFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
+    /**
+     * Maps the legacy radio config surface onto the {@see Radio} component —
+     * the PHP twin of the `_includes/forms/radio` glue template. Legacy
+     * semantics preserved: `radioLabel` wins over `label`, and custom-option
+     * mode renders an "Other:" text input that syncs its value to the radio.
+     */
+    public static function radioFromConfig(array $config): Radio
+    {
+        $id = $config['id'] ?? 'radio'.mt_rand();
+        $labelId = $config['labelId'] ?? "$id-label";
+        $custom = (bool) ($config['custom'] ?? false);
+
+        if ($custom) {
+            HtmlStack::jsWithVars(fn ($radio, $text) => <<<JS
+                (() => {
+                  const \$radio = $($radio);
+                  const \$text = $($text);
+                  \$text.on('input', () => {
+                    \$radio.val(\$text.val());
+                  });
+                })();
+                JS, [
+                'radio' => '#'.InputNamespace::namespaceId($id),
+                'text' => '#'.InputNamespace::namespaceId("$id-text"),
+            ]);
+        }
+
+        return Radio::make()
+            ->id($id)
+            ->labelId($labelId)
+            ->name($config['name'] ?? null)
+            ->value($config['value'] ?? 1)
+            ->checked((bool) ($config['checked'] ?? false))
+            ->autofocus((bool) ($config['autofocus'] ?? false))
+            ->disabled((bool) ($config['disabled'] ?? false))
+            ->label($config['radioLabel'] ?? $config['label'] ?? null)
+            ->icon($config['icon'] ?? null)
+            ->color($config['color'] ?? null)
+            ->custom($custom
+                ? self::textHtml([
+                    'id' => "$id-text",
+                    'value' => $config['value'] ?? null,
+                    'class' => 'small custom-option-input',
+                    'labelledBy' => $labelId,
+                ])
+                : null)
+            ->describedBy($config['describedBy'] ?? null)
+            ->inputAttributes(Arr::merge(
+                ['class' => Html::explodeClass($config['class'] ?? [])],
+                $config['inputAttributes'] ?? [],
+            ))
+            ->attributes($config['containerAttributes'] ?? []);
+    }
+
+    /**
+     * Maps the legacy radioGroup config surface onto the {@see RadioGroup}
+     * component — the PHP twin of the `_includes/forms/radioGroup` glue
+     * template.
+     */
+    public static function radioGroupFromConfig(array $config): RadioGroup
+    {
+        $id = $config['id'] ?? 'radio-group-'.mt_rand();
+        $value = $config['value'] ?? null;
+        $disabled = (bool) ($config['disabled'] ?? false);
+
+        $radios = [];
+        $first = true;
+
+        foreach ($config['options'] ?? [] as $key => $option) {
+            if (! is_array($option)) {
+                $option = ['label' => $option, 'value' => $key];
+            }
+
+            $radios[] = self::radioFromConfig(array_merge([
+                'describedBy' => $config['describedBy'] ?? null,
+                'name' => $config['name'] ?? null,
+                'checked' => isset($option['value'])
+                    && $option['value'] == $value
+                    && ($option['value'] || ! ($option['custom'] ?? false)),
+                'autofocus' => $first && ($config['autofocus'] ?? false),
+                'disabled' => $disabled,
+            ], $option));
+
+            $first = false;
+        }
+
+        return RadioGroup::make()
+            ->id($id)
+            ->options($radios)
+            ->toggle((bool) ($config['toggle'] ?? false))
+            ->targetPrefix($config['targetPrefix'] ?? null)
+            ->attributes(Arr::merge(
+                ['class' => Html::explodeClass($config['class'] ?? [])],
+                $config['containerAttributes'] ?? [],
+            ));
     }
 
     public static function checkboxGroupFieldHtml(array $config): string
     {
         $config['id'] ??= 'checkboxgroup'.mt_rand();
 
-        return self::fieldHtml('template:_includes/forms/checkboxGroup', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::checkboxGroupFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
+    /**
+     * Maps the legacy checkboxGroup config surface onto the
+     * {@see CheckboxGroup} component — the PHP twin of the
+     * `_includes/forms/checkboxGroup` glue template.
+     */
+    public static function checkboxGroupFromConfig(array $config): CheckboxGroup
+    {
+        $id = $config['id'] ?? 'checkbox-group-'.mt_rand();
+        $name = $config['name'] ?? null;
+        $optionName = $name !== null ? "{$name}[]" : null;
+        $values = $config['values'] ?? [];
+
+        $checkboxes = [];
+        $first = true;
+
+        foreach ($config['options'] ?? [] as $key => $option) {
+            if (! is_array($option)) {
+                $option = ['label' => $option, 'value' => $key];
+            }
+
+            $checkboxes[] = self::checkboxFromConfig(array_merge([
+                'describedBy' => $config['describedBy'] ?? null,
+                'name' => $optionName,
+                'checked' => isset($option['value']) && is_array($values) && in_array($option['value'], $values),
+                'autofocus' => $first && ($config['autofocus'] ?? false),
+            ], $option));
+
+            $first = false;
+        }
+
+        $customOptionTemplate = null;
+
+        if (($config['allowCustomOptions'] ?? false) && $optionName !== null) {
+            $customOptionTemplate = InputNamespace::namespaceInputs(Html::tag(
+                'div',
+                self::checkboxFromConfig([
+                    'id' => '__ID__',
+                    'label' => null,
+                    'value' => '',
+                    'describedBy' => $config['describedBy'] ?? null,
+                    'name' => $optionName,
+                    'checked' => true,
+                    'custom' => true,
+                ])->toHtml(),
+                ['data' => ['custom' => true]],
+            ), InputNamespace::get());
+        }
+
+        return CheckboxGroup::make()
+            ->id($id)
+            ->name($name)
+            ->options($checkboxes)
+            ->customOptionTemplate($customOptionTemplate)
+            ->attributes($config['containerAttributes'] ?? []);
     }
 
     public static function colorHtml(array $config): string
@@ -336,15 +675,11 @@ public static function editableTableHtml(array $config): string
     public static function editableTableFieldHtml(array $config): string
     {
         $config['id'] ??= 'editabletable'.mt_rand();
+        $config['width'] ??= 'full';
 
         return self::fieldHtml('template:_includes/forms/editableTable', $config);
     }
 
-    public static function lightswitchHtml(array $config): string
-    {
-        return self::renderTemplate('_includes/forms/lightswitch', $config);
-    }
-
     public static function lightswitchFieldHtml(array $config): string
     {
         $config['id'] ??= 'lightswitch'.mt_rand();
@@ -356,7 +691,40 @@ public static function lightswitchFieldHtml(array $config): string
         $config['fieldLabel'] ??= $config['label'] ?? null;
         unset($config['label']);
 
-        return self::fieldHtml('template:_includes/forms/lightswitch', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::lightswitchFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
+    /**
+     * Maps the legacy lightswitch config surface onto the {@see Lightswitch}
+     * component — the PHP twin of the `_includes/forms/lightswitch` glue
+     * template. Legacy semantics preserved: `label` is an `onLabel` fallback,
+     * not a field label.
+     */
+    public static function lightswitchFromConfig(array $config): Lightswitch
+    {
+        self::deprecateConfig('lightswitch', $config, [
+            'descriptionId' => 'is no longer supported. `<craft-switch>` renders and links its own state description.',
+        ]);
+
+        return Lightswitch::make()
+            ->id($config['id'] ?? 'lightswitch'.mt_rand())
+            ->on((bool) ($config['on'] ?? false))
+            ->indeterminate((bool) ($config['indeterminate'] ?? false))
+            ->value((string) ($config['value'] ?? '1'))
+            ->indeterminateValue((string) ($config['indeterminateValue'] ?? '-'))
+            ->size(($config['small'] ?? false) ? Size::Small : null)
+            ->disabled((bool) ($config['disabled'] ?? false))
+            ->onLabel($config['onLabel'] ?? $config['label'] ?? null)
+            ->offLabel($config['offLabel'] ?? null)
+            ->toggle($config['toggle'] ?? null)
+            ->reverseToggle($config['reverseToggle'] ?? null)
+            ->labelledBy($config['labelledBy'] ?? $config['labelId'] ?? null)
+            ->describedBy($config['describedBy'] ?? null)
+            ->name($config['name'] ?? null)
+            ->attributes($config['containerAttributes'] ?? []);
     }
 
     public static function rangeHtml(array $config): string
diff --git a/src/Cp/Html/ElementHtml.php b/src/Cp/Html/ElementHtml.php
index c48517c14f1..0b36aa7be0b 100644
--- a/src/Cp/Html/ElementHtml.php
+++ b/src/Cp/Html/ElementHtml.php
@@ -14,19 +14,21 @@
 use CraftCms\Cms\Component\Contracts\Indicative;
 use CraftCms\Cms\Component\Contracts\Statusable;
 use CraftCms\Cms\Component\Contracts\Thumbable;
+use CraftCms\Cms\Cp\Components\Button;
 use CraftCms\Cms\Cp\Events\ElementCardHtmlResolving;
 use CraftCms\Cms\Cp\Events\ElementChipHtmlResolving;
-use CraftCms\Cms\Cp\FormFields;
 use CraftCms\Cms\Cp\Icons;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
 use CraftCms\Cms\Element\Contracts\NestedElementInterface;
 use CraftCms\Cms\Element\ElementHelper;
 use CraftCms\Cms\Element\Enums\AttributeStatus;
+use CraftCms\Cms\Element\Enums\MenuItemType;
 use CraftCms\Cms\Shared\Enums\Color;
 use CraftCms\Cms\Support\Arr;
 use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Facades\InputNamespace;
 use CraftCms\Cms\Support\Html;
+use CraftCms\Cms\Support\Json;
 use CraftCms\Cms\Support\Url;
 use Illuminate\Container\Attributes\Singleton;
 use Illuminate\Support\Facades\Crypt;
@@ -202,18 +204,17 @@ public function chipHtml(Chippable $component, array $config = []): string
             $html .= $this->componentActionMenu($component);
         }
         if ($config['sortable']) {
-            $html .= FormFields::buttonHtml([
-                'class' => ['chromeless', 'small', 'move-btn'],
-                'icon' => 'move',
-                'attributes' => [
+            $html .= Button::make()
+                ->icon('move')
+                ->attributes([
+                    'class' => ['chromeless', 'small', 'move-btn'],
                     'title' => t('Reorder'),
                     'aria' => [
                         'label' => t('Reorder'),
                     ],
                     'role' => 'none',
                     'tabindex' => '-1',
-                ],
-            ]);
+                ]);
         }
         $html .= Html::endTag('div'); // slot=suffix
 
@@ -411,10 +412,10 @@ public function elementCardHeaderHtml(ElementInterface $element, array $config =
             Html::beginTag('div', ['class' => 'card-actions-container']).
             Html::beginTag('div', ['class' => 'card-actions']).
             ($config['selectable'] ? $this->componentCheckboxHtml(sprintf('%s-label', $config['id'])) : '').
-            ($showEditButton ? FormFields::buttonHtml([
-                'class' => ['chromeless', 'small', 'edit-btn'],
-                'icon' => 'edit',
-                'attributes' => [
+            ($showEditButton ? Button::make()
+                ->icon('edit')
+                ->attributes([
+                    'class' => ['chromeless', 'small', 'edit-btn'],
                     'id' => $editId,
                     'title' => mb_ucfirst(t('Edit {type}', [
                         'type' => $element::lowerDisplayName(),
@@ -424,21 +425,19 @@ public function elementCardHeaderHtml(ElementInterface $element, array $config =
                             'type' => $element::lowerDisplayName(),
                         ])),
                     ],
-                ],
-            ]) : '').
+                ]) : '').
             ($config['showActionMenu'] ? $this->componentActionMenu($element, ! $showEditButton) : '').
-            ($config['sortable'] ? FormFields::buttonHtml([
-                'class' => ['chromeless', 'small', 'move-btn'],
-                'icon' => 'move',
-                'attributes' => [
+            ($config['sortable'] ? Button::make()
+                ->icon('move')
+                ->attributes([
+                    'class' => ['chromeless', 'small', 'move-btn'],
                     'title' => t('Reorder'),
                     'aria' => [
                         'label' => t('Reorder'),
                     ],
                     'role' => 'none',
                     'tabindex' => '-1',
-                ],
-            ]) : '').
+                ]) : '').
             Html::endTag('div'). // .card-actions
             Html::endTag('div'). // .card-actions-container
             Html::endTag('div'); // .card-titlebar
@@ -794,6 +793,20 @@ private function elementLabelHtml(ElementInterface $element, array $config, arra
         ]);
     }
 
+    /**
+     * Renders a `<craft-action-menu>` for a component's action menu items.
+     *
+     * This feeds both {@see chipHtml()} and the card markup: it's the single
+     * `craft-action-menu`/`craft-action-item` producer for chip and card
+     * "Actions" menus, replacing the legacy `disclosureMenu()`-rendered
+     * markup (which required a `Craft.initUiElements()` pass — unreliable for
+     * fetched/injected chips). `craft-action-menu`/`craft-action-item`
+     * self-boot, so no init pass is needed.
+     *
+     * The menu is always rendered, even with zero items, so JS (e.g.
+     * `Craft.addActionsToChip()`) always has a `[slot="content"]` container
+     * to inject into.
+     */
     private function componentActionMenu(Actionable $component, bool $withEdit = true): string
     {
         return InputNamespace::namespaceInputs(
@@ -814,19 +827,175 @@ function () use ($component, $withEdit): string {
                         $item['attributes']['data']['copy-action'] = true;
                     }
                 }
+                unset($item);
+
+                // `disclosureMenuItems()` normalizes types, moves destructive
+                // items to the end (behind an `hr`), and trims leading/
+                // trailing/repeated `hr`s — all still desirable here.
+                $items = $this->menuHtml->disclosureMenuItems($actionMenuItems);
+
+                $invokerHtml = Html::tag('craft-button', Html::tag('craft-icon', '', [
+                    'name' => 'ellipsis',
+                ]), [
+                    'type' => 'button',
+                    'slot' => 'invoker',
+                    'appearance' => 'plain',
+                    'variant' => 'inherit',
+                    'size' => 'small',
+                    // Bare `icon` attribute triggers the icon-only button styling
+                    // (the icon itself is slotted content, not the `icon` prop —
+                    // it needs its own `aria-label`-free presentation since the
+                    // button already carries one).
+                    'icon' => true,
+                    'aria' => [
+                        'label' => t('Actions'),
+                    ],
+                ]);
 
-                return $this->menuHtml->disclosureMenu($actionMenuItems, [
-                    'hiddenLabel' => t('Actions'),
-                    'buttonHtml' => Html::tag('craft-icon', '', [
-                        'name' => 'ellipsis',
-                    ]),
-                    'omitIfEmpty' => false,
+                $contentHtml = Html::tag('div', implode('', array_map(
+                    $this->actionMenuItemHtml(...),
+                    $items,
+                )), [
+                    'slot' => 'content',
                 ]);
+
+                return Html::tag('craft-action-menu', $invokerHtml.$contentHtml);
             },
             sprintf('action-menu-%s', mt_rand()),
         );
     }
 
+    /**
+     * Renders a single normalized action menu item (see
+     * {@see MenuHtml::normalizeMenuItems()}) as either an `<hr>` separator or
+     * a `<craft-action-item>`.
+     *
+     * Field mapping from the legacy `disclosureMenu()`/`menuitem.twig`
+     * contract:
+     *
+     * - `label`/`html`, `handle`, `description` → slotted content (mirrors
+     *   `_includes/forms/componentSelect.twig`'s option markup).
+     * - `icon` + `color` → `icon` + `icon-color` attributes.
+     * - `url` (link items) → `href`.
+     * - `destructive` → `variant="danger"`.
+     * - `disabled`, `hidden` → same-named boolean attributes.
+     * - `attributes` (incl. the `data-edit-action`/`data-copy-action` set
+     *   above) → merged onto the tag verbatim.
+     * - `action`/`params`/`confirm`/`redirect` → a `craft-action-item`
+     *   `action` object (`{type: 'http', ...}`, JSON-encoded — see
+     *   `@src/actions`), replacing the legacy `formsubmit`/`data-action`
+     *   mechanism. `redirect` is encrypted the same way the `hash` Twig
+     *   filter did, and posted as a `redirect` body param for the controller
+     *   action to honor.
+     * - `requireElevatedSession` has no client-side equivalent in the frozen
+     *   `craft-action-item`/`runAction()` — there's no re-auth prompt hook —
+     *   so it's intentionally dropped here. An item that needs it will still
+     *   be rejected server-side; it just won't get the elevated-session
+     *   modal first. See the task report for details.
+     */
+    private function actionMenuItemHtml(array $item): string
+    {
+        $type = $item['type'] ?? MenuItemType::Button;
+        if ($type instanceof MenuItemType) {
+            $type = $type->value;
+        }
+
+        if ($type === MenuItemType::HR->value) {
+            return Html::tag('hr', '', [
+                'class' => 'action-menu__separator',
+                // `craft-action-menu`'s `::slotted()` styles can't reach a
+                // light-DOM `<hr>`, so style it inline (mirrors
+                // `action-menu.ts`'s `_renderItem()`).
+                'style' => [
+                    'margin' => '0',
+                    'border' => '0',
+                    'border-block-start' => '1px solid var(--c-color-neutral-border-quiet)',
+                ],
+            ]);
+        }
+
+        if ($type === MenuItemType::Group->value) {
+            // `craft-action-item` has no heading/group concept; flatten.
+            return implode('', array_map(
+                $this->actionMenuItemHtml(...),
+                $this->menuHtml->normalizeMenuItems($item['items'] ?? []),
+            ));
+        }
+
+        $color = $item['color'] ?? null;
+        if ($color instanceof Color) {
+            $color = $color->value;
+        }
+
+        $action = null;
+        if ($item['action'] ?? false) {
+            $body = (array) ($item['params'] ?? []);
+            if ($item['redirect'] ?? false) {
+                $body['redirect'] = Crypt::encrypt((string) $item['redirect']);
+            }
+
+            $action = array_filter([
+                'type' => 'http',
+                'method' => 'POST',
+                'url' => Url::actionUrl((string) $item['action']),
+                'body' => $body ?: null,
+                'confirm' => $item['confirm'] ?? null,
+            ], fn ($value) => $value !== null);
+        }
+
+        $attributes = Arr::merge([
+            // Deliberately *not* run through `InputNamespace::namespaceId()`:
+            // this whole method already runs inside its own
+            // `InputNamespace::namespaceInputs()` closure (see
+            // `componentActionMenu()`), which namespaces every `id=`
+            // attribute in the returned HTML automatically — namespacing it
+            // here too would double it up.
+            'id' => $item['id'] ?? sprintf('menu-item-%s', mt_rand()),
+            'icon' => $item['icon'] ?? false,
+            'icon-color' => $color ?: false,
+            'href' => $type === MenuItemType::Link->value ? Url::url((string) ($item['url'] ?? '')) : false,
+            'disabled' => $item['disabled'] ?? false,
+            'hidden' => $item['hidden'] ?? false,
+            'variant' => ($item['destructive'] ?? false) ? 'danger' : false,
+            'action' => $action ? Json::encode($action, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) : false,
+        ], $item['attributes'] ?? []);
+
+        return Html::tag('craft-action-item', $this->actionMenuItemContentHtml($item), $attributes);
+    }
+
+    /**
+     * Renders a menu item's slotted content: its label (or raw `html`), plus
+     * an optional secondary line for `description`/`handle` — the same
+     * `menu-item-description` markup `_includes/menuitem.twig` and
+     * `_includes/forms/componentSelect.twig` use.
+     */
+    private function actionMenuItemContentHtml(array $item): string
+    {
+        $labelHtml = isset($item['label'])
+            ? Html::encode($item['label'])
+            : (string) ($item['html'] ?? '');
+
+        if (isset($item['description'])) {
+            $secondaryHtml = Html::tag('span', Html::encode($item['description']), [
+                'class' => ['menu-item-description', 'mt-2xs', 'smalltext', 'light'],
+            ]);
+        } elseif (isset($item['handle'])) {
+            $secondaryHtml = Html::tag('span', Html::encode($item['handle']), [
+                'class' => ['menu-item-description', 'mt-2xs', 'smalltext', 'light', 'code'],
+            ]);
+        } else {
+            $secondaryHtml = null;
+        }
+
+        if ($secondaryHtml === null) {
+            return $labelHtml;
+        }
+
+        return Html::tag('span', $labelHtml.$secondaryHtml, [
+            'class' => ['inline-flex', 'flex-col', 'items-start', 'gap-2xs'],
+        ]);
+    }
+
     private function contextIsAdministrative(string $context): bool
     {
         return in_array($context, ['index', 'embedded-index', 'field']);
diff --git a/src/Field/BaseOptionsField.php b/src/Field/BaseOptionsField.php
index 02f2cb99e15..8a7d6af1fc1 100644
--- a/src/Field/BaseOptionsField.php
+++ b/src/Field/BaseOptionsField.php
@@ -339,6 +339,7 @@ public function getSettingsHtml(): string
             'allowDelete' => true,
             'cols' => $cols,
             'rows' => $rows,
+            'width' => 'full',
             'errors' => $this->errors()->get('options'),
             'data' => ['error-key' => 'options'],
         ]);
diff --git a/src/Field/ButtonGroup.php b/src/Field/ButtonGroup.php
index 41cb7a1f51e..786c8b622f7 100644
--- a/src/Field/ButtonGroup.php
+++ b/src/Field/ButtonGroup.php
@@ -4,11 +4,15 @@
 
 namespace CraftCms\Cms\Field;
 
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Components\ButtonGroup as ButtonGroupComponent;
 use CraftCms\Cms\Cp\FormFields;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
 use CraftCms\Cms\Field\Contracts\SortableFieldInterface;
 use CraftCms\Cms\Field\Data\SingleOptionFieldData;
+use CraftCms\Cms\Support\Arr;
 use CraftCms\Cms\Support\Facades\DeltaRegistry;
+use CraftCms\Cms\Support\Html;
 use Override;
 
 use function CraftCms\Cms\t;
@@ -41,13 +45,15 @@ public static function icon(): string
     #[Override]
     public function getSettingsHtml(): string
     {
-        return parent::getSettingsHtml().
+        return Html::beginTag('craft-field-group').
+            parent::getSettingsHtml().
             FormFields::lightswitchFieldHtml([
                 'label' => t('Icons only'),
                 'instructions' => t('Whether buttons should only show their icons, hiding their text labels.'),
                 'name' => 'iconsOnly',
                 'on' => $this->iconsOnly,
-            ]);
+            ]).
+            Html::endTag('craft-field-group');
     }
 
     #[Override]
@@ -84,14 +90,36 @@ private function _inputHtml(SingleOptionFieldData $value, ?ElementInterface $ele
                     unset($option['label']);
                 }
             }
+            unset($option);
         }
 
-        return FormFields::buttonGroupHtml([
-            'id' => $id,
-            'name' => $this->handle,
-            'static' => $static,
-            'options' => $options,
-            'value' => $this->encodeValue($value),
-        ]);
+        $selectedValue = $this->encodeValue($value);
+
+        $buttons = [];
+        foreach ($options as $option) {
+            $optionValue = $option['value'] ?? null;
+            $selected = $optionValue !== null && $optionValue == $selectedValue;
+
+            $buttons[] = Button::make()
+                ->label($option['label'] ?? null)
+                ->icon($option['icon'] ?? null)
+                ->appearance('outline')
+                ->active($selected)
+                ->disabled($static)
+                ->attributes(Arr::merge([
+                    'class' => Html::explodeClass($option['class'] ?? []),
+                    'value' => $optionValue,
+                    'data' => ['value' => $optionValue],
+                    'aria' => ['pressed' => $selected ? 'true' : 'false'],
+                ], $option['attributes'] ?? []));
+        }
+
+        return ButtonGroupComponent::make()
+            ->id($id)
+            ->name($this->handle)
+            ->value($selectedValue !== null ? (string) $selectedValue : null)
+            ->disabled($static)
+            ->buttons($buttons)
+            ->toHtml();
     }
 }
diff --git a/src/Field/Color.php b/src/Field/Color.php
index b34339944ab..d01b50f80d2 100644
--- a/src/Field/Color.php
+++ b/src/Field/Color.php
@@ -165,7 +165,9 @@ public function getReadOnlySettingsHtml(): string
 
     private function settingsHtml(bool $readOnly): string
     {
+
         return
+            Html::beginTag('craft-field-group').
             FormFields::editableTableFieldHtml([
                 'label' => t('Palette'),
                 'name' => 'palette',
@@ -200,7 +202,8 @@ private function settingsHtml(bool $readOnly): string
                 'name' => 'allowCustomColors',
                 'on' => $this->allowCustomColors,
                 'disabled' => $readOnly,
-            ]);
+            ]).
+            Html::endTag('craft-field-group');
     }
 
     #[Override]
diff --git a/src/Field/Concerns/ProvidesLinkField.php b/src/Field/Concerns/ProvidesLinkField.php
index 7e789002fb9..bb43bba3da0 100644
--- a/src/Field/Concerns/ProvidesLinkField.php
+++ b/src/Field/Concerns/ProvidesLinkField.php
@@ -12,6 +12,7 @@
 use CraftCms\Cms\Field\LinkTypes\Url as UrlType;
 use CraftCms\Cms\Support\Arr;
 use CraftCms\Cms\Support\Facades\InputNamespace;
+use CraftCms\Cms\Support\Html;
 use CraftCms\Cms\Support\Template;
 use Illuminate\Support\Collection;
 
@@ -294,7 +295,7 @@ protected function linkTypeSettingsHtml(
 
             if ($html !== null && $html !== '') {
                 $settings[$typeId] = [
-                    'html' => $html,
+                    'html' => Html::tag('craft-field-group', $html),
                     'label' => $this->linkTypeSettingsLabel($typeClass),
                 ];
             }
diff --git a/src/Field/Icon.php b/src/Field/Icon.php
index 4eb5ad22958..8a587fc4487 100644
--- a/src/Field/Icon.php
+++ b/src/Field/Icon.php
@@ -6,6 +6,8 @@
 
 use CraftCms\Aliases\Aliases;
 use CraftCms\Cms\Cms;
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Enums\Appearance;
 use CraftCms\Cms\Cp\FormFields;
 use CraftCms\Cms\Cp\Icons;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
@@ -117,7 +119,8 @@ public function getReadOnlySettingsHtml(): string
 
     private function settingsHtml(bool $readOnly): string
     {
-        $html = FormFields::lightswitchFieldHtml([
+        $html = Html::beginTag('craft-field-group');
+        $html .= FormFields::lightswitchFieldHtml([
             'label' => t('Include Pro icons'),
             'instructions' => t('Should icons that are exclusive to Font Awesome Pro be selectable? (<a href="{url}">View pricing</a>)', [
                 'url' => 'https://fontawesome.com/plans',
@@ -129,14 +132,21 @@ private function settingsHtml(bool $readOnly): string
 
         if (Cms::config()->enableGql) {
             $html .= Html::tag('hr').
-            Html::button(t('Advanced'), attributes: [
-                'class' => 'fieldtoggle',
-                'data' => ['target' => 'advanced'],
-            ]).
-            Html::beginTag('div', [
-                'id' => 'advanced',
-                'class' => 'hidden',
-            ]);
+                Html::beginTag('craft-disclosure').
+                Button::make()
+                    ->label(t('Advanced'))
+                    ->appearance(Appearance::Plain)
+                    ->icon('chevron-down')
+                    ->slot('invoker')
+                    ->attributes([
+                        'class' => 'fieldtoggle justify-self-start',
+                        'data' => ['target' => 'advanced'],
+                        'aria-controls' => 'advanced',
+                    ]).
+                Html::beginTag('div', [
+                    'id' => 'advanced',
+                    'slot' => 'content',
+                ]);
 
             $html .=
                 FormFields::selectFieldHtml([
@@ -152,9 +162,10 @@ private function settingsHtml(bool $readOnly): string
                 ]);
 
             $html .= Html::endTag('div');
+            $html .= Html::endTag('craft-disclosure');
         }
 
-        return $html;
+        return $html.Html::endTag('craft-field-group');
     }
 
     #[Override]
diff --git a/src/Field/Link.php b/src/Field/Link.php
index 819112939e8..dc09343ddf1 100644
--- a/src/Field/Link.php
+++ b/src/Field/Link.php
@@ -7,6 +7,8 @@
 use Closure;
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Component\ComponentHelper;
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Enums\Appearance;
 use CraftCms\Cms\Cp\FormFields;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
 use CraftCms\Cms\Element\Queries\Contracts\ElementQueryInterface;
@@ -266,14 +268,19 @@ private function settingsHtml(bool $readOnly): string
 
         $html .=
             Html::tag('hr').
-            Html::button(t('Advanced'), attributes: [
-                'class' => 'fieldtoggle',
-                'data' => ['target' => 'advanced'],
-            ]).
+            Html::beginTag('craft-disclosure').
+            Button::make()
+                ->label(t('Advanced'))
+                ->icon('chevron-down')
+                ->appearance(Appearance::Plain)
+                ->attributes([
+                    'slot' => 'invoker',
+                    'class' => 'justify-self-start',
+                ]).
             Html::beginTag('div', [
-                'id' => 'advanced',
-                'class' => 'hidden',
+                'slot' => 'content',
             ]).
+            Html::beginTag('craft-field-group').
             FormFields::textFieldHtml([
                 'label' => t('Max Length'),
                 'instructions' => t('The maximum length (in bytes) the field can hold.'),
@@ -303,7 +310,10 @@ private function settingsHtml(bool $readOnly): string
                 ]);
         }
 
-        return $html.Html::endTag('div');
+        $html .= Html::endTag('craft-field-group');
+        $html .= Html::endTag('div');
+
+        return $html.Html::endTag('craft-disclosure');
     }
 
     private function prepareLegacyAdvancedFieldConfig(array $config): array
diff --git a/src/Field/Matrix.php b/src/Field/Matrix.php
index 83495cfa927..6229101985c 100644
--- a/src/Field/Matrix.php
+++ b/src/Field/Matrix.php
@@ -561,7 +561,10 @@ private function settingsHtml(bool $readOnly): string
             'renderDefaultInput' => false,
             'allowOverrides' => true,
             'create' => true,
-            'jsClass' => 'Craft.GroupedEntryTypeSelectInput',
+            // No jsClass → componentSelect.twig renders the self-booting
+            // `<craft-component-select>`, orchestrated by
+            // `<craft-entry-type-manager>` (resources/js/modules/entry-types).
+            'jsClass' => false,
             'errors' => $this->errors()->get('entryTypes'),
             'data' => [
                 'error-key' => 'entryTypes',
@@ -570,16 +573,27 @@ private function settingsHtml(bool $readOnly): string
         ];
 
         if (! $readOnly) {
+            // The select template for new groups, with TEMP_ID placeholder ids
+            // the manager swaps client-side. Rendered with NO ambient namespace
+            // so the markup stays raw (a clean TEMP_ID and un-namespaced input
+            // names); the field settings' own namespace pass then namespaces the
+            // whole settings HTML — including this `<template>`'s contents —
+            // exactly once, the same single pass the inline group selects get.
+            // Applying `namespaceInputs()` here too would double it up, breaking
+            // the TEMP_ID swap and producing over-nested `entryTypes[]` names
+            // (which fail to save as unknown `types` properties).
+            // The JS buffer only guards against stray registered JS leaking
+            // TEMP_ID references into the page — the web-component path registers
+            // none, so it's discarded.
             HtmlStack::startJsBuffer();
-            $namespace = InputNamespace::get();
             $entryTypeSelectHtml = InputNamespace::with(
                 namespace: null,
-                callback: fn () => InputNamespace::namespaceInputs(fn () => FormFields::entryTypeSelectHtml([
+                callback: fn () => FormFields::entryTypeSelectHtml([
                     ...$entryTypeSelectConfig,
                     'id' => 'TEMP_ID',
-                ]), $namespace),
+                ]),
             );
-            $entryTypeSelectJs = HtmlStack::clearJsBuffer();
+            HtmlStack::clearJsBuffer();
         }
 
         app(InternalAssetRegistry::class)->register(CpAsset::class);
@@ -589,7 +603,6 @@ private function settingsHtml(bool $readOnly): string
             'entryTypes' => $entryTypes,
             'entryTypeSelectConfig' => $entryTypeSelectConfig,
             'entryTypeSelectHtml' => $entryTypeSelectHtml ?? null,
-            'entryTypeSelectJs' => $entryTypeSelectJs ?? null,
             'defaultTableColumnOptions' => self::defaultTableColumnOptions($this->_entryTypes),
             'defaultCreateButtonLabel' => $this->defaultCreateButtonLabel(),
             'indexViewModes' => array_filter(
diff --git a/src/Http/Controllers/App/RenderController.php b/src/Http/Controllers/App/RenderController.php
index 0737ac745d9..fc8b3c2bd87 100644
--- a/src/Http/Controllers/App/RenderController.php
+++ b/src/Http/Controllers/App/RenderController.php
@@ -119,7 +119,7 @@ public function components(Request $request): JsonResponse
 
         $components = $validated['components'];
         $withMenuItems = $validated['withMenuItems'] ?? false;
-        $menuId = $validated['menuId'];
+        $menuId = $validated['menuId'] ?? null;
 
         $componentHtml = [];
         $menuItemHtml = [];
diff --git a/src/Twig/Extensions/CpExtension.php b/src/Twig/Extensions/CpExtension.php
index 5c2ad475c56..ace8b594298 100644
--- a/src/Twig/Extensions/CpExtension.php
+++ b/src/Twig/Extensions/CpExtension.php
@@ -61,6 +61,7 @@ public function getFunctions(): array
             new TwigFunction('iconSvg', Icons::svg(...), ['is_safe' => ['html']]),
             new TwigFunction('siteMenuItems', app(MenuHtml::class)->siteMenuItems(...)),
             new TwigFunction('statusIndicator', app(StatusHtml::class)->statusIndicatorHtml(...), ['is_safe' => ['html']]),
+            new TwigFunction('ui', \CraftCms\Cms\ui(...), ['is_safe' => ['html']]),
             new TwigFunction('readOnlyNotice', app(ContentHtml::class)->readOnlyNoticeHtml(...), ['is_safe' => ['html']]),
             new TwigFunction('cpVite', $this->vite(...), ['is_safe' => ['html']]),
             new TwigFunction('cpEnvOptions', $this->envOptions(...)),
diff --git a/src/Twig/Variables/Cp.php b/src/Twig/Variables/Cp.php
index ed94fbaa25f..9fa7f6c8d90 100644
--- a/src/Twig/Variables/Cp.php
+++ b/src/Twig/Variables/Cp.php
@@ -319,6 +319,70 @@ public function field(string|Stringable $input, array $config = []): string
         return FormFields::fieldHtml($input, $config);
     }
 
+    /**
+     * Renders a lightswitch's HTML from the legacy lightswitch variables.
+     */
+    public function lightswitch(array $config = []): string
+    {
+        return FormFields::lightswitchFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a button's HTML from the legacy button variables.
+     */
+    public function button(array $config = []): string
+    {
+        return FormFields::buttonFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a button group's HTML from the legacy buttonGroup variables.
+     */
+    public function buttonGroup(array $config = []): string
+    {
+        return FormFields::buttonGroupFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a checkbox's HTML from the legacy checkbox variables.
+     */
+    public function checkbox(array $config = []): string
+    {
+        return FormFields::checkboxFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a checkbox group's HTML from the legacy checkboxGroup variables.
+     */
+    public function checkboxGroup(array $config = []): string
+    {
+        return FormFields::checkboxGroupFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a checkbox select's HTML from the legacy checkboxSelect variables.
+     */
+    public function checkboxSelect(array $config = []): string
+    {
+        return FormFields::checkboxSelectFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a radio's HTML from the legacy radio variables.
+     */
+    public function radio(array $config = []): string
+    {
+        return FormFields::radioFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Renders a radio group's HTML from the legacy radioGroup variables.
+     */
+    public function radioGroup(array $config = []): string
+    {
+        return FormFields::radioGroupFromConfig($config)->toHtml();
+    }
+
     private function formatLegacySuggestions(array $options): array
     {
         return array_map(fn ($group) => [
diff --git a/src/View/LegacyAssets/InternalAssetRegistry.php b/src/View/LegacyAssets/InternalAssetRegistry.php
index cce786642b9..3f8e9154975 100644
--- a/src/View/LegacyAssets/InternalAssetRegistry.php
+++ b/src/View/LegacyAssets/InternalAssetRegistry.php
@@ -53,8 +53,6 @@ public function flush(): void
         while ($bundle = array_key_first($this->pendingBundles)) {
             $this->registerPendingBundle($bundle);
         }
-
-        $this->registeredBundles = [];
     }
 
     /**
diff --git a/src/helpers.php b/src/helpers.php
index fbe2960888e..9db0a6b8286 100644
--- a/src/helpers.php
+++ b/src/helpers.php
@@ -264,3 +264,14 @@ function backTraceAsString(int $limit = 0): string
 
     return $trace;
 }
+
+/**
+ * Creates a UI component by its registered name, applying the given config
+ * via its fluent setters.
+ *
+ *     ui('callout', ['variant' => 'warning'])->content(t('Careful!'));
+ */
+function ui(string $name, array $config = []): Cp\Components\ViewComponent
+{
+    return app(Cp\Components\ComponentRegistry::class)->make($name, $config);
+}
diff --git a/tests/Pest.php b/tests/Pest.php
index 64b5e6c040f..bb8d603925c 100644
--- a/tests/Pest.php
+++ b/tests/Pest.php
@@ -7,10 +7,76 @@
 use CraftCms\Cms\Tests\TestCase;
 use CraftCms\Cms\Tests\UnitTestCase;
 use Illuminate\Http\Request;
+use PHPUnit\Framework\Assert;
 
 uses(TestCase::class)->in('Feature');
 uses(UnitTestCase::class)->in('Unit');
 
+/**
+ * Asserts the HTML under expectation contains an element with the given tag
+ * name, optionally carrying the given attributes. Attribute matching is
+ * order-independent (the HTML is parsed into a DOM), so tests don't break when
+ * attribute order or whitespace changes.
+ *
+ *     expect($html)->toContainTag('craft-button-group', ['id' => 'bg', 'role' => 'group']);
+ *     expect($html)->toContainTag('craft-button', ['disabled' => true]);   // boolean attr present
+ *     expect($html)->not->toContainTag('input', ['type' => 'hidden']);     // no matching element
+ *
+ * Attribute values: a string must match exactly; `true` asserts the attribute
+ * is present (any value); `false` asserts it is absent.
+ */
+expect()->extend('toContainTag', function (string $tag, array $attributes = []) {
+    $html = (string) $this->value;
+
+    $dom = new DOMDocument;
+    $previous = libxml_use_internal_errors(true);
+    // The XML encoding hint keeps multibyte content (e.g. “…”) intact; libxml
+    // wraps the fragment in <html><body>, which getElementsByTagName sees past.
+    $dom->loadHTML('<?xml encoding="utf-8" ?>'.$html, LIBXML_NOERROR | LIBXML_NOWARNING);
+    libxml_clear_errors();
+    libxml_use_internal_errors($previous);
+
+    /** @var list<DOMElement> $elements */
+    $elements = iterator_to_array($dom->getElementsByTagName($tag));
+
+    $matches = array_values(array_filter($elements, function (DOMElement $el) use ($attributes): bool {
+        foreach ($attributes as $name => $expected) {
+            if ($expected === false) {
+                if ($el->hasAttribute($name)) {
+                    return false;
+                }
+
+                continue;
+            }
+
+            if (! $el->hasAttribute($name)) {
+                return false;
+            }
+
+            if ($expected !== true && $el->getAttribute($name) !== (string) $expected) {
+                return false;
+            }
+        }
+
+        return true;
+    }));
+
+    // Assert through PHPUnit so the assertion is counted (and `->not` works).
+    Assert::assertNotEmpty($matches, sprintf(
+        "Expected the HTML to contain a <%s>%s, but %s.\nHTML: %s",
+        $tag,
+        $attributes === []
+            ? ''
+            : ' with attributes '.json_encode($attributes, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
+        $elements === []
+            ? "no <$tag> elements were found"
+            : sprintf('none of the %d <%s> element(s) matched', count($elements), $tag),
+        $html,
+    ));
+
+    return $this;
+});
+
 beforeEach(function () {
     app()->forgetInstance(GeneralConfig::class);
 });
diff --git a/tests/Unit/Cp/Components/ButtonGroupTest.php b/tests/Unit/Cp/Components/ButtonGroupTest.php
new file mode 100644
index 00000000000..7826391bce4
--- /dev/null
+++ b/tests/Unit/Cp/Components/ButtonGroupTest.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Components\ButtonGroup;
+
+it('renders a button-group host with grouped button children', function () {
+    $html = ButtonGroup::make()
+        ->id('alignment')
+        ->labelledBy('alignment-label')
+        ->buttons([
+            Button::make()->label('Left'),
+            Button::make()->label('Right')->active(),
+        ])
+        ->toHtml();
+
+    expect($html)->toContainTag('craft-button-group', ['id' => 'alignment', 'role' => 'group', 'aria-labelledby' => 'alignment-label'])
+        ->and($html)->toContain('Left')
+        ->and($html)->toContain('active="true"')
+        ->and(substr_count($html, '</craft-button>'))->toBe(2)
+        ->and($html)->not->toContain('craft-listbox');
+});
+
+it('emits name and value as host attributes when named, without a hidden input', function () {
+    $html = ButtonGroup::make()
+        ->id('alignment')
+        ->name('alignment')
+        ->value('left')
+        ->buttons([Button::make()->label('Left')->value('left')])
+        ->toHtml();
+
+    expect($html)->toContainTag('craft-button-group', ['id' => 'alignment', 'name' => 'alignment', 'value' => 'left'])
+        ->and($html)->not->toContain('type="hidden"');
+});
+
+it('emits no name attribute without a name', function () {
+    $html = ButtonGroup::make()
+        ->buttons([Button::make()->label('One')])
+        ->toHtml();
+
+    expect($html)->not->toContain('type="hidden"')
+        ->and($html)->not->toContain('name=');
+});
diff --git a/tests/Unit/Cp/Components/ButtonTest.php b/tests/Unit/Cp/Components/ButtonTest.php
new file mode 100644
index 00000000000..a7b9fada729
--- /dev/null
+++ b/tests/Unit/Cp/Components/ButtonTest.php
@@ -0,0 +1,87 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Button;
+use CraftCms\Cms\Cp\Enums\Appearance;
+use CraftCms\Cms\Cp\Enums\Size;
+use CraftCms\Cms\Cp\Enums\Variant;
+use Illuminate\Support\HtmlString;
+
+describe('attributes', function () {
+    it('renders variant, appearance, size, and icon', function () {
+        $html = Button::make()
+            ->variant(Variant::Danger)
+            ->appearance(Appearance::Outline)
+            ->size(Size::Small)
+            ->icon('trash')
+            ->toHtml();
+
+        expect($html)->toStartWith('<craft-button')
+            ->and($html)->toContain('variant="danger"')
+            ->and($html)->toContain('appearance="outline"')
+            ->and($html)->toContain('size="small"')
+            ->and($html)->toContain('icon="trash"');
+    });
+
+    it('always renders an explicit type, since the web component defaults to submit', function () {
+        expect(Button::make()->toHtml())->toContain('type="button"');
+
+        expect(Button::make()->type('submit')->toHtml())->toContain('type="submit"');
+    });
+
+    it('renders state attributes', function () {
+        $html = Button::make()->loading()->active()->disabled()->toHtml();
+
+        expect($html)->toContain(' loading')
+            ->and($html)->toContain('active="true"')
+            ->and($html)->toContain(' disabled');
+    });
+
+    it('renders as a link with href, dropping the type', function () {
+        $html = Button::make()
+            ->type('submit')
+            ->href('https://craftcms.com', '_blank')
+            ->toHtml();
+
+        expect($html)->toContain('href="https://craftcms.com"')
+            ->and($html)->toContain('target="_blank"')
+            ->and($html)->not->toContain('type=');
+    });
+
+    it('renders the accessible name for icon-only buttons', function () {
+        expect(Button::make()->icon('plus')->accessibleName('Add row')->toHtml())
+            ->toContain('accessible-name="Add row"');
+    });
+});
+
+describe('slots', function () {
+    it('encodes plain string labels and trusts Htmlable labels', function () {
+        expect(Button::make()->label('Save & close')->toHtml())
+            ->toContain('Save &amp; close');
+
+        expect(Button::make()->label(new HtmlString('<em>Fancy</em>'))->toHtml())
+            ->toContain('<em>Fancy</em>');
+    });
+
+    it('renders prefix and suffix content as trusted markup', function () {
+        $html = Button::make()
+            ->label('Add')
+            ->prefix('<craft-icon name="plus"></craft-icon>')
+            ->suffix('<craft-icon name="chevron-down"></craft-icon>')
+            ->toHtml();
+
+        expect($html)->toContain('<craft-icon name="plus" slot="prefix">')
+            ->and($html)->toContain('<craft-icon name="chevron-down" slot="suffix">');
+    });
+});
+
+it('evaluates closures with injection', function () {
+    $html = Button::make()
+        ->label(fn (Button $button): string => 'Lazy')
+        ->loading(fn (): bool => true)
+        ->toHtml();
+
+    expect($html)->toContain('Lazy')
+        ->and($html)->toContain(' loading');
+});
diff --git a/tests/Unit/Cp/Components/CalloutTest.php b/tests/Unit/Cp/Components/CalloutTest.php
new file mode 100644
index 00000000000..5474ef4b677
--- /dev/null
+++ b/tests/Unit/Cp/Components/CalloutTest.php
@@ -0,0 +1,80 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Callout;
+use CraftCms\Cms\Cp\Components\Field;
+use CraftCms\Cms\Cp\Enums\Appearance;
+use CraftCms\Cms\Cp\Enums\Variant;
+use Illuminate\Support\HtmlString;
+
+it('renders attributes', function () {
+    $html = Callout::make()
+        ->variant('warning')
+        ->appearance('plain')
+        ->title('Heads up')
+        ->icon('lightbulb')
+        ->rounded('none')
+        ->inline()
+        ->toHtml();
+
+    expect($html)->toStartWith('<craft-callout')
+        ->and($html)->toContain('variant="warning"')
+        ->and($html)->toContain('appearance="plain"')
+        ->and($html)->toContain('title="Heads up"')
+        ->and($html)->toContain('icon="lightbulb"')
+        ->and($html)->toContain('rounded="none"')
+        ->and($html)->toContain(' inline');
+});
+
+it('omits unset attributes so the web component defaults apply', function () {
+    $html = Callout::make()->content('Hi')->toHtml();
+
+    expect($html)->not->toContain('variant=')
+        ->and($html)->not->toContain('icon=')
+        ->and($html)->not->toContain('inline');
+});
+
+it('encodes plain string content and trusts Htmlable content', function () {
+    expect(Callout::make()->content('a <b> c')->toHtml())
+        ->toContain('a &lt;b&gt; c');
+
+    expect(Callout::make()->content(new HtmlString('<em>raw</em>'))->toHtml())
+        ->toContain('<em>raw</em>');
+});
+
+it('renders a nested component as content', function () {
+    $html = Callout::make()
+        ->content(Field::make()->label('Inner'))
+        ->toHtml();
+
+    expect($html)->toContain('<craft-field label="Inner">');
+});
+
+it('evaluates closures with injection', function () {
+    $html = Callout::make()
+        ->variant(fn (Callout $callout): string => 'info')
+        ->content(fn (): string => 'Lazy')
+        ->toHtml();
+
+    expect($html)->toContain('variant="info"')
+        ->and($html)->toContain('Lazy');
+});
+
+it('accepts enum variants and appearances', function () {
+    $html = Callout::make()
+        ->variant(Variant::Danger)
+        ->appearance(Appearance::OutlineFill)
+        ->toHtml();
+
+    expect($html)->toContain('variant="danger"')
+        ->and($html)->toContain('appearance="outline-fill"');
+});
+
+it('rejects invalid variant and appearance strings', function () {
+    expect(fn () => Callout::make()->variant('sparkly')->toHtml())
+        ->toThrow(ValueError::class);
+
+    expect(fn () => Callout::make()->appearance('sparkly')->toHtml())
+        ->toThrow(ValueError::class);
+});
diff --git a/tests/Unit/Cp/Components/CheckboxGroupTest.php b/tests/Unit/Cp/Components/CheckboxGroupTest.php
new file mode 100644
index 00000000000..13a22d01509
--- /dev/null
+++ b/tests/Unit/Cp/Components/CheckboxGroupTest.php
@@ -0,0 +1,57 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Checkbox;
+use CraftCms\Cms\Cp\Components\CheckboxGroup;
+
+describe('checkbox group', function () {
+    it('renders the container, hidden input, and wrapped checkboxes', function () {
+        $html = CheckboxGroup::make()
+            ->id('colors')
+            ->name('colors')
+            ->options([
+                Checkbox::make()->id('red')->label('Red')->name('colors[]')->value('red'),
+                Checkbox::make()->id('blue')->label('Blue')->name('colors[]')->value('blue'),
+            ])
+            ->toHtml();
+
+        expect($html)->toContain('<craft-checkbox-group id="colors" class="checkbox-group">')
+            ->and($html)->toContain('<input type="hidden" name="colors" value>')
+            ->and($html)->toContain('value="red"')
+            ->and($html)->toContain('value="blue"')
+            ->and($html)->not->toContain('data-custom');
+    });
+
+    it('skips the hidden input without a name', function () {
+        expect(CheckboxGroup::make()->id('g')->toHtml())
+            ->not->toContain('type="hidden"');
+    });
+
+    it('marks custom-option checkboxes on their wrappers', function () {
+        $html = CheckboxGroup::make()
+            ->id('g')
+            ->options([
+                Checkbox::make()->id('c1')->name('opts[]')->custom('<input class="text">')->checked(),
+            ])
+            ->toHtml();
+
+        expect($html)->toContain('data-custom');
+    });
+
+    it('renders the add-option button when a custom option template is set', function () {
+        $html = CheckboxGroup::make()
+            ->id('g')
+            ->name('opts')
+            ->customOptionTemplate('<div data-custom><input id="__ID__"></div>')
+            ->toHtml();
+
+        expect($html)->toContain('id="g-add-btn"')
+            ->and($html)->toContain('Add option');
+    });
+
+    it('omits the add-option button without a template', function () {
+        expect(CheckboxGroup::make()->id('g')->name('opts')->toHtml())
+            ->not->toContain('add-btn');
+    });
+});
diff --git a/tests/Unit/Cp/Components/CheckboxSelectTest.php b/tests/Unit/Cp/Components/CheckboxSelectTest.php
new file mode 100644
index 00000000000..56c947f7c55
--- /dev/null
+++ b/tests/Unit/Cp/Components/CheckboxSelectTest.php
@@ -0,0 +1,58 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Checkbox;
+use CraftCms\Cms\Cp\Components\CheckboxSelect;
+
+describe('checkbox select', function () {
+    it('renders the fieldset with wrapped items', function () {
+        $html = CheckboxSelect::make()
+            ->id('sources')
+            ->name('sources')
+            ->options([
+                Checkbox::make()->id('a')->name('sources[]')->value('a'),
+            ])
+            ->toHtml();
+
+        expect($html)->toContain('<fieldset id="sources" class="cp-checkbox-select">')
+            ->and($html)->toContain('<input type="hidden" name="sources" value>')
+            ->and($html)->toContain('<div class="cp-checkbox-select__item">');
+    });
+
+    it('renders the All checkbox instead of its own hidden input', function () {
+        $html = CheckboxSelect::make()
+            ->id('sources')
+            ->name('sources')
+            ->allCheckbox(Checkbox::make()->id('all')->name('sources')->value('*'))
+            ->toHtml();
+
+        // The only hidden input is the All checkbox's own always-post input.
+        expect($html)->toContain('value="*"')
+            ->and(substr_count($html, 'type="hidden"'))->toBe(1);
+    });
+
+    it('skips the hidden input for array names', function () {
+        expect(CheckboxSelect::make()->id('s')->name('sources[]')->toHtml())
+            ->not->toContain('type="hidden"');
+    });
+
+    it('renders the storage key as a data attribute', function () {
+        expect(CheckboxSelect::make()->id('s')->storageKey('my-key')->toHtml())
+            ->toContain('data-storage-key="my-key"');
+    });
+
+    it('wraps in the sortable web component when sortable', function () {
+        $html = CheckboxSelect::make()->id('s')->sortable()->toHtml();
+        $disabledHtml = CheckboxSelect::make()->id('s')->sortable()->disabled()->toHtml();
+
+        expect($html)->toStartWith('<craft-sortable-checkbox-select>')
+            ->and($html)->toEndWith('</craft-sortable-checkbox-select>')
+            ->and($disabledHtml)->toContain('<craft-sortable-checkbox-select disabled>');
+    });
+
+    it('does not wrap when not sortable', function () {
+        expect(CheckboxSelect::make()->id('s')->toHtml())
+            ->not->toContain('craft-sortable-checkbox-select');
+    });
+});
diff --git a/tests/Unit/Cp/Components/CheckboxTest.php b/tests/Unit/Cp/Components/CheckboxTest.php
new file mode 100644
index 00000000000..5c0a540d18f
--- /dev/null
+++ b/tests/Unit/Cp/Components/CheckboxTest.php
@@ -0,0 +1,137 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Checkbox;
+use Illuminate\Support\HtmlString;
+use Twig\Markup;
+
+describe('input', function () {
+    it('renders the slotted native input inside the web component', function () {
+        $html = Checkbox::make()
+            ->id('cb')
+            ->name('remember')
+            ->checked()
+            ->toHtml();
+
+        expect($html)->toContainTag('input', ['type' => 'hidden', 'name' => 'remember', 'value' => ''])
+            ->and($html)->toContain('<craft-checkbox>')
+            ->and($html)->toContain('slot="input"')
+            ->and($html)->toContain('type="checkbox"')
+            ->and($html)->toContain('id="cb"')
+            ->and($html)->toContain('name="remember"')
+            ->and($html)->toContain('value="1"')
+            ->and($html)->toContain(' checked')
+            ->and($html)->toContain('class="checkbox"');
+    });
+
+    it('lets inputAttributes override computed defaults like type', function () {
+        $html = Checkbox::make()
+            ->id('cb')
+            ->name('n')
+            ->checked()
+            ->inputAttributes(['type' => 'other-type'])
+            ->toHtml();
+
+        // Only the type changed; the default class and state wiring survive.
+        expect($html)->toContain('type="other-type"')
+            ->and($html)->toContain('class="checkbox"')
+            ->and($html)->toContain('name="n"')
+            ->and($html)->toContain(' checked')
+            ->and($html)->toContain('slot="input"');
+    });
+
+    it('stringifies numeric values', function () {
+        $html = Checkbox::make()->id('cb')->value(1.78)->toHtml();
+
+        expect($html)->toContain('value="1.78"');
+    });
+
+    it('skips the always-post hidden input for array names', function () {
+        expect(Checkbox::make()->name('options[]')->toHtml())
+            ->not->toContain('type="hidden"');
+    });
+
+    it('wires toggle targets with the fieldtoggle class', function () {
+        $html = Checkbox::make()->id('cb')->toggle('#settings')->toHtml();
+
+        expect($html)->toContain('fieldtoggle')
+            ->and($html)->toContain('data-target="#settings"');
+    });
+
+    it('merges extra input attributes', function () {
+        $html = Checkbox::make()
+            ->id('cb')
+            ->inputAttributes(['class' => 'extra', 'data-foo' => '1'])
+            ->toHtml();
+
+        expect($html)->toContain('class="checkbox extra"')
+            ->and($html)->toContain('data-foo="1"');
+    });
+});
+
+describe('label', function () {
+    it('renders the associated label with encoded text', function () {
+        $html = Checkbox::make()->id('cb')->label('Tom & Jerry')->toHtml();
+
+        expect($html)->toContainTag('label', ['slot' => 'label', 'for' => 'cb', 'id' => 'cb-label'])
+            ->and($html)->toContain('Tom &amp; Jerry');
+    });
+
+    it('renders a Twig Markup label unencoded', function () {
+        $html = Checkbox::make()->id('cb')->label(new Markup('<b>All</b>', 'UTF-8'))->toHtml();
+
+        expect($html)->toContainTag('label', ['slot' => 'label', 'for' => 'cb', 'id' => 'cb-label'])
+            ->and($html)->toContain('<b>All</b>');
+    });
+
+    it('renders no label element without label content', function () {
+        expect(Checkbox::make()->id('cb')->toHtml())->not->toContain('<label');
+    });
+
+    it('renders an icon chip with a color tint', function () {
+        $html = Checkbox::make()->id('cb')->label('Red')->icon('circle')->color('red')->toHtml();
+
+        expect($html)->toContain('cp-icon puny')
+            ->and($html)->toContain('--icon-color: red;')
+            ->and($html)->toContain('<span>Red</span>');
+    });
+
+    it('renders a color swatch without an icon', function () {
+        $html = Checkbox::make()->id('cb')->label('Red')->color('red')->toHtml();
+
+        expect($html)->toContain('color-preview')
+            ->and($html)->toContain('background-color: red');
+    });
+
+    it('renders markdown info beside the label', function () {
+        $html = Checkbox::make()->id('cb')->label('Opt')->info('Some *info*')->toHtml();
+
+        expect($html)->toContain('class="info"')
+            ->and($html)->toContain('<em>info</em>');
+    });
+});
+
+describe('custom-option mode', function () {
+    it('renders the Custom label and the custom input wrapper', function () {
+        $html = Checkbox::make()
+            ->id('cb')
+            ->label('Ignored')
+            ->custom(new HtmlString('<input type="text" class="custom-option-input">'))
+            ->toHtml();
+
+        expect($html)->toContain('>Custom:</label>')
+            ->and($html)->not->toContain('Ignored')
+            ->and($html)->toContainTag('div', ['class' => 'custom-option-wrapper'])
+            ->and($html)->toContainTag('input', ['type' => 'text', 'class' => 'custom-option-input']);
+    });
+});
+
+it('evaluates closures with injection', function () {
+    $html = Checkbox::make()
+        ->id('cb')
+        ->checked(fn (Checkbox $checkbox): bool => true)
+        ->toHtml();
+
+    expect($html)->toContain(' checked');
+});
diff --git a/tests/Unit/Cp/Components/ComponentManifestDriftTest.php b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
new file mode 100644
index 00000000000..2b06f70772b
--- /dev/null
+++ b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
@@ -0,0 +1,483 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\ComponentRegistry;
+use CraftCms\Cms\Cp\Components\ViewComponent;
+use Symfony\Component\Process\Process;
+
+/*
+|--------------------------------------------------------------------------
+| CP component / web-component API drift detector
+|--------------------------------------------------------------------------
+|
+| Keeps the PHP CP component builders (src/Cp/Components/*, mapped in
+| ComponentRegistry) in sync with the web components' public attribute API, as
+| extracted into the Custom Elements Manifest. Two independent guards:
+|
+| 1. CONVENTION (manifest-only): every web-component `@property` must declare an
+|    explicit kebab-case `attribute:`. A multi-word `@property()` with no
+|    explicit attribute silently observes a *lowercased* attribute
+|    (`accessibleName` -> `accessiblename`), so a kebab server attribute
+|    (`accessible-name`) is ignored — a real, invisible bug. This guard flags
+|    that class for ALL manifest elements, needs no PHP counterpart, and is what
+|    makes the manifest authoritative (attribute names == the real DOM names).
+|
+| 2. COVERAGE (PHP <-> manifest): for each registered builder, assert every WC
+|    attribute is emitted by the PHP builder, matched by EXACT name (safe now
+|    that guard #1 keeps the manifest authoritative). A tripwire tracks the known
+|    unresolved gaps so closing one forces the list to be updated.
+|
+| SCOPING LIMITATION: coverage only covers builders registered in
+| ComponentRegistry. Elements rendered by other means (e.g. `craft-action-menu`
+| / `craft-chip` via MenuHtml / ElementHtml, which are not ViewComponents) are
+| NOT coverage-checked — but the convention guard (#1) still covers them, since
+| it walks the whole manifest.
+|
+| The manifest (packages/craftcms-ui/dist/custom-elements.json) is auto-generated
+| by beforeAll() below. In CI an existing file is trusted, because laravel-ci.yml
+| restores it from a content-keyed actions/cache (never stale by construction);
+| everywhere else it is regenerated on every run so local edits to the web
+| components can't be drift-checked against a stale manifest. Manual regen:
+| cd packages/craftcms-ui && npm run build:manifest
+| The checked-in ROOT packages/craftcms-ui/custom-elements.json is stale; do not use it.
+*/
+
+/**
+ * Path to the generated Custom Elements Manifest. Resolved relative to this
+ * file (repo root is five levels up) rather than base_path(), because tests run
+ * against the Testbench skeleton, not the repo root.
+ */
+function cpDriftManifestPath(): string
+{
+    return dirname(__FILE__, 5).'/packages/craftcms-ui/dist/custom-elements.json';
+}
+
+/** Decodes the manifest, failing loudly (with the regen command) if it is missing. */
+function cpDriftManifest(): array
+{
+    $path = cpDriftManifestPath();
+
+    if (! is_file($path)) {
+        throw new RuntimeException(sprintf(
+            "Custom Elements Manifest not found at %s.\n".
+            'Generate it with:  cd packages/craftcms-ui && npm run build:manifest',
+            $path,
+        ));
+    }
+
+    return json_decode((string) file_get_contents($path), true, flags: JSON_THROW_ON_ERROR);
+}
+
+/** camelCase -> kebab-case (`accessibleName` -> `accessible-name`). */
+function cpDriftKebab(string $name): string
+{
+    return strtolower((string) preg_replace('/([a-z0-9])([A-Z])/', '$1-$2', $name));
+}
+
+/**
+ * tagName => [attribute names], straight from the manifest. Post-convention, an
+ * attribute name is the real observed DOM attribute (explicit kebab or a
+ * genuinely lowercase single word), so these compare exactly against the PHP
+ * builders' emitted attribute names.
+ *
+ * @return array<string, list<string>>
+ */
+function cpDriftManifestAttributes(): array
+{
+    $byTag = [];
+
+    foreach (cpDriftManifest()['modules'] ?? [] as $module) {
+        foreach ($module['declarations'] ?? [] as $declaration) {
+            $tag = $declaration['tagName'] ?? null;
+
+            if ($tag === null) {
+                continue;
+            }
+
+            $byTag[$tag] = array_values(array_map(
+                static fn (array $attr): string => $attr['name'],
+                $declaration['attributes'] ?? [],
+            ));
+        }
+    }
+
+    return $byTag;
+}
+
+/**
+ * The convention violations: manifest attributes whose name is camelCase AND
+ * equals the property (`fieldName`) — meaning the `@property` set no explicit
+ * `attribute:`, so Lit will lowercase the observed attribute. Walks EVERY tagged
+ * element in the manifest, not just the registered builders.
+ *
+ * @return list<array{tag: string, attr: string, kebab: string}>
+ */
+function cpDriftCamelCaseImplicitAttributes(): array
+{
+    $risky = [];
+
+    foreach (cpDriftManifest()['modules'] ?? [] as $module) {
+        foreach ($module['declarations'] ?? [] as $declaration) {
+            $tag = $declaration['tagName'] ?? null;
+
+            if ($tag === null) {
+                continue;
+            }
+
+            foreach ($declaration['attributes'] ?? [] as $attr) {
+                $name = $attr['name'] ?? '';
+
+                if ($name === ($attr['fieldName'] ?? null) && preg_match('/[A-Z]/', $name)) {
+                    $risky[] = ['tag' => $tag, 'attr' => $name, 'kebab' => cpDriftKebab($name)];
+                }
+            }
+        }
+    }
+
+    return $risky;
+}
+
+/**
+ * The registry's name => class map. Read via reflection so the test is driven
+ * by the actual registered set (and any additions to it), not a hardcoded list.
+ *
+ * @return array<string, class-string<ViewComponent>>
+ */
+function cpDriftRegistryMap(): array
+{
+    $registry = app(ComponentRegistry::class);
+    $property = new ReflectionProperty(ComponentRegistry::class, 'components');
+
+    return $property->getValue($registry);
+}
+
+/** Reflects a protected method's return value off a fresh builder instance. */
+function cpDriftInvokeProtected(ViewComponent $component, string $method): mixed
+{
+    $reflection = new ReflectionMethod($component, $method);
+
+    return $reflection->invoke($component);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Allowlists — the spec of intentional differences
+|--------------------------------------------------------------------------
+*/
+
+/**
+ * WC attributes intentionally NOT emitted by the PHP builder because they are
+ * internal / reflected-state rather than a public server-set input.
+ *
+ * Keyed by tagName; values are manifest attribute names (exact).
+ *
+ * Currently EMPTY: none of the covered elements expose a WC attribute that is
+ * purely internal reflected state and absent from PHP. The one set of WC-only
+ * attributes that exists (craft-button `rel`/`download`) is a genuine gap, not
+ * internal state, so it is tracked separately in cpDriftKnownGaps().
+ *
+ * @return array<string, list<string>>
+ */
+function cpDriftWcOnlyAllowlist(): array
+{
+    return [
+        // e.g. 'craft-foo' => ['open'],  // reflected disclosure state, set by the WC itself
+    ];
+}
+
+/**
+ * PHP hostAttributes keys that are expected to have NO web-component attribute
+ * counterpart — genuine server-side / structural concerns. Used only to label
+ * the informational "PHP-only" section of the report; it does not gate any
+ * assertion.
+ *
+ * Keyed by tagName; values are PHP hostAttributes keys.
+ *
+ * @return array<string, list<string>>
+ */
+function cpDriftExpectedPhpOnly(): array
+{
+    return [
+        // Global / structural HTML attributes the WC does not declare in the manifest.
+        '*' => ['id', 'class', 'style', 'role', 'aria', 'data', 'slot'],
+
+        // craft-button: `type`/`disabled` are native/global; `active` and `command`
+        // are PHP conveniences (pressed state, Invoker Commands API).
+        'craft-button' => ['type', 'active', 'disabled', 'command'],
+
+        // craft-field: `label` is a WC slot; `readonly`/`disabled` are native.
+        'craft-field' => ['label', 'readonly', 'disabled'],
+
+        // craft-switch: native input state / a slot, not declared manifest attributes.
+        'craft-switch' => ['checked', 'disabled', 'label'],
+    ];
+}
+
+/**
+ * Genuine, currently-UNRESOLVED coverage drift: WC attributes that are real
+ * public inputs the PHP builder does not yet emit. Deliberately NOT waved
+ * through the allowlist — surfacing them is the point. A tripwire test guards
+ * that they still exist, so closing a gap forces this list to be updated.
+ *
+ * Keyed by tagName; values are manifest attribute names (exact).
+ *
+ * @return array<string, list<string>>
+ */
+function cpDriftKnownGaps(): array
+{
+    return [
+        // <craft-button> accepts `rel` and `download` (link-mode companions to
+        // href/target), but Button::hostAttributes() emits neither. Either add
+        // them to Button, or (if intentionally unsupported server-side) move them
+        // to cpDriftWcOnlyAllowlist() with a rationale.
+        'craft-button' => ['rel', 'download'],
+    ];
+}
+
+/**
+ * Builds the full coverage analysis, one row per registry entry. All comparisons
+ * are EXACT — the convention guard keeps manifest attribute names authoritative.
+ *
+ * @return array<string, array{
+ *     name: string, class: class-string<ViewComponent>, tag: string,
+ *     tagInManifest: bool, error: ?string,
+ *     wcAttrs: list<string>, phpKeys: list<string>,
+ *     uncovered: list<string>, knownGaps: list<string>, phpOnly: list<string>,
+ * }>
+ */
+function cpDriftAnalyze(): array
+{
+    $manifest = cpDriftManifestAttributes();
+    $wcAllow = cpDriftWcOnlyAllowlist();
+    $knownGaps = cpDriftKnownGaps();
+
+    $rows = [];
+
+    foreach (cpDriftRegistryMap() as $name => $class) {
+        $row = [
+            'name' => $name,
+            'class' => $class,
+            'tag' => '',
+            'tagInManifest' => false,
+            'error' => null,
+            'wcAttrs' => [],
+            'phpKeys' => [],
+            'uncovered' => [],
+            'knownGaps' => [],
+            'phpOnly' => [],
+        ];
+
+        try {
+            $component = $class::make();
+            $tag = (string) cpDriftInvokeProtected($component, 'tagName');
+            $phpKeys = array_keys((array) cpDriftInvokeProtected($component, 'hostAttributes'));
+
+            $row['tag'] = $tag;
+            $row['phpKeys'] = $phpKeys;
+            $row['tagInManifest'] = array_key_exists($tag, $manifest);
+            $row['wcAttrs'] = $manifest[$tag] ?? [];
+
+            $allow = $wcAllow[$tag] ?? [];
+            $gaps = $knownGaps[$tag] ?? [];
+
+            // WC attrs the PHP builder does not cover (exact), minus the
+            // intentional internal-state allowlist. Split into known (tracked)
+            // gaps and any NEW, undocumented drift.
+            foreach ($row['wcAttrs'] as $attr) {
+                if (in_array($attr, $phpKeys, true)) {
+                    continue;
+                }
+                if (in_array($attr, $allow, true)) {
+                    continue;
+                }
+                if (in_array($attr, $gaps, true)) {
+                    $row['knownGaps'][] = $attr;
+                } else {
+                    $row['uncovered'][] = $attr;
+                }
+            }
+
+            // PHP keys with no WC attribute counterpart (informational).
+            foreach ($phpKeys as $key) {
+                if (! in_array($key, $row['wcAttrs'], true)) {
+                    $row['phpOnly'][] = $key;
+                }
+            }
+        } catch (Throwable $e) {
+            $row['error'] = $e::class.': '.$e->getMessage();
+        }
+
+        $rows[$name] = $row;
+    }
+
+    return $rows;
+}
+
+beforeAll(function () {
+    // In CI an existing manifest was restored by a content-keyed actions/cache
+    // step (see laravel-ci.yml), so it can't be stale — trust it. Locally,
+    // regenerate unconditionally: a stale manifest silently drift-checks
+    // against an outdated attribute API.
+    if (getenv('CI') !== false && is_file(cpDriftManifestPath())) {
+        return;
+    }
+
+    // The pinned npx invocation matches the package's @custom-elements-manifest/analyzer
+    // devDependency and needs neither node_modules nor an npm install, so it
+    // also works in fresh worktrees (and as a CI cache-miss fallback).
+    $process = Process::fromShellCommandline(
+        'npx --yes @custom-elements-manifest/analyzer@0.11.0 analyze',
+        dirname(__FILE__, 5).'/packages/craftcms-ui',
+        timeout: 300,
+    );
+    $process->run();
+
+    expect($process->isSuccessful() && is_file(cpDriftManifestPath()))->toBeTrue(
+        "Failed to generate the Custom Elements Manifest:\n"
+        .trim($process->getErrorOutput()."\n".$process->getOutput())
+        ."\nGenerate it manually with:  cd packages/craftcms-ui && npm run build:manifest",
+    );
+});
+
+it('has a manifest with the expected tagged-element count', function () {
+    // Sanity check we loaded the real (dist) manifest, not the stale root stub.
+    expect(count(cpDriftManifestAttributes()))->toBeGreaterThan(40);
+});
+
+describe('convention: every @property declares an explicit attribute', function () {
+    it('has no camelCase property silently observed as a lowercased attribute', function () {
+        $risky = cpDriftCamelCaseImplicitAttributes();
+
+        $detail = implode("\n  ", array_map(
+            static fn (array $r): string => "<{$r['tag']}> {$r['attr']}  →  add  attribute: '{$r['kebab']}'",
+            $risky,
+        ));
+
+        expect($risky)->toBe([], sprintf(
+            '%d web-component propert%s a camelCase name and no explicit `attribute:` option, so Lit '.
+            'observes a *lowercased* attribute (e.g. accessibleName → accessiblename) — a kebab-case '.
+            'server-emitted attribute (accessible-name) is then silently ignored. Declare an explicit '.
+            "kebab attribute on each:\n  %s",
+            count($risky),
+            count($risky) === 1 ? 'y has' : 'ies have',
+            $detail,
+        ));
+    });
+});
+
+describe('coverage: every WC attribute is emitted by the PHP builder', function () {
+    it('covers all public WC attributes for each registered component', function (string $name) {
+        $row = cpDriftAnalyze()[$name];
+
+        expect($row['error'])->toBeNull("Builder for \"$name\" threw while reflecting: {$row['error']}");
+
+        if (! $row['tagInManifest']) {
+            // The builder's tag is not a manifest custom element (e.g.
+            // checkbox-select => <fieldset>). Nothing to compare against; this is
+            // reported as structural friction, not a coverage failure.
+            expect($row['wcAttrs'])->toBe([]);
+
+            return;
+        }
+
+        expect($row['uncovered'])->toBe(
+            [],
+            sprintf(
+                'UNDOCUMENTED DRIFT: <%s> declares attribute(s) [%s] that %s does not emit and that '.
+                'are not in the internal-state allowlist or the known-gaps list. Add them to the '.
+                'builder, or (if intentional) to cpDriftWcOnlyAllowlist()/cpDriftKnownGaps().',
+                $row['tag'],
+                implode(', ', $row['uncovered']),
+                $row['class'],
+            ),
+        );
+    })->with(array_keys(cpDriftRegistryMap()));
+});
+
+describe('known unresolved gaps (tripwire)', function () {
+    it('confirms documented WC-only gaps still exist (fails when a gap is closed)', function () {
+        $rows = cpDriftAnalyze();
+
+        foreach (cpDriftKnownGaps() as $tag => $attrs) {
+            $row = collect($rows)->firstWhere('tag', $tag);
+
+            expect($row)->not->toBeNull("No registered builder renders <$tag>; stale known-gap entry?");
+
+            foreach ($attrs as $attr) {
+                // Still declared by the WC…
+                expect(in_array($attr, $row['wcAttrs'], true))->toBeTrue(
+                    "Known-gap attribute \"$attr\" is no longer declared by <$tag>; remove it from cpDriftKnownGaps().",
+                );
+
+                // …and still absent from the PHP builder. If this fails, the gap
+                // was fixed — great! Remove the entry from cpDriftKnownGaps().
+                expect(in_array($attr, $row['phpKeys'], true))->toBeFalse(
+                    "Known-gap attribute \"$attr\" is now emitted by the <$tag> builder — the drift is resolved. ".
+                    'Remove it from cpDriftKnownGaps() so this tripwire stays meaningful.',
+                );
+            }
+        }
+    });
+});
+
+it('prints a full drift report', function () {
+    $rows = cpDriftAnalyze();
+
+    $expectedPhpOnly = cpDriftExpectedPhpOnly();
+    $globalPhpOnly = $expectedPhpOnly['*'] ?? [];
+
+    $lines = [];
+    $lines[] = '';
+    $lines[] = '=========================================================================';
+    $lines[] = ' CP component <-> web-component attribute drift report';
+    $lines[] = ' manifest: packages/craftcms-ui/dist/custom-elements.json';
+    $lines[] = '=========================================================================';
+
+    $risky = cpDriftCamelCaseImplicitAttributes();
+    $lines[] = ' convention (implicit-attribute properties): '
+        .($risky ? implode(', ', array_map(fn ($r) => "<{$r['tag']}> {$r['attr']}", $risky)) : '(none — clean)');
+    $lines[] = '=========================================================================';
+
+    foreach ($rows as $name => $row) {
+        $lines[] = '';
+        $lines[] = sprintf('• %s  =>  %s  (<%s>)', $name, class_basename($row['class']), $row['tag']);
+
+        if ($row['error'] !== null) {
+            $lines[] = '    ERROR: '.$row['error'];
+
+            continue;
+        }
+
+        if (! $row['tagInManifest']) {
+            $lines[] = '    FRICTION: tag is not a manifest custom element — no WC API to compare against.';
+
+            continue;
+        }
+
+        $lines[] = '    WC attrs   : '.($row['wcAttrs'] ? implode(', ', $row['wcAttrs']) : '(none)');
+        $lines[] = '    PHP keys   : '.($row['phpKeys'] ? implode(', ', $row['phpKeys']) : '(none)');
+
+        $lines[] = '    WC missing from PHP (undocumented): '
+            .($row['uncovered'] ? implode(', ', $row['uncovered']) : '(none)');
+
+        $lines[] = '    WC missing from PHP (KNOWN GAP)   : '
+            .($row['knownGaps'] ? implode(', ', $row['knownGaps']) : '(none)');
+
+        // Split PHP-only into expected (structural/native) vs. worth-a-look.
+        $expected = array_merge($globalPhpOnly, $expectedPhpOnly[$row['tag']] ?? []);
+        $unexpectedPhpOnly = array_values(array_diff($row['phpOnly'], $expected));
+        $lines[] = '    PHP-only (expected): '
+            .($row['phpOnly'] ? implode(', ', array_intersect($row['phpOnly'], $expected)) : '(none)');
+        $lines[] = '    PHP-only (review)  : '
+            .($unexpectedPhpOnly ? implode(', ', $unexpectedPhpOnly) : '(none)');
+    }
+
+    $lines[] = '';
+    $lines[] = '=========================================================================';
+
+    fwrite(STDOUT, implode("\n", $lines)."\n");
+
+    // Always passes — this test exists to emit the report.
+    expect(true)->toBeTrue();
+});
diff --git a/tests/Unit/Cp/Components/FieldGroupTest.php b/tests/Unit/Cp/Components/FieldGroupTest.php
new file mode 100644
index 00000000000..46f016b071e
--- /dev/null
+++ b/tests/Unit/Cp/Components/FieldGroupTest.php
@@ -0,0 +1,50 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Field;
+use CraftCms\Cms\Cp\Components\FieldGroup;
+use Illuminate\Support\HtmlString;
+
+it('renders component children into the default slot', function () {
+    $html = FieldGroup::make()
+        ->children([
+            Field::make()->label('One'),
+            Field::make()->label('Two'),
+        ])
+        ->toHtml();
+
+    expect($html)->toStartWith('<craft-field-group')
+        ->and($html)->toContain('label="One"')
+        ->and($html)->toContain('label="Two"')
+        ->and(substr_count($html, '<craft-field '))->toBe(2)
+        ->and($html)->not->toContain('slot=');
+});
+
+it('mixes component, Htmlable, and encoded string children', function () {
+    $html = FieldGroup::make()
+        ->children([
+            Field::make()->label('One'),
+            new HtmlString('<hr>'),
+            'plain & text',
+        ])
+        ->toHtml();
+
+    expect($html)->toContain('<hr>')
+        ->and($html)->toContain('plain &amp; text');
+});
+
+it('supports closure children', function () {
+    $html = FieldGroup::make()
+        ->children(fn (): array => [Field::make()->label('Lazy')])
+        ->toHtml();
+
+    expect($html)->toContain('label="Lazy"');
+});
+
+it('sets the gap custom property', function () {
+    expect(FieldGroup::make()->gap('var(--c-spacing-xl)')->toHtml())
+        ->toContain('style="--gap: var(--c-spacing-xl);"');
+
+    expect(FieldGroup::make()->toHtml())->not->toContain('style=');
+});
diff --git a/tests/Unit/Cp/Components/FieldTest.php b/tests/Unit/Cp/Components/FieldTest.php
new file mode 100644
index 00000000000..f764c162075
--- /dev/null
+++ b/tests/Unit/Cp/Components/FieldTest.php
@@ -0,0 +1,184 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Config\GeneralConfig;
+use CraftCms\Cms\Cp\Components\Field;
+use Illuminate\Support\HtmlString;
+use Twig\Markup;
+
+describe('attributes', function () {
+    it('renders the tag with label and boolean attributes', function () {
+        $html = Field::make()
+            ->label('My Label')
+            ->required()
+            ->translatable(true, 'Translates per site')
+            ->toHtml();
+
+        expect($html)->toStartWith('<craft-field')
+            ->and($html)->toContain('label="My Label"')
+            ->and($html)->toContain(' required')
+            ->and($html)->toContain(' translatable')
+            ->and($html)->toContain('translation-description="Translates per site"')
+            ->and($html)->not->toContain('fieldset')
+            ->and($html)->not->toContain('has-errors');
+    });
+
+    it('renders fieldset, read-only, status, orientation, and id', function () {
+        $html = Field::make()
+            ->id('my-field')
+            ->fieldset()
+            ->readOnly()
+            ->status('modified', 'This field was modified')
+            ->orientation('rtl')
+            ->toHtml();
+
+        expect($html)->toContain('id="my-field"')
+            ->and($html)->toContain(' fieldset')
+            ->and($html)->toContain(' readonly')
+            ->and($html)->toContain('status="modified"')
+            ->and($html)->toContain('status-label="This field was modified"')
+            ->and($html)->toContain('orientation="rtl"');
+    });
+
+    it('only renders width when set', function () {
+        expect(Field::make()->toHtml())
+            ->not->toContain('width');
+
+        expect(Field::make()->width('auto')->toHtml())
+            ->toContain('width="auto"');
+    });
+
+    it('only renders instructions-position when after', function () {
+        expect(Field::make()->instructions('Hi')->toHtml())
+            ->not->toContain('instructions-position');
+
+        expect(Field::make()->instructions('Hi')->instructionsPosition('after')->toHtml())
+            ->toContain('instructions-position="after"');
+    });
+
+    it('merges additional host attributes', function () {
+        $html = Field::make()
+            ->attributes(['class' => 'a', 'data-foo' => '1'])
+            ->attributes(['class' => 'b'])
+            ->toHtml();
+
+        expect($html)->toContain('class="a b"')
+            ->and($html)->toContain('data-foo="1"');
+    });
+});
+
+describe('slots', function () {
+    it('applies the input slot to a single root element', function () {
+        $html = Field::make()->input('<input type="text" name="foo">')->toHtml();
+
+        expect($html)->toContainTag('input', ['type' => 'text', 'name' => 'foo', 'slot' => 'input']);
+    });
+
+    it('wraps non-element input content in a slotted span', function () {
+        $html = Field::make()->input('plain text')->toHtml();
+
+        expect($html)->toContain('<span slot="input">plain text</span>');
+    });
+
+    it('renders a nested component into the input slot', function () {
+        $html = Field::make()
+            ->input(Field::make()->label('Inner'))
+            ->toHtml();
+
+        expect($html)->toContain('<craft-field slot="input" label="Inner">');
+    });
+
+    it('renders markdown instructions into the help-text slot', function () {
+        $html = Field::make()->instructions('Some **bold** text')->toHtml();
+
+        expect($html)->toContain('slot="help-text"')
+            ->and($html)->toContain('<strong>bold</strong>');
+    });
+
+    it('renders tip and warning slots with inline markdown', function () {
+        $html = Field::make()->tip('A *tip*')->warning('A warning')->toHtml();
+
+        expect($html)->toContain('slot="tip"')
+            ->and($html)->toContain('<em>tip</em>')
+            ->and($html)->toContain('slot="warning"');
+    });
+
+    it('renders an Htmlable label into the label slot instead of the attribute', function () {
+        $html = Field::make()->label(new HtmlString('<span>Fancy</span>'))->toHtml();
+
+        expect($html)->toContain('<span slot="label">Fancy</span>')
+            ->and($html)->not->toContain('label="');
+    });
+
+    it('renders a Twig Markup label into the label slot instead of the attribute', function () {
+        $html = Field::make()->label(new Markup('<b>All</b>', 'UTF-8'))->toHtml();
+
+        expect($html)->toContain('<b slot="label">All</b>')
+            ->and($html)->not->toContain('label="');
+    });
+
+    it('renders label-extra content', function () {
+        $html = Field::make()->labelExtra('<button type="button">Copy</button>')->toHtml();
+
+        expect($html)->toContain('<button type="button" slot="label-extra">Copy</button>');
+    });
+});
+
+describe('errors', function () {
+    it('renders an escaped error list into the feedback slot and flags has-errors', function () {
+        $html = Field::make()->errors(['Bad one', 'Bad <two>'])->toHtml();
+
+        expect($html)->toContain(' has-errors')
+            ->and($html)->toContain('slot="feedback"')
+            ->and($html)->toContain('class="error-list"')
+            ->and($html)->toContain('<li>Bad one</li>')
+            ->and($html)->toContain('<li>Bad &lt;two&gt;</li>');
+    });
+
+    it('ignores empty error arrays', function () {
+        $html = Field::make()->errors([])->toHtml();
+
+        expect($html)->not->toContain('has-errors')
+            ->and($html)->not->toContain('slot="feedback"');
+    });
+});
+
+describe('callback properties', function () {
+    it('evaluates closures at render time', function () {
+        $field = Field::make()->label(fn (): string => 'Lazy Label');
+
+        expect($field->toHtml())->toContain('label="Lazy Label"');
+    });
+
+    it('injects the component by parameter name', function () {
+        $html = Field::make()
+            ->label(fn ($component): string => 'Label for '.$component::class)
+            ->toHtml();
+
+        expect($html)->toContain('label="Label for '.Field::class.'"');
+    });
+
+    it('injects the component by type hint', function () {
+        $html = Field::make()
+            ->required(fn (Field $field): bool => true)
+            ->toHtml();
+
+        expect($html)->toContain(' required');
+    });
+
+    it('resolves container services for typed closure parameters', function () {
+        $html = Field::make()
+            ->translatable(fn (GeneralConfig $config): bool => $config instanceof GeneralConfig)
+            ->toHtml();
+
+        expect($html)->toContain(' translatable');
+    });
+});
+
+it('casts to string and Htmlable', function () {
+    $field = Field::make()->label('Cast');
+
+    expect((string) $field)->toBe($field->toHtml())
+        ->and($field->toHtml())->toContain('label="Cast"');
+});
diff --git a/tests/Unit/Cp/Components/LightswitchTest.php b/tests/Unit/Cp/Components/LightswitchTest.php
new file mode 100644
index 00000000000..6bb9d563ab4
--- /dev/null
+++ b/tests/Unit/Cp/Components/LightswitchTest.php
@@ -0,0 +1,128 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Lightswitch;
+use CraftCms\Cms\Cp\Enums\Size;
+
+describe('host attributes', function () {
+    it('renders defaults without redundant attributes', function () {
+        $html = Lightswitch::make()->toHtml();
+
+        expect($html)->toStartWith('<craft-switch>')
+            ->and($html)->not->toContain('value=')
+            ->and($html)->not->toContain('indeterminate');
+    });
+
+    it('renders state and non-default posting values', function () {
+        $html = Lightswitch::make()
+            ->on()
+            ->value('yes')
+            ->size(Size::Small)
+            ->toHtml();
+
+        expect($html)->toContain(' checked')
+            ->and($html)->toContain('value="yes"')
+            ->and($html)->toContain('size="small"');
+    });
+
+    it('merges extra button attributes over computed defaults', function () {
+        $html = Lightswitch::make()
+            ->id('ls')
+            ->buttonAttributes(['data-test' => '1', 'class' => 'extra', 'role' => 'other-role'])
+            ->toHtml();
+
+        expect($html)->toContain('data-test="1"')
+            ->and($html)->toContain('extra')
+            ->and($html)->toContain('role="other-role"');
+    });
+
+    it('only renders on-label when it differs from the label', function () {
+        $sameLabels = Lightswitch::make()->label('Enabled')->onLabel('Enabled')->toHtml();
+        $distinctLabels = Lightswitch::make()->label('Status')->onLabel('Live')->offLabel('Draft')->toHtml();
+
+        expect($sameLabels)->toContain('label="Enabled"')
+            ->and($sameLabels)->not->toContain('on-label')
+            ->and($distinctLabels)->toContain('on-label="Live"')
+            ->and($distinctLabels)->toContain('off-label="Draft"');
+    });
+
+    it('clamps indeterminate to off switches', function () {
+        $off = Lightswitch::make()->indeterminate()->toHtml();
+        $on = Lightswitch::make()->on()->indeterminate()->toHtml();
+
+        expect($off)->toContain(' indeterminate')
+            ->and($on)->not->toContain('indeterminate');
+    });
+});
+
+describe('switch button', function () {
+    it('renders the slotted button with switch semantics', function () {
+        $html = Lightswitch::make()->id('my-switch')->on()->toHtml();
+
+        expect($html)->toContain('<craft-switch-button')
+            ->and($html)->toContain('slot="input"')
+            ->and($html)->toContain('id="my-switch"')
+            ->and($html)->toContain('role="switch"')
+            ->and($html)->toContain('aria-checked="true"')
+            ->and($html)->toContain('size="medium"');
+    });
+
+    it('exposes aria-checked=mixed when indeterminate', function () {
+        expect(Lightswitch::make()->indeterminate()->toHtml())
+            ->toContain('aria-checked="mixed"');
+    });
+
+    it('wires toggle targets for Craft.FieldToggle', function () {
+        $html = Lightswitch::make()
+            ->toggle('#settings')
+            ->reverseToggle('other-settings')
+            ->toHtml();
+
+        expect($html)->toContain('class="fieldtoggle"')
+            ->and($html)->toContain('data-target="#settings"')
+            ->and($html)->toContain('data-reverse-target="other-settings"');
+    });
+
+    it('wires external label and description associations', function () {
+        $html = Lightswitch::make()
+            ->labelledBy('a-label')
+            ->describedBy('a-description')
+            ->toHtml();
+
+        expect($html)->toContain('aria-labelledby="a-label"')
+            ->and($html)->toContain('aria-describedby="a-description"');
+    });
+});
+
+describe('hidden input', function () {
+    it('posts value when on, indeterminate value when indeterminate, empty when off', function () {
+        $on = Lightswitch::make()->name('enabled')->on()->toHtml();
+        $indeterminate = Lightswitch::make()->name('enabled')->indeterminate()->toHtml();
+        $off = Lightswitch::make()->name('enabled')->toHtml();
+
+        expect($on)->toContainTag('input', ['type' => 'hidden', 'name' => 'enabled', 'value' => '1', 'slot' => 'hidden-input'])
+            ->and($indeterminate)->toContainTag('input', ['type' => 'hidden', 'name' => 'enabled', 'value' => '-', 'slot' => 'hidden-input'])
+            ->and($off)->toContainTag('input', ['type' => 'hidden', 'name' => 'enabled', 'value' => '', 'slot' => 'hidden-input']);
+    });
+
+    it('renders no hidden input without a name', function () {
+        expect(Lightswitch::make()->on()->toHtml())
+            ->not->toContain('type="hidden"');
+    });
+});
+
+it('renders markdown instructions into the help-text slot', function () {
+    $html = Lightswitch::make()->instructions('Some **bold** text')->toHtml();
+
+    expect($html)->toContain('slot="help-text"')
+        ->and($html)->toContain('<strong>bold</strong>');
+});
+
+it('evaluates closures with injection', function () {
+    $html = Lightswitch::make()
+        ->on(fn (Lightswitch $lightswitch): bool => true)
+        ->toHtml();
+
+    expect($html)->toContain(' checked');
+});
diff --git a/tests/Unit/Cp/Components/UiTest.php b/tests/Unit/Cp/Components/UiTest.php
new file mode 100644
index 00000000000..3022e823747
--- /dev/null
+++ b/tests/Unit/Cp/Components/UiTest.php
@@ -0,0 +1,106 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\Callout;
+use CraftCms\Cms\Cp\Components\ComponentRegistry;
+use CraftCms\Cms\Cp\Components\Field;
+use CraftCms\Cms\Cp\Components\ViewComponent;
+use CraftCms\Cms\View\TemplateMode;
+use Twig\Markup;
+
+use function CraftCms\Cms\ui;
+
+describe('configure', function () {
+    it('applies config keys via fluent setters, camelizing kebab and snake keys', function () {
+        $html = Callout::make()
+            ->configure([
+                'variant' => 'warning',
+                'title' => 'Heads up',
+                'inline' => true,
+            ])
+            ->toHtml();
+
+        expect($html)->toContain('variant="warning"')
+            ->and($html)->toContain('title="Heads up"')
+            ->and($html)->toContain(' inline');
+
+        expect(Field::make()->configure(['instructions-position' => 'after'])->toHtml())
+            ->toContain('instructions-position="after"');
+
+        expect(Field::make()->configure(['read_only' => true])->toHtml())
+            ->toContain(' readonly');
+    });
+
+    it('throws for unknown config keys', function () {
+        expect(fn () => Callout::make()->configure(['nope' => 1]))
+            ->toThrow(InvalidArgumentException::class, 'nope');
+    });
+
+    it('rejects getter and rendering method names as config keys', function (string $key) {
+        expect(fn () => Callout::make()->configure([$key => 'x']))
+            ->toThrow(InvalidArgumentException::class, $key);
+    })->with(['getVariant', 'isDisabled', 'toHtml', 'evaluate', 'renderSlots']);
+});
+
+describe('ui()', function () {
+    it('creates a configured component by name', function () {
+        $component = ui('callout', ['variant' => 'info', 'content' => 'Hi']);
+
+        expect($component)->toBeInstanceOf(Callout::class)
+            ->and($component->toHtml())->toContain('variant="info"')
+            ->and($component->toHtml())->toContain('Hi');
+    });
+
+    it('remains chainable after creation', function () {
+        expect(ui('callout')->variant('danger')->toHtml())
+            ->toContain('variant="danger"');
+    });
+
+    it('throws for unknown component names', function () {
+        expect(fn () => ui('nope'))
+            ->toThrow(InvalidArgumentException::class, 'Unknown UI component');
+    });
+
+    it('supports registering additional components', function () {
+        $registry = app(ComponentRegistry::class);
+        $registry->register('aliased-callout', Callout::class);
+
+        expect(ui('aliased-callout'))->toBeInstanceOf(Callout::class);
+    });
+
+    it('rejects registering non-components', function () {
+        expect(fn () => app(ComponentRegistry::class)->register('bad', stdClass::class))
+            ->toThrow(InvalidArgumentException::class, ViewComponent::class);
+    });
+});
+
+describe('twig integration', function () {
+    it('renders through the ui() twig function unescaped', function () {
+        $html = CraftCms\Cms\renderString(
+            "{{ ui('callout', {variant: 'warning', content: 'Careful!'}) }}",
+            templateMode: TemplateMode::Cp,
+        );
+
+        expect($html)->toContain('<craft-callout')
+            ->and($html)->toContain('variant="warning"')
+            ->and($html)->toContain('Careful!');
+    });
+
+    it('treats twig markup content as pre-escaped html', function () {
+        $component = ui('callout', [
+            'content' => new Markup('<em>safe</em>', 'UTF-8'),
+        ]);
+
+        expect($component->toHtml())->toContain('<em>safe</em>');
+    });
+
+    it('still encodes plain twig strings', function () {
+        $html = CraftCms\Cms\renderString(
+            "{{ ui('callout', {content: '<em>unsafe</em>'}) }}",
+            templateMode: TemplateMode::Cp,
+        );
+
+        expect($html)->toContain('&lt;em&gt;unsafe&lt;/em&gt;');
+    });
+});
diff --git a/tests/Unit/Cp/ElementHtmlActionMenuTest.php b/tests/Unit/Cp/ElementHtmlActionMenuTest.php
new file mode 100644
index 00000000000..741c964dff3
--- /dev/null
+++ b/tests/Unit/Cp/ElementHtmlActionMenuTest.php
@@ -0,0 +1,161 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Component\Contracts\Actionable;
+use CraftCms\Cms\Component\Contracts\Chippable;
+use CraftCms\Cms\Cp\Html\ElementHtml;
+
+/**
+ * Minimal `Chippable`+`Actionable` test double, standing in for a real
+ * element/component so `chipHtml()`'s action-menu rendering can be exercised
+ * without touching the database.
+ */
+class ActionMenuTestComponent implements Actionable, Chippable
+{
+    public function __construct(
+        private readonly array $items = [],
+    ) {}
+
+    public static function get(string|int $id): ?static
+    {
+        return null;
+    }
+
+    public function getId(): string|int|null
+    {
+        return 1;
+    }
+
+    public function getUiLabel(): string
+    {
+        return 'Test Component';
+    }
+
+    public function getActionMenuItems(): array
+    {
+        return $this->items;
+    }
+}
+
+function renderChipWithActionItems(array $items): string
+{
+    $component = new ActionMenuTestComponent($items);
+
+    return app(ElementHtml::class)->chipHtml($component, [
+        'showActionMenu' => true,
+    ]);
+}
+
+it('renders a craft-action-menu instead of the legacy disclosure markup', function () {
+    $html = renderChipWithActionItems([]);
+
+    expect($html)->toContain('<craft-action-menu>')
+        ->and($html)->toContain('slot="invoker"')
+        ->and($html)->toContain('slot="content"')
+        ->and($html)->toContain('craft-icon')
+        ->and($html)->not->toContain('menu--disclosure')
+        ->and($html)->not->toContain('disclosureMenu')
+        ->and($html)->not->toContain('formsubmit');
+});
+
+it('always renders the menu, even with zero items, so JS can inject into it later', function () {
+    $html = renderChipWithActionItems([]);
+
+    expect($html)->toContain('<craft-action-menu>')
+        ->and($html)->toContain('<div slot="content"></div>');
+});
+
+it('maps a basic item to a craft-action-item with its icon', function () {
+    $html = renderChipWithActionItems([
+        ['id' => 'action-foo', 'label' => 'Foo', 'icon' => 'star'],
+    ]);
+
+    expect($html)->toContain('<craft-action-item')
+        ->and($html)->toContain('icon="star"')
+        ->and($html)->toContain('>Foo<');
+});
+
+it('tags edit items with data-edit-action and copy items with data-copy-action', function () {
+    $html = renderChipWithActionItems([
+        ['id' => 'action-edit-1', 'label' => 'Edit'],
+        ['id' => 'action-copy-1', 'label' => 'Copy'],
+    ]);
+
+    expect($html)->toContain('data-edit-action')
+        ->and($html)->toContain('data-copy-action');
+});
+
+it('marks destructive items with variant="danger"', function () {
+    // Destructive items are excluded from chips/cards by default (per
+    // `Actionable::getActionMenuItems()`'s doc comment) — `showInChips` opts
+    // one back in.
+    $html = renderChipWithActionItems([
+        ['label' => 'Delete', 'destructive' => true, 'showInChips' => true],
+    ]);
+
+    expect($html)->toContain('variant="danger"');
+});
+
+it('renders link items with an href and no action', function () {
+    $html = renderChipWithActionItems([
+        ['label' => 'View', 'url' => 'https://example.com'],
+    ]);
+
+    expect($html)->toContain('href="https://example.com"');
+});
+
+it('renders hidden items with the hidden attribute', function () {
+    $html = renderChipWithActionItems([
+        ['label' => 'Hidden thing', 'hidden' => true],
+    ]);
+
+    expect($html)->toMatch('/<craft-action-item[^>]*\bhidden\b/');
+});
+
+it('maps action/params/confirm to a craft-action-item action object instead of formsubmit', function () {
+    $html = renderChipWithActionItems([
+        [
+            'label' => 'Delete',
+            'destructive' => true,
+            'showInChips' => true,
+            'action' => 'elements/delete',
+            'params' => ['elementId' => 5],
+            'confirm' => 'Are you sure?',
+        ],
+    ]);
+
+    $decoded = html_entity_decode($html);
+
+    expect($decoded)->toContain('"type":"http"')
+        ->and($decoded)->toContain('"method":"POST"')
+        ->and($decoded)->toContain('elements/delete')
+        ->and($decoded)->toContain('"elementId":5')
+        ->and($decoded)->toContain('"confirm":"Are you sure?"')
+        ->and($html)->not->toContain('data-action=')
+        ->and($html)->not->toContain('formsubmit');
+});
+
+it('renders a description or handle as a secondary line', function () {
+    $html = renderChipWithActionItems([
+        ['label' => 'With description', 'description' => 'A description'],
+        ['label' => 'With handle', 'handle' => 'aHandle'],
+    ]);
+
+    expect($html)->toContain('menu-item-description')
+        ->and($html)->toContain('A description')
+        ->and($html)->toContain('aHandle');
+});
+
+it('filters out non-showInChips items and preserves attributes', function () {
+    $html = renderChipWithActionItems([
+        ['label' => 'Hidden from chips', 'showInChips' => false],
+        [
+            'label' => 'Custom attrs',
+            'attributes' => ['data' => ['custom' => 'yes']],
+        ],
+    ]);
+
+    expect($html)->not->toContain('Hidden from chips')
+        ->and($html)->toContain('data-custom="yes"');
+});
diff --git a/tests/Unit/Cp/FormFieldsTest.php b/tests/Unit/Cp/FormFieldsTest.php
index f9bb2ba31e3..1616e162949 100644
--- a/tests/Unit/Cp/FormFieldsTest.php
+++ b/tests/Unit/Cp/FormFieldsTest.php
@@ -6,6 +6,7 @@
 use CraftCms\Cms\Address\Elements\Address;
 use CraftCms\Cms\Address\Validation\AddressRules;
 use CraftCms\Cms\Cp\FormFields;
+use CraftCms\Cms\Deprecator\Deprecator;
 use CraftCms\Cms\FieldLayout\FieldLayout;
 use CraftCms\Cms\Support\Facades\Sites;
 use CraftCms\Cms\Twig\Exceptions\TemplateLoaderException;
@@ -28,15 +29,18 @@ public function getFieldLayout(): FieldLayout
         $labelHtml = FormFields::fieldHtml('<input>', ['label' => 'Label', 'id' => 'id']);
         $blankLabelHtml = FormFields::fieldHtml('<input>', ['label' => '__blank__']);
 
-        expect($html)->toContain('<div class="input ltr"><input></div>')
-            ->and($labelHtml)->toContain('<label id="id-label" for="id">Label</label>')
-            ->and($blankLabelHtml)->not->toContain('<label');
+        expect($html)->toContain('<craft-field class="field"')
+            ->and($html)->toContain('orientation="ltr"')
+            ->and($html)->toContain('<input slot="input">')
+            ->and($labelHtml)->toContain('label="Label"')
+            ->and($labelHtml)->toContain('id="id-field"')
+            ->and($blankLabelHtml)->not->toContain('label=');
     });
 
     it('renders markup input', function () {
         $html = FormFields::fieldHtml(new Markup('<input name="title">', 'UTF-8'));
 
-        expect($html)->toContain('<div class="input ltr"><input name="title"></div>');
+        expect($html)->toContain('<input name="title" slot="input">');
     });
 
     it('throws for an invalid site id in multi-site mode', function () {
@@ -53,48 +57,41 @@ public function getFieldLayout(): FieldLayout
     it('supports fieldsets with grouped label semantics', function () {
         $html = FormFields::fieldHtml('<input>', ['fieldset' => true, 'label' => 'Label']);
 
-        expect($html)->toContain('aria-labelledby="')
-            ->and($html)->toContain('role="group"');
+        expect($html)->toContain(' fieldset')
+            ->and($html)->toContain('label="Label"');
     });
 
     it('renders instructions, tip, warning, and errors', function () {
         $withInstructions = FormFields::fieldHtml('<input>', [
-            'instructionsId' => 'inst-id',
             'instructions' => '**Test**',
         ]);
         $withTip = FormFields::fieldHtml('<input>', [
-            'tipId' => 'tip',
             'tip' => '**Test**',
         ]);
         $withWarning = FormFields::fieldHtml('<input>', [
-            'warningId' => 'warning',
             'warning' => '**Test**',
         ]);
         $withErrors = FormFields::fieldHtml('<input>', [
             'errors' => ['Very bad', 'Very, very bad'],
         ]);
 
-        expect($withInstructions)->toContain('id="inst-id"')
+        expect($withInstructions)->toContain('slot="help-text"')
             ->and($withInstructions)->toContain('<p><strong>Test</strong></p>')
-            ->and($withTip)->toContain('<craft-callout')
-            ->and($withTip)->toContain('id="tip"')
-            ->and($withTip)->toContain('variant="info"')
-            ->and($withTip)->toContain('icon="lightbulb"')
+            ->and($withTip)->toContain('slot="tip"')
             ->and($withTip)->toContain('<strong>Test</strong>')
-            ->and($withWarning)->toContain('id="warning"')
-            ->and($withWarning)->toContain('variant="warning"')
-            ->and($withErrors)->toContain('has-errors')
-            ->and((bool) preg_match('/<ul id="[\w\-]+" class="errors">/', $withErrors))->toBeTrue();
+            ->and($withWarning)->toContain('slot="warning"')
+            ->and($withErrors)->toContain(' has-errors')
+            ->and($withErrors)->toContain('slot="feedback"')
+            ->and($withErrors)->toContain('class="error-list"')
+            ->and($withErrors)->toContain('<li>Very bad</li>');
     });
 
     it('renders markup warnings', function () {
         $html = FormFields::fieldHtml('<input>', [
-            'warningId' => 'warning',
             'warning' => new Markup('Config warning', 'UTF-8'),
         ]);
 
-        expect($html)->toContain('id="warning"')
-            ->and($html)->toContain('variant="warning"')
+        expect($html)->toContain('slot="warning"')
             ->and($html)->toContain('Config warning');
     });
 
@@ -104,6 +101,42 @@ public function getFieldLayout(): FieldLayout
     });
 });
 
+describe('config deprecations', function () {
+    it('logs a deprecation for unsupported legacy config keys', function (string $method, array $config, string $needle) {
+        $logged = false;
+
+        $mock = Mockery::mock(Deprecator::class);
+        $mock->shouldReceive('log')
+            ->once()
+            ->withArgs(function (string $key, string $message) use (&$logged, $needle) {
+                $logged = true;
+
+                return str_contains($message, $needle);
+            });
+        app()->scoped(Deprecator::class, fn () => $mock);
+
+        FormFields::$method($config);
+
+        expect($logged)->toBeTrue();
+    })->with([
+        'lightswitch descriptionId' => ['lightswitchFromConfig', ['descriptionId' => 'custom'], 'descriptionId'],
+        'button spinner' => ['buttonFromConfig', ['label' => 'Save', 'spinner' => true], 'spinner'],
+    ]);
+
+    it('logs nothing for faithfully mapped configs', function () {
+        $mock = Mockery::mock(Deprecator::class);
+        $mock->shouldNotReceive('log');
+        app()->scoped(Deprecator::class, fn () => $mock);
+
+        FormFields::lightswitchFromConfig(['id' => 'ls', 'on' => true, 'label' => 'Enabled']);
+        FormFields::buttonFromConfig(['label' => 'Save', 'type' => 'submit', 'busyMessage' => 'Saving…']);
+        FormFields::checkboxFromConfig(['id' => 'cb', 'label' => 'Agree', 'checked' => true]);
+        FormFields::buttonGroupFromConfig(['options' => [['label' => 'A', 'value' => 'a']], 'static' => true]);
+
+        expect(true)->toBeTrue();
+    });
+});
+
 describe('field helper methods', function () {
     it('renders expected markers', function (string $needle, string $method, array $config = []) {
         $html = FormFields::$method($config);
@@ -128,8 +161,8 @@ public function getFieldLayout(): FieldLayout
 
         $html = FormFields::addressFieldsHtml($address);
 
-        expect((bool) preg_match('/id="addressLine1-label".*?<span class="visually-hidden">Required<\/span>.*?<span class="required"/s', $html))->toBeTrue()
-            ->and((bool) preg_match('/id="sortingCode-label".*?<span class="visually-hidden">Required<\/span>/s', $html))->toBeFalse()
+        expect((bool) preg_match('/<craft-field[^>]*data-attribute="addressLine1"[^>]*\brequired\b/', $html))->toBeTrue()
+            ->and((bool) preg_match('/<craft-field[^>]*data-attribute="sortingCode"[^>]*\brequired\b/', $html))->toBeFalse()
             ->and($address->ruleset->getScenario())->toBe($originalScenario);
     });
 });
diff --git a/tests/Unit/Twig/Templates/ButtonTemplateTest.php b/tests/Unit/Twig/Templates/ButtonTemplateTest.php
new file mode 100644
index 00000000000..5a05337c9e4
--- /dev/null
+++ b/tests/Unit/Twig/Templates/ButtonTemplateTest.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders the web component from the legacy button variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/button' with {type: 'submit', label: 'Save', spinner: true, busyMessage: 'Saving…'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)
+        ->toContainTag('craft-button', [
+            'type' => 'submit',
+            'data-busy-message' => 'Saving…',
+        ])
+        ->and($html)->toContain('Save');
+});
+
+it('maps readOnly to a disabled button with the read-only class', function () {
+    $html = renderString(
+        "{% include '_includes/forms/button' with {label: 'Locked', readOnly: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)
+        ->toContainTag('craft-button', ['disabled' => true])
+        ->and($html)->toContain('read-only');
+});
+
+it('renders the web component from the legacy buttonGroup variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/buttonGroup' with {id: 'bg', name: 'align', value: 'left', options: [{label: 'Left', value: 'left'}, {label: 'Right', value: 'right'}]} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    // The group is form-associated: `name`/`value` ride on the host and it
+    // submits the selection itself, so there's no hidden input.
+    expect($html)
+        ->toContainTag('craft-button-group', [
+            'id' => 'bg',
+            'name' => 'align',
+            'value' => 'left',
+            'role' => 'group',
+        ])
+        ->toContainTag('craft-button', [
+            'data-value' => 'left',
+            'type' => 'button',
+            'appearance' => 'outline',
+            'active' => 'true',
+            'aria-pressed' => 'true',
+        ])
+        ->toContainTag('craft-button', [
+            'data-value' => 'right',
+            'type' => 'button',
+            'appearance' => 'outline',
+            'aria-pressed' => 'false',
+        ])
+        ->and($html)->not->toContainTag('input', ['type' => 'hidden']);
+});
diff --git a/tests/Unit/Twig/Templates/CheckboxGroupTemplateTest.php b/tests/Unit/Twig/Templates/CheckboxGroupTemplateTest.php
new file mode 100644
index 00000000000..2e11de1af51
--- /dev/null
+++ b/tests/Unit/Twig/Templates/CheckboxGroupTemplateTest.php
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders checkboxes from the legacy checkboxGroup variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkboxGroup' with {id: 'g', name: 'colors', options: {red: 'Red', blue: 'Blue'}, values: ['blue']} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('<craft-checkbox-group id="g" class="checkbox-group">')
+        ->and($html)->toContain('<input type="hidden" name="colors" value>')
+        ->and($html)->toContain('name="colors[]"')
+        ->and($html)->toContain('>Red</label>')
+        ->and($html)->toContain('>Blue</label>')
+        ->and(substr_count($html, '<craft-checkbox>'))->toBe(2)
+        ->and(substr_count($html, ' checked'))->toBe(1); // input of the checked option
+});
+
+it('renders the add-option button for allowCustomOptions', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkboxGroup' with {id: 'g', name: 'opts', options: [], allowCustomOptions: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('id="g-add-btn"')
+        ->and($html)->toContain('Add option');
+});
+
+it('merges attr-block attributes onto the container', function () {
+    $html = renderString(
+        "{% embed '_includes/forms/checkboxGroup' with {id: 'g', options: []} only %}{% block attr %}data-test=\"1\"{% endblock %}{% endembed %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('data-test="1"');
+});
diff --git a/tests/Unit/Twig/Templates/CheckboxSelectTemplateTest.php b/tests/Unit/Twig/Templates/CheckboxSelectTemplateTest.php
new file mode 100644
index 00000000000..17fe6017f19
--- /dev/null
+++ b/tests/Unit/Twig/Templates/CheckboxSelectTemplateTest.php
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders the fieldset from the legacy checkboxSelect variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkboxSelect' with {id: 's', name: 'sources', options: {a: 'Alpha', b: 'Beta'}, values: ['b']} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('<fieldset')
+        ->and($html)->toContain('id="s"')
+        ->and($html)->toContain('class="cp-checkbox-select"')
+        ->and($html)->toContain('<input type="hidden" name="sources" value>')
+        ->and($html)->toContain('name="sources[]"')
+        ->and($html)->toContain('<div class="cp-checkbox-select__item">')
+        ->and(substr_count($html, '<craft-checkbox'))->toBe(2);
+});
+
+it('renders a checked All option that disables the items', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkboxSelect' with {id: 's', name: 'sources', options: {a: 'Alpha'}, values: '*', showAllOption: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    // The only hidden input is the All checkbox's own always-post input.
+    expect($html)->toContain('<b>All</b>')
+        ->and($html)->toContain('value="*"')
+        ->and(substr_count($html, 'type="hidden"'))->toBe(1)
+        ->and(substr_count($html, ' checked'))->toBeGreaterThanOrEqual(2) // All + item
+        ->and($html)->toContain(' disabled');
+});
+
+it('pre-orders sortable options by the values order and wraps them', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkboxSelect' with {id: 's', name: 'sources', options: {a: 'Alpha', b: 'Beta'}, values: ['b', 'a'], sortable: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('<craft-sortable-checkbox-select>')
+        ->and(strpos($html, 'value="b"'))->toBeLessThan(strpos($html, 'value="a"'));
+});
diff --git a/tests/Unit/Twig/Templates/CheckboxTemplateTest.php b/tests/Unit/Twig/Templates/CheckboxTemplateTest.php
new file mode 100644
index 00000000000..a04d9372413
--- /dev/null
+++ b/tests/Unit/Twig/Templates/CheckboxTemplateTest.php
@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders the web component from the legacy checkbox variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkbox' with {id: 'cb', name: 'agree', label: 'I agree', checked: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContainTag('input', ['type' => 'hidden', 'name' => 'agree', 'value' => ''])
+        ->and($html)->toContain('<craft-checkbox>')
+        ->and($html)->toContain('type="checkbox"')
+        ->and($html)->toContain(' checked')
+        ->and($html)->toContainTag('label', ['slot' => 'label', 'for' => 'cb', 'id' => 'cb-label'])
+        ->and($html)->toContain('I agree');
+});
+
+it('prefers checkboxLabel and suppresses labelledby when aria-label is set', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkbox' with {id: 'cb', label: 'Generic', checkboxLabel: 'Specific', labelledBy: 'external', aria: {label: 'Spoken'}} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('>Specific</label>')
+        ->and($html)->toContain('aria-label="Spoken"')
+        ->and($html)->not->toContain('aria-labelledby');
+});
+
+it('wires field toggles from the legacy variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/checkbox' with {id: 'cb', targetPrefix: 'opt-'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('fieldtoggle')
+        ->and($html)->toContain('data-target-prefix="opt-"');
+});
diff --git a/tests/Unit/Twig/Templates/LightswitchTemplateTest.php b/tests/Unit/Twig/Templates/LightswitchTemplateTest.php
new file mode 100644
index 00000000000..1c8218a743b
--- /dev/null
+++ b/tests/Unit/Twig/Templates/LightswitchTemplateTest.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Deprecator\Deprecator;
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders the web component from the legacy variable API', function () {
+    $mock = Mockery::mock(Deprecator::class);
+    $mock->shouldNotReceive('log');
+    app()->scoped(Deprecator::class, fn () => $mock);
+
+    $html = renderString(
+        "{% include '_includes/forms/lightswitch' with {id: 'ls', name: 'enabled', on: true, label: 'Enabled'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContainTag('craft-switch', ['on-label' => 'Enabled'])
+        ->and($html)->toContain(' checked')
+        ->and($html)->toContainTag('input', ['type' => 'hidden', 'name' => 'enabled', 'value' => '1']);
+});
+
+it('logs a deprecation for the unsupported descriptionId param', function () {
+    $logged = false;
+
+    $mock = Mockery::mock(Deprecator::class);
+    $mock->shouldReceive('log')
+        ->once()
+        ->withArgs(function (string $key, string $message) use (&$logged) {
+            $logged = true;
+
+            return str_contains($message, 'descriptionId');
+        });
+
+    app()->scoped(Deprecator::class, fn () => $mock);
+
+    renderString(
+        "{% include '_includes/forms/lightswitch' with {id: 'ls', descriptionId: 'custom-desc'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($logged)->toBeTrue();
+});
diff --git a/tests/Unit/Twig/Templates/RadioGroupTemplateTest.php b/tests/Unit/Twig/Templates/RadioGroupTemplateTest.php
new file mode 100644
index 00000000000..90251f44aee
--- /dev/null
+++ b/tests/Unit/Twig/Templates/RadioGroupTemplateTest.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders radios from the legacy radioGroup variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/radioGroup' with {id: 'g', name: 'mode', options: {auto: 'Auto', manual: 'Manual'}, value: 'manual'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('<craft-radio-group')
+        ->and($html)->toContain('class="radio-group"')
+        ->and($html)->toContain('id="g"')
+        ->and(substr_count($html, '</craft-radio>'))->toBe(2)
+        ->and(substr_count($html, ' checked'))->toBe(1) // input of the checked option
+        ->and($html)->toContain('value="manual" checked')
+        ->and($html)->not->toContain('type="hidden"');
+});
+
+it('wires the fieldtoggle class and target prefix when toggling', function () {
+    $html = renderString(
+        "{% include '_includes/forms/radioGroup' with {id: 'g', options: {a: 'A'}, toggle: true, targetPrefix: 'opt-'} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('fieldtoggle')
+        ->and($html)->toContain('data-target-prefix="opt-"');
+});
diff --git a/tests/Unit/Twig/Templates/RadioTemplateTest.php b/tests/Unit/Twig/Templates/RadioTemplateTest.php
new file mode 100644
index 00000000000..7fa6eb1d558
--- /dev/null
+++ b/tests/Unit/Twig/Templates/RadioTemplateTest.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\View\TemplateMode;
+
+use function CraftCms\Cms\renderString;
+
+it('renders the web component from the legacy radio variables', function () {
+    $html = renderString(
+        "{% include '_includes/forms/radio' with {id: 'r', name: 'mode', value: 'auto', label: 'Auto', checked: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('<craft-radio>')
+        ->and($html)->toContain('type="radio"')
+        ->and($html)->toContain('value="auto"')
+        ->and($html)->toContain('class="radio"')
+        ->and($html)->toContainTag('label', ['slot' => 'label', 'for' => 'r', 'id' => 'r-label'])
+        ->and($html)->toContain('Auto')
+        ->and($html)->not->toContain('type="hidden"');
+});
+
+it('renders custom-option mode with the Other label and wrapped text input', function () {
+    $html = renderString(
+        "{% include '_includes/forms/radio' with {id: 'r', name: 'mode', custom: true} only %}",
+        templateMode: TemplateMode::Cp,
+    );
+
+    expect($html)->toContain('Other:')
+        ->and($html)->toContain('custom-option-wrapper')
+        ->and($html)->toContain('custom-option-input')
+        ->and($html)->toContain('id="r-text"');
+});
diff --git a/tests/Unit/View/HtmlStackTest.php b/tests/Unit/View/HtmlStackTest.php
index a2b7f8696bd..1057208ed01 100644
--- a/tests/Unit/View/HtmlStackTest.php
+++ b/tests/Unit/View/HtmlStackTest.php
@@ -834,7 +834,10 @@ function assertLatestRegistrationOrder(string $output): void
             ->and($head)->toContain('/test-buffered-bundle.js');
     });
 
-    it('can register the same asset again after rendered assets are cleared', function () {
+    it('does not re-emit a bundle already flushed earlier in the same request', function () {
+        // A bundle should be emitted at most once per request. Multiple render
+        // passes in one request (e.g. ElementIndexResource emits headHtml() for
+        // both actions and the index) must not duplicate a shared bundle.
         $assets = app(InternalAssetRegistry::class);
 
         $assets->register(TestBufferedBundleAsset::class);
@@ -845,7 +848,31 @@ function assertLatestRegistrationOrder(string $output): void
 
         expect($first)
             ->toContain('window.testBufferedDependency = true;')
-            ->and($second)->toContain('window.testBufferedDependency = true;');
+            ->and($second)->not->toContain('window.testBufferedDependency = true;');
+    });
+
+    it('does not double-emit a bundle across a captured fragment and the outer render', function () {
+        // Regression: a bundle queued before capture() (flushed into the outer
+        // render) and re-registered while the fragment renders must land in
+        // exactly one of the fragment or the outer output, never both.
+        $assets = app(InternalAssetRegistry::class);
+
+        // Queued for the page before the fragment is captured.
+        $assets->register(TestBufferedBundleAsset::class);
+
+        $fragment = $this->registry->capture(function () use ($assets): string {
+            // Fields re-register CpAsset (and friends) while their settings render.
+            $assets->register(TestBufferedBundleAsset::class);
+
+            return '<div class="field-settings"></div>';
+        });
+
+        $outerHead = $this->registry->headHtml();
+
+        $inFragment = substr_count((string) $fragment->headHtml, '/test-buffered-bundle.js');
+        $inOuter = substr_count($outerHead, '/test-buffered-bundle.js');
+
+        expect($inFragment + $inOuter)->toBe(1);
     });
 });
 
diff --git a/yii2-adapter/legacy/helpers/Cp.php b/yii2-adapter/legacy/helpers/Cp.php
index d52005591bf..88750c70361 100644
--- a/yii2-adapter/legacy/helpers/Cp.php
+++ b/yii2-adapter/legacy/helpers/Cp.php
@@ -32,14 +32,16 @@
 use CraftCms\Cms\Cp\Icons;
 use CraftCms\Cms\Cp\RequestedSite;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
-
 use CraftCms\Cms\FieldLayout\FieldLayout;
 use CraftCms\Cms\FieldLayout\FieldLayoutElement;
 use CraftCms\Cms\Site\Data\Site;
+use CraftCms\Cms\Support\Facades\Deprecator;
 use CraftCms\Cms\Support\Html;
+use CraftCms\Cms\Twig\Exceptions\TemplateLoaderException;
 use CraftCms\Cms\View\TemplateMode;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Event;
+
 use function CraftCms\Cms\template;
 
 /**
@@ -106,11 +108,8 @@ class Cp
     /**
      * Renders a control panel template.
      *
-     * @param string $template
-     * @param array $variables
      *
-     * @return string
-     * @throws \CraftCms\Cms\Twig\Exceptions\TemplateLoaderException if `$template` is an invalid template path
+     * @throws TemplateLoaderException if `$template` is an invalid template path
      */
     public static function renderTemplate(string $template, array $variables = []): string
     {
@@ -180,8 +179,8 @@ public static function reset(): void
     /**
      * Renders a component's chip HTML.
      *
-     * @param Chippable $component The component that the chip represents
-     * @param array $config Chip configuration
+     * @param  Chippable  $component  The component that the chip represents
+     * @param  array  $config  Chip configuration
      *
      * @since 5.0.0
      */
@@ -308,7 +307,7 @@ public static function elementHtml(
     /**
      * Returns element preview HTML, for a list of elements.
      *
-     * @param ElementInterface[] $elements The elements
+     * @param  ElementInterface[]  $elements  The elements
      *
      * @since 3.6.3
      */
@@ -333,7 +332,7 @@ public static function elementPreviewHtml(
     /**
      * Returns component preview HTML, for a list of components.
      *
-     * @param Chippable[] $components The components
+     * @param  Chippable[]  $components  The components
      *
      * @since 5.4.0
      */
@@ -345,7 +344,7 @@ public static function componentPreviewHtml(array $components, array $chipConfig
     /**
      * Returns the HTML for an element index.
      *
-     * @param class-string<ElementInterface> $elementType
+     * @param  class-string<ElementInterface>  $elementType
      *
      * @since 5.0.0
      */
@@ -357,7 +356,7 @@ public static function elementIndexHtml(string $elementType, array $config = [])
     /**
      * Returns a metadata component's HTML.
      *
-     * @param array $data The data, with keys representing the labels.
+     * @param  array  $data  The data, with keys representing the labels.
      */
     public static function metadataHtml(array $data): string
     {
@@ -367,7 +366,7 @@ public static function metadataHtml(array $data): string
     /**
      * Returns a disclosure menu's HTML.
      *
-     * @param array $items The menu items.
+     * @param  array  $items  The menu items.
      *
      * @since 5.0.0
      */
@@ -389,7 +388,6 @@ public static function menuItem(array $config, string $menuId): string
     /**
      * Normalizes menu items.
      *
-     * @return array
      *
      * @since 5.0.0
      */
@@ -401,7 +399,7 @@ public static function normalizeMenuItems(array|Collection $items): array
     /**
      * Returns a menu item array for the given sites.
      *
-     * @param array<int,Site|array{site:Site,status?:string}> $sites
+     * @param  array<int,Site|array{site:Site,status?:string}>  $sites
      *
      * @since 5.0.0
      */
@@ -437,17 +435,17 @@ public static function parseMarkdown(string $text, string $flavor = 'gfm-comment
     /**
      * Renders a field's HTML, for the given input HTML or a template.
      *
-     * @param string|callable $input The input HTML or template path.
-     * @param array $config
+     * @param  string|callable  $input  The input HTML or template path.
      *
-     * @return string
-     * @throws \CraftCms\Cms\Twig\Exceptions\TemplateLoaderException
+     * @throws TemplateLoaderException
      * @throws \InvalidArgumentException
      *
      * @since 3.5.8
      */
     public static function fieldHtml(string|callable $input, array $config = []): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::fieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\Field` component instead.');
+
         return FormFields::fieldHtml(input: $input, config: $config);
     }
 
@@ -456,7 +454,9 @@ public static function fieldHtml(string|callable $input, array $config = []): st
      */
     public static function buttonHtml(array $config): string
     {
-        return FormFields::buttonHtml(config: $config);
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::buttonHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\Button` component instead.');
+
+        return FormFields::buttonFromConfig(config: $config)->toHtml();
     }
 
     /**
@@ -464,7 +464,9 @@ public static function buttonHtml(array $config): string
      */
     public static function buttonGroupHtml(array $config): string
     {
-        return FormFields::buttonGroupHtml(config: $config);
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::buttonGroupHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\ButtonGroup` component instead.');
+
+        return FormFields::buttonGroupFromConfig(config: $config)->toHtml();
     }
 
     /**
@@ -472,6 +474,8 @@ public static function buttonGroupHtml(array $config): string
      */
     public static function buttonGroupFieldHtml(array $config): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::buttonGroupFieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\ButtonGroup` component instead.');
+
         return FormFields::buttonGroupFieldHtml(config: $config);
     }
 
@@ -480,6 +484,8 @@ public static function buttonGroupFieldHtml(array $config): string
      */
     public static function checkboxFieldHtml(array $config): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::checkboxFieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\Checkbox` component instead.');
+
         return FormFields::checkboxFieldHtml(config: $config);
     }
 
@@ -488,6 +494,8 @@ public static function checkboxFieldHtml(array $config): string
      */
     public static function checkboxSelectFieldHtml(array $config): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::checkboxSelectFieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\CheckboxSelect` component instead.');
+
         return FormFields::checkboxSelectFieldHtml(config: $config);
     }
 
@@ -496,7 +504,9 @@ public static function checkboxSelectFieldHtml(array $config): string
      */
     public static function checkboxGroupHtml(array $config): string
     {
-        return FormFields::checkboxGroupHtml(config: $config);
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::checkboxGroupHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\CheckboxGroup` component instead.');
+
+        return FormFields::checkboxGroupFromConfig(config: $config)->toHtml();
     }
 
     /**
@@ -504,6 +514,8 @@ public static function checkboxGroupHtml(array $config): string
      */
     public static function checkboxGroupFieldHtml(array $config): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::checkboxGroupFieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\CheckboxGroup` component instead.');
+
         return FormFields::checkboxGroupFieldHtml(config: $config);
     }
 
@@ -568,7 +580,9 @@ public static function editableTableFieldHtml(array $config): string
      */
     public static function lightswitchHtml(array $config): string
     {
-        return FormFields::lightswitchHtml(config: $config);
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::lightswitchHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\Lightswitch` component instead.');
+
+        return FormFields::lightswitchFromConfig(config: $config)->toHtml();
     }
 
     /**
@@ -576,6 +590,8 @@ public static function lightswitchHtml(array $config): string
      */
     public static function lightswitchFieldHtml(array $config): string
     {
+        Deprecator::log(__METHOD__, '`craft\helpers\Cp::lightswitchFieldHtml()` has been deprecated. Use the `CraftCms\Cms\Cp\Components\Lightswitch` component instead.');
+
         return FormFields::lightswitchFieldHtml(config: $config);
     }
 
diff --git a/yii2-adapter/tests/unit/helpers/CpHelperTest.php b/yii2-adapter/tests/unit/helpers/CpHelperTest.php
index 64c3bc282ed..33a47297557 100644
--- a/yii2-adapter/tests/unit/helpers/CpHelperTest.php
+++ b/yii2-adapter/tests/unit/helpers/CpHelperTest.php
@@ -122,37 +122,38 @@ public function test_element_html(): void
 
     public function test_field_html(): void
     {
-        self::assertStringContainsString('<div class="input ltr"><input></div>', Cp::fieldHtml('<input>'));
-        self::assertStringContainsString('<label id="id-label" for="id">Label</label>', Cp::fieldHtml('<input>', ['label' => 'Label', 'id' => 'id']));
-        self::assertStringNotContainsString('<label', Cp::fieldHtml('<input>', ['label' => '__blank__']));
+        self::assertStringContainsString('<input slot="input"></craft-field>', Cp::fieldHtml('<input>'));
+        $withLabel = Cp::fieldHtml('<input>', ['label' => 'Label', 'id' => 'id']);
+        self::assertStringContainsString('id="id-field"', $withLabel);
+        self::assertStringContainsString('label="Label"', $withLabel);
+        self::assertStringNotContainsString('label="', Cp::fieldHtml('<input>', ['label' => '__blank__']));
         // invalid site ID
         $this->tester->expectThrowable(InvalidArgumentException::class, function() {
             Cp::fieldHtml('<input>', ['siteId' => -1]);
         });
-        // fieldset + legend
+        // fieldset
         $fieldset = Cp::fieldHtml('<input>', ['fieldset' => 'true', 'label' => 'Label']);
-        self::assertStringContainsString('aria-labelledby="', $fieldset);
-        self::assertStringContainsString('role="group"', $fieldset);
+        self::assertMatchesRegularExpression('/<craft-field [^>]*\bfieldset\b/', $fieldset);
+        self::assertStringContainsString('label="Label"', $fieldset);
         // translatable
-        self::assertStringContainsString('class="t9n-indicator prevent-autofocus"', Cp::fieldHtml('<input>', ['label' => 'Label', 'translatable' => true]));
+        self::assertMatchesRegularExpression('/<craft-field [^>]*\btranslatable\b/', Cp::fieldHtml('<input>', ['label' => 'Label', 'translatable' => true]));
         // instructions
-        $withInstructions = Cp::fieldHtml('<input>', ['instructionsId' => 'inst-id', 'instructions' => '**Test**']);
-        self::assertStringContainsString('id="inst-id"', $withInstructions);
+        $withInstructions = Cp::fieldHtml('<input>', ['instructions' => '**Test**']);
+        self::assertStringContainsString('<div slot="help-text">', $withInstructions);
         self::assertStringContainsString('<p><strong>Test</strong></p>', $withInstructions);
         // tip
-        self::assertMatchesRegularExpression('/<craft-callout\s+id="tip"\s+variant="info"[^>]*>.*<strong>Test<\/strong>.*<\/craft-callout>/s', Cp::fieldHtml('<input>', [
-            'tipId' => 'tip',
+        self::assertStringContainsString('<span slot="tip"><strong>Test</strong></span>', Cp::fieldHtml('<input>', [
             'tip' => '**Test**',
         ]));
         // warning
-        self::assertMatchesRegularExpression('/<craft-callout\s+id="warning"\s+variant="warning"[^>]*>.*<strong>Test<\/strong>.*<\/craft-callout>/s', Cp::fieldHtml('<input>', [
-            'warningId' => 'warning',
+        self::assertStringContainsString('<span slot="warning"><strong>Test</strong></span>', Cp::fieldHtml('<input>', [
             'warning' => '**Test**',
         ]));
         // errors
         $withErrors = Cp::fieldHtml('<input>', ['errors' => ['Very bad', 'Very, very bad']]);
         self::assertStringContainsString('has-errors', $withErrors);
-        self::assertRegExp('/<ul id="[\w\-]+" class="errors">/', $withErrors);
+        self::assertMatchesRegularExpression('/<ul [^>]*class="error-list"/', $withErrors);
+        self::assertStringContainsString('<li>Very bad</li>', $withErrors);
         // invalid template path
         $this->tester->expectThrowable(TemplateLoaderException::class, function() {
             Cp::fieldHtml('template:invalid/template.twig', []);
diff --git a/yii2-adapter/tests/unit/web/twig/FieldTest.php b/yii2-adapter/tests/unit/web/twig/FieldTest.php
index 1f97728805c..0669f42bb9c 100644
--- a/yii2-adapter/tests/unit/web/twig/FieldTest.php
+++ b/yii2-adapter/tests/unit/web/twig/FieldTest.php
@@ -1,6 +1,8 @@
 <?php
+
 /**
  * @link https://craftcms.com/
+ *
  * @copyright Copyright (c) Pixel & Tonic, Inc.
  * @license https://craftcms.github.io/license/
  */
@@ -12,6 +14,7 @@
 use craft\test\TestCase;
 use craft\web\View;
 use CraftCms\Cms\View\TemplateMode;
+
 use function CraftCms\Cms\renderString;
 
 /**
@@ -19,21 +22,16 @@
  *
  * @author Pixel & Tonic, Inc. <support@pixelandtonic.com>
  * @author Global Network Group | Giel Tettelaar <giel@yellowflash.net>
+ *
  * @since 3.7.24
  */
 class FieldTest extends TestCase
 {
-    /**
-     * @var View
-     */
     protected View $view;
 
-    /**
-     *
-     */
-    public function testBlocks(): void
+    public function test_blocks(): void
     {
-        $template = <<<TWIG
+        $template = <<<'TWIG'
 {% embed '_includes/forms/field' with {
   id: 'foo',
   labelId: 'label',
@@ -49,17 +47,16 @@ public function testBlocks(): void
 TWIG;
 
         $html = renderString($template, [], TemplateMode::Cp);
-        self::assertStringContainsString('<div class="field" id="foo-field" data-attribute="foo" data-foo="test">', $html);
-        self::assertStringContainsString('TEST HEADING', $html);
-        self::assertStringContainsString('<label id="label" for="foo">TEST LABEL</label>', $html);
-        self::assertStringContainsString('<div id="foo-instructions" class="instructions"><p>TEST INSTRUCTIONS</p>', $html);
-        self::assertMatchesRegularExpression('/<craft-callout\s+id="foo-tip"\s+variant="info"[^>]*>.*TEST TIP.*<\/craft-callout>/s', $html);
-        self::assertMatchesRegularExpression('/<craft-callout\s+id="foo-warning"\s+variant="warning"[^>]*>.*TEST WARNING.*<\/craft-callout>/s', $html);
-        self::assertStringContainsString('<input name="foo">', $html);
+        self::assertStringContainsString('<craft-field class="field" data-attribute="foo" data-foo="test" id="foo-field" label="TEST LABEL" orientation="ltr">', $html);
+        self::assertStringContainsString('<span slot="heading-prefix">TEST HEADING</span>', $html);
+        self::assertStringContainsString('<div slot="help-text"><p>TEST INSTRUCTIONS</p>', $html);
+        self::assertStringContainsString('<span slot="tip">TEST TIP</span>', $html);
+        self::assertStringContainsString('<span slot="warning">TEST WARNING</span>', $html);
+        self::assertStringContainsString('<input name="foo" slot="input">', $html);
     }
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     protected function _before(): void
     {