diff --git a/packages/craftcms-ui/scripts/generate-vue-wrappers.js b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
index afb4a4417a8..c970c621725 100644
--- a/packages/craftcms-ui/scripts/generate-vue-wrappers.js
+++ b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
@@ -175,7 +175,8 @@ const VALUE_COMPONENTS = [
     tagName: 'craft-input-file',
     className: 'CraftInputFile',
     fileName: 'CraftInputFile',
-    modelType: "import('../components/input-file/input-file.ts.mjs').default['modelValue']",
+    modelType:
+      "import('../components/input-file/input-file.ts.mjs').default['modelValue']",
     importPath: '../components/input-file/input-file',
     slots: [
       'label',
@@ -654,6 +655,9 @@ function generateComboboxWrapper(component) {
   });
 
   const model = defineModel<${component.modelType}>();
+  const emit = defineEmits<{
+    'model-value-changed': [event: CustomEvent, cancelModelUpdate: () => void];
+  }>();
 
   withDefaults(
     defineProps<{
@@ -675,12 +679,20 @@ function generateComboboxWrapper(component) {
     }
   );
 
-  function onModelValueChanged(event: Event) {
+  function onModelValueChanged(event: CustomEvent) {
+    // Lion's event is not cancelable; let consumers reject a transient selection
+    // before the Vue model is updated.
+    let canceled = false;
+    emit('model-value-changed', event, () => (canceled = true));
+    if (canceled) {
+      return;
+    }
+
     // Lion fires an initial model-value-changed with detail.initialize=true and
     // its default (empty) value while the element boots — before Vue's
     // .modelValue binding has settled. Honoring that flag (as Lion's own
     // form-group repropagation does) prevents it from clobbering a bound value.
-    if ((event as CustomEvent).detail?.initialize) {
+    if (event.detail?.initialize) {
       return;
     }
     model.value = (event.target as ${component.className})?.modelValue ?? undefined;
@@ -723,6 +735,10 @@ function generateValueDeclaration(component) {
     component.tagName === 'craft-input'
       ? `  textExpanderTriggers?: import('../components/text-expander/text-expander').TextExpanderTriggers;\n`
       : '';
+  const comboboxEvent =
+    component.tagName === 'craft-combobox'
+      ? `  'onModel-value-changed'?: (event: CustomEvent, cancelModelUpdate: () => void) => void;\n`
+      : '';
 
   return `/**
  * Auto-generated type declaration for ${component.fileName}.vue
@@ -734,6 +750,7 @@ declare const _default: DefineComponent<{
 ${textExpanderProp}
   modelValue?: ${component.modelType};
   'onUpdate:modelValue'?: (val: ${component.modelType}) => void;
+${comboboxEvent}
 }>;
 export default _default;
 `;
diff --git a/packages/craftcms-ui/src/components/callout/callout.styles.ts b/packages/craftcms-ui/src/components/callout/callout.styles.ts
index 6789b5961e7..5f5b3e2f352 100644
--- a/packages/craftcms-ui/src/components/callout/callout.styles.ts
+++ b/packages/craftcms-ui/src/components/callout/callout.styles.ts
@@ -7,12 +7,6 @@ export default css`
 
   .callout {
     --_radius: var(--c-callout-radius, var(--c-radius-md));
-    /*
-      The two padding axes are declared separately because the callout's
-      default is asymmetric — a tight block edge, a roomier inline one. The
-      \`padding\` attribute writes both of these on this element when it's set,
-      so these fallbacks are what a callout with no \`padding\` renders with.
-    */
     --_callout-padding-block: var(
       --c-callout-padding-block,
       var(--c-spacing-sm)
@@ -28,6 +22,8 @@ export default css`
     align-items: start;
     padding: var(--_callout-padding-block) var(--_callout-padding-inline);
     border: 1px solid transparent;
+    /* The display: contents host cannot take a grid span, so its rendered box does. */
+    grid-column: 1 / -1;
   }
 
   .callout--hide-icon {
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 6f761915719..074fd26728f 100644
--- a/packages/craftcms-ui/src/components/select-color/select-color.ts
+++ b/packages/craftcms-ui/src/components/select-color/select-color.ts
@@ -1,6 +1,7 @@
 import {html, LitElement} from 'lit';
 import {property} from 'lit/decorators.js';
-import {colors} from '@src/constants/colors';
+import type {Validator} from '@lion/ui/form-core.js';
+import {colors as paletteColors} from '@src/constants/colors';
 import {t} from '@src/utilities/translate';
 import styles from './select-color.styles.js';
 import '../select-rich/select-rich.js';
@@ -15,7 +16,8 @@ function titleCase(value: string): string {
 
 /**
  * @summary A color picker built on top of the rich select. Renders one option
- * per color from `constants/colors`, with an optional "transparent" option.
+ * per color from `constants/colors` (or {@link CraftSelectColor.colors}, when
+ * narrowed), with an optional "transparent" option.
  *
  * @since 1.0
  */
@@ -41,11 +43,36 @@ export default class CraftSelectColor extends LitElement {
   modelValue: string | null = null;
 
   /**
-   * When enabled, a "Transparent" option is prepended to the list of colors.
+   * When enabled, a blank option (labelled {@link blankLabel}) is prepended
+   * to the list of colors.
    */
   @property({type: Boolean, reflect: true, attribute: 'allow-transparent'})
   allowTransparent = false;
 
+  /**
+   * Label for the blank option (default "Transparent").
+   */
+  @property({attribute: 'blank-label'})
+  blankLabel: string | null = null;
+
+  /**
+   * Offered colors, in order. Defaults to the shared palette.
+   */
+  @property({type: Array})
+  colors: string[] = [...paletteColors];
+
+  @property({type: Boolean, reflect: true})
+  disabled = false;
+
+  @property({type: Boolean, reflect: true, attribute: 'readonly'})
+  readOnly = false;
+
+  @property({type: Boolean, reflect: true})
+  required = false;
+
+  @property({attribute: false})
+  validators: Validator[] = [];
+
   /**
    * Renders a color swatch for the given color value. The special `__blank__`
    * value (the "Transparent" option) reuses the checkerboard treatment so it
@@ -66,8 +93,6 @@ export default class CraftSelectColor extends LitElement {
       'border-radius:var(--c-radius-full);' +
       'box-shadow:inset 0 0 0 1px rgb(0 0 0 / 15%);';
 
-    // Reuses the checkerboard treatment from input-color so the transparent
-    // option reads as "no color".
     const transparent =
       'background:' +
       'linear-gradient(45deg, var(--c-color-neutral-fill-quiet) 25%, transparent 25%),' +
@@ -118,14 +143,11 @@ export default class CraftSelectColor extends LitElement {
    * read the up-to-date `this.modelValue` off `event.target`.
    */
   protected _handleModelValueChanged(event: Event) {
-    // Don't let the inner (non-composed) event escape; we re-dispatch our own.
     event.stopPropagation();
 
     const inner = event.target as {modelValue?: string | null} | null;
     this.modelValue = inner?.modelValue ?? null;
 
-    // Re-dispatch from the host so it crosses the shadow boundary (composed)
-    // and Vue's `@model-value-changed` listener fires with the host as target.
     this.dispatchEvent(
       new CustomEvent('model-value-changed', {bubbles: true, composed: true})
     );
@@ -137,12 +159,16 @@ export default class CraftSelectColor extends LitElement {
         label=${this.label}
         name=${this.name}
         .modelValue=${this.modelValue}
+        .disabled=${this.disabled}
+        .readOnly=${this.readOnly}
+        .required=${this.required}
+        .validators=${this.validators}
         @model-value-changed=${this._handleModelValueChanged}
       >
         ${this.allowTransparent
-          ? this._optionTemplate('__blank__', t('Transparent'))
+          ? this._optionTemplate('__blank__', this.blankLabel ?? t('Transparent'))
           : ''}
-        ${colors.map((color) =>
+        ${this.colors.map((color) =>
           this._optionTemplate(color, t(titleCase(color)))
         )}
       </craft-select-rich>
diff --git a/resources/js/bootstrap/cp.ts b/resources/js/bootstrap/cp.ts
index 19f451146c9..4711d705cef 100644
--- a/resources/js/bootstrap/cp.ts
+++ b/resources/js/bootstrap/cp.ts
@@ -71,6 +71,11 @@ const Cp = {
     return cpComponentRegistry;
   },
 
+  // Plugin bundles must use the mounted app's router, not their own module copy.
+  get $router() {
+    return router;
+  },
+
   get $elementDetailsTabs() {
     return elementDetailsTabRegistry;
   },
diff --git a/resources/js/common/components/ActionList.vue b/resources/js/common/components/ActionList.vue
index be2b4317bb2..e2746bad9c6 100644
--- a/resources/js/common/components/ActionList.vue
+++ b/resources/js/common/components/ActionList.vue
@@ -39,6 +39,8 @@
     href?: string;
     external?: boolean;
     label?: string;
+    /** A colored status dot before the label — `craft-indicator`'s own `fill` values. */
+    fill?: string;
     onClick?: (event: Event) => void;
     /**
      * Everything optional, with the unset keys left out entirely. Binding an
@@ -165,6 +167,7 @@
       {
         kind: 'button',
         label: action.label,
+        fill: action.fill,
         onClick: action.onClick,
         attrs: defined({
           ...attrs,
@@ -469,6 +472,7 @@
       :is="as"
       @click="action.onClick"
     >
+      <craft-indicator v-if="action.fill" :fill="action.fill"></craft-indicator>
       {{ action.label }}
     </component>
   </template>
diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index a3d976c7423..c91b9bbfd6e 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -3,6 +3,7 @@ import type {QueueService} from '@/modules/queue/queue';
 import type {CpComponentRegistry} from '@/bootstrap/components';
 import type {ElementDetailsTabRegistry} from '@/bootstrap/element-details-tabs';
 import type {InertiaPageRegistry} from '@/bootstrap/inertia-pages';
+import type {Router} from '@inertiajs/core';
 import type {AxiosRequestConfig, AxiosResponse} from 'axios';
 
 type LegacySettingValue =
@@ -90,6 +91,7 @@ interface CpStatic extends CpServices {
   $components: CpComponentRegistry;
   $elementDetailsTabs: ElementDetailsTabRegistry;
   $inertia: InertiaPageRegistry;
+  $router: Router;
 }
 
 interface CpNotificationSettings {
diff --git a/resources/js/common/types/index.ts b/resources/js/common/types/index.ts
index 0a83935e51d..63900d8e892 100644
--- a/resources/js/common/types/index.ts
+++ b/resources/js/common/types/index.ts
@@ -1,5 +1,6 @@
 import type {ActionFeedback, BaseAction, VariantKey} from '@craftcms/ui';
 import type {ComboboxOptionData} from '@craftcms/ui/components/combobox/combobox';
+import type {UrlMethodPair} from '@inertiajs/core';
 import type {Component} from 'vue';
 import type {FormValues} from '@/modules/forms/types';
 
@@ -128,6 +129,8 @@ export interface ActionItemButton {
   feedback?: ActionFeedback;
   keywords?: string;
   iconColor?: string;
+  /** A colored status dot before the label — `craft-indicator`'s own `fill` values. */
+  fill?: string;
   /**
    * Items that hang off this one — the nav's own children.
    *
@@ -210,10 +213,21 @@ export type ActionItem =
 
 export type ActionItems = Array<ActionItem>;
 
+/** A server-described action that resubmits the current form values. */
+export interface FormAltAction {
+  label: string;
+  destructive?: boolean;
+  action?: string;
+  params?: FormValues;
+  confirm?: string;
+}
+
 export interface FormSaveOptions {
   redirect?: boolean;
   data?: FormValues;
   preserveState?: boolean;
+  /** Overrides the screen's default submit destination. */
+  action?: UrlMethodPair;
 }
 
 export interface EntryType {
@@ -280,6 +294,7 @@ export type EditableTableCellType =
   | 'autosuggest'
   | 'template'
   | 'number'
+  | 'money'
   | 'singleline'
   | 'multiline'
   | 'heading'
diff --git a/resources/js/modules/admin-table/components/AdminTable.vue b/resources/js/modules/admin-table/components/AdminTable.vue
index 009584e3640..089320748d1 100644
--- a/resources/js/modules/admin-table/components/AdminTable.vue
+++ b/resources/js/modules/admin-table/components/AdminTable.vue
@@ -4,7 +4,7 @@
   import BaseElementIndex from '@/modules/elements/components/BaseElementIndex.vue';
   import DataTable from '@/modules/elements/components/DataTable.vue';
   import {TableSpacing, type TableSpacingValue} from '@/common/types';
-  import type {BulkActionItem} from '@/modules/elements/types/actions';
+  import type {BulkAction} from '@/modules/elements/types/actions';
 
   const props = withDefaults(
     defineProps<{
@@ -21,7 +21,10 @@
       total?: number;
       enableAdjustPageSize?: boolean;
       pageSizeOptions?: Array<number>;
-      actions?: Array<BulkActionItem> | null;
+      actions?: Array<BulkAction> | null;
+      /** A caller with its own bulk-action shape supplies this directly; see `BaseElementIndex`. */
+      statuses?: Array<BulkAction> | null;
+      idsField?: string;
       elementType?: string;
       source?: string | null;
       context?: string;
@@ -56,6 +59,8 @@
     enableAdjustPageSize: props.enableAdjustPageSize,
     pageSizeOptions: props.pageSizeOptions,
     actions: props.actions,
+    statuses: props.statuses,
+    idsField: props.idsField,
     elementType: props.elementType,
     source: props.source,
     context: props.context,
diff --git a/resources/js/modules/admin-table/components/MoveToPageButton.vue b/resources/js/modules/admin-table/components/MoveToPageButton.vue
new file mode 100644
index 00000000000..7c34d732844
--- /dev/null
+++ b/resources/js/modules/admin-table/components/MoveToPageButton.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui/utilities/translate';
+  import {computed, ref} from 'vue';
+  import Select from '@/common/form/Select.vue';
+
+  const props = defineProps<{
+    currentPage: number;
+    lastPage: number;
+    loading?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'move', page: number): void;
+  }>();
+
+  interface PopoverElement extends HTMLElement {
+    hide(): Promise<void>;
+  }
+
+  const popover = ref<PopoverElement>();
+  const targetPageRaw = ref<string | number>(props.currentPage);
+
+  // Native select values are strings, but the page number is numeric.
+  const targetPage = computed(() => parseInt(String(targetPageRaw.value), 10));
+
+  const pages = Array.from({length: props.lastPage}, (_, i) => i + 1);
+
+  function handleMove(): void {
+    if (targetPage.value === props.currentPage) {
+      return;
+    }
+
+    emit('move', targetPage.value);
+    popover.value?.hide();
+  }
+
+  function onOpenedChanged(event: CustomEvent<boolean>): void {
+    if (event.detail) {
+      targetPageRaw.value = props.currentPage;
+    }
+  }
+</script>
+
+<template>
+  <craft-popover
+    ref="popover"
+    placement="bottom-end"
+    @opened-changed="onOpenedChanged"
+  >
+    <!-- The popover relocates its invoker; v-once prevents Vue patching the moved DOM. -->
+    <craft-button type="button" slot="invoker" size="small" v-once>{{
+      t('Move to page…')
+    }}</craft-button>
+
+    <div slot="content-body" class="flex flex-nowrap items-end gap-2">
+      <Select
+        :label="t('Choose a page')"
+        v-model="targetPageRaw"
+        :options="pages.map((p) => ({label: String(p), value: String(p)}))"
+      />
+      <craft-button
+        type="button"
+        variant="primary"
+        size="small"
+        :loading="loading"
+        @click="handleMove"
+        >{{ t('Move') }}</craft-button
+      >
+    </div>
+  </craft-popover>
+</template>
diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index 6ab63b770eb..6c9f7a337b5 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -1,12 +1,15 @@
 import {Base} from '@craftcms/garnish';
 import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
 import type CraftTextExpander from '@craftcms/ui/components/text-expander/text-expander';
 import '@craftcms/ui/components/text-expander/text-expander';
+import CraftInputMoney from '@craftcms/ui/components/input-money/input-money';
 import {editableTableData, editableTableRowData} from './support';
 import type {
   EditableTableColumn,
   EditableTableColumns,
   EditableTableOption,
+  EditableTableOptionGroup,
   EditableTableOptions,
   EditableTableRow,
   EditableTableValue,
@@ -24,6 +27,12 @@ declare const $: any;
 
 const noop = (): void => {};
 
+function isOptionGroup(
+  option: EditableTableOption | EditableTableOptionGroup
+): option is EditableTableOptionGroup {
+  return Array.isArray((option as EditableTableOptionGroup).options);
+}
+
 function defaultOptionValue(
   options: EditableTableOptions | EditableTableOption[] | undefined
 ): EditableTableValue | null {
@@ -579,8 +588,11 @@ export class EditableTable extends Base<EditableTableSettings> {
   ): any {
     void staticRows;
 
+    // Keep hidden rows' inputs mounted so they retain and submit their values.
+    // Some hosts override the UA [hidden] rule, so the class is also needed.
     const $tr = $('<tr/>', {
       'data-id': rowId,
+      ...(values._hidden ? {hidden: true, class: 'hidden'} : {}),
     });
 
     for (const colId in columns) {
@@ -681,6 +693,45 @@ export class EditableTable extends Base<EditableTableSettings> {
               .appendTo($cell);
             break;
 
+          case 'money': {
+            // New rows may start with an empty string rather than {value, locale}.
+            const moneyValue =
+              value instanceof Object && !Array.isArray(value)
+                ? ((value as Record<string, unknown>).value ?? null)
+                : (value ?? null);
+            const moneyLocale =
+              (value instanceof Object && !Array.isArray(value)
+                ? (value as Record<string, unknown>).locale
+                : undefined) ??
+              col.locale ??
+              'en-US';
+            const money = document.createElement(
+              'craft-input-money'
+            ) as CraftInputMoney;
+            money.name = `${name}[value]`;
+            money.modelValue = moneyValue === null ? '' : String(moneyValue);
+            money.currency = col.currency ?? 'USD';
+            money.locale = String(moneyLocale);
+            if (col.decimals !== undefined) money.decimals = col.decimals;
+            if (col.decimalSeparator !== undefined) {
+              money.decimalSeparator = col.decimalSeparator;
+            }
+            if (col.groupSeparator !== undefined) {
+              money.groupSeparator = col.groupSeparator;
+            }
+            if (col.showCurrency !== undefined) {
+              money.showCurrency = col.showCurrency;
+            }
+            if (col.clearable !== undefined) money.clearable = col.clearable;
+            $cell.append(money);
+            $('<input/>', {
+              type: 'hidden',
+              name: `${name}[locale]`,
+              value: String(moneyLocale),
+            }).appendTo($cell);
+            break;
+          }
+
           case 'time':
             Craft.ui
               .createTimeInput({
@@ -724,10 +775,24 @@ export class EditableTable extends Base<EditableTableSettings> {
             combobox.name = name;
             combobox.label = col.heading ?? colId;
             combobox.options = Array.isArray(col.options)
-              ? col.options.map((option) => ({
-                  label: option.label ?? String(option.value ?? ''),
-                  value: String(option.value ?? ''),
-                }))
+              ? col.options.map(
+                  (option): ComboboxItem =>
+                    isOptionGroup(option)
+                      ? {
+                          type: 'optgroup',
+                          label: option.label ?? '',
+                          options: option.options.map((groupedOption) => ({
+                            label:
+                              groupedOption.label ??
+                              String(groupedOption.value ?? ''),
+                            value: String(groupedOption.value ?? ''),
+                          })),
+                        }
+                      : {
+                          label: option.label ?? String(option.value ?? ''),
+                          value: String(option.value ?? ''),
+                        }
+                )
               : [];
             combobox.modelValue = String(value ?? '');
             combobox.showAllOnEmpty = true;
diff --git a/resources/js/modules/editable-table/types.ts b/resources/js/modules/editable-table/types.ts
index 90d0543669c..76a44984f73 100644
--- a/resources/js/modules/editable-table/types.ts
+++ b/resources/js/modules/editable-table/types.ts
@@ -16,7 +16,10 @@ export interface EditableTableColumn {
   rows?: number;
   code?: boolean;
   value?: string | number;
-  options?: EditableTableOptions | EditableTableOption[];
+  options?:
+    | EditableTableOptions
+    | EditableTableOption[]
+    | EditableTableOptionGroup[];
   textExpanderTriggers?: TextExpanderTriggers;
   /** Checkbox: only one in the column may be checked at a time. */
   radioMode?: boolean;
@@ -24,8 +27,20 @@ export interface EditableTableColumn {
   toggle?: string[];
   /** Auto-populate this column's value (a handle) from another column. */
   autopopulate?: string;
-  /** Number column: locale used for formatting/parsing. */
+  /** Number/money column: locale used for formatting/parsing. */
   locale?: string;
+  /** Money column: ISO currency code (e.g. `USD`). Defaults to `USD`. */
+  currency?: string;
+  /** Money column: fraction digits to allow. Defaults to the currency's own. */
+  decimals?: number;
+  /** Money column: overrides the locale's own decimal separator. */
+  decimalSeparator?: string;
+  /** Money column: overrides the locale's own thousands separator. */
+  groupSeparator?: string;
+  /** Money column: shows the currency code/symbol prefix. Defaults to `true`. */
+  showCurrency?: boolean;
+  /** Money column: shows a clear button once there's a value. Defaults to `true`. */
+  clearable?: boolean;
   [key: string]: EditableTableColumnValue;
 }
 
@@ -37,6 +52,7 @@ export type EditableTableValue =
   | EditableTableValue[]
   | EditableTableRow;
 
+/** `_hidden` hides a row without removing its inputs or submitted values. */
 export interface EditableTableRow {
   [key: string]: EditableTableValue;
 }
@@ -51,6 +67,12 @@ export interface EditableTableOptions {
   [key: string]: EditableTableOption;
 }
 
+export interface EditableTableOptionGroup {
+  label?: string;
+  type?: 'optgroup';
+  options: EditableTableOption[];
+}
+
 type EditableTableColumnValue =
   | string
   | number
@@ -59,6 +81,7 @@ type EditableTableColumnValue =
   | string[]
   | EditableTableOptions
   | EditableTableOption[]
+  | EditableTableOptionGroup[]
   | TextExpanderTriggers;
 
 /** Map of column ID → column definition. */
diff --git a/resources/js/modules/elements/components/BaseElementIndex.vue b/resources/js/modules/elements/components/BaseElementIndex.vue
index 45599513efb..c19834efe45 100644
--- a/resources/js/modules/elements/components/BaseElementIndex.vue
+++ b/resources/js/modules/elements/components/BaseElementIndex.vue
@@ -7,7 +7,8 @@
   import Select from '@/common/form/Select.vue';
   import BulkActionsBar from '@/modules/elements/components/BulkActionsBar.vue';
   import {useElementIndexSelection} from '@/modules/elements/composables/useElementIndexSelection';
-  import type {BulkActionItem} from '@/modules/elements/types/actions';
+  import type {BulkAction, BulkActionItem} from '@/modules/elements/types/actions';
+  import PerformElementActionController from '@actions/Elements/PerformElementActionController';
   import VarDump from '@/common/components/VarDump.vue';
 
   const props = withDefaults(
@@ -21,7 +22,12 @@
       total?: number;
       enableAdjustPageSize?: boolean;
       pageSizeOptions?: Array<number>;
-      actions?: Array<BulkActionItem> | null;
+      /** The "Actions" menu's items — not element-specific, see `BulkActionsBar`. */
+      actions?: Array<BulkAction> | null;
+      /** A separate "Set status" menu; see `resolved` below. */
+      statuses?: Array<BulkAction> | null;
+      /** The body key the selection posts under, forwarded to `BulkActionsBar`. */
+      idsField?: string;
       elementType?: string;
       source?: string | null;
       context?: string;
@@ -42,6 +48,57 @@
   const page = usePage<{readOnly: boolean}>();
   const readOnly = computed(() => props.readOnly ?? page.props.readOnly);
 
+  const SET_STATUS_KEY = 'CraftCms\\Cms\\Element\\Actions\\SetStatus';
+
+  function isSetStatusAction(item: BulkAction): item is BulkActionItem {
+    return 'key' in item && item.key === SET_STATUS_KEY;
+  }
+
+  function setStatusAction(status: string) {
+    return {
+      type: 'http' as const,
+      url: PerformElementActionController.url(),
+      body: {elementAction: SET_STATUS_KEY, status},
+    };
+  }
+
+  /** A real element index has no `statuses` prop — derives Enabled/Disabled from its `SetStatus` action instead, dropping it from `actions`. */
+  const resolved = computed(() => {
+    if (props.statuses) {
+      return {actions: props.actions ?? [], statuses: props.statuses};
+    }
+
+    const setStatus = (props.actions ?? []).find(isSetStatusAction);
+
+    return {
+      actions: (props.actions ?? []).filter((item) => item !== setStatus),
+      statuses: setStatus
+        ? [
+            {
+              key: `${SET_STATUS_KEY}:enabled`,
+              label: t('Enabled'),
+              fill: 'success',
+              disabled: setStatus.disabled,
+              action: setStatusAction('enabled'),
+            },
+            {
+              key: `${SET_STATUS_KEY}:disabled`,
+              label: t('Disabled'),
+              fill: 'danger',
+              disabled: setStatus.disabled,
+              action: setStatusAction('disabled'),
+            },
+          ]
+        : [],
+    };
+  });
+
+  const actionContext = computed(() => ({
+    elementType: props.elementType,
+    source: props.source,
+    context: props.context,
+  }));
+
   const {
     selection,
     selectedIds,
@@ -52,9 +109,14 @@
   } = useElementIndexSelection(() => props.table, {
     selectable: () => props.selectable,
     readOnly,
-    actions: () => props.actions,
+    actions: () => resolved.value.actions,
+    statuses: () => resolved.value.statuses,
   });
 
+  const showSelectionBar = computed(
+    () => showBulkActions.value && hasSelection.value
+  );
+
   function onActionPerformed() {
     clearSelection();
     emit('action-performed');
@@ -91,7 +153,7 @@
       showPagination.value ||
       showPageSize.value ||
       showDisplayedRows.value ||
-      (showBulkActions.value && hasSelection.value)
+      showSelectionBar.value
   );
 
   // --- ARIA live region ---
@@ -131,17 +193,18 @@
 
     <div class="element-index__footer" ref="indexFooter" v-if="showFooter">
       <BulkActionsBar
-        v-if="showBulkActions && hasSelection"
+        v-if="showSelectionBar"
         :selected-ids="selectedIds"
-        :actions="actions"
-        :element-type="elementType ?? ''"
-        :source="source"
-        :context="context"
+        :actions="resolved.actions"
+        :statuses="resolved.statuses"
+        :action-context="actionContext"
+        :ids-field="idsField"
+        :element-type="elementType"
         @performed="onActionPerformed"
         @clear="clearSelection"
       />
       <div
-        v-show="!(showBulkActions && hasSelection)"
+        v-show="!showSelectionBar"
         class="flex justify-between items-center w-full"
       >
         <div>
diff --git a/resources/js/modules/elements/components/BulkActionsBar.vue b/resources/js/modules/elements/components/BulkActionsBar.vue
index 38f540fd1c6..262f1486837 100644
--- a/resources/js/modules/elements/components/BulkActionsBar.vue
+++ b/resources/js/modules/elements/components/BulkActionsBar.vue
@@ -1,30 +1,38 @@
 <script setup lang="ts">
-  import {computed, onMounted, onUnmounted} from 'vue';
+  import {computed, onMounted, onUnmounted, ref} from 'vue';
   import {t} from '@craftcms/ui';
-  import type {BulkActionItem} from '@/modules/elements/types/actions';
-  import type {ActionItem} from '@/common/types';
+  import type {
+    BulkAction,
+    BulkActionItem,
+  } from '@/modules/elements/types/actions';
+  import type {
+    ActionItemButton,
+    ActionItemGroup,
+    ActionItems,
+  } from '@/common/types';
+  import type {FormValues} from '@/modules/forms/types';
   import Text from '@/common/components/Text.vue';
   import ActionMenu from '@/common/components/ActionMenu.vue';
-  import {useForm} from '@inertiajs/vue3';
-  import PerformElementActionController from '@actions/Elements/PerformElementActionController';
 
   const props = withDefaults(
     defineProps<{
-      /** The ids of the elements currently selected in the index. */
+      /** The ids of the rows currently selected. */
       selectedIds: ReadonlyArray<string | number>;
-      /** The serialized bulk action descriptors for the active source. */
-      actions?: Array<BulkActionItem> | null;
-      /** The element type class string, posted to the perform endpoint. */
-      elementType: string;
-      /** The active source key, posted so the server rebuilds the same query. */
-      source?: string | null;
-      /** The render context (e.g. `index`), posted to the perform endpoint. */
-      context?: string;
+      /** The "Actions" menu's items. Not element-specific — any `http`/`download` action posts to its own `url`. */
+      actions?: Array<BulkAction> | null;
+      /** A separate, pinned "Set status" menu, rendered before "Actions". */
+      statuses?: Array<BulkAction> | null;
+      /** Extra fields merged into every `http`/`download` action's body — an element index's `elementType`/`source`/`context`, say. */
+      actionContext?: FormValues;
+      /** The body key the selection posts under. */
+      idsField?: string;
+      /** Only used by the `craft:copy-elements` listener below; irrelevant outside an element index. */
+      elementType?: string;
     }>(),
     {
       actions: () => [],
-      source: null,
-      context: 'index',
+      statuses: () => [],
+      idsField: 'elementIds',
     }
   );
 
@@ -35,12 +43,9 @@
     (e: 'clear'): void;
   }>();
 
-  // Set Status gets its own button alongside the menu (it's the most-reached-for
-  // action), so it's pulled out of the menu list below.
-  const SET_STATUS_KEY = 'CraftCms\\Cms\\Element\\Actions\\SetStatus';
-
   const selectedCount = computed(() => props.selectedIds.length);
 
+  /** Only meaningful for a real element index, where a selection can mix elements and asset-folder rows. */
   const selectionType = computed<'elements' | 'folders' | 'mixed'>(() => {
     const folderCount = props.selectedIds.filter((id) =>
       String(id).startsWith('folder:')
@@ -53,96 +58,108 @@
     return folderCount === selectedCount.value ? 'folders' : 'mixed';
   });
 
-  const availableActions = computed(() =>
-    (props.actions ?? []).filter(
-      (item) => !item.appliesTo || item.appliesTo === selectionType.value
-    )
-  );
-
-  const setStatusAction = computed<BulkActionItem | undefined>(() =>
-    availableActions.value.find((item) => item.key === SET_STATUS_KEY)
-  );
-
-  const menuItems = computed<Array<BulkActionItem>>(() =>
-    availableActions.value.filter((item) => item.key !== SET_STATUS_KEY)
-  );
-
-  const hasMenu = computed(() => menuItems.value.length > 0);
+  function itemApplies(item: BulkActionItem): boolean {
+    return !item.appliesTo || item.appliesTo === selectionType.value;
+  }
 
-  /**
-   * Map the server descriptors to `ActionItem`s for `ActionMenu` /
-   * `craft-action-item`. The server bakes the action class + its settings into
-   * `action.body`; we merge the live selection (`elementIds`) and index context
-   * (`elementType`, `source`, `context`) so the perform endpoint can rebuild the
-   * same query the index used. `runAction()` then handles the request, confirm,
-   * spinner, and feedback — no bespoke code here.
-   *
-   * `event` actions run client-side instead: the selection merges into the
-   * event detail, and a listener (e.g. `craft:copy-elements` below) handles it.
-   */
-  const menuActions = computed<Array<ActionItem>>(() =>
-    menuItems.value.map((item): ActionItem => {
-      const variant = item.variant ?? (item.destructive ? 'danger' : undefined);
+  // Merges the live selection (under `idsField`) and `actionContext` into the
+  // item's own `action`, so `runAction()` handles the request/confirm/feedback
+  // with no bespoke code here. `event` actions instead merge into the event
+  // detail for a client-side listener (e.g. `craft:copy-elements` below).
+  function resolveItem(item: BulkActionItem): ActionItemButton {
+    const variant = item.variant ?? (item.destructive ? 'danger' : undefined);
 
-      // Disabled (e.g. not-yet-ported interactive, or non-bulk actions with
-      // more than one element selected) actions render inert.
-      if (
-        item.disabled ||
-        !item.action ||
-        (item.bulk === false && selectedCount.value > 1)
-      ) {
-        return {
-          type: 'button',
-          label: item.label,
-          variant,
-          disabled: true,
-        };
-      }
+    // An imperative caller handles its own request/refresh; just wire the click.
+    if (item.onClick) {
+      return {
+        type: 'button',
+        label: item.label,
+        variant,
+        fill: item.fill,
+        disabled: item.disabled,
+        onClick: item.onClick,
+      } satisfies ActionItemButton;
+    }
 
-      if (item.action.type === 'event') {
-        return {
-          type: 'button',
-          label: item.label,
-          variant,
-          action: {
-            ...item.action,
-            detail: {
-              ...item.action.detail,
-              elementType: props.elementType,
-              elementIds: props.selectedIds,
-            },
-          },
-        } satisfies ActionItem;
-      }
+    // Disabled (e.g. not-yet-ported interactive, or non-bulk actions with
+    // more than one row selected) actions render inert.
+    if (
+      item.disabled ||
+      !item.action ||
+      (item.bulk === false && selectedCount.value > 1)
+    ) {
+      return {type: 'button', label: item.label, variant, fill: item.fill, disabled: true};
+    }
 
-      if (item.action.type === 'http' || item.action.type === 'download') {
-        return {
-          type: 'button',
-          label: item.label,
-          variant,
-          action: {
-            ...item.action,
-            body: {
-              ...item.action.body,
-              elementType: props.elementType,
-              source: props.source,
-              context: props.context,
-              elementIds: props.selectedIds,
-            },
+    if (item.action.type === 'event') {
+      return {
+        type: 'button',
+        label: item.label,
+        variant,
+        fill: item.fill,
+        action: {
+          ...item.action,
+          detail: {
+            ...item.action.detail,
+            elementType: props.elementType,
+            [props.idsField ?? 'elementIds']: props.selectedIds,
           },
-          feedback: {success: {message: t('Done')}},
-        } satisfies ActionItem;
-      }
+        },
+      } satisfies ActionItemButton;
+    }
 
+    if (item.action.type === 'http' || item.action.type === 'download') {
       return {
         type: 'button',
         label: item.label,
         variant,
-        action: item.action,
+        fill: item.fill,
+        action: {
+          ...item.action,
+          body: {
+            ...item.action.body,
+            ...props.actionContext,
+            [props.idsField ?? 'elementIds']: props.selectedIds,
+          },
+        },
         feedback: {success: {message: t('Done')}},
-      } satisfies ActionItem;
-    })
-  );
+      } satisfies ActionItemButton;
+    }
+
+    return {
+      type: 'button',
+      label: item.label,
+      variant,
+      fill: item.fill,
+      action: item.action,
+      feedback: {success: {message: t('Done')}},
+    } satisfies ActionItemButton;
+  }
+
+  function resolveList(list: Array<BulkAction> | null | undefined): ActionItems {
+    return (list ?? []).flatMap((entry): ActionItems => {
+      // A custom component (e.g. "Move to page…"), passed through as-is.
+      if (entry.type === 'display') {
+        return [entry];
+      }
+
+      if (entry.type === 'group') {
+        const items = entry.items.filter(itemApplies).map(resolveItem);
+
+        return items.length
+          ? [{type: 'group', heading: entry.heading, items} satisfies ActionItemGroup]
+          : [];
+      }
+
+      return itemApplies(entry) ? [resolveItem(entry)] : [];
+    });
+  }
+
+  const menuActions = computed<ActionItems>(() => resolveList(props.actions));
+  const hasMenu = computed(() => menuActions.value.length > 0);
+
+  const statusActions = computed<ActionItems>(() => resolveList(props.statuses));
+  const hasStatusMenu = computed(() => statusActions.value.length > 0);
 
   /**
    * Copy mirrors Craft 5: the selection is handed to the legacy
@@ -189,27 +206,20 @@
     }
   }
 
-  const action = useForm({
-    elementIds: props.selectedIds,
-    elementAction: SET_STATUS_KEY,
-    elementType: props.elementType,
-    context: props.context,
-    status: '',
-    source: props.source,
-  });
-
-  function setStatus(status: 'enabled' | 'disabled') {
-    action
-      .transform((data) => {
-        data.status = status;
-        data.elementIds = props.selectedIds;
-
-        return data;
-      })
-      .post(PerformElementActionController.url(), {
-        only: ['data', 'flash', 'pagination'],
-        preserveState: false,
-      });
+  // One shared spinner across "Set status"'s items; scoped to that menu only —
+  // `ActionMenu` has no declared emits, so an unscoped listener would also
+  // catch "Actions" items bubbling through the same bar.
+  const statusProcessing = ref(false);
+  function onStatusActionChangeState(event: Event) {
+    if (!(event instanceof CustomEvent)) {
+      return;
+    }
+    const state = event.detail?.state;
+    if (state === 'loading') {
+      statusProcessing.value = true;
+    } else if (state === 'success' || state === 'error') {
+      statusProcessing.value = false;
+    }
   }
 </script>
 
@@ -237,31 +247,24 @@
     </div>
 
     <div class="bulk-actions-bar__actions">
-      <craft-action-menu
-        v-if="setStatusAction"
-        :disabled="setStatusAction.disabled"
+      <ActionMenu
+        v-if="hasStatusMenu"
+        :actions="statusActions"
+        :label="t('Set status')"
+        @action:change-state="onStatusActionChangeState"
       >
-        <craft-button
-          slot="invoker"
-          type="button"
-          size="small"
-          :loading="action.processing"
-        >
-          {{ setStatusAction.label }}
-          <craft-icon name="chevron-down" slot="suffix"></craft-icon>
-        </craft-button>
-
-        <div slot="content">
-          <craft-action-item @click="setStatus('enabled')">
-            <craft-indicator fill="success"></craft-indicator>
-            {{ t('Enabled') }}
-          </craft-action-item>
-          <craft-action-item @click="setStatus('disabled')">
-            <craft-indicator fill="danger"></craft-indicator>
-            {{ t('Disabled') }}
-          </craft-action-item>
-        </div>
-      </craft-action-menu>
+        <template #invoker="{attributes}">
+          <craft-button
+            type="button"
+            size="small"
+            :loading="statusProcessing"
+            v-bind="attributes"
+          >
+            {{ t('Set status') }}
+            <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+          </craft-button>
+        </template>
+      </ActionMenu>
 
       <ActionMenu v-if="hasMenu" :actions="menuActions">
         <template #invoker="{attributes}">
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
index 29a588a3fc7..8d4cb389d0a 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
@@ -1,7 +1,7 @@
 import {describe, expect, it} from 'vite-plus/test';
 import {ref, type Ref} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
-import type {BulkActionItem} from '@/modules/elements/types/actions';
+import type {BulkAction} from '@/modules/elements/types/actions';
 import {
   useElementIndexSelection,
   type ElementIndexSelectionOptions,
@@ -259,9 +259,7 @@ describe('useElementIndexSelection', () => {
     const selection = makeSelection();
     const rows = [makeRow(1, selection)];
     const table = makeTable(rows);
-    const actions = ref<Array<BulkActionItem>>([
-      {key: 'delete', label: 'Delete'},
-    ]);
+    const actions = ref<Array<BulkAction>>([{key: 'delete', label: 'Delete'}]);
     const s = useElementIndexSelection(table, opts({actions}));
 
     expect(s.hasBulkActions.value).toBe(true);
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.ts b/resources/js/modules/elements/composables/useElementIndexSelection.ts
index ba0943852f1..470b2bcae88 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.ts
@@ -1,6 +1,6 @@
 import {computed, type MaybeRefOrGetter, toValue} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
-import type {BulkActionItem} from '@/modules/elements/types/actions';
+import type {BulkAction} from '@/modules/elements/types/actions';
 import {isInteractiveClick} from '@/common/utils/dom';
 import {
   type SelectableId,
@@ -10,7 +10,9 @@ import {
 export interface ElementIndexSelectionOptions {
   selectable: MaybeRefOrGetter<boolean>;
   readOnly: MaybeRefOrGetter<boolean>;
-  actions: MaybeRefOrGetter<Array<BulkActionItem> | null | undefined>;
+  actions: MaybeRefOrGetter<Array<BulkAction> | null | undefined>;
+  /** A separate `statuses` menu also counts as having bulk actions. */
+  statuses?: MaybeRefOrGetter<Array<BulkAction> | null | undefined>;
 }
 
 /**
@@ -54,7 +56,9 @@ export function useElementIndexSelection(
   const {anchorIndex, hasSelection, selectedIds} = selection;
 
   const hasBulkActions = computed(
-    () => (toValue(options.actions)?.length ?? 0) > 0
+    () =>
+      (toValue(options.actions)?.length ?? 0) > 0 ||
+      (toValue(options.statuses)?.length ?? 0) > 0
   );
   const showBulkActions = computed(
     () => selectable.value && hasBulkActions.value
diff --git a/resources/js/modules/elements/types/actions.ts b/resources/js/modules/elements/types/actions.ts
index a5e7c03f110..42957b89cbc 100644
--- a/resources/js/modules/elements/types/actions.ts
+++ b/resources/js/modules/elements/types/actions.ts
@@ -1,16 +1,14 @@
 /**
- * A bulk element action, serialized by `ElementActions::serializeActionItems()`
- * on the server as a primitive "action item" descriptor. These are rendered
- * through the shared `craft-action-item` component (via `ActionMenu`), so the
- * request, confirm dialog, spinner, and feedback are all handled by the
- * built-in `runAction()` primitives rather than bespoke code.
- *
- * The `action.body` carries the action class + its server-baked settings; the
- * client merges in the live selection (`elementIds`) and index context
- * (`elementType`, `source`, `context`) before performing.
+ * A `BulkActionsBar` menu/status item, as a primitive descriptor rather than a
+ * fully-built `ActionItem` — the bar itself fills in the selection (under
+ * `idsField`) and any shared `actionContext` before performing, so the
+ * request, confirm dialog, spinner, and feedback all come from the built-in
+ * `runAction()` primitives rather than bespoke code. Not element-specific:
+ * `action.body` is whatever the target endpoint expects, element index or not.
  */
 export interface BulkActionItem {
-  /** The action's class string — a stable id for singling out specific actions. */
+  type?: 'button';
+  /** A stable id for singling out specific actions (e.g. matching one across renders). */
   key: string;
   /** The action's trigger/button label. */
   label: string;
@@ -20,11 +18,19 @@ export interface BulkActionItem {
   variant?: string;
   /** Disabled actions (e.g. interactive ones not yet ported to Vue). */
   disabled?: boolean;
-  /** `false` if only performable on a single selected element (mirrors the legacy `bulk: false` trigger setting). Omitted when bulk-capable. */
+  /** `false` if only performable on a single selected row (mirrors the legacy `bulk: false` trigger setting). Omitted when bulk-capable. */
   bulk?: boolean;
-  /** Limits the action to real elements or synthetic asset-folder rows. */
+  /** Limits the action to real elements or synthetic asset-folder rows. Meaningless outside an element index. */
   appliesTo?: 'elements' | 'folders';
-  /** The primitive action descriptor. Absent for disabled/placeholder items. */
+  /** A colored status dot before the label — `craft-indicator`'s own `fill` values. Only meaningful in a `statuses` list. */
+  fill?: string;
+  /**
+   * An imperative alternative to `action`, for a caller that needs to do more
+   * than post-and-refresh (optimistic local removal, say). Takes priority
+   * over `action` when both are given.
+   */
+  onClick?: (event: Event) => void;
+  /** The primitive action descriptor. Ignored when `onClick` is set; absent for disabled/placeholder items. */
   action?:
     | {
         type: 'event';
@@ -43,4 +49,14 @@ export interface BulkActionItem {
         value: string;
       };
 }
+
+/** A heading over a run of `BulkActionItem`s, for `actions`/`statuses`. */
+export interface BulkActionGroup {
+  type: 'group';
+  heading?: string;
+  items: Array<BulkActionItem>;
+}
+
+export type BulkAction = BulkActionItem | BulkActionGroup | ActionItemDisplay;
+import type {ActionItemDisplay} from '@/common/types';
 import type {FormValues} from '@/modules/forms/types';
diff --git a/resources/js/modules/field-layout-designer/card-view-designer.ts b/resources/js/modules/field-layout-designer/card-view-designer.ts
index d4b9ad2e08c..2f165a7dd8a 100644
--- a/resources/js/modules/field-layout-designer/card-view-designer.ts
+++ b/resources/js/modules/field-layout-designer/card-view-designer.ts
@@ -135,6 +135,10 @@ export class CardViewDesigner extends Base {
           data: {
             fieldLayoutConfig: {
               ...this.designer.config,
+              // Not part of `this.designer.config` (that lives at
+              // `designer.settings.elementType` instead), but `CardDesigner::previewHtml()`
+              // needs a `type` on the layout config to instantiate a sample element.
+              type: this.designer.settings!.elementType,
               generatedFields:
                 document
                   .querySelector('craft-generated-fields-table')
diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
new file mode 100644
index 00000000000..3c03610f4f4
--- /dev/null
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -0,0 +1,687 @@
+<script setup lang="ts">
+  import {actionClient, t} from '@craftcms/ui';
+  import {router} from '@inertiajs/vue3';
+  import {
+    type ColumnDef,
+    getCoreRowModel,
+    type RowSelectionState,
+    useVueTable,
+  } from '@tanstack/vue-table';
+  import {watchDebounced} from '@vueuse/core';
+  import {computed, defineComponent, h, onMounted, ref, watch} from 'vue';
+  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
+  import ActionMenu from '@/common/components/ActionMenu.vue';
+  import CpLink from '@/common/components/CpLink.vue';
+  import type {ActionItemLink, PaginationData} from '@/common/types';
+  import type {
+    BulkAction,
+    BulkActionItem,
+  } from '@/modules/elements/types/actions';
+  import Empty from '@/common/components/Empty.vue';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
+  import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
+  import MoveToPageButton from '@/modules/admin-table/components/MoveToPageButton.vue';
+  import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
+  import type {FormNodePayload, FormValues} from './types';
+
+  interface TableColumn {
+    key: string;
+    label: string;
+  }
+
+  interface TableLink {
+    label: string;
+    url: string | null;
+  }
+
+  interface TableMenu {
+    label: string;
+    items: TableLink[];
+  }
+
+  interface TableIcon {
+    icon: string;
+    label?: string;
+  }
+
+  interface TableHtml {
+    html: string;
+  }
+
+  interface BulkActionSingle {
+    label: string;
+    url: string;
+    params?: Record<string, unknown>;
+    allowMultiple?: boolean;
+  }
+
+  interface BulkActionMenu {
+    label?: string;
+    icon?: string;
+    items: BulkActionSingle[];
+  }
+
+  type BulkActionDescriptor = BulkActionSingle | BulkActionMenu;
+
+  type TableCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | TableLink
+    | TableLink[]
+    | TableMenu
+    | TableIcon
+    | TableHtml;
+
+  interface TableStatus {
+    fill: string;
+    label: string | null;
+  }
+
+  type TableRow = Record<string, TableCellValue> & {
+    id?: string | number;
+    _deletable?: boolean;
+    _status?: TableStatus | null;
+    _search?: string;
+  };
+
+  const props = defineProps<{
+    node: FormNodePayload<{
+      columns: TableColumn[];
+      rows: TableRow[];
+      dataUrl: string | null;
+      perPage: number;
+      moveToPageUrl: string | null;
+      emptyMessage: string | null;
+      createLabel: string | null;
+      createUrl: string | null;
+      createMenuItems: Array<{label: string; url: string}> | null;
+      reorderUrl: string | null;
+      reorderSuccessMessage: string | null;
+      reorderFailMessage: string | null;
+      deleteUrl: string | null;
+      deleteConfirmMessage: string | null;
+      bulkDeletable: boolean;
+      bulkActions: BulkActionDescriptor[];
+      statusActions: BulkActionSingle[];
+      searchable: boolean;
+      searchPlaceholder: string | null;
+      bordered: boolean;
+    }>;
+  }>();
+
+  const rows = ref<TableRow[]>([...props.node.props.rows]);
+  watch(
+    () => props.node.props.rows,
+    (newRows) => {
+      rows.value = [...newRows];
+    }
+  );
+
+  const isEndpointMode = computed(() => !!props.node.props.dataUrl);
+
+  const pageRows = ref<TableRow[]>([]);
+  const pagination = ref<PaginationData | null>(null);
+  const loading = ref(false);
+
+  async function fetchPage(page: number): Promise<void> {
+    loading.value = true;
+    try {
+      const {data} = await actionClient.post<{
+        data: TableRow[];
+        pagination: PaginationData;
+      }>(props.node.props.dataUrl!, {
+        page,
+        per_page: props.node.props.perPage,
+        search: search.value || undefined,
+      });
+      pageRows.value = data.data;
+      pagination.value = data.pagination;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    if (isEndpointMode.value) {
+      fetchPage(1);
+    }
+  });
+
+  const search = ref('');
+
+  watchDebounced(
+    search,
+    () => {
+      if (isEndpointMode.value) {
+        fetchPage(1);
+      }
+    },
+    {debounce: 300}
+  );
+
+  function cellText(value: TableCellValue): string {
+    if (value === null || value === undefined) return '';
+    if (typeof value !== 'object') return String(value);
+    if (Array.isArray(value)) return value.map((link) => link.label).join(' ');
+    // `html` cells could hold anything (a working custom element, not just markup) — there's no
+    // safe, generic way to reduce that to plain text, so a row relying on one for its primary
+    // content needs its own explicit `_search` to stay searchable.
+    if ('html' in value) return '';
+    return value.label ?? '';
+  }
+
+  function rowSearchText(row: TableRow): string {
+    const text =
+      row._search ??
+      props.node.props.columns
+        .map((column) => cellText(row[column.key] ?? null))
+        .join(' ');
+
+    return text.toLowerCase();
+  }
+
+  const filteredRows = computed(() => {
+    const query = search.value.trim().toLowerCase();
+
+    return query
+      ? rows.value.filter((row) => rowSearchText(row).includes(query))
+      : rows.value;
+  });
+
+  const displayedRows = computed(() =>
+    isEndpointMode.value ? pageRows.value : filteredRows.value
+  );
+
+  const footerFrom = computed(() =>
+    isEndpointMode.value ? (pagination.value?.from ?? 0) : 1
+  );
+  const footerTo = computed(() =>
+    isEndpointMode.value
+      ? (pagination.value?.to ?? 0)
+      : displayedRows.value.length
+  );
+  const footerTotal = computed(() =>
+    isEndpointMode.value
+      ? (pagination.value?.total ?? 0)
+      : displayedRows.value.length
+  );
+
+  const columnHelper = createCraftColumnHelper<TableRow>();
+
+  const createMenuActions = computed<ActionItemLink[]>(
+    () =>
+      props.node.props.createMenuItems?.map((item) => ({
+        type: 'link',
+        href: item.url,
+        label: item.label,
+      })) ?? []
+  );
+
+  function isMenu(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableMenu {
+    return !Array.isArray(value) && 'items' in value;
+  }
+
+  function isIcon(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableIcon {
+    return !Array.isArray(value) && 'icon' in value;
+  }
+
+  function isHtml(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableHtml {
+    return !Array.isArray(value) && 'html' in value;
+  }
+
+  function isBulkActionMenu(
+    action: BulkActionDescriptor
+  ): action is BulkActionMenu {
+    return 'items' in action;
+  }
+
+  function renderLink(link: TableLink) {
+    return link.url
+      ? h(CpLink, {href: link.url, inertia: false}, () => link.label)
+      : link.label;
+  }
+
+  function renderIcon(icon: TableIcon) {
+    return h('craft-icon', {name: icon.icon, label: icon.label});
+  }
+
+  function renderHtmlCell(cell: TableHtml) {
+    return h('div', {innerHTML: cell.html});
+  }
+
+  function renderMenu(menu: TableMenu) {
+    return h(
+      ActionMenu,
+      {
+        label: menu.label,
+        actions: menu.items.map(
+          (item): ActionItemLink => ({
+            type: 'link',
+            href: item.url ?? '#',
+            label: item.label,
+          })
+        ),
+      },
+      {
+        invoker: () =>
+          h(
+            'craft-button',
+            {type: 'button', size: 'small', variant: 'outline'},
+            menu.label
+          ),
+      }
+    );
+  }
+
+  const columns = computed(() => {
+    const cols: ColumnDef<TableRow, any>[] = props.node.props.columns.map(
+      (column, columnIndex) =>
+        columnHelper.accessor(column.key, {
+          header: column.label,
+          cell: ({getValue, row}) => {
+            const value = getValue();
+            let rendered;
+
+            if (Array.isArray(value)) {
+              rendered = value.flatMap((link, index) => [
+                index > 0 ? ', ' : '',
+                renderLink(link),
+              ]);
+            } else if (value !== null && typeof value === 'object') {
+              if (isMenu(value)) rendered = renderMenu(value);
+              else if (isIcon(value)) rendered = renderIcon(value);
+              else if (isHtml(value)) rendered = renderHtmlCell(value);
+              else rendered = renderLink(value);
+            } else {
+              rendered = value ?? '';
+            }
+
+            const status = row.original._status;
+            if (columnIndex === 0 && status) {
+              return h('div', {class: 'flex flex-nowrap gap-1 items-center'}, [
+                h('craft-indicator', {
+                  fill: status.fill,
+                  label: status.label ?? undefined,
+                }),
+                rendered,
+              ]);
+            }
+
+            return rendered;
+          },
+        })
+    );
+
+    if (props.node.props.deleteUrl) {
+      cols.push(
+        columnHelper.actions(({row}) => {
+          const actions = [];
+
+          if (row.original._deletable !== false) {
+            actions.push(
+              h(DeleteButton, {onClick: () => deleteRow(row.original)})
+            );
+          }
+
+          return actions;
+        })
+      );
+    }
+
+    return cols;
+  });
+
+  const rowSelection = ref<RowSelectionState>({});
+
+  const hasBulkFooter = computed(
+    () =>
+      (!!props.node.props.deleteUrl && props.node.props.bulkDeletable) ||
+      props.node.props.bulkActions.length > 0 ||
+      props.node.props.statusActions.length > 0
+  );
+
+  const showMoveToPage = computed(
+    () =>
+      isEndpointMode.value &&
+      !!props.node.props.moveToPageUrl &&
+      (pagination.value?.last_page ?? 0) > 1
+  );
+
+  const paginationState = computed(() => ({
+    pageIndex: (pagination.value?.current_page ?? 1) - 1,
+    pageSize: props.node.props.perPage,
+  }));
+
+  function onPaginationChange(
+    updater:
+      | {pageIndex: number; pageSize: number}
+      | ((old: {pageIndex: number; pageSize: number}) => {
+          pageIndex: number;
+          pageSize: number;
+        })
+  ): void {
+    if (!isEndpointMode.value) return;
+
+    const next =
+      updater instanceof Function ? updater(paginationState.value) : updater;
+    fetchPage(next.pageIndex + 1);
+  }
+
+  const table = useVueTable({
+    get data() {
+      return displayedRows.value;
+    },
+    get columns() {
+      return columns.value;
+    },
+    state: {
+      get rowSelection() {
+        return rowSelection.value;
+      },
+      get pagination() {
+        return paginationState.value;
+      },
+    },
+    getRowId: (row) => String(row.id),
+    enableRowSelection: (row) =>
+      hasBulkFooter.value && row.original._deletable !== false,
+    onRowSelectionChange: (updater) => {
+      rowSelection.value =
+        updater instanceof Function ? updater(rowSelection.value) : updater;
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    get manualPagination() {
+      return isEndpointMode.value;
+    },
+    // TanStack uses -1 for an unknown page count outside endpoint mode.
+    get pageCount() {
+      return isEndpointMode.value ? (pagination.value?.last_page ?? -1) : -1;
+    },
+    onPaginationChange,
+  });
+
+  const selectedIds = computed(() =>
+    table.getSelectedRowModel().rows.map((row) => row.original.id!)
+  );
+
+  function onReorder(startIndex: number, finishIndex: number): void {
+    if (isEndpointMode.value) {
+      onReorderWithinPage(startIndex, finishIndex);
+      return;
+    }
+
+    const previous = rows.value;
+    const reordered = [...previous];
+    const [moved] = reordered.splice(startIndex, 1);
+
+    if (!moved) {
+      return;
+    }
+
+    reordered.splice(finishIndex, 0, moved);
+    rows.value = reordered;
+
+    // The backend actions this posts to are shared with the legacy `Craft.VueAdminTable`
+    // widget, which JSON-encodes `ids` as a string rather than posting a raw array.
+    actionClient
+      .post(props.node.props.reorderUrl!, {
+        ids: JSON.stringify(reordered.map((row) => row.id)),
+      })
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        refreshForm();
+      })
+      .catch(() => {
+        rows.value = previous;
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
+  }
+
+  function onReorderWithinPage(startIndex: number, finishIndex: number): void {
+    const previous = pageRows.value;
+    const reordered = [...previous];
+    const [moved] = reordered.splice(startIndex, 1);
+
+    if (!moved || !pagination.value) {
+      return;
+    }
+
+    reordered.splice(finishIndex, 0, moved);
+    pageRows.value = reordered;
+
+    const toPosition =
+      (pagination.value.current_page - 1) * props.node.props.perPage +
+      finishIndex;
+
+    actionClient
+      .post(props.node.props.reorderUrl!, {id: moved.id, toPosition})
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        // Reordering can shift rows across page boundaries.
+        fetchPage(pagination.value!.current_page);
+      })
+      .catch(() => {
+        pageRows.value = previous;
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
+  }
+
+  function moveToPage(id: TableRow['id'], page: number): void {
+    actionClient
+      .post(props.node.props.moveToPageUrl!, {id, page})
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        table.resetRowSelection();
+        fetchPage(pagination.value!.current_page);
+      })
+      .catch(() => {
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
+  }
+
+  async function deleteRow(row: TableRow): Promise<void> {
+    const message = props.node.props.deleteConfirmMessage ?? t('Are you sure?');
+
+    if (!confirm(message)) {
+      return;
+    }
+
+    await actionClient.post(props.node.props.deleteUrl!, {id: row.id});
+    rows.value = rows.value.filter((r) => r.id !== row.id);
+    refreshForm();
+  }
+
+  async function deleteSelected(): Promise<void> {
+    const ids = selectedIds.value;
+
+    if (!ids.length) return;
+
+    const message = props.node.props.deleteConfirmMessage ?? t('Are you sure?');
+
+    if (!confirm(message)) {
+      return;
+    }
+
+    await actionClient.post(props.node.props.deleteUrl!, {ids});
+    rows.value = rows.value.filter((r) => !ids.includes(r.id!));
+    table.resetRowSelection();
+    refreshForm();
+  }
+
+  // `BulkActionsBar` handles the request, per-row-vs-bulk disabling, and
+  // refresh itself once this is declarative — see its own `resolveItem()`.
+  function bulkActionToItem(action: BulkActionSingle): BulkActionItem {
+    return {
+      key: action.url,
+      label: action.label,
+      bulk: action.allowMultiple === false ? false : undefined,
+      action: {
+        type: 'http',
+        url: action.url,
+        // Server JSON, trusted to be FormValue-shaped at runtime.
+        body: action.params as FormValues | undefined,
+      },
+    };
+  }
+
+  // ActionMenu's display items receive no props, so this component closes over the current selection.
+  const MoveToPageDisplay = defineComponent({
+    name: 'MoveToPageDisplay',
+    setup() {
+      return () =>
+        h(MoveToPageButton, {
+          currentPage: pagination.value?.current_page ?? 1,
+          lastPage: pagination.value?.last_page ?? 1,
+          loading: loading.value,
+          onMove: (page: number) => {
+            const id = selectedIds.value[0];
+            if (id !== undefined) {
+              moveToPage(id, page);
+            }
+          },
+        });
+    },
+  });
+
+  const footerActionItems = computed((): Array<BulkAction> => {
+    const items: Array<BulkAction> = props.node.props.bulkActions.map(
+      (action) =>
+        isBulkActionMenu(action)
+          ? {
+              type: 'group',
+              heading: action.label,
+              items: action.items.map(bulkActionToItem),
+            }
+          : bulkActionToItem(action)
+    );
+
+    if (showMoveToPage.value && selectedIds.value.length === 1) {
+      items.push({type: 'display', is: MoveToPageDisplay});
+    }
+
+    if (props.node.props.deleteUrl && props.node.props.bulkDeletable) {
+      items.push({
+        key: 'delete',
+        label: t('Delete'),
+        variant: 'danger',
+        onClick: deleteSelected,
+      });
+    }
+
+    return items;
+  });
+
+  const statusActionItems = computed((): Array<BulkAction> =>
+    props.node.props.statusActions.map(bulkActionToItem)
+  );
+
+  function refreshForm(): void {
+    router.reload({only: ['form']});
+  }
+</script>
+
+<template>
+  <div :data-form-node="node.uid">
+    <LayoutSlot v-if="node.props.createUrl" name="content-actions">
+      <CpLink
+        variant="accent"
+        appearance="button"
+        icon="plus"
+        :href="node.props.createUrl"
+        :inertia="false"
+        >{{ node.props.createLabel }}</CpLink
+      >
+    </LayoutSlot>
+    <LayoutSlot v-else-if="createMenuActions.length" name="content-actions">
+      <ActionMenu :actions="createMenuActions">
+        <template #invoker="{attributes}">
+          <craft-button
+            type="button"
+            variant="primary"
+            icon="plus"
+            v-bind="attributes"
+          >
+            {{ node.props.createLabel }}
+            <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+          </craft-button>
+        </template>
+      </ActionMenu>
+    </LayoutSlot>
+
+    <component
+      :is="node.props.bordered ? 'craft-pane' : 'div'"
+      v-bind="node.props.bordered ? {padding: '0', appearance: 'raised'} : {}"
+    >
+      <div v-if="node.props.searchable" slot="header-actions">
+        <CraftInput
+          name="search"
+          :label="t('Search')"
+          :placeholder="node.props.searchPlaceholder ?? t('Search')"
+          label-sr-only
+          v-model="search"
+        >
+          <div slot="suffix" class="flex">
+            <craft-button
+              v-if="search"
+              type="button"
+              icon
+              size="small"
+              variant="plain"
+              @click="search = ''"
+            >
+              <craft-icon name="x" :label="t('Clear search')"></craft-icon>
+            </craft-button>
+          </div>
+        </CraftInput>
+      </div>
+
+      <AdminTable
+        :table="table"
+        :reorderable="!!node.props.reorderUrl && !search"
+        :selectable="hasBulkFooter"
+        :loading="loading"
+        :from="footerFrom"
+        :to="footerTo"
+        :total="footerTotal"
+        :actions="footerActionItems"
+        :statuses="statusActionItems"
+        ids-field="ids"
+        @reorder="onReorder"
+        @action-performed="refreshForm"
+      >
+        <template #empty-row>
+          <Empty
+            v-if="!loading"
+            :label="
+              search
+                ? t('No results for “{search}”.', {search})
+                : (node.props.emptyMessage ?? t('Nothing to show.'))
+            "
+          />
+        </template>
+      </AdminTable>
+    </component>
+  </div>
+</template>
diff --git a/resources/js/modules/forms/CalloutNode.vue b/resources/js/modules/forms/CalloutNode.vue
index 7f8a07679f5..e8140dbb7e7 100644
--- a/resources/js/modules/forms/CalloutNode.vue
+++ b/resources/js/modules/forms/CalloutNode.vue
@@ -9,6 +9,7 @@
       html: string;
       variant: string;
       appearance?: string;
+      padding?: string | number;
       icon?: string;
       dismissible: boolean;
       width: number;
@@ -35,7 +36,10 @@
     :class="`width-${node.props.width}`"
     :data-form-node="node.uid"
     :variant="node.props.variant"
-    v-bind="node.props.appearance ? {appearance: node.props.appearance} : {}"
+    v-bind="{
+      ...(node.props.appearance ? {appearance: node.props.appearance} : {}),
+      ...(node.props.padding !== undefined ? {padding: node.props.padding} : {}),
+    }"
     :icon="node.props.icon"
     :data-dismissible="node.props.dismissible || undefined"
   >
diff --git a/resources/js/modules/forms/ColorSelectControl.vue b/resources/js/modules/forms/ColorSelectControl.vue
new file mode 100644
index 00000000000..93311dd2562
--- /dev/null
+++ b/resources/js/modules/forms/ColorSelectControl.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+  import CraftSelectColor from '@craftcms/ui/components/select-color/select-color';
+  import type {FormControlPayload} from './types';
+  import {
+    ignoreModelValueInitialization,
+    inputName,
+    serverErrorValidators,
+  } from './runtime';
+
+  // The select uses __blank__ internally; form values use an empty string.
+  const BLANK_VALUE = '__blank__';
+
+  type ColorSelectControlProps = {
+    allowTransparent?: boolean;
+    blankLabel?: string;
+    colors?: string[];
+  };
+
+  defineProps<{
+    control: FormControlPayload<ColorSelectControlProps>;
+    value: unknown;
+    label?: string;
+    editable: boolean;
+    invalid: boolean;
+    required: boolean;
+  }>();
+  const emit = defineEmits<{
+    (event: 'update:value', value: string, kind: 'discrete'): void;
+  }>();
+
+  const onModelValueChanged = ignoreModelValueInitialization((event) => {
+    if (!(event.target instanceof CraftSelectColor)) {
+      throw new TypeError('Expected a color select event target.');
+    }
+
+    const modelValue = event.target.modelValue;
+    emit(
+      'update:value',
+      modelValue === BLANK_VALUE ? '' : String(modelValue ?? ''),
+      'discrete'
+    );
+  });
+</script>
+
+<template>
+  <craft-select-color
+    :name="editable ? inputName(control.path) : ''"
+    .modelValue="
+      !value && control.props.allowTransparent
+        ? BLANK_VALUE
+        : String(value ?? '')
+    "
+    :allow-transparent="control.props.allowTransparent ?? false"
+    :blank-label="control.props.blankLabel"
+    :colors="control.props.colors ?? undefined"
+    :required="editable && required"
+    :readonly="control.mode === 'readOnly'"
+    :disabled="!editable"
+    .validators="serverErrorValidators(invalid)"
+    @model-value-changed="onModelValueChanged"
+  ></craft-select-color>
+</template>
diff --git a/resources/js/modules/forms/ComboboxCreateOption.test.ts b/resources/js/modules/forms/ComboboxCreateOption.test.ts
new file mode 100644
index 00000000000..14c3fa8ef7b
--- /dev/null
+++ b/resources/js/modules/forms/ComboboxCreateOption.test.ts
@@ -0,0 +1,230 @@
+import {createApp, h, nextTick, ref} from 'vue';
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
+import '@craftcms/ui/components/combobox/combobox';
+import CraftComboboxVue from '@craftcms/ui/vue/CraftCombobox.vue';
+import ComboboxControl from './ComboboxControl.vue';
+
+const slideout = vi.hoisted(() => ({openSlideout: vi.fn()}));
+vi.mock('@/common/slideouts', () => slideout);
+
+const options = [
+  {label: 'Existing', value: '42'},
+  {
+    label: 'Create category',
+    value: '__add__',
+    data: {
+      create: {
+        url: '/categories/new',
+        resultKey: 'category',
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+  },
+];
+
+let app: ReturnType<typeof createApp> | undefined;
+let container: HTMLElement;
+const attachInternals = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'attachInternals'
+);
+
+beforeEach(() => {
+  Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
+    configurable: true,
+    value: () => ({setFormValue: vi.fn(), setValidity: vi.fn()}),
+  });
+});
+
+afterEach(() => {
+  app?.unmount();
+  container?.remove();
+  slideout.openSlideout.mockReset();
+  if (attachInternals) {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'attachInternals',
+      attachInternals
+    );
+  } else {
+    Reflect.deleteProperty(HTMLElement.prototype, 'attachInternals');
+  }
+});
+
+async function fixture(multiple = false, items: ComboboxItem[] = options) {
+  container = document.createElement('div');
+  document.body.append(container);
+  const selection = ref<string | string[]>(multiple ? ['42'] : '42');
+  const changes = vi.fn(
+    (value: string | string[]) => (selection.value = value)
+  );
+  app = createApp({
+    render: () =>
+      h(ComboboxControl, {
+        control: {
+          component: 'craft:combobox',
+          type: 'Combobox',
+          path: ['category'],
+          deltaGroup: ['category'],
+          mode: 'editable',
+          props: {options: items, multiple},
+        },
+        value: selection.value,
+        editable: true,
+        invalid: false,
+        required: false,
+        'onUpdate:value': changes,
+      }),
+  });
+  app.mount(container);
+  await nextTick();
+  const combobox = container.querySelector('craft-combobox') as CraftCombobox;
+  await combobox.updateComplete;
+  await vi.waitFor(() =>
+    expect(combobox.querySelectorAll('craft-option')).toHaveLength(2)
+  );
+  return {combobox, selection, changes};
+}
+
+it('selects ordinary options without opening a slideout', async () => {
+  const {combobox, selection} = await fixture();
+  selection.value = '';
+  await nextTick();
+  combobox.querySelectorAll<HTMLElement>('craft-option')[0]!.click();
+
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  expect(slideout.openSlideout).not.toHaveBeenCalled();
+});
+
+it('exposes a native selection event before syncing the Vue model', async () => {
+  container = document.createElement('div');
+  document.body.append(container);
+  const selection = ref('');
+  const updated = vi.fn(
+    (value: string | string[] | number | boolean | undefined) =>
+      (selection.value = String(value ?? ''))
+  );
+  app = createApp({
+    render: () =>
+      h(CraftComboboxVue, {
+        options,
+        modelValue: selection.value,
+        'onUpdate:modelValue': updated,
+        'onModel-value-changed': (
+          event: CustomEvent,
+          cancelModelUpdate: () => void
+        ) => {
+          if ((event.target as CraftCombobox).modelValue === '__add__') {
+            cancelModelUpdate();
+          }
+        },
+      }),
+  });
+  app.mount(container);
+  const combobox = container.querySelector('craft-combobox') as CraftCombobox;
+  await vi.waitFor(() =>
+    expect(combobox.querySelectorAll('craft-option')).toHaveLength(2)
+  );
+
+  combobox.querySelectorAll<HTMLElement>('craft-option')[0]!.click();
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  updated.mockClear();
+
+  combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+  await nextTick();
+  expect(updated).not.toHaveBeenCalled();
+});
+
+it('opens the create screen when its option is selected by keyboard', async () => {
+  slideout.openSlideout.mockResolvedValue(null);
+  const {combobox, selection} = await fixture();
+  const input = combobox.querySelector('input')!;
+  input.focus();
+  input.value = 'Create';
+  input.dispatchEvent(new Event('input', {bubbles: true}));
+  await vi.waitFor(() => expect(combobox.activeIndex).toBe(0));
+  input.dispatchEvent(
+    new KeyboardEvent('keydown', {key: 'Enter', bubbles: true})
+  );
+
+  await vi.waitFor(() =>
+    expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+  );
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  expect(combobox.modelValue).toBe('42');
+});
+
+it.each([false, true])(
+  'keeps the prior selection on cancel and selects the saved record (multiple: %s)',
+  async (multiple) => {
+    slideout.openSlideout.mockResolvedValue(null);
+    const {combobox, selection, changes} = await fixture(multiple);
+    combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+
+    await vi.waitFor(() =>
+      expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+    );
+    await vi.waitFor(() =>
+      expect(combobox.modelValue).toEqual(multiple ? ['42'] : '42')
+    );
+    expect(selection.value).toEqual(multiple ? ['42'] : '42');
+    expect(changes).not.toHaveBeenCalled();
+
+    const [url, config] = slideout.openSlideout.mock.calls[0]!;
+    expect(url).toBe('/categories/new');
+    config.onSaved({data: {category: {name: 'New category', id: 73}}});
+    await vi.waitFor(() =>
+      expect(selection.value).toEqual(multiple ? ['42', '73'] : '73')
+    );
+    expect(
+      combobox.options.flatMap((item) =>
+        item.type === 'optgroup'
+          ? item.options.map((option) => option.value)
+          : [item.value]
+      )
+    ).toEqual(['42', '73', '__add__']);
+    expect(changes).toHaveBeenCalledTimes(1);
+    if (!multiple) {
+      expect(combobox.querySelector('input')?.value).toBe('New category');
+    }
+  }
+);
+
+it('selects a created volume by UID rather than its numeric ID', async () => {
+  slideout.openSlideout.mockResolvedValue(null);
+  const {combobox, selection} = await fixture(false, [
+    {label: 'Existing', value: '42'},
+    {
+      label: 'Create a new volume…',
+      value: '__createVolume__',
+      data: {
+        create: {
+          url: '/settings/assets/new',
+          resultKey: 'volume',
+          labelField: 'name',
+          valueField: 'uid',
+        },
+      },
+    },
+  ]);
+  combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+
+  await vi.waitFor(() =>
+    expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+  );
+  slideout.openSlideout.mock.calls[0]![1].onSaved({
+    data: {volume: {id: 73, name: 'User Photos', uid: 'volume-uid'}},
+  });
+
+  await vi.waitFor(() => expect(selection.value).toBe('volume-uid'));
+  expect(
+    combobox.options.flatMap((item) =>
+      item.type === 'optgroup'
+        ? item.options.map((option) => option.value)
+        : [item.value]
+    )
+  ).toEqual(['42', 'volume-uid', '__createVolume__']);
+});
diff --git a/resources/js/modules/forms/ConditionBuilderControl.vue b/resources/js/modules/forms/ConditionBuilderControl.vue
index dec2592b67d..8f3f14e3945 100644
--- a/resources/js/modules/forms/ConditionBuilderControl.vue
+++ b/resources/js/modules/forms/ConditionBuilderControl.vue
@@ -17,6 +17,8 @@
 
   const emit = defineEmits<{
     (event: 'update:value', value: ConditionConfig, kind: 'discrete'): void;
+    /** Prevents the inner change event reaching FieldNode's FormChange listener. */
+    (event: 'change'): void;
   }>();
 
   const errors = computed(() =>
diff --git a/resources/js/modules/forms/FieldNode.vue b/resources/js/modules/forms/FieldNode.vue
index 73146475a2c..acd8f743c89 100644
--- a/resources/js/modules/forms/FieldNode.vue
+++ b/resources/js/modules/forms/FieldNode.vue
@@ -61,6 +61,7 @@
     /** Visually hides the label, keeping it available to screen readers. */
     labelSrOnly?: boolean;
     instructions?: string | null;
+    instructionsHtml?: string;
     required?: boolean;
     instructionsPosition?: 'before' | 'after';
     tip?: string;
@@ -282,7 +283,11 @@
     :id="fieldId(control.path)"
     :label="resolvedNode.props.label ?? undefined"
     :label-sr-only="resolvedNode.props.labelSrOnly || undefined"
-    :help-text="resolvedNode.props.instructions ?? undefined"
+    :help-text="
+      resolvedNode.props.instructionsHtml
+        ? undefined
+        : (resolvedNode.props.instructions ?? undefined)
+    "
     :instructions-position="resolvedNode.props.instructionsPosition"
     :required="Boolean(resolvedNode.props.required)"
     :readonly="control.mode === 'readOnly'"
@@ -312,6 +317,11 @@
         @change="onChange"
       />
     </div>
+    <span
+      v-if="resolvedNode.props.instructionsHtml"
+      slot="help-text"
+      v-html="resolvedNode.props.instructionsHtml"
+    />
     <span
       v-if="resolvedNode.props.tipHtml"
       slot="tip"
diff --git a/resources/js/modules/forms/GroupNode.vue b/resources/js/modules/forms/GroupNode.vue
index 3714eaaef61..01ae0054217 100644
--- a/resources/js/modules/forms/GroupNode.vue
+++ b/resources/js/modules/forms/GroupNode.vue
@@ -13,6 +13,7 @@
   type GroupNodeProps = {
     label?: string | null;
     collapsible?: boolean;
+    expanded?: boolean;
     /** Renders the group as one field rather than a section — see `Nodes\Group`. */
     asField?: boolean;
     instructions?: string | null;
@@ -102,6 +103,9 @@
     v-else
     :is="node.props.collapsible ? 'craft-disclosure' : 'fieldset'"
     :label="node.props.collapsible ? node.props.label : undefined"
+    :opened="
+      node.props.collapsible ? node.props.expanded || undefined : undefined
+    "
     :class="{
       [`width-${node.props.width}`]: Boolean(node.props.width),
       hidden: Boolean(node.props.hidden),
diff --git a/resources/js/modules/forms/TableControl.vue b/resources/js/modules/forms/TableControl.vue
index 21c11f22878..c94d33546bd 100644
--- a/resources/js/modules/forms/TableControl.vue
+++ b/resources/js/modules/forms/TableControl.vue
@@ -19,6 +19,7 @@
     minRows?: number;
     maxRows?: number;
     keyed?: boolean;
+    hiddenRows?: string[];
     defaultValues?: EditableTableRow;
     errors?: Record<string, Record<string, true>>;
   };
@@ -89,11 +90,14 @@
     const name = inputName(props.control.path);
     bodyElement.replaceChildren();
     rowEntries(rows).forEach(([rowId, row]) => {
+      const rowWithVisibility = props.control.props.hiddenRows?.includes(rowId)
+        ? {...row, _hidden: true}
+        : row;
       EditableTable.createRow(
         rowId,
         props.control.props.columns,
         name,
-        row,
+        rowWithVisibility,
         props.editable && props.control.props.allowReorder,
         props.editable && props.control.props.allowDelete,
         !props.editable
diff --git a/resources/js/modules/forms/TextControl.vue b/resources/js/modules/forms/TextControl.vue
index a380b3d7760..256fab2b6b6 100644
--- a/resources/js/modules/forms/TextControl.vue
+++ b/resources/js/modules/forms/TextControl.vue
@@ -25,6 +25,7 @@
     size?: number;
     dir?: string;
     monospace?: boolean;
+    suffix?: string;
     textExpanderTriggers?: TextExpanderTriggers;
   };
 
@@ -95,6 +96,9 @@
     @model-value-changed="onModelValueChanged"
   >
     <input :id="inputId" slot="input" />
+    <span v-if="control.props.suffix" slot="suffix">{{
+      control.props.suffix
+    }}</span>
   </craft-input>
   <craft-text-expander
     v-if="editable && control.props.textExpanderTriggers"
diff --git a/resources/js/modules/forms/combobox-create-option.ts b/resources/js/modules/forms/combobox-create-option.ts
new file mode 100644
index 00000000000..c81736584dc
--- /dev/null
+++ b/resources/js/modules/forms/combobox-create-option.ts
@@ -0,0 +1,123 @@
+import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {
+  ComboboxItem,
+  ComboboxOption,
+} from '@craftcms/ui/components/combobox/combobox';
+import {openSlideout} from '@/common/slideouts';
+
+type CreateSettings = {
+  url: string;
+  resultKey: string;
+  labelField: string;
+  valueField: string;
+};
+
+type CreateOption = ComboboxOption & {
+  data: {create: CreateSettings};
+};
+
+function createOption(
+  items: ComboboxItem[],
+  value: string
+): CreateOption | undefined {
+  for (const item of items) {
+    const options = item.type === 'optgroup' ? item.options : [item];
+    const option = options.find(
+      (option) => option.value === value && option.data?.create
+    );
+    if (option) {
+      return option as CreateOption;
+    }
+  }
+}
+
+function insertBefore(
+  items: ComboboxItem[],
+  trigger: CreateOption,
+  created: ComboboxOption
+): ComboboxItem[] {
+  return items.flatMap<ComboboxItem>((item) => {
+    if (item.type === 'optgroup') {
+      return [
+        {
+          ...item,
+          options: insertBefore(
+            item.options,
+            trigger,
+            created
+          ) as ComboboxOption[],
+        },
+      ];
+    }
+
+    return item.value === trigger.value ? [created, item] : [item];
+  });
+}
+
+export function handleCreateOption(
+  event: CustomEvent,
+  combobox: CraftCombobox,
+  options: ComboboxItem[],
+  previousValue: string | string[],
+  saved: (options: ComboboxItem[], value: string | string[]) => void
+): boolean {
+  const value = combobox.modelValue;
+  const triggerValue = Array.isArray(value)
+    ? value.find((item) => createOption(options, item))
+    : value;
+  const trigger = createOption(options, triggerValue ?? '');
+  if (!trigger || event.detail?.changeSource === 'input') {
+    return false;
+  }
+
+  event.stopImmediatePropagation();
+  queueMicrotask(() => {
+    combobox.modelValue = previousValue;
+    combobox.value = '';
+    combobox.opened = false;
+    const input = combobox.querySelector('input');
+    if (input && !Array.isArray(previousValue)) {
+      const selected = options
+        .flatMap((item) => (item.type === 'optgroup' ? item.options : [item]))
+        .find((item) => item.value === previousValue);
+      input.value = selected?.label ?? previousValue;
+    }
+  });
+
+  const {url, resultKey, labelField, valueField} = trigger.data.create;
+  void openSlideout(url, {
+    opener: combobox,
+    onSaved: ({data}) => {
+      const record = (data as Record<string, unknown> | undefined)?.[
+        resultKey
+      ] as Record<string, unknown> | undefined;
+      if (!record) {
+        throw new Error(`Combobox create response is missing "${resultKey}".`);
+      }
+
+      const label = record[labelField];
+      const value = record[valueField];
+      if (
+        (typeof label !== 'string' && typeof label !== 'number') ||
+        (typeof value !== 'string' && typeof value !== 'number')
+      ) {
+        throw new Error(
+          `Combobox create response has invalid fields for "${resultKey}".`
+        );
+      }
+
+      const option = {
+        label: String(label),
+        value: String(value),
+      };
+      saved(
+        insertBefore(options, trigger, option),
+        Array.isArray(previousValue)
+          ? [...previousValue, option.value]
+          : option.value
+      );
+    },
+  });
+
+  return true;
+}
diff --git a/resources/js/modules/forms/register.ts b/resources/js/modules/forms/register.ts
index 7ec4d5218bd..58313c31bde 100644
--- a/resources/js/modules/forms/register.ts
+++ b/resources/js/modules/forms/register.ts
@@ -7,6 +7,7 @@ import FieldNode from './FieldNode.vue';
 import ChoiceControl from './ChoiceControl.vue';
 import ConditionBuilderControl from './ConditionBuilderControl.vue';
 import ColorControl from './ColorControl.vue';
+import ColorSelectControl from './ColorSelectControl.vue';
 import ComboboxControl from './ComboboxControl.vue';
 import FormRenderer from './FormRenderer.vue';
 import GroupNode from './GroupNode.vue';
@@ -38,6 +39,7 @@ import HiddenFieldNode from './HiddenFieldNode.vue';
 import LineBreakNode from './LineBreakNode.vue';
 import PermissionTreeControl from './PermissionTreeControl.vue';
 import SeparatorNode from './SeparatorNode.vue';
+import AdminTableNode from './AdminTableNode.vue';
 import UserGroupSelectControl from './UserGroupSelectControl.vue';
 import './content-block-input';
 
@@ -75,11 +77,13 @@ export function registerFormComponents(
   components.register('craft:date-time', DateTimeControl);
   components.register('craft:time', TextControl);
   components.register('craft:color', ColorControl);
+  components.register('craft:color-select', ColorSelectControl);
   components.register('craft:money', MoneyControl);
   components.register('craft:permission-tree', PermissionTreeControl);
   components.register('craft:user-group-select', UserGroupSelectControl);
   components.register('craft:markdown', MarkdownControl);
   components.register('craft:table', TableControl);
+  components.register('craft:admin-table', AdminTableNode);
   components.register('craft:link', LinkControl);
   components.register('craft:address', AddressControl);
   components.register('craft:icon-picker', IconPickerControl);
diff --git a/resources/js/modules/settings/composables/useSettingsSave.ts b/resources/js/modules/settings/composables/useSettingsSave.ts
index 49944ff9c79..869bf1878fe 100644
--- a/resources/js/modules/settings/composables/useSettingsSave.ts
+++ b/resources/js/modules/settings/composables/useSettingsSave.ts
@@ -87,6 +87,7 @@ export function useSettingsSave<T extends object>(
     // Reset page state when this screen sends the user elsewhere, while saves
     // that remain on the current screen keep their local state by default.
     preserveState = !(redirect && redirectUrl.value),
+    action: actionOverride,
   }: FormSaveOptions = {}) {
     options.onBeforeSave?.();
 
@@ -109,7 +110,7 @@ export function useSettingsSave<T extends object>(
      * usual 422 — `asJsonFailure()` picks it.
      */
     async function submitInSlideout(retried = false): Promise<void> {
-      const route = action();
+      const route = actionOverride ?? action();
       const routeIsString = Object(route).constructor === String;
 
       form.clearErrors();
@@ -226,7 +227,7 @@ export function useSettingsSave<T extends object>(
 
           return payload;
         })
-        .submit(action(), {
+        .submit(actionOverride ?? action(), {
           ...submitOptions,
           onHttpException: (response) => {
             if (!passwordConfirmation || response.status !== 423 || retried) {
diff --git a/resources/js/pages/Form.test.ts b/resources/js/pages/Form.test.ts
index d9ff7f8db63..c5d679c9324 100644
--- a/resources/js/pages/Form.test.ts
+++ b/resources/js/pages/Form.test.ts
@@ -158,6 +158,18 @@ it('submits complete current values after a partial mutation', async () => {
   );
 });
 
+it('renders as a plain element with no save flow when there is nothing to submit to', async () => {
+  app = createApp(FormPage, {form: payload});
+  app.mount(container);
+  await nextTick();
+
+  const layoutCall = state.layout.mock.calls[0];
+  if (!layoutCall) throw new Error('Expected the layout registration.');
+  expect(layoutCall[0].onSave).toBeUndefined();
+
+  expect(container.querySelector('form')).toBeNull();
+});
+
 it('passes screen layout options through to the app layout', () => {
   app = createApp(FormPage, {
     form: payload,
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index 6bf9bf4b87b..755ec72fc91 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -2,12 +2,15 @@
   import {actionClient} from '@craftcms/ui';
   import type {UrlMethodPair} from '@inertiajs/core';
   import {useForm} from '@inertiajs/vue3';
-  import {shallowRef, toRaw} from 'vue';
+  import {computed, shallowRef, toRaw} from 'vue';
   import {
     useAppLayout,
     type UseAppLayoutOptions,
   } from '@/common/composables/useAppLayout';
+  import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import FormRenderer from '@/modules/forms/FormRenderer.vue';
+  import type {ActionItem, FormAltAction} from '@/common/types';
   import type {
     FormChange,
     FormChangeKind,
@@ -21,10 +24,15 @@
 
   const props = defineProps<{
     form: FormPayload;
-    submit: UrlMethodPair;
+    /** Omit for node-only screens with no form submission. */
+    submit?: UrlMethodPair;
     elevatedFields?: string[] | '*';
     refreshUrl?: string;
     defaultFormActions?: UseAppLayoutOptions['defaultFormActions'];
+    formActions?: FormAltAction[];
+    /** Server-rendered markup for the details column. */
+    metadataHtml?: string;
+    contentMaxWidth?: boolean;
   }>();
   const emit = defineEmits<{
     (event: 'change', change: FormChange, values: FormPayload['values']): void;
@@ -36,42 +44,79 @@
   const elevatedFields = props.elevatedFields;
   const {advanceBaseline, errors, onMutation, renderer} =
     useInertiaFormRenderer(inertiaForm, () => props.form);
-  const {save} = useSettingsSave(inertiaForm, () => props.submit, {
-    transform: () => renderer.value?.currentValues() ?? props.form.values,
-    onSuccess: () => {
-      elevatedBaseline.value = structuredClone(
-        toRaw(renderer.value?.currentValues() ?? props.form.values)
-      );
-      advanceBaseline();
-    },
-    passwordConfirmation: elevatedFields
-      ? {
-          required: () => {
-            const values = renderer.value?.currentValues() ?? props.form.values;
-            const fields =
-              elevatedFields === '*'
-                ? [
-                    ...new Set([
-                      ...Object.keys(elevatedBaseline.value),
-                      ...Object.keys(values),
-                    ]),
-                  ]
-                : elevatedFields;
 
-            return fields.some(
-              (field) =>
-                normalize(values[field]) !==
-                normalize(elevatedBaseline.value[field])
-            );
-          },
-        }
-      : undefined,
+  const save = props.submit
+    ? useSettingsSave(inertiaForm, () => props.submit!, {
+        transform: () => renderer.value?.currentValues() ?? props.form.values,
+        onSuccess: () => {
+          elevatedBaseline.value = structuredClone(
+            toRaw(renderer.value?.currentValues() ?? props.form.values)
+          );
+          advanceBaseline();
+        },
+        passwordConfirmation: elevatedFields
+          ? {
+              required: () => {
+                const values =
+                  renderer.value?.currentValues() ?? props.form.values;
+                const fields =
+                  elevatedFields === '*'
+                    ? [
+                        ...new Set([
+                          ...Object.keys(elevatedBaseline.value),
+                          ...Object.keys(values),
+                        ]),
+                      ]
+                    : elevatedFields;
+
+                return fields.some(
+                  (field) =>
+                    normalize(values[field]) !==
+                    normalize(elevatedBaseline.value[field])
+                );
+              },
+            }
+          : undefined,
+      }).save
+    : undefined;
+
+  const translatedFormActions = computed<ActionItem[]>(
+    () =>
+      props.formActions?.map((altAction) => ({
+        label: altAction.label,
+        variant: altAction.destructive ? 'danger' : undefined,
+        onClick: () => {
+          if (altAction.confirm && !window.confirm(altAction.confirm)) {
+            return;
+          }
+
+          save?.({
+            action: altAction.action
+              ? {url: altAction.action, method: 'post'}
+              : undefined,
+            data: altAction.params,
+          });
+        },
+      })) ?? []
+  );
+
+  const isBareTable = computed(() => {
+    const [node, ...rest] = props.form.nodes;
+    return (
+      rest.length === 0 &&
+      node?.component === 'craft:admin-table' &&
+      node.props.bordered === false
+    );
   });
 
+  // `PageScreen` shows the Save button purely on `form` being truthy (`v-if="form"`) —
+  // it doesn't look at `onSave`/`submit`. Passing `inertiaForm` unconditionally would
+  // show a Save button with nothing to save on a node-only screen (a listing, say).
   useAppLayout({
-    form: inertiaForm,
+    form: props.submit ? inertiaForm : null,
     defaultFormActions: props.defaultFormActions,
-    contentMaxWidth: true,
+    formActions: translatedFormActions.value,
+    contentMaxWidth: props.contentMaxWidth ?? true,
     onSave: save,
   });
 
@@ -110,26 +155,37 @@
 </script>
 
 <template>
-  <form @submit.prevent="save()">
+  <component :is="submit ? 'form' : 'div'" @submit.prevent="save?.()">
     <CpContainer>
-      <craft-field-group class="py-4">
-        <FormRenderer
-          ref="renderer"
-          :payload="form"
-          :refresh="refreshUrl ? refresh : undefined"
-          :errors="errors"
-          @update:mutation="onMutation"
-          @change="onChange"
+      <component
+        :is="isBareTable ? 'div' : 'craft-pane'"
+        v-bind="isBareTable ? {} : {appearance: 'raised'}"
+      >
+        <component
+          :is="isBareTable ? 'div' : 'craft-field-group'"
+          v-bind="isBareTable ? {} : {class: 'py-4'}"
         >
-          <template
-            v-for="(_, slotName) in $slots"
-            :key="slotName"
-            #[slotName]="slotProps"
+          <FormRenderer
+            ref="renderer"
+            :payload="form"
+            :refresh="refreshUrl ? refresh : undefined"
+            :errors="errors"
+            @update:mutation="onMutation"
+            @change="onChange"
           >
-            <slot :name="slotName" v-bind="slotProps" />
-          </template>
-        </FormRenderer>
-      </craft-field-group>
+            <template
+              v-for="(_, slotName) in $slots"
+              :key="slotName"
+              #[slotName]="slotProps"
+            >
+              <slot :name="slotName" v-bind="slotProps" />
+            </template>
+          </FormRenderer>
+        </component>
+      </component>
     </CpContainer>
-  </form>
+  </component>
+  <LayoutSlot v-if="metadataHtml" name="content-details">
+    <DynamicHtmlRenderer :html="metadataHtml" />
+  </LayoutSlot>
 </template>
diff --git a/resources/js/pages/settings/users/Settings.test.ts b/resources/js/pages/settings/users/Settings.test.ts
index 5a9a78a7efb..461ea74e86f 100644
--- a/resources/js/pages/settings/users/Settings.test.ts
+++ b/resources/js/pages/settings/users/Settings.test.ts
@@ -12,51 +12,15 @@ interface CheckboxGroupElement extends HTMLElement {
 }
 
 const state = vi.hoisted(() => ({
-  openSlideout: vi.fn(),
-  setPhotoVolume: vi.fn(),
   setRequire2fa: vi.fn(),
 }));
 
-vi.mock('@actions/Settings/VolumesController', () => ({
-  create: {url: () => '/settings/assets/new'},
-}));
-
-vi.mock('@/common/slideouts', () => ({
-  openSlideout: state.openSlideout,
-}));
-
-vi.mock('@craftcms/ui/vue/CraftCombobox.vue', () => ({
-  default: defineComponent({
-    emits: ['update:modelValue'],
-    setup:
-      (_, {emit}) =>
-      () =>
-        h('button', {
-          'data-create-volume': '',
-          onClick: () => emit('update:modelValue', '__createVolume__'),
-        }),
-  }),
-}));
-
 vi.mock('@/pages/Form.vue', () => ({
   default: defineComponent({
     setup:
       (_, {slots}) =>
       () =>
         h('div', [
-          slots.photoVolumeUid?.({
-            control: control('photoVolumeUid', {
-              options: [
-                {label: 'Existing', value: 'existing'},
-                {label: 'Create a new volume…', value: '__createVolume__'},
-              ],
-            }),
-            value: '',
-            setValue: state.setPhotoVolume,
-            editable: true,
-            invalid: false,
-            required: false,
-          }),
           slots.require2fa?.({
             control: control('require2fa', {
               options: [
@@ -87,8 +51,6 @@ let app: ReturnType<typeof createApp>;
 let container: HTMLElement;
 
 beforeEach(() => {
-  state.openSlideout.mockReset();
-  state.setPhotoVolume.mockReset();
   state.setRequire2fa.mockReset();
   container = document.createElement('div');
   document.body.append(container);
@@ -99,24 +61,6 @@ afterEach(() => {
   container.remove();
 });
 
-it('selects a volume created from the combobox', async () => {
-  mount();
-  container.querySelector<HTMLElement>('[data-create-volume]')?.click();
-
-  expect(state.openSlideout).toHaveBeenCalledWith(
-    '/settings/assets/new',
-    expect.objectContaining({onSaved: expect.any(Function)})
-  );
-
-  const openCall = state.openSlideout.mock.calls[0];
-  if (!openCall) throw new Error('Expected the volume slideout to open.');
-  openCall[1].onSaved({
-    data: {volume: {name: 'User Photos', uid: 'new-volume'}},
-  });
-
-  expect(state.setPhotoVolume).toHaveBeenCalledWith('new-volume');
-});
-
 it('keeps the exclusive two-step verification value shape', () => {
   mount();
   const group = container.querySelector<CheckboxGroupElement>(
diff --git a/resources/js/pages/settings/users/Settings.vue b/resources/js/pages/settings/users/Settings.vue
index 9383d999346..5c67d98a0a3 100644
--- a/resources/js/pages/settings/users/Settings.vue
+++ b/resources/js/pages/settings/users/Settings.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import CraftCombobox from '@craftcms/ui/vue/CraftCombobox.vue';
   import type {UrlMethodPair} from '@inertiajs/core';
-  import {ref} from 'vue';
-  import {create as createVolume} from '@actions/Settings/VolumesController';
-  import {openSlideout} from '@/common/slideouts';
   import type {SelectOption} from '@/common/types';
   import type {
     FormControlOverrideProps,
@@ -11,26 +7,15 @@
     FormPayload,
     FormValue,
   } from '@/modules/forms/types';
-  import {inputName, serverErrorValidators} from '@/modules/forms/runtime';
+  import {inputName} from '@/modules/forms/runtime';
   import FormPage from '@/pages/Form.vue';
 
-  const createVolumeOptionValue = '__createVolume__';
-
-  interface VolumeSaveData {
-    volume?: {
-      name: string;
-      uid: string;
-    };
-  }
-
   const props = defineProps<{
     form: FormPayload;
     submit: UrlMethodPair;
     refreshUrl: string | null;
   }>();
 
-  const createdPhotoVolumeOptions = ref<SelectOption[]>([]);
-
   function options(control: FormControlPayload): SelectOption[] {
     const options = control.props.options;
     if (!Array.isArray(options)) {
@@ -49,62 +34,6 @@
     });
   }
 
-  function photoVolumeOptions(control: FormControlPayload): SelectOption[] {
-    const configured = options(control);
-    const configuredValues = configured.map((option) => option.value);
-    const created = createdPhotoVolumeOptions.value.filter(
-      (option) => !configuredValues.includes(option.value)
-    );
-    const createOption = configured.filter(
-      (option) => option.value === createVolumeOptionValue
-    );
-
-    return [
-      ...configured.filter(
-        (option) => option.value !== createVolumeOptionValue
-      ),
-      ...created,
-      ...createOption,
-    ];
-  }
-
-  function updatePhotoVolume(
-    value: unknown,
-    setValue: FormControlOverrideProps['setValue']
-  ): void {
-    if (value === createVolumeOptionValue) {
-      createPhotoVolume(setValue);
-      return;
-    }
-
-    setValue(String(value ?? ''), 'typing');
-  }
-
-  function createPhotoVolume(
-    setValue: FormControlOverrideProps['setValue']
-  ): void {
-    void openSlideout(createVolume.url(), {
-      onSaved: ({data}) => {
-        // SAFETY: the volume create endpoint returns its documented saved volume.
-        const volume = (data as VolumeSaveData | undefined)?.volume;
-
-        if (!volume) {
-          throw new Error(
-            'The saved volume response did not include a volume.'
-          );
-        }
-
-        createdPhotoVolumeOptions.value = [
-          ...createdPhotoVolumeOptions.value.filter(
-            (option) => option.value !== volume.uid
-          ),
-          {label: volume.name, value: volume.uid},
-        ];
-        setValue(volume.uid);
-      },
-    });
-  }
-
   function require2faValues(value: FormValue): string[] {
     if (value === 'all') {
       return ['all'];
@@ -138,33 +67,6 @@
     :refresh-url="refreshUrl ?? undefined"
     :default-form-actions="[]"
   >
-    <template
-      #photoVolumeUid="{
-        control,
-        value,
-        label,
-        setValue,
-        editable,
-        invalid,
-        required,
-      }"
-    >
-      <CraftCombobox
-        :name="editable ? inputName(control.path) : ''"
-        :model-value="String(value ?? '')"
-        :options="photoVolumeOptions(control)"
-        :clearable="Boolean(control.props.clearable)"
-        :require-option-match="Boolean(control.props.requireOptionMatch)"
-        :show-all-on-empty="Boolean(control.props.showAllOnEmpty)"
-        :required="editable && required"
-        :readonly="control.mode === 'readOnly'"
-        :disabled="control.mode === 'disabled'"
-        :validators="serverErrorValidators(invalid)"
-        :aria-label="label"
-        @update:model-value="updatePhotoVolume($event, setValue)"
-      />
-    </template>
-
     <template
       #require2fa="{control, value, label, setValue, editable, invalid}"
     >
diff --git a/resources/templates/_includes/forms/editableTable.twig b/resources/templates/_includes/forms/editableTable.twig
index 5c3a4aa68f7..31cae5e511c 100644
--- a/resources/templates/_includes/forms/editableTable.twig
+++ b/resources/templates/_includes/forms/editableTable.twig
@@ -113,7 +113,7 @@
         {% set rowNumber = loop.index %}
         {% set rowName = 'Row {index}'|t('app', {index: rowNumber}) %}
         {% set actionBtnLabel = "#{rowName} #{'Actions'|t('app')}" %}
-        <tr data-id="{{ rowId }}">
+        <tr data-id="{{ rowId }}"{% if rowId in (hiddenRows ?? []) %} hidden class="hidden"{% endif %}>
           {% 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 %}
diff --git a/resources/templates/_includes/forms/money.twig b/resources/templates/_includes/forms/money.twig
index d450ddef06d..207f592c2ee 100644
--- a/resources/templates/_includes/forms/money.twig
+++ b/resources/templates/_includes/forms/money.twig
@@ -24,15 +24,33 @@
   decimals: decimals,
   }|merge(jsSettings ?? {}) %}
 
-{{ hiddenInput("#{name}[locale]", formattingLocale) }}
-
+{#
+  Everything renders inside one root element on purpose: the surrounding `craft-field`
+  assigns its `input` slot by setting the `slot` attribute directly on this template's first
+  (and, for a correct render, only) top-level tag (see `ViewComponent::slotted()`) rather than
+  wrapping it — a wrapper would break `craft-input-money`'s own styling assumptions elsewhere.
+  The hidden locale input used to be its own sibling ahead of this div; with two top-level
+  elements, the slot attribute landed on the hidden input instead of the visible one, leaving
+  the actual money input (and everything else in here) unslotted and invisible.
+#}
 <div class="money-container">
+    {{ hiddenInput("#{name}[locale]", formattingLocale) }}
     {% if currencyLabel and showCurrency ?? true %}
         <div class="money-currency-label">
             <span>{{ currencyLabel }}</span>
         </div>
     {% endif %}
+    {#
+      `name` must be passed explicitly here, not just folded into `inputAttributes` above:
+      `text.twig`'s underlying `FormFields::textFromConfig()` sets the actual rendered
+      `<input>` name from the config's own top-level `name` key via a dedicated `->name()`
+      call, separate from (and taking priority over) whatever `inputAttributes['name']`
+      holds. Without this, `{% include %}`'s implicit scope inheritance (no `only`) leaks
+      this template's own ambient `name` (e.g. `baseRate`) through untouched, so the
+      rendered input posts as a plain scalar instead of `{name}[value]`.
+    #}
     {% include '_includes/forms/text' with {
+        name: inputAttributes.name,
         inputAttributes: inputAttributes,
     } %}
     {% if showClear %}
diff --git a/src/Cp/Components/SelectColor.php b/src/Cp/Components/SelectColor.php
new file mode 100644
index 00000000000..ef7f59772fe
--- /dev/null
+++ b/src/Cp/Components/SelectColor.php
@@ -0,0 +1,123 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Support\Json;
+
+class SelectColor extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+
+    protected ?string $name = null;
+
+    protected ?string $value = null;
+
+    protected ?string $label = null;
+
+    protected bool $allowTransparent = false;
+
+    protected ?string $blankLabel = null;
+
+    /** @var list<string>|null */
+    protected ?array $colors = null;
+
+    protected bool $required = false;
+
+    protected bool $readOnly = false;
+
+    protected ?string $describedBy = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-select-color';
+    }
+
+    public function name(?string $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function value(?string $value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    public function label(?string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function allowTransparent(bool $allowTransparent = true): static
+    {
+        $this->allowTransparent = $allowTransparent;
+
+        return $this;
+    }
+
+    public function blankLabel(?string $blankLabel): static
+    {
+        $this->blankLabel = $blankLabel;
+
+        return $this;
+    }
+
+    /**
+     * @param  list<string>|null  $colors
+     */
+    public function colors(?array $colors): static
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    public function required(bool $required = true): static
+    {
+        $this->required = $required;
+
+        return $this;
+    }
+
+    public function readOnly(bool $readOnly = true): static
+    {
+        $this->readOnly = $readOnly;
+
+        return $this;
+    }
+
+    public function describedBy(?string $describedBy): static
+    {
+        $this->describedBy = $describedBy;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'id' => $this->getId(),
+            'name' => $this->name,
+            'model-value' => $this->value,
+            'label' => $this->label,
+            'allow-transparent' => $this->allowTransparent,
+            'blank-label' => $this->blankLabel,
+            'colors' => $this->colors !== null ? Json::encode($this->colors) : null,
+            'required' => $this->required,
+            'readonly' => $this->readOnly,
+            'disabled' => $this->isDisabled(),
+            'aria' => ['describedby' => $this->describedBy],
+        ];
+    }
+}
diff --git a/src/Form/Controls/ColorSelect.php b/src/Form/Controls/ColorSelect.php
new file mode 100644
index 00000000000..3d188e63c99
--- /dev/null
+++ b/src/Form/Controls/ColorSelect.php
@@ -0,0 +1,85 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Controls;
+
+use CraftCms\Cms\Cp\Components\SelectColor as SelectColorComponent;
+use CraftCms\Cms\Form\ControlPayload;
+use CraftCms\Cms\Form\FormHtmlRenderer;
+use Illuminate\Support\Arr;
+
+/** A palette color control whose value is a color slug or null. */
+class ColorSelect extends Control
+{
+    private bool $allowTransparent = false;
+
+    private ?string $blankLabel = null;
+
+    /** @var list<string>|null */
+    private ?array $colors = null;
+
+    public static function renderHtml(ControlPayload $control, mixed $value, array $attributes, FormHtmlRenderer $renderer): string
+    {
+        $allowTransparent = (bool) ($control->props['allowTransparent'] ?? false);
+
+        // The web component uses __blank__ internally; the form value remains null or empty.
+        $componentValue = match (true) {
+            $value !== null && $value !== '' => (string) $value,
+            $allowTransparent => '__blank__',
+            default => null,
+        };
+
+        return SelectColorComponent::make()
+            ->id($attributes['id'])
+            ->name($attributes['name'])
+            ->value($componentValue)
+            ->allowTransparent($allowTransparent)
+            ->blankLabel($control->props['blankLabel'] ?? null)
+            ->colors($control->props['colors'] ?? null)
+            ->disabled($attributes['disabled'])
+            ->readOnly($attributes['readonly'])
+            ->required($attributes['required'])
+            ->describedBy($attributes['aria']['describedby'] ?? null)
+            ->toHtml();
+    }
+
+    public function component(): string
+    {
+        return 'craft:color-select';
+    }
+
+    public function allowTransparent(bool $allowTransparent = true): static
+    {
+        $this->allowTransparent = $allowTransparent;
+
+        return $this;
+    }
+
+    public function blankLabel(?string $blankLabel): static
+    {
+        $this->blankLabel = $blankLabel;
+
+        return $this;
+    }
+
+    /**
+     * @param  list<string>|null  $colors
+     */
+    public function colors(?array $colors): static
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    #[\Override]
+    public function props(mixed $value = null): array
+    {
+        return Arr::whereNotNull([
+            'allowTransparent' => $this->allowTransparent ?: null,
+            'blankLabel' => $this->blankLabel,
+            'colors' => $this->colors,
+        ]);
+    }
+}
diff --git a/src/Form/Controls/Combobox.php b/src/Form/Controls/Combobox.php
index 6f1f8e1b629..4d2efcc97fa 100644
--- a/src/Form/Controls/Combobox.php
+++ b/src/Form/Controls/Combobox.php
@@ -6,6 +6,7 @@
 
 use CraftCms\Cms\Cp\Components\Combobox as ComboboxComponent;
 use CraftCms\Cms\Form\ControlPayload;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\FormHtmlRenderer;
 use Illuminate\Support\Arr;
 use InvalidArgumentException;
@@ -66,14 +67,34 @@ public function component(): string
         return 'craft:combobox';
     }
 
-    /** @param list<array<string, mixed>> $options */
+    /**
+     * Cast option values to strings so numeric IDs match the selected values.
+     *
+     * @param  list<array<string, mixed>|ComboboxCreateOption>  $options
+     */
     public function options(array $options): static
     {
-        $this->options = $options;
+        $this->options = array_map(self::stringifyOptionValue(...), $options);
 
         return $this;
     }
 
+    /** @param array<string, mixed>|ComboboxCreateOption $option */
+    private static function stringifyOptionValue(array|ComboboxCreateOption $option): array
+    {
+        if ($option instanceof ComboboxCreateOption) {
+            $option = $option->jsonSerialize();
+        }
+
+        if (($option['type'] ?? null) === 'optgroup') {
+            return [...$option, 'options' => array_map(self::stringifyOptionValue(...), $option['options'] ?? [])];
+        }
+
+        return array_key_exists('value', $option)
+            ? [...$option, 'value' => (string) $option['value']]
+            : $option;
+    }
+
     public function placeholder(?string $placeholder): static
     {
         $this->placeholder = $placeholder;
diff --git a/src/Form/Controls/Combobox/CreateOption.php b/src/Form/Controls/Combobox/CreateOption.php
new file mode 100644
index 00000000000..23710403d06
--- /dev/null
+++ b/src/Form/Controls/Combobox/CreateOption.php
@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Controls\Combobox;
+
+use JsonSerializable;
+
+/** An option that opens a resource's create screen and selects the saved record. */
+readonly class CreateOption implements JsonSerializable
+{
+    public function __construct(
+        public string $label,
+        public string $url,
+        public string $resultKey,
+        public string $value = '__add__',
+        public string $labelField = 'name',
+        public string $valueField = 'id',
+    ) {}
+
+    /** @return array<string, mixed> */
+    public function jsonSerialize(): array
+    {
+        return [
+            'label' => $this->label,
+            'value' => $this->value,
+            'data' => [
+                'create' => [
+                    'url' => $this->url,
+                    'resultKey' => $this->resultKey,
+                    'labelField' => $this->labelField,
+                    'valueField' => $this->valueField,
+                ],
+            ],
+        ];
+    }
+}
diff --git a/src/Form/Controls/Table.php b/src/Form/Controls/Table.php
index f61f7e155c4..8085f2d5351 100644
--- a/src/Form/Controls/Table.php
+++ b/src/Form/Controls/Table.php
@@ -31,6 +31,9 @@ class Table extends Control
 
     private bool $keyed = false;
 
+    /** @var list<string> */
+    private array $hiddenRows = [];
+
     /** @var array<string, mixed> */
     private array $defaultValues = [];
 
@@ -55,6 +58,7 @@ public static function renderHtml(ControlPayload $control, mixed $value, array $
             'maxRows' => $control->props['maxRows'] ?? null,
             'defaultValues' => $control->props['defaultValues'] ?? [],
             'static' => $attributes['name'] === null,
+            'hiddenRows' => $control->props['hiddenRows'] ?? [],
             'errors' => $control->props['errors'] ?? [],
         ]);
     }
@@ -114,6 +118,19 @@ public function keyed(bool $keyed = true): static
         return $this;
     }
 
+    /**
+     * Hide rows by key without removing their inputs or submitted values. Visibility
+     * is a prop so it can change on a reactive refresh without changing row values.
+     *
+     * @param  list<string>  $rowIds
+     */
+    public function hiddenRows(array $rowIds): static
+    {
+        $this->hiddenRows = $rowIds;
+
+        return $this;
+    }
+
     /** @param array<string, mixed> $defaultValues */
     public function defaultValues(array $defaultValues): static
     {
@@ -148,6 +165,7 @@ public function props(mixed $value = null): array
             'minRows' => $this->minRows,
             'maxRows' => $this->maxRows,
             'keyed' => $this->keyed,
+            'hiddenRows' => $this->hiddenRows ?: null,
             'defaultValues' => $this->defaultValues,
             'errors' => $this->errors ?: null,
         ]);
diff --git a/src/Form/Controls/Text.php b/src/Form/Controls/Text.php
index b7fb3edaa71..e8d1f72febe 100644
--- a/src/Form/Controls/Text.php
+++ b/src/Form/Controls/Text.php
@@ -42,6 +42,8 @@ class Text extends Control
 
     private bool $monospace = false;
 
+    private ?string $suffix = null;
+
     public static function renderHtml(ControlPayload $control, mixed $value, array $attributes, FormHtmlRenderer $renderer): string
     {
         $input = Input::make()
@@ -62,6 +64,7 @@ public static function renderHtml(ControlPayload $control, mixed $value, array $
             ->inputSize($control->props['size'] ?? null)
             ->orientation($control->props['dir'] ?? null)
             ->monospace((bool) ($control->props['monospace'] ?? false))
+            ->suffix($control->props['suffix'] ?? null)
             ->disabled($attributes['disabled'] || ($attributes['readonly'] && ($control->props['inputType'] ?? 'text') === 'range'))
             ->readOnly($attributes['readonly'])
             ->describedBy($attributes['aria']['describedby'] ?? null)
@@ -178,6 +181,13 @@ public function monospace(bool $monospace = true): static
         return $this;
     }
 
+    public function suffix(?string $suffix): static
+    {
+        $this->suffix = $suffix;
+
+        return $this;
+    }
+
     #[\Override]
     public function props(mixed $value = null): array
     {
@@ -196,6 +206,7 @@ public function props(mixed $value = null): array
             'size' => $this->size,
             'dir' => $this->dir,
             'monospace' => $this->monospace ?: null,
+            'suffix' => $this->suffix,
             ...$this->textExpanderProps(),
         ]);
     }
diff --git a/src/Form/FormControlTypes.php b/src/Form/FormControlTypes.php
index ae85b3d7a7f..ffbfbe1f5ea 100644
--- a/src/Form/FormControlTypes.php
+++ b/src/Form/FormControlTypes.php
@@ -11,6 +11,7 @@
 use CraftCms\Cms\Form\Controls\Checkbox;
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Color;
+use CraftCms\Cms\Form\Controls\ColorSelect;
 use CraftCms\Cms\Form\Controls\Combobox;
 use CraftCms\Cms\Form\Controls\ConditionBuilder;
 use CraftCms\Cms\Form\Controls\ContentBlock;
@@ -56,6 +57,7 @@ class FormControlTypes extends TypeRegistry
         Choice::class,
         ConditionBuilder::class,
         Color::class,
+        ColorSelect::class,
         Combobox::class,
         ContentBlock::class,
         Date::class,
diff --git a/src/Form/FormNodeTypes.php b/src/Form/FormNodeTypes.php
index ee6c3988844..fc87ef66401 100644
--- a/src/Form/FormNodeTypes.php
+++ b/src/Form/FormNodeTypes.php
@@ -19,6 +19,7 @@
 use CraftCms\Cms\Form\Nodes\Missing;
 use CraftCms\Cms\Form\Nodes\Separator;
 use CraftCms\Cms\Form\Nodes\Tab;
+use CraftCms\Cms\Form\Nodes\Table;
 use CraftCms\Cms\Form\Nodes\TemplateContent;
 use Illuminate\Container\Attributes\Singleton;
 
@@ -46,6 +47,7 @@ class FormNodeTypes extends TypeRegistry
         Missing::class,
         Separator::class,
         Tab::class,
+        Table::class,
         TemplateContent::class,
     ];
 }
diff --git a/src/Form/Nodes/Callout.php b/src/Form/Nodes/Callout.php
index 5b2f012cd18..0ef300b1e89 100644
--- a/src/Form/Nodes/Callout.php
+++ b/src/Form/Nodes/Callout.php
@@ -23,6 +23,8 @@ class Callout implements Node
 
     private ?string $appearance = null;
 
+    private string|int|null $padding = null;
+
     private ?string $icon = null;
 
     private bool $dismissible = false;
@@ -40,6 +42,7 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
             ->variant($node->props['variant'])
             ->appearance($node->props['appearance'] ?? null)
             ->icon($node->props['icon'] ?? null)
+            ->padding($node->props['padding'] ?? null)
             ->content(new HtmlString($node->props['html']))
             ->attributes([
                 'class' => ["width-{$node->props['width']}"],
@@ -68,6 +71,13 @@ public function appearance(?string $appearance): static
         return $this;
     }
 
+    public function padding(string|int|null $padding): static
+    {
+        $this->padding = $padding;
+
+        return $this;
+    }
+
     public function icon(?string $icon): static
     {
         $this->icon = $icon;
@@ -108,6 +118,7 @@ public function props(): array
                 'appearance' => $this->appearance,
                 'icon' => $this->icon,
             ], fn (?string $value): bool => $value !== null),
+            ...($this->padding !== null ? ['padding' => $this->padding] : []),
             'dismissible' => $this->dismissible,
             'width' => $this->width,
         ];
diff --git a/src/Form/Nodes/Field.php b/src/Form/Nodes/Field.php
index f7824791452..476723b443a 100644
--- a/src/Form/Nodes/Field.php
+++ b/src/Form/Nodes/Field.php
@@ -128,6 +128,9 @@ public function labelSrOnly(bool $labelSrOnly = true): static
         return $this;
     }
 
+    /**
+     * Parses markdown and preserves inline HTML, like {@see tip()} and {@see warning()}.
+     */
     public function instructions(?string $instructions): static
     {
         $this->instructions = $instructions;
@@ -240,6 +243,7 @@ public function props(): array
             ...Arr::whereNotNull([
                 'labelSrOnly' => $this->labelSrOnly ?: null,
                 'instructionsPosition' => $this->instructionsPosition !== 'before' ? $this->instructionsPosition : null,
+                'instructionsHtml' => $this->noticeHtml($this->instructions),
                 'tip' => $this->tip,
                 'tipHtml' => $this->noticeHtml($this->tip),
                 'warning' => $this->warning,
diff --git a/src/Form/Nodes/Group.php b/src/Form/Nodes/Group.php
index b89a459f99a..b20c565b095 100644
--- a/src/Form/Nodes/Group.php
+++ b/src/Form/Nodes/Group.php
@@ -49,6 +49,8 @@ class Group extends Container
 
     private bool $collapsible = false;
 
+    private bool $expanded = false;
+
     private bool $asField = false;
 
     private ?string $instructions = null;
@@ -113,6 +115,14 @@ public function collapsible(bool $collapsible = true): static
         return $this;
     }
 
+    /** Ignored unless the group is {@see collapsible()}. */
+    public function expanded(bool $expanded = true): static
+    {
+        $this->expanded = $expanded;
+
+        return $this;
+    }
+
     /**
      * Renders the group as one field rather than a section — see the class
      * docblock. Takes precedence over {@see self::collapsible()}.
@@ -184,6 +194,7 @@ public function props(): array
         return [
             'label' => $this->label,
             ...($this->collapsible && ! $this->asField ? ['collapsible' => true] : []),
+            ...($this->collapsible && ! $this->asField && $this->expanded ? ['expanded' => true] : []),
             ...($this->asField ? ['asField' => true] : []),
             ...Arr::whereNotNull([
                 'instructions' => $this->instructions,
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
new file mode 100644
index 00000000000..5ee01c99d3f
--- /dev/null
+++ b/src/Form/Nodes/Table.php
@@ -0,0 +1,394 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Nodes;
+
+use CraftCms\Cms\Form\Contracts\Control;
+use CraftCms\Cms\Form\Contracts\Node;
+use CraftCms\Cms\Form\FormHtmlRenderer;
+use CraftCms\Cms\Form\FormPayload;
+use CraftCms\Cms\Form\NodePayload;
+use CraftCms\Cms\Shared\Enums\Color;
+use CraftCms\Cms\Support\Html;
+use Illuminate\Support\Traits\Conditionable;
+
+use function CraftCms\Cms\t;
+
+/** A listing of rows supplied through node props, not form values. */
+class Table implements Node
+{
+    use Conditionable;
+
+    /** @var list<array{key: string, label: string}> */
+    private array $columns = [];
+
+    /** @var list<array<string, mixed>> */
+    private array $rows = [];
+
+    private ?string $dataUrl = null;
+
+    private int $perPage = 100;
+
+    private ?string $moveToPageUrl = null;
+
+    private ?string $emptyMessage = null;
+
+    private ?string $createLabel = null;
+
+    private ?string $createUrl = null;
+
+    /** @var list<array{label: string, url: string}>|null */
+    private ?array $createMenuItems = null;
+
+    private ?string $reorderUrl = null;
+
+    private ?string $reorderSuccessMessage = null;
+
+    private ?string $reorderFailMessage = null;
+
+    private ?string $deleteUrl = null;
+
+    private ?string $deleteConfirmMessage = null;
+
+    private bool $bulkDeletable = false;
+
+    /** @var list<array<string, mixed>> */
+    private array $bulkActions = [];
+
+    /** @var list<array<string, mixed>> */
+    private array $statusActions = [];
+
+    private bool $searchable = false;
+
+    private ?string $searchPlaceholder = null;
+
+    private bool $bordered = false;
+
+    public function __construct(private readonly string $uid) {}
+
+    public static function make(string $uid): self
+    {
+        return new self($uid);
+    }
+
+    /** @param list<array{key: string, label: string}> $columns */
+    public function columns(array $columns): static
+    {
+        $this->columns = $columns;
+
+        return $this;
+    }
+
+    /**
+     * Rows are keyed by column `key`, with an `id` when reordering or deleting.
+     * Cells accept scalars, `['label' => string, 'url' => ?string]` links, lists of
+     * links, `['label' => string, 'items' => list<links>]` menus, `['icon' => string,
+     * 'label' => ?string]` icons, or `['html' => string]` markup. HTML is rendered
+     * without sanitization in both renderers. Encode untrusted content with
+     * {@see Html::encode()} before passing it.
+     *
+     * `_deletable => false` suppresses deletion of one row. `_status` accepts a
+     * boolean or status string and renders an indicator in the first column.
+     * `_search` overrides client-side search text; otherwise columns' text is used.
+     *
+     * @param  list<array<string, mixed>>  $rows
+     */
+    public function rows(array $rows): static
+    {
+        $this->rows = self::prepareRows($rows);
+        $this->dataUrl = null;
+
+        return $this;
+    }
+
+    /**
+     * Resolve `_status` on rows returned by a {@see dataUrl()} endpoint; {@see rows()}
+     * calls this automatically for upfront rows.
+     *
+     * @param  list<array<string, mixed>>  $rows
+     * @return list<array<string, mixed>>
+     */
+    public static function prepareRows(array $rows): array
+    {
+        return array_map(self::resolveRowStatus(...), $rows);
+    }
+
+    /** @param array<string, mixed> $row */
+    private static function resolveRowStatus(array $row): array
+    {
+        if (! array_key_exists('_status', $row) || $row['_status'] === null) {
+            return $row;
+        }
+
+        $status = $row['_status'];
+        $status = is_bool($status) ? ($status ? 'enabled' : 'disabled') : $status;
+
+        $row['_status'] = [
+            'fill' => (Color::tryFromStatus($status) ?? Color::Gray)->value,
+            'label' => ucfirst($status),
+        ];
+
+        return $row;
+    }
+
+    /**
+     * Fetch rows by posting `{page, per_page, search}` to `$url`. The response must contain
+     * `{data: <rows>, pagination: {total, per_page, current_page, last_page, next_page_url,
+     * prev_page_url, from, to}}`. Pass the page's rows through {@see prepareRows()} first.
+     * Calling this clears {@see rows()}, and vice versa.
+     */
+    public function dataUrl(string $url, int $perPage = 100): static
+    {
+        $this->dataUrl = $url;
+        $this->perPage = $perPage;
+        $this->rows = [];
+
+        return $this;
+    }
+
+    /**
+     * In {@see dataUrl()} mode, posts `{id, page}` to `$url` to move a row across pages.
+     * The endpoint computes the new absolute position.
+     */
+    public function moveToPageUrl(string $url): static
+    {
+        $this->moveToPageUrl = $url;
+
+        return $this;
+    }
+
+    public function emptyMessage(?string $emptyMessage): static
+    {
+        $this->emptyMessage = $emptyMessage;
+
+        return $this;
+    }
+
+    public function createAction(?string $label, ?string $url): static
+    {
+        $this->createLabel = $label;
+        $this->createUrl = $url;
+        $this->createMenuItems = null;
+
+        return $this;
+    }
+
+    /**
+     * Render a create button with a menu of links instead of one {@see createAction()} URL.
+     *
+     * @param  list<array{label: string, url: string}>  $items
+     */
+    public function createActionMenu(string $label, array $items): static
+    {
+        $this->createLabel = $label;
+        $this->createUrl = null;
+        $this->createMenuItems = $items;
+
+        return $this;
+    }
+
+    /**
+     * Enables drag-to-reorder; the new order posts to `$url` as `{ids: list<int|string>}`.
+     * `$successMessage`/`$failMessage` are shown as a toast after the request settles — omit
+     * either (or both) to fall back to a generic message client-side.
+     */
+    public function reorderable(string $url, ?string $successMessage = null, ?string $failMessage = null): static
+    {
+        $this->reorderUrl = $url;
+        $this->reorderSuccessMessage = $successMessage;
+        $this->reorderFailMessage = $failMessage;
+
+        return $this;
+    }
+
+    /**
+     * Adds a per-row delete action, posting `{id: <row id>}` to `$url`. Individual rows can
+     * opt out via `_deletable => false` in {@see rows()}.
+     *
+     * `$bulk` enables row selection and posts `{ids: <row ids>}` to the same endpoint.
+     * Enable it only if the endpoint handles `ids` as well as `id`.
+     */
+    public function deletable(string $url, ?string $confirmMessage = null, bool $bulk = false): static
+    {
+        $this->deleteUrl = $url;
+        $this->deleteConfirmMessage = $confirmMessage;
+        $this->bulkDeletable = $bulk;
+
+        return $this;
+    }
+
+    /**
+     * Adds items to the selection footer's "Actions" menu. Each action posts
+     * `{ids: <selected row ids>, ...params}` to its `url`.
+     *
+     * Entries may be `['label' => string, 'url' => string, 'params'? => array,
+     * 'allowMultiple'? => bool]` or groups with `['label'? => string, 'items' => list<actions>]`.
+     * An omitted group label leaves its items unheaded; `icon` is ignored. `allowMultiple`
+     * defaults to true and only disables the UI for multiple rows. Endpoints must enforce
+     * their own constraints.
+     *
+     * @param  list<array<string, mixed>>  $actions
+     */
+    public function bulkActions(array $actions): static
+    {
+        $this->bulkActions = $actions;
+
+        return $this;
+    }
+
+    /**
+     * Adds a separate "Set status" menu to the selection footer. Items use the same
+     * shape as single {@see bulkActions()} entries; the button label is fixed.
+     *
+     * @param  list<array<string, mixed>>  $items
+     */
+    public function statusActions(array $items): static
+    {
+        $this->statusActions = $items;
+
+        return $this;
+    }
+
+    /**
+     * Search {@see rows()} locally, or send `search` to the {@see dataUrl()} endpoint
+     * and reset to page 1. See {@see rows()} for the `_search` override.
+     */
+    public function searchable(?string $placeholder = null): static
+    {
+        $this->searchable = true;
+        $this->searchPlaceholder = $placeholder;
+
+        return $this;
+    }
+
+    public function bordered(bool $bordered = true): static
+    {
+        $this->bordered = $bordered;
+
+        return $this;
+    }
+
+    public static function renderHtml(NodePayload $node, FormPayload $payload, FormHtmlRenderer $renderer): string
+    {
+        $columns = $node->props['columns'];
+        $rows = $node->props['rows'];
+
+        $createAction = match (true) {
+            $node->props['createUrl'] !== null && $node->props['createLabel'] !== null => Html::a(
+                Html::encode($node->props['createLabel']),
+                $node->props['createUrl'],
+                ['class' => ['btn', 'submit', 'add', 'icon']],
+            ),
+            ! empty($node->props['createMenuItems']) => Html::encode($node->props['createLabel'] ?? '').': '.implode(', ', array_map(
+                fn (array $item) => Html::a(Html::encode($item['label']), $item['url']),
+                $node->props['createMenuItems'],
+            )),
+            default => '',
+        };
+
+        if ($node->props['dataUrl'] !== null) {
+            // Without JavaScript, endpoint rows cannot be fetched or treated as an empty table.
+            $table = Html::tag('p', Html::encode(t('This table requires JavaScript.')), [
+                'class' => ['zilch'],
+            ]);
+        } elseif (empty($rows)) {
+            $table = Html::tag('p', Html::encode($node->props['emptyMessage'] ?? ''), [
+                'class' => ['zilch'],
+            ]);
+        } else {
+            $renderLink = fn (array $link): string => $link['url'] !== null
+                ? Html::a(Html::encode($link['label']), $link['url'])
+                : Html::encode($link['label']);
+
+            $firstColumnKey = $columns[0]['key'] ?? null;
+
+            $renderCell = function (array $column, array $row) use ($renderLink, $firstColumnKey): string {
+                $value = $row[$column['key']] ?? '';
+
+                $rendered = match (true) {
+                    is_array($value) && array_key_exists('items', $value) => implode(', ', array_map($renderLink, $value['items'])),
+                    is_array($value) && array_key_exists('icon', $value) => Html::encode($value['label'] ?? ''),
+                    is_array($value) && array_key_exists('html', $value) => $value['html'],
+                    is_array($value) && array_is_list($value) => implode(', ', array_map($renderLink, $value)),
+                    is_array($value) => $renderLink($value),
+                    default => Html::encode((string) $value),
+                };
+
+                if ($column['key'] === $firstColumnKey && ! empty($row['_status']['label'])) {
+                    $rendered = Html::encode($row['_status']['label']).': '.$rendered;
+                }
+
+                return $rendered;
+            };
+
+            $head = Html::tag('tr', implode('', array_map(
+                fn (array $column) => Html::tag('th', Html::encode($column['label'])),
+                $columns,
+            )));
+
+            $body = implode('', array_map(
+                fn (array $row) => Html::tag('tr', implode('', array_map(
+                    fn (array $column) => Html::tag('td', $renderCell($column, $row)),
+                    $columns,
+                ))),
+                $rows,
+            ));
+
+            $table = Html::tag('table', Html::tag('thead', $head).Html::tag('tbody', $body), [
+                'class' => ['data', 'fullwidth'],
+            ]);
+        }
+
+        return Html::tag('div', $createAction.$table, [
+            'class' => ['grid', 'gap-2'],
+            'data-form-node' => $node->uid,
+        ]);
+    }
+
+    public function component(): string
+    {
+        return 'craft:admin-table';
+    }
+
+    public function uid(): ?string
+    {
+        return $this->uid;
+    }
+
+    public function props(): array
+    {
+        return [
+            'columns' => $this->columns,
+            'rows' => $this->rows,
+            'dataUrl' => $this->dataUrl,
+            'perPage' => $this->perPage,
+            'moveToPageUrl' => $this->moveToPageUrl,
+            'emptyMessage' => $this->emptyMessage,
+            'createLabel' => $this->createLabel,
+            'createUrl' => $this->createUrl,
+            'createMenuItems' => $this->createMenuItems,
+            'reorderUrl' => $this->reorderUrl,
+            'reorderSuccessMessage' => $this->reorderSuccessMessage,
+            'reorderFailMessage' => $this->reorderFailMessage,
+            'deleteUrl' => $this->deleteUrl,
+            'deleteConfirmMessage' => $this->deleteConfirmMessage,
+            'bulkDeletable' => $this->bulkDeletable,
+            'bulkActions' => $this->bulkActions,
+            'statusActions' => $this->statusActions,
+            'searchable' => $this->searchable,
+            'searchPlaceholder' => $this->searchPlaceholder,
+            'bordered' => $this->bordered,
+        ];
+    }
+
+    public function getControl(): ?Control
+    {
+        return null;
+    }
+
+    public function children(): array
+    {
+        return [];
+    }
+}
diff --git a/src/Http/ViewModels/UserSettingsViewModel.php b/src/Http/ViewModels/UserSettingsViewModel.php
index 910881d251a..8a1e92ac03d 100644
--- a/src/Http/ViewModels/UserSettingsViewModel.php
+++ b/src/Http/ViewModels/UserSettingsViewModel.php
@@ -9,6 +9,7 @@
 use CraftCms\Cms\Cp\SelectOptions;
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Combobox;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\Controls\Lightswitch;
 use CraftCms\Cms\Form\Controls\Text;
 use CraftCms\Cms\Form\Enums\ControlMode;
@@ -22,6 +23,7 @@
 use CraftCms\Cms\Form\Nodes\HiddenField;
 use CraftCms\Cms\Form\Nodes\Separator;
 use CraftCms\Cms\Http\Controllers\Settings\Users\UserSettingsController;
+use CraftCms\Cms\Http\Controllers\Settings\VolumesController;
 use CraftCms\Cms\User\Data\UserGroup;
 use CraftCms\Cms\User\Data\UserSettings;
 use CraftCms\Cms\User\Elements\User;
@@ -158,7 +160,7 @@ private function initialValues(): array
         ];
     }
 
-    /** @return list<array{label: string, value: string, data?: array{addOption: bool}}> */
+    /** @return list<array{label: string, value: string}|ComboboxCreateOption> */
     private function photoVolumeOptions(): array
     {
         return $this->volumes->getAllVolumes()
@@ -168,11 +170,13 @@ private function photoVolumeOptions(): array
             ])
             ->sortBy('label')
             ->values()
-            ->push([
-                'label' => t('Create a new volume…'),
-                'value' => '__createVolume__',
-                'data' => ['addOption' => true],
-            ])
+            ->push(new ComboboxCreateOption(
+                t('Create a new volume…'),
+                action([VolumesController::class, 'create']),
+                'volume',
+                value: '__createVolume__',
+                valueField: 'uid',
+            ))
             ->all();
     }
 
diff --git a/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php b/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
index 1bf7e31b778..58d13ceefde 100644
--- a/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
+++ b/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
@@ -7,6 +7,7 @@
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\Controllers\Settings\Users\UserSettingsController;
+use CraftCms\Cms\Http\Controllers\Settings\VolumesController;
 use CraftCms\Cms\Support\Facades\ProjectConfig;
 use CraftCms\Cms\Support\Str;
 use CraftCms\Cms\User\Elements\User;
@@ -119,10 +120,16 @@
                     ->pluck('control')
                     ->firstWhere('path', ['photoVolumeUid']);
                 $values = collect($control['props']['options'])->pluck('value');
+                $create = collect($control['props']['options'])->firstWhere('value', '__createVolume__');
 
                 return $values->contains((string) $publicVolume->uid)
                     && $values->contains((string) $privateVolume->uid)
-                    && $values->contains('__createVolume__');
+                    && $create['data']['create'] === [
+                        'url' => action([VolumesController::class, 'create']),
+                        'resultKey' => 'volume',
+                        'labelField' => 'name',
+                        'valueField' => 'uid',
+                    ];
             }));
 });
 
diff --git a/tests/Unit/Form/ScalarControlsTest.php b/tests/Unit/Form/ScalarControlsTest.php
index b012b3c7900..9c5c2588b71 100644
--- a/tests/Unit/Form/ScalarControlsTest.php
+++ b/tests/Unit/Form/ScalarControlsTest.php
@@ -6,6 +6,7 @@
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Color;
 use CraftCms\Cms\Form\Controls\Combobox;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\Controls\Date;
 use CraftCms\Cms\Form\Controls\DateTime;
 use CraftCms\Cms\Form\Controls\Money;
@@ -222,6 +223,30 @@ function scalarControlsCrawler(ControlMode $mode = ControlMode::Editable): Crawl
         ->and(fn () => Combobox::make('path')->limit(0))->toThrow(InvalidArgumentException::class);
 });
 
+it('renders a create option in an ordinary combobox', function () {
+    $payload = app(FormResolver::class)->resolve(
+        Form::make([Field::make()->control(Combobox::make('category')->options([
+            ['label' => 'Existing', 'value' => 42],
+            new ComboboxCreateOption('Create category', '/categories/new', 'category'),
+        ]))]),
+        new FormContext(values: ['category' => '42']),
+    );
+    $crawler = new Crawler(app(FormHtmlRenderer::class)->render($payload));
+    $options = json_decode((string) $crawler->filter('craft-combobox')->attr('options'), true);
+
+    expect($options)->toBe([
+        ['label' => 'Existing', 'value' => '42'],
+        ['label' => 'Create category', 'value' => '__add__', 'data' => [
+            'create' => [
+                'url' => '/categories/new',
+                'resultKey' => 'category',
+                'labelField' => 'name',
+                'valueField' => 'id',
+            ],
+        ]],
+    ]);
+});
+
 it('renders an icon-only choice button with an accessible name and no label', function () {
     $crawler = renderChoice(
         Choice::make('choice')