Merge branch 'main' into v14/bugfix/reorder-tabs

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -20,12 +20,12 @@ import { UmbIconRegistry } from '../src/packages/core/icon-registry/icon.registr
 import { UmbLitElement } from '../src/packages/core/lit-element';
 import { umbLocalizationRegistry } from '../src/packages/core/localization';
 import customElementManifests from '../dist-cms/custom-elements.json';
-import icons from '../src/packages/core/icon-registry/icons/icons';
+import icons from '../src/packages/core/icon-registry/icons';
 
 import '../src/libs/context-api/provide/context-provider.element';
 import '../src/packages/core/components';
 
-import { manifests as documentManifests } from '../src/packages/documents';
+import { manifests as documentManifests } from '../src/packages/documents/manifests';
 import { manifests as localizationManifests } from '../src/packages/core/localization/manifests';
 import { UmbNotificationContext } from '../src/packages/core/notification';
 

src/Umbraco.Web.UI.Client/README.md

@@ -126,7 +126,7 @@ export default class MyElement extends UmbElementMixin(LitElement) {
 		this._notificationContext?.peek('positive', { data: { message: '#h5yr' } });
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box headline="Welcome">
 				<p>A TypeScript Lit Dashboard</p>

src/Umbraco.Web.UI.Client/devops/icons/index.js

@@ -46,7 +46,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -77,7 +77,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -102,7 +102,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -141,7 +141,7 @@ const collectDiskIcons = async (icons) => {
 				legacy: true,
 				fileName: iconFileName,
 				svg,
-				output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 			};
 
 			icons.push(icon);
@@ -168,13 +168,13 @@ const writeIconsToDisk = (icons) => {
 };
 
 const generateJS = (icons) => {
-	const JSPath = `${iconsOutputDirectory}/icons.ts`;
+	const JSPath = `${moduleDirectory}/icons.ts`;
 
 	const iconDescriptors = icons.map((icon) => {
 		return `{
 			name: "${icon.name}",
 			${icon.legacy ? 'legacy: true,' : ''}
-			path: "./icons/${icon.fileName}.js",
+			path: () => import("./icons/${icon.fileName}.js"),
 		}`.replace(/\t/g, ''); // Regex removes white space [NL]
 	});
 

src/Umbraco.Web.UI.Client/devops/tsc-override/index.js

@@ -0,0 +1,111 @@
+// Notice: This script is not perfect and may not work in all cases. ex. it places the override term wrong for async and setter/getter methods. But its a help any way. [NL]
+
+import ts from 'typescript';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+const tsconfigPath = './tsconfig.json';
+
+const cwd = process.cwd();
+
+async function fixOverride() {
+	const configFile = path.isAbsolute(tsconfigPath)
+		? tsconfigPath
+		: ts.findConfigFile(cwd, ts.sys.fileExists, tsconfigPath);
+
+	if (!configFile) {
+		console.error('No tsconfig file found for path:', tsconfigPath);
+		process.exit(1);
+	}
+
+	const config = ts.readConfigFile(configFile, ts.sys.readFile);
+
+	const { options, fileNames } = ts.parseJsonConfigFileContent(
+		config.config,
+		ts.sys,
+
+		// Resolve to the folder where the tsconfig file located
+		path.dirname(tsconfigPath),
+	);
+
+	const program = ts.createProgram({
+		rootNames: fileNames,
+		options,
+	});
+
+	if (fileNames.length === 0) {
+		console.error('No files in the project.', {
+			fileNames,
+			options,
+		});
+
+		process.exit(1);
+	}
+	let emitResult = program.emit();
+
+	const overrideErrors = ts
+		.getPreEmitDiagnostics(program)
+		.concat(emitResult.diagnostics)
+		.filter((diagnostic) =>
+			[
+				// This member must have an 'override' modifier because it overrides a member in the base class '{0}'.
+				4114,
+				// This parameter property must have an 'override' modifier because it overrides a member in base class '{0}'
+				4115,
+				// This member must have an 'override' modifier because it overrides an abstract method that is declared in the base class '{0}'.
+				4116,
+			].includes(diagnostic.code),
+		);
+
+	const sortedErrors = sortErrors(overrideErrors);
+
+	for (const diagnostic of sortedErrors) {
+		await addOverride(diagnostic);
+	}
+}
+
+/**
+ *
+ * @param {ts.Diagnostic} diagnostic
+ * @returns {Promise<void>}
+ */
+async function addOverride(diagnostic) {
+	const fileContent = (await fs.readFile(diagnostic.file.fileName, 'utf-8')).toString();
+	let startIndex = diagnostic.start;
+
+	if (fileContent.slice(0, startIndex).endsWith(' get ')) {
+		startIndex -= 'get '.length;
+	}
+	if (fileContent.slice(0, startIndex).endsWith(' async ')) {
+		startIndex -= 'async '.length;
+	}
+	if (fileContent.slice(0, startIndex).endsWith(' readonly ')) {
+		startIndex -= 'readonly '.length;
+	}
+
+	const newFileContent = [fileContent.slice(0, startIndex), 'override ', fileContent.slice(startIndex)].join('');
+	await fs.writeFile(diagnostic.file.fileName, newFileContent);
+}
+
+/**
+ *
+ * @param {ts.Diagnostic[]} errors
+ * @returns {ts.Diagnostic[]}
+ */
+function sortErrors(errors) {
+	// Sort by file path and start position from end to start
+	// so we can insert override keyword without changing the start position of other errors in the same file that happen before
+	return errors.slice(0).sort((a, b) => {
+		if (a.file && b.file) {
+			if (a.file.fileName === b.file.fileName) {
+				return b.start - a.start;
+			}
+
+			return a.file.fileName.localeCompare(b.file.fileName);
+		}
+
+		return 0;
+	});
+}
+
+fixOverride();

src/Umbraco.Web.UI.Client/devops/tsconfig/index.js

@@ -28,6 +28,7 @@ const tsConfigBase = {
 		baseUrl: '.',
 		incremental: true,
 		skipLibCheck: true,
+		noImplicitOverride: true,
 		/* Bundler mode */
 		moduleResolution: 'bundler',
 		allowImportingTsExtensions: true,

src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/dataset-dashboard.ts

@@ -18,7 +18,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 		this.requestUpdate('data', oldValue);
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Dataset Example</h1>
@@ -39,7 +39,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 							},
 							{
 								alias: 'items',
-								value: [ 'First Option' , 'Second Option', 'Third Option' ],
+								value: ['First Option', 'Second Option', 'Third Option'],
 							},
 						]}
 						property-editor-ui-alias="Umb.PropertyEditorUi.Dropdown"></umb-property>
