From d72b9ebd4db768b13311fd1204086ed431611a55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 13:50:01 +0100
Subject: [PATCH 01/34] property-editor-ui-picker-modal.element

---
 ...property-editor-ui-picker-modal.element.ts | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 4fe275bfde..c0ea739cc2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -1,22 +1,21 @@
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import {
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalValue,
-	UmbModalContext,
+	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 interface GroupedPropertyEditorUIs {
 	[key: string]: Array<ManifestPropertyEditorUi>;
 }
 @customElement('umb-property-editor-ui-picker-modal')
-export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
-	@property({ type: Object })
-	data?: UmbPropertyEditorUIPickerModalData;
-
+export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
+	UmbPropertyEditorUIPickerModalData,
+	UmbPropertyEditorUIPickerModalValue
+> {
 	@state()
 	private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {};
 
@@ -29,9 +28,6 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
 	@state()
 	private _submitLabel = 'Select';
 
-	@property({ attribute: false })
-	modalContext?: UmbModalContext<UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue>;
-
 	connectedCallback(): void {
 		super.connectedCallback();
 
@@ -89,21 +85,17 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
 		);
 	}
 
-	private _close() {
-		this.modalContext?.reject();
-	}
-
-	private _submit() {
-		this.modalContext?.submit({ selection: this._selection });
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline="Select Property Editor UI">
 				<uui-box> ${this._renderFilter()} ${this._renderGrid()} </uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="${this._submitLabel}" look="primary" color="positive" @click=${this._submit}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+					<uui-button
+						label="${this._submitLabel}"
+						look="primary"
+						color="positive"
+						@click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;

From dbe7f7cc5d0096ff3f99be0a758b607b0074697a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 16:44:18 +0100
Subject: [PATCH 02/34] first part of mega refactor for modal values

---
 .../input-list-base/input-list-base.ts        |  6 +-
 .../input-markdown.element.ts                 | 35 +++++----
 .../input-multi-url.element.ts                | 36 +++++----
 ...input-multiple-text-string-item.element.ts | 10 ++-
 .../data-type-flow-input.element.ts           | 12 +--
 .../entity-actions/copy/copy.action.ts        |  5 +-
 .../entity-actions/create/create.action.ts    |  4 +-
 .../data-type-create-options-modal.element.ts |  4 +-
 ...ker-flow-data-type-picker-modal.element.ts | 16 ++--
 .../data-type-picker-flow-modal.element.ts    | 76 +++++++++---------
 ...property-editor-ui-picker-modal.element.ts |  2 +-
 ...property-editor-ui-picker-modal.stories.ts |  6 +-
 ...ata-type-details-workspace-view.element.ts |  8 +-
 .../src/packages/core/debug/debug.element.ts  |  4 +-
 .../create-folder/create-folder.action.ts     |  6 +-
 .../delete-folder/delete-folder.action.ts     | 10 ++-
 .../common/delete/delete.action.ts            | 10 ++-
 .../folder-update/folder-update.action.ts     |  6 +-
 .../common/trash/trash.action.ts              | 10 ++-
 .../code-editor/code-editor-modal.element.ts  |  3 +-
 .../embedded-media-modal.element.ts           |  5 +-
 .../icon-picker/icon-picker-modal.element.ts  | 13 +---
 .../icon-picker/icon-picker-modal.stories.ts  |  6 +-
 .../link-picker/link-picker-modal.element.ts  | 37 +++++----
 .../property-settings-modal.element.ts        | 77 ++++++++++---------
 .../section-picker-modal.element.ts           |  5 +-
 .../common/template/template-modal.element.ts |  4 +-
 .../tree-picker/tree-picker-modal.element.ts  | 22 +++---
 .../core/modal/modal-element.element.ts       | 10 ++-
 .../core/modal/modal-manager.context.ts       | 24 +++---
 .../core/modal/modal-route-registration.ts    | 49 +++++++++---
 .../src/packages/core/modal/modal.context.ts  | 68 ++++++++--------
 .../packages/core/modal/modal.interfaces.ts   |  1 -
 ...icker-flow-data-type-picker-modal.token.ts | 10 ++-
 .../data-type-picker-flow-modal.token.ts      |  1 -
 .../modal/token/icon-picker-modal.token.ts    |  2 +-
 .../token/language-picker-modal.token.ts      |  1 -
 .../modal/token/link-picker-modal.token.ts    |  5 +-
 .../packages/core/modal/token/modal-token.ts  | 11 ++-
 .../property-editor-ui-picker-modal.token.ts  |  1 -
 .../token/property-settings-modal.token.ts    |  1 -
 .../core/modal/token/workspace-modal.token.ts | 10 ++-
 .../core/picker-input/picker-input.context.ts | 24 ++++--
 .../plugins/tiny-mce-code-editor.plugin.ts    |  8 +-
 .../plugins/tiny-mce-embeddedmedia.plugin.ts  |  2 +-
 .../plugins/tiny-mce-linkpicker.plugin.ts     | 12 ++-
 .../plugins/tiny-mce-macropicker.plugin.ts    |  6 +-
 .../plugins/tiny-mce-mediapicker.plugin.ts    | 17 +++-
 .../editable-workspace-context-base.ts        |  3 +-
 .../create/create-dictionary-modal.element.ts |  5 +-
 .../export/export-dictionary-modal.element.ts |  3 +-
 .../entity-actions/export/export.action.ts    |  2 +-
 .../import/import-dictionary-modal.element.ts |  3 +-
 .../entity-actions/import/import.action.ts    |  2 +-
 .../dashboard-redirect-management.element.ts  | 32 ++++----
 .../entity-actions/create/create.action.ts    |  4 +-
 ...ument-type-create-options-modal.element.ts |  4 +-
 .../document-type-workspace-editor.element.ts |  6 +-
 ...-workspace-view-edit-properties.element.ts |  6 +-
 ...pe-workspace-view-edit-property.element.ts |  8 +-
 ...cument-type-workspace-view-edit.element.ts |  4 +-
 ...ut-document-granular-permission.element.ts |  7 +-
 .../create/create-document-modal.element.ts   |  3 +-
 .../log-viewer-search-input-modal.element.ts  |  3 +-
 .../media-type-workspace-editor.element.ts    | 10 ++-
 ...-workspace-view-edit-properties.element.ts |  6 +-
 .../entity-bulk-actions/move/move.action.ts   |  8 +-
 .../modal-views/fields-settings.element.ts    |  3 +-
 .../language-picker-modal.element.ts          |  5 +-
 .../templating-insert-menu.element.ts         |  8 +-
 .../insert-choose-type-sidebar.element.ts     | 18 +++--
 .../insert-section-modal.element.ts           |  5 +-
 .../partial-view-picker-modal.element.ts      |  5 +-
 ...pace-view-rich-text-editor-rule.element.ts |  4 +-
 ...-rich-text-editor-style-sidebar.element.ts | 49 +++++-------
 ...workspace-view-rich-text-editor.element.ts | 26 ++++---
 .../input-template/input-template.element.ts  | 22 ++++--
 .../query-builder/query-builder.element.ts    | 11 +--
 .../template-workspace-editor.element.ts      | 24 ++++--
 .../user-profile-app-profile.element.ts       |  4 +-
 .../change-password-modal.element.ts          |  5 +-
 .../delete/delete.action.ts                   | 10 ++-
 ...-user-permission-settings-modal.element.ts | 29 +++----
 .../change-user-password.action.ts            |  4 +-
 .../disable/disable-user.action.ts            | 10 ++-
 .../enable/enable-user.action.ts              |  8 +-
 .../unlock/unlock-user.action.ts              |  8 +-
 .../delete/delete.action.ts                   | 10 ++-
 .../resend-invite/resend-invite.action.ts     |  4 +-
 .../create/user-create-modal.element.ts       |  6 +-
 .../user-picker/user-picker-modal.element.ts  |  5 +-
 .../storybook/stories/modal/modal.mdx         |  5 +-
 92 files changed, 626 insertions(+), 482 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts
index fd02cb26ab..afe4762fad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts
@@ -38,8 +38,10 @@ export class UmbInputListBaseElement extends UmbLitElement {
 		if (!this.pickerToken) return;
 
 		const modalContext = this._modalContext?.open(this.pickerToken, {
-			multiple: this.multiple,
-			selection: this.value,
+			data: {
+				multiple: this.multiple,
+				selection: this.value,
+			},
 		});
 
 		modalContext?.onSubmit().then((data: UmbPickerModalValue) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
index 33cfa23e5e..b0b7abe0c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
@@ -179,38 +179,44 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 
 	private _insertLink() {
 		const selection = this.#editor?.getSelections()[0];
-		if (!selection) return;
+		if (!selection || !this._modalContext) return;
 
 		const selectedValue = this.#editor?.getValueInRange(selection);
 
 		this._focusEditor(); // Focus before opening modal
-		const modalContext = this._modalContext?.open(UMB_LINK_PICKER_MODAL, {
-			index: null,
-			link: { name: selectedValue },
-			config: { overlaySize: this.overlaySize },
+		const modalContext = this._modalContext.open(UMB_LINK_PICKER_MODAL, {
+			data: {
+				index: null,
+				config: { overlaySize: this.overlaySize },
+			},
+			value: {
+				link: { name: selectedValue },
+			},
 		});
 
 		modalContext
 			?.onSubmit()
-			.then((data) => {
+			.then((value) => {
+				if (!value) return;
+
 				const name = this.localize.term('general_name');
 				const url = this.localize.term('general_url');
 
 				this.#editor?.monacoEditor?.executeEdits('', [
-					{ range: selection, text: `[${data.link.name || name}](${data.link.url || url})` },
+					{ range: selection, text: `[${value.link.name || name}](${value.link.url || url})` },
 				]);
 
-				if (!data.link.name) {
+				if (!value.link.name) {
 					this.#editor?.select({
 						startColumn: selection.startColumn + 1,
 						endColumn: selection.startColumn + 1 + name.length,
 						endLineNumber: selection.startLineNumber,
 						startLineNumber: selection.startLineNumber,
 					});
-				} else if (!data.link.url) {
+				} else if (!value.link.url) {
 					this.#editor?.select({
-						startColumn: selection.startColumn + 3 + data.link.name.length,
-						endColumn: selection.startColumn + 3 + data.link.name.length + url.length,
+						startColumn: selection.startColumn + 3 + value.link.name.length,
+						endColumn: selection.startColumn + 3 + value.link.name.length + url.length,
 						endLineNumber: selection.startLineNumber,
 						startLineNumber: selection.startLineNumber,
 					});
@@ -227,12 +233,13 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 		const alt = this.#editor?.getValueInRange(selection) || 'alt text';
 
 		this._focusEditor(); // Focus before opening modal, otherwise cannot regain focus back after modal
-		const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {});
+		const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL);
 
 		modalContext
 			?.onSubmit()
-			.then((data) => {
-				const imgUrl = data.selection[0];
+			.then((value) => {
+				if (!value) return;
+				const imgUrl = value.selection[0];
 				this.#editor?.monacoEditor?.executeEdits('', [
 					//TODO: Get the correct media URL
 					{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
index dd50ece4b2..f7f59023b2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
@@ -140,26 +140,30 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
 				}
 
 				return {
-					index: index,
-					link: {
-						name: data?.name,
-						published: data?.published,
-						queryString: data?.queryString,
-						target: data?.target,
-						trashed: data?.trashed,
-						udi: data?.udi,
-						url: data?.url,
+					data: {
+						index: index,
+						config: {
+							hideAnchor: this.hideAnchor,
+							ignoreUserStartNodes: this.ignoreUserStartNodes,
+							overlaySize: this.overlaySize || 'small',
+						},
 					},
-					config: {
-						hideAnchor: this.hideAnchor,
-						ignoreUserStartNodes: this.ignoreUserStartNodes,
-						overlaySize: this.overlaySize || 'small',
+					value: {
+						link: {
+							name: data?.name,
+							published: data?.published,
+							queryString: data?.queryString,
+							target: data?.target,
+							trashed: data?.trashed,
+							udi: data?.udi,
+							url: data?.url,
+						},
 					},
 				};
 			})
-			.onSubmit((submitData) => {
-				if (!submitData) return;
-				this._setSelection(submitData.link, submitData.index);
+			.onSubmit((value) => {
+				if (!value) return;
+				this._setSelection(value.link, this.myModalRegistration.modalContext?.data.index ?? null);
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._modalRoute = routeBuilder;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
index 9fa8e1ed8f..ed1bf3f019 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
@@ -46,10 +46,12 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 
 	#onDelete() {
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: `Delete ${this.value || 'item'}`,
-			content: 'Are you sure you want to delete this item?',
-			color: 'danger',
-			confirmLabel: 'Delete',
+			data: {
+				headline: `Delete ${this.value || 'item'}`,
+				content: 'Are you sure you want to delete this item?',
+				color: 'danger',
+				confirmLabel: 'Delete',
+			},
 		});
 
 		modalContext?.onSubmit().then(() => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
index a158eeea71..1ea7eb5911 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
@@ -49,19 +49,21 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
 		super();
 
 		this.#editDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL).onSetup(() => {
-			return { entityType: 'data-type', preset: {} };
+			return { data: { entityType: 'data-type', preset: {} } };
 		});
 
 		new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_MODAL)
 			.onSetup(() => {
 				return {
-					selection: this._ids,
-					submitLabel: 'Submit',
+					data: {
+						submitLabel: 'Submit',
+					},
+					value: { selection: this._ids ?? [] },
 				};
 			})
 			.onSubmit((submitData) => {
-				// TODO: we might should set the alias to null or empty string, if no selection.
-				this.value = submitData.selection.join(',');
+				// TODO: we maybe should set the alias to null, if no selection?
+				this.value = submitData?.selection.join(',') ?? '';
 				this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true }));
 			})
 			.observeRouteBuilder((routeBuilder) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts
index 5410ee0cb0..bc50ca6c71 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts
@@ -24,7 +24,8 @@ export class UmbCopyDataTypeEntityAction extends UmbEntityActionBase<UmbCopyData
 		if (!this.repository) throw new Error('Repository is not available');
 
 		const modalContext = this.#modalManagerContext?.open(UMB_DATA_TYPE_PICKER_MODAL);
-		const { selection } = await modalContext.onSubmit();
-		await this.repository.copy(this.unique, selection[0]);
+		const value = await modalContext.onSubmit();
+		if (!value) return;
+		await this.repository.copy(this.unique, value.selection[0]);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/create.action.ts
index 76f398b338..0a8472fd50 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/create.action.ts
@@ -20,7 +20,9 @@ export class UmbCreateDataTypeEntityAction extends UmbEntityActionBase<UmbDataTy
 		if (!this.repository) throw new Error('Repository is not available');
 
 		this.#modalManagerContext?.open(UMB_DATA_TYPE_CREATE_OPTIONS_MODAL, {
-			parentKey: this.unique,
+			data: {
+				parentKey: this.unique,
+			},
 		});
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/data-type-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/data-type-create-options-modal.element.ts
index 3f91903626..9481b2d80c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/data-type-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/data-type-create-options-modal.element.ts
@@ -30,7 +30,9 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 	#onClick(event: PointerEvent) {
 		event.stopPropagation();
 		const folderModalHandler = this.#modalContext?.open(UMB_FOLDER_MODAL, {
-			repositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
+			data: {
+				repositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
+			},
 		});
 		folderModalHandler?.onSubmit().then(() => this.modalContext?.submit());
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
index f48f1ca6b0..dcd11de30d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
@@ -6,15 +6,15 @@ import {
 	UmbModalContext,
 	UmbDataTypePickerFlowDataTypePickerModalData,
 	UmbDataTypePickerFlowDataTypePickerModalValue,
+	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-data-type-picker-flow-data-type-picker-modal')
-export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitElement {
-	@property({ type: Object })
-	data?: UmbDataTypePickerFlowDataTypePickerModalData;
-
+export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBaseElement<
+	UmbDataTypePickerFlowDataTypePickerModalData,
+	UmbDataTypePickerFlowDataTypePickerModalValue
+> {
 	@state()
 	private _dataTypes?: Array<FolderTreeItemResponseModel>;
 
@@ -61,12 +61,14 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
 
 	private _handleClick(dataType: FolderTreeItemResponseModel) {
 		if (dataType.id) {
-			this.modalContext?.submit({ dataTypeId: dataType.id });
+			this._value = { dataTypeId: dataType.id };
+			this.modalContext?.submit();
 		}
 	}
 
 	private _handleCreate() {
-		this.modalContext?.submit({ createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias });
+		this._value = { createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias };
+		this.modalContext?.submit();
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index 838696dffc..85f8c4c9e1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -7,32 +7,25 @@ import {
 	UMB_WORKSPACE_MODAL,
 	UmbDataTypePickerFlowModalData,
 	UmbDataTypePickerFlowModalValue,
-	UmbModalContext,
+	UmbModalBaseElement,
 	UmbModalRouteBuilder,
 	UmbModalRouteRegistrationController,
 } from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 interface GroupedItems<T> {
 	[key: string]: Array<T>;
 }
 @customElement('umb-data-type-picker-flow-modal')
-export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
-	@property({ attribute: false })
-	modalContext?: UmbModalContext<UmbDataTypePickerFlowModalData, UmbDataTypePickerFlowModalValue>;
-
-	@property({ type: Object })
-	public get data(): UmbDataTypePickerFlowModalData | undefined {
-		return this._data;
-	}
-	public set data(value: UmbDataTypePickerFlowModalData | undefined) {
-		this._data = value;
-		this._selection = this.data?.selection ?? [];
+export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
+	UmbDataTypePickerFlowModalData,
+	UmbDataTypePickerFlowModalValue
+> {
+	public set data(value: UmbDataTypePickerFlowModalData) {
+		super.data = value;
 		this._submitLabel = this.data?.submitLabel ?? this._submitLabel;
 	}
-	private _data?: UmbDataTypePickerFlowModalData | undefined;
 
 	@state()
 	private _groupedDataTypes?: GroupedItems<EntityTreeItemResponseModel>;
@@ -64,14 +57,17 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 			.addAdditionalPath(':uiAlias')
 			.onSetup((routingInfo) => {
 				return {
-					propertyEditorUiAlias: routingInfo.uiAlias,
+					data: {
+						propertyEditorUiAlias: routingInfo.uiAlias,
+					},
+					value: undefined,
 				};
 			})
 			.onSubmit((submitData) => {
-				if (submitData.dataTypeId) {
+				if (submitData?.dataTypeId) {
 					this._select(submitData.dataTypeId);
-					this._submit();
-				} else if (submitData.createNewWithPropertyEditorUiAlias) {
+					this._submitModal();
+				} else if (submitData?.createNewWithPropertyEditorUiAlias) {
 					this._createDataType(submitData.createNewWithPropertyEditorUiAlias);
 				}
 			})
@@ -83,11 +79,11 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 		this._createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath(':uiAlias')
 			.onSetup((params) => {
-				return { entityType: 'data-type', preset: { propertyEditorUiAlias: params.uiAlias } };
+				return { data: { entityType: 'data-type', preset: { propertyEditorUiAlias: params.uiAlias } } };
 			})
-			.onSubmit((submitData) => {
-				this._select(submitData.id);
-				this._submit();
+			.onSubmit((value) => {
+				this._select(value?.id);
+				this._submitModal();
 			});
 
 		this.#init();
@@ -120,15 +116,25 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 		});
 	}
 
-	private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) {
-		if (dataType.id) {
-			this._select(dataType.id);
-			this._submit();
+	connectedCallback(): void {
+		super.connectedCallback();
+
+		if (this.modalContext) {
+			this.observe(this.modalContext.value, (value) => {
+				this._selection = value?.selection ?? [];
+			});
 		}
 	}
 
-	private _select(id: string) {
-		this._selection = [id];
+	private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) {
+		if (dataType.id) {
+			this._select(dataType.id);
+			this._submitModal();
+		}
+	}
+
+	private _select(id: string | undefined) {
+		this._selection = id ? [id] : [];
 	}
 
 	private _handleFilterInput(event: UUIInputEvent) {
@@ -142,8 +148,8 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 				(dataType) => dataType.name?.toLowerCase().includes(this.#currentFilterQuery),
 			);
 
-			/* TODO: data type items doesn't have a group property. We will need a reference to the property editor UI to get the group.
-				this is a temp solution to group them as uncategorized. The same result as with the lodash groupBy.
+			/* TODO: data type items doesn't have a group property. We will need a reference to the Property Editor UI to get the group.
+			this is a temp solution to group them as uncategorized. The same result as with the lodash groupBy.
 			*/
 			this._groupedDataTypes = {
 				undefined: filteredDataTypes,
@@ -170,20 +176,12 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 		);
 	}
 
-	private _close() {
-		this.modalContext?.reject();
-	}
-
-	private _submit() {
-		this.modalContext?.submit({ selection: this._selection });
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline="Select editor" class="uui-text">
 				<uui-box> ${this._renderFilter()} ${this._renderGrid()} </uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index c0ea739cc2..9eef7e8806 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -31,7 +31,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 	connectedCallback(): void {
 		super.connectedCallback();
 
-		this._selection = this.data?.selection ?? [];
+		this._selection = this._value?.selection ?? [];
 		this._submitLabel = this.data?.submitLabel ?? this._submitLabel;
 
 		this._usePropertyEditorUIs();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
index f3f5cdcb04..e60179182b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
 import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUIPickerModalData } from '@umbraco-cms/backoffice/modal';
+import type { UmbPropertyEditorUIPickerModalValue } from '@umbraco-cms/backoffice/modal';
 
 import './property-editor-ui-picker-modal.element.js';
 import '../../../components/body-layout/body-layout.element.js';
@@ -12,8 +12,8 @@ export default {
 	id: 'umb-property-editor-ui-picker-modal',
 } as Meta;
 
-const data: UmbPropertyEditorUIPickerModalData = { selection: [] };
+const data: UmbPropertyEditorUIPickerModalValue = { selection: [] };
 
 export const Overview: Story<UmbPropertyEditorUIPickerModalElement> = () => html`
-	<umb-property-editor-ui-picker-modal .data=${data as any}></umb-property-editor-ui-picker-modal>
+	<umb-property-editor-ui-picker-modal .value=${data as any}></umb-property-editor-ui-picker-modal>
 `;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
index 91ea662012..c80154e980 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -71,11 +71,13 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 
 	private _openPropertyEditorUIPicker() {
 		const modalContext = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, {
-			selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
+			value: {
+				selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
+			},
 		});
 
-		modalContext?.onSubmit().then(({ selection }) => {
-			this._workspaceContext?.setPropertyEditorUiAlias(selection[0]);
+		modalContext?.onSubmit().then((value) => {
+			this._workspaceContext?.setPropertyEditorUiAlias(value?.selection[0]);
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts
index ad227ec07a..878947eda9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts
@@ -78,7 +78,9 @@ export class UmbDebugElement extends UmbLitElement {
 
 	private _openDialog() {
 		this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL, {
-			content: html`${this._renderContextAliases()}`,
+			data: {
+				content: html`${this._renderContextAliases()}`,
+			},
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts
index da1e50e6cc..3bfea2109c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts
@@ -23,8 +23,10 @@ export class UmbCreateFolderEntityAction<T extends UmbFolderRepository> extends
 		if (!this.repository || !this.#modalContext) return;
 
 		const modalContext = this.#modalContext.open(UMB_FOLDER_MODAL, {
-			repositoryAlias: this.repositoryAlias,
-			parentUnique: this.unique ?? null,
+			data: {
+				repositoryAlias: this.repositoryAlias,
+				parentUnique: this.unique ?? null,
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts
index 0d4d6f0ad6..3a6203aee3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts
@@ -27,10 +27,12 @@ export class UmbDeleteFolderEntityAction<T extends UmbFolderRepository> extends
 		if (folder) {
 			// TODO: maybe we can show something about how many items are part of the folder?
 			const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, {
-				headline: `Delete folder ${folder.name}`,
-				content: 'Are you sure you want to delete this folder?',
-				color: 'danger',
-				confirmLabel: 'Delete',
+				data: {
+					headline: `Delete folder ${folder.name}`,
+					content: 'Are you sure you want to delete this folder?',
+					color: 'danger',
+					confirmLabel: 'Delete',
+				},
 			});
 
 			await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts
index fb7cf41bae..00abd856bc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts
@@ -28,10 +28,12 @@ export class UmbDeleteEntityAction<
 		//const { data } = await this.repository.requestItems([this.unique]);
 
 		const modalContext = this.#modalManager.open(UMB_CONFIRM_MODAL, {
-			headline: `Delete`,
-			content: 'Are you sure you want to delete this item?',
-			color: 'danger',
-			confirmLabel: 'Delete',
+			data: {
+				headline: `Delete`,
+				content: 'Are you sure you want to delete this item?',
+				color: 'danger',
+				confirmLabel: 'Delete',
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts
index bc46d9230b..524af9ab00 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts
@@ -25,8 +25,10 @@ export class UmbFolderUpdateEntityAction<
 		if (!this.repository || !this.#modalContext) return;
 
 		const modalContext = this.#modalContext.open(UMB_FOLDER_MODAL, {
-			repositoryAlias: this.repositoryAlias,
-			unique: this.unique,
+			data: {
+				repositoryAlias: this.repositoryAlias,
+				unique: this.unique,
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts
index c810b13d0c..4b6c8bb08c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts
@@ -30,10 +30,12 @@ export class UmbTrashEntityAction<
 			const item = data[0];
 
 			const modalContext = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
-				headline: `Trash ${item.name}`,
-				content: 'Are you sure you want to move this item to the recycle bin?',
-				color: 'danger',
-				confirmLabel: 'Trash',
+				data: {
+					headline: `Trash ${item.name}`,
+					content: 'Are you sure you want to move this item to the recycle bin?',
+					color: 'danger',
+					confirmLabel: 'Trash',
+				},
 			});
 
 			modalContext?.onSubmit().then(() => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
index df12036a64..4d62a0913d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
@@ -17,7 +17,8 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 	}
 
 	#handleConfirm() {
-		this.modalContext?.submit({ content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' });
+		this._value = { content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' };
+		this.modalContext?.submit();
 	}
 
 	#handleCancel() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
index a84b100883..81416e9efc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
@@ -29,13 +29,14 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<
 	#embedResult!: OEmbedResult;
 
 	#handleConfirm() {
-		this.modalContext?.submit({
+		this._value = {
 			preview: this.#embedResult.markup,
 			originalWidth: this._model.width,
 			originalHeight: this._model.originalHeight,
 			width: this.#embedResult.width,
 			height: this.#embedResult.height,
-		});
+		};
+		this.modalContext?.submit();
 	}
 
 	#handleCancel() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
index 575fe4fa4d..b302cc8c2d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
@@ -48,15 +48,6 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 		}
 	}
 
-	#close() {
-		this.modalContext?.reject();
-	}
-
-	#submit() {
-		// TODO: Shouldnt we stop sending the value here, instead let the modal context send of its value. and then its up to any one using it to make sure Modal Context value is up to date.
-		this.modalContext?.submit(this._modalValue);
-	}
-
 	#onColorChange(e: UUIColorSwatchesEvent) {
 		this.modalContext?.updateValue({ icon: e.target.value });
 	}
@@ -104,8 +95,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
-				<uui-button slot="actions" label="close" @click="${this.#close}">Close</uui-button>
-				<uui-button slot="actions" color="positive" look="primary" @click="${this.#submit}" label="Submit">
+				<uui-button slot="actions" label="close" @click="${this._rejectModal}">Close</uui-button>
+				<uui-button slot="actions" color="positive" look="primary" @click="${this._submitModal}" label="Submit">
 					Submit
 				</uui-button>
 			</umb-body-layout>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts
index d071a19fa8..6a7c2ce832 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts
@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components';
 import type { UmbIconPickerModalElement } from './icon-picker-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
 
-import { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal';
+import { UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
@@ -13,8 +13,6 @@ export default {
 	id: 'umb-icon-picker-modal',
 } as Meta;
 
-const data: UmbIconPickerModalData = {};
-
 const value: UmbIconPickerModalValue = {
 	color: undefined,
 	icon: undefined,
@@ -24,5 +22,5 @@ export const Overview: Story<UmbIconPickerModalElement> = () => html`
 	<!-- TODO: figure out if generics are allowed for properties:
 	https://github.com/runem/lit-analyzer/issues/149
 	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-icon-picker-modal .data=${data as any} .value=${value}></umb-icon-picker-modal>
+	<umb-icon-picker-modal .value=${value}></umb-icon-picker-modal>
 `;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
index d44ff21e61..4f5a4f8c60 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
@@ -17,19 +17,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	_selectedKey?: string;
 
 	@state()
-	_index: number | null = null;
-
-	@state()
-	_link: UmbLinkPickerLink = {
-		icon: null,
-		name: null,
-		published: true,
-		queryString: null,
-		target: null,
-		trashed: false,
-		udi: null,
-		url: null,
-	};
+	_link: UmbLinkPickerLink = {};
 
 	@state()
 	_layout: UmbLinkPickerConfig = {
@@ -52,15 +40,21 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	@query('#link-title-input')
 	private _linkTitleInput!: UUIInputElement;
 
+	constructor() {
+		super();
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.data) return;
-		this._index = this.data?.index;
-		this._link = this.data?.link;
-		this._layout = this.data?.config;
 
-		if (!this._link.udi) return;
-		this._selectedKey = getKeyFromUdi(this._link.udi);
+		if (this.modalContext) {
+			this.observe(this.modalContext.value, (value) => {
+				this._link = value?.link ?? {};
+				this._selectedKey = this._link?.udi ? getKeyFromUdi(this._link.udi) : undefined;
+			});
+		}
+		this._layout = this.data?.config;
 	}
 
 	private _handleQueryString() {
@@ -69,13 +63,16 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 
 		if (query.startsWith('#') || query.startsWith('?')) {
 			this._link.queryString = query;
+			this.modalContext?.updateValue({ link: this._link });
 			return;
 		}
 
 		if (query.includes('=')) {
 			this._link.queryString = `?${query}`;
+			this.modalContext?.updateValue({ link: this._link });
 		} else {
 			this._link.queryString = `#${query}`;
+			this.modalContext?.updateValue({ link: this._link });
 		}
 	}
 
@@ -88,6 +85,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		if (!selectedKey) {
 			this._link.url = '';
 			this._link.udi = undefined;
+			this.modalContext?.updateValue({ link: this._link });
 			this._selectedKey = undefined;
 			this.requestUpdate();
 			return;
@@ -98,11 +96,12 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		this._selectedKey = selectedKey;
 		this._link.udi = udi;
 		this._link.url = udi;
+		this.modalContext?.updateValue({ link: this._link });
 		this.requestUpdate();
 	}
 
 	private _submit() {
-		this.modalContext?.submit({ index: this._index, link: this._link });
+		this.modalContext?.submit();
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
index a3d04cb499..c974c3c1ab 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
@@ -46,8 +46,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	@state()
 	protected _ownerDocumentType?: UmbPropertySettingsModalValue;
 
-	@state()
-	protected _returnData!: UmbPropertySettingsModalValue;
+	protected _originalPropertyData!: UmbPropertySettingsModalValue;
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -64,20 +63,22 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			);
 		});
 
-		this._returnData = JSON.parse(JSON.stringify(this.data?.propertyData ?? {}));
+		this._originalPropertyData = this._value;
+		// TODO: Use some utility method for this deep clone:
+		this._value = JSON.parse(JSON.stringify(this._value ?? {}));
 
-		this._returnData.validation ??= {};
+		this._value.validation ??= {};
 
-		const regEx = this._returnData.validation.regEx ?? null;
+		const regEx = this._value.validation.regEx ?? null;
 		const newlySelected = this._customValidationOptions.find((option) => {
 			option.selected = option.value === regEx;
 			return option.selected;
 		});
 		if (newlySelected === undefined) {
 			this._customValidationOptions[4].selected = true;
-			this._returnData.validation.regEx = this._customValidationOptions[4].value;
+			this._value.validation.regEx = this._customValidationOptions[4].value;
 		} else {
-			this._returnData.validation.regEx = regEx;
+			this._value.validation.regEx = regEx;
 		}
 	}
 
@@ -99,18 +100,18 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		const isValid = form.checkValidity();
 		if (!isValid) return;
 
-		this.modalContext?.submit(this._returnData);
+		this.modalContext?.submit();
 	}
 
 	#onNameChange(event: UUIInputEvent) {
-		const oldName = this._returnData.name;
-		const oldAlias = this._returnData.alias;
-		this._returnData.name = event.target.value.toString();
+		const oldName = this._value.name;
+		const oldAlias = this._value.alias;
+		this._value.name = event.target.value.toString();
 		if (this._aliasLocked) {
 			const expectedOldAlias = generateAlias(oldName ?? '');
 			// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
 			if (expectedOldAlias === oldAlias) {
-				this._returnData.alias = generateAlias(this._returnData.name);
+				this._value.alias = generateAlias(this._value.name);
 				this.requestUpdate('_returnData');
 			}
 		}
@@ -119,43 +120,43 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	#onAliasChange(event: UUIInputEvent) {
 		const alias = generateAlias(event.target.value.toString());
 		if (!this._aliasLocked) {
-			this._returnData.alias = alias;
+			this._value.alias = alias;
 		} else {
-			this._returnData.alias = this.data?.propertyData?.alias;
+			this._value.alias = this._originalPropertyData.alias;
 		}
 		this.requestUpdate('_returnData');
 	}
 
 	#onDataTypeIdChange(event: UUIInputEvent) {
 		const dataTypeId = event.target.value.toString();
-		this._returnData.dataTypeId = dataTypeId;
+		this._value.dataTypeId = dataTypeId;
 		this.requestUpdate('_returnData');
 	}
 
 	#onMandatoryChange(event: UUIBooleanInputEvent) {
 		const value = event.target.checked;
-		this._returnData.validation!.mandatory = value;
+		this._value.validation!.mandatory = value;
 		this.requestUpdate('_returnData');
 	}
 
 	#onMandatoryMessageChange(event: UUIInputEvent) {
 		const value = event.target.value.toString();
-		this._returnData.validation!.mandatoryMessage = value;
+		this._value.validation!.mandatoryMessage = value;
 		this.requestUpdate('_returnData');
 	}
 
 	#setAppearanceNormal() {
-		const currentValue = this._returnData.appearance?.labelOnTop;
+		const currentValue = this._value.appearance?.labelOnTop;
 		if (currentValue !== true) return;
 
-		this._returnData.appearance!.labelOnTop = false;
+		this._value.appearance!.labelOnTop = false;
 		this.requestUpdate('_returnData');
 	}
 	#setAppearanceTop() {
-		const currentValue = this._returnData.appearance?.labelOnTop;
+		const currentValue = this._value.appearance?.labelOnTop;
 		if (currentValue === true) return;
 
-		this._returnData.appearance!.labelOnTop = true;
+		this._value.appearance!.labelOnTop = true;
 		this.requestUpdate('_returnData');
 	}
 
@@ -170,7 +171,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			option.selected = option.value === regEx;
 		});
 
-		this._returnData.validation!.regEx = regEx ?? null;
+		this._value.validation!.regEx = regEx ?? null;
 		this.requestUpdate('_returnData');
 		this.requestUpdate('_customValidationOptions');
 	}
@@ -184,17 +185,17 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		if (betterChoice === undefined) {
 			this._customValidationOptions[4].selected = true;
 		}
-		this._returnData.validation!.regEx = regEx;
+		this._value.validation!.regEx = regEx;
 		this.requestUpdate('_returnData');
 		this.requestUpdate('_customValidationOptions');
 	}
 	#onValidationMessageChange(event: UUIInputEvent) {
-		this._returnData.validation!.regExMessage = event.target.value.toString();
+		this._value.validation!.regExMessage = event.target.value.toString();
 		this.requestUpdate('_returnData');
 	}
 
 	#onVaryByCultureChange(event: UUIBooleanInputEvent) {
-		this._returnData.variesByCulture = event.target.checked;
+		this._value.variesByCulture = event.target.checked;
 		this.requestUpdate('_returnData');
 	}
 
@@ -214,7 +215,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="name-input"
 										name="name"
 										@input=${this.#onNameChange}
-										.value=${this._returnData.name}
+										.value=${this._value.name}
 										placeholder="Enter a name...">
 										<!-- TODO: validation for bad characters -->
 									</uui-input>
@@ -222,7 +223,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="alias-input"
 										name="alias"
 										@input=${this.#onAliasChange}
-										.value=${this._returnData.alias}
+										.value=${this._value.alias}
 										placeholder="Enter alias..."
 										?disabled=${this._aliasLocked}>
 										<!-- TODO: validation for bad characters -->
@@ -234,10 +235,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="description-input"
 										name="description"
 										placeholder="Enter description..."
-										.value=${this._returnData.description}></uui-textarea>
+										.value=${this._value.description}></uui-textarea>
 								</div>
 								<umb-data-type-flow-input
-									.value=${this._returnData.dataTypeId ?? ''}
+									.value=${this._value.dataTypeId ?? ''}
 									@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
 								<hr />
 								<div class="container">
@@ -267,7 +268,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		return html`<button
 			type="button"
 			@click=${this.#setAppearanceNormal}
-			class="appearance left ${this._returnData.appearance?.labelOnTop ? '' : 'selected'}">
+			class="appearance left ${this._value.appearance?.labelOnTop ? '' : 'selected'}">
 			<svg width="200" height="48" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<rect width="94" height="14" rx="6" fill="currentColor" />
 				<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
@@ -282,7 +283,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			<button
 				type="button"
 				@click=${this.#setAppearanceTop}
-				class="appearance top ${this._returnData.appearance?.labelOnTop ? 'selected' : ''}">
+				class="appearance top ${this._value.appearance?.labelOnTop ? 'selected' : ''}">
 				<svg width="140" height="48" viewBox="0 0 140 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<rect width="90" height="14" rx="6" fill="currentColor" />
 					<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
@@ -299,13 +300,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				<uui-toggle
 					@change=${this.#onMandatoryChange}
 					id="mandatory"
-					.checked=${this._returnData.validation?.mandatory ?? false}
+					.checked=${this._value.validation?.mandatory ?? false}
 					slot="editor"></uui-toggle>
 			</div>
-			${this._returnData.validation?.mandatory
+			${this._value.validation?.mandatory
 				? html`<uui-input
 						name="mandatory-message"
-						value=${this._returnData.validation?.mandatoryMessage ?? ''}
+						value=${this._value.validation?.mandatoryMessage ?? ''}
 						@change=${this.#onMandatoryMessageChange}
 						style="margin-top: var(--uui-size-space-1)"
 						id="mandatory-message"
@@ -319,17 +320,17 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				@change=${this.#onCustomValidationChange}
 				.options=${this._customValidationOptions}></uui-select>
 
-			${this._returnData.validation?.regEx !== null
+			${this._value.validation?.regEx !== null
 				? html`
 						<uui-input
 							name="pattern"
 							style="margin-bottom: var(--uui-size-space-1); margin-top: var(--uui-size-space-5);"
 							@change=${this.#onValidationRegExChange}
-							.value=${this._returnData.validation?.regEx ?? ''}></uui-input>
+							.value=${this._value.validation?.regEx ?? ''}></uui-input>
 						<uui-textarea
 							name="pattern-message"
 							@change=${this.#onValidationMessageChange}
-							.value=${this._returnData.validation?.regExMessage ?? ''}></uui-textarea>
+							.value=${this._value.validation?.regExMessage ?? ''}></uui-textarea>
 				  `
 				: nothing} `;
 	}
@@ -346,7 +347,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	#renderVaryByCulture() {
 		return html`<uui-toggle
 			@change=${this.#onVaryByCultureChange}
-			.checked=${this._returnData.variesByCulture ?? false}
+			.checked=${this._value.variesByCulture ?? false}
 			label="Vary by culture"></uui-toggle> `;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
index e38d25eb99..eef4e72e4b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
@@ -19,9 +19,10 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 	#selectionManager = new UmbSelectionManager();
 
 	#submit() {
-		this.modalContext?.submit({
+		this._value = {
 			selection: this.#selectionManager.getSelection(),
-		});
+		};
+		this.modalContext?.submit();
 	}
 
 	#close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
index 45c4ab69ff..203783fac1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
@@ -51,7 +51,9 @@ export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModa
 		if (!this._template?.id) return;
 
 		this.#saveTemplate();
-		this.modalContext?.submit({ id: this._template.id });
+
+		this._value = { id: this._template.id };
+		this.modalContext?.submit();
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index a1f83cf55e..f9499a1a55 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -19,25 +19,23 @@ export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentation
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._selection = this.data?.selection ?? [];
+		// TODO: We should make a nicer way to observe the value..
+		if (this.modalContext) {
+			this.observe(this.modalContext.value, (value) => {
+				this._selection = value?.selection ?? [];
+			});
+		}
+
 		this._multiple = this.data?.multiple ?? false;
 	}
 
 	#onSelectionChange(e: CustomEvent) {
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		this._selection = element.selection;
+		this._value = { selection: element.selection };
 		this.dispatchEvent(new UmbSelectionChangeEvent());
 	}
 
-	#submit() {
-		this.modalContext?.submit({ selection: this._selection });
-	}
-
-	#close() {
-		this.modalContext?.reject();
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline="Select">
@@ -52,8 +50,8 @@ export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentation
 						?multiple=${this._multiple}></umb-tree>
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this.#close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
index 98a5792db3..8433e25c76 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
@@ -18,7 +18,13 @@ export abstract class UmbModalBaseElement<
 	public modalContext?: UmbModalContext<ModalDataType, ModalValueType>;
 
 	@property({ type: Object, attribute: false })
-	public data?: ModalDataType;
+	public get data(): ModalDataType | undefined {
+		return this._data;
+	}
+	public set data(value: ModalDataType | undefined) {
+		this._data = value;
+	}
+	private _data?: ModalDataType | undefined;
 
 	@state()
 	public get _value(): ModalValueType {
@@ -34,7 +40,7 @@ export abstract class UmbModalBaseElement<
 	 * @memberof UmbModalBaseElement
 	 */
 	protected _submitModal() {
-		this.modalContext?.submit(this._value);
+		this.modalContext?.submit();
 	}
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index 7e77346fb4..d10ead659e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -1,6 +1,5 @@
 import type { UmbModalToken } from './token/modal-token.js';
-import { UmbModalContext, UmbModalContextClass } from './index.js';
-import type { IRouterSlot } from '@umbraco-cms/backoffice/external/router-slot';
+import { UmbModalContext, type UmbModalContextClassArgs } from './index.js';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
 import { appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
@@ -29,22 +28,19 @@ export class UmbModalManagerContext {
 	 * Opens a modal or sidebar modal
 	 * @public
 	 * @param {(string | UmbModalToken)} modalAlias
-	 * @param {ModalData} data
-	 * @param {UmbModalConfig} config
-	 * @param {IRouterSlot | null} router
+	 * @param {UmbModalContextClassArgs} args
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalManagerContext
 	 */
-	public open<ModalData extends object = object, ModalValue = unknown>(
-		modalAlias: string | UmbModalToken<ModalData, ModalValue>,
-		data?: ModalData,
-		config?: UmbModalConfig,
-		router: IRouterSlot | null = null,
+	public open<
+		ModalData extends object = object,
+		ModalValue = unknown,
+		ModalAliasTypeAsToken extends UmbModalToken = UmbModalToken<ModalData, ModalValue>,
+	>(
+		modalAlias: UmbModalToken<ModalData, ModalValue> | string,
+		args: UmbModalContextClassArgs<ModalAliasTypeAsToken> = {},
 	) {
-		const modalContext = new UmbModalContextClass(router, modalAlias, data, config) as unknown as UmbModalContext<
-			ModalData,
-			ModalValue
-		>;
+		const modalContext = new UmbModalContext(modalAlias, args);
 
 		this.#modals.next(
 			appendToFrozenArray(this.#modals.getValue(), modalContext, (entry) => entry.key === modalContext.key),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
index 64945c3eb4..baf60ee15f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
@@ -8,23 +8,38 @@ import type { Params } from '@umbraco-cms/backoffice/router';
 
 export type UmbModalRouteBuilder = (params: { [key: string]: string | number } | null) => string;
 
-export class UmbModalRouteRegistration<UmbModalTokenData extends object = object, UmbModalTokenResult = any> {
+export type UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue> = UmbModalTokenValue extends undefined
+	? {
+			data: UmbModalTokenData;
+			value?: UmbModalTokenValue;
+	  }
+	: {
+			data: UmbModalTokenData;
+			value: UmbModalTokenValue;
+	  };
+
+export class UmbModalRouteRegistration<UmbModalTokenData extends object = object, UmbModalTokenValue = any> {
 	#key: string;
 	#path: string | null;
-	#modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenResult> | string;
+	#modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenValue> | string;
 	#modalConfig?: UmbModalConfig;
 
-	#onSetupCallback?: (routingInfo: Params) => Promise<UmbModalTokenData | false> | UmbModalTokenData | false;
-	#onSubmitCallback?: (data: UmbModalTokenResult) => void;
+	#onSetupCallback?: (
+		routingInfo: Params,
+	) =>
+		| Promise<UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue> | false>
+		| UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue>
+		| false;
+	#onSubmitCallback?: (data: UmbModalTokenValue) => void;
 	#onRejectCallback?: () => void;
 
-	#modalManagerContext: UmbModalContext<UmbModalTokenData, UmbModalTokenResult> | undefined;
+	#modalManagerContext: UmbModalContext<UmbModalTokenData, UmbModalTokenValue> | undefined;
 	#routeBuilder?: UmbModalRouteBuilder;
 	#urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined;
 
 	// Notice i removed the key in the transferring to this class.
 	constructor(
-		modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenResult> | string,
+		modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenValue> | string,
 		path: string | null = null,
 		modalConfig?: UmbModalConfig,
 	) {
@@ -87,11 +102,18 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		this.#urlBuilderCallback?.(urlBuilder);
 	}
 
-	public onSetup(callback: (routingInfo: Params) => Promise<UmbModalTokenData | false> | UmbModalTokenData | false) {
+	public onSetup(
+		callback: (
+			routingInfo: Params,
+		) =>
+			| Promise<UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue> | false>
+			| UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue>
+			| false,
+	) {
 		this.#onSetupCallback = callback;
 		return this;
 	}
-	public onSubmit(callback: (data: UmbModalTokenResult) => void) {
+	public onSubmit(callback: (value: UmbModalTokenValue) => void) {
 		this.#onSubmitCallback = callback;
 		return this;
 	}
@@ -100,7 +122,7 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		return this;
 	}
 
-	#onSubmit = (data: UmbModalTokenResult) => {
+	#onSubmit = (data: UmbModalTokenValue) => {
 		this.#onSubmitCallback?.(data);
 		this.#modalManagerContext = undefined;
 	};
@@ -115,7 +137,14 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 
 		const modalData = this.#onSetupCallback ? await this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
-			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, modalData, this.modalConfig, router);
+			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, {
+				data: {
+					data: modalData?.data,
+					value: modalData?.value,
+					config: this.modalConfig,
+					router,
+				},
+			});
 			this.#modalManagerContext.onSubmit().then(this.#onSubmit, this.#onReject);
 			return this.#modalManagerContext;
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
index eb76a1195b..5e5cd1cf01 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
@@ -6,36 +6,22 @@ import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-/**
- * Type which omits the real submit method, and replaces it with a submit method which accepts an optional argument depending on the generic type.
- */
-export type UmbModalContext<ModalData extends object = object, ModalValue = any> = Omit<
-	UmbModalContextClass<ModalData, ModalValue>,
-	'submit'
-> &
-	OptionalSubmitArgumentIfUndefined<ModalValue>;
-
-// If Type is undefined we don't accept an argument,
-// If type is unknown, we accept an option argument.
-// If type is anything else, we require an argument of that type.
-type OptionalSubmitArgumentIfUndefined<T> = T extends undefined
-	? {
-			submit: () => void;
-	  }
-	: T extends unknown
-	? {
-			submit: (arg?: T) => void;
-	  }
-	: {
-			submit: (arg: T) => void;
-	  };
-
 export interface UmbModalRejectReason {
 	type: string;
 }
 
+export type UmbModalContextClassArgs<
+	ModalAliasType extends string | UmbModalToken,
+	ModalAliasTypeAsToken extends UmbModalToken = ModalAliasType extends UmbModalToken ? ModalAliasType : UmbModalToken,
+> = {
+	router?: IRouterSlot | null;
+	data?: ModalAliasTypeAsToken['DATA'];
+	value?: ModalAliasTypeAsToken['VALUE'];
+	config?: UmbModalConfig;
+};
+
 // TODO: consider splitting this into two separate handlers
-export class UmbModalContextClass<ModalPreset extends object = object, ModalValue = unknown> extends EventTarget {
+export class UmbModalContext<ModalPreset extends object = object, ModalValue = any> extends EventTarget {
 	#submitPromise: Promise<ModalValue>;
 	#submitResolver?: (value: ModalValue) => void;
 	#submitRejecter?: (reason?: UmbModalRejectReason) => void;
@@ -47,18 +33,16 @@ export class UmbModalContextClass<ModalPreset extends object = object, ModalValu
 	public readonly router: IRouterSlot | null = null;
 	public readonly alias: string | UmbModalToken<ModalPreset, ModalValue>;
 
-	#value = new UmbObjectState<ModalValue | undefined>(undefined);
-	public readonly value = this.#value.asObservable();
+	#value;
+	public readonly value;
 
 	constructor(
-		router: IRouterSlot | null,
 		modalAlias: string | UmbModalToken<ModalPreset, ModalValue>,
-		data?: ModalPreset,
-		config?: UmbModalConfig,
+		args: UmbModalContextClassArgs<UmbModalToken>,
 	) {
 		super();
-		this.key = config?.key || UmbId.new();
-		this.router = router;
+		this.key = args.config?.key || UmbId.new();
+		this.router = args.router ?? null;
 		this.alias = modalAlias;
 
 		if (this.alias instanceof UmbModalToken) {
@@ -66,11 +50,17 @@ export class UmbModalContextClass<ModalPreset extends object = object, ModalValu
 			this.size = this.alias.getDefaultConfig()?.size || this.size;
 		}
 
-		this.type = config?.type || this.type;
-		this.size = config?.size || this.size;
+		this.type = args.config?.type || this.type;
+		this.size = args.config?.size || this.size;
 
 		const defaultData = this.alias instanceof UmbModalToken ? this.alias.getDefaultData() : undefined;
-		this.data = Object.freeze({ ...defaultData, ...data } as ModalPreset);
+		this.data = Object.freeze({ ...defaultData, ...args.data } as ModalPreset);
+
+		const initValue =
+			args.value ?? this.alias instanceof UmbModalToken ? (this.alias as UmbModalToken).getDefaultValue() : undefined;
+
+		this.#value = new UmbObjectState(initValue) as UmbObjectState<ModalValue>;
+		this.value = this.#value.asObservable();
 
 		// TODO: Consider if its right to use Promises, or use another event based system? Would we need to be able to cancel an event, to then prevent the closing..?
 		this.#submitPromise = new Promise((resolve, reject) => {
@@ -85,8 +75,8 @@ export class UmbModalContextClass<ModalPreset extends object = object, ModalValu
 	 * @public
 	 * @memberof UmbModalContext
 	 */
-	private submit(value?: ModalValue) {
-		this.#submitResolver?.(value as ModalValue);
+	public submit() {
+		this.#submitResolver?.(this.getValue());
 	}
 
 	/**
@@ -100,15 +90,17 @@ export class UmbModalContextClass<ModalPreset extends object = object, ModalValu
 
 	/**
 	 * Gives a Promise which will be resolved when this modal is submitted.
+	 * @returns {Promise<ModalValue>}
 	 * @public
 	 * @memberof UmbModalContext
 	 */
-	public onSubmit(): Promise<ModalValue> {
+	public onSubmit() {
 		return this.#submitPromise;
 	}
 
 	/**
 	 * Gives the current value of this modal.
+	 * @returns {ModalValue}
 	 * @public
 	 * @memberof UmbModalContext
 	 */
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts
index 0bfb8fced7..e3a9520916 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts
@@ -1,6 +1,5 @@
 export interface UmbPickerModalData<ItemType> {
 	multiple?: boolean;
-	selection?: Array<string | null>;
 	hideTreeRoot?: boolean;
 	filter?: (item: ItemType) => boolean;
 	pickableFilter?: (item: ItemType) => boolean;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
index d37ad613dd..123910ca78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
@@ -4,10 +4,12 @@ export interface UmbDataTypePickerFlowDataTypePickerModalData {
 	propertyEditorUiAlias: string;
 }
 
-export type UmbDataTypePickerFlowDataTypePickerModalValue = {
-	dataTypeId?: string;
-	createNewWithPropertyEditorUiAlias?: string;
-};
+export type UmbDataTypePickerFlowDataTypePickerModalValue =
+	| {
+			dataTypeId?: string;
+			createNewWithPropertyEditorUiAlias?: string;
+	  }
+	| undefined;
 
 export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToken<
 	UmbDataTypePickerFlowDataTypePickerModalData,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
index 89737ad100..584ac447ea 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
@@ -1,7 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbDataTypePickerFlowModalData {
-	selection?: Array<string>;
 	submitLabel?: string;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
index 40144b4c00..ba6b2453b5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
@@ -1,6 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export interface UmbIconPickerModalData {}
+export type UmbIconPickerModalData = never;
 
 export interface UmbIconPickerModalValue {
 	color: string | undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
index f94c76a1e5..674d735988 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
@@ -3,7 +3,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbLanguagePickerModalData {
 	multiple?: boolean;
-	selection?: Array<string | null>;
 	filter?: (language: LanguageResponseModel) => boolean;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
index be36808541..165f8fa9b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
@@ -2,12 +2,11 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbLinkPickerModalData {
-	index: number | null;
-	link: UmbLinkPickerLink;
 	config: UmbLinkPickerConfig;
+	index: number | null;
 }
 
-export type UmbLinkPickerModalValue = { index: number | null; link: UmbLinkPickerLink };
+export type UmbLinkPickerModalValue = { link: UmbLinkPickerLink };
 
 export interface UmbLinkPickerLink {
 	icon?: string | null;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
index ff590346d2..117778ee1b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
@@ -13,15 +13,15 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 	readonly DATA: ModalDataType = undefined as never;
 
 	/**
-	 * Get the result type of the token
+	 * Get the value type of the token
 	 *
 	 * @public
 	 * @type      {ModalValueType}
 	 * @memberOf  UmbModalToken
-	 * @example   `typeof MyModal.RESULT`
+	 * @example   `typeof MyModal.VALUE`
 	 * @returns   undefined
 	 */
-	readonly RESULT: ModalValueType = undefined as never;
+	readonly VALUE: ModalValueType = undefined as never;
 
 	/**
 	 * @param alias   Unique identifier for the token,
@@ -32,6 +32,7 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 		protected alias: string,
 		protected defaultConfig?: UmbModalConfig,
 		protected defaultData?: ModalDataType,
+		protected defaultValue?: ModalValueType,
 	) {}
 
 	/**
@@ -51,4 +52,8 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 	public getDefaultData(): ModalDataType | undefined {
 		return this.defaultData;
 	}
+
+	public getDefaultValue(): ModalValueType | undefined {
+		return this.defaultValue;
+	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
index 3c78c3a4b2..82e238931b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
@@ -1,7 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbPropertyEditorUIPickerModalData {
-	selection?: Array<string>;
 	submitLabel?: string;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
index 8e15120cda..151b2dcabf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
@@ -3,7 +3,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export type UmbPropertySettingsModalData = {
 	documentTypeId: string;
-	propertyData: PropertyTypeModelBaseModel;
 };
 export type UmbPropertySettingsModalValue = PropertyTypeModelBaseModel;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
index 46523ee4b1..b3b0ac1cb6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
@@ -6,11 +6,13 @@ export interface UmbWorkspaceData {
 	preset: Partial<CreateDataTypeRequestModel>;
 }
 
-export type UmbWorkspaceResult = {
-	id: string;
-};
+export type UmbWorkspaceValue =
+	| {
+			id: string;
+	  }
+	| undefined;
 
-export const UMB_WORKSPACE_MODAL = new UmbModalToken<UmbWorkspaceData, UmbWorkspaceResult>('Umb.Modal.Workspace', {
+export const UMB_WORKSPACE_MODAL = new UmbModalToken<UmbWorkspaceData, UmbWorkspaceValue>('Umb.Modal.Workspace', {
 	type: 'sidebar',
 	size: 'large',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
index b898934c2b..ad518f961a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
@@ -13,6 +13,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel> extends UmbBaseController {
+	// TODO: We are way too unsecure about the requirements for the Modal Token, as we have certain expectation for the data and value.
 	modalAlias: string | UmbModalToken;
 	repository?: UmbItemRepository<ItemType>;
 	#getUnique: (entry: ItemType) => string | undefined;
@@ -68,11 +69,16 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 	openPicker(pickerData?: Partial<UmbPickerModalData<ItemType>>) {
 		if (!this.modalManager) throw new Error('Modal manager context is not initialized');
 
+		// TODO: Update so selection is part of value...
 		const modalContext = this.modalManager.open(this.modalAlias, {
-			multiple: this.max === 1 ? false : true,
-			selection: [...this.getSelection()],
-			pickableFilter: this.pickableFilter,
-			...pickerData,
+			data: {
+				multiple: this.max === 1 ? false : true,
+				pickableFilter: this.pickableFilter,
+				...pickerData,
+			},
+			value: {
+				selection: [...this.getSelection()],
+			},
 		});
 
 		modalContext?.onSubmit().then(({ selection }: any) => {
@@ -87,10 +93,12 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 		if (!item) throw new Error('Could not find item with unique: ' + unique);
 
 		const modalContext = this.modalManager?.open(UMB_CONFIRM_MODAL, {
-			color: 'danger',
-			headline: `Remove ${item.name}?`,
-			content: 'Are you sure you want to remove this item',
-			confirmLabel: 'Remove',
+			data: {
+				color: 'danger',
+				headline: `Remove ${item.name}?`,
+				content: 'Are you sure you want to remove this item',
+				confirmLabel: 'Remove',
+			},
 		});
 
 		await modalContext?.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
index 5fc1ddb181..af8dbe690f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
@@ -28,9 +28,11 @@ export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase {
 		const modalHandler = this.#modalContext?.open<UmbCodeEditorModalData, UmbCodeEditorModalValue>(
 			UMB_CODE_EDITOR_MODAL,
 			{
-				headline: 'Edit source code',
-				content: this.editor.getContent() ?? '',
-				language: 'html',
+				data: {
+					headline: 'Edit source code',
+					content: this.editor.getContent() ?? '',
+					language: 'html',
+				},
 			},
 		);
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
index 402b493201..10ce0609b8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
@@ -77,7 +77,7 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase
 	}
 
 	async #showModal(selectedElm: HTMLElement, embeddedMediaModalData: UmbEmbeddedMediaModalData) {
-		const modalHandler = this.#modalContext?.open(UMB_EMBEDDED_MEDIA_MODAL, embeddedMediaModalData);
+		const modalHandler = this.#modalContext?.open(UMB_EMBEDDED_MEDIA_MODAL, { data: embeddedMediaModalData });
 
 		if (!modalHandler) return;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts
index 5c50a388b3..7a0acf8728 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts
@@ -94,11 +94,15 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
 
 	async #openLinkPicker(currentTarget?: UmbLinkPickerLink) {
 		const modalHandler = this.#modalContext?.open(UMB_LINK_PICKER_MODAL, {
-			config: {
-				ignoreUserStartNodes: this.configuration?.getValueByAlias<boolean>('ignoreUserStartNodes') ?? false,
+			data: {
+				config: {
+					ignoreUserStartNodes: this.configuration?.getValueByAlias<boolean>('ignoreUserStartNodes') ?? false,
+				},
+				index: null,
+			},
+			value: {
+				link: currentTarget ?? {},
 			},
-			link: currentTarget ?? {},
-			index: null,
 		});
 
 		if (!modalHandler) return;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts
index 9910611776..e7957b30c4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts
@@ -193,8 +193,10 @@ export default class UmbTinyMceMacroPickerPlugin extends UmbTinyMcePluginBase {
 	// TODO => depends on macro picker, which doesn't exist, just showing a generic modal for now
 	async #showMacroPicker(dialogData: DialogData) {
 		const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Macro picker',
-			content: 'Yet to be implemented',
+			data: {
+				headline: 'Macro picker',
+				content: 'Yet to be implemented',
+			},
 		});
 
 		if (!modalHandler) return;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts
index 66825ac3e3..fe58231a3c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts
@@ -54,11 +54,13 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
 		});
 	}
 
+	/*
 	async #observeCurrentUser() {
 		if (!this.#currentUserContext) return;
 
 		this.observe(this.#currentUserContext.currentUser, (currentUser) => (this.#currentUser = currentUser));
 	}
+	*/
 
 	async #onAction() {
 		const selectedElm = this.editor.selection.getNode();
@@ -90,6 +92,8 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
 	}
 
 	async #showMediaPicker(currentTarget: MediaPickerTargetData) {
+		/*
+		// TODO: I dont think we should parse this one... it should be up to the modal to get this information, and then we could parse some configs on to affect this.
 		let startNodeId;
 		let startNodeIsVirtual;
 
@@ -102,13 +106,18 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
 				startNodeIsVirtual = this.#currentUser?.mediaStartNodeIds?.length !== 1;
 			}
 		}
+		*/
 
 		// TODO => startNodeId and startNodeIsVirtual do not exist on ContentTreeItemResponseModel
 		const modalHandler = this.#modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {
-			selection: currentTarget.udi ? [...currentTarget.udi] : [],
-			multiple: false,
-			//startNodeId,
-			//startNodeIsVirtual,
+			data: {
+				multiple: false,
+				//startNodeId,
+				//startNodeIsVirtual,
+			},
+			value: {
+				selection: currentTarget.udi ? [...currentTarget.udi] : [],
+			},
 		});
 
 		if (!modalHandler) return;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts
index 7c7e720546..23c6f9477f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts
@@ -49,7 +49,8 @@ export abstract class UmbEditableWorkspaceContextBase<RepositoryType, EntityType
 	}
 
 	protected submitModal(data: EntityType) {
-		this.modalContext?.submit(data);
+		this.modalContext?.setValue(data);
+		this.modalContext?.submit();
 	}
 
 	abstract getEntityId(): string | undefined; // TODO: Consider if this should go away/be renamed? now that we have getUnique()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
index d0371a487a..9535bddadc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
@@ -41,10 +41,11 @@ export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 		const formData = new FormData(form);
 		const name = formData.get('name') as string;
 
-		this.modalContext?.submit({
+		this._value = {
 			name,
 			parentId: this.data?.parentId ?? null,
-		});
+		};
+		this.modalContext?.submit();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
index cd701c5342..f3df5903bc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
@@ -30,7 +30,8 @@ export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
 
 		const formData = new FormData(form);
 
-		this.modalContext?.submit({ includeChildren: (formData.get('includeDescendants') as string) === 'on' });
+		this._value = { includeChildren: (formData.get('includeDescendants') as string) === 'on' };
+		this.modalContext?.submit();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export.action.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export.action.ts
index 75c0c8e448..ca5eb554bf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export.action.ts
@@ -24,7 +24,7 @@ export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase
 	async execute() {
 		if (!this.#modalContext) return;
 
-		const modalContext = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL, { unique: this.unique });
+		const modalContext = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL, { data: { unique: this.unique } });
 
 		const { includeChildren } = await modalContext.onSubmit();
 		if (includeChildren === undefined) return;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
index 8a064e2eaf..d751979bf1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
@@ -71,7 +71,8 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 		const { error } = await this.#dictionaryRepository.import(this._temporaryFileId, this._parentId);
 		if (error) return;
 
-		this.modalContext?.submit({ entityItems: this.#createTreeEntitiesFromTempFile(), parentId: this._parentId });
+		this._value = { entityItems: this.#createTreeEntitiesFromTempFile(), parentId: this._parentId };
+		this.modalContext?.submit();
 	}
 
 	constructor() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import.action.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import.action.ts
index 634b0e5c91..06cde9e29e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import.action.ts
@@ -29,7 +29,7 @@ export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase
 	async execute() {
 		if (!this.#modalContext) return;
 
-		const modalContext = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL, { unique: this.unique });
+		const modalContext = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL, { data: { unique: this.unique } });
 
 		const { entityItems, parentId } = await modalContext.onSubmit();
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index 0136686fa5..5fa5ff6fec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -89,16 +89,18 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 	#onRequestDelete(data: RedirectUrlResponseModel) {
 		if (!data.id) return;
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Delete',
-			content: html`
-				<div style="width:300px">
-					<p>${this.localize.term('redirectUrls_redirectRemoveWarning')}</p>
-					${this.localize.term('redirectUrls_originalUrl')}: <strong>${data.originalUrl}</strong><br />
-					${this.localize.term('redirectUrls_redirectedTo')}: <strong>${data.destinationUrl}</strong>
-				</div>
-			`,
-			color: 'danger',
-			confirmLabel: 'Delete',
+			data: {
+				headline: 'Delete',
+				content: html`
+					<div style="width:300px">
+						<p>${this.localize.term('redirectUrls_redirectRemoveWarning')}</p>
+						${this.localize.term('redirectUrls_originalUrl')}: <strong>${data.originalUrl}</strong><br />
+						${this.localize.term('redirectUrls_redirectedTo')}: <strong>${data.destinationUrl}</strong>
+					</div>
+				`,
+				color: 'danger',
+				confirmLabel: 'Delete',
+			},
 		});
 
 		modalContext
@@ -136,10 +138,12 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 		}
 
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: `${this.localize.term('redirectUrls_disableUrlTracker')}`,
-			content: `${this.localize.term('redirectUrls_confirmDisable')}`,
-			color: 'danger',
-			confirmLabel: 'Disable',
+			data: {
+				headline: `${this.localize.term('redirectUrls_disableUrlTracker')}`,
+				content: `${this.localize.term('redirectUrls_confirmDisable')}`,
+				color: 'danger',
+				confirmLabel: 'Disable',
+			},
 		});
 		modalContext
 			?.onSubmit()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts
index ffb76adc49..dbb08b58a6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts
@@ -20,7 +20,9 @@ export class UmbCreateDataTypeEntityAction extends UmbEntityActionBase<UmbDocume
 		if (!this.repository) throw new Error('Repository is not available');
 
 		this.#modalManagerContext?.open(UMB_DOCUMENT_TYPE_CREATE_OPTIONS_MODAL, {
-			parentKey: this.unique,
+			data: {
+				parentKey: this.unique,
+			},
 		});
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts
index 3f42a95d47..4b7e18dc9b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts
@@ -30,7 +30,9 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 	#onClick(event: PointerEvent) {
 		event.stopPropagation();
 		const folderModalHandler = this.#modalContext?.open(UMB_FOLDER_MODAL, {
-			repositoryAlias: DOCUMENT_TYPE_DETAIL_REPOSITORY_ALIAS,
+			data: {
+				repositoryAlias: DOCUMENT_TYPE_DETAIL_REPOSITORY_ALIAS,
+			},
 		});
 		folderModalHandler?.onSubmit().then(() => this.modalContext?.submit());
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
index 79469d08b8..b04970fc98 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
@@ -101,8 +101,10 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 
 	private async _handleIconClick() {
 		const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL, {
-			icon: this._icon,
-			color: this._iconColorAlias,
+			value: {
+				icon: this._icon,
+				color: this._iconColorAlias,
+			},
 		});
 
 		modalContext?.onSubmit().then((saved) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
index 97f890bfd1..c5f2fd9dcd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
@@ -120,10 +120,10 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 				if (documentTypeId === undefined) return false;
 				const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId);
 				if (propertyData === undefined) return false;
-				return { propertyData, documentTypeId };
+				return { data: { documentTypeId }, value: propertyData };
 			})
-			.onSubmit((result) => {
-				this.#addProperty(result);
+			.onSubmit((value) => {
+				this.#addProperty(value);
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._modalRouteNewProperty = routeBuilder(null);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
index e1ec8260b0..21b2026c1e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
@@ -92,7 +92,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 				if (documentTypeId === undefined) return false;
 				const propertyData = this.property;
 				if (propertyData === undefined) return false;
-				return { propertyData, documentTypeId };
+				return { data: { documentTypeId }, value: propertyData };
 			})
 			.onSubmit((result) => {
 				this._partialUpdate(result);
@@ -104,7 +104,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('document-type')
 			.onSetup(() => {
-				return { entityType: 'document-type', preset: {} };
+				return { data: { entityType: 'document-type', preset: {} } };
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._editDocumentTypePath = routeBuilder({});
@@ -138,7 +138,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 		e.stopImmediatePropagation();
 		if (!this.property || !this.property.id) return;
 
-		const Message: UmbConfirmModalData = {
+		const modalData: UmbConfirmModalData = {
 			headline: `${this.localize.term('actions_delete')} property`,
 			content: html`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[
 				this.property.name || this.property.id,
@@ -150,7 +150,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			color: 'danger',
 		};
 
-		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, { data: modalData });
 
 		modalHandler
 			?.onSubmit()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
index 87cb4d38ec..0b5156443f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
@@ -186,7 +186,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple
 	}
 
 	#requestRemoveTab(tab: PropertyTypeContainerModelBaseModel | undefined) {
-		const Message: UmbConfirmModalData = {
+		const modalData: UmbConfirmModalData = {
 			headline: 'Delete tab',
 			content: html`<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}>
 					Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong>
@@ -202,7 +202,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple
 
 		// TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab.
 
-		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, { data: modalData });
 
 		modalHandler?.onSubmit().then(() => {
 			this.#remove(tab?.id);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
index a157f93c73..8db4c056e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
@@ -61,11 +61,14 @@ export class UmbInputDocumentGranularPermissionElement extends FormControlMixin(
 
 	#openDocumentPicker() {
 		// We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data:
+		// TODO: Use value instead:
 		const modalContext = this.#modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, {
-			selection: [...this._selectedIds],
+			value: {
+				selection: [...this._selectedIds],
+			},
 		});
 
-		modalContext?.onSubmit().then(({ selection }: any) => {
+		modalContext?.onSubmit().then((value) => {
 			//this.#setSelection(selection);
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
index 60525f05d0..bc6b0cdba1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
@@ -58,7 +58,8 @@ export class UmbCreateDocumentModalElement extends UmbModalBaseElement<
 		const target = event.target as HTMLButtonElement;
 		const documentTypeId = target.dataset.id;
 		if (!documentTypeId) throw new Error('No document type id found');
-		this.modalContext?.submit({ documentTypeId });
+		this._value = { documentTypeId };
+		this.modalContext?.submit();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
index 6123fffa85..0e63b8d393 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
@@ -16,7 +16,8 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 	}
 
 	private _handleSubmit() {
-		this.modalContext?.submit({ name: this._input.value as string, query: this.data?.query });
+		this._value = { name: this._input.value as string, query: this.data?.query };
+		this.modalContext?.submit();
 	}
 
 	@state()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
index 72c6d44990..5be1c981d5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
@@ -102,12 +102,14 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 
 	private async _handleIconClick() {
 		const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL, {
-			icon: this._icon,
-			color: this._iconColorAlias,
+			value: {
+				icon: this._icon,
+				color: this._iconColorAlias,
+			},
 		});
 
-		modalContext?.onSubmit().then((saved) => {
-			if (saved.icon) this.#workspaceContext?.updateProperty('icon', saved.icon);
+		modalContext?.onSubmit().then((value) => {
+			if (value.icon) this.#workspaceContext?.updateProperty('icon', value.icon);
 			// TODO: save color ALIAS as well
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts
index 10ea5b0184..1e4c45984b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts
@@ -118,10 +118,10 @@ export class UmbMediaTypeWorkspaceViewEditPropertiesElement extends UmbLitElemen
 				if (mediaTypeId === undefined) return false;
 				const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId);
 				if (propertyData === undefined) return false;
-				return { propertyData, documentTypeId: mediaTypeId }; //TODO: Should we have a separate modal for mediaTypes?
+				return { data: { documentTypeId: mediaTypeId }, value: propertyData }; //TODO: Should we have a separate modal for mediaTypes?
 			})
-			.onSubmit((result) => {
-				this.#addProperty(result);
+			.onSubmit((value) => {
+				this.#addProperty(value);
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._modalRouteNewProperty = routeBuilder(null);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts
index 9f71ba5fa1..5760770ac2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts
@@ -22,8 +22,12 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbMed
 	async execute() {
 		// TODO: the picker should be single picker by default
 		const modalContext = this.#modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {
-			selection: [],
-			multiple: false,
+			data: {
+				multiple: false,
+			},
+			value: {
+				selection: [],
+			},
 		});
 		if (modalContext) {
 			const { selection } = await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
index 8846a82fd1..0c1dc9690e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
@@ -16,7 +16,8 @@ export default class UmbExamineFieldsSettingsModalElement
 	private _fields?: UmbExamineFieldsSettingsModalData;
 
 	private _handleClose() {
-		this.modalContext?.submit({ fields: this._fields });
+		this._value = { fields: this._fields };
+		this.modalContext?.submit();
 	}
 
 	disconnectedCallback(): void {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
index a83e66e5eb..b084fdade8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
@@ -23,7 +23,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
 	connectedCallback(): void {
 		super.connectedCallback();
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this.data?.selection ?? []);
+		this.#selectionManager.setSelection(this._value?.selection ?? []);
 	}
 
 	async firstUpdated() {
@@ -40,7 +40,8 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
 	}
 
 	#submit() {
-		this.modalContext?.submit({ selection: this.#selectionManager.getSelection() });
+		this._value = { selection: this.#selectionManager.getSelection() };
+		this.modalContext?.submit();
 	}
 
 	#close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
index 03c9551732..8ba35ee99e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
@@ -75,7 +75,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 
 	#openChooseTypeModal = () => {
 		this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, {
-			hidePartialView: this.hidePartialView,
+			data: {
+				hidePartialView: this.hidePartialView,
+			},
 		});
 		this.#openModal?.onSubmit().then((closedModal: UmbChooseInsertTypeModalValue) => {
 			this.determineInsertValue(closedModal);
@@ -93,7 +95,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 
 	#openInsertDictionaryItemModal() {
 		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
-			pickableFilter: (item) => item.id !== null,
+			data: {
+				pickableFilter: (item) => item.id !== null,
+			},
 		});
 		this.#openModal?.onSubmit().then((value) => {
 			this.#getDictionaryItemSnippet(value).then(() => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
index 52d54b2cbe..ec074efa1e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
@@ -47,21 +47,27 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	#openInsertPartialViewSidebar() {
 		this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
 		this.#openModal?.onSubmit().then((partialViewPickerModalValue) => {
-			if (partialViewPickerModalValue)
-				this.modalContext?.submit({
+			if (partialViewPickerModalValue) {
+				this._value = {
 					type: CodeSnippetType.partialView,
 					value: partialViewPickerModalValue.selection[0],
-				});
+				};
+				this.modalContext?.submit();
+			}
 		});
 	}
 
 	#openInsertDictionaryItemModal() {
 		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
-			pickableFilter: (item) => item.id !== null,
+			data: {
+				pickableFilter: (item) => item.id !== null,
+			},
 		});
 		this.#openModal?.onSubmit().then((dictionaryItemPickerModalValue) => {
-			if (dictionaryItemPickerModalValue)
-				this.modalContext?.submit({ value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem });
+			if (dictionaryItemPickerModalValue) {
+				this._value = { value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem };
+				this.modalContext?.submit();
+			}
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
index ceaa3a9da8..152a4d4dfb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -64,7 +64,10 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 
 	#submit() {
 		const value = this.selectedCheckbox?.snippet;
-		if (this.selectedCheckbox?.validate()) this.modalContext?.submit({ value: value ?? '' });
+		if (this.selectedCheckbox?.validate()) {
+			this._value = { value: value ?? '' };
+			this.modalContext?.submit();
+		}
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
index 3dbf26cd02..a30dbcc3ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
@@ -20,7 +20,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._selection = this.data?.selection ?? [];
+		this._selection = this._value?.selection ?? [];
 		this._multiple = this.data?.multiple ?? true;
 	}
 
@@ -32,7 +32,8 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 	}
 
 	private _submit() {
-		this.modalContext?.submit({ selection: this._selection });
+		this._value = { selection: this._selection };
+		this.modalContext?.submit();
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
index bb80658a65..7d9d8cc6a3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
@@ -30,7 +30,9 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
 	openModal = () => {
 		if (!this._modalContext) throw new Error('Modal context not found');
 		const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
-			rule: this.rule,
+			value: {
+				rule: this.rule,
+			},
 		});
 		modal?.onSubmit().then((result) => {
 			if (result.rule && this.rule?.name) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
index f86ed9a9ce..8c1e4f1752 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
@@ -4,57 +4,48 @@ import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoff
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 
-export interface StylesheetRichTextEditorStyleModalData {
+export interface StylesheetRichTextEditorStyleModalValue {
 	rule: RichTextRuleModelSortable | null;
 }
 
-export type UmbStylesheetRichTextEditorStyleModalValue = NonNullable<Required<StylesheetRichTextEditorStyleModalData>>;
-
 @customElement('umb-stylesheet-rich-text-editor-style-modal')
 export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbModalBaseElement<
-	StylesheetRichTextEditorStyleModalData,
-	UmbStylesheetRichTextEditorStyleModalValue
+	never,
+	StylesheetRichTextEditorStyleModalValue
 > {
-	private _close() {
-		this.modalContext?.reject();
-	}
-
-	#submit() {
-		this.modalContext?.submit({ rule: this._rule });
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._rule = this.data?.rule ?? null;
-	}
-
 	@state()
 	private _rule: RichTextRuleModel | null = null;
 
 	#updateName(event: Event) {
 		const name = (event.target as HTMLInputElement).value;
 
-		this._rule = {
-			...this._rule,
-			name,
+		this._value = {
+			rule: {
+				...this._value.rule,
+				name,
+			},
 		};
 	}
 
 	#updateSelector(event: Event) {
 		const selector = (event.target as HTMLInputElement).value;
 
-		this._rule = {
-			...this._rule,
-			selector,
+		this._value = {
+			rule: {
+				...this._value.rule,
+				selector,
+			},
 		};
 	}
 
 	#updateStyles(event: Event) {
 		const styles = (event.target as HTMLInputElement).value;
 
-		this._rule = {
-			...this._rule,
-			styles,
+		this._value = {
+			rule: {
+				...this._value.rule,
+				styles,
+			},
 		};
 	}
 
@@ -120,8 +111,8 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 					</uui-box>
 				</div>
 				<div slot="actions">
-					<uui-button @click=${this._close} look="secondary" label="Close">Close</uui-button>
-					<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
+					<uui-button @click=${this._rejectModal} look="secondary" label="Close">Close</uui-button>
+					<uui-button @click=${this._submitModal} look="primary" color="positive" label="Submit">Submit</uui-button>
 				</div>
 			</umb-body-layout>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index a6ed77f545..ebeb80a6e8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -1,9 +1,6 @@
 import { RichTextRuleModelSortable, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
 import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR } from '../../manifests.js';
-import {
-	StylesheetRichTextEditorStyleModalData,
-	UmbStylesheetRichTextEditorStyleModalValue,
-} from './stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js';
+import { StylesheetRichTextEditorStyleModalValue } from './stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
@@ -15,12 +12,17 @@ import { css, html, customElement, state, ifDefined, repeat } from '@umbraco-cms
 import './stylesheet-workspace-view-rich-text-editor-rule.element.js';
 
 export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken<
-	StylesheetRichTextEditorStyleModalData,
-	UmbStylesheetRichTextEditorStyleModalValue
->(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, {
-	type: 'sidebar',
-	size: 'medium',
-});
+	never,
+	StylesheetRichTextEditorStyleModalValue
+>(
+	UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
+	{
+		type: 'sidebar',
+		size: 'medium',
+	},
+	undefined,
+	{ rule: null },
+);
 
 const SORTER_CONFIG: UmbSorterConfig<RichTextRuleModel> = {
 	compareElementToModel: (element: HTMLElement, model: RichTextRuleModel) => {
@@ -73,7 +75,9 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 	openModal = (rule: RichTextRuleModelSortable | null = null) => {
 		if (!this._modalContext) throw new Error('Modal context not found');
 		const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
-			rule,
+			value: {
+				rule,
+			},
 		});
 		modal?.onSubmit().then((result) => {
 			if (result.rule) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
index 1d04fc1178..bdfb99cb3a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
@@ -112,14 +112,18 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 	#openPicker() {
 		// TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
 		const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
-			multiple: true,
-			selection: [...this._selectedIds],
-			pickableFilter: (template: TemplateResponseModel) => template.id !== null,
+			data: {
+				multiple: true,
+				pickableFilter: (template: TemplateResponseModel) => template.id !== null,
+			},
+			value: {
+				selection: [...this._selectedIds],
+			},
 		});
 
-		modalContext?.onSubmit().then((data) => {
-			if (!data.selection) return;
-			this.selectedIds = data.selection.filter((x) => x !== null) as Array<string>;
+		modalContext?.onSubmit().then((value) => {
+			if (!value?.selection) return;
+			this.selectedIds = value.selection.filter((x) => x !== null) as Array<string>;
 			this.dispatchEvent(new CustomEvent('change'));
 		});
 	}
@@ -141,8 +145,10 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 		const id = (e.target as UmbTemplateCardElement).value;
 
 		this._modalContext?.open(UMB_TEMPLATE_MODAL, {
-			id: id as string,
-			language: 'razor',
+			data: {
+				id: id as string,
+				language: 'razor',
+			},
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
index 3782f1dc5e..2d1635019a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
@@ -80,9 +80,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	}
 
 	#submit() {
-		this.modalContext?.submit({
-			value: this._templateQuery?.queryExpression ?? '',
-		});
+		this.modalContext?.submit();
 	}
 
 	#updateQueryRequest(update: TemplateQueryExecuteModel) {
@@ -99,12 +97,15 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 		const { data, error } = await this.#templateRepository.postTemplateQueryExecute({
 			requestBody: this._queryRequest,
 		});
-		if (data) this._templateQuery = { ...data };
+		if (data) {
+			this._templateQuery = { ...data };
+			this._value = { value: this._templateQuery?.queryExpression ?? '' };
+		}
 	};
 
 	#openDocumentPicker = () => {
 		this.#modalManagerContext
-			?.open(UMB_DOCUMENT_PICKER_MODAL, { hideTreeRoot: true })
+			?.open(UMB_DOCUMENT_PICKER_MODAL, { data: { hideTreeRoot: true } })
 			.onSubmit()
 			.then((result) => {
 				this.#updateQueryRequest({ rootContentId: result.selection[0] });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
index 2ab2ba1789..22f4d43501 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
@@ -112,7 +112,9 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 	#openInsertSectionModal() {
 		const sectionModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL);
 		sectionModal?.onSubmit().then((insertSectionModalValue) => {
-			if (insertSectionModalValue.value) this._codeEditor?.insert(insertSectionModalValue.value);
+			if (insertSectionModalValue?.value) {
+				this._codeEditor?.insert(insertSectionModalValue.value);
+			}
 		});
 	}
 
@@ -122,15 +124,19 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 
 	#openMasterTemplatePicker() {
 		const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
-			selection: [this.#masterTemplateId],
-			pickableFilter: (item) => {
-				return item.id !== null && item.id !== this.#templateWorkspaceContext?.getEntityId();
+			data: {
+				pickableFilter: (item) => {
+					return item.id !== null && item.id !== this.#templateWorkspaceContext?.getEntityId();
+				},
+			},
+			value: {
+				selection: [this.#masterTemplateId],
 			},
 		});
 
-		modalContext?.onSubmit().then((data) => {
-			if (!data.selection) return;
-			this.#templateWorkspaceContext?.setMasterTemplate(data.selection[0] ?? '');
+		modalContext?.onSubmit().then((value) => {
+			if (!value?.selection) return;
+			this.#templateWorkspaceContext?.setMasterTemplate(value.selection[0] ?? '');
 		});
 	}
 
@@ -138,7 +144,9 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 		const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
 
 		queryBuilderModal?.onSubmit().then((queryBuilderModalValue) => {
-			if (queryBuilderModalValue.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value));
+			if (queryBuilderModalValue?.value) {
+				this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value));
+			}
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts
index 9166851006..9ba96391be 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts
@@ -51,7 +51,9 @@ export class UmbUserProfileAppProfileElement extends UmbLitElement {
 		if (!this.#modalManagerContext) return;
 
 		this.#modalManagerContext.open(UMB_CHANGE_PASSWORD_MODAL, {
-			userId: this._currentUser?.id ?? '',
+			data: {
+				userId: this._currentUser?.id ?? '',
+			},
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
index 4c81a48e2d..2afd9bd4a5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
@@ -40,9 +40,10 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement<
 		// TODO: validate that the new password and confirm password match
 		const oldPassword = formData.get('oldPassword') as string;
 		const newPassword = formData.get('newPassword') as string;
-		const confirmPassword = formData.get('confirmPassword') as string;
+		//const confirmPassword = formData.get('confirmPassword') as string;
 
-		this.modalContext?.submit({ oldPassword, newPassword });
+		this._value = { oldPassword, newPassword };
+		this.modalContext?.submit();
 	}
 
 	constructor() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts
index 8bf06a5291..db9c68eea5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts
@@ -24,10 +24,12 @@ export class UmbDeleteUserGroupEntityBulkAction extends UmbEntityBulkActionBase<
 		if (!this.#modalContext || this.selection.length === 0) return;
 
 		const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, {
-			color: 'danger',
-			headline: `Delete user groups?`,
-			content: html`Are you sure you want to delete selected user groups?`,
-			confirmLabel: 'Delete',
+			data: {
+				color: 'danger',
+				headline: `Delete user groups?`,
+				content: html`Are you sure you want to delete selected user groups?`,
+				confirmLabel: 'Delete',
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
index c61c8c3f55..de569987ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
@@ -1,25 +1,19 @@
-import { html, customElement, property, css, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, css, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UmbEntityUserPermissionSettingsModalData,
 	UmbEntityUserPermissionSettingsModalValue,
-	UmbModalContext,
+	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-entity-user-permission-settings-modal')
-export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
-	@property({ attribute: false })
-	modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalValue>;
-
-	#data?: UmbEntityUserPermissionSettingsModalData;
-
-	@property({ type: Object })
-	get data(): UmbEntityUserPermissionSettingsModalData | undefined {
-		return this.#data;
-	}
+export class UmbEntityUserPermissionSettingsModalElement extends UmbModalBaseElement<
+	UmbEntityUserPermissionSettingsModalData,
+	UmbEntityUserPermissionSettingsModalValue
+> {
 	set data(data: UmbEntityUserPermissionSettingsModalData | undefined) {
+		super.data = data;
 		this._entityType = data?.entityType;
 		this._allowedPermissions = data?.allowedPermissions ?? [];
 		this._headline = data?.headline ?? this._headline;
@@ -35,11 +29,8 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
 	_allowedPermissions: Array<string> = [];
 
 	private _handleConfirm() {
-		this.modalContext?.submit({ allowedPermissions: this._allowedPermissions });
-	}
-
-	private _handleCancel() {
-		this.modalContext?.reject();
+		this._value = { allowedPermissions: this._allowedPermissions };
+		this.modalContext?.submit();
 	}
 
 	#onSelectedUserPermission(event: UmbSelectionChangeEvent) {
@@ -59,7 +50,7 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
 						: nothing}
 				</uui-box>
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
+				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}">Cancel</uui-button>
 				<uui-button
 					slot="actions"
 					id="confirm"
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts
index b212db0b06..46aac1f7a9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts
@@ -22,7 +22,9 @@ export class UmbChangeUserPasswordEntityAction extends UmbEntityActionBase<UmbCh
 		if (!this.repository || !this.#modalManager) return;
 
 		const modalContext = this.#modalManager.open(UMB_CHANGE_PASSWORD_MODAL, {
-			userId: this.unique,
+			data: {
+				userId: this.unique,
+			},
 		});
 
 		const data = await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/disable/disable-user.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/disable/disable-user.action.ts
index 372b19d28a..d5805553ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/disable/disable-user.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/disable/disable-user.action.ts
@@ -31,10 +31,12 @@ export class UmbDisableUserEntityAction extends UmbEntityActionBase<UmbDisableUs
 			const item = data[0];
 
 			const modalContext = this.#modalManager.open(UMB_CONFIRM_MODAL, {
-				headline: `Disable ${item.name}`,
-				content: 'Are you sure you want to disable this user?',
-				color: 'danger',
-				confirmLabel: 'Disable',
+				data: {
+					headline: `Disable ${item.name}`,
+					content: 'Are you sure you want to disable this user?',
+					color: 'danger',
+					confirmLabel: 'Disable',
+				},
 			});
 
 			await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/enable/enable-user.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/enable/enable-user.action.ts
index 4066341a34..45ec73e0f5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/enable/enable-user.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/enable/enable-user.action.ts
@@ -31,9 +31,11 @@ export class UmbEnableUserEntityAction extends UmbEntityActionBase<UmbEnableUser
 			const item = data[0];
 
 			const modalContext = this.#modalManager.open(UMB_CONFIRM_MODAL, {
-				headline: `Enable ${item.name}`,
-				content: 'Are you sure you want to enable this user?',
-				confirmLabel: 'Enable',
+				data: {
+					headline: `Enable ${item.name}`,
+					content: 'Are you sure you want to enable this user?',
+					confirmLabel: 'Enable',
+				},
 			});
 
 			await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/unlock/unlock-user.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/unlock/unlock-user.action.ts
index 75a5ace0c7..727ba4bd47 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/unlock/unlock-user.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/unlock/unlock-user.action.ts
@@ -31,9 +31,11 @@ export class UmbUnlockUserEntityAction extends UmbEntityActionBase<UmbUnlockUser
 			const item = data[0];
 
 			const modalContext = this.#modalManager.open(UMB_CONFIRM_MODAL, {
-				headline: `Unlock ${item.name}`,
-				content: 'Are you sure you want to unlock this user?',
-				confirmLabel: 'Unlock',
+				data: {
+					headline: `Unlock ${item.name}`,
+					content: 'Are you sure you want to unlock this user?',
+					confirmLabel: 'Unlock',
+				},
 			});
 
 			await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-bulk-actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-bulk-actions/delete/delete.action.ts
index 10824c7796..6d0ba00157 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-bulk-actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-bulk-actions/delete/delete.action.ts
@@ -24,10 +24,12 @@ export class UmbUserDeleteEntityBulkAction extends UmbEntityBulkActionBase<UmbUs
 		if (!this.#modalContext || this.selection.length === 0) return;
 
 		const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, {
-			color: 'danger',
-			headline: `Delete users?`,
-			content: html`Are you sure you want to delete selected users?`,
-			confirmLabel: 'Delete',
+			data: {
+				color: 'danger',
+				headline: `Delete users?`,
+				content: html`Are you sure you want to delete selected users?`,
+				confirmLabel: 'Delete',
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/entity-action/resend-invite/resend-invite.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/entity-action/resend-invite/resend-invite.action.ts
index 48b79bc5cb..df138da3b9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/entity-action/resend-invite/resend-invite.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/entity-action/resend-invite/resend-invite.action.ts
@@ -19,7 +19,9 @@ export class UmbResendInviteToUserEntityAction extends UmbEntityActionBase<UmbEn
 		if (!this.repository || !this.#modalManager) return;
 
 		const modalContext = this.#modalManager.open(UMB_RESEND_INVITE_TO_USER_MODAL, {
-			userId: this.unique,
+			data: {
+				userId: this.unique,
+			},
 		});
 
 		await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts
index 17351c117b..93c7065398 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts
@@ -57,8 +57,10 @@ export class UmbUserCreateModalElement extends UmbModalBaseElement {
 
 	#openSuccessModal(userId: string, initialPassword: string) {
 		const modalContext = this.#modalManagerContext?.open(UMB_CREATE_USER_SUCCESS_MODAL, {
-			userId,
-			initialPassword,
+			data: {
+				userId,
+				initialPassword,
+			},
 		});
 
 		modalContext?.onSubmit().catch((reason) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
index 134b025628..3e1a3195d2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
@@ -18,7 +18,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 
 		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this.data?.selection ?? []);
+		this.#selectionManager.setSelection(this._value?.selection ?? []);
 	}
 
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
@@ -36,7 +36,8 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 	}
 
 	#submit() {
-		this.modalContext?.submit({ selection: this.#selectionManager.getSelection() });
+		this._value = { selection: this.#selectionManager.getSelection() };
+		this.modalContext?.submit();
 	}
 
 	#close() {
diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
index c3a737762e..1e31298f45 100644
--- a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
@@ -192,7 +192,7 @@ class MyElement extends UmbElementMixin(LitElement) {
 		const options {'options go here'};
 		const modalContext = this.#modalManagerContext?.open(MY_MODAL_TOKEN), data, options);
 
-		modalContext?.onSubmit().then((data) => {
+		modalContext?.onSubmit().then((value) => {
 			// if modal submitted, then data is supplied here.
 		});
 	}
@@ -257,7 +257,8 @@ class MyDialog extends UmbElementMixin(LitElement) {
 	private _handleSubmit() {
 		/* Optional data of any type can be applied to the submit method to pass it
 		   to the modal parent through the onSubmit promise. */
-		this.modalContext?.submit({ myReturnData: 'hello world' });
+		this.modalContext?.setValue({ myReturnData: 'hello world' });
+		this.modalContext?.submit();
 	}
 
 	render() {

From 5859fcfd81e9057c7d11f0e4e6b820dae527ddb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 21:25:44 +0100
Subject: [PATCH 03/34] final TS corrections

---
 .../examine-fields-settings-modal.token.ts    | 12 +++---
 ...ut-document-granular-permission.element.ts | 10 +++--
 .../entity-actions/create/create.action.ts    |  4 +-
 .../permissions/permissions-modal.element.ts  | 10 +++--
 .../permissions/permissions.action.ts         |  6 ++-
 .../document-info-workspace-view.element.ts   |  2 +-
 .../log-viewer-search-input.element.ts        |  4 +-
 .../entity-actions/create/create.action.ts    |  4 +-
 ...media-type-create-options-modal.element.ts |  4 +-
 ...pe-workspace-view-edit-property.element.ts |  8 ++--
 .../media-type-workspace-view-edit.element.ts |  4 +-
 .../packages-created-overview.element.ts      | 10 +++--
 ...lled-packages-section-view-item.element.ts | 10 +++--
 ...nt.ts => fields-settings-modal.element.ts} | 43 ++++++-------------
 .../views/section-view-examine-indexers.ts    | 20 +++++----
 .../views/section-view-examine-searchers.ts   | 22 +++++-----
 .../src/packages/search/manifests.ts          |  2 +-
 .../dashboard-published-status.element.ts     | 30 +++++++------
 .../extension-root-workspace.element.ts       | 11 ++---
 .../create/create-from-snippet.action.ts      |  4 +-
 .../create/create-from-snippet.modal.ts       |  3 +-
 .../user-group-picker-modal.element.ts        | 12 +-----
 22 files changed, 121 insertions(+), 114 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/{fields-settings.element.ts => fields-settings-modal.element.ts} (60%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
index cf681c597a..b6b029a410 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
@@ -1,13 +1,15 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export type UmbExamineFieldsSettingsModalData = Array<{
+export type UmbExamineFieldsSettingsModalData = never;
+
+type FieldSettingsType = {
 	name: string;
 	exposed: boolean;
-}>;
+};
 
-export interface UmbExamineFieldsSettingsModalValue {
-	fields?: UmbExamineFieldsSettingsModalData;
-}
+export type UmbExamineFieldsSettingsModalValue = {
+	fields: Array<FieldSettingsType>;
+};
 
 export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL = new UmbModalToken<
 	UmbExamineFieldsSettingsModalData,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
index 8db4c056e5..8f0ef5c5b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
@@ -75,10 +75,12 @@ export class UmbInputDocumentGranularPermissionElement extends FormControlMixin(
 
 	async #removeItem(item: DocumentItemResponseModel) {
 		const modalContext = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
-			color: 'danger',
-			headline: `Remove ${item.name}?`,
-			content: 'Are you sure you want to remove this item',
-			confirmLabel: 'Remove',
+			data: {
+				color: 'danger',
+				headline: `Remove ${item.name}?`,
+				content: 'Are you sure you want to remove this item',
+				confirmLabel: 'Remove',
+			},
 		});
 
 		await modalContext?.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
index 256afcb496..abd6f5b4cc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
@@ -27,7 +27,9 @@ export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocume
 		// TODO: what to do if modal service is not available?
 		if (!this.#modalContext) return;
 		const modalContext = this.#modalContext.open(UMB_CREATE_DOCUMENT_MODAL, {
-			id,
+			data: {
+				id,
+			},
 		});
 
 		const { documentTypeId: documentTypeKey } = await modalContext.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
index cc30ae0bef..cd2bc0693e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
@@ -113,10 +113,12 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 		const userGroupRef = this._userGroupRefs.find((userGroup) => userGroup.id == id);
 
 		const modalContext = this.#modalManagerContext?.open(UMB_ENTITY_USER_PERMISSION_MODAL, {
-			unique: id,
-			entityType: this.data.entityType,
-			allowedPermissions: userGroupRef?.permissions || [],
-			headline: `Permissions for ${userGroupRef?.name}`,
+			data: {
+				unique: id,
+				entityType: this.data.entityType,
+				allowedPermissions: userGroupRef?.permissions || [],
+				headline: `Permissions for ${userGroupRef?.name}`,
+			},
 		});
 
 		modalContext?.onSubmit().then((value) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions.action.ts
index 87271eb54e..21714c9c0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions.action.ts
@@ -23,8 +23,10 @@ export class UmbDocumentPermissionsEntityAction extends UmbEntityActionBase<UmbD
 		if (!this.#modalManagerContext) return;
 
 		this.#modalManagerContext.open(UMB_PERMISSIONS_MODAL, {
-			unique: this.unique,
-			entityType: 'document',
+			data: {
+				unique: this.unique,
+				entityType: 'document',
+			},
 		});
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
index f99c551048..c7cc7117e2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
@@ -105,7 +105,7 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('document-type')
 			.onSetup(() => {
-				return { entityType: 'document-type', preset: {} };
+				return { data: { entityType: 'document-type', preset: {} } };
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._editDocumentTypePath = routeBuilder({});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
index b275156459..985aaf8c3a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -132,7 +132,9 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	}
 
 	#openSaveSearchDialog() {
-		this.modalContext = this._modalContext?.open(UMB_LOG_VIEWER_SAVE_SEARCH_MODAL, { query: this._inputQuery });
+		this.modalContext = this._modalContext?.open(UMB_LOG_VIEWER_SAVE_SEARCH_MODAL, {
+			data: { query: this._inputQuery },
+		});
 		this.modalContext?.onSubmit().then((savedSearch) => {
 			if (savedSearch) {
 				this.#saveSearch(savedSearch);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/create.action.ts
index 84d6ecf8f0..43565e0070 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/create.action.ts
@@ -20,7 +20,9 @@ export class UmbCreateMediaTypeEntityAction extends UmbEntityActionBase<UmbMedia
 		if (!this.repository) throw new Error('Repository is not available');
 
 		this.#modalManagerContext?.open(UMB_MEDIA_TYPE_CREATE_OPTIONS_MODAL, {
-			parentKey: this.unique,
+			data: {
+				parentKey: this.unique,
+			},
 		});
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/media-type-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/media-type-create-options-modal.element.ts
index 2f7a4cf080..bb154f5629 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/media-type-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/media-type-create-options-modal.element.ts
@@ -30,7 +30,9 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 	#onClick(event: PointerEvent) {
 		event.stopPropagation();
 		const folderModalHandler = this.#modalContext?.open(UMB_FOLDER_MODAL, {
-			repositoryAlias: UMB_MEDIA_TYPE_DETAIL_REPOSITORY_ALIAS,
+			data: {
+				repositoryAlias: UMB_MEDIA_TYPE_DETAIL_REPOSITORY_ALIAS,
+			},
 		});
 		folderModalHandler?.onSubmit().then(() => this.modalContext?.submit());
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts
index 3024e7f6cf..c9ce513c8f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts
@@ -92,7 +92,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
 				if (mediaTypeId === undefined) return false;
 				const propertyData = this.property;
 				if (propertyData === undefined) return false;
-				return { propertyData, documentTypeId: mediaTypeId }; //TODO: Should we have a separate modal for mediaTypes?
+				return { data: { documentTypeId: mediaTypeId }, value: propertyData }; //TODO: Should we have a separate modal for mediaTypes?
 			})
 			.onSubmit((result) => {
 				this._partialUpdate(result);
@@ -104,7 +104,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('media-type')
 			.onSetup(() => {
-				return { entityType: 'media-type', preset: {} };
+				return { data: { entityType: 'media-type', preset: {} } };
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._editMediaTypePath = routeBuilder({});
@@ -138,7 +138,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
 		e.stopImmediatePropagation();
 		if (!this.property || !this.property.id) return;
 
-		const Message: UmbConfirmModalData = {
+		const modalData: UmbConfirmModalData = {
 			headline: `${this.localize.term('actions_delete')} property`,
 			content: html`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[
 				this.property.name || this.property.id,
@@ -150,7 +150,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
 			color: 'danger',
 		};
 
-		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, { data: modalData });
 
 		modalHandler
 			?.onSubmit()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts
index b8f28a8f48..13534b91be 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts
@@ -186,7 +186,7 @@ export class UmbMediaTypeWorkspaceViewEditElement extends UmbLitElement implemen
 	}
 
 	#requestRemoveTab(tab: PropertyTypeContainerModelBaseModel | undefined) {
-		const Message: UmbConfirmModalData = {
+		const modalData: UmbConfirmModalData = {
 			headline: 'Delete tab',
 			content: html`<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}>
 					Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong>
@@ -202,7 +202,7 @@ export class UmbMediaTypeWorkspaceViewEditElement extends UmbLitElement implemen
 
 		// TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab.
 
-		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+		const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, { data: modalData });
 
 		modalHandler?.onSubmit().then(() => {
 			this.#remove(tab?.id);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/created/packages-created-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/created/packages-created-overview.element.ts
index ab51364ed1..011147b582 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/created/packages-created-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/created/packages-created-overview.element.ts
@@ -109,10 +109,12 @@ export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
 	async #deletePackage(p: PackageDefinitionResponseModel) {
 		if (!p.id) return;
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			color: 'danger',
-			headline: `Remove ${p.name}?`,
-			content: 'Are you sure you want to delete this package',
-			confirmLabel: 'Delete',
+			data: {
+				color: 'danger',
+				headline: `Remove ${p.name}?`,
+				content: 'Are you sure you want to delete this package',
+				confirmLabel: 'Delete',
+			},
 		});
 
 		await modalContext?.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index 3cf99e8cb6..6b49197e55 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -78,10 +78,12 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 	async _onMigration() {
 		if (!this.name) return;
 		const modalContext = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
-			color: 'positive',
-			headline: `Run migrations for ${this.name}?`,
-			content: `Do you want to start run migrations for ${this.name}`,
-			confirmLabel: 'Run migrations',
+			data: {
+				color: 'positive',
+				headline: `Run migrations for ${this.name}?`,
+				content: `Do you want to start run migrations for ${this.name}`,
+				confirmLabel: 'Run migrations',
+			},
 		});
 
 		await modalContext?.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
similarity index 60%
rename from src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
index 0c1dc9690e..b1a9aa4e61 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
@@ -1,61 +1,42 @@
-import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, css, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UmbExamineFieldsSettingsModalValue,
 	UmbExamineFieldsSettingsModalData,
 	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
-import { ManifestModal, UmbModalExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-examine-fields-settings-modal')
-export default class UmbExamineFieldsSettingsModalElement
-	extends UmbModalBaseElement<UmbExamineFieldsSettingsModalData, UmbExamineFieldsSettingsModalValue>
-	implements UmbModalExtensionElement<any, any, ManifestModal>
-{
-	@state()
-	private _fields?: UmbExamineFieldsSettingsModalData;
-
-	private _handleClose() {
-		this._value = { fields: this._fields };
-		this.modalContext?.submit();
-	}
-
-	disconnectedCallback(): void {
-		super.disconnectedCallback();
-		this._handleClose();
-	}
-
-	firstUpdated() {
-		this._fields =
-			this.data?.map((field) => {
-				return { name: field.name, exposed: field.exposed };
-			}) || undefined;
-	}
-
+export default class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
+	UmbExamineFieldsSettingsModalData,
+	UmbExamineFieldsSettingsModalValue
+> {
 	render() {
-		if (this._fields) {
+		if (this._value.fields) {
 			return html`
 				<uui-dialog-layout headline="Show fields">
 					<uui-scroll-container id="field-settings">
 						<span>
-							${Object.values(this._fields).map((field, index) => {
+							${Object.values(this._value.fields).map((field, index) => {
 								return html`<uui-toggle
 										name="${field.name}"
 										label="${field.name}"
 										.checked="${field.exposed}"
 										@change="${() => {
-											this._fields ? (this._fields[index].exposed = !field.exposed) : '';
+											this._value.fields ? (this._value.fields[index].exposed = !field.exposed) : '';
 										}}"></uui-toggle>
 									<br />`;
 							})}
 						</span>
 					</uui-scroll-container>
 					<div>
-						<uui-button look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
+						<uui-button look="primary" label="Close sidebar" @click="${this._submitModal}">Close</uui-button>
 					</div>
 				</uui-dialog-layout>
 			`;
-		} else return html``;
+		} else {
+			return '';
+		}
 	}
 
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-indexers.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-indexers.ts
index b8ee3e86bb..9e0beb658b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-indexers.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-indexers.ts
@@ -58,15 +58,17 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
 
 	private async _onRebuildHandler() {
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: `Rebuild ${this.indexName}`,
-			content: html`
-				This will cause the index to be rebuilt.<br />
-				Depending on how much content there is in your site this could take a while.<br />
-				It is not recommended to rebuild an index during times of high website traffic or when editors are editing
-				content.
-			`,
-			color: 'danger',
-			confirmLabel: 'Rebuild',
+			data: {
+				headline: `Rebuild ${this.indexName}`,
+				content: html`
+					This will cause the index to be rebuilt.<br />
+					Depending on how much content there is in your site this could take a while.<br />
+					It is not recommended to rebuild an index during times of high website traffic or when editors are editing
+					content.
+				`,
+				color: 'danger',
+				confirmLabel: 'Rebuild',
+			},
 		});
 		modalContext?.onSubmit().then(() => {
 			this._rebuild();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
index edd5cf127a..75bcd37ce2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
@@ -14,10 +14,10 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 import './modal-views/fields-viewer.element.js';
-import './modal-views/fields-settings.element.js';
+import './modal-views/fields-settings-modal.element.js';
 
 interface ExposedSearchResultField {
-	name?: string | null;
+	name: string;
 	exposed: boolean;
 }
 
@@ -82,9 +82,10 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 			});
 			if (document) {
 				const newFieldNames = document.map((field) => {
-					return field.name;
+					return field.name ?? '';
 				});
 
+				// TODO: I don't get this code, not sure what the purpose is, it seems like a mistake:
 				this._exposedFields = this._exposedFields
 					? this._exposedFields.filter((field) => {
 							return { name: field.name, exposed: field.exposed };
@@ -98,11 +99,10 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 
 	private _onFieldFilterClick() {
 		const modalContext = this._modalContext?.open(UMB_EXAMINE_FIELDS_SETTINGS_MODAL, {
-			...this._exposedFields,
+			value: { fields: this._exposedFields ?? [] },
 		});
-		modalContext?.onSubmit().then(({ fields } = {}) => {
-			if (!fields) return;
-			this._exposedFields = fields;
+		modalContext?.onSubmit().then((value) => {
+			this._exposedFields = value.fields;
 		});
 	}
 
@@ -163,8 +163,10 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 									label="Open sidebar to see all fields"
 									@click="${() =>
 										this._modalContext?.open('umb-modal-element-fields-viewer', {
-											type: 'sidebar',
-											size: 'medium',
+											config: {
+												type: 'sidebar',
+												size: 'medium',
+											},
 											data: { ...rowData, name: this.getSearchResultNodeName(rowData) },
 										})}">
 									${rowData.fields ? Object.keys(rowData.fields).length : ''} fields
@@ -197,7 +199,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 								compact
 								@click="${() => {
 									this._exposedFields = this._exposedFields?.map((f) => {
-										return f.name == field.name ? { name: f.name, exposed: false } : f;
+										return f.name === field.name ? { name: f.name, exposed: false } : f;
 									});
 								}}"
 								>x</uui-button
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts
index a1bc0bfa11..6842024300 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts
@@ -41,6 +41,6 @@ export const manifests: Array<ManifestTypes> = [
 		type: 'modal',
 		alias: 'Umb.Modal.ExamineFieldsSettings',
 		name: 'Examine Field Settings Modal',
-		js: () => import('./examine-management-dashboard/views/modal-views/fields-settings.element.js'),
+		js: () => import('./examine-management-dashboard/views/modal-views/fields-settings-modal.element.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts
index b6bbbb3ee0..9b38810983 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -72,10 +72,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 	}
 	private async _onReloadCacheHandler() {
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Reload',
-			content: html` Trigger a in-memory and local file cache reload on all servers.`,
-			color: 'danger',
-			confirmLabel: 'Continue',
+			data: {
+				headline: 'Reload',
+				content: html` Trigger a in-memory and local file cache reload on all servers.`,
+				color: 'danger',
+				confirmLabel: 'Continue',
+			},
 		});
 		modalContext?.onSubmit().then(() => {
 			this._reloadMemoryCache();
@@ -95,10 +97,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 
 	private async _onRebuildCacheHandler() {
 		const modalContex = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Rebuild',
-			content: html` Rebuild content in cmsContentNu database table. Expensive.`,
-			color: 'danger',
-			confirmLabel: 'Continue',
+			data: {
+				headline: 'Rebuild',
+				content: html` Rebuild content in cmsContentNu database table. Expensive.`,
+				color: 'danger',
+				confirmLabel: 'Continue',
+			},
 		});
 		modalContex?.onSubmit().then(() => {
 			this._rebuildDatabaseCache();
@@ -118,10 +122,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 
 	private async _onSnapshotCacheHandler() {
 		const modalContex = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Snapshot',
-			content: html` Trigger a NuCache snapshots collection.`,
-			color: 'danger',
-			confirmLabel: 'Continue',
+			data: {
+				headline: 'Snapshot',
+				content: html` Trigger a NuCache snapshots collection.`,
+				color: 'danger',
+				confirmLabel: 'Continue',
+			},
 		});
 		modalContex?.onSubmit().then(() => {
 			this._cacheCollect();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts
index 387950c4bc..24ac727cf4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -1,6 +1,5 @@
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { map } from '@umbraco-cms/backoffice/external/rxjs';
-import { isManifestElementNameType } from '@umbraco-cms/backoffice/extension-api';
 import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
@@ -48,10 +47,12 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 
 	async #removeExtension(extension: ManifestTypes) {
 		const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-			headline: 'Unload extension',
-			confirmLabel: 'Unload',
-			content: html`<p>Are you sure you want to unload the extension <strong>${extension.alias}</strong>?</p>`,
-			color: 'danger',
+			data: {
+				headline: 'Unload extension',
+				confirmLabel: 'Unload',
+				content: html`<p>Are you sure you want to unload the extension <strong>${extension.alias}</strong>?</p>`,
+				color: 'danger',
+			},
 		});
 
 		await modalContext?.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
index 97fa02b582..270c8f7a7a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
@@ -34,7 +34,9 @@ export class UmbCreateFromSnippetPartialViewAction<
 		const snippets = (await this.repository?.getSnippets({}))?.data?.items ?? [];
 
 		const modalContext = this.#modalContext?.open(UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL, {
-			snippets,
+			data: {
+				snippets,
+			},
 		});
 
 		await modalContext?.onSubmit().then((snippetName) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
index 5f206b4bf3..9de01e0661 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
@@ -18,7 +18,8 @@ export default class UmbPartialViewCreateFromSnippetModalElement extends UmbModa
 	}
 
 	private _submit(snippetName: string) {
-		this.modalContext?.submit(snippetName);
+		this._value = snippetName;
+		this.modalContext?.submit();
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
index 88af248707..7e7fc07654 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -55,14 +55,6 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		this.modalContext?.updateValue({ selection: this.#selectionManager.getSelection() });
 	}
 
-	#submit() {
-		this.modalContext?.submit(this._value);
-	}
-
-	#close() {
-		this.modalContext?.reject();
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline=${this.localize.term('user_selectUserGroup', false)}>
@@ -81,8 +73,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 					)}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this.#close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;

From 7259b3b8640a8bef7f4f9514c2c452cdb487faa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 21:32:36 +0100
Subject: [PATCH 04/34] correct docs

---
 .../storybook/stories/modal/modal.mdx         | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
index 1e31298f45..fffcca25be 100644
--- a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx
@@ -129,12 +129,12 @@ descripe the addional features of the route Registration:
 				index = null;
 			}
 
-			return {
+			return { data: {
 				index: index,
 				itemData: {
 					name: data?.name
 				},
-			};
+			}};
 		})
 		.onSubmit((submitData) => {
 			if (!submitData) return;
@@ -189,8 +189,8 @@ class MyElement extends UmbElementMixin(LitElement) {
 
 	#onClick() {
 		const data = {'data goes here'};
-		const options {'options go here'};
-		const modalContext = this.#modalManagerContext?.open(MY_MODAL_TOKEN), data, options);
+		const value = {'initial value go here'};
+		const modalContext = this.#modalManagerContext?.open(MY_MODAL_TOKEN), {data: data, value: value});
 
 		modalContext?.onSubmit().then((value) => {
 			// if modal submitted, then data is supplied here.
@@ -229,13 +229,15 @@ interface MyModalData = {
 }
 
 interface MyModalValue = {
-	myReturnData: string;
+	myData: string;
 }
 
-const MY_MODAL_TOKEN = new ModalToken<MyModalData, MyModalValue>('My.Modal', {
-	type: 'sidebar',
-	size: 'small'
-});
+const MY_MODAL_TOKEN = new ModalToken<MyModalData, MyModalValue>('My.Modal',
+	config: {
+		type: 'sidebar',
+		size: 'small'
+	}
+);
 ```
 
 The Modal element
@@ -255,9 +257,8 @@ class MyDialog extends UmbElementMixin(LitElement) {
 	}
 
 	private _handleSubmit() {
-		/* Optional data of any type can be applied to the submit method to pass it
-		   to the modal parent through the onSubmit promise. */
-		this.modalContext?.setValue({ myReturnData: 'hello world' });
+		/* Value is set on modal context. and then parsed on to the consumer of the submit promise. */
+		this.modalContext?.setValue({ myData: 'hello world' });
 		this.modalContext?.submit();
 	}
 

From b270db1622ad5dac01fd4263384f64839b8b3ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 22:01:51 +0100
Subject: [PATCH 05/34] fix picker modals

---
 .../packages/core/modal/modal-manager.context.ts | 11 ++++++-----
 .../src/packages/core/modal/modal.context.ts     |  2 +-
 .../core/picker-input/picker-input.context.ts    | 16 +++++++++-------
 .../input-document/input-document.context.ts     |  6 +++---
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index d10ead659e..6e9ec4ece3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -2,7 +2,7 @@ import type { UmbModalToken } from './token/modal-token.js';
 import { UmbModalContext, type UmbModalContextClassArgs } from './index.js';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
-import { appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { UmbBasicState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
@@ -17,7 +17,7 @@ export interface UmbModalConfig {
 export class UmbModalManagerContext {
 	host: UmbControllerHostElement;
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
-	#modals = new BehaviorSubject(<Array<UmbModalContext>>[]);
+	#modals = new UmbBasicState(<Array<UmbModalContext>>[]);
 	public readonly modals = this.#modals.asObservable();
 
 	constructor(host: UmbControllerHostElement) {
@@ -42,9 +42,10 @@ export class UmbModalManagerContext {
 	) {
 		const modalContext = new UmbModalContext(modalAlias, args);
 
-		this.#modals.next(
-			appendToFrozenArray(this.#modals.getValue(), modalContext, (entry) => entry.key === modalContext.key),
-		);
+		// Append to store:
+		this.#modals.next(appendToFrozenArray(this.#modals.value, modalContext, (entry) => entry.key === modalContext.key));
+
+		// Return to implementor:
 		return modalContext;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
index 5e5cd1cf01..02fe5b8273 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
@@ -57,7 +57,7 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
 		this.data = Object.freeze({ ...defaultData, ...args.data } as ModalPreset);
 
 		const initValue =
-			args.value ?? this.alias instanceof UmbModalToken ? (this.alias as UmbModalToken).getDefaultValue() : undefined;
+			args.value ?? (this.alias instanceof UmbModalToken ? (this.alias as UmbModalToken).getDefaultValue() : undefined);
 
 		this.#value = new UmbObjectState(initValue) as UmbObjectState<ModalValue>;
 		this.value = this.#value.asObservable();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
index ad518f961a..b85aa6de55 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
@@ -8,13 +8,14 @@ import {
 	UmbModalManagerContext,
 	UmbModalToken,
 	UmbPickerModalData,
+	UmbPickerModalValue,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel> extends UmbBaseController {
 	// TODO: We are way too unsecure about the requirements for the Modal Token, as we have certain expectation for the data and value.
-	modalAlias: string | UmbModalToken;
+	modalAlias: string | UmbModalToken<UmbPickerModalData<ItemType>, UmbPickerModalValue>;
 	repository?: UmbItemRepository<ItemType>;
 	#getUnique: (entry: ItemType) => string | undefined;
 
@@ -37,7 +38,7 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 	constructor(
 		host: UmbControllerHostElement,
 		repositoryAlias: string,
-		modalAlias: string | UmbModalToken,
+		modalAlias: string | UmbModalToken<UmbPickerModalData<ItemType>, UmbPickerModalValue>,
 		getUniqueMethod?: (entry: ItemType) => string | undefined,
 	) {
 		super(host);
@@ -61,8 +62,9 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 		return this.#itemManager.getUniques();
 	}
 
-	setSelection(selection: string[]) {
-		this.#itemManager.setUniques(selection);
+	setSelection(selection: Array<string | null>) {
+		// Note: Currently we do not support picking root item. So we filter out null values:
+		this.#itemManager.setUniques(selection.filter((value) => value !== null) as Array<string>);
 	}
 
 	// TODO: If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown.
@@ -77,12 +79,12 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 				...pickerData,
 			},
 			value: {
-				selection: [...this.getSelection()],
+				selection: this.getSelection(),
 			},
 		});
 
-		modalContext?.onSubmit().then(({ selection }: any) => {
-			this.setSelection(selection);
+		modalContext?.onSubmit().then((value) => {
+			this.setSelection(value.selection);
 			this.getHostElement().dispatchEvent(new UmbChangeEvent());
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts
index 640649a706..e15477f7f6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts
@@ -1,9 +1,9 @@
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_DOCUMENT_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
-import { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-export class UmbDocumentPickerContext extends UmbPickerInputContext<DocumentItemResponseModel> {
+export class UmbDocumentPickerContext extends UmbPickerInputContext<DocumentTreeItemResponseModel> {
 	constructor(host: UmbControllerHostElement) {
 		super(host, 'Umb.Repository.Document', UMB_DOCUMENT_PICKER_MODAL);
 	}

From da2253d397ae82175a4d8df377455f4d6ea6749a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 5 Dec 2023 22:32:53 +0100
Subject: [PATCH 06/34] fix link picker modal

---
 .../input-multi-url.element.ts                |  2 +-
 .../link-picker/link-picker-modal.element.ts  | 56 ++++++++-----------
 .../core/modal/modal-manager.context.ts       |  7 +--
 .../core/modal/modal-route-registration.ts    |  9 +--
 4 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
index f7f59023b2..86267f6c82 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
@@ -74,7 +74,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: Boolean, attribute: 'hide-anchor' })
 	hideAnchor?: boolean;
 
-	@property()
+	@property({ type: Boolean, attribute: 'ignore-user-start-nodes' })
 	ignoreUserStartNodes?: boolean;
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
index 4f5a4f8c60..c7495d0420 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
@@ -16,8 +16,11 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	@state()
 	_selectedKey?: string;
 
+	/**
+	 * The link object, notice this is frozen, as it comes directly from the State. So it cannot be manipulated.
+	 */
 	@state()
-	_link: UmbLinkPickerLink = {};
+	readonly _link: UmbLinkPickerLink = {};
 
 	@state()
 	_layout: UmbLinkPickerConfig = {
@@ -40,52 +43,43 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	@query('#link-title-input')
 	private _linkTitleInput!: UUIInputElement;
 
-	constructor() {
-		super();
-	}
-
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.data) return;
 
 		if (this.modalContext) {
 			this.observe(this.modalContext.value, (value) => {
-				this._link = value?.link ?? {};
+				(this._link as any) = value.link;
 				this._selectedKey = this._link?.udi ? getKeyFromUdi(this._link.udi) : undefined;
 			});
 		}
 		this._layout = this.data?.config;
 	}
 
-	private _handleQueryString() {
+	#handleQueryString() {
 		if (!this._linkQueryInput) return;
 		const query = this._linkQueryInput.value as string;
 
 		if (query.startsWith('#') || query.startsWith('?')) {
-			this._link.queryString = query;
-			this.modalContext?.updateValue({ link: this._link });
+			this.#partialUpdateLink({ queryString: query });
 			return;
 		}
 
 		if (query.includes('=')) {
-			this._link.queryString = `?${query}`;
-			this.modalContext?.updateValue({ link: this._link });
+			this.#partialUpdateLink({ queryString: `#${query}` });
 		} else {
-			this._link.queryString = `#${query}`;
-			this.modalContext?.updateValue({ link: this._link });
+			this.#partialUpdateLink({ queryString: `#${query}` });
 		}
 	}
 
-	private _handleSelectionChange(e: CustomEvent, entityType: string) {
+	#handleSelectionChange(e: CustomEvent, entityType: string) {
 		//TODO: Update icon, published, trashed
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
 		const selectedKey = element.selection[element.selection.length - 1];
 
 		if (!selectedKey) {
-			this._link.url = '';
-			this._link.udi = undefined;
-			this.modalContext?.updateValue({ link: this._link });
+			this.#partialUpdateLink({ udi: '', url: undefined });
 			this._selectedKey = undefined;
 			this.requestUpdate();
 			return;
@@ -94,18 +88,12 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		const udi = buildUdi(entityType, selectedKey);
 
 		this._selectedKey = selectedKey;
-		this._link.udi = udi;
-		this._link.url = udi;
-		this.modalContext?.updateValue({ link: this._link });
+		this.#partialUpdateLink({ udi: udi, url: udi });
 		this.requestUpdate();
 	}
 
-	private _submit() {
-		this.modalContext?.submit();
-	}
-
-	private _close() {
-		this.modalContext?.reject();
+	#partialUpdateLink(linkObject: Partial<UmbLinkPickerLink>) {
+		this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } });
 	}
 
 	render() {
@@ -119,7 +107,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 						id="link-title-input"
 						placeholder=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
 						label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
-						@input=${() => (this._link.name = this._linkTitleInput.value as string)}
+						@input=${() => this.#partialUpdateLink({ name: this._linkTitleInput.value as string })}
 						.value="${this._link.name ?? ''}"></uui-input>
 
 					<uui-label>${this.localize.term('content_target')}</uui-label>
@@ -128,7 +116,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 						label=${this.localize.term('defaultdialogs_openInNewWindow')}
 						.checked="${this._link.target === '_blank' ? true : false}"
 						@change="${(e: UUIBooleanInputEvent) =>
-							e.target.checked ? (this._link.target = '_blank') : (this._link.target = '')}">
+							this.#partialUpdateLink({ target: e.target.checked ? '_blank' : '' })}">
 						${this.localize.term('defaultdialogs_openInNewWindow')}
 					</uui-toggle>
 
@@ -137,12 +125,12 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 					${this._renderTrees()}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label=${this.localize.term('general_close')} @click=${this._close}></uui-button>
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					<uui-button
 						label=${this.localize.term('general_submit')}
 						look="primary"
 						color="positive"
-						@click=${this._submit}></uui-button>
+						@click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
@@ -156,7 +144,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 				placeholder=${this.localize.term('general_url')}
 				label=${this.localize.term('general_url')}
 				.value="${this._link.udi ?? this._link.url ?? ''}"
-				@input=${() => (this._link.url = this._linkInput.value as string)}
+				@input=${() => this.#partialUpdateLink({ url: this._linkInput.value as string })}
 				?disabled="${this._link.udi ? true : false}"></uui-input>
 		</span>`;
 	}
@@ -169,7 +157,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 				id="anchor-input"
 				placeholder=${this.localize.term('placeholders_anchor')}
 				label=${this.localize.term('placeholders_anchor')}
-				@input=${this._handleQueryString}
+				@input=${this.#handleQueryString}
 				.value="${this._link.queryString ?? ''}"></uui-input>
 		</span>`;
 	}
@@ -191,7 +179,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 					?hide-tree-root=${true}
 					?multiple=${false}
 					alias=${UMB_DOCUMENT_TREE_ALIAS}
-					@selection-change=${(event: CustomEvent) => this._handleSelectionChange(event, 'document')}
+					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'document')}
 					.selection=${[this._selectedKey ?? '']}
 					selectable></umb-tree>
 			</div>
@@ -206,7 +194,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 					?hide-tree-root=${true}
 					?multiple=${false}
 					alias="Umb.Tree.Media"
-					@selection-change=${(event: CustomEvent) => this._handleSelectionChange(event, 'media')}
+					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'media')}
 					.selection=${[this._selectedKey ?? '']}
 					selectable></umb-tree>
 			</div>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index 6e9ec4ece3..a557c2898f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -1,10 +1,9 @@
 import type { UmbModalToken } from './token/modal-token.js';
 import { UmbModalContext, type UmbModalContextClassArgs } from './index.js';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
-import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbBasicState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export type UmbModalType = 'dialog' | 'sidebar';
 
@@ -15,12 +14,12 @@ export interface UmbModalConfig {
 }
 
 export class UmbModalManagerContext {
-	host: UmbControllerHostElement;
+	host: UmbControllerHost;
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
 	#modals = new UmbBasicState(<Array<UmbModalContext>>[]);
 	public readonly modals = this.#modals.asObservable();
 
-	constructor(host: UmbControllerHostElement) {
+	constructor(host: UmbControllerHost) {
 		this.host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
index baf60ee15f..a898cec0d2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
@@ -138,12 +138,9 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		const modalData = this.#onSetupCallback ? await this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
 			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, {
-				data: {
-					data: modalData?.data,
-					value: modalData?.value,
-					config: this.modalConfig,
-					router,
-				},
+				...modalData,
+				config: this.modalConfig,
+				router,
 			});
 			this.#modalManagerContext.onSubmit().then(this.#onSubmit, this.#onReject);
 			return this.#modalManagerContext;

From c0d75b888048e264a87beee9fb48d4eb07943443 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Dec 2023 01:14:37 +0000
Subject: [PATCH 07/34] Bump vite from 4.4.9 to 4.4.12

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.4.9 to 4.4.12.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.4.12/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.4.12/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 8 ++++----
 src/Umbraco.Web.UI.Client/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index bf99307417..e3ccb2125a 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -79,7 +79,7 @@
 				"tsc-alias": "^1.8.8",
 				"typescript": "^5.3.2",
 				"typescript-json-schema": "^0.62.0",
-				"vite": "^4.4.9",
+				"vite": "^4.4.12",
 				"vite-plugin-static-copy": "^0.17.0",
 				"vite-tsconfig-paths": "^4.2.0",
 				"web-component-analyzer": "^2.0.0-next.5"
@@ -21904,9 +21904,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.4.9",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-			"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+			"version": "4.4.12",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.12.tgz",
+			"integrity": "sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.18.10",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 971683b4be..9d68962a83 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -202,7 +202,7 @@
 		"typescript": "^5.3.2",
 		"vite-plugin-static-copy": "^0.17.0",
 		"vite-tsconfig-paths": "^4.2.0",
-		"vite": "^4.4.9",
+		"vite": "^4.4.12",
 		"web-component-analyzer": "^2.0.0-next.5"
 	},
 	"msw": {

From eeb8ec2554dc4c0947d82d092cebd63e760288aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 08:42:25 +0100
Subject: [PATCH 08/34] enforce object value

---
 .../src/packages/core/modal/token/modal-token.ts                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
index 117778ee1b..fe96cb9f84 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
@@ -1,6 +1,6 @@
 import { UmbModalConfig } from '../modal-manager.context.js';
 
-export class UmbModalToken<ModalDataType extends object = object, ModalValueType = unknown> {
+export class UmbModalToken<ModalDataType extends object = object, ModalValueType extends object = object> {
 	/**
 	 * Get the data type of the token's data.
 	 *

From 359919d55b413c8a704975960b2f6201262be1d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 08:42:40 +0100
Subject: [PATCH 09/34] come with defaults for property settings

---
 .../modal/token/property-settings-modal.token.ts  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
index 151b2dcabf..8b9f693970 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
@@ -9,7 +9,14 @@ export type UmbPropertySettingsModalValue = PropertyTypeModelBaseModel;
 export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<
 	UmbPropertySettingsModalData,
 	UmbPropertySettingsModalValue
->('Umb.Modal.PropertySettings', {
-	type: 'sidebar',
-	size: 'small',
-});
+>(
+	'Umb.Modal.PropertySettings',
+	{
+		type: 'sidebar',
+		size: 'small',
+	},
+	undefined,
+	{
+		validation: {},
+	},
+);

From bda08f311718ebe4837abe83096f847e6af98267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 08:43:32 +0100
Subject: [PATCH 10/34] object type correction

---
 .../src/packages/core/modal/modal-manager.context.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index a557c2898f..2927549350 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -33,7 +33,7 @@ export class UmbModalManagerContext {
 	 */
 	public open<
 		ModalData extends object = object,
-		ModalValue = unknown,
+		ModalValue extends object = object,
 		ModalAliasTypeAsToken extends UmbModalToken = UmbModalToken<ModalData, ModalValue>,
 	>(
 		modalAlias: UmbModalToken<ModalData, ModalValue> | string,

From d300bc816b16529998948e35da90fedee2575310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 09:06:35 +0100
Subject: [PATCH 11/34] property settings modal

---
 .../property-settings-modal.element.ts        | 79 ++++++++++---------
 .../core/modal/modal-element.element.ts       | 34 ++++++--
 .../core/modal/modal-manager.context.ts       |  2 +-
 .../packages/core/modal/token/modal-token.ts  |  2 +-
 4 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
index c974c3c1ab..a88996f83c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
@@ -64,21 +64,21 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		});
 
 		this._originalPropertyData = this._value;
-		// TODO: Use some utility method for this deep clone:
-		this._value = JSON.parse(JSON.stringify(this._value ?? {}));
 
-		this._value.validation ??= {};
-
-		const regEx = this._value.validation.regEx ?? null;
+		const regEx = this._value.validation?.regEx ?? null;
 		const newlySelected = this._customValidationOptions.find((option) => {
 			option.selected = option.value === regEx;
 			return option.selected;
 		});
 		if (newlySelected === undefined) {
 			this._customValidationOptions[4].selected = true;
-			this._value.validation.regEx = this._customValidationOptions[4].value;
+			this.updateValue({
+				validation: { ...this._value.validation, regEx: this._customValidationOptions[4].value },
+			});
 		} else {
-			this._value.validation.regEx = regEx;
+			this.updateValue({
+				validation: { ...this._value.validation, regEx: regEx },
+			});
 		}
 	}
 
@@ -106,58 +106,56 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	#onNameChange(event: UUIInputEvent) {
 		const oldName = this._value.name;
 		const oldAlias = this._value.alias;
-		this._value.name = event.target.value.toString();
+		this.updateValue({ name: event.target.value.toString() });
 		if (this._aliasLocked) {
 			const expectedOldAlias = generateAlias(oldName ?? '');
 			// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
 			if (expectedOldAlias === oldAlias) {
-				this._value.alias = generateAlias(this._value.name);
-				this.requestUpdate('_returnData');
+				this.updateValue({ alias: generateAlias(this._value.name ?? '') });
 			}
 		}
 	}
 
 	#onAliasChange(event: UUIInputEvent) {
 		const alias = generateAlias(event.target.value.toString());
-		if (!this._aliasLocked) {
-			this._value.alias = alias;
-		} else {
-			this._value.alias = this._originalPropertyData.alias;
-		}
-		this.requestUpdate('_returnData');
+		this.updateValue({ alias: this._aliasLocked ? this._originalPropertyData.alias : alias });
 	}
 
 	#onDataTypeIdChange(event: UUIInputEvent) {
 		const dataTypeId = event.target.value.toString();
-		this._value.dataTypeId = dataTypeId;
-		this.requestUpdate('_returnData');
+		this.updateValue({ dataTypeId });
 	}
 
 	#onMandatoryChange(event: UUIBooleanInputEvent) {
-		const value = event.target.checked;
-		this._value.validation!.mandatory = value;
-		this.requestUpdate('_returnData');
+		const mandatory = event.target.checked;
+		this._value.validation!.mandatory = mandatory;
+		this.updateValue({
+			validation: { ...this._value.validation, mandatory },
+		});
 	}
 
 	#onMandatoryMessageChange(event: UUIInputEvent) {
-		const value = event.target.value.toString();
-		this._value.validation!.mandatoryMessage = value;
-		this.requestUpdate('_returnData');
+		const mandatoryMessage = event.target.value.toString();
+		this.updateValue({
+			validation: { ...this._value.validation, mandatoryMessage },
+		});
 	}
 
 	#setAppearanceNormal() {
 		const currentValue = this._value.appearance?.labelOnTop;
 		if (currentValue !== true) return;
 
-		this._value.appearance!.labelOnTop = false;
-		this.requestUpdate('_returnData');
+		this.updateValue({
+			appearance: { ...this._value.appearance, labelOnTop: false },
+		});
 	}
 	#setAppearanceTop() {
 		const currentValue = this._value.appearance?.labelOnTop;
 		if (currentValue === true) return;
 
-		this._value.appearance!.labelOnTop = true;
-		this.requestUpdate('_returnData');
+		this.updateValue({
+			appearance: { ...this._value.appearance, labelOnTop: true },
+		});
 	}
 
 	#onToggleAliasLock() {
@@ -170,10 +168,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		this._customValidationOptions.forEach((option) => {
 			option.selected = option.value === regEx;
 		});
-
-		this._value.validation!.regEx = regEx ?? null;
-		this.requestUpdate('_returnData');
 		this.requestUpdate('_customValidationOptions');
+		this.updateValue({
+			validation: { ...this._value.validation, regEx },
+		});
 	}
 
 	#onValidationRegExChange(event: UUIInputEvent) {
@@ -184,19 +182,24 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		});
 		if (betterChoice === undefined) {
 			this._customValidationOptions[4].selected = true;
+			this.requestUpdate('_customValidationOptions');
 		}
-		this._value.validation!.regEx = regEx;
-		this.requestUpdate('_returnData');
-		this.requestUpdate('_customValidationOptions');
+		this.updateValue({
+			validation: { ...this._value.validation, regEx },
+		});
 	}
 	#onValidationMessageChange(event: UUIInputEvent) {
-		this._value.validation!.regExMessage = event.target.value.toString();
-		this.requestUpdate('_returnData');
+		const regExMessage = event.target.value.toString();
+		this.updateValue({
+			validation: { ...this._value.validation, regExMessage },
+		});
 	}
 
 	#onVaryByCultureChange(event: UUIBooleanInputEvent) {
-		this._value.variesByCulture = event.target.checked;
-		this.requestUpdate('_returnData');
+		const variesByCulture = event.target.checked;
+		this.updateValue({
+			variesByCulture,
+		});
 	}
 
 	// TODO: This would conceptually be a Property Editor Workspace, should be changed at one point in the future.
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
index 8433e25c76..beecfad3c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
@@ -11,11 +11,31 @@ export abstract class UmbModalBaseElement<
 	extends UmbLitElement
 	implements UmbModalExtensionElement<ModalDataType, ModalValueType, ModalManifestType>
 {
+	#value: ModalValueType = {} as ModalValueType;
+
 	@property({ type: Object, attribute: false })
 	public manifest?: ModalManifestType;
 
 	@property({ attribute: false })
-	public modalContext?: UmbModalContext<ModalDataType, ModalValueType>;
+	public get modalContext(): UmbModalContext<ModalDataType, ModalValueType> | undefined {
+		return this.#modalContext;
+	}
+	public set modalContext(context: UmbModalContext<ModalDataType, ModalValueType> | undefined) {
+		this.#modalContext = context;
+		if (context) {
+			this.observe(
+				context.value,
+				(value) => {
+					const oldValue = this.#value;
+					this.#value = value;
+					this.requestUpdate('_value', oldValue);
+					// Idea: we could implement a callback method on class.
+				},
+				'observeModalContextValue',
+			);
+		}
+	}
+	#modalContext?: UmbModalContext<ModalDataType, ModalValueType> | undefined;
 
 	@property({ type: Object, attribute: false })
 	public get data(): ModalDataType | undefined {
@@ -28,10 +48,14 @@ export abstract class UmbModalBaseElement<
 
 	@state()
 	public get _value(): ModalValueType {
-		return this.modalContext?.getValue() ?? ({} as ModalValueType);
+		return this.#value;
 	}
 	public set _value(value: ModalValueType) {
-		this.modalContext?.setValue(value);
+		this.#modalContext?.setValue(value);
+	}
+
+	public updateValue(partialValue: Partial<ModalValueType>) {
+		this.#modalContext?.updateValue(partialValue);
 	}
 
 	/**
@@ -40,7 +64,7 @@ export abstract class UmbModalBaseElement<
 	 * @memberof UmbModalBaseElement
 	 */
 	protected _submitModal() {
-		this.modalContext?.submit();
+		this.#modalContext?.submit();
 	}
 
 	/**
@@ -49,6 +73,6 @@ export abstract class UmbModalBaseElement<
 	 * @memberof UmbModalBaseElement
 	 */
 	protected _rejectModal() {
-		this.modalContext?.reject();
+		this.#modalContext?.reject();
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index 2927549350..a557c2898f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -33,7 +33,7 @@ export class UmbModalManagerContext {
 	 */
 	public open<
 		ModalData extends object = object,
-		ModalValue extends object = object,
+		ModalValue = unknown,
 		ModalAliasTypeAsToken extends UmbModalToken = UmbModalToken<ModalData, ModalValue>,
 	>(
 		modalAlias: UmbModalToken<ModalData, ModalValue> | string,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
index fe96cb9f84..117778ee1b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
@@ -1,6 +1,6 @@
 import { UmbModalConfig } from '../modal-manager.context.js';
 
-export class UmbModalToken<ModalDataType extends object = object, ModalValueType extends object = object> {
+export class UmbModalToken<ModalDataType extends object = object, ModalValueType = unknown> {
 	/**
 	 * Get the data type of the token's data.
 	 *

From 6d8aa3b3c82476f907c7a5ccdb4d3cb7d02118f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 09:27:13 +0100
Subject: [PATCH 12/34] clean up

---
 ...ta-type-picker-flow-data-type-picker-modal.element.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
index dcd11de30d..26b439d749 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
@@ -1,9 +1,8 @@
 import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js';
-import { css, html, customElement, property, state, repeat, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
-	UmbModalContext,
 	UmbDataTypePickerFlowDataTypePickerModalData,
 	UmbDataTypePickerFlowDataTypePickerModalValue,
 	UmbModalBaseElement,
@@ -75,12 +74,6 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 		this.modalContext?.reject();
 	}
 
-	@property({ attribute: false })
-	modalContext?: UmbModalContext<
-		UmbDataTypePickerFlowDataTypePickerModalData,
-		UmbDataTypePickerFlowDataTypePickerModalValue
-	>;
-
 	render() {
 		return html`
 			<umb-body-layout headline="Select a configuration">

From 6df53897fbd464c05a1c5e701c8d4f812ff60de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 09:29:31 +0100
Subject: [PATCH 13/34] correct user group picker token

---
 .../modal/token/user-group-picker-modal.token.ts    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
index f378843285..93aad3cab4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
@@ -1,6 +1,9 @@
-import { UmbModalToken, UmbPickerModalData } from '@umbraco-cms/backoffice/modal';
+import { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_USER_GROUP_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<any>>('Umb.Modal.UserGroupPicker', {
-	type: 'sidebar',
-	size: 'small',
-});
+export const UMB_USER_GROUP_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<any>, UmbPickerModalValue>(
+	'Umb.Modal.UserGroupPicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	},
+);

From e29af004404285714d91fad8dbe089b2e5611e14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 09:32:54 +0100
Subject: [PATCH 14/34] tsc corrections

---
 .../core/picker-input/picker-input.context.ts        |  6 +++---
 .../core/repository/repository-items.manager.ts      | 12 ++++++------
 .../user/components/user-input/user-input.context.ts |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
index b85aa6de55..33efb5e7fb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
@@ -1,6 +1,6 @@
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbItemRepository, UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { type UmbItemRepository, UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
 import {
 	UMB_CONFIRM_MODAL,
@@ -36,7 +36,7 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 	/* TODO: find a better way to have a getUniqueMethod. If we want to support trees/items of different types,
 	then it need to be bound to the type and can't be a generic method we pass in. */
 	constructor(
-		host: UmbControllerHostElement,
+		host: UmbControllerHost,
 		repositoryAlias: string,
 		modalAlias: string | UmbModalToken<UmbPickerModalData<ItemType>, UmbPickerModalValue>,
 		getUniqueMethod?: (entry: ItemType) => string | undefined,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
index 5f612116d3..64423e3020 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
@@ -1,12 +1,12 @@
-import { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { ManifestRepository, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
+import { type ManifestRepository, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { type ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 export class UmbRepositoryItemsManager<ItemType extends ItemResponseModelBaseModel> {
-	host: UmbControllerHostElement;
+	host: UmbControllerHost;
 	repository?: UmbItemRepository<ItemType>;
 	#getUnique: (entry: ItemType) => string | undefined;
 
@@ -28,7 +28,7 @@ export class UmbRepositoryItemsManager<ItemType extends ItemResponseModelBaseMod
 	/* TODO: find a better way to have a getUniqueMethod. If we want to support trees/items of different types,
 	then it need to be bound to the type and can't be a generic method we pass in. */
 	constructor(
-		host: UmbControllerHostElement,
+		host: UmbControllerHost,
 		repositoryAlias: string,
 		getUniqueMethod?: (entry: ItemType) => string | undefined,
 	) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.context.ts
index 6bdbf6f7bd..8b78b6e96c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.context.ts
@@ -1,11 +1,11 @@
 import { UMB_USER_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import type { UmbUserDetailModel } from '../../types.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_USER_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
-import { UserItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-export class UmbUserPickerContext extends UmbPickerInputContext<UserItemResponseModel> {
-	constructor(host: UmbControllerHostElement) {
+export class UmbUserPickerContext extends UmbPickerInputContext<UmbUserDetailModel> {
+	constructor(host: UmbControllerHost) {
 		super(host, UMB_USER_ITEM_REPOSITORY_ALIAS, UMB_USER_PICKER_MODAL);
 	}
 }

From fbff64f0c9ca14689aed7b39602437149da312e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 09:47:45 +0100
Subject: [PATCH 15/34] an attempt to correct validation property settings

---
 .../property-settings-modal.element.ts        | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
index a88996f83c..2b23d69ac0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
@@ -17,10 +17,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 > {
 	//TODO: Should these options come from the server?
 	// TODO: Or should they come from a extension point?
-	@state() private _customValidationOptions = [
+	@state() private _customValidationOptions: Array<Option> = [
 		{
 			name: 'No validation',
-			value: null,
+			value: '!NOVALIDATION!',
 			selected: true,
 		},
 		{
@@ -66,19 +66,21 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		this._originalPropertyData = this._value;
 
 		const regEx = this._value.validation?.regEx ?? null;
-		const newlySelected = this._customValidationOptions.find((option) => {
-			option.selected = option.value === regEx;
-			return option.selected;
-		});
-		if (newlySelected === undefined) {
-			this._customValidationOptions[4].selected = true;
-			this.updateValue({
-				validation: { ...this._value.validation, regEx: this._customValidationOptions[4].value },
-			});
-		} else {
-			this.updateValue({
-				validation: { ...this._value.validation, regEx: regEx },
+		if (regEx) {
+			const newlySelected = this._customValidationOptions.find((option) => {
+				option.selected = option.value === regEx;
+				return option.selected;
 			});
+			if (newlySelected === undefined) {
+				this._customValidationOptions[4].selected = true;
+				this.updateValue({
+					validation: { ...this._value.validation, regEx: this._customValidationOptions[4].value },
+				});
+			} else {
+				this.updateValue({
+					validation: { ...this._value.validation, regEx: regEx },
+				});
+			}
 		}
 	}
 
@@ -163,7 +165,8 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	}
 
 	#onCustomValidationChange(event: UUISelectEvent) {
-		const regEx = event.target.value || event.target.value === '' ? event.target.value.toString() : null;
+		const value = event.target.value.toString();
+		const regEx = value !== '!NOVALIDATION!' ? value : null;
 
 		this._customValidationOptions.forEach((option) => {
 			option.selected = option.value === regEx;
@@ -175,9 +178,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	}
 
 	#onValidationRegExChange(event: UUIInputEvent) {
-		const regEx = event.target.value || event.target.value === '' ? event.target.value.toString() : null;
+		const value = event.target.value.toString();
+		const regEx = value !== '!NOVALIDATION!' ? value : null;
 		const betterChoice = this._customValidationOptions.find((option) => {
-			option.selected = option.value === regEx;
+			option.selected = option.value === value;
 			return option.selected;
 		});
 		if (betterChoice === undefined) {

From 769f57d4f2766612b6da1d67fb91655d1eea268d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 10:29:46 +0100
Subject: [PATCH 16/34] Fix data type listing issue

---
 ...ker-flow-data-type-picker-modal.element.ts | 47 +++++++++----------
 .../detail/data-type-detail.store.ts          |  2 +-
 .../packages/core/store/detail-store-base.ts  |  2 +-
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
index 26b439d749..af54a55795 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
@@ -1,5 +1,6 @@
 import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js';
+import type { UmbDataTypeDetailModel } from '../../types.js';
 import { css, html, customElement, state, repeat, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
@@ -7,7 +8,6 @@ import {
 	UmbDataTypePickerFlowDataTypePickerModalValue,
 	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
-import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-data-type-picker-flow-data-type-picker-modal')
 export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBaseElement<
@@ -15,7 +15,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 	UmbDataTypePickerFlowDataTypePickerModalValue
 > {
 	@state()
-	private _dataTypes?: Array<FolderTreeItemResponseModel>;
+	private _dataTypes?: Array<UmbDataTypeDetailModel>;
 
 	private _propertyEditorUiAlias!: string;
 
@@ -44,8 +44,8 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 
 		await Promise.all(
 			data.items.map((item) => {
-				if (item.id) {
-					return dataTypeDetailRepository.requestByUnique(item.id);
+				if (item.unique) {
+					return dataTypeDetailRepository.requestByUnique(item.unique);
 				}
 				return Promise.resolve();
 			}),
@@ -58,9 +58,9 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 		});
 	}
 
-	private _handleClick(dataType: FolderTreeItemResponseModel) {
-		if (dataType.id) {
-			this._value = { dataTypeId: dataType.id };
+	private _handleClick(dataType: UmbDataTypeDetailModel) {
+		if (dataType.unique) {
+			this._value = { dataTypeId: dataType.unique };
 			this.modalContext?.submit();
 		}
 	}
@@ -87,29 +87,26 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 
 	private _renderDataTypes() {
 		const shouldRender = this._dataTypes && this._dataTypes.length > 0;
-		console.log(this._dataTypes, 'yo', shouldRender);
 
 		return when(
 			shouldRender,
 			() =>
 				html`<ul id="item-grid">
-					${this._dataTypes
-						? repeat(
-								this._dataTypes,
-								(dataType) => dataType.id,
-								(dataType) =>
-									dataType.id
-										? html` <li class="item">
-												<uui-button label="dataType.name" type="button" @click="${() => this._handleClick(dataType)}">
-													<div class="item-content">
-														<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
-														${dataType.name}
-													</div>
-												</uui-button>
-										  </li>`
-										: '',
-						  )
-						: ''}
+					${repeat(
+						this._dataTypes!,
+						(dataType) => dataType.unique,
+						(dataType) =>
+							dataType.unique
+								? html` <li class="item">
+										<uui-button label="dataType.name" type="button" @click="${() => this._handleClick(dataType)}">
+											<div class="item-content">
+												<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
+												${dataType.name}
+											</div>
+										</uui-button>
+								  </li>`
+								: '',
+					)}
 				</ul>`,
 		);
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts
index 8c4804ba26..9474ba7d55 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts
@@ -22,7 +22,7 @@ export class UmbDataTypeDetailStore extends UmbDetailStoreBase<UmbDataTypeDetail
 	withPropertyEditorUiAlias(propertyEditorUiAlias: string) {
 		// TODO: Use a model for the data-type tree items: ^^Most likely it should be parsed to the UmbEntityTreeStore as a generic type.
 		return this._data.asObservablePart((items) =>
-			items.filter((item) => (item as any).propertyEditorUiAlias === propertyEditorUiAlias),
+			items.filter((item) => item.propertyEditorUiAlias === propertyEditorUiAlias),
 		);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store-base.ts
index f722228084..483fd2e625 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store-base.ts
@@ -11,7 +11,7 @@ import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
  */
 
 export abstract class UmbDetailStoreBase<T extends { unique: string }>
-	extends UmbStoreBase
+	extends UmbStoreBase<T>
 	implements UmbDetailStore<T>
 {
 	/**

From ff30f7656ff3ad6281966c549ba8d2e905b21197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 10:34:18 +0100
Subject: [PATCH 17/34] make byUnique able to return undefined

---
 .../property-type-based-property.element.ts                     | 2 +-
 .../src/packages/core/store/detail-store.interface.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts
index 1bc1363a53..1131038379 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts
@@ -28,7 +28,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 	private _dataTypeData?: UmbPropertyEditorConfig;
 
 	private _dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
-	private _dataTypeObserver?: UmbObserverController<UmbDataTypeDetailModel>;
+	private _dataTypeObserver?: UmbObserverController<UmbDataTypeDetailModel | undefined>;
 
 	private async _observeDataType(dataTypeUnique?: string) {
 		this._dataTypeObserver?.destroy();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store.interface.ts
index 38c58155fb..2db202a466 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/detail-store.interface.ts
@@ -3,5 +3,5 @@ import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
 export interface UmbDetailStore<T extends { unique: string }> extends UmbStore<T>, UmbApi {
-	byUnique: (unique: string) => Observable<T>;
+	byUnique: (unique: string) => Observable<T | undefined>;
 }

From 1f46d62cbc3800c5ec85a404c0b7caf13c09f876 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 11:28:37 +0100
Subject: [PATCH 18/34] tree store unique vs id problem

---
 .../data-type-flow-input/data-type-flow-input.element.ts | 4 +++-
 .../data-type-picker-flow-modal.element.ts               | 2 +-
 .../core/data-type/tree/data-type-tree.repository.ts     | 3 +++
 .../src/packages/core/data-type/tree/types.ts            | 6 +++---
 .../core/extension-registry/models/store.model.ts        | 4 ++--
 .../src/packages/core/tree/tree-repository-base.ts       | 8 ++++----
 .../src/packages/core/tree/tree-repository.interface.ts  | 2 +-
 .../src/packages/core/tree/tree-store.interface.ts       | 8 ++++----
 .../src/packages/core/tree/types.ts                      | 3 +++
 .../src/packages/dictionary/dictionary/tree/types.ts     | 5 +++--
 .../src/packages/documents/document-types/tree/types.ts  | 9 +++++++--
 .../documents/documents/recycle-bin/tree/types.ts        | 9 +++++++--
 .../src/packages/documents/documents/tree/types.ts       | 5 +++--
 .../src/packages/media/media-types/tree/types.ts         | 9 +++++++--
 .../src/packages/media/media/tree/types.ts               | 5 +++--
 .../src/packages/members/member-groups/tree/types.ts     | 5 +++--
 .../src/packages/members/member-types/tree/types.ts      | 5 +++--
 .../src/packages/members/members/tree/types.ts           | 5 +++--
 .../src/packages/settings/relation-types/tree/types.ts   | 5 +++--
 .../partial-views/tree/script-tree.repository.ts         | 4 +++-
 .../src/packages/templating/partial-views/tree/types.ts  | 7 +++++--
 .../templating/scripts/tree/script-tree.repository.ts    | 4 +++-
 .../src/packages/templating/scripts/tree/types.ts        | 7 +++++--
 .../src/packages/templating/templates/tree/types.ts      | 5 +++--
 24 files changed, 85 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
index 1ea7eb5911..89f11b9ece 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
@@ -6,6 +6,7 @@ import {
 	UMB_DATA_TYPE_PICKER_FLOW_MODAL,
 	UMB_WORKSPACE_MODAL,
 } from '@umbraco-cms/backoffice/modal';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 // Note: Does only support picking a single data type. But this could be developed later into this same component. To follow other picker input components.
 /**
@@ -62,9 +63,10 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
 				};
 			})
 			.onSubmit((submitData) => {
+				console.log('submit Data');
 				// TODO: we maybe should set the alias to null, if no selection?
 				this.value = submitData?.selection.join(',') ?? '';
-				this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true }));
+				this.dispatchEvent(new UmbChangeEvent());
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._createRoute = routeBuilder(null);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index 85f8c4c9e1..9f0b6696f4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -1,5 +1,5 @@
 import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js';
-import { css, html, repeat, customElement, property, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, repeat, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts
index afd9f23080..aa4bc58b8b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts
@@ -15,7 +15,10 @@ export class UmbDataTypeTreeRepository
 	}
 
 	async requestTreeRoot() {
+		// TODO: TREE STORE TYPE PROBLEM:
+		// TODO: This is wrong, either this should be adapted to use unique, or ID. If so the types above should be updated and the UmbTreeRepositoryBase should also be updated to use unique.
 		const data = {
+			id: null,
 			unique: null,
 			type: UMB_DATA_TYPE_ROOT_ENTITY_TYPE,
 			name: 'Data Types',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts
index d705782db1..05bbca3943 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts
@@ -1,4 +1,4 @@
-import { type DataTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { DataTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
 export type UmbDataTypeTreeItemModel = {
@@ -10,5 +10,5 @@ export type UmbDataTypeTreeItemModel = {
 	type: string;
 	hasChildren: boolean;
 };
-
-export type UmbDataTypeTreeRootModel = DataTypeTreeItemResponseModel & UmbEntityTreeRootModel;
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbDataTypeTreeRootModel extends Omit<DataTypeTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts
index f50dee13ae..870dc4b06e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts
@@ -5,8 +5,8 @@ import { type UmbTreeStore } from '@umbraco-cms/backoffice/tree';
 export interface ManifestStore extends ManifestApi<UmbStoreBase> {
 	type: 'store';
 }
-
-export interface ManifestTreeStore extends ManifestApi<UmbTreeStore> {
+// TODO: TREE STORE TYPE PROBLEM: Provide a base tree item type?
+export interface ManifestTreeStore extends ManifestApi<UmbTreeStore<any>> {
 	type: 'treeStore';
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository-base.ts
index 28741c462f..829908dfb1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository-base.ts
@@ -15,19 +15,19 @@ export class UmbTreeRepositoryBase<
 	implements UmbTreeRepository<TreeItemType, TreeRootType>, UmbApi
 {
 	protected _init: Promise<unknown>;
-	protected _treeStore?: UmbTreeStore;
-	#treeSource: UmbTreeDataSource;
+	protected _treeStore?: UmbTreeStore<TreeItemType>;
+	#treeSource: UmbTreeDataSource<TreeItemType, TreeRootType>;
 
 	constructor(
 		host: UmbControllerHost,
-		treeSource: UmbTreeDataSourceConstructor,
+		treeSource: UmbTreeDataSourceConstructor<TreeItemType, TreeRootType>,
 		treeStoreContextAlias: string | UmbContextToken<any, any>,
 	) {
 		super(host);
 		this.#treeSource = new treeSource(this);
 
 		this._init = this.consumeContext(treeStoreContextAlias, (instance) => {
-			this._treeStore = instance as UmbTreeStore;
+			this._treeStore = instance;
 		}).asPromise();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository.interface.ts
index db89e96c87..07a8aa171f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-repository.interface.ts
@@ -22,7 +22,7 @@ export interface UmbTreeRepository<
 	treeItemsOf: (parentUnique: string | null) => Promise<Observable<TreeItemType[]>>;
 
 	/* TODO: remove this. It is not used client side.
-	Logic to call the root endpoint should be in the data source 
+	Logic to call the root endpoint should be in the data source
 	because it is a server decision to split them
 	*/
 	requestRootTreeItems: () => Promise<{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-store.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-store.interface.ts
index ebe26ce7f1..7225e57be4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-store.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-store.interface.ts
@@ -2,9 +2,9 @@ import { UmbStore } from '@umbraco-cms/backoffice/store';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
-export interface UmbTreeStore<T = any> extends UmbStore<T>, UmbApi {
-	rootItems: Observable<Array<T>>;
-	childrenOf: (parentUnique: string | null) => Observable<Array<T>>;
+export interface UmbTreeStore<TreeItemType> extends UmbStore<TreeItemType>, UmbApi {
+	rootItems: Observable<Array<TreeItemType>>;
+	childrenOf: (parentUnique: string | null) => Observable<Array<TreeItemType>>;
 	// TODO: remove this one when all repositories are using an item store
-	items: (uniques: Array<string>) => Observable<Array<T>>;
+	items: (uniques: Array<string>) => Observable<Array<TreeItemType>>;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts
index 7557b977ce..b0748f2fbd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/types.ts
@@ -22,6 +22,9 @@ export interface UmbFileSystemTreeItemModel extends UmbTreeItemModel {
 }
 
 // Root
+export interface UmbUniqueTreeRootModel extends UmbTreeItemModelBase {
+	unique: null;
+}
 export interface UmbEntityTreeRootModel extends UmbTreeItemModelBase {
 	id: null;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/types.ts
index 2c8aef0bc6..aa96afd3e6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbDictionaryTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbDictionaryTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbDictionaryTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbDictionaryTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts
index 98dfeb9d9a..70468d2bed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts
@@ -1,5 +1,10 @@
 import type { DocumentTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbDocumentTypeTreeItemModel = DocumentTypeTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbDocumentTypeTreeRootModel = DocumentTypeTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbDocumentTypeTreeItemModel
+	extends Omit<DocumentTypeTreeItemResponseModel, 'icon'>,
+		UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbDocumentTypeTreeRootModel
+	extends Omit<Omit<DocumentTypeTreeItemResponseModel, 'id'>, 'icon'>,
+		UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/tree/types.ts
index 5621f81a71..e39327b96f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/tree/types.ts
@@ -1,5 +1,10 @@
 import { RecycleBinItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbDocumentRecycleBinTreeItemModel = RecycleBinItemResponseModel & UmbEntityTreeItemModel;
-export type UmbDocumentRecycleBinTreeRootModel = RecycleBinItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbDocumentRecycleBinTreeItemModel
+	extends Omit<RecycleBinItemResponseModel, 'icon'>,
+		UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbDocumentRecycleBinTreeRootModel
+	extends Omit<Omit<RecycleBinItemResponseModel, 'id'>, 'icon'>,
+		UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/types.ts
index 231c472cbe..93a15d41f9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbDocumentTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbDocumentTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbDocumentTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbDocumentTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/types.ts
index b894e63940..27d6b93c94 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/types.ts
@@ -1,5 +1,10 @@
 import type { MediaTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbMediaTypeTreeItemModel = MediaTypeTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbMediaTypeTreeRootModel = MediaTypeTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbMediaTypeTreeItemModel
+	extends Omit<MediaTypeTreeItemResponseModel, 'icon'>,
+		UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbMediaTypeTreeRootModel
+	extends Omit<Omit<MediaTypeTreeItemResponseModel, 'id'>, 'icon'>,
+		UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/types.ts
index f6bb0bd975..b88f8145d9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbMediaTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbMediaTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbMediaTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbMediaTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts
index 8bea00f33b..bbbb928b69 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbMemberGroupTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbMemberGroupTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbMemberGroupTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbMemberGroupTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/tree/types.ts
index e2a675b476..fb1be53b53 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbMemberTypeTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbMemberTypeTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbMemberTypeTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbMemberTypeTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/tree/types.ts
index 0e16589f77..a6c8662ecc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/members/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbMemberTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbMemberTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbMemberTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbMemberTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts
index 2e23aec82d..53a5c45db4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbRelationTypeTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbRelationTypeTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbRelationTypeTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbRelationTypeTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts
index 6f7de6ac04..8051f32437 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts
@@ -6,8 +6,9 @@ import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree';
 import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
+// TODO: TREE STORE TYPE PROBLEM:
 export class UmbPartialViewTreeRepository
-	extends UmbTreeRepositoryBase<UmbPartialViewTreeItemModel, UmbPartialViewTreeRootModel>
+	extends UmbTreeRepositoryBase<UmbPartialViewTreeItemModel, { id: null } & UmbPartialViewTreeRootModel>
 	implements UmbApi
 {
 	constructor(host: UmbControllerHost) {
@@ -16,6 +17,7 @@ export class UmbPartialViewTreeRepository
 
 	async requestTreeRoot() {
 		const data = {
+			id: null,
 			path: null,
 			type: UMB_PARTIAL_VIEW_ROOT_ENTITY_TYPE,
 			name: 'Partial Views',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts
index 12d204e262..bd45db855f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts
@@ -1,5 +1,8 @@
 import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbFileSystemTreeItemModel, UmbFileSystemTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbPartialViewTreeItemModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeItemModel;
-export type UmbPartialViewTreeRootModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeRootModel;
+export interface UmbPartialViewTreeItemModel extends FileSystemTreeItemPresentationModel, UmbFileSystemTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbPartialViewTreeRootModel
+	extends Omit<FileSystemTreeItemPresentationModel, 'path'>,
+		UmbFileSystemTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts
index 7d51664995..0f9956147f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts
@@ -6,8 +6,9 @@ import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree';
 import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
+// TODO: TREE STORE TYPE PROBLEM:
 export class UmbScriptTreeRepository
-	extends UmbTreeRepositoryBase<UmbScriptTreeItemModel, UmbScriptTreeRootModel>
+	extends UmbTreeRepositoryBase<UmbScriptTreeItemModel, { id: null } & UmbScriptTreeRootModel>
 	implements UmbApi
 {
 	constructor(host: UmbControllerHost) {
@@ -16,6 +17,7 @@ export class UmbScriptTreeRepository
 
 	async requestTreeRoot() {
 		const data = {
+			id: null,
 			path: null,
 			type: UMB_SCRIPT_ROOT_ENTITY_TYPE,
 			name: 'Scripts',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts
index 1bfe8c74f3..7bd5589744 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts
@@ -1,5 +1,8 @@
 import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbFileSystemTreeItemModel, UmbFileSystemTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbScriptTreeItemModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeItemModel;
-export type UmbScriptTreeRootModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeRootModel;
+export interface UmbScriptTreeItemModel extends FileSystemTreeItemPresentationModel, UmbFileSystemTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbScriptTreeRootModel
+	extends Omit<Omit<FileSystemTreeItemPresentationModel, 'id'>, 'path'>,
+		UmbFileSystemTreeRootModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts
index 7920555892..8090445e68 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts
@@ -1,5 +1,6 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
 
-export type UmbTemplateTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
-export type UmbTemplateTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;
+export interface UmbTemplateTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbTemplateTreeRootModel extends Omit<EntityTreeItemResponseModel, 'id'>, UmbEntityTreeRootModel {}

From 9667b5f7d8881d991c74c93633e706dda7a51e34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 11:45:43 +0100
Subject: [PATCH 19/34] fix create new data type modal flow

---
 .../data-type-flow-input.element.ts           |  1 -
 .../data-type-picker-flow-modal.element.ts    | 19 +++----------------
 .../workspace/data-type-workspace.context.ts  |  7 +------
 .../core/modal/token/workspace-modal.token.ts |  3 ++-
 4 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
index 89f11b9ece..181c11f8de 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
@@ -63,7 +63,6 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
 				};
 			})
 			.onSubmit((submitData) => {
-				console.log('submit Data');
 				// TODO: we maybe should set the alias to null, if no selection?
 				this.value = submitData?.selection.join(',') ?? '';
 				this.dispatchEvent(new UmbChangeEvent());
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index 9f0b6696f4..5cd185fe4a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -33,9 +33,6 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	@state()
 	private _groupedPropertyEditorUIs: GroupedItems<ManifestPropertyEditorUi> = {};
 
-	@state()
-	private _selection: Array<string> = [];
-
 	@state()
 	private _submitLabel = 'Select';
 
@@ -82,7 +79,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 				return { data: { entityType: 'data-type', preset: { propertyEditorUiAlias: params.uiAlias } } };
 			})
 			.onSubmit((value) => {
-				this._select(value?.id);
+				this._select(value?.unique);
 				this._submitModal();
 			});
 
@@ -116,16 +113,6 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 		});
 	}
 
-	connectedCallback(): void {
-		super.connectedCallback();
-
-		if (this.modalContext) {
-			this.observe(this.modalContext.value, (value) => {
-				this._selection = value?.selection ?? [];
-			});
-		}
-	}
-
 	private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) {
 		if (dataType.id) {
 			this._select(dataType.id);
@@ -134,7 +121,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	}
 
 	private _select(id: string | undefined) {
-		this._selection = id ? [id] : [];
+		this._value = { selection: id ? [id] : [] };
 	}
 
 	private _handleFilterInput(event: UUIInputEvent) {
@@ -284,7 +271,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 				dataTypes,
 				(dataType) => dataType.id,
 				(dataType) =>
-					html`<li class="item" ?selected=${this._selection.includes(dataType.id!)}>
+					html`<li class="item" ?selected=${this._value.selection.includes(dataType.id!)}>
 						<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
 							<div class="item-content">
 								<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
index 43ade5cca3..efa21b2d29 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
@@ -123,10 +123,8 @@ export class UmbDataTypeWorkspaceContext
 	}
 
 	private _mergeConfigProperties() {
-		console.log('schema properties', this._propertyEditorSchemaConfigProperties);
-		console.log('ui properties', this._propertyEditorUISettingsProperties);
-
 		if (this._propertyEditorSchemaConfigProperties && this._propertyEditorUISettingsProperties) {
+			// TODO: Consider the ability to to omit a schema config if a UI config has same alias. Otherwise we should make an error when this case happens.
 			this.#properties.next([
 				...this._propertyEditorSchemaConfigProperties,
 				...this._propertyEditorUISettingsProperties,
@@ -203,8 +201,6 @@ export class UmbDataTypeWorkspaceContext
 	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
 		await this.#getDataPromise;
 
-		// TODO: Merge map..
-
 		return combineLatest([
 			this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value as ReturnType),
 			this.#defaults.asObservablePart(
@@ -215,7 +211,6 @@ export class UmbDataTypeWorkspaceContext
 				return value ?? defaultValue;
 			}),
 		);
-		//return this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value ?? this.getPropertyDefaultValue(propertyAlias) as ReturnType);
 	}
 
 	getPropertyValue<ReturnType = unknown>(propertyAlias: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
index b3b0ac1cb6..08f7b73805 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
@@ -6,9 +6,10 @@ export interface UmbWorkspaceData {
 	preset: Partial<CreateDataTypeRequestModel>;
 }
 
+// TODO: It would be good with a WorkspaceValueBaseType, to avoid the  hardcoded type for unique here:
 export type UmbWorkspaceValue =
 	| {
-			id: string;
+			unique: string;
 	  }
 	| undefined;
 

From c5e0987c11bc323d6fa78eca43498563f1952daf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 11:52:59 +0100
Subject: [PATCH 20/34] fix property editor picking

---
 ...property-editor-ui-picker-modal.element.ts | 24 ++++++++-----------
 ...ata-type-details-workspace-view.element.ts |  1 +
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 9eef7e8806..f5f0c44dd2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -22,22 +22,18 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 	@state()
 	private _propertyEditorUIs: Array<ManifestPropertyEditorUi> = [];
 
-	@state()
-	private _selection: Array<string> = [];
-
 	@state()
 	private _submitLabel = 'Select';
 
 	connectedCallback(): void {
 		super.connectedCallback();
 
-		this._selection = this._value?.selection ?? [];
 		this._submitLabel = this.data?.submitLabel ?? this._submitLabel;
 
-		this._usePropertyEditorUIs();
+		this.#usePropertyEditorUIs();
 	}
 
-	private _usePropertyEditorUIs() {
+	#usePropertyEditorUIs() {
 		if (!this.data) return;
 
 		this.observe(umbExtensionsRegistry.extensionsOfType('propertyEditorUi'), (propertyEditorUIs) => {
@@ -56,15 +52,15 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 		});
 	}
 
-	private _handleClick(propertyEditorUi: ManifestPropertyEditorUi) {
-		this._select(propertyEditorUi.alias);
+	#handleClick(propertyEditorUi: ManifestPropertyEditorUi) {
+		this.#select(propertyEditorUi.alias);
 	}
 
-	private _select(alias: string) {
-		this._selection = [alias];
+	#select(alias: string) {
+		this._value = { selection: [alias] };
 	}
 
-	private _handleFilterInput(event: UUIInputEvent) {
+	#handleFilterInput(event: UUIInputEvent) {
 		let query = (event.target.value as string) || '';
 		query = query.toLowerCase();
 
@@ -105,7 +101,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 		return html` <uui-input
 			type="search"
 			id="filter"
-			@input="${this._handleFilterInput}"
+			@input="${this.#handleFilterInput}"
 			placeholder="Type to filter..."
 			label="Type to filter icons">
 			<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
@@ -126,8 +122,8 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 				groupItems,
 				(propertyEditorUI) => propertyEditorUI.alias,
 				(propertyEditorUI) =>
-					html` <li class="item" ?selected=${this._selection.includes(propertyEditorUI.alias)}>
-						<button type="button" @click="${() => this._handleClick(propertyEditorUI)}">
+					html` <li class="item" ?selected=${this._value.selection.includes(propertyEditorUI.alias)}>
+						<button type="button" @click="${() => this.#handleClick(propertyEditorUI)}">
 							<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
 							${propertyEditorUI.meta.label || propertyEditorUI.name}
 						</button>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
index c80154e980..32a3413883 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -77,6 +77,7 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 		});
 
 		modalContext?.onSubmit().then((value) => {
+			console.log('got', value);
 			this._workspaceContext?.setPropertyEditorUiAlias(value?.selection[0]);
 		});
 	}

From 9df276dc4778c94ea9252f5312ed8323ecda80ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 11:58:25 +0100
Subject: [PATCH 21/34] stylesheet-rich-text-editor-style

---
 ...pace-view-rich-text-editor-rule.element.ts | 27 +++++++++----------
 ...-rich-text-editor-style-sidebar.element.ts | 24 +++++++----------
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
index 7d9d8cc6a3..6893cbbbe2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
@@ -1,15 +1,14 @@
-import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
+import { UMB_STYLESHEET_WORKSPACE_CONTEXT, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
 import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL } from './stylesheet-workspace-view-rich-text-editor.element.js';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-stylesheet-rich-text-editor-rule')
 export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement {
-	@property({ type: Object, attribute: false })
+	@property({ attribute: false })
 	private rule: RichTextRuleModel | null = null;
 
 	#context?: UmbStylesheetWorkspaceContext;
@@ -18,8 +17,8 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#context = workspaceContext as UmbStylesheetWorkspaceContext;
+		this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#context = workspaceContext;
 		});
 
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
@@ -27,32 +26,32 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
 		});
 	}
 
-	openModal = () => {
+	#openModal() {
 		if (!this._modalContext) throw new Error('Modal context not found');
 		const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
 			value: {
 				rule: this.rule,
 			},
 		});
-		modal?.onSubmit().then((result) => {
-			if (result.rule && this.rule?.name) {
-				this.#context?.updateRule(this.rule?.name, result.rule);
+		modal?.onSubmit().then((value) => {
+			if (value.rule && this.rule?.name) {
+				this.#context?.updateRule(this.rule?.name, value.rule);
 			}
 		});
-	};
+	}
 
-	removeRule = () => {
+	#removeRule() {
 		//TODO: SPORTER BREAKS THAT - rules are removed from the data but not from the DOM
 		if (!this.#context) throw new Error('Context not found');
 		this.#context.setRules(this.#context.getRules().filter((r) => r.name !== this.rule?.name));
-	};
+	}
 
 	render() {
 		return html`
 			<div class="rule-name"><uui-icon name="icon-navigation"></uui-icon>${this.rule?.name}</div>
 			<div class="rule-actions">
-				<uui-button label="Edit" look="secondary" @click=${this.openModal}>Edit</uui-button
-				><uui-button label="Remove" look="secondary" color="danger" @click=${this.removeRule}>Remove</uui-button>
+				<uui-button label="Edit" look="secondary" @click=${this.#openModal}>Edit</uui-button
+				><uui-button label="Remove" look="secondary" color="danger" @click=${this.#removeRule}>Remove</uui-button>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
index 8c1e4f1752..9e2c693ff7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
@@ -2,7 +2,6 @@ import { RichTextRuleModelSortable } from '../../stylesheet-workspace.context.js
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 
 export interface StylesheetRichTextEditorStyleModalValue {
 	rule: RichTextRuleModelSortable | null;
@@ -13,40 +12,37 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 	never,
 	StylesheetRichTextEditorStyleModalValue
 > {
-	@state()
-	private _rule: RichTextRuleModel | null = null;
-
 	#updateName(event: Event) {
 		const name = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				name,
 			},
-		};
+		});
 	}
 
 	#updateSelector(event: Event) {
 		const selector = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				selector,
 			},
-		};
+		});
 	}
 
 	#updateStyles(event: Event) {
 		const styles = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				styles,
 			},
-		};
+		});
 	}
 
 	render() {
@@ -62,7 +58,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="name"
 										name="name"
-										.value=${this._rule?.name ?? ''}
+										.value=${this._value.rule?.name ?? ''}
 										label="Rule name"
 										required
 										@input=${this.#updateName}>
@@ -74,7 +70,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="selector"
 										name="selector"
-										.value=${this._rule?.selector ?? ''}
+										.value=${this._value.rule?.selector ?? ''}
 										label="Rule selector"
 										@input=${this.#updateSelector}
 										required>
@@ -89,14 +85,14 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 										@input=${this.#updateStyles}
 										id="styles"
 										name="styles"
-										.value=${this._rule?.styles ?? ''}
+										.value=${this._value.rule?.styles ?? ''}
 										label="Rule styles">
 									</uui-textarea>
 								</uui-form-layout-item>
 								<uui-form-layout-item>
 									<uui-label for="styles" slot="label" required="">Preview</uui-label>
 									<span slot="description">How the text will look like in the rich text editor.</span>
-									<div style="${ifDefined(this._rule?.styles)}">
+									<div style="${ifDefined(this._value.rule?.styles)}">
 										a b c d e f g h i j k l m n o p q r s t u v w x t z
 										<br />
 										A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

From dd214473fc1baab31fac18a42279595218ea15a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 12:00:14 +0100
Subject: [PATCH 22/34] UMB_RESEND_INVITE_TO_USER_MODAL

---
 .../modal/resend-invite/resend-invite-to-user-modal.token.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
index a58dd10034..0df306f7c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
@@ -4,7 +4,7 @@ export type UmbResendInviteToUserModalData = {
 	userId: string;
 };
 
-export type UmbResendInviteToUserModalValue = undefined;
+export type UmbResendInviteToUserModalValue = never;
 
 export const UMB_RESEND_INVITE_TO_USER_MODAL = new UmbModalToken<
 	UmbResendInviteToUserModalData,

From 2046b8f4e8e21e1529c3f7f9a1091148a3b08bde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 12:06:13 +0100
Subject: [PATCH 23/34] invite modal

---
 .../packages/core/extension-registry/models/modal.model.ts    | 4 +++-
 .../user/invite/modal/invite/user-invite-modal.element.ts     | 2 +-
 .../user/user/invite/modal/invite/user-invite-modal.token.ts  | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts
index 4fd1190e96..4c281e3852 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts
@@ -2,6 +2,8 @@ import type { UmbModalExtensionElement } from '../interfaces/modal-extension-ele
 import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
 
 export interface ManifestModal
-	extends ManifestElement<UmbModalExtensionElement<any, any> | UmbModalExtensionElement<any, undefined>> {
+	extends ManifestElement<
+		UmbModalExtensionElement<any, any> | UmbModalExtensionElement<any, never> | UmbModalExtensionElement<never, never>
+	> {
 	type: 'modal';
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts
index d24f5c77a3..efed76bbb1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts
@@ -1,6 +1,6 @@
 import { UmbUserGroupInputElement } from '../../../../user-group/components/input-user-group/user-group-input.element.js';
 import { UmbInviteUserRepository } from '../../repository/invite-user.repository.js';
-import { css, html, customElement, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
index 3768b981ae..d14d928fde 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
@@ -1,6 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_INVITE_USER_MODAL = new UmbModalToken('Umb.Modal.User.Invite', {
+export const UMB_INVITE_USER_MODAL = new UmbModalToken<never, never>('Umb.Modal.User.Invite', {
 	type: 'dialog',
 	size: 'small',
 });

From 4992419286c3d8c8726fb7ac955b237557f8a960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 12:17:25 +0100
Subject: [PATCH 24/34] user group pickers

---
 .../user-group-picker-modal.element.ts        | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
index 7e7fc07654..f70a5e65a1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -1,14 +1,16 @@
 import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
-import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UMB_USER_GROUP_PICKER_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbSelectedEvent, UmbDeselectedEvent } from '@umbraco-cms/backoffice/event';
-
 @customElement('umb-user-group-picker-modal')
-export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
+export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
+	(typeof UMB_USER_GROUP_PICKER_MODAL)['DATA'],
+	(typeof UMB_USER_GROUP_PICKER_MODAL)['VALUE']
+> {
 	@state()
 	private _userGroups: Array<UserGroupResponseModel> = [];
 
@@ -20,7 +22,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 
 		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this.data?.selection ?? []);
+		this.#selectionManager.setSelection(this._value?.selection ?? []);
+		this.observe(this.#selectionManager.selection, (selection) => this.updateValue({ selection }), 'selectionObserver');
 	}
 
 	protected firstUpdated(): void {
@@ -37,7 +40,6 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		if (!item.id) throw new Error('User group id is required');
 		event.stopPropagation();
 		this.#selectionManager.select(item.id);
-		this.#updateSelectionValue();
 		this.requestUpdate();
 		this.modalContext?.dispatchEvent(new UmbSelectedEvent(item.id));
 	}
@@ -46,15 +48,10 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		if (!item.id) throw new Error('User group id is required');
 		event.stopPropagation();
 		this.#selectionManager.deselect(item.id);
-		this.#updateSelectionValue();
 		this.requestUpdate();
 		this.modalContext?.dispatchEvent(new UmbDeselectedEvent(item.id));
 	}
 
-	#updateSelectionValue() {
-		this.modalContext?.updateValue({ selection: this.#selectionManager.getSelection() });
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline=${this.localize.term('user_selectUserGroup', false)}>
@@ -80,7 +77,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		`;
 	}
 
-	static styles = [UmbTextStyles, css``];
+	static styles = [UmbTextStyles];
 }
 
 export default UmbUserGroupPickerModalElement;

From ebf48347d57ad9408a24988584d73633c0504c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 12:21:57 +0100
Subject: [PATCH 25/34] move stuff

---
 .../section-picker-modal.element.ts           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
index eef4e72e4b..186ea3091e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
@@ -18,17 +18,6 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 
 	#selectionManager = new UmbSelectionManager();
 
-	#submit() {
-		this._value = {
-			selection: this.#selectionManager.getSelection(),
-		};
-		this.modalContext?.submit();
-	}
-
-	#close() {
-		this.modalContext?.reject();
-	}
-
 	connectedCallback(): void {
 		super.connectedCallback();
 
@@ -43,6 +32,17 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 			'umbSectionsObserver';
 	}
 
+	#submit() {
+		this._value = {
+			selection: this.#selectionManager.getSelection(),
+		};
+		this.modalContext?.submit();
+	}
+
+	#close() {
+		this.modalContext?.reject();
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline="Select sections">

From d1e8e2395e6443bb60c84e374aab9f07b4c38e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:00:58 +0100
Subject: [PATCH 26/34] Make UmbModalToken use args object

---
 .../entity-actions/create/modal/index.ts      |  6 ++--
 .../token/change-password-modal.token.ts      |  4 ++-
 .../modal/token/code-editor-modal.token.ts    |  6 ++--
 .../core/modal/token/confirm-modal.token.ts   |  4 ++-
 .../token/create-dictionary-modal.token.ts    |  6 ++--
 .../token/create-document-modal.token.ts      |  6 ++--
 .../modal/token/create-user-modal.token.ts    |  6 ++--
 .../token/create-user-success-modal.token.ts  |  6 ++--
 .../modal/token/current-user-modal.token.ts   |  6 ++--
 ...icker-flow-data-type-picker-modal.token.ts |  6 ++--
 .../data-type-picker-flow-modal.token.ts      |  6 ++--
 .../token/data-type-picker-modal.token.ts     | 12 ++++----
 .../core/modal/token/debug-modal.token.ts     |  6 ++--
 .../dictionary-item-picker-modal.token.ts     |  9 +++---
 .../token/document-picker-modal.token.ts      | 12 ++++----
 .../token/document-type-picker-modal.token.ts |  9 +++---
 .../modal/token/embedded-media-modal.token.ts |  6 ++--
 ...ty-user-permission-settings-modal.token.ts |  4 ++-
 .../examine-fields-settings-modal.token.ts    |  6 ++--
 .../token/export-dictionary-modal.token.ts    |  6 ++--
 .../core/modal/token/folder-modal.token.ts    |  6 ++--
 .../modal/token/icon-picker-modal.token.ts    |  6 ++--
 .../token/import-dictionary-modal.token.ts    |  6 ++--
 .../token/language-picker-modal.token.ts      |  6 ++--
 .../modal/token/link-picker-modal.token.ts    |  6 ++--
 .../token/media-tree-picker-modal.token.ts    | 12 ++++----
 .../token/media-type-picker-modal.token.ts    | 12 ++++----
 .../packages/core/modal/token/modal-token.ts  | 30 +++++++++++--------
 .../token/partial-view-picker-modal.token.ts  |  6 ++--
 .../modal/token/permissions-modal.token.ts    |  4 ++-
 .../property-editor-ui-picker-modal.token.ts  |  6 ++--
 .../token/property-settings-modal.token.ts    | 10 +++----
 .../modal/token/section-picker-modal.token.ts |  6 ++--
 .../core/modal/token/template-modal.token.ts  |  6 ++--
 .../token/template-picker-modal.token.ts      | 12 ++++----
 .../token/user-group-picker-modal.token.ts    |  6 ++--
 .../modal/token/user-picker-modal.token.ts    |  6 ++--
 .../core/modal/token/workspace-modal.token.ts |  6 ++--
 .../entity-actions/create/modal/index.ts      |  6 ++--
 .../log-viewer-search-input.element.ts        |  6 ++--
 .../entity-actions/create/modal/index.ts      |  6 ++--
 .../templating-insert-menu.element.ts         |  6 ++--
 .../insert-section-modal.element.ts           |  6 ++--
 .../create/create-from-snippet.action.ts      |  4 ++-
 ...workspace-view-rich-text-editor.element.ts | 10 +++----
 .../templates/modals/modal-tokens.ts          |  6 ++--
 .../modal/invite/user-invite-modal.token.ts   |  6 ++--
 .../resend-invite-to-user-modal.token.ts      |  6 ++--
 .../stories/extending/modals/intro.mdx        |  6 ++--
 49 files changed, 220 insertions(+), 132 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
index b87999813d..9f6918194d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
@@ -7,7 +7,9 @@ export interface UmbDataTypeCreateOptionsModalData {
 export const UMB_DATA_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbDataTypeCreateOptionsModalData>(
 	'Umb.Modal.DataTypeCreateOptions',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
index 7fc93d6312..4864e9a8aa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
@@ -12,6 +12,8 @@ export interface UmbChangePasswordModalValue {
 export const UMB_CHANGE_PASSWORD_MODAL = new UmbModalToken<UmbChangePasswordModalData, UmbChangePasswordModalValue>(
 	'Umb.Modal.ChangePassword',
 	{
-		type: 'dialog',
+		config: {
+			type: 'dialog',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
index 648b9fd50f..ea97ab3991 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
@@ -18,7 +18,9 @@ export interface UmbCodeEditorModalValue {
 export const UMB_CODE_EDITOR_MODAL = new UmbModalToken<UmbCodeEditorModalData, UmbCodeEditorModalValue>(
 	'Umb.Modal.CodeEditor',
 	{
-		type: 'sidebar',
-		size: 'large',
+		config: {
+			type: 'sidebar',
+			size: 'large',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
index b92c98593d..3a43b3ee7a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
@@ -11,5 +11,7 @@ export interface UmbConfirmModalData {
 export type UmbConfirmModalValue = undefined;
 
 export const UMB_CONFIRM_MODAL = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalValue>('Umb.Modal.Confirm', {
-	type: 'dialog',
+	config: {
+		type: 'dialog',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
index 7daefe1c14..77004c37f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
@@ -15,6 +15,8 @@ export const UMB_CREATE_DICTIONARY_MODAL = new UmbModalToken<
 	UmbCreateDictionaryModalData,
 	UmbCreateDictionaryModalValue
 >('Umb.Modal.CreateDictionary', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
index 7167a5f30d..78a959a330 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
@@ -11,7 +11,9 @@ export interface UmbCreateDocumentModalValue {
 export const UMB_CREATE_DOCUMENT_MODAL = new UmbModalToken<UmbCreateDocumentModalData, UmbCreateDocumentModalValue>(
 	'Umb.Modal.CreateDocument',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
index e5769560b3..f697ed8e9b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
@@ -1,6 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_CREATE_USER_MODAL = new UmbModalToken('Umb.Modal.User.Create', {
-	type: 'dialog',
-	size: 'small',
+	config: {
+		type: 'dialog',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
index 8fe3035ac0..6ef0cab954 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
@@ -11,6 +11,8 @@ export const UMB_CREATE_USER_SUCCESS_MODAL = new UmbModalToken<
 	UmbCreateUserSuccessModalData,
 	UmbCreateUserSuccessModalValue
 >('Umb.Modal.User.CreateSuccess', {
-	type: 'dialog',
-	size: 'small',
+	config: {
+		type: 'dialog',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
index bef9978337..204d89c285 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
@@ -1,6 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_CURRENT_USER_MODAL = new UmbModalToken('Umb.Modal.User.Current', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
index 123910ca78..b9ce834a7c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
@@ -15,6 +15,8 @@ export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToke
 	UmbDataTypePickerFlowDataTypePickerModalData,
 	UmbDataTypePickerFlowDataTypePickerModalValue
 >('Umb.Modal.DataTypePickerFlowDataTypePicker', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
index 584ac447ea..e60d0a84e8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
@@ -12,6 +12,8 @@ export const UMB_DATA_TYPE_PICKER_FLOW_MODAL = new UmbModalToken<
 	UmbDataTypePickerFlowModalData,
 	UmbDataTypePickerFlowModalValue
 >('Umb.Modal.DataTypePickerFlow', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
index 5d7e5ee7b8..5f8cee9f4c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
@@ -7,10 +7,12 @@ export type UmbDataTypePickerModalValue = UmbPickerModalValue;
 export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerModalData, UmbDataTypePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
-	},
-	{
-		treeAlias: 'Umb.Tree.DataTypes',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.DataTypes',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
index 1809509830..c81e2ee488 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
@@ -6,6 +6,8 @@ export interface UmbContextDebuggerModalData {
 }
 
 export const UMB_CONTEXT_DEBUGGER_MODAL = new UmbModalToken<UmbContextDebuggerModalData>('Umb.Modal.ContextDebugger', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
index 607a42c862..e9550cb04c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
@@ -7,13 +7,12 @@ export type UmbDictionaryItemPickerModalValue = UmbPickerModalValue;
 export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken<
 	UmbDictionaryItemPickerModalData,
 	UmbDictionaryItemPickerModalValue
->(
-	'Umb.Modal.TreePicker',
-	{
+>('Umb.Modal.TreePicker', {
+	config: {
 		type: 'sidebar',
 		size: 'small',
 	},
-	{
+	data: {
 		treeAlias: 'Umb.Tree.Dictionary',
 	},
-);
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
index e3403e8903..90f33f7d44 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
@@ -7,10 +7,12 @@ export type UmbDocumentPickerModalValue = UmbPickerModalValue;
 export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModalData, UmbDocumentPickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
-	},
-	{
-		treeAlias: 'Umb.Tree.Document',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.Document',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
index 3f126242dd..9c7d87dcd0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
@@ -7,13 +7,12 @@ export type UmbDocumentTypePickerModalValue = UmbPickerModalValue;
 export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken<
 	UmbDocumentTypePickerModalData,
 	UmbDocumentTypePickerModalValue
->(
-	'Umb.Modal.TreePicker',
-	{
+>('Umb.Modal.TreePicker', {
+	config: {
 		type: 'sidebar',
 		size: 'small',
 	},
-	{
+	data: {
 		treeAlias: 'Umb.Tree.DocumentType',
 	},
-);
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
index 00e4c0a1e9..4ed645cfd8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
@@ -31,7 +31,9 @@ export interface UmbEmbeddedMediaModalValue extends UmbEmbeddedMediaModalData {
 export const UMB_EMBEDDED_MEDIA_MODAL = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue>(
 	'Umb.Modal.EmbeddedMedia',
 	{
-		type: 'sidebar',
-		size: 'medium',
+		config: {
+			type: 'sidebar',
+			size: 'medium',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
index 2638f4db07..7eb6bd7e67 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
@@ -15,5 +15,7 @@ export const UMB_ENTITY_USER_PERMISSION_MODAL = new UmbModalToken<
 	UmbEntityUserPermissionSettingsModalData,
 	UmbEntityUserPermissionSettingsModalValue
 >('Umb.Modal.EntityUserPermissionSettings', {
-	type: 'sidebar',
+	config: {
+		type: 'sidebar',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
index b6b029a410..e80dc9570d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
@@ -15,6 +15,8 @@ export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL = new UmbModalToken<
 	UmbExamineFieldsSettingsModalData,
 	UmbExamineFieldsSettingsModalValue
 >('Umb.Modal.ExamineFieldsSettings', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
index 947853f3d0..d8ea7e7bd5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
@@ -12,6 +12,8 @@ export const UMB_EXPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbExportDictionaryModalData,
 	UmbExportDictionaryModalValue
 >('Umb.Modal.ExportDictionary', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
index a34075ff65..f68430b87f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
@@ -12,6 +12,8 @@ export interface UmbFolderModalValue {
 }
 
 export const UMB_FOLDER_MODAL = new UmbModalToken<UmbFolderModalData, UmbFolderModalValue>('Umb.Modal.Folder', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
index ba6b2453b5..1b3ba370ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
@@ -10,7 +10,9 @@ export interface UmbIconPickerModalValue {
 export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalValue>(
 	'Umb.Modal.IconPicker',
 	{
-		type: 'sidebar',
-		size: 'medium',
+		config: {
+			type: 'sidebar',
+			size: 'medium',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
index 32e628e5a9..da72b0d74d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
@@ -14,6 +14,8 @@ export const UMB_IMPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbImportDictionaryModalData,
 	UmbImportDictionaryModalValue
 >('Umb.Modal.ImportDictionary', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
index 674d735988..9ccc9e854c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
@@ -13,7 +13,9 @@ export interface UmbLanguagePickerModalValue {
 export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalValue>(
 	'Umb.Modal.LanguagePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
index 165f8fa9b4..4a5c07be5a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
@@ -29,7 +29,9 @@ export interface UmbLinkPickerConfig {
 export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
 	'Umb.Modal.LinkPicker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
index dba407a398..424842082e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
@@ -7,10 +7,12 @@ export type UmbMediaTreePickerModalValue = UmbPickerModalValue;
 export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken<UmbMediaTreePickerModalData, UmbMediaTreePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
-	},
-	{
-		treeAlias: 'Umb.Tree.Media',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.Media',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
index aef85910f2..a11019e664 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
@@ -7,10 +7,12 @@ export type UmbMediaTypePickerModalValue = UmbPickerModalValue;
 export const UMB_MEDIA_TYPE_PICKER_MODAL = new UmbModalToken<UmbMediaTypePickerModalData, UmbMediaTypePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
-	},
-	{
-		treeAlias: 'Umb.Tree.MediaType',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.MediaType',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
index 117778ee1b..983b16280e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
@@ -1,5 +1,11 @@
 import { UmbModalConfig } from '../modal-manager.context.js';
 
+export interface UmbModalTokenDefaults<ModalDataType extends object = object, ModalValueType = unknown> {
+	config?: UmbModalConfig;
+	data?: ModalDataType;
+	value?: ModalValueType;
+}
+
 export class UmbModalToken<ModalDataType extends object = object, ModalValueType = unknown> {
 	/**
 	 * Get the data type of the token's data.
@@ -23,17 +29,17 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 	 */
 	readonly VALUE: ModalValueType = undefined as never;
 
+	#alias;
+	#defaults;
+
 	/**
 	 * @param alias   Unique identifier for the token,
-	 * @param defaultConfig  Default configuration for the modal,
-	 * @param defaultData  Default data for the modal,
+	 * @param defaults  Defaults for the modal,
 	 */
-	constructor(
-		protected alias: string,
-		protected defaultConfig?: UmbModalConfig,
-		protected defaultData?: ModalDataType,
-		protected defaultValue?: ModalValueType,
-	) {}
+	constructor(alias: string, defaults?: UmbModalTokenDefaults<ModalDataType, ModalValueType>) {
+		this.#alias = alias;
+		this.#defaults = defaults;
+	}
 
 	/**
 	 * This method must always return the unique alias of the token since that
@@ -42,18 +48,18 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 	 * @returns the unique alias of the token
 	 */
 	toString(): string {
-		return this.alias;
+		return this.#alias;
 	}
 
 	public getDefaultConfig(): UmbModalConfig | undefined {
-		return this.defaultConfig;
+		return this.#defaults?.config;
 	}
 
 	public getDefaultData(): ModalDataType | undefined {
-		return this.defaultData;
+		return this.#defaults?.data;
 	}
 
 	public getDefaultValue(): ModalValueType | undefined {
-		return this.defaultValue;
+		return this.#defaults?.value;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
index 29344f3530..ac9a0d19c0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
@@ -15,6 +15,8 @@ export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken<
 	UmbPartialViewPickerModalData,
 	UmbPartialViewPickerModalValue
 >(UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS, {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
index e3105cbb3f..d4cc006eec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
@@ -10,6 +10,8 @@ export type UmbPermissionsModalValue = undefined;
 export const UMB_PERMISSIONS_MODAL = new UmbModalToken<UmbPermissionsModalData, UmbPermissionsModalValue>(
 	'Umb.Modal.Permissions',
 	{
-		type: 'sidebar',
+		config: {
+			type: 'sidebar',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
index 82e238931b..6963811185 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
@@ -12,6 +12,8 @@ export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL = new UmbModalToken<
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalValue
 >('Umb.Modal.PropertyEditorUiPicker', {
-	type: 'sidebar',
-	size: 'small',
+	config: {
+		type: 'sidebar',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
index 8b9f693970..6b3782c884 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
@@ -9,14 +9,12 @@ export type UmbPropertySettingsModalValue = PropertyTypeModelBaseModel;
 export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<
 	UmbPropertySettingsModalData,
 	UmbPropertySettingsModalValue
->(
-	'Umb.Modal.PropertySettings',
-	{
+>('Umb.Modal.PropertySettings', {
+	config: {
 		type: 'sidebar',
 		size: 'small',
 	},
-	undefined,
-	{
+	value: {
 		validation: {},
 	},
-);
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
index 1df6ed1e95..15bdaf4cb5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
@@ -12,7 +12,9 @@ export interface UmbSectionPickerModalValue {
 export const UMB_SECTION_PICKER_MODAL = new UmbModalToken<UmbSectionPickerModalData, UmbSectionPickerModalValue>(
 	'Umb.Modal.SectionPicker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
index 5d5a18143f..dd2a9a6efc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
@@ -10,6 +10,8 @@ export interface UmbTemplateModalValue {
 }
 
 export const UMB_TEMPLATE_MODAL = new UmbModalToken<UmbTemplateModalData, UmbTemplateModalValue>('Umb.Modal.Template', {
-	type: 'sidebar',
-	size: 'full',
+	config: {
+		type: 'sidebar',
+		size: 'full',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
index d13192e2da..ec91504c78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
@@ -7,10 +7,12 @@ export type UmbTemplatePickerModalValue = UmbPickerModalValue;
 export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModalData, UmbTemplatePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		type: 'sidebar',
-		size: 'small',
-	},
-	{
-		treeAlias: 'Umb.Tree.Templates',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.Templates',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
index 93aad3cab4..3026f78d90 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
@@ -3,7 +3,9 @@ import { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco
 export const UMB_USER_GROUP_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<any>, UmbPickerModalValue>(
 	'Umb.Modal.UserGroupPicker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
index 3c96fffcd4..8fd8b7439e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
@@ -10,7 +10,9 @@ export interface UmbUserPickerModalValue {
 export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbUserPickerModalData, UmbUserPickerModalValue>(
 	'Umb.Modal.User.Picker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
index 08f7b73805..5b49c068cd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
@@ -14,6 +14,8 @@ export type UmbWorkspaceValue =
 	| undefined;
 
 export const UMB_WORKSPACE_MODAL = new UmbModalToken<UmbWorkspaceData, UmbWorkspaceValue>('Umb.Modal.Workspace', {
-	type: 'sidebar',
-	size: 'large',
+	config: {
+		type: 'sidebar',
+		size: 'large',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
index d5e5161ad0..48322dad88 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
@@ -7,7 +7,9 @@ export interface UmbDocumentTypeCreateOptionsModalData {
 export const UMB_DOCUMENT_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbDocumentTypeCreateOptionsModalData>(
 	'Umb.Modal.DocumentTypeCreateOptions',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
index 985aaf8c3a..6aeca4f42e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -21,8 +21,10 @@ export interface UmbContextSaveSearchModalData {
 export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken<UmbContextSaveSearchModalData>(
 	'Umb.Modal.LogViewer.SaveSearch',
 	{
-		type: 'dialog',
-		size: 'small',
+		config: {
+			type: 'dialog',
+			size: 'small',
+		},
 	},
 );
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
index dcc72118a7..8b55e6d1a4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
@@ -7,7 +7,9 @@ export interface UmbMediaTypeCreateOptionsModalData {
 export const UMB_MEDIA_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbMediaTypeCreateOptionsModalData>(
 	'Umb.Modal.MediaTypeCreateOptions',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
index 8ba35ee99e..ba8845118b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
@@ -19,8 +19,10 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>(
 	UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS,
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
index 152a4d4dfb..42747838ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -11,8 +11,10 @@ import type { UmbInsertSectionCheckboxElement } from './insert-section-input.ele
 export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken<object, UmbInsertSectionModalModalValue>(
 	UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS,
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
index 270c8f7a7a..9b4d08be3b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
@@ -13,7 +13,9 @@ export type UmbConfirmModalValue = undefined;
 export const UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL = new UmbModalToken<UmbCreateFromSnippetPartialViewModalData, string>(
 	'Umb.Modal.CreateFromSnippetPartialView',
 	{
-		type: 'sidebar',
+		config: {
+			type: 'sidebar',
+		},
 	},
 );
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index ebeb80a6e8..e1029f5873 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -14,15 +14,13 @@ import './stylesheet-workspace-view-rich-text-editor-rule.element.js';
 export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken<
 	never,
 	StylesheetRichTextEditorStyleModalValue
->(
-	UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
-	{
+>(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, {
+	config: {
 		type: 'sidebar',
 		size: 'medium',
 	},
-	undefined,
-	{ rule: null },
-);
+	value: { rule: null },
+});
 
 const SORTER_CONFIG: UmbSorterConfig<RichTextRuleModel> = {
 	compareElementToModel: (element: HTMLElement, model: RichTextRuleModel) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
index 415580d215..1b03343224 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
@@ -9,6 +9,8 @@ export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken<
 	TemplateQueryBuilderModalData,
 	UmbTemplateQueryBuilderModalValue
 >(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
-	type: 'sidebar',
-	size: 'large',
+	config: {
+		type: 'sidebar',
+		size: 'large',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
index d14d928fde..f53848158a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
@@ -1,6 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_INVITE_USER_MODAL = new UmbModalToken<never, never>('Umb.Modal.User.Invite', {
-	type: 'dialog',
-	size: 'small',
+	config: {
+		type: 'dialog',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
index 0df306f7c3..c195319bcf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
@@ -10,6 +10,8 @@ export const UMB_RESEND_INVITE_TO_USER_MODAL = new UmbModalToken<
 	UmbResendInviteToUserModalData,
 	UmbResendInviteToUserModalValue
 >('Umb.Modal.User.Invite.Resend', {
-	type: 'dialog',
-	size: 'small',
+	config: {
+		type: 'dialog',
+		size: 'small',
+	},
 });
diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/modals/intro.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/modals/intro.mdx
index 6b62f53adc..df7e3ee89e 100644
--- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/modals/intro.mdx
+++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/modals/intro.mdx
@@ -46,8 +46,10 @@ export type OurSomethingPickerModalValue = {
 export const MY_SOMETHING_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
 	'Our.Modal.SomethingPicker',
 	{
-		type: 'sidebar',
-		size: 'small',
+		config: {
+			type: 'sidebar',
+			size: 'small',
+		},
 	},
 );
 ```

From 94bb651cb73ab69cfaa4c327f8e3bd9cbf001b0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:28:11 +0100
Subject: [PATCH 27/34] clean up

---
 .../core/modal/modal-manager.context.ts       |  6 ------
 .../modal-route-registration.controller.ts    |  6 ++----
 .../core/modal/modal-route-registration.ts    | 20 +++++++++----------
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index a557c2898f..202516b025 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -3,7 +3,6 @@ import { UmbModalContext, type UmbModalContextClassArgs } from './index.js';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbBasicState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export type UmbModalType = 'dialog' | 'sidebar';
 
@@ -14,15 +13,10 @@ export interface UmbModalConfig {
 }
 
 export class UmbModalManagerContext {
-	host: UmbControllerHost;
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
 	#modals = new UmbBasicState(<Array<UmbModalContext>>[]);
 	public readonly modals = this.#modals.asObservable();
 
-	constructor(host: UmbControllerHost) {
-		this.host = host;
-	}
-
 	/**
 	 * Opens a modal or sidebar modal
 	 * @public
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts
index 7b0f4d86c0..8013ef9133 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts
@@ -1,7 +1,6 @@
 // TODO: Be aware here we import a class from src!
 import { UmbModalRouteRegistration } from './modal-route-registration.js';
 import { UmbModalToken } from './token/index.js';
-import { UmbModalConfig } from './modal-manager.context.js';
 import { UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/router';
 import type { UmbControllerHostElement, UmbController } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
@@ -27,11 +26,10 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 	 * Creates an instance of UmbModalRouteRegistrationController.
 	 * @param {EventTarget} host - The host element of the modal, this is used to identify the modal.
 	 * @param {UmbModalToken} alias - The alias of the modal, this is used to identify the modal.
-	 * @param {UmbModalConfig} modalConfig - The configuration of the modal.
 	 * @memberof UmbModalRouteRegistrationController
 	 */
-	constructor(host: UmbControllerHostElement, alias: UmbModalToken<D, R> | string, modalConfig?: UmbModalConfig) {
-		super(alias, null, modalConfig);
+	constructor(host: UmbControllerHostElement, alias: UmbModalToken<D, R> | string) {
+		super(alias, null);
 
 		this.#init = new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
 			this.#routeContext = _routeContext;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
index a898cec0d2..308cc19abe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
@@ -10,10 +10,12 @@ export type UmbModalRouteBuilder = (params: { [key: string]: string | number } |
 
 export type UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue> = UmbModalTokenValue extends undefined
 	? {
+			config?: UmbModalConfig;
 			data: UmbModalTokenData;
 			value?: UmbModalTokenValue;
 	  }
 	: {
+			config?: UmbModalConfig;
 			data: UmbModalTokenData;
 			value: UmbModalTokenValue;
 	  };
@@ -38,15 +40,10 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 	#urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined;
 
 	// Notice i removed the key in the transferring to this class.
-	constructor(
-		modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenValue> | string,
-		path: string | null = null,
-		modalConfig?: UmbModalConfig,
-	) {
-		this.#key = modalConfig?.key || UmbId.new();
+	constructor(modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenValue> | string, path: string | null = null) {
+		this.#key = UmbId.new();
 		this.#modalAlias = modalAlias;
 		this.#path = path;
-		this.#modalConfig = { ...modalConfig, key: this.#key };
 	}
 
 	public get key() {
@@ -137,11 +134,14 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 
 		const modalData = this.#onSetupCallback ? await this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
-			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, {
+			const args = {
+				config: {},
 				...modalData,
-				config: this.modalConfig,
 				router,
-			});
+			};
+			args.config.key = this.#key;
+
+			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, args);
 			this.#modalManagerContext.onSubmit().then(this.#onSubmit, this.#onReject);
 			return this.#modalManagerContext;
 		}

From 816bd55e5e06405e65c44d12c3a06f038a49b77e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:48:28 +0100
Subject: [PATCH 28/34] make context self providing

---
 src/Umbraco.Web.UI.Client/src/packages/core/index.ts |  9 ++++-----
 .../src/packages/core/modal/modal-manager.context.ts | 12 ++++++++++--
 .../core/notification/notification.context.ts        | 12 +++++++++---
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
index ee42c05a4c..21661c1e53 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
@@ -12,9 +12,8 @@ import { manifests as conditionManifests } from './extension-registry/conditions
 import { manifests as cultureManifests } from './culture/manifests.js';
 import { manifests as dataTypeManifests } from './data-type/manifests.js';
 
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
+import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
+import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 import { UmbExtensionsApiInitializer, type UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
 import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -73,6 +72,6 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
 	const modalContainerElement = new UmbBackofficeModalContainerElement();
 	host.appendChild(modalContainerElement);
 
-	new UmbContextProviderController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext());
-	new UmbContextProviderController(host, UMB_MODAL_MANAGER_CONTEXT_TOKEN, new UmbModalManagerContext(host));
+	new UmbNotificationContext(host);
+	new UmbModalManagerContext(host);
 };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
index 202516b025..39dc691543 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts
@@ -3,6 +3,8 @@ import { UmbModalContext, type UmbModalContextClassArgs } from './index.js';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbBasicState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export type UmbModalType = 'dialog' | 'sidebar';
 
@@ -12,11 +14,15 @@ export interface UmbModalConfig {
 	size?: UUIModalSidebarSize;
 }
 
-export class UmbModalManagerContext {
+export class UmbModalManagerContext extends UmbContextBase<UmbModalManagerContext> {
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
 	#modals = new UmbBasicState(<Array<UmbModalContext>>[]);
 	public readonly modals = this.#modals.asObservable();
 
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_MODAL_MANAGER_CONTEXT_TOKEN);
+	}
+
 	/**
 	 * Opens a modal or sidebar modal
 	 * @public
@@ -60,4 +66,6 @@ export class UmbModalManagerContext {
 	}
 }
 
-export const UMB_MODAL_MANAGER_CONTEXT_TOKEN = new UmbContextToken<UmbModalManagerContext>('UmbModalManagerContext');
+export const UMB_MODAL_MANAGER_CONTEXT_TOKEN = new UmbContextToken<UmbModalManagerContext, UmbModalManagerContext>(
+	'UmbModalManagerContext',
+);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts
index 2da666abf8..ac2fd8276f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts
@@ -1,6 +1,8 @@
 import { UmbNotificationHandler } from './notification-handler.js';
-import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbBasicState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  * The default data of notifications
@@ -26,11 +28,15 @@ export interface UmbNotificationOptions<UmbNotificationData = UmbNotificationDef
 
 export type UmbNotificationColor = '' | 'default' | 'positive' | 'warning' | 'danger';
 
-export class UmbNotificationContext {
+export class UmbNotificationContext extends UmbContextBase<UmbNotificationContext> {
 	// Notice this cannot use UniqueBehaviorSubject as it holds a HTML Element. which cannot be Serialized to JSON (it has some circular references)
-	private _notifications = new BehaviorSubject(<Array<UmbNotificationHandler>>[]);
+	private _notifications = new UmbBasicState(<Array<UmbNotificationHandler>>[]);
 	public readonly notifications = this._notifications.asObservable();
 
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_NOTIFICATION_CONTEXT_TOKEN);
+	}
+
 	/**
 	 * @private
 	 * @param {UmbNotificationOptions<UmbNotificationData>} options

From bcb181452570f1dc3064b1924c9248d81a09f955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:48:30 +0100
Subject: [PATCH 29/34] rename config to modal

---
 .../data-type/entity-actions/create/modal/index.ts  |  2 +-
 .../packages/core/modal/modal-route-registration.ts | 13 ++++---------
 .../src/packages/core/modal/modal.context.ts        | 12 ++++++------
 .../core/modal/token/change-password-modal.token.ts |  2 +-
 .../core/modal/token/code-editor-modal.token.ts     |  2 +-
 .../core/modal/token/confirm-modal.token.ts         |  2 +-
 .../modal/token/create-dictionary-modal.token.ts    |  2 +-
 .../core/modal/token/create-document-modal.token.ts |  2 +-
 .../core/modal/token/create-user-modal.token.ts     |  2 +-
 .../modal/token/create-user-success-modal.token.ts  |  2 +-
 .../core/modal/token/current-user-modal.token.ts    |  2 +-
 ...type-picker-flow-data-type-picker-modal.token.ts |  2 +-
 .../token/data-type-picker-flow-modal.token.ts      |  2 +-
 .../modal/token/data-type-picker-modal.token.ts     |  2 +-
 .../packages/core/modal/token/debug-modal.token.ts  |  2 +-
 .../token/dictionary-item-picker-modal.token.ts     |  2 +-
 .../core/modal/token/document-picker-modal.token.ts |  2 +-
 .../modal/token/document-type-picker-modal.token.ts |  2 +-
 .../core/modal/token/embedded-media-modal.token.ts  |  2 +-
 .../entity-user-permission-settings-modal.token.ts  |  2 +-
 .../token/examine-fields-settings-modal.token.ts    |  2 +-
 .../modal/token/export-dictionary-modal.token.ts    |  2 +-
 .../packages/core/modal/token/folder-modal.token.ts |  2 +-
 .../core/modal/token/icon-picker-modal.token.ts     |  2 +-
 .../modal/token/import-dictionary-modal.token.ts    |  2 +-
 .../core/modal/token/language-picker-modal.token.ts |  2 +-
 .../core/modal/token/link-picker-modal.token.ts     |  2 +-
 .../modal/token/media-tree-picker-modal.token.ts    |  2 +-
 .../modal/token/media-type-picker-modal.token.ts    |  2 +-
 .../src/packages/core/modal/token/modal-token.ts    |  6 +++---
 .../modal/token/partial-view-picker-modal.token.ts  |  2 +-
 .../core/modal/token/permissions-modal.token.ts     |  2 +-
 .../token/property-editor-ui-picker-modal.token.ts  |  2 +-
 .../modal/token/property-settings-modal.token.ts    |  2 +-
 .../core/modal/token/section-picker-modal.token.ts  |  2 +-
 .../core/modal/token/template-modal.token.ts        |  2 +-
 .../core/modal/token/template-picker-modal.token.ts |  2 +-
 .../modal/token/user-group-picker-modal.token.ts    |  2 +-
 .../core/modal/token/user-picker-modal.token.ts     |  2 +-
 .../core/modal/token/workspace-modal.token.ts       |  2 +-
 .../entity-actions/create/modal/index.ts            |  2 +-
 .../components/log-viewer-search-input.element.ts   |  2 +-
 .../entity-actions/create/modal/index.ts            |  2 +-
 .../views/section-view-examine-searchers.ts         |  2 +-
 .../insert-menu/templating-insert-menu.element.ts   |  2 +-
 .../insert-section-modal.element.ts                 |  2 +-
 .../create/create-from-snippet.action.ts            |  2 +-
 ...sheet-workspace-view-rich-text-editor.element.ts |  2 +-
 .../templating/templates/modals/modal-tokens.ts     |  2 +-
 .../invite/modal/invite/user-invite-modal.token.ts  |  2 +-
 .../resend-invite-to-user-modal.token.ts            |  2 +-
 51 files changed, 61 insertions(+), 66 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
index 9f6918194d..934e7007aa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts
@@ -7,7 +7,7 @@ export interface UmbDataTypeCreateOptionsModalData {
 export const UMB_DATA_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbDataTypeCreateOptionsModalData>(
 	'Umb.Modal.DataTypeCreateOptions',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
index 308cc19abe..1be60b13e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts
@@ -10,12 +10,12 @@ export type UmbModalRouteBuilder = (params: { [key: string]: string | number } |
 
 export type UmbModalRouteSetupReturn<UmbModalTokenData, UmbModalTokenValue> = UmbModalTokenValue extends undefined
 	? {
-			config?: UmbModalConfig;
+			modal?: UmbModalConfig;
 			data: UmbModalTokenData;
 			value?: UmbModalTokenValue;
 	  }
 	: {
-			config?: UmbModalConfig;
+			modal?: UmbModalConfig;
 			data: UmbModalTokenData;
 			value: UmbModalTokenValue;
 	  };
@@ -24,7 +24,6 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 	#key: string;
 	#path: string | null;
 	#modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenValue> | string;
-	#modalConfig?: UmbModalConfig;
 
 	#onSetupCallback?: (
 		routingInfo: Params,
@@ -66,10 +65,6 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		this.#path = path;
 	}
 
-	public get modalConfig() {
-		return this.#modalConfig;
-	}
-
 	/**
 	 * Returns true if the modal is currently active.
 	 */
@@ -135,11 +130,11 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		const modalData = this.#onSetupCallback ? await this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
 			const args = {
-				config: {},
+				modal: {},
 				...modalData,
 				router,
 			};
-			args.config.key = this.#key;
+			args.modal.key = this.#key;
 
 			this.#modalManagerContext = modalManagerContext.open(this.#modalAlias, args);
 			this.#modalManagerContext.onSubmit().then(this.#onSubmit, this.#onReject);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
index 02fe5b8273..31783e4ef9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.context.ts
@@ -17,7 +17,7 @@ export type UmbModalContextClassArgs<
 	router?: IRouterSlot | null;
 	data?: ModalAliasTypeAsToken['DATA'];
 	value?: ModalAliasTypeAsToken['VALUE'];
-	config?: UmbModalConfig;
+	modal?: UmbModalConfig;
 };
 
 // TODO: consider splitting this into two separate handlers
@@ -41,17 +41,17 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
 		args: UmbModalContextClassArgs<UmbModalToken>,
 	) {
 		super();
-		this.key = args.config?.key || UmbId.new();
+		this.key = args.modal?.key || UmbId.new();
 		this.router = args.router ?? null;
 		this.alias = modalAlias;
 
 		if (this.alias instanceof UmbModalToken) {
-			this.type = this.alias.getDefaultConfig()?.type || this.type;
-			this.size = this.alias.getDefaultConfig()?.size || this.size;
+			this.type = this.alias.getDefaultModal()?.type || this.type;
+			this.size = this.alias.getDefaultModal()?.size || this.size;
 		}
 
-		this.type = args.config?.type || this.type;
-		this.size = args.config?.size || this.size;
+		this.type = args.modal?.type || this.type;
+		this.size = args.modal?.size || this.size;
 
 		const defaultData = this.alias instanceof UmbModalToken ? this.alias.getDefaultData() : undefined;
 		this.data = Object.freeze({ ...defaultData, ...args.data } as ModalPreset);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
index 4864e9a8aa..78b0faa8d2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
@@ -12,7 +12,7 @@ export interface UmbChangePasswordModalValue {
 export const UMB_CHANGE_PASSWORD_MODAL = new UmbModalToken<UmbChangePasswordModalData, UmbChangePasswordModalValue>(
 	'Umb.Modal.ChangePassword',
 	{
-		config: {
+		modal: {
 			type: 'dialog',
 		},
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
index ea97ab3991..d722df2d8d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
@@ -18,7 +18,7 @@ export interface UmbCodeEditorModalValue {
 export const UMB_CODE_EDITOR_MODAL = new UmbModalToken<UmbCodeEditorModalData, UmbCodeEditorModalValue>(
 	'Umb.Modal.CodeEditor',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'large',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
index 3a43b3ee7a..9cb6174e34 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
@@ -11,7 +11,7 @@ export interface UmbConfirmModalData {
 export type UmbConfirmModalValue = undefined;
 
 export const UMB_CONFIRM_MODAL = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalValue>('Umb.Modal.Confirm', {
-	config: {
+	modal: {
 		type: 'dialog',
 	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
index 77004c37f0..a439e1af7b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
@@ -15,7 +15,7 @@ export const UMB_CREATE_DICTIONARY_MODAL = new UmbModalToken<
 	UmbCreateDictionaryModalData,
 	UmbCreateDictionaryModalValue
 >('Umb.Modal.CreateDictionary', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
index 78a959a330..7847cd7f5d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
@@ -11,7 +11,7 @@ export interface UmbCreateDocumentModalValue {
 export const UMB_CREATE_DOCUMENT_MODAL = new UmbModalToken<UmbCreateDocumentModalData, UmbCreateDocumentModalValue>(
 	'Umb.Modal.CreateDocument',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
index f697ed8e9b..b017d23706 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-modal.token.ts
@@ -1,7 +1,7 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_CREATE_USER_MODAL = new UmbModalToken('Umb.Modal.User.Create', {
-	config: {
+	modal: {
 		type: 'dialog',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
index 6ef0cab954..8a7dc3046e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-user-success-modal.token.ts
@@ -11,7 +11,7 @@ export const UMB_CREATE_USER_SUCCESS_MODAL = new UmbModalToken<
 	UmbCreateUserSuccessModalData,
 	UmbCreateUserSuccessModalValue
 >('Umb.Modal.User.CreateSuccess', {
-	config: {
+	modal: {
 		type: 'dialog',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
index 204d89c285..8ec32b9991 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/current-user-modal.token.ts
@@ -1,7 +1,7 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_CURRENT_USER_MODAL = new UmbModalToken('Umb.Modal.User.Current', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
index b9ce834a7c..d9712ad265 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
@@ -15,7 +15,7 @@ export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToke
 	UmbDataTypePickerFlowDataTypePickerModalData,
 	UmbDataTypePickerFlowDataTypePickerModalValue
 >('Umb.Modal.DataTypePickerFlowDataTypePicker', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
index e60d0a84e8..8e9250b345 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
@@ -12,7 +12,7 @@ export const UMB_DATA_TYPE_PICKER_FLOW_MODAL = new UmbModalToken<
 	UmbDataTypePickerFlowModalData,
 	UmbDataTypePickerFlowModalValue
 >('Umb.Modal.DataTypePickerFlow', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
index 5f8cee9f4c..4be82b150a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
@@ -7,7 +7,7 @@ export type UmbDataTypePickerModalValue = UmbPickerModalValue;
 export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerModalData, UmbDataTypePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
index c81e2ee488..504df89c36 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/debug-modal.token.ts
@@ -6,7 +6,7 @@ export interface UmbContextDebuggerModalData {
 }
 
 export const UMB_CONTEXT_DEBUGGER_MODAL = new UmbModalToken<UmbContextDebuggerModalData>('Umb.Modal.ContextDebugger', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
index e9550cb04c..400dbe28bd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
@@ -8,7 +8,7 @@ export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken<
 	UmbDictionaryItemPickerModalData,
 	UmbDictionaryItemPickerModalValue
 >('Umb.Modal.TreePicker', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
index 90f33f7d44..b4b455f429 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
@@ -7,7 +7,7 @@ export type UmbDocumentPickerModalValue = UmbPickerModalValue;
 export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModalData, UmbDocumentPickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
index 9c7d87dcd0..a835a65d21 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
@@ -8,7 +8,7 @@ export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken<
 	UmbDocumentTypePickerModalData,
 	UmbDocumentTypePickerModalValue
 >('Umb.Modal.TreePicker', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
index 4ed645cfd8..a8ca58d4ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
@@ -31,7 +31,7 @@ export interface UmbEmbeddedMediaModalValue extends UmbEmbeddedMediaModalData {
 export const UMB_EMBEDDED_MEDIA_MODAL = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue>(
 	'Umb.Modal.EmbeddedMedia',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'medium',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
index 7eb6bd7e67..07db00c899 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/entity-user-permission-settings-modal.token.ts
@@ -15,7 +15,7 @@ export const UMB_ENTITY_USER_PERMISSION_MODAL = new UmbModalToken<
 	UmbEntityUserPermissionSettingsModalData,
 	UmbEntityUserPermissionSettingsModalValue
 >('Umb.Modal.EntityUserPermissionSettings', {
-	config: {
+	modal: {
 		type: 'sidebar',
 	},
 });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
index e80dc9570d..0ce7c949bd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
@@ -15,7 +15,7 @@ export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL = new UmbModalToken<
 	UmbExamineFieldsSettingsModalData,
 	UmbExamineFieldsSettingsModalValue
 >('Umb.Modal.ExamineFieldsSettings', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
index d8ea7e7bd5..efe83cd67b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
@@ -12,7 +12,7 @@ export const UMB_EXPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbExportDictionaryModalData,
 	UmbExportDictionaryModalValue
 >('Umb.Modal.ExportDictionary', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
index f68430b87f..1e7df95db1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
@@ -12,7 +12,7 @@ export interface UmbFolderModalValue {
 }
 
 export const UMB_FOLDER_MODAL = new UmbModalToken<UmbFolderModalData, UmbFolderModalValue>('Umb.Modal.Folder', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
index 1b3ba370ae..6ac5b7b155 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
@@ -10,7 +10,7 @@ export interface UmbIconPickerModalValue {
 export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalValue>(
 	'Umb.Modal.IconPicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'medium',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
index da72b0d74d..f8d09ce077 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
@@ -14,7 +14,7 @@ export const UMB_IMPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbImportDictionaryModalData,
 	UmbImportDictionaryModalValue
 >('Umb.Modal.ImportDictionary', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
index 9ccc9e854c..da7ce1503a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
@@ -13,7 +13,7 @@ export interface UmbLanguagePickerModalValue {
 export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalValue>(
 	'Umb.Modal.LanguagePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
index 4a5c07be5a..7c3b0f935d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
@@ -29,7 +29,7 @@ export interface UmbLinkPickerConfig {
 export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
 	'Umb.Modal.LinkPicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
index 424842082e..e4718f13eb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
@@ -7,7 +7,7 @@ export type UmbMediaTreePickerModalValue = UmbPickerModalValue;
 export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken<UmbMediaTreePickerModalData, UmbMediaTreePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
index a11019e664..0e28141d93 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-type-picker-modal.token.ts
@@ -7,7 +7,7 @@ export type UmbMediaTypePickerModalValue = UmbPickerModalValue;
 export const UMB_MEDIA_TYPE_PICKER_MODAL = new UmbModalToken<UmbMediaTypePickerModalData, UmbMediaTypePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
index 983b16280e..c5d6cfe065 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
@@ -1,7 +1,7 @@
 import { UmbModalConfig } from '../modal-manager.context.js';
 
 export interface UmbModalTokenDefaults<ModalDataType extends object = object, ModalValueType = unknown> {
-	config?: UmbModalConfig;
+	modal?: UmbModalConfig;
 	data?: ModalDataType;
 	value?: ModalValueType;
 }
@@ -51,8 +51,8 @@ export class UmbModalToken<ModalDataType extends object = object, ModalValueType
 		return this.#alias;
 	}
 
-	public getDefaultConfig(): UmbModalConfig | undefined {
-		return this.#defaults?.config;
+	public getDefaultModal(): UmbModalConfig | undefined {
+		return this.#defaults?.modal;
 	}
 
 	public getDefaultData(): ModalDataType | undefined {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
index ac9a0d19c0..766f983f0e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
@@ -15,7 +15,7 @@ export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken<
 	UmbPartialViewPickerModalData,
 	UmbPartialViewPickerModalValue
 >(UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS, {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
index d4cc006eec..56aa499f4e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/permissions-modal.token.ts
@@ -10,7 +10,7 @@ export type UmbPermissionsModalValue = undefined;
 export const UMB_PERMISSIONS_MODAL = new UmbModalToken<UmbPermissionsModalData, UmbPermissionsModalValue>(
 	'Umb.Modal.Permissions',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 		},
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
index 6963811185..2775f58952 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
@@ -12,7 +12,7 @@ export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL = new UmbModalToken<
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalValue
 >('Umb.Modal.PropertyEditorUiPicker', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
index 6b3782c884..a1cebb0b78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
@@ -10,7 +10,7 @@ export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<
 	UmbPropertySettingsModalData,
 	UmbPropertySettingsModalValue
 >('Umb.Modal.PropertySettings', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
index 15bdaf4cb5..21eb129115 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
@@ -12,7 +12,7 @@ export interface UmbSectionPickerModalValue {
 export const UMB_SECTION_PICKER_MODAL = new UmbModalToken<UmbSectionPickerModalData, UmbSectionPickerModalValue>(
 	'Umb.Modal.SectionPicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
index dd2a9a6efc..5cce82fc7d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
@@ -10,7 +10,7 @@ export interface UmbTemplateModalValue {
 }
 
 export const UMB_TEMPLATE_MODAL = new UmbModalToken<UmbTemplateModalData, UmbTemplateModalValue>('Umb.Modal.Template', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'full',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
index ec91504c78..095029bd58 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
@@ -7,7 +7,7 @@ export type UmbTemplatePickerModalValue = UmbPickerModalValue;
 export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModalData, UmbTemplatePickerModalValue>(
 	'Umb.Modal.TreePicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
index 3026f78d90..0d37c37e8c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-group-picker-modal.token.ts
@@ -3,7 +3,7 @@ import { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco
 export const UMB_USER_GROUP_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<any>, UmbPickerModalValue>(
 	'Umb.Modal.UserGroupPicker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
index 8fd8b7439e..5324fc1cbd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
@@ -10,7 +10,7 @@ export interface UmbUserPickerModalValue {
 export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbUserPickerModalData, UmbUserPickerModalValue>(
 	'Umb.Modal.User.Picker',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
index 5b49c068cd..38c25a9894 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts
@@ -14,7 +14,7 @@ export type UmbWorkspaceValue =
 	| undefined;
 
 export const UMB_WORKSPACE_MODAL = new UmbModalToken<UmbWorkspaceData, UmbWorkspaceValue>('Umb.Modal.Workspace', {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'large',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
index 48322dad88..2ad6689d9c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/index.ts
@@ -7,7 +7,7 @@ export interface UmbDocumentTypeCreateOptionsModalData {
 export const UMB_DOCUMENT_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbDocumentTypeCreateOptionsModalData>(
 	'Umb.Modal.DocumentTypeCreateOptions',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
index 6aeca4f42e..da76b9abfe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -21,7 +21,7 @@ export interface UmbContextSaveSearchModalData {
 export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken<UmbContextSaveSearchModalData>(
 	'Umb.Modal.LogViewer.SaveSearch',
 	{
-		config: {
+		modal: {
 			type: 'dialog',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
index 8b55e6d1a4..c7d77b6098 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/modal/index.ts
@@ -7,7 +7,7 @@ export interface UmbMediaTypeCreateOptionsModalData {
 export const UMB_MEDIA_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbMediaTypeCreateOptionsModalData>(
 	'Umb.Modal.MediaTypeCreateOptions',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
index 75bcd37ce2..cedd91859e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
@@ -163,7 +163,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 									label="Open sidebar to see all fields"
 									@click="${() =>
 										this._modalContext?.open('umb-modal-element-fields-viewer', {
-											config: {
+											modal: {
 												type: 'sidebar',
 												size: 'medium',
 											},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
index ba8845118b..cacdd87ed4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
@@ -19,7 +19,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>(
 	UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS,
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
index 42747838ae..d4cc57f487 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -11,7 +11,7 @@ import type { UmbInsertSectionCheckboxElement } from './insert-section-input.ele
 export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken<object, UmbInsertSectionModalModalValue>(
 	UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS,
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 			size: 'small',
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
index 9b4d08be3b..30deca1f78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
@@ -13,7 +13,7 @@ export type UmbConfirmModalValue = undefined;
 export const UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL = new UmbModalToken<UmbCreateFromSnippetPartialViewModalData, string>(
 	'Umb.Modal.CreateFromSnippetPartialView',
 	{
-		config: {
+		modal: {
 			type: 'sidebar',
 		},
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index e1029f5873..005410cbcb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -15,7 +15,7 @@ export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbMo
 	never,
 	StylesheetRichTextEditorStyleModalValue
 >(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'medium',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
index 1b03343224..3ab0c31a21 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
@@ -9,7 +9,7 @@ export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken<
 	TemplateQueryBuilderModalData,
 	UmbTemplateQueryBuilderModalValue
 >(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
-	config: {
+	modal: {
 		type: 'sidebar',
 		size: 'large',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
index f53848158a..9df9ee03f3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.token.ts
@@ -1,7 +1,7 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export const UMB_INVITE_USER_MODAL = new UmbModalToken<never, never>('Umb.Modal.User.Invite', {
-	config: {
+	modal: {
 		type: 'dialog',
 		size: 'small',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
index c195319bcf..5698809f97 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts
@@ -10,7 +10,7 @@ export const UMB_RESEND_INVITE_TO_USER_MODAL = new UmbModalToken<
 	UmbResendInviteToUserModalData,
 	UmbResendInviteToUserModalValue
 >('Umb.Modal.User.Invite.Resend', {
-	config: {
+	modal: {
 		type: 'dialog',
 		size: 'small',
 	},

From 3590ed1e48085ee037e2a8fe443a50f3e53cc811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:52:04 +0100
Subject: [PATCH 30/34] fix notification context

---
 .../packages/core/notification/notification.context.test.ts   | 3 ++-
 .../core/notification/stories/notification.stories.ts         | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
index 4df03c16dd..adf5fe6305 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
@@ -1,12 +1,13 @@
 import { expect } from '@open-wc/testing';
 
 import { UmbNotificationHandler, UmbNotificationContext } from './index.js';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
 describe('UmbNotificationContext', () => {
 	let notificationContext: UmbNotificationContext;
 
 	beforeEach(async () => {
-		notificationContext = new UmbNotificationContext();
+		notificationContext = new UmbNotificationContext(new UmbControllerHostElement());
 	});
 
 	describe('Public API', () => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/stories/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/stories/notification.stories.ts
index c8a9588ea9..2210177eda 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/notification/stories/notification.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/notification/stories/notification.stories.ts
@@ -9,7 +9,9 @@ export default {
 	component: 'umb-notification-layout-default',
 	decorators: [
 		(story) =>
-			html`<umb-context-provider key="UmbNotificationContext" .value=${new UmbNotificationContext()}>
+			html`<umb-context-provider
+				key="UmbNotificationContext"
+				.create=${(host: any) => new UmbNotificationContext(host)}>
 				${story()}
 			</umb-context-provider>`,
 	],

From 573006a66a275c027283c1d9582d6aafca0dac97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 13:54:37 +0100
Subject: [PATCH 31/34] remove comments

---
 .../libs/extension-api/functions/create-extension-api.test.ts  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts
index d8d961aec4..cabef4207a 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts
@@ -101,7 +101,4 @@ describe('Extension-Api: Create Extension Api', () => {
 			expect(api.isValidClassInstance()).to.be.true;
 		}
 	});
-
-	//TODO: Test apiJs
-	//TODO: Test js
 });

From 00d648f0b5c4108260510cc476f7583428004d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 14:01:14 +0100
Subject: [PATCH 32/34] rename _value to value

---
 ...ker-flow-data-type-picker-modal.element.ts |  4 +-
 .../data-type-picker-flow-modal.element.ts    |  4 +-
 ...property-editor-ui-picker-modal.element.ts |  4 +-
 .../code-editor/code-editor-modal.element.ts  |  2 +-
 .../embedded-media-modal.element.ts           |  2 +-
 .../property-settings-modal.element.ts        | 60 +++++++++----------
 .../section-picker-modal.element.ts           |  2 +-
 .../common/template/template-modal.element.ts |  2 +-
 .../tree-picker/tree-picker-modal.element.ts  |  2 +-
 .../core/modal/modal-element.element.ts       |  6 +-
 .../create/create-dictionary-modal.element.ts |  2 +-
 .../export/export-dictionary-modal.element.ts |  2 +-
 .../import/import-dictionary-modal.element.ts |  2 +-
 .../create/create-document-modal.element.ts   |  2 +-
 .../log-viewer-search-input-modal.element.ts  |  2 +-
 .../fields-settings-modal.element.ts          |  6 +-
 .../language-picker-modal.element.ts          |  4 +-
 .../insert-choose-type-sidebar.element.ts     |  4 +-
 .../insert-section-modal.element.ts           |  2 +-
 .../partial-view-picker-modal.element.ts      |  4 +-
 .../create/create-from-snippet.modal.ts       |  2 +-
 ...-rich-text-editor-style-sidebar.element.ts | 14 ++---
 .../query-builder/query-builder.element.ts    |  2 +-
 .../change-password-modal.element.ts          |  2 +-
 .../user-group-picker-modal.element.ts        |  2 +-
 ...-user-permission-settings-modal.element.ts |  2 +-
 .../user-picker/user-picker-modal.element.ts  |  4 +-
 27 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
index af54a55795..380736a4f3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
@@ -60,13 +60,13 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 
 	private _handleClick(dataType: UmbDataTypeDetailModel) {
 		if (dataType.unique) {
-			this._value = { dataTypeId: dataType.unique };
+			this.value = { dataTypeId: dataType.unique };
 			this.modalContext?.submit();
 		}
 	}
 
 	private _handleCreate() {
-		this._value = { createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias };
+		this.value = { createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index 5cd185fe4a..572e32629e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -121,7 +121,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	}
 
 	private _select(id: string | undefined) {
-		this._value = { selection: id ? [id] : [] };
+		this.value = { selection: id ? [id] : [] };
 	}
 
 	private _handleFilterInput(event: UUIInputEvent) {
@@ -271,7 +271,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 				dataTypes,
 				(dataType) => dataType.id,
 				(dataType) =>
-					html`<li class="item" ?selected=${this._value.selection.includes(dataType.id!)}>
+					html`<li class="item" ?selected=${this.value.selection.includes(dataType.id!)}>
 						<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
 							<div class="item-content">
 								<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index f5f0c44dd2..47727fa36a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -57,7 +57,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 	}
 
 	#select(alias: string) {
-		this._value = { selection: [alias] };
+		this.value = { selection: [alias] };
 	}
 
 	#handleFilterInput(event: UUIInputEvent) {
@@ -122,7 +122,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<
 				groupItems,
 				(propertyEditorUI) => propertyEditorUI.alias,
 				(propertyEditorUI) =>
-					html` <li class="item" ?selected=${this._value.selection.includes(propertyEditorUI.alias)}>
+					html` <li class="item" ?selected=${this.value.selection.includes(propertyEditorUI.alias)}>
 						<button type="button" @click="${() => this.#handleClick(propertyEditorUI)}">
 							<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
 							${propertyEditorUI.meta.label || propertyEditorUI.name}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
index 4d62a0913d..2a1c8bd9b8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
@@ -17,7 +17,7 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 	}
 
 	#handleConfirm() {
-		this._value = { content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' };
+		this.value = { content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
index 81416e9efc..a51a7288bc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
@@ -29,7 +29,7 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<
 	#embedResult!: OEmbedResult;
 
 	#handleConfirm() {
-		this._value = {
+		this.value = {
 			preview: this.#embedResult.markup,
 			originalWidth: this._model.width,
 			originalHeight: this._model.originalHeight,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
index 2b23d69ac0..d9963c9e03 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
@@ -63,9 +63,9 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			);
 		});
 
-		this._originalPropertyData = this._value;
+		this._originalPropertyData = this.value;
 
-		const regEx = this._value.validation?.regEx ?? null;
+		const regEx = this.value.validation?.regEx ?? null;
 		if (regEx) {
 			const newlySelected = this._customValidationOptions.find((option) => {
 				option.selected = option.value === regEx;
@@ -74,11 +74,11 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			if (newlySelected === undefined) {
 				this._customValidationOptions[4].selected = true;
 				this.updateValue({
-					validation: { ...this._value.validation, regEx: this._customValidationOptions[4].value },
+					validation: { ...this.value.validation, regEx: this._customValidationOptions[4].value },
 				});
 			} else {
 				this.updateValue({
-					validation: { ...this._value.validation, regEx: regEx },
+					validation: { ...this.value.validation, regEx: regEx },
 				});
 			}
 		}
@@ -106,14 +106,14 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	}
 
 	#onNameChange(event: UUIInputEvent) {
-		const oldName = this._value.name;
-		const oldAlias = this._value.alias;
+		const oldName = this.value.name;
+		const oldAlias = this.value.alias;
 		this.updateValue({ name: event.target.value.toString() });
 		if (this._aliasLocked) {
 			const expectedOldAlias = generateAlias(oldName ?? '');
 			// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
 			if (expectedOldAlias === oldAlias) {
-				this.updateValue({ alias: generateAlias(this._value.name ?? '') });
+				this.updateValue({ alias: generateAlias(this.value.name ?? '') });
 			}
 		}
 	}
@@ -130,33 +130,33 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 
 	#onMandatoryChange(event: UUIBooleanInputEvent) {
 		const mandatory = event.target.checked;
-		this._value.validation!.mandatory = mandatory;
+		this.value.validation!.mandatory = mandatory;
 		this.updateValue({
-			validation: { ...this._value.validation, mandatory },
+			validation: { ...this.value.validation, mandatory },
 		});
 	}
 
 	#onMandatoryMessageChange(event: UUIInputEvent) {
 		const mandatoryMessage = event.target.value.toString();
 		this.updateValue({
-			validation: { ...this._value.validation, mandatoryMessage },
+			validation: { ...this.value.validation, mandatoryMessage },
 		});
 	}
 
 	#setAppearanceNormal() {
-		const currentValue = this._value.appearance?.labelOnTop;
+		const currentValue = this.value.appearance?.labelOnTop;
 		if (currentValue !== true) return;
 
 		this.updateValue({
-			appearance: { ...this._value.appearance, labelOnTop: false },
+			appearance: { ...this.value.appearance, labelOnTop: false },
 		});
 	}
 	#setAppearanceTop() {
-		const currentValue = this._value.appearance?.labelOnTop;
+		const currentValue = this.value.appearance?.labelOnTop;
 		if (currentValue === true) return;
 
 		this.updateValue({
-			appearance: { ...this._value.appearance, labelOnTop: true },
+			appearance: { ...this.value.appearance, labelOnTop: true },
 		});
 	}
 
@@ -173,7 +173,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		});
 		this.requestUpdate('_customValidationOptions');
 		this.updateValue({
-			validation: { ...this._value.validation, regEx },
+			validation: { ...this.value.validation, regEx },
 		});
 	}
 
@@ -189,13 +189,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			this.requestUpdate('_customValidationOptions');
 		}
 		this.updateValue({
-			validation: { ...this._value.validation, regEx },
+			validation: { ...this.value.validation, regEx },
 		});
 	}
 	#onValidationMessageChange(event: UUIInputEvent) {
 		const regExMessage = event.target.value.toString();
 		this.updateValue({
-			validation: { ...this._value.validation, regExMessage },
+			validation: { ...this.value.validation, regExMessage },
 		});
 	}
 
@@ -222,7 +222,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="name-input"
 										name="name"
 										@input=${this.#onNameChange}
-										.value=${this._value.name}
+										.value=${this.value.name}
 										placeholder="Enter a name...">
 										<!-- TODO: validation for bad characters -->
 									</uui-input>
@@ -230,7 +230,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="alias-input"
 										name="alias"
 										@input=${this.#onAliasChange}
-										.value=${this._value.alias}
+										.value=${this.value.alias}
 										placeholder="Enter alias..."
 										?disabled=${this._aliasLocked}>
 										<!-- TODO: validation for bad characters -->
@@ -242,10 +242,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										id="description-input"
 										name="description"
 										placeholder="Enter description..."
-										.value=${this._value.description}></uui-textarea>
+										.value=${this.value.description}></uui-textarea>
 								</div>
 								<umb-data-type-flow-input
-									.value=${this._value.dataTypeId ?? ''}
+									.value=${this.value.dataTypeId ?? ''}
 									@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
 								<hr />
 								<div class="container">
@@ -275,7 +275,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 		return html`<button
 			type="button"
 			@click=${this.#setAppearanceNormal}
-			class="appearance left ${this._value.appearance?.labelOnTop ? '' : 'selected'}">
+			class="appearance left ${this.value.appearance?.labelOnTop ? '' : 'selected'}">
 			<svg width="200" height="48" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<rect width="94" height="14" rx="6" fill="currentColor" />
 				<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
@@ -290,7 +290,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 			<button
 				type="button"
 				@click=${this.#setAppearanceTop}
-				class="appearance top ${this._value.appearance?.labelOnTop ? 'selected' : ''}">
+				class="appearance top ${this.value.appearance?.labelOnTop ? 'selected' : ''}">
 				<svg width="140" height="48" viewBox="0 0 140 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<rect width="90" height="14" rx="6" fill="currentColor" />
 					<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
@@ -307,13 +307,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				<uui-toggle
 					@change=${this.#onMandatoryChange}
 					id="mandatory"
-					.checked=${this._value.validation?.mandatory ?? false}
+					.checked=${this.value.validation?.mandatory ?? false}
 					slot="editor"></uui-toggle>
 			</div>
-			${this._value.validation?.mandatory
+			${this.value.validation?.mandatory
 				? html`<uui-input
 						name="mandatory-message"
-						value=${this._value.validation?.mandatoryMessage ?? ''}
+						value=${this.value.validation?.mandatoryMessage ?? ''}
 						@change=${this.#onMandatoryMessageChange}
 						style="margin-top: var(--uui-size-space-1)"
 						id="mandatory-message"
@@ -327,17 +327,17 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				@change=${this.#onCustomValidationChange}
 				.options=${this._customValidationOptions}></uui-select>
 
-			${this._value.validation?.regEx !== null
+			${this.value.validation?.regEx !== null
 				? html`
 						<uui-input
 							name="pattern"
 							style="margin-bottom: var(--uui-size-space-1); margin-top: var(--uui-size-space-5);"
 							@change=${this.#onValidationRegExChange}
-							.value=${this._value.validation?.regEx ?? ''}></uui-input>
+							.value=${this.value.validation?.regEx ?? ''}></uui-input>
 						<uui-textarea
 							name="pattern-message"
 							@change=${this.#onValidationMessageChange}
-							.value=${this._value.validation?.regExMessage ?? ''}></uui-textarea>
+							.value=${this.value.validation?.regExMessage ?? ''}></uui-textarea>
 				  `
 				: nothing} `;
 	}
@@ -354,7 +354,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 	#renderVaryByCulture() {
 		return html`<uui-toggle
 			@change=${this.#onVaryByCultureChange}
-			.checked=${this._value.variesByCulture ?? false}
+			.checked=${this.value.variesByCulture ?? false}
 			label="Vary by culture"></uui-toggle> `;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
index 186ea3091e..b94ebd19b0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
@@ -33,7 +33,7 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 	}
 
 	#submit() {
-		this._value = {
+		this.value = {
 			selection: this.#selectionManager.getSelection(),
 		};
 		this.modalContext?.submit();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
index 203783fac1..975dee1733 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
@@ -52,7 +52,7 @@ export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModa
 
 		this.#saveTemplate();
 
-		this._value = { id: this._template.id };
+		this.value = { id: this._template.id };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index f9499a1a55..2b0a0c991a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -32,7 +32,7 @@ export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentation
 	#onSelectionChange(e: CustomEvent) {
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		this._value = { selection: element.selection };
+		this.value = { selection: element.selection };
 		this.dispatchEvent(new UmbSelectionChangeEvent());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
index beecfad3c1..f144c91b25 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts
@@ -28,7 +28,7 @@ export abstract class UmbModalBaseElement<
 				(value) => {
 					const oldValue = this.#value;
 					this.#value = value;
-					this.requestUpdate('_value', oldValue);
+					this.requestUpdate('value', oldValue);
 					// Idea: we could implement a callback method on class.
 				},
 				'observeModalContextValue',
@@ -47,10 +47,10 @@ export abstract class UmbModalBaseElement<
 	private _data?: ModalDataType | undefined;
 
 	@state()
-	public get _value(): ModalValueType {
+	public get value(): ModalValueType {
 		return this.#value;
 	}
-	public set _value(value: ModalValueType) {
+	public set value(value: ModalValueType) {
 		this.#modalContext?.setValue(value);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
index 9535bddadc..41b39096a4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
@@ -41,7 +41,7 @@ export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 		const formData = new FormData(form);
 		const name = formData.get('name') as string;
 
-		this._value = {
+		this.value = {
 			name,
 			parentId: this.data?.parentId ?? null,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
index f3df5903bc..b8b0a9199c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
@@ -30,7 +30,7 @@ export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
 
 		const formData = new FormData(form);
 
-		this._value = { includeChildren: (formData.get('includeDescendants') as string) === 'on' };
+		this.value = { includeChildren: (formData.get('includeDescendants') as string) === 'on' };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
index d751979bf1..56ba2b5e02 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
@@ -71,7 +71,7 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 		const { error } = await this.#dictionaryRepository.import(this._temporaryFileId, this._parentId);
 		if (error) return;
 
-		this._value = { entityItems: this.#createTreeEntitiesFromTempFile(), parentId: this._parentId };
+		this.value = { entityItems: this.#createTreeEntitiesFromTempFile(), parentId: this._parentId };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
index bc6b0cdba1..53e436904a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
@@ -58,7 +58,7 @@ export class UmbCreateDocumentModalElement extends UmbModalBaseElement<
 		const target = event.target as HTMLButtonElement;
 		const documentTypeId = target.dataset.id;
 		if (!documentTypeId) throw new Error('No document type id found');
-		this._value = { documentTypeId };
+		this.value = { documentTypeId };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
index 0e63b8d393..50fef3e845 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
@@ -16,7 +16,7 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 	}
 
 	private _handleSubmit() {
-		this._value = { name: this._input.value as string, query: this.data?.query };
+		this.value = { name: this._input.value as string, query: this.data?.query };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
index b1a9aa4e61..9259f65c76 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings-modal.element.ts
@@ -12,18 +12,18 @@ export default class UmbExamineFieldsSettingsModalElement extends UmbModalBaseEl
 	UmbExamineFieldsSettingsModalValue
 > {
 	render() {
-		if (this._value.fields) {
+		if (this.value.fields) {
 			return html`
 				<uui-dialog-layout headline="Show fields">
 					<uui-scroll-container id="field-settings">
 						<span>
-							${Object.values(this._value.fields).map((field, index) => {
+							${Object.values(this.value.fields).map((field, index) => {
 								return html`<uui-toggle
 										name="${field.name}"
 										label="${field.name}"
 										.checked="${field.exposed}"
 										@change="${() => {
-											this._value.fields ? (this._value.fields[index].exposed = !field.exposed) : '';
+											this.value.fields ? (this.value.fields[index].exposed = !field.exposed) : '';
 										}}"></uui-toggle>
 									<br />`;
 							})}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
index b084fdade8..dcce820c0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
@@ -23,7 +23,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
 	connectedCallback(): void {
 		super.connectedCallback();
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this._value?.selection ?? []);
+		this.#selectionManager.setSelection(this.value?.selection ?? []);
 	}
 
 	async firstUpdated() {
@@ -40,7 +40,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
 	}
 
 	#submit() {
-		this._value = { selection: this.#selectionManager.getSelection() };
+		this.value = { selection: this.#selectionManager.getSelection() };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
index ec074efa1e..20fd2681c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
@@ -48,7 +48,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 		this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
 		this.#openModal?.onSubmit().then((partialViewPickerModalValue) => {
 			if (partialViewPickerModalValue) {
-				this._value = {
+				this.value = {
 					type: CodeSnippetType.partialView,
 					value: partialViewPickerModalValue.selection[0],
 				};
@@ -65,7 +65,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 		});
 		this.#openModal?.onSubmit().then((dictionaryItemPickerModalValue) => {
 			if (dictionaryItemPickerModalValue) {
-				this._value = { value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem };
+				this.value = { value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem };
 				this.modalContext?.submit();
 			}
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
index d4cc57f487..22017d6972 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -67,7 +67,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 	#submit() {
 		const value = this.selectedCheckbox?.snippet;
 		if (this.selectedCheckbox?.validate()) {
-			this._value = { value: value ?? '' };
+			this.value = { value: value ?? '' };
 			this.modalContext?.submit();
 		}
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
index a30dbcc3ae..170197832b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
@@ -20,7 +20,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._selection = this._value?.selection ?? [];
+		this._selection = this.value?.selection ?? [];
 		this._multiple = this.data?.multiple ?? true;
 	}
 
@@ -32,7 +32,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 	}
 
 	private _submit() {
-		this._value = { selection: this._selection };
+		this.value = { selection: this._selection };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
index 9de01e0661..850cbd7492 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts
@@ -18,7 +18,7 @@ export default class UmbPartialViewCreateFromSnippetModalElement extends UmbModa
 	}
 
 	private _submit(snippetName: string) {
-		this._value = snippetName;
+		this.value = snippetName;
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
index 9e2c693ff7..de0dae3598 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
@@ -17,7 +17,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 
 		this.updateValue({
 			rule: {
-				...this._value.rule,
+				...this.value.rule,
 				name,
 			},
 		});
@@ -28,7 +28,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 
 		this.updateValue({
 			rule: {
-				...this._value.rule,
+				...this.value.rule,
 				selector,
 			},
 		});
@@ -39,7 +39,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 
 		this.updateValue({
 			rule: {
-				...this._value.rule,
+				...this.value.rule,
 				styles,
 			},
 		});
@@ -58,7 +58,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="name"
 										name="name"
-										.value=${this._value.rule?.name ?? ''}
+										.value=${this.value.rule?.name ?? ''}
 										label="Rule name"
 										required
 										@input=${this.#updateName}>
@@ -70,7 +70,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="selector"
 										name="selector"
-										.value=${this._value.rule?.selector ?? ''}
+										.value=${this.value.rule?.selector ?? ''}
 										label="Rule selector"
 										@input=${this.#updateSelector}
 										required>
@@ -85,14 +85,14 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 										@input=${this.#updateStyles}
 										id="styles"
 										name="styles"
-										.value=${this._value.rule?.styles ?? ''}
+										.value=${this.value.rule?.styles ?? ''}
 										label="Rule styles">
 									</uui-textarea>
 								</uui-form-layout-item>
 								<uui-form-layout-item>
 									<uui-label for="styles" slot="label" required="">Preview</uui-label>
 									<span slot="description">How the text will look like in the rich text editor.</span>
-									<div style="${ifDefined(this._value.rule?.styles)}">
+									<div style="${ifDefined(this.value.rule?.styles)}">
 										a b c d e f g h i j k l m n o p q r s t u v w x t z
 										<br />
 										A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
index 2d1635019a..2dfc812ce9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
@@ -99,7 +99,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 		});
 		if (data) {
 			this._templateQuery = { ...data };
-			this._value = { value: this._templateQuery?.queryExpression ?? '' };
+			this.value = { value: this._templateQuery?.queryExpression ?? '' };
 		}
 	};
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
index 2afd9bd4a5..4b6f32389b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
@@ -42,7 +42,7 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement<
 		const newPassword = formData.get('newPassword') as string;
 		//const confirmPassword = formData.get('confirmPassword') as string;
 
-		this._value = { oldPassword, newPassword };
+		this.value = { oldPassword, newPassword };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
index f70a5e65a1..7cd074e9e6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -22,7 +22,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
 
 		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this._value?.selection ?? []);
+		this.#selectionManager.setSelection(this.value?.selection ?? []);
 		this.observe(this.#selectionManager.selection, (selection) => this.updateValue({ selection }), 'selectionObserver');
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
index de569987ee..1c049604f4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
@@ -29,7 +29,7 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbModalBaseEle
 	_allowedPermissions: Array<string> = [];
 
 	private _handleConfirm() {
-		this._value = { allowedPermissions: this._allowedPermissions };
+		this.value = { allowedPermissions: this._allowedPermissions };
 		this.modalContext?.submit();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
index 3e1a3195d2..2960354e57 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts
@@ -18,7 +18,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 
 		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this._value?.selection ?? []);
+		this.#selectionManager.setSelection(this.value?.selection ?? []);
 	}
 
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
@@ -36,7 +36,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 	}
 
 	#submit() {
-		this._value = { selection: this.#selectionManager.getSelection() };
+		this.value = { selection: this.#selectionManager.getSelection() };
 		this.modalContext?.submit();
 	}
 

From a0b5d272379d014bd71eaa069619cbb02c37d446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 14:05:28 +0100
Subject: [PATCH 33/34] move manifest setting

---
 .../src/packages/core/modal/modal.element.ts                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.element.ts
index a66bb6a7e5..3306512497 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.element.ts
@@ -107,9 +107,9 @@ export class UmbModalElement extends UmbLitElement {
 		const innerElement = await createExtensionElement(manifest);
 
 		if (innerElement) {
+			innerElement.manifest = manifest;
 			innerElement.data = this.#modalContext!.data;
 			innerElement.modalContext = this.#modalContext;
-			innerElement.manifest = manifest;
 		}
 
 		return innerElement;

From 9ff5a36bbbf5d55d905183d71672c1a58db40a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Dec 2023 14:25:52 +0100
Subject: [PATCH 34/34] correct host element

---
 .../core/notification/notification.context.test.ts        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
index adf5fe6305..daf4bdd68d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.test.ts
@@ -1,13 +1,17 @@
 import { expect } from '@open-wc/testing';
 
 import { UmbNotificationHandler, UmbNotificationContext } from './index.js';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-test-controller-host')
+export class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
 
 describe('UmbNotificationContext', () => {
 	let notificationContext: UmbNotificationContext;
 
 	beforeEach(async () => {
-		notificationContext = new UmbNotificationContext(new UmbControllerHostElement());
+		notificationContext = new UmbNotificationContext(new UmbTestControllerHostElement());
 	});
 
 	describe('Public API', () => {