@@ -51,7 +51,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts

@@ -38,7 +38,7 @@ export class ExampleManifestPickerDashboard extends UmbLitElement {
 		this._selectedManifest = selectedManifest?.value ?? '';
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box>
 				<umb-property-layout label="Select a extension type...">
@@ -77,7 +77,7 @@ export class ExampleManifestPickerDashboard extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -53,7 +53,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		},
 	];
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
@@ -72,7 +72,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts

@@ -50,7 +50,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		this.value = this.value.filter((r) => r.name !== item.name);
 	};
 
-	render() {
+	override render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
@@ -71,7 +71,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts

@@ -12,7 +12,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 	@property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' })
 	umbDragPlaceholder = false;
 
-	render() {
+	override render() {
 		return html`
 			<div>
 				${this.name}
@@ -23,7 +23,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts

@@ -36,7 +36,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		},
 	];
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
@@ -47,7 +47,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts

@@ -48,7 +48,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		this.#sorter.setModel(this._items);
 	};
 
-	render() {
+	override render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
@@ -63,7 +63,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts

@@ -12,7 +12,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 	@property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' })
 	umbDragPlaceholder = false;
 
-	render() {
+	override render() {
 		return html`
 			<div>
 				${this.name}
@@ -23,7 +23,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts

@@ -25,7 +25,7 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Counter Example</h1>
@@ -35,7 +35,7 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/incrementor-workspace-action.ts

@@ -4,7 +4,7 @@ import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context';
 // The Example Incrementor Workspace Action Controller:
 export class ExampleIncrementorWorkspaceAction extends UmbWorkspaceActionBase implements UmbWorkspaceAction {
 	// This method is executed
-	async execute() {
+	override async execute() {
 		const context = await this.getContext(EXAMPLE_COUNTER_CONTEXT);
 		context.increment();
 	}

src/Umbraco.Web.UI.Client/package-lock.json

@@ -11,9 +11,14 @@
 			"workspaces": [
 				"./src/packages/data-type",
 				"./src/packages/dictionary",
+				"./src/packages/documents",
+				"./src/packages/health-check",
 				"./src/packages/language",
+				"./src/packages/tags",
 				"./src/packages/umbraco-news",
-				"./src/packages/webhook"
+				"./src/packages/webhook",
+				"./src/packages/health-check",
+				"./src/packages/tags"
 			],
 			"dependencies": {
 				"@types/diff": "^5.2.1",
@@ -86,7 +91,7 @@
 				"tiny-glob": "^0.2.9",
 				"tsc-alias": "^1.8.8",
 				"typedoc": "^0.25.13",
-				"typescript": "^5.4.5",
+				"typescript": "^5.5.2",
 				"typescript-json-schema": "^0.63.0",
 				"vite": "^5.2.9",
 				"vite-plugin-static-copy": "^1.0.5",
@@ -6642,10 +6647,22 @@
 			"resolved": "src/packages/dictionary",
 			"link": true
 		},
+		"node_modules/@umbraco-backoffice/document": {
+			"resolved": "src/packages/documents",
+			"link": true
+		},
+		"node_modules/@umbraco-backoffice/health-check": {
+			"resolved": "src/packages/health-check",
+			"link": true
+		},
 		"node_modules/@umbraco-backoffice/language": {
 			"resolved": "src/packages/language",
 			"link": true
 		},
+		"node_modules/@umbraco-backoffice/tag": {
+			"resolved": "src/packages/tags",
+			"link": true
+		},
 		"node_modules/@umbraco-backoffice/umbraco-news": {
 			"resolved": "src/packages/umbraco-news",
 			"link": true
@@ -10469,9 +10486,9 @@
 			}
 		},
 		"node_modules/devtools-protocol": {
-			"version": "0.0.1286932",
-			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1286932.tgz",
-			"integrity": "sha512-wu58HMQll9voDjR4NlPyoDEw1syfzaBNHymMMZ/QOXiHRNluOnDgu9hp1yHOKYoMlxCh4lSSiugLITe6Fvu1eA==",
+			"version": "0.0.1299070",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1299070.tgz",
+			"integrity": "sha512-+qtL3eX50qsJ7c+qVyagqi7AWMoQCBGNfoyJZMwm/NSXVqLYbuitrWEEIzxfUmTNy7//Xe8yhMmQ+elj3uAqSg==",
 			"dev": true
 		},
 		"node_modules/diff": {
@@ -17264,16 +17281,16 @@
 			}
 		},
 		"node_modules/puppeteer-core": {
-			"version": "22.10.1",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.10.1.tgz",
-			"integrity": "sha512-t98x55ohn6eioM/e1dmhy6bG9iuQ+mvpNXyr+UppB789uvNKKOvy9YnWpKp4mVyKxi9BGsceHAFuovQGqQKyCQ==",
+			"version": "22.11.2",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.11.2.tgz",
+			"integrity": "sha512-vQo+YDuePyvj+92Z9cdtxi/HalKf+k/R4tE80nGtQqJRNqU81eHaHkbVfnLszdaLlvwFF5tipnnSCzqWlEddtw==",
 			"dev": true,
 			"dependencies": {
 				"@puppeteer/browsers": "2.2.3",
 				"chromium-bidi": "0.5.23",
 				"debug": "4.3.5",
-				"devtools-protocol": "0.0.1286932",
-				"ws": "8.17.0"
+				"devtools-protocol": "0.0.1299070",
+				"ws": "8.17.1"
 			},
 			"engines": {
 				"node": ">=18"
@@ -19655,9 +19672,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.4.5",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-			"integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+			"version": "5.5.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
+			"integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
 			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
@@ -21084,9 +21101,9 @@
 			}
 		},
 		"node_modules/ws": {
-			"version": "8.17.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-			"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -21220,9 +21237,18 @@
 		"src/packages/dictionary": {
 			"name": "@umbraco-backoffice/dictionary"
 		},
+		"src/packages/documents": {
+			"name": "@umbraco-backoffice/document"
+		},
+		"src/packages/health-check": {
+			"name": "@umbraco-backoffice/health-check"
+		},
 		"src/packages/language": {
 			"name": "@umbraco-backoffice/language"
 		},
+		"src/packages/tags": {
+			"name": "@umbraco-backoffice/tag"
+		},
 		"src/packages/umbraco-news": {
 			"name": "@umbraco-backoffice/umbraco-news"
 		},

src/Umbraco.Web.UI.Client/package.json

@@ -128,9 +128,14 @@
 	"workspaces": [
 		"./src/packages/data-type",
 		"./src/packages/dictionary",
+		"./src/packages/documents",
+		"./src/packages/health-check",
 		"./src/packages/language",
+		"./src/packages/tags",
 		"./src/packages/umbraco-news",
-		"./src/packages/webhook"
+		"./src/packages/webhook",
+		"./src/packages/health-check",
+		"./src/packages/tags"
 	],
 	"scripts": {
 		"backoffice:test:e2e": "npx playwright test",
@@ -154,6 +159,7 @@
 		"generate:server-api-dev": "openapi-ts --input http://localhost:11000/umbraco/swagger/management/swagger.json --output src/external/backend-api/src --debug true --enums typescript --lint true --schemas false",
 		"generate:server-api": "openapi-ts --input https://raw.githubusercontent.com/umbraco/Umbraco-CMS/v14/dev/src/Umbraco.Cms.Api.Management/OpenApi.json --output src/external/backend-api/src --debug true --enums typescript --lint true --schemas false",
 		"generate:icons": "node ./devops/icons/index.js",
+		"generate:overrides": "node ./devops/tsc/index.js",
 		"generate:jsonschema:dist": "typescript-json-schema --required --include \"./src/packages/core/extension-registry/umbraco-package.ts\" --out dist-cms/umbraco-package-schema.json tsconfig.json UmbracoPackage",
 		"generate:jsonschema": "typescript-json-schema --required --include \"./src/packages/core/extension-registry/*.ts\"",
 		"lint:errors": "npm run lint -- --quiet",
@@ -251,7 +257,7 @@
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
 		"typedoc": "^0.25.13",
-		"typescript": "^5.4.5",
+		"typescript": "^5.5.2",
 		"typescript-json-schema": "^0.63.0",
 		"vite": "^5.2.9",
 		"vite-plugin-static-copy": "^1.0.5",
@@ -265,4 +271,4 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	}
-}
+}

src/Umbraco.Web.UI.Client/src/apps/app/app-error.element.ts

@@ -167,43 +167,45 @@ export class UmbAppErrorElement extends UmbLitElement {
 		return nothing;
 	}
 
-	render = () => html`
-		<div id="background"></div>
+	override render() {
+		return html`
+			<div id="background"></div>
 
-		<div id="logo" aria-hidden="true">
-			<img src="/umbraco/backoffice/assets/umbraco_logomark_white.svg" alt="Umbraco" />
-		</div>
+			<div id="logo" aria-hidden="true">
+				<img src="/umbraco/backoffice/assets/umbraco_logomark_white.svg" alt="Umbraco" />
+			</div>
 
-		<div id="container" class="uui-text">
-			<uui-box id="box" headline-variant="h1">
-				${this.hideBackButton
-					? nothing
-					: html`
-							<uui-button
-								slot="header-actions"
-								label=${this.localize.term('general_back')}
-								look="secondary"
-								@click=${() => (location.href = '')}></uui-button>
-						`}
-				<div slot="headline">
-					${this.errorHeadline
-						? this.errorHeadline
-						: html` <umb-localize key="errors_defaultError">An unknown failure has occured</umb-localize> `}
-				</div>
-				<div id="message">${this.errorMessage}</div>
-				${this.error
-					? html`
-							<details>
-								<summary><umb-localize key="general_details">Details</umb-localize></summary>
-								${this.#renderError(this.error)}
-							</details>
-						`
-					: nothing}
-			</uui-box>
-		</div>
-	`;
+			<div id="container" class="uui-text">
+				<uui-box id="box" headline-variant="h1">
+					${this.hideBackButton
+						? nothing
+						: html`
+								<uui-button
+									slot="header-actions"
+									label=${this.localize.term('general_back')}
+									look="secondary"
+									@click=${() => (location.href = '')}></uui-button>
+							`}
+					<div slot="headline">
+						${this.errorHeadline
+							? this.errorHeadline
+							: html` <umb-localize key="errors_defaultError">An unknown failure has occured</umb-localize> `}
+					</div>
+					<div id="message">${this.errorMessage}</div>
+					${this.error
+						? html`
+								<details>
+									<summary><umb-localize key="general_details">Details</umb-localize></summary>
+									${this.#renderError(this.error)}
+								</details>
+							`
+						: nothing}
+				</uui-box>
+			</div>
+		`;
+	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			#background {

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -154,7 +154,7 @@ export class UmbAppElement extends UmbLitElement {
 		new UmbContextDebugController(this);
 	}
 
-	connectedCallback(): void {
+	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#setup();
 	}
@@ -291,11 +291,11 @@ export class UmbAppElement extends UmbLitElement {
 		this.requestUpdate();
 	}
 
-	render() {
+	override render() {
 		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
 
-	static styles = css`
+	static override styles = css`
 		:host {
 			overflow: hidden;
 		}

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -71,7 +71,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`
 			<umb-backoffice-header></umb-backoffice-header>
 			<umb-backoffice-main></umb-backoffice-main>
@@ -79,7 +79,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-apps.element.ts

@@ -1,13 +1,13 @@
-import type { CSSResultGroup} from '@umbraco-cms/backoffice/external/lit';
+import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-backoffice-header-apps')
 export class UmbBackofficeHeaderAppsElement extends LitElement {
-	render() {
+	override render() {
 		return html` <umb-extension-slot id="apps" type="headerApp"></umb-extension-slot> `;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			#apps {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-logo.element.ts

@@ -23,7 +23,7 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-button id="logo" look="primary" label="Umbraco" compact popovertarget="logo-popover">
 				<img src="/umbraco/backoffice/assets/umbraco_logomark_white.svg" alt="Umbraco" />
@@ -40,7 +40,7 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			#logo {

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -52,7 +52,7 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		);
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-tab-group id="tabs">
 				${repeat(
@@ -73,7 +73,7 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host {
 				display: contents;

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header.element.ts

@@ -3,7 +3,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-backoffice-header')
 export class UmbBackofficeHeaderElement extends UmbLitElement {
-	render() {
+	override render() {
 		return html`
 			<div id="appHeader">
 				<umb-backoffice-header-logo></umb-backoffice-header-logo>
@@ -13,7 +13,7 @@ export class UmbBackofficeHeaderElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				width: 100%;

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts

@@ -89,13 +89,13 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 		}
 	}
 
-	render() {
+	override render() {
 		return this._routes.length > 0
 			? html`<umb-router-slot .routes=${this._routes} @change=${this._onRouteChange}></umb-router-slot>`
 			: nothing;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: block;

src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-consent.element.ts

@@ -87,7 +87,7 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 		`;
 	}
 
-	render() {
+	override render() {
 		return html`
 			<div id="container" class="uui-text" data-test="installer-telemetry">
 				<h1>Consent for telemetry data</h1>
@@ -100,7 +100,7 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 		`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host,
 			#container {

src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.element.ts

@@ -372,7 +372,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		</p>
 	`;
 
-	render() {
+	override render() {
 		return html` <div id="container" class="uui-text" data-test="installer-database">
 			<h1 class="uui-h3">Database Configuration</h1>
 			<uui-form>
@@ -391,7 +391,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		</div>`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host,
 			#container {

src/Umbraco.Web.UI.Client/src/apps/installer/error/installer-error.element.ts

@@ -12,7 +12,7 @@ export class UmbInstallerErrorElement extends UmbLitElement {
 
 	private _installerContext?: UmbInstallerContext;
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 
 		this.consumeContext(UMB_INSTALLER_CONTEXT, (installerContext) => {
@@ -55,7 +55,7 @@ export class UmbInstallerErrorElement extends UmbLitElement {
 		`;
 	}
 
-	render() {
+	override render() {
 		return html` <div id="container" class="uui-text" data-test="installer-error">
 			<uui-form>
 				<form id="installer-form" @submit="${this._handleSubmit}">
@@ -74,7 +74,7 @@ export class UmbInstallerErrorElement extends UmbLitElement {
 		</div>`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host,
 			#container {

src/Umbraco.Web.UI.Client/src/apps/installer/installer.element.ts

@@ -21,7 +21,7 @@ export class UmbInstallerElement extends UmbLitElement {
 		this.provideContext(UMB_INSTALLER_CONTEXT, this._umbInstallerContext);
 	}
 
-	connectedCallback(): void {
+	override connectedCallback(): void {
 		super.connectedCallback();
 		this._observeCurrentStep();
 	}
@@ -53,7 +53,7 @@ export class UmbInstallerElement extends UmbLitElement {
 		}
 	}
 
-	render() {
+	override render() {
 		return html`<umb-installer-layout data-test="installer">${this._renderSection()}</umb-installer-layout> `;
 	}
 }

src/Umbraco.Web.UI.Client/src/apps/installer/installing/installer-installing.element.ts

@@ -1,16 +1,16 @@
-import type { CSSResultGroup} from '@umbraco-cms/backoffice/external/lit';
+import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-installer-installing')
 export class UmbInstallerInstallingElement extends LitElement {
-	render() {
+	override render() {
 		return html` <div class="uui-text" data-test="installer-installing">
 			<h1 class="uui-h3">Installing Umbraco</h1>
 			<uui-loader-bar></uui-loader-bar>
 		</div>`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			h1 {
 				text-align: center;

src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts

@@ -1,9 +1,9 @@
-import type { CSSResultGroup} from '@umbraco-cms/backoffice/external/lit';
+import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-installer-layout')
 export class UmbInstallerLayoutElement extends LitElement {
-	render() {
+	override render() {
 		return html`
 			<!-- <div id="background" aria-hidden="true"></div> -->
 
@@ -22,7 +22,7 @@ export class UmbInstallerLayoutElement extends LitElement {
 		`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts

@@ -52,7 +52,7 @@ export class UmbInstallerUserElement extends UmbLitElement {
 		this._installerContext?.nextStep();
 	};
 
-	render() {
+	override render() {
 		return html` <div id="container" class="uui-text" data-test="installer-user">
 			<h1>Install Umbraco</h1>
 			<uui-form>
@@ -109,7 +109,7 @@ export class UmbInstallerUserElement extends UmbLitElement {
 		</div>`;
 	}
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			:host,
 			#container {

src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-culture.element.ts

@@ -16,7 +16,7 @@ export class UmbPreviewCultureElement extends UmbLitElement {
 	@state()
 	private _cultures: Array<UmbLanguageDetailModel> = [];
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 		this.#getCultures();
 	}
@@ -41,7 +41,7 @@ export class UmbPreviewCultureElement extends UmbLitElement {
 		previewContext.updateIFrame({ culture: culture.unique });
 	}
 
-	render() {
+	override render() {
 		if (this._cultures.length <= 1) return nothing;
 		return html`
 			<uui-button look="primary" popovertarget="cultures-popover">
@@ -69,7 +69,7 @@ export class UmbPreviewCultureElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-device.element.ts

@@ -69,7 +69,7 @@ export class UmbPreviewDeviceElement extends UmbLitElement {
 	@property({ attribute: false, type: Object })
 	device = this.#devices[0];
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 		this.#changeDevice(this.device);
 	}
@@ -88,7 +88,7 @@ export class UmbPreviewDeviceElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-button look="primary" popovertarget="devices-popover">
 				<div>
@@ -115,9 +115,9 @@ export class UmbPreviewDeviceElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
-		:host {
+			:host {
 				display: flex;
 				border-left: 1px solid var(--uui-color-header-contrast);
 				--uui-button-font-weight: 400;

src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-exit.element.ts

@@ -10,7 +10,7 @@ export class UmbPreviewExitElement extends UmbLitElement {
 		previewContext.exitPreview(0);
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-button look="primary" @click=${this.#onClick}>
 				<div>
@@ -21,7 +21,7 @@ export class UmbPreviewExitElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-open-website.element.ts

@@ -10,7 +10,7 @@ export class UmbPreviewOpenWebsiteElement extends UmbLitElement {
 		previewContext.openWebsite();
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-button look="primary" @click=${this.#onClick}>
 				<div>
@@ -21,7 +21,7 @@ export class UmbPreviewOpenWebsiteElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/preview/preview.element.ts

@@ -24,14 +24,14 @@ export class UmbPreviewElement extends UmbLitElement {
 		this.observe(this.#context.previewUrl, (previewUrl) => (this._previewUrl = previewUrl));
 	}
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('visibilitychange', this.#onVisibilityChange);
 		window.addEventListener('beforeunload', () => this.#context.exitSession());
 		this.#context.startSession();
 	}
 
-	disconnectedCallback() {
+	override disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener('visibilitychange', this.#onVisibilityChange);
 		// NOTE: Unsure how we remove an anonymous function from 'beforeunload' event listener.
@@ -55,7 +55,7 @@ export class UmbPreviewElement extends UmbLitElement {
 		this.#context.checkSession();
 	}
 
-	render() {
+	override render() {
 		if (!this._previewUrl) return nothing;
 		return html`
 			${when(!this._iframeReady, () => html`<div id="loading"><uui-loader-circle></uui-loader-circle></div>`)}
@@ -77,7 +77,7 @@ export class UmbPreviewElement extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: flex;

src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader-view.element.ts

@@ -46,7 +46,7 @@ export class UmbUpgraderViewElement extends LitElement {
 										target="_blank"
 										label="View Report"></uui-button>
 								</p>
-						  `
+							`
 						: ''
 				}
 
@@ -76,7 +76,7 @@ export class UmbUpgraderViewElement extends LitElement {
 		`;
 	}
 
-	render() {
+	override render() {
 		return html` ${this.fetching ? html`<div class="center"><uui-loader></uui-loader></div>` : this._renderLayout()} `;
 	}
 
@@ -85,7 +85,7 @@ export class UmbUpgraderViewElement extends LitElement {
 		this.dispatchEvent(new CustomEvent('onAuthorizeUpgrade', { detail: e, bubbles: true }));
 	};
 
-	static styles: CSSResultGroup = [
+	static override styles: CSSResultGroup = [
 		css`
 			.center {
 				display: grid;

src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader.element.ts

@@ -29,7 +29,7 @@ export class UmbUpgraderElement extends UmbLitElement {
 		this._setup();
 	}
 
-	render() {
+	override render() {
 		return html`<umb-installer-layout data-test="upgrader">
 			<umb-upgrader-view
 				.fetching=${this.fetching}

src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts

@@ -142,7 +142,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 	/**
 	 * Query the parent router slot when the router slot is connected.
 	 */
-	connectedCallback() {
+	override connectedCallback() {
 		// Do not query a parent if the parent has been set from the outside.
 		if (!this._lockParent) {
 			const captureParentEvent = new CustomEvent('router-slot:capture-parent', {
@@ -167,7 +167,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 	/**
 	 * Tears down the element.
 	 */
-	disconnectedCallback() {
+	override disconnectedCallback() {
 		this.detachListeners();
 	}
 

src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts

@@ -102,7 +102,7 @@ export const UmbClassMixin = <T extends ClassConstructor<EventTarget>>(superClas
 			return promise;
 		}
 
-		public destroy(): void {
+		public override destroy(): void {
 			if (this._host) {
 				this._host.removeUmbController(this);
 				this._host = undefined as never;

src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.controller.ts

@@ -24,7 +24,7 @@ export class UmbContextConsumerController<BaseType = unknown, ResultType extends
 		host.addUmbController(this);
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		this.#host?.removeUmbController(this);
 		(this.#host as any) = undefined;
 		super.destroy();

src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.test.ts

@@ -39,7 +39,7 @@ describe('UmbContextConsumer', () => {
 
 		describe('events', () => {
 			it('dispatches context request event when constructed', async () => {
-				const listener = oneEvent(window, UMB_CONTENT_REQUEST_EVENT_TYPE);
+				const listener = oneEvent(window, UMB_CONTENT_REQUEST_EVENT_TYPE, false);
 
 				consumer.hostConnected();
 

src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provider.controller.ts

@@ -46,7 +46,7 @@ export class UmbContextProviderController<
 		}
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		if (this.#host) {
 			this.#host.removeUmbController(this);
 			(this.#host as any) = undefined;

src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provider.element.ts

@@ -46,7 +46,7 @@ export class UmbContextProviderElement extends UmbControllerHostElementMixin(HTM
 		this.shadowRoot?.appendChild(slot);
 	}
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 		if (!this.key) {
 			throw new Error('The key property is required.');

src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-element.mixin.ts

@@ -18,17 +18,17 @@ export const UmbControllerHostElementMixin = <T extends HTMLElementConstructor>(
 			return this;
 		}
 
-		connectedCallback() {
+		override connectedCallback() {
 			super.connectedCallback?.();
 			this.hostConnected();
 		}
 
-		disconnectedCallback() {
+		override disconnectedCallback() {
 			super.disconnectedCallback?.();
 			this.hostDisconnected();
 		}
 
-		destroy(): void {}
+		override destroy(): void {}
 	}
 
 	return UmbControllerHostElementClass as unknown as HTMLElementConstructor<UmbControllerHostElement> & T;

src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-provider.element.ts

@@ -20,7 +20,7 @@ export class UmbControllerHostProviderElement
 		this.shadowRoot?.appendChild(slot);
 	}
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 		if (this.create) {
 			this.create(this);

src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts

@@ -28,16 +28,16 @@ class UmbTestControllerImplementation extends UmbControllerHostMixin(class {}) {
 		return this._host?.getHostElement();
 	}
 
-	hostConnected(): void {
+	override hostConnected(): void {
 		super.hostConnected();
 		this.testIsConnected = true;
 	}
-	hostDisconnected(): void {
+	override hostDisconnected(): void {
 		super.hostDisconnected();
 		this.testIsConnected = false;
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		if (this._host) {
 			this._host.removeUmbController(this);
 			this._host = undefined as any;

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.ts

@@ -293,7 +293,7 @@ export abstract class UmbBaseExtensionInitializer<
 	}
 	*/
 
-	public hostDisconnected(): void {
+	public override hostDisconnected(): void {
 		super.hostDisconnected();
 		this._isConditionsPositive = false;
 		if (this.#isPermitted === true) {
@@ -311,7 +311,7 @@ export abstract class UmbBaseExtensionInitializer<
 		}
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		if (!this.#extensionRegistry) return;
 		this.#manifest = undefined;
 		this.#promiseResolvers = [];

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts

@@ -183,7 +183,7 @@ export abstract class UmbBaseExtensionsInitializer<
 		}
 	}
 
-	hostDisconnected(): void {
+	override hostDisconnected(): void {
 		super.hostDisconnected();
 		if (this.#changeDebounce) {
 			cancelAnimationFrame(this.#changeDebounce);
@@ -191,7 +191,7 @@ export abstract class UmbBaseExtensionsInitializer<
 		}
 	}
 
-	public destroy() {
+	public override destroy() {
 		// The this.#extensionRegistry is an indication of wether this is already destroyed.
 		if (!this.#extensionRegistry) return;
 

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.controller.ts

@@ -119,7 +119,7 @@ export class UmbExtensionApiInitializer<
 		}
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#constructorArguments = undefined;
 	}

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.controller.ts

@@ -191,7 +191,7 @@ export class UmbExtensionElementAndApiInitializer<
 		}
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#constructorArguments = undefined;
 		this.#elProps = undefined;

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-initializer.controller.ts

@@ -108,7 +108,7 @@ export class UmbExtensionElementInitializer<
 		}
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#properties = undefined;
 	}

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-api-initializer.controller.ts

@@ -84,7 +84,7 @@ export class UmbExtensionsApiInitializer<
 		return extController;
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#constructorArgs = undefined;
 		(this.#extensionRegistry as any) = undefined;

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-and-api-initializer.controller.ts

@@ -89,7 +89,7 @@ export class UmbExtensionsElementAndApiInitializer<
 		return extController;
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#constructorArgs = undefined;
 		this.#elProps = undefined;

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-initializer.controller.ts

@@ -67,7 +67,7 @@ export class UmbExtensionsElementInitializer<
 		return extController;
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		this.#props = undefined;
 		(this.#extensionRegistry as any) = undefined;

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-manifest-initializer.controller.ts

@@ -47,7 +47,7 @@ export class UmbExtensionsManifestInitializer<
 		) as ControllerType;
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		super.destroy();
 		(this.#extensionRegistry as any) = undefined;
 	}

src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-js.function.ts

@@ -1,8 +1,6 @@
 import type { JsLoaderProperty } from '../types/utils.js';
 
-export async function loadManifestPlainJs<JsType extends object>(
-	property: JsLoaderProperty<JsType>,
-): Promise<JsType | undefined> {
+export async function loadManifestPlainJs<JsType>(property: JsLoaderProperty<JsType>): Promise<JsType | undefined> {
 	const propType = typeof property;
 	if (propType === 'function') {
 		// Promise function

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts

@@ -10,19 +10,19 @@ const initialLanguage = 'en-us';
 
 @customElement('umb-localize-controller-host')
 class UmbLocalizeControllerHostElement extends UmbElementMixin(LitElement) {
-	@property() lang = initialLanguage;
+	@property() override lang = initialLanguage;
 }
 
 @customElement('umb-localization-render-count')
 class UmbLocalizationRenderCountElement extends UmbElementMixin(LitElement) {
 	amountOfUpdates = 0;
 
-	requestUpdate() {
+	override requestUpdate() {
 		super.requestUpdate();
 		this.amountOfUpdates++;
 	}
 
-	render() {
+	override render() {
 		return html`${this.localize.term('logout')}`;
 	}
 }

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts

@@ -100,6 +100,8 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 		const locale = new Intl.Locale(lang);
 		const language = locale?.language.toLowerCase();
 		const region = locale?.region?.toLowerCase() ?? '';
+		// TODO: Its a bit of a tight coupling here, as this code relies on localizations begin a map. We should abstract that away. [NL]
+		// TODO: Currently we don't check if the `lang` is available. We should do that. We could maybe checking if the `lang` is in the `languages` map. [NL]?
 		const primary = umbLocalizationManager.localizations.get(`${language}-${region}`) as LocalizationSetType;
 		const secondary = umbLocalizationManager.localizations.get(language) as LocalizationSetType;
 

src/Umbraco.Web.UI.Client/src/libs/observable-api/observer.controller.ts

@@ -32,7 +32,7 @@ export class UmbObserverController<T = unknown> extends UmbObserver<T> implement
 		host.addUmbController(this);
 	}
 
-	destroy(): void {
+	override destroy(): void {
 		this.#host?.removeUmbController(this);
 		(this.#host as any) = undefined;
 		super.destroy();

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts

@@ -49,7 +49,7 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
 	 * myState.setValue('Goodnight')
 	 * // myState.value is equal 'Goodnight'.
 	 */
-	setValue(value: T[]) {
+	override setValue(value: T[]) {
 		if (this.#sortMethod) {
 			super.setValue(value.sort(this.#sortMethod));
 		} else {
@@ -241,7 +241,7 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
 		return this;
 	}
 
-	destroy() {
+	override destroy() {
 		super.destroy();
 		this.#sortMethod = undefined;
 		(this.getUniqueMethod as any) = undefined;

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/class-state.ts

@@ -37,7 +37,7 @@ export class UmbClassState<T extends UmbClassStateData | undefined> extends UmbB
 	 * @param {T} data - The next data for this state to hold.
 	 * @description - Set the data of this state, if data is different than current this will trigger observations to update.
 	 */
-	setValue(data: T): void {
+	override setValue(data: T): void {
 		if (!this._subject) return;
 		const oldValue = this._subject.getValue();
 

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/deep-state.ts

@@ -40,7 +40,7 @@ export class UmbDeepState<T> extends UmbBasicState<T> {
 	 * @param {T} data - The next data for this state to hold.
 	 * @description - Set the data of this state, if data is different than current this will trigger observations to update.
 	 */
-	setValue(data: T): void {
+	override setValue(data: T): void {
 		if (!this._subject) return;
 		const frozenData = deepFreeze(data);
 		this.#value = frozenData;
@@ -50,7 +50,7 @@ export class UmbDeepState<T> extends UmbBasicState<T> {
 		}
 	}
 
-	getValue(): T {
+	override getValue(): T {
 		return this.#value;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts

@@ -105,7 +105,7 @@ export class UmbBlockGridAreaConfigEntryContext
 		this.#propertyContext.setValue(value.filter((x) => x.key !== this.#areaKey));
 	}
 
-	destroy() {
+	override destroy() {
 		super.destroy();
 		this.#area.destroy();
 	}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts

@@ -46,7 +46,7 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
 		});
 	}
 
-	connectedCallback(): void {
+	override connectedCallback(): void {
 		super.connectedCallback();
 		// element styling:
 		this.observe(
@@ -85,16 +85,16 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
 					<umb-block-scale-handler @mousedown=${(e: MouseEvent) => this.#context.scaleManager.onScaleMouseDown(e)}>
 						${this._columnSpan}x${this._rowSpan}
 					</umb-block-scale-handler>
-			  `
+				`
 			: '';
 	}
 
-	render() {
+	override render() {
 		return this.#renderBlock();
 	}
 
 	// TODO: Update UUI, as it is missing proper colors to be used for this case:
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				position: relative;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace-editor.element.ts

@@ -27,7 +27,7 @@ export class UmbBlockGridAreaTypeWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	// TODO: Localization, make it so that the headline is about area configuration?
-	render() {
+	override render() {
 		return this.workspaceAlias
 			? html`
 					<umb-workspace-editor
@@ -38,7 +38,7 @@ export class UmbBlockGridAreaTypeWorkspaceEditorElement extends UmbLitElement {
 			: '';
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts

@@ -23,8 +23,6 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 	// Just for context token safety:
 	public readonly IS_BLOCK_GRID_AREA_TYPE_WORKSPACE_CONTEXT = true;
 
-	readonly routes = new UmbWorkspaceRouteManager(this);
-
 	#entityType: string;
 	#data = new UmbObjectState<UmbBlockGridTypeAreaType | undefined>(undefined);
 	readonly data = this.#data.asObservable();
@@ -55,7 +53,7 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 		]);
 	}
 
-	protected resetState(): void {
+	protected override resetState(): void {
 		super.resetState();
 		this.#data.setValue(undefined);
 	}
@@ -142,7 +140,7 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 		this.setIsNew(false);
 	}
 
-	public destroy(): void {
+	public override destroy(): void {
 		this.#data.destroy();
 		super.destroy();
 	}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/settings.element.ts

@@ -10,7 +10,7 @@ export class UmbBlockGridAreaTypeWorkspaceViewSettingsElement extends UmbLitElem
 	// TODO: Add create button label field:
 	// TODO: Turn minAllowed and maxAllowed into one range property/input...
 	// TODO: Add validation permission field:
-	render() {
+	override render() {
 		return html`
 			<uui-box headline=${'Identification'}>
 				<umb-property
@@ -41,7 +41,7 @@ export class UmbBlockGridAreaTypeWorkspaceViewSettingsElement extends UmbLitElem
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts

@@ -53,7 +53,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return this._areas && this._areas.length > 0
 			? html` ${this.#styleElement}
 					<div
@@ -73,7 +73,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 			: '';
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				display: block;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts

@@ -38,7 +38,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.urls?.editContent ?? ''}>
 			<umb-property-type-based-property
 				.property=${this._inlineProperty}
@@ -47,7 +47,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 		</umb-ref-grid-block>`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			umb-block-grid-areas-container {
 				margin-top: calc(var(--uui-size-2) + 1px);

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts

@@ -39,13 +39,15 @@ export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase
 	 * TODO: Write proper JSDocs here.
 	 */
 	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
-		return await this.#entryContext.propertyValueByAlias<ReturnType>(propertyAlias);
+		// TODO: Investigate how I do that with the workspaces..
+		return await this.#entryContext.contentPropertyValueByAlias<ReturnType>(propertyAlias);
 	}
 
 	/**
 	 * TODO: Write proper JSDocs here.
 	 */
 	async setPropertyValue(propertyAlias: string, value: unknown) {
-		return this.#entryContext.setPropertyValue(propertyAlias, value);
+		// TODO: Investigate how I do that with the workspaces..
+		return this.#entryContext.setContentPropertyValue(propertyAlias, value);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts

@@ -16,13 +16,13 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	urls?: UmbBlockViewUrlsPropType;
 
-	render() {
+	override render() {
 		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.urls?.editContent ?? ''}>
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			umb-block-grid-areas-container {
 				margin-top: calc(var(--uui-size-2) + 1px);

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -267,7 +267,7 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	}
 
 	// TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. [NL]
-	render() {
+	override render() {
 		return html`
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
@@ -316,7 +316,7 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 		}
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -148,7 +148,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		});
 	}
 
-	connectedCallback(): void {
+	override connectedCallback(): void {
 		super.connectedCallback();
 		// element styling:
 		this.observe(
@@ -183,7 +183,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.#callUpdateInlineCreateButtons();
 	}
 
-	protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+	protected override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.updated(_changedProperties);
 		if (_changedProperties.has('_blockViewProps') || _changedProperties.has('_columnSpan')) {
 			this.#callUpdateInlineCreateButtons();
@@ -286,11 +286,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			: nothing;
 	}
 
-	render() {
+	override render() {
 		return this.#renderBlock();
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				position: relative;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts

@@ -18,14 +18,14 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 			e.preventDefault();
 		});
 	}
-	render() {
+	override render() {
 		return html`
 			<button aria-label="TODO: Some introduction to keyboard scaling" id="handler"></button>
 			<slot id="label"></slot>
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				position: absolute;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts

@@ -6,7 +6,7 @@ import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
  */
 @customElement('umb-ref-grid-block')
 export class UmbRefGridBlockElement extends UUIRefNodeElement {
-	render() {
+	override render() {
 		return html`
 			${super.render()}
 			<div class="break"></div>
@@ -14,7 +14,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		...UUIRefNodeElement.styles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts

@@ -318,7 +318,7 @@ export class UmbBlockGridEntriesContext
 	}
 
 	// create Block?
-	async delete(contentUdi: string) {
+	override async delete(contentUdi: string) {
 		// TODO: Loop through children and delete them as well?
 		await super.delete(contentUdi);
 	}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts

@@ -130,7 +130,7 @@ export class UmbBlockGridManagerContext<
 		return true;
 	}
 
-	setOneLayout(layoutEntry: BlockLayoutType, modalData?: UmbBlockGridWorkspaceData) {
+	override setOneLayout(layoutEntry: BlockLayoutType, modalData?: UmbBlockGridWorkspaceData) {
 		const index = modalData?.originData.index ?? -1;
 
 		if (modalData?.originData.parentUnique && modalData?.originData.areaKey) {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts

@@ -25,7 +25,7 @@ export class UmbBlockGridScaleManager extends UmbControllerBase {
 	#runtimeGridRows: Array<number> = [];
 	#lockedGridRows = 0;
 	//
-	_host: UmbBlockGridScalableContext;
+	override _host: UmbBlockGridScalableContext;
 	_entries?: UmbBlockGridScalableContainerContext;
 
 	constructor(host: UmbBlockGridScalableContext) {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts

@@ -97,7 +97,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	render() {
+	override render() {
 		return html`<div id="permissions">
 				${repeat(
 					this._value,
@@ -180,7 +180,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 		);
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			#permissions {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

@@ -128,7 +128,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 	}
 
 	// TODO: Needs localizations:
-	render() {
+	override render() {
 		return this._areaGridColumns
 			? html`${this._styleElement}
 					<div

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts

@@ -36,7 +36,7 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	render() {
+	override render() {
 		const template = repeat(
 			this._columnsArray,
 			(index) => index,
@@ -60,7 +60,7 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
 		return html`<div id="wrapper">${template}</div>`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			#wrapper {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts

@@ -52,7 +52,7 @@ export class UmbPropertyEditorUIBlockGridElement
 	private _layoutColumns?: number;
 
 	@property({ attribute: false })
-	public set value(value: UmbBlockGridValueModel | undefined) {
+	public override set value(value: UmbBlockGridValueModel | undefined) {
 		const buildUpValue: Partial<UmbBlockGridValueModel> = value ? { ...value } : {};
 		buildUpValue.layout ??= {};
 		buildUpValue.contentData ??= [];
@@ -63,7 +63,7 @@ export class UmbPropertyEditorUIBlockGridElement
 		this.#context.setContents(this._value.contentData);
 		this.#context.setSettings(this._value.settingsData);
 	}
-	public get value(): UmbBlockGridValueModel {
+	public override get value(): UmbBlockGridValueModel {
 		return this._value;
 	}
 
@@ -88,7 +88,7 @@ export class UmbPropertyEditorUIBlockGridElement
 		});
 	}
 
-	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+	protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
 
 		this.observe(this.#context.gridColumns, (gridColumns) => {
@@ -99,13 +99,13 @@ export class UmbPropertyEditorUIBlockGridElement
 		});
 	}
 
-	render() {
+	override render() {
 		return html` <umb-block-grid-entries
 			.areaKey=${null}
 			.layoutColumns=${this._layoutColumns}></umb-block-grid-entries>`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts

@@ -31,7 +31,7 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-button label=${this.localize.term('blockEditor_addBlockGroup')} look="placeholder" @click=${this.#addGroup}>
 				${this.localize.term('blockEditor_addBlockGroup')}
@@ -39,7 +39,7 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			uui-button {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

@@ -38,7 +38,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 	}
 
 	// TODO: Implement mandatory?
-	render() {
+	override render() {
 		return html`
 			<umb-input-static-file
 				@change=${this._onChange}
@@ -51,7 +51,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 		`;
 	}
 
-	static styles = [UmbTextStyles];
+	static override styles = [UmbTextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridLayoutStylesheetElement;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts

@@ -212,7 +212,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 		);
 	}
 
-	render() {
+	override render() {
 		return html`<div id="groups">
 			${this._notGroupedBlockTypes
 				? html`<umb-input-block-type
@@ -256,7 +256,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 		</div>`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			uui-input:not(:hover, :focus) {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

@@ -5,7 +5,7 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
 
 @customElement('umb-block-grid-type-workspace-view-advanced')
 export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
-	render() {
+	override render() {
 		return html`
 			<uui-box headline="Advanced">
 				<umb-property
@@ -46,7 +46,7 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts

@@ -30,7 +30,7 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 		}).passContextAliasMatches();
 	}
 
-	render() {
+	override render() {
 		return this._areaConfigConfigurationObject
 			? html`
 					<uui-box headline="Areas">
@@ -51,7 +51,7 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 			: nothing;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts

@@ -76,7 +76,7 @@ export class UmbBlockGridTypeWorkspaceViewSettingsElement extends UmbLitElement
 		this.#datasetContext?.setPropertyValue('rowMaxSpan', (e.target as UmbInputNumberRangeElement).maxValue);
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box headline=${this.localize.term('general_general')}>
 				<umb-property
@@ -152,7 +152,7 @@ export class UmbBlockGridTypeWorkspaceViewSettingsElement extends UmbLitElement
 		}
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts

@@ -136,11 +136,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		`;
 	}
 
-	render() {
+	override render() {
 		return this.#renderBlock();
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				position: relative;

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts

@@ -59,7 +59,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 		this.#workspaceContext.load(this.#contentUdi);
 	}
 
-	render() {
+	override render() {
 		return html` <uui-box>
 			<button
 				slot="header"
@@ -77,7 +77,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 		</uui-box>`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			#accordion-button {

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts

@@ -29,14 +29,14 @@ export class UmbRefListBlockElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`<uui-ref-node
 			standalone
 			.name=${this.label ?? ''}
 			href=${this._workspaceEditPath ?? '#'}></uui-ref-node>`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			uui-ref-node {
 				min-height: var(--uui-size-16);

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts

@@ -100,7 +100,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 		return this._catalogueRouteBuilderState.getValue()?.({ view: 'clipboard', index: index });
 	}
 
-	async setLayouts(layouts: Array<UmbBlockListLayoutModel>) {
+	override async setLayouts(layouts: Array<UmbBlockListLayoutModel>) {
 		await this._retrieveManager;
 		this._manager?.setLayouts(layouts);
 	}
@@ -127,7 +127,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 	}
 
 	// create Block?
-	async delete(contentUdi: string) {
+	override async delete(contentUdi: string) {
 		// TODO: Loop through children and delete them as well?
 		await super.delete(contentUdi);
 	}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -156,7 +156,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	};
 
-	render() {
+	override render() {
 		let createPath: string | undefined;
 		if (this._blocks?.length === 1) {
 			const elementKey = this._blocks[0].contentElementTypeKey;
@@ -190,7 +190,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 			</uui-button-group>`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 
 		css`

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts

@@ -61,7 +61,7 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	render() {
+	override render() {
 		return html`<umb-input-block-type
 			.value=${this.value}
 			.workspacePath=${this._workspacePath}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts

@@ -5,7 +5,7 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
 
 @customElement('umb-block-list-type-workspace-view-settings')
 export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
-	render() {
+	override render() {
 		return html`
 			<uui-box headline="Editor Appearance">
 				<umb-property
@@ -80,7 +80,7 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry-inline.element.ts

@@ -7,7 +7,7 @@ import { css, customElement } from '@umbraco-cms/backoffice/external/lit';
  */
 @customElement('umb-rte-block-inline')
 export class UmbBlockRteEntryInlineElement extends UmbBlockRteEntryElement {
-	static styles = [
+	static override styles = [
 		...UmbBlockRteEntryElement.styles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts

@@ -91,7 +91,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		});
 	}
 
-	connectedCallback() {
+	override connectedCallback() {
 		super.connectedCallback();
 
 		// eslint-disable-next-line wc/no-self-class
@@ -132,11 +132,11 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		`;
 	}
 
-	render() {
+	override render() {
 		return this.#renderBlock();
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			:host {
 				position: relative;

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts

@@ -31,13 +31,13 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 		});
 	}
 
-	render() {
+	override render() {
 		return html`<uui-ref-node standalone .name=${this.label ?? ''} href=${this._workspaceEditPath ?? '#'}
 			><uui-icon slot="icon" .name=${this.icon ?? null}></uui-icon
 		></uui-ref-node>`;
 	}
 
-	static styles = [
+	static override styles = [
 		css`
 			uui-ref-node {
 				min-height: var(--uui-size-16);