From 9f36a7f43fe0a2b8698438563c3a2febee8a1ca0 Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Wed, 22 Mar 2023 19:06:03 +1000
Subject: [PATCH 1/3] Fixes broken workspace scroll (#616)

* float to remove from document flow

* consistent scroll behaviour in all slots
clean up redundant css

* register data type workspace action in the correct workspace

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
---
 .../dashboard-redirect-management.element.ts  | 11 ++-
 .../welcome/dashboard-welcome.element.ts      |  1 -
 .../document-workspace-split-view.element.ts  |  2 +-
 ...ocument-workspace-view-edit-tab.element.ts |  4 +-
 .../dashboard-members-welcome.element.ts      | 10 +-
 .../member-groups/workspace/manifests.ts      |  2 +-
 .../member-group-workspace-edit.element.ts    | 52 +++++++++-
 ...kages-market-place-section-view.element.ts | 49 ++++-----
 .../views/section-view-examine-overview.ts    |  5 +
 .../views/health-check-group.element.ts       |  9 +-
 .../views/health-check-overview.element.ts    | 11 ++-
 .../dashboard-models-builder.element.ts       | 11 ++-
 ...dashboard-performance-profiling.element.ts |  5 +
 .../dashboard-published-status.element.ts     |  5 +
 .../dashboard-settings-welcome.element.ts     |  1 +
 .../telemetry/dashboard-telemetry.element.ts  |  7 +-
 .../data-types/workspace/manifests.ts         | 10 +-
 .../extension-root-workspace.element.ts       | 10 +-
 .../logviewer-root-workspace.element.ts       |  4 -
 .../overview/log-overview-view.element.ts     |  6 +-
 .../backoffice-main.element.ts                | 15 +--
 .../body-layout/body-layout.element.ts        |  2 +-
 .../shared/components/debug/debug.element.ts  |  6 +-
 .../section-main/section-main.element.ts      |  1 +
 .../section-views/section-views.element.ts    |  2 +
 .../components/section/section.element.ts     |  5 -
 .../workspace-layout.element.ts               |  6 ++
 ...ashboard-translation-dictionary.element.ts |  1 +
 .../section-view-user-groups.element.ts       | 16 ++-
 .../workspace-view-user-groups.element.ts     |  5 +
 .../grid/workspace-view-users-grid.element.ts | 17 ++--
 .../workspace-view-users-table.element.ts     |  6 +-
 .../views/users/section-view-users.element.ts |  6 +-
 .../workspace-view-users-overview.element.ts  | 99 +++++++++----------
 .../src/core/css/custom-properties.css        |  2 +
 .../src/core/router/router-slot.element.ts    | 14 ++-
 36 files changed, 283 insertions(+), 135 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index 22ebfabae6..174905edee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -5,7 +5,11 @@ import { UUIButtonState, UUIPaginationElement, UUIPaginationEvent } from '@umbra
 import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { RedirectManagementResource, RedirectStatusModel, RedirectUrlResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	RedirectManagementResource,
+	RedirectStatusModel,
+	RedirectUrlResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-redirect-management')
@@ -13,6 +17,11 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			
 			.actions {
 				display: flex;
 				gap: var(--uui-size-space-1);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
index e4411cb4c7..3d8aca6433 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
@@ -9,7 +9,6 @@ export class UmbDashboardWelcomeElement extends LitElement {
 		css`
 			:host {
 				display: block;
-				position: relative;
 				margin: var(--uui-size-layout-1);
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-split-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-split-view.element.ts
index ada7416b49..09bae444fd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-split-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-split-view.element.ts
@@ -24,7 +24,7 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 			#splitViews {
 				display: flex;
 				width: 100%;
-				height: 100%;
+				height: calc(100% - var(--umb-footer-layout-height));
 			}
 
 			#breadcrumbs {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
index 1b8066421a..656aa37c3b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
@@ -17,8 +17,8 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 				margin: var(--uui-size-layout-1);
 			}
 
-			uui-box {
-				margin-bottom: var(--uui-size-layout-1);
+			uui-box + uui-box {
+				margin-top: var(--uui-size-layout-1);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
index dc86656085..3b2acc07eb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
@@ -4,7 +4,15 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-members-welcome')
 export class UmbDashboardMembersWelcomeElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 
 	render() {
 		return html`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/manifests.ts
index 24bacb44ca..05b69158ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/manifests.ts
@@ -36,7 +36,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 const workspaceActions: Array<ManifestWorkspaceAction> = [
 	{
 		type: 'workspaceAction',
-		alias: 'Umb.WorkspaceAction.MemberGroup.SaveAndPublish',
+		alias: 'Umb.WorkspaceAction.MemberGroup.Save',
 		name: 'Save Member Group Workspace Action',
 		meta: {
 			label: 'Save',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
index 7fe6a6d456..b4d65802a2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
@@ -1,7 +1,10 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
+import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
+import { UmbWorkspaceMemberGroupContext } from './member-group-workspace.context';
 
 /**
  * @element umb-member-group-edit-workspace
@@ -17,11 +20,56 @@ export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
 				width: 100%;
 				height: 100%;
 			}
+
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+			
+			#name {
+				width: 100%;
+				flex: 1 1 auto;
+				align-items: center;
+			}
 		`,
 	];
 
+	#workspaceContext?: UmbWorkspaceMemberGroupContext;
+
+	@state()
+	private _memberGroup?: MemberGroupDetails;
+
+	constructor() {
+		super();
+
+		this.consumeContext<UmbWorkspaceMemberGroupContext>('umbWorkspaceContext', (instance) => {
+			this.#workspaceContext = instance;
+			this.#observeMemberGroup();
+		});
+	}
+
+	#observeMemberGroup() {
+		if (!this.#workspaceContext) return;
+		this.observe(this.#workspaceContext.data, (data) => (this._memberGroup = data));
+	}
+
+	// TODO. find a way where we don't have to do this for all workspaces.
+	#handleInput(event: UUIInputEvent) {
+		if (event instanceof UUIInputEvent) {
+			const target = event.composedPath()[0] as UUIInputElement;
+
+			if (typeof target?.value === 'string') {
+				this.#workspaceContext?.setName(target.value);
+			}
+		}
+	}
+
 	render() {
-		return html` <umb-workspace-layout alias="Umb.Workspace.MemberGroup"> Member Group </umb-workspace-layout> `;
+		return html`<umb-workspace-layout alias="Umb.Workspace.MemberGroup">
+			<div id="header" slot="header">
+				<uui-input id="name" .value=${this._memberGroup?.name} @input="${this.#handleInput}"> </uui-input>
+			</div>
+		</umb-workspace-layout> `;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
index fb4eb3af97..d73c1a27dc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
@@ -3,21 +3,27 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-packages-market-place-section-view')
 export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
-	static styles = [css`
-		#container {
-			height: 100%;
-			display: flex;
-			align-items: stretch;
-		}
+	static styles = [
+		css`
+			:host {
+				height: calc(100% - var(--umb-header-layout-height));
+				display: block;
+			}
 
+			#container {
+				height: 100%;
+				display: flex;
+				align-items: stretch;
+			}
 
-		iframe {
-			width: 100%;
-  			height: 100%;
-  			overflow: hidden;
-			border: none;
-		}
-	`];
+			iframe {
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				border: none;
+			}
+		`,
+	];
 
 	// TODO: This URL comes from the server
 	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
@@ -25,15 +31,14 @@ export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
 	marketplaceUrl = 'https://marketplace.umbraco.com/?umbversion=11.1.0&style=backoffice';
 
 	render() {
-		return html`
-			<div id="container">
-				<iframe
-					src="${this.marketplaceUrl}"
-					title="Umbraco Marketplace"
-					allowfullscreen
-					allow="geolocation; autoplay; clipboard-write; encrypted-media">
-				</iframe>
-			</div>`;
+		return html` <div id="container">
+			<iframe
+				src="${this.marketplaceUrl}"
+				title="Umbraco Marketplace"
+				allowfullscreen
+				allow="geolocation; autoplay; clipboard-write; encrypted-media">
+			</iframe>
+		</div>`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
index 02c5b7f89c..75c2996779 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
@@ -17,6 +17,11 @@ export class UmbDashboardExamineOverviewElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display:block;
+				margin:var(--uui-size-layout-1);
+			}
+
 			uui-box + uui-box {
 				margin-top: var(--uui-size-space-5);
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
index ce5e9c3278..97459331cf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
@@ -26,8 +26,13 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			uui-box {
-				margin-bottom: var(--uui-size-space-5);
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
 			}
 
 			p {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
index aabb536218..71114fb667 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
@@ -3,14 +3,11 @@ import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UUIButtonState } from '@umbraco-ui/uui';
 
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
 	UmbHealthCheckDashboardContext,
 	UMB_HEALTHCHECK_DASHBOARD_CONTEXT_TOKEN,
 } from '../health-check-dashboard.context';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-
-import { ManifestHealthCheck } from '@umbraco-cms/backoffice/extensions-registry';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
 import './health-check-group-box-overview.element';
 
@@ -19,6 +16,11 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
 			uui-box + uui-box {
 				margin-top: var(--uui-size-space-5);
 			}
@@ -26,6 +28,7 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 			.flex {
 				display: flex;
 				justify-content: space-between;
+				align-items:center;
 			}
 
 			.grid {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
index 03b80a367f..249718f61e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
@@ -3,7 +3,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
-import { ModelsBuilderResponseModel, ModelsBuilderResource, ModelsModeModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	ModelsBuilderResponseModel,
+	ModelsBuilderResource,
+	ModelsModeModel,
+} from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -12,6 +16,11 @@ export class UmbDashboardModelsBuilderElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
 			.headline {
 				display: flex;
 				justify-content: space-between;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
index 630e6de151..c0db4a1944 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
@@ -10,6 +10,11 @@ export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			
 			uui-toggle {
 				font-weight: bold;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index dfe7fcd8b4..650a285706 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -13,6 +13,11 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display:block;
+				margin:var(--uui-size-layout-1);
+			}
+			
 			uui-box + uui-box {
 				margin-top: var(--uui-size-space-5);
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
index 83cdf0b0d9..f5363ec0ae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
@@ -11,6 +11,7 @@ export class UmbDashboardSettingsWelcomeElement extends LitElement {
 				display: grid;
 				grid-gap: var(--uui-size-7);
 				grid-template-columns: repeat(3, 1fr);
+				margin: var(--uui-size-layout-1);
 			}
 
 			@media (max-width: 1200px) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
index 76507ae5c3..7fdcb95d64 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -12,8 +12,9 @@ export class UmbDashboardTelemetryElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			.italic {
-				font-style: italic;
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
 			}
 		`,
 	];
@@ -120,7 +121,7 @@ export class UmbDashboardTelemetryElement extends UmbLitElement {
 		return html`
 			<uui-box>
 				<h1>Consent for telemetry data</h1>
-				<div style="max-width:580px">
+				<div style="max-width:75ch">
 					<p>
 						In order to improve Umbraco and add new functionality based on as relevant information as possible, we would
 						like to collect system- and usage information from your installation. Aggregate data will be shared on a
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/manifests.ts
index 337c38cf7d..f743839a8f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/manifests.ts
@@ -5,9 +5,11 @@ import type {
 	ManifestWorkspaceView,
 } from '@umbraco-cms/backoffice/extensions-registry';
 
+const DATA_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.DataType';
+
 const workspace: ManifestWorkspace = {
 	type: 'workspace',
-	alias: 'Umb.Workspace.DataType',
+	alias: DATA_TYPE_WORKSPACE_ALIAS,
 	name: 'Data Type Workspace',
 	loader: () => import('./data-type-workspace.element'),
 	meta: {
@@ -28,7 +30,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 			icon: 'edit',
 		},
 		conditions: {
-			workspaces: ['Umb.Workspace.DataType'],
+			workspaces: [DATA_TYPE_WORKSPACE_ALIAS],
 		},
 	},
 	{
@@ -43,7 +45,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 			icon: 'info',
 		},
 		conditions: {
-			workspaces: ['Umb.Workspace.DataType'],
+			workspaces: [DATA_TYPE_WORKSPACE_ALIAS],
 		},
 	},
 ];
@@ -60,7 +62,7 @@ const workspaceActions: Array<ManifestWorkspaceAction> = [
 			api: UmbSaveWorkspaceAction,
 		},
 		conditions: {
-			workspaces: ['Umb.Workspace.MemberGroup'],
+			workspaces: [DATA_TYPE_WORKSPACE_ALIAS],
 		},
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
index bf56e13af7..0d9292a280 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
 import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
@@ -9,6 +9,12 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffic
 
 @customElement('umb-extension-root-workspace')
 export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
+	static styles = [css`
+		uui-box {
+			margin: var(--uui-size-layout-1);
+		}
+	`]
+
 	@state()
 	private _extensions?: Array<ManifestTypes> = undefined;
 
@@ -57,7 +63,7 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<umb-workspace-layout headline="Extensions" alias="Umb.Workspace.ExtensionRoot">
+			<umb-workspace-layout headline="Extensions" alias="Umb.Workspace.ExtensionRoot" .enforceNoFooter=${true}>
 				<uui-box>
 					<uui-table>
 						<uui-table-head>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
index 2b70f422b7..c656c4394a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
@@ -37,10 +37,6 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 				align-items: center;
 			}
 
-			#router-slot {
-				height: 100%;
-			}
-
 			uui-tab-group {
 				--uui-tab-divider: var(--uui-color-border);
 				border-left: 1px solid var(--uui-color-border);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
index d59f75d181..d4faca5e18 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
@@ -11,14 +11,14 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 		css`
 			:host {
 				display: block;
+				margin: var(--uui-size-layout-1);
 			}
 
 			#logviewer-layout {
-				margin: 20px;
-				height: calc(100vh - 160px);
+				padding-bottom: var(--uui-size-layout-1);
 				display: grid;
 				grid-template-columns: 7fr 2fr;
-				grid-template-rows: 1fr 1fr;
+				grid-template-rows: auto auto;
 				gap: 20px 20px;
 				grid-auto-flow: row;
 				grid-template-areas:
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
index fc054295d3..e4b2dde68b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
@@ -2,13 +2,13 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { state } from 'lit/decorators.js';
-import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
-import { UmbSectionElement } from '../section/section.element';
-import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
-import type { IRoutingInfo, UmbRouterSlotChangeEvent } from '@umbraco-cms/internal/router';
+import type { UmbRouterSlotChangeEvent } from '@umbraco-cms/internal/router';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { createExtensionElementOrFallback } from '@umbraco-cms/backoffice/extensions-api';
+import { UmbSectionElement } from '../section/section.element';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
+import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMain extends UmbLitElement {
@@ -18,12 +18,7 @@ export class UmbBackofficeMain extends UmbLitElement {
 			:host {
 				background-color: var(--uui-color-background);
 				display: block;
-				width: 100%;
-				height: 100%;
-				overflow: hidden;
-			}
-			router-slot {
-				height: 100%;
+				height: calc(100% - 60px); // 60 => top header height
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
index 66406ae01c..aeb3de4c75 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
@@ -32,7 +32,7 @@ export class UmbBodyLayout extends LitElement {
 				align-items: center;
 				justify-content: space-between;
 				width: 100%;
-				height: 70px;
+				height: var(--umb-header-layout-height);
 				background-color: var(--uui-color-surface);
 				border-bottom: 1px solid var(--uui-color-border);
 				box-sizing: border-box;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 9552a2e7dd..559f490972 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,16 +1,20 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
 import { UmbContextDebugRequest } from '@umbraco-cms/backoffice/context-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
 
 @customElement('umb-debug')
 export class UmbDebug extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				float: right;
+			}
+
 			#container {
 				display: block;
 				font-family: monospace;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
index 332b308b3c..c9a4b9f487 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
@@ -12,6 +12,7 @@ export class UmbSectionMainElement extends LitElement {
 				height: 100%;
 			}
 
+			main,
 			slot {
 				display: flex;
 				flex-direction: column;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
index 5f117f02b3..890f27e0a9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
@@ -21,6 +21,8 @@ export class UmbSectionViewsElement extends UmbLitElement {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
+				height:var(--umb-header-layout-height);
+				box-sizing: border-box;
 			}
 
 			#views {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
index 5fa2a8be93..3cc798c083 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
@@ -27,11 +27,6 @@ export class UmbSectionElement extends UmbLitElement {
 				display: flex;
 			}
 
-			#router-slot {
-				overflow: auto;
-				height: 100%;
-			}
-
 			h3 {
 				padding: var(--uui-size-4) var(--uui-size-8);
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
index 49d7a81064..bbe2cf2a8e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
@@ -39,6 +39,12 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 				height: 100%;
 			}
 
+			#router-slot {
+				display:flex;
+				flex-direction:column;
+				height:100%;
+			}
+
 			uui-input {
 				width: 100%;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index 19b1374898..d54a609082 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -19,6 +19,7 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 				display: flex;
 				flex-direction: column;
 				height: 100%;
+				margin: var(--uui-size-layout-1);
 			}
 
 			#dictionary-top-bar {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
index 618d277b17..270825f4e6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
@@ -1,10 +1,24 @@
-import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import './workspace-view-user-groups.element';
 
 @customElement('umb-section-view-user-groups')
 export class UmbSectionViewUserGroupsElement extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+			}
+
+			#router-slot {
+				height: calc(100% - var(--umb-header-layout-height) - var(--umb-footer-layout-height));
+			}
+		`,
+	];
+
 	render() {
 		return html`<umb-workspace-view-user-groups></umb-workspace-view-user-groups>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
index bef2b604b0..0fa5dd071d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
@@ -31,6 +31,11 @@ export class UmbWorkspaceViewUserGroupsElement extends UmbLitElement {
 				height: 100%;
 				display: flex;
 				flex-direction: column;
+				margin:var(--uui-size-layout-1);
+			}
+
+			umb-table {
+				padding:0;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
index ebd16362bd..f3566ee265 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
@@ -18,7 +18,6 @@ export class UmbWorkspaceViewUsersGridElement extends UmbLitElement {
 		UUITextStyles,
 		css`
 			:host {
-				height: 100%;
 				display: flex;
 				flex-direction: column;
 			}
@@ -147,15 +146,13 @@ export class UmbWorkspaceViewUsersGridElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-scroll-container>
-				<div id="user-grid">
-					${repeat(
-						this._users,
-						(user) => user.key,
-						(user) => this.renderUserCard(user)
-					)}
-				</div>
-			</uui-scroll-container>
+			<div id="user-grid">
+				${repeat(
+					this._users,
+					(user) => user.key,
+					(user) => this.renderUserCard(user)
+				)}
+			</div>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
index f258361c81..c3c8519b36 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
@@ -27,10 +27,14 @@ export class UmbWorkspaceViewUsersTableElement extends UmbLitElement {
 		UUITextStyles,
 		css`
 			:host {
-				height: 100%;
 				display: flex;
 				flex-direction: column;
 			}
+
+			umb-table {
+				padding: 0;
+				margin: 0 var(--uui-size-layout-1) var(--uui-size-layout-1);
+			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
index 0817a7384c..d84ed8a6c1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
@@ -21,6 +21,10 @@ export class UmbSectionViewUsersElement extends UmbLitElement {
 		css`
 			:host {
 				height: 100%;
+			}			
+
+			#router-slot {
+				height: calc(100% - var(--umb-header-layout-height));
 			}
 		`,
 	];
@@ -129,7 +133,7 @@ export class UmbSectionViewUsersElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
+		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
index ce9d16ac05..b0e9bb188b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
@@ -28,7 +28,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 
 			#sticky-top {
 				position: sticky;
-				top: -1px;
+				top: 0px;
 				z-index: 1;
 				box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
 				transition: 250ms box-shadow ease-in-out;
@@ -73,9 +73,6 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 				color: inherit;
 				text-decoration: none;
 			}
-			router-slot {
-				overflow: hidden;
-			}
 		`,
 	];
 
@@ -173,56 +170,58 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<div id="sticky-top">
-				<div id="user-list-top-bar">
-					<uui-button
-						@click=${this._showInviteOrCreate}
-						label=${this.isCloud ? 'Invite' : 'Create' + ' user'}
-						look="outline"></uui-button>
-					<uui-input @input=${this._updateSearch} label="search" id="input-search"></uui-input>
-					<div>
-						<!-- TODO: consider making this a shared component, as we need similar for other locations, example media library, members. -->
-						<uui-popover margin="8">
-							<uui-button @click=${this._handleTogglePopover} slot="trigger" label="status">
-								Status: <b>All</b>
+			<uui-scroll-container>
+				<div id="sticky-top">
+					<div id="user-list-top-bar">
+						<uui-button
+							@click=${this._showInviteOrCreate}
+							label=${this.isCloud ? 'Invite' : 'Create' + ' user'}
+							look="outline"></uui-button>
+						<uui-input @input=${this._updateSearch} label="search" id="input-search"></uui-input>
+						<div>
+							<!-- TODO: consider making this a shared component, as we need similar for other locations, example media library, members. -->
+							<uui-popover margin="8">
+								<uui-button @click=${this._handleTogglePopover} slot="trigger" label="status">
+									Status: <b>All</b>
+								</uui-button>
+								<div slot="popover" class="filter-dropdown">
+									<uui-checkbox label="Active"></uui-checkbox>
+									<uui-checkbox label="Inactive"></uui-checkbox>
+									<uui-checkbox label="Invited"></uui-checkbox>
+									<uui-checkbox label="Disabled"></uui-checkbox>
+								</div>
+							</uui-popover>
+							<uui-popover margin="8">
+								<uui-button @click=${this._handleTogglePopover} slot="trigger" label="groups">
+									Groups: <b>All</b>
+								</uui-button>
+								<div slot="popover" class="filter-dropdown">
+									<uui-checkbox label="Active"></uui-checkbox>
+									<uui-checkbox label="Inactive"></uui-checkbox>
+									<uui-checkbox label="Invited"></uui-checkbox>
+									<uui-checkbox label="Disabled"></uui-checkbox>
+								</div>
+							</uui-popover>
+							<uui-popover margin="8">
+								<uui-button @click=${this._handleTogglePopover} slot="trigger" label="order by">
+									Order by: <b>Name (A-Z)</b>
+								</uui-button>
+								<div slot="popover" class="filter-dropdown">
+									<uui-checkbox label="Active"></uui-checkbox>
+									<uui-checkbox label="Inactive"></uui-checkbox>
+									<uui-checkbox label="Invited"></uui-checkbox>
+									<uui-checkbox label="Disabled"></uui-checkbox>
+								</div>
+							</uui-popover>
+							<uui-button label="view toggle" @click=${this._toggleViewType} compact look="outline">
+								<uui-icon name="settings"></uui-icon>
 							</uui-button>
-							<div slot="popover" class="filter-dropdown">
-								<uui-checkbox label="Active"></uui-checkbox>
-								<uui-checkbox label="Inactive"></uui-checkbox>
-								<uui-checkbox label="Invited"></uui-checkbox>
-								<uui-checkbox label="Disabled"></uui-checkbox>
-							</div>
-						</uui-popover>
-						<uui-popover margin="8">
-							<uui-button @click=${this._handleTogglePopover} slot="trigger" label="groups">
-								Groups: <b>All</b>
-							</uui-button>
-							<div slot="popover" class="filter-dropdown">
-								<uui-checkbox label="Active"></uui-checkbox>
-								<uui-checkbox label="Inactive"></uui-checkbox>
-								<uui-checkbox label="Invited"></uui-checkbox>
-								<uui-checkbox label="Disabled"></uui-checkbox>
-							</div>
-						</uui-popover>
-						<uui-popover margin="8">
-							<uui-button @click=${this._handleTogglePopover} slot="trigger" label="order by">
-								Order by: <b>Name (A-Z)</b>
-							</uui-button>
-							<div slot="popover" class="filter-dropdown">
-								<uui-checkbox label="Active"></uui-checkbox>
-								<uui-checkbox label="Inactive"></uui-checkbox>
-								<uui-checkbox label="Invited"></uui-checkbox>
-								<uui-checkbox label="Disabled"></uui-checkbox>
-							</div>
-						</uui-popover>
-						<uui-button label="view toggle" @click=${this._toggleViewType} compact look="outline">
-							<uui-icon name="settings"></uui-icon>
-						</uui-button>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<umb-router-slot .routes=${this._routes}></umb-router-slot>
+				<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>
+			</uui-scroll-container>
 
 			${this._renderSelection()}
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/css/custom-properties.css b/src/Umbraco.Web.UI.Client/src/core/css/custom-properties.css
index 4f728ed1fd..f33b370e2d 100644
--- a/src/Umbraco.Web.UI.Client/src/core/css/custom-properties.css
+++ b/src/Umbraco.Web.UI.Client/src/core/css/custom-properties.css
@@ -1,3 +1,5 @@
 :root {
 	--uui-color-positive: #1c874c;
+	--umb-footer-layout-height: 54px;
+	--umb-header-layout-height: 70px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 3f44377ec5..4f33902f87 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,6 +1,6 @@
 import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
-import { LitElement, PropertyValueMap } from 'lit';
+import { css, LitElement, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
 import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
@@ -14,6 +14,18 @@ import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
  */
 @customElement('umb-router-slot')
 export class UmbRouterSlotElement extends LitElement {
+	static styles = [css`
+		:host {
+			display:flex;
+			flex-direction:column;
+			height:100%;
+		}
+
+		router-slot {
+			height:100%;
+		}
+	`]
+
 	#router: RouterSlot = new RouterSlot();
 	#listening = false;
 

From 0c2ca8996209f5bee91f9e076ca46df36160db0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz?= <l.mordasiewicz@gmail.com>
Date: Wed, 22 Mar 2023 10:34:19 +0100
Subject: [PATCH 2/3] #579 Drop lit-html as direct dependency (#609)

* Drop lit-html as direct dependency

* remove lit-html imports after merge

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
---
 .../.storybook/preview.js                     |  2 +-
 .../property-editor-ui/stories.ts.hbs         |  2 +-
 src/Umbraco.Web.UI.Client/package-lock.json   |  1 -
 src/Umbraco.Web.UI.Client/package.json        |  1 -
 .../src/backoffice/backoffice.stories.ts      |  2 +-
 .../dashboard-redirect-management.stories.ts  |  2 +-
 .../welcome/dashboard-welcome.stories.ts      |  2 +-
 .../allowed-document-types-modal.element.ts   |  2 +-
 .../document-type-workspace.stories.ts        |  2 +-
 ...space-view-document-type-design.stories.ts |  2 +-
 ...ent-table-actions-column-layout.element.ts |  2 +-
 .../workspace/document-workspace.stories.ts   |  2 +-
 .../document-info-workspace-view.stories.ts   |  2 +-
 .../workspace/media-workspace.stories.ts      |  2 +-
 .../edit/media-edit-workspace-view.stories.ts |  2 +-
 .../info/media-info-workspace-view.stories.ts |  2 +-
 .../dashboard-members-welcome.stories.ts      |  2 +-
 .../member-group-workspace.stories.ts         |  2 +-
 ...orkspace-view-member-group-info.stories.ts |  2 +-
 .../workspace/member-workspace.stories.ts     |  2 +-
 .../workspace-package-builder.element.ts      |  2 +-
 .../modals/search/search-modal.element.ts     |  2 +-
 .../dashboard-examine-management.stories.ts   |  2 +-
 .../dashboard-health-check.stories.ts         |  2 +-
 .../dashboard-models-builder.stories.ts       |  2 +-
 ...dashboard-performance-profiling.stories.ts |  2 +-
 .../dashboard-published-status.stories.ts     |  2 +-
 .../dashboard-settings-welcome.stories.ts     |  2 +-
 .../telemetry/dashboard-telemetry.stories.ts  |  2 +-
 .../workspace/data-type-workspace.stories.ts  |  2 +-
 ...ata-type-details-workspace-view.stories.ts |  2 +-
 .../workspace-view-data-type-info.stories.ts  |  2 +-
 .../extension-root-workspace.stories.ts       |  2 +-
 .../app-language-select.element.ts            |  2 +-
 .../language-picker-modal.element.ts          |  4 +-
 ...root-table-delete-column-layout.element.ts |  2 +-
 .../language-workspace-edit.element.ts        |  2 +-
 .../log-viewer-level-tag.element.ts           |  2 +-
 .../logviewer-root-workspace.element.ts       |  2 +-
 .../relation-type-workspace.stories.ts        |  2 +-
 ...pe-workspace-view-relation-type.stories.ts |  2 +-
 ...ace-view-relation-type-relation.stories.ts |  2 +-
 .../dashboard-collection.element.ts           |  2 +-
 .../dashboard-collection.stories.ts           |  2 +-
 .../body-layout/body-layout.stories.ts        | 15 +++---
 .../button-with-dropdown.stories.ts           |  3 +-
 .../code-block/code-block.stories.ts          | 23 ++++----
 .../donut-chart/donut-chart.stories.ts        |  2 +-
 .../empty-state/empty-state.stories.ts        | 27 +++++-----
 .../entity-bulk-action.element.ts             |  2 +-
 .../footer-layout/footer-layout.stories.ts    |  2 +-
 .../history/history-list.stories.ts           |  2 +-
 .../input-culture-select.element.ts           |  2 +-
 .../input-document-picker.element.ts          |  2 +-
 .../input-language-picker.element.ts          |  2 +-
 .../input-media-picker.element.ts             |  2 +-
 .../components/menu-item/menu-item.element.ts |  2 +-
 .../property-type-based-property.element.ts   |  2 +-
 .../ref-property-editor-ui.stories.ts         | 53 +++++++++----------
 .../section-main/section-main.stories.ts      |  2 +-
 .../section-sidebar-context-menu.element.ts   |  2 +-
 .../section-sidebar-menu.stories.ts           |  2 +-
 .../section-sidebar.stories.ts                |  2 +-
 .../shared/components/table/table.element.ts  |  4 +-
 .../components/tree/tree-item.element.ts      |  2 +-
 .../shared/components/tree/tree.element.ts    |  2 +-
 .../variant-selector.element.ts               |  2 +-
 .../workspace-property.element.ts             |  2 +-
 .../workspace-property.stories.ts             |  2 +-
 .../workspace-view-collection.element.ts      |  2 +-
 .../workspace-footer-layout.stories.ts        |  2 +-
 .../workspace-layout.stories.ts               |  2 +-
 .../workspace-property-layout.stories.ts      |  2 +-
 .../clear/property-action-clear.stories.ts    |  2 +-
 .../copy/property-action-copy.stories.ts      |  2 +-
 .../property-editor-config.element.ts         |  2 +-
 .../property-editor-config.stories.ts         |  2 +-
 ...-block-grid-block-configuration.stories.ts |  2 +-
 ...-block-grid-group-configuration.stories.ts |  2 +-
 ...ui-block-grid-stylesheet-picker.stories.ts |  2 +-
 .../property-editor-ui-block-grid.stories.ts  |  2 +-
 ...-block-list-block-configuration.stories.ts |  2 +-
 .../property-editor-ui-block-list.stories.ts  |  2 +-
 ...roperty-editor-ui-checkbox-list.stories.ts |  2 +-
 ...on-view-bulk-action-permissions.stories.ts |  2 +-
 ...ction-view-column-configuration.stories.ts |  2 +-
 ...ction-view-layout-configuration.stories.ts |  2 +-
 ...tor-ui-collection-view-order-by.stories.ts |  2 +-
 ...perty-editor-ui-collection-view.stories.ts |  2 +-
 ...property-editor-ui-color-picker.stories.ts |  2 +-
 .../property-editor-ui-date-picker.stories.ts | 35 ++++++------
 ...perty-editor-ui-document-picker.stories.ts |  2 +-
 .../property-editor-ui-dropdown.stories.ts    |  2 +-
 .../property-editor-ui-eye-dropper.stories.ts |  2 +-
 .../property-editor-ui-icon-picker.stories.ts |  2 +-
 ...roperty-editor-ui-image-cropper.stories.ts |  2 +-
 ...or-ui-image-crops-configuration.stories.ts |  2 +-
 .../label/property-editor-ui-label.stories.ts |  2 +-
 ...perty-editor-ui-markdown-editor.stories.ts |  2 +-
 ...property-editor-ui-media-picker.stories.ts |  2 +-
 ...y-editor-ui-member-group-picker.stories.ts |  2 +-
 ...roperty-editor-ui-member-picker.stories.ts |  2 +-
 ...erty-editor-ui-multi-url-picker.stories.ts |  2 +-
 ...-editor-ui-multiple-text-string.element.ts |  2 +-
 ...-editor-ui-multiple-text-string.stories.ts |  2 +-
 ...property-editor-ui-number-range.stories.ts |  2 +-
 .../property-editor-ui-number.stories.ts      |  2 +-
 ...perty-editor-ui-order-direction.stories.ts |  2 +-
 ...property-editor-ui-overlay-size.stories.ts |  2 +-
 ...rty-editor-ui-radio-button-list.stories.ts |  2 +-
 .../property-editor-ui-slider.stories.ts      |  2 +-
 ...rty-editor-ui-tags-storage-type.stories.ts |  2 +-
 .../tags/property-editor-ui-tags.stories.ts   |  2 +-
 .../property-editor-ui-text-box.stories.ts    |  2 +-
 .../property-editor-ui-textarea.stories.ts    |  2 +-
 ...ditor-ui-tiny-mce-configuration.stories.ts |  2 +-
 .../property-editor-ui-tiny-mce.stories.ts    |  2 +-
 .../property-editor-ui-toggle.stories.ts      |  2 +-
 ...ditor-ui-tree-picker-start-node.stories.ts |  2 +-
 .../property-editor-ui-tree-picker.stories.ts |  2 +-
 ...property-editor-ui-upload-field.stories.ts |  2 +-
 .../property-editor-ui-user-picker.stories.ts |  2 +-
 .../property-editor-ui-value-type.stories.ts  |  2 +-
 ...ashboard-translation-dictionary.element.ts |  2 +-
 .../create-dictionary-modal-layout.element.ts |  2 +-
 .../import-dictionary-modal-layout.element.ts |  2 +-
 .../workspace/dictionary-workspace.stories.ts |  2 +-
 .../workspace-view-dictionary-edit.element.ts |  2 +-
 .../workspace-view-dictionary-edit.stories.ts |  6 +--
 .../grid/workspace-view-users-grid.element.ts |  2 +-
 .../controller-host-test.element.ts           |  2 +-
 .../src/core/modal/stories/modal.stories.ts   |  2 +-
 .../story-modal-service-example.element.ts    |  2 +-
 .../src/core/stores/icon/icon.stories.ts      |  2 +-
 .../consent/installer-consent.stories.ts      |  2 +-
 .../database/installer-database.stories.ts    |  2 +-
 .../error/installer-error.stories.ts          |  2 +-
 .../src/installer/installer.stories.ts        |  2 +-
 .../installer-installing.stories.ts           |  2 +-
 .../shared/layout/installer-layout.stories.ts |  2 +-
 .../installer/shared/utils.story-helpers.ts   |  2 +-
 .../installer/user/installer-user.stories.ts  |  2 +-
 .../src/upgrader/upgrader.stories.ts          |  2 +-
 143 files changed, 214 insertions(+), 222 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index bf9f28adbd..63cdf70dc3 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -7,7 +7,7 @@ import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
 import '@umbraco-ui/uui-modal-sidebar';
 
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { setCustomElements } from '@storybook/web-components';
 
diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
index 639e3b1fa8..69c46995b8 100644
--- a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
+++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { {{className extensionType name}} } from './{{ extensionFilename extensionType name }}.element';
 import './{{ extensionFilename extensionType name }}.element';
diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 45bc7cf754..b12d83fb70 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -56,7 +56,6 @@
 				"eslint-plugin-local-rules": "^1.3.2",
 				"eslint-plugin-storybook": "^0.6.11",
 				"eslint-plugin-wc": "^1.4.0",
-				"lit-html": "^2.6.1",
 				"msw": "^1.1.0",
 				"msw-storybook-addon": "^1.7.0",
 				"openapi-typescript-codegen": "^0.23.0",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index c44eae8127..555f6d2cca 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -106,7 +106,6 @@
 		"eslint-plugin-local-rules": "^1.3.2",
 		"eslint-plugin-storybook": "^0.6.11",
 		"eslint-plugin-wc": "^1.4.0",
-		"lit-html": "^2.6.1",
 		"msw": "^1.1.0",
 		"msw-storybook-addon": "^1.7.0",
 		"openapi-typescript-codegen": "^0.23.0",
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.stories.ts
index a43b869b1a..3fd59b80df 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbBackofficeElement } from './backoffice.element';
 import './backoffice.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.stories.ts
index 99d180a303..5ca04fc51e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.stories.ts
@@ -1,7 +1,7 @@
 import './dashboard-redirect-management.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardRedirectManagementElement } from './dashboard-redirect-management.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.stories.ts
index 82ad05aea5..20d0abcacb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.stories.ts
@@ -1,7 +1,7 @@
 import './dashboard-welcome.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardWelcomeElement } from './dashboard-welcome.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
index bf146b2944..85a14bb33c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
@@ -1,7 +1,7 @@
 import { html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbDocumentTypeRepository } from '../../repository/document-type.repository';
 import { UmbAllowedDocumentTypesModalData, UmbAllowedDocumentTypesModalResult } from '.';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
index 4ea7c3095f..ae5c5e8fc8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
@@ -1,6 +1,6 @@
 import './document-type-workspace-edit.element';
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { treeData } from '../../../../core/mocks/data/document-type.data';
 import type { UmbDocumentTypeWorkspaceElement } from './document-type-workspace.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/workspace-view-document-type-design.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/workspace-view-document-type-design.stories.ts
index b3d14fe840..e1de486962 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/workspace-view-document-type-design.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/workspace-view-document-type-design.stories.ts
@@ -1,7 +1,7 @@
 import './workspace-view-document-type-design.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/document-type.data';
 //import { UmbDocumentTypeContext } from '../../document-type.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
index 48781fd710..c5dd3bac32 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import type { UmbTableColumn, UmbTableItem } from '../../../../../../shared/components/table';
 import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.stories.ts
index ce3a24444b..95bd2cf1d3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.stories.ts
@@ -1,6 +1,6 @@
 import './document-workspace-edit.element';
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import type { UmbDocumentWorkspaceElement } from './document-workspace.element';
 
 export default {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts
index 1b213e6803..60431116de 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts
@@ -1,7 +1,7 @@
 import './document-info-workspace-view.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 // import { data } from '../../../../../../core/mocks/data/document.data';
 // import { UmbNodeContext } from '../../node.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.stories.ts
index 019047dc04..82e5edea53 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.stories.ts
@@ -1,6 +1,6 @@
 import './media-workspace.element';
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { data as mediaNodes } from '../../../../core/mocks/data/media.data';
 import type { UmbMediaWorkspaceElement } from './media-workspace.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.stories.ts
index ea00e6733b..b0e7827cae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.stories.ts
@@ -1,7 +1,7 @@
 import './media-edit-workspace-view.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 // import { data } from '../../../../../../core/mocks/data/media.data';
 // import { UmbNodeContext } from '../../node.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.stories.ts
index 4afbc8700b..b05665cbb3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.stories.ts
@@ -1,7 +1,7 @@
 import './media-info-workspace-view.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 // import { data } from '../../../../../../core/mocks/data/media.data';
 // import { UmbNodeContext } from '../../node.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.stories.ts
index ab8c3929e2..0f85b67184 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.stories.ts
@@ -1,7 +1,7 @@
 import './dashboard-members-welcome.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardMembersWelcomeElement } from './dashboard-members-welcome.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.stories.ts
index 844cd022ab..ac44105f27 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './member-group-workspace.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { data } from '../../../../core/mocks/data/member-group.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts
index 6ef526d298..97b745c4ad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.stories.ts
@@ -1,7 +1,7 @@
 import './workspace-view-member-group-info.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/data-type.data';
 //import { UmbDataTypeContext } from '../../data-type.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.stories.ts
index 4a9f3778ae..ebe1cce2ce 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './member-workspace.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { data } from '../../../../core/mocks/data/member.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
index 2b5b277390..8903993ffb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UUIBooleanInputEvent, UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { css, html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbInputDocumentPickerElement } from '../../../shared/components/input-document-picker/input-document-picker.element';
 import { UmbInputMediaPickerElement } from '../../../shared/components/input-media-picker/input-media-picker.element';
 import { UmbInputLanguagePickerElement } from '../../../shared/components/input-language-picker/input-language-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
index b294c49eda..9c44c331c3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
@@ -1,6 +1,6 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, nothing } from 'lit';
-import { repeat } from 'lit-html/directives/repeat.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { customElement, query, state } from 'lit/decorators.js';
 
 export type SearchItem = {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.stories.ts
index 3e3b5c194e..1631ca4528 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardExamineManagementElement } from './dashboard-examine-management.element';
 import './dashboard-examine-management.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.stories.ts
index e444c665c2..b45b7e3d99 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardHealthCheckOverviewElement } from './views/health-check-overview.element';
 import './views/health-check-overview.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.stories.ts
index a4174331da..98bc351222 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardModelsBuilderElement } from './dashboard-models-builder.element';
 import './dashboard-models-builder.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.stories.ts
index fedf360d27..affb5f940b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardPerformanceProfilingElement } from './dashboard-performance-profiling.element';
 import './dashboard-performance-profiling.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.stories.ts
index c8fe24cd10..7c80cdeaa1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardPublishedStatusElement } from './dashboard-published-status.element';
 import './dashboard-published-status.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.stories.ts
index a6b3b2a257..82f0475336 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardSettingsWelcomeElement } from './dashboard-settings-welcome.element';
 import './dashboard-settings-welcome.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.stories.ts
index cb92a9de25..c101e73f41 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardTelemetryElement } from './dashboard-telemetry.element';
 import './dashboard-telemetry.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.stories.ts
index 254a12f137..3b560f8660 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './data-type-workspace.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { data } from '../../../../core/mocks/data/data-type.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.stories.ts
index 466e56d2b0..42cce1558e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/data-type.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.stories.ts
index 81ff7b8607..b819c5c983 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.stories.ts
@@ -1,7 +1,7 @@
 import './workspace-view-data-type-info.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/data-type.data';
 //import { UmbDataTypeContext } from '../../data-type.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.stories.ts
index 65223c1522..55f8ef3fbd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './extension-root-workspace.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbExtensionRootWorkspaceElement } from './extension-root-workspace.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
index f0bec83961..9ccf25f8e7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIMenuItemEvent } from '@umbraco-ui/uui';
 import { UmbLanguageRepository } from '../repository/language.repository';
 import { UMB_APP_LANGUAGE_CONTEXT_TOKEN, UmbAppLanguageContext } from './app-language.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
index 1afe97afbb..e59782b652 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
@@ -1,9 +1,9 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { repeat } from 'lit-html/directives/repeat.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { UUIMenuItemElement, UUIMenuItemEvent } from '@umbraco-ui/uui';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbLanguageRepository } from '../../repository/language.repository';
 import { UmbModalElementPickerBase } from '@umbraco-cms/internal/modal';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
index e336aa457e..2da293c6b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
index 5119c0ba85..ecb56842c0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UmbLanguageWorkspaceContext } from './language-workspace.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
index 41cfb3f78c..4bf03dbf85 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
 import { LogLevelModel } from '@umbraco-cms/backoffice/backend-api';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
index c656c4394a..46382e5690 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
@@ -4,7 +4,7 @@ import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { IRoutingInfo } from 'router-slot';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { repeat } from 'lit-html/directives/repeat.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { umbExtensionsRegistry, createExtensionElement } from '@umbraco-cms/backoffice/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.stories.ts
index eb6dfa676e..0a95080b53 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './relation-type-workspace.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { data } from '../../../../core/mocks/data/relation-type.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
index 284b58e8ce..b7a59493e3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/relation-type.data';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
index 49657d8e70..486766b227 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
@@ -1,7 +1,7 @@
 import './workspace-view-relation-type-relation.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 //import { data } from '../../../../../core/mocks/data/relation-type.data';
 //import { UmbRelationTypeContext } from '../../relation-type.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
index fe647018d6..5c21bbee38 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../../../shared/collection/collection.context';
 import type { ManifestDashboardCollection } from '@umbraco-cms/backoffice/extensions-registry';
 import type { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.stories.ts
index ae18d8c2c6..7a736b1f28 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbDashboardCollectionElement } from './dashboard-collection.element';
 import './dashboard-collection.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
index 087ae4c959..01c959db84 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
@@ -1,22 +1,21 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import './body-layout.element';
 import type { UmbBodyLayout } from './body-layout.element';
 
 const meta: Meta<UmbBodyLayout> = {
-    title: 'Components/Workspace Layout',
-    component: 'umb-body-layout'
+	title: 'Components/Workspace Layout',
+	component: 'umb-body-layout',
 };
-  
+
 export default meta;
 type Story = StoryObj<UmbBodyLayout>;
 
-export const Overview: Story = {	
-    render: () =>  html`
-	<umb-body-layout>
+export const Overview: Story = {
+	render: () => html` <umb-body-layout>
 		<div slot="header"><uui-button color="" look="placeholder">Header slot</uui-button></div>
 		<uui-button color="" look="placeholder">Main slot</uui-button>
 		<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
-	</umb-body-layout>`
+	</umb-body-layout>`,
 };
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.stories.ts
index d42a021c21..f9b2f79643 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.stories.ts
@@ -1,6 +1,5 @@
-
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { UmbButtonWithDropdownElement } from './button-with-dropdown.element';
 
 export default {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
index 533a46b28e..4955d7cc10 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
@@ -1,26 +1,21 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import './code-block.element';
 import type { UUICodeBlock } from './code-block.element';
 
 const meta: Meta<UUICodeBlock> = {
-    title: 'Components/Code Block',
-    component: 'uui-code-block'
+	title: 'Components/Code Block',
+	component: 'uui-code-block',
 };
-  
+
 export default meta;
 type Story = StoryObj<UUICodeBlock>;
-  
+
 export const Overview: Story = {
-    args: {
-    }
+	args: {},
 };
 
 export const WithCode: Story = {
-    decorators: [],
-    render: () => html`
-        <uui-code-block>
-            // Lets write some javascript
-            alert("Hello World");
-        </uui-code-block>`
-};
\ No newline at end of file
+	decorators: [],
+	render: () => html` <uui-code-block> // Lets write some javascript alert("Hello World"); </uui-code-block>`,
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
index 72529b5b1e..efeb9c3405 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
@@ -2,7 +2,7 @@ import './donut-slice';
 import './donut-chart';
 
 import { Meta } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
 	title: 'Components/Donut chart',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.stories.ts
index 5784914c4e..ddcd24e6fc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.stories.ts
@@ -1,26 +1,27 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import './empty-state.element';
 import type { UmbEmptyStateElement } from './empty-state.element';
 
 const meta: Meta<UmbEmptyStateElement> = {
-    title: 'Components/Empty State',
-    component: 'umb-empty-state',
-    render: (args) => html`
-        <umb-empty-state .position=${args.position} .size=${args.size}>There are no items to be found</umb-empty-state>`,
+	title: 'Components/Empty State',
+	component: 'umb-empty-state',
+	render: (args) => html` <umb-empty-state .position=${args.position} .size=${args.size}
+		>There are no items to be found</umb-empty-state
+	>`,
 };
-  
+
 export default meta;
 type Story = StoryObj<UmbEmptyStateElement>;
 
 export const Overview: Story = {
-    args: {
-        size: 'large',
-    }
+	args: {
+		size: 'large',
+	},
 };
 
 export const Small: Story = {
-    args: {
-        size: 'small',
-    }
-};
\ No newline at end of file
+	args: {
+		size: 'small',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-bulk-action/entity-bulk-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-bulk-action/entity-bulk-action.element.ts
index 313851140d..f21156c02c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-bulk-action/entity-bulk-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-bulk-action/entity-bulk-action.element.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbEntityBulkAction } from '@umbraco-cms/backoffice/entity-action';
 import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
index dc5fce7e70..bf10d72e8b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
@@ -1,7 +1,7 @@
 import './footer-layout.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbFooterLayout } from './footer-layout.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.stories.ts
index fdc13cc6e0..5537f44735 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.stories.ts
@@ -2,7 +2,7 @@ import './history-list.element';
 import './history-item.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbHistoryListElement } from './history-list.element';
 import type { UmbHistoryItemElement } from './history-item.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
index 6b3387030a..847c14bcb7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
@@ -2,7 +2,7 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-ui/uui';
 import { UmbCultureRepository } from '../../../settings/cultures/repository/culture.repository';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index e17dc66fa5..7b3d2bdea9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -1,7 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store';
 import type { UmbDocumentTreeStore } from '../../../documents/documents/repository/document.tree.store';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
index e53bf6b15d..cd21264afa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository';
 import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index 7c1c4b12e8..d497dda6df 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -1,7 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
 import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
index 994f942516..73203fe3f8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extensions-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
index ea1c67bcea..707cc6be5a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
@@ -1,6 +1,6 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbDataTypeRepository } from '../../../settings/data-types/repository/data-type.repository';
 import { UmbVariantId } from '../../variants/variant-id.class';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts
index 34d8e5365b..cf45fa130e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts
@@ -1,44 +1,43 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import './ref-property-editor-ui.element';
 import type { UmbRefPropertyEditorUIElement } from './ref-property-editor-ui.element';
 
 const meta: Meta<UmbRefPropertyEditorUIElement> = {
-    title: 'Components/Ref Property Editor UI',
-    component: 'umb-ref-property-editor-ui',
+	title: 'Components/Ref Property Editor UI',
+	component: 'umb-ref-property-editor-ui',
 };
-  
+
 export default meta;
 type Story = StoryObj<UmbRefPropertyEditorUIElement>;
-  
+
 export const Overview: Story = {
-    args: {
-		name: "Custom Property Editor UI",
-		alias: "Umb.PropertyEditorUI.CustomUI",
-		propertyEditorAlias: "Umbraco.JSON"
-    }
+	args: {
+		name: 'Custom Property Editor UI',
+		alias: 'Umb.PropertyEditorUI.CustomUI',
+		propertyEditorAlias: 'Umbraco.JSON',
+	},
 };
 
-
 export const WithDetail: Story = {
-    args: {
-		name: "Custom Property Editor UI",
-		alias: "Umb.PropertyEditorUI.CustomUI",
-		propertyEditorAlias: "Umbraco.JSON",
-		detail: "With some custom details"
-    }
+	args: {
+		name: 'Custom Property Editor UI',
+		alias: 'Umb.PropertyEditorUI.CustomUI',
+		propertyEditorAlias: 'Umbraco.JSON',
+		detail: 'With some custom details',
+	},
 };
 
 export const WithSlots: Story = {
-    args: {
-		name: "Custom Property Editor UI",
-		alias: "Umb.PropertyEditorUI.CustomUI",
-		propertyEditorAlias: "Umbraco.JSON",
-		detail: "With some custom details"
-    },
+	args: {
+		name: 'Custom Property Editor UI',
+		alias: 'Umb.PropertyEditorUI.CustomUI',
+		propertyEditorAlias: 'Umbraco.JSON',
+		detail: 'With some custom details',
+	},
 	render: (args) => html`
-		<umb-ref-property-editor-ui 
-			.name=${args.name} 
+		<umb-ref-property-editor-ui
+			.name=${args.name}
 			.alias=${args.alias}
 			.propertyEditorAlias=${args.propertyEditorAlias}
 			.detail=${args.detail}>
@@ -51,5 +50,5 @@ export const WithSlots: Story = {
 				</uui-action-bar>
 			</div>
 		</umb-ref-property-editor-ui>
-	`
-};
\ No newline at end of file
+	`,
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.stories.ts
index 37b6555aa0..8f7ae070a8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbSectionMainElement } from './section-main.element';
 import './section-main.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
index 12fa64dcf3..bae231e7cc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
 	UmbSectionSidebarContext,
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.stories.ts
index 002ab577eb..797b347e47 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbSectionSidebarMenuElement } from './section-sidebar-menu.element';
 import './section-sidebar-menu.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.stories.ts
index 4e6b79e49c..4b8c2a3fdd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbSectionSidebarElement } from './section-sidebar.element';
 import './section-sidebar.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
index 67a2bfa9b1..192818c781 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, nothing } from 'lit';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { when } from 'lit-html/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
index 2e4345ed17..6f9eb57709 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
@@ -1,7 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { map, Observable } from 'rxjs';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts
index 62e461fcf9..e5e5d1c5a7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
-import { repeat } from 'lit-html/directives/repeat.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { UmbTreeContextBase } from './tree.context';
 import type { Entity } from '@umbraco-cms/backoffice/models';
 import type { ManifestTree } from '@umbraco-cms/backoffice/extensions-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
index 2125acb5b4..57391b102a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
 	UmbWorkspaceVariantContext,
 	UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
index 08d7b8b1ac..2f270c7fef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbWorkspacePropertyContext } from './workspace-property.context';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.stories.ts
index 9897607990..ffe256bb60 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbWorkspacePropertyElement } from './workspace-property.element';
 import './workspace-property.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
index b3ca949023..a5a5be1fec 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
 	UmbCollectionContext,
 	UMB_COLLECTION_CONTEXT_TOKEN,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
index b673c8b304..ac7c825d27 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
@@ -2,7 +2,7 @@ import '../workspace-layout/workspace-layout.element';
 import './workspace-footer-layout.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbWorkspaceFooterLayout } from './workspace-footer-layout.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
index b40e13d850..aa83696013 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
@@ -1,7 +1,7 @@
 import './workspace-layout.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbWorkspaceLayout } from './workspace-layout.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.stories.ts
index 8d3e036bd6..acc53311bd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbWorkspacePropertyLayoutElement } from './workspace-property-layout.element';
 import './workspace-property-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.stories.ts
index 7f3b7cf5cb..45bb332668 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyActionClearElement } from './property-action-clear.element';
 import './property-action-clear.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/copy/property-action-copy.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/copy/property-action-copy.stories.ts
index 875f26e338..99c7fb230d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/copy/property-action-copy.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/copy/property-action-copy.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyActionCopyElement } from './property-action-copy.element';
 import './property-action-copy.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
index d55cc3836d..c53387f381 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import type {
 	PropertyEditorConfigDefaultData,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.stories.ts
index 46d8606f61..d3457f26bd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorConfigElement } from './property-editor-config.element';
 import './property-editor-config.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts
index b5abe7e06a..84a24b1a83 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockGridBlockConfigurationElement } from './property-editor-ui-block-grid-block-configuration.element';
 import './property-editor-ui-block-grid-block-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts
index 6a27630cce..dad33027be 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockGridGroupConfigurationElement } from './property-editor-ui-block-grid-group-configuration.element';
 import './property-editor-ui-block-grid-group-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts
index 724705e5c2..e66213c7f6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockGridStylesheetPickerElement } from './property-editor-ui-block-grid-stylesheet-picker.element';
 import './property-editor-ui-block-grid-stylesheet-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.stories.ts
index 227722a7ca..2e2536347b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockGridElement } from './property-editor-ui-block-grid.element';
 import './property-editor-ui-block-grid.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts
index 4d2f85052e..d4e2142c6b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockListBlockConfigurationElement } from './property-editor-ui-block-list-block-configuration.element';
 import './property-editor-ui-block-list-block-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.stories.ts
index c04c90de3a..93b3d74e03 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIBlockListElement } from './property-editor-ui-block-list.element';
 import './property-editor-ui-block-list.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
index e47e8c68c2..123de52638 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICheckboxListElement } from './property-editor-ui-checkbox-list.element';
 import './property-editor-ui-checkbox-list.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts
index 89bdedf1d2..c8d47e30af 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICollectionViewBulkActionPermissionsElement } from './property-editor-ui-collection-view-bulk-action-permissions.element';
 import './property-editor-ui-collection-view-bulk-action-permissions.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts
index e570b2d3fb..440113392e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICollectionViewColumnConfigurationElement } from './property-editor-ui-collection-view-column-configuration.element';
 import './property-editor-ui-collection-view-column-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts
index e0b72a1299..745c9c6fa8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICollectionViewLayoutConfigurationElement } from './property-editor-ui-collection-view-layout-configuration.element';
 import './property-editor-ui-collection-view-layout-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts
index f4117b8581..f599980509 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICollectionViewOrderByElement } from './property-editor-ui-collection-view-order-by.element';
 import './property-editor-ui-collection-view-order-by.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts
index 7b052f9d15..69e743a8ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUICollectionViewElement } from './property-editor-ui-collection-view.element';
 import './property-editor-ui-collection-view.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.stories.ts
index bc99333127..64f562c20c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIColorPickerElement } from './property-editor-ui-color-picker.element';
 import './property-editor-ui-color-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
index b3f5beae7e..4d7638d61c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
 import './property-editor-ui-date-picker.element';
@@ -12,19 +12,20 @@ export default {
 		config: [
 			{
 				alias: 'format',
-				value: 'YYYY-MM-DD HH:mm:ss'
-			}
-		]
-	}
+				value: 'YYYY-MM-DD HH:mm:ss',
+			},
+		],
+	},
 } as Meta<UmbPropertyEditorUIDatePickerElement>;
 
-const Template: Story<UmbPropertyEditorUIDatePickerElement> = ({config, value}) => html`<umb-property-editor-ui-date-picker .config=${config} .value=${value}></umb-property-editor-ui-date-picker>`;
+const Template: Story<UmbPropertyEditorUIDatePickerElement> = ({ config, value }) =>
+	html`<umb-property-editor-ui-date-picker .config=${config} .value=${value}></umb-property-editor-ui-date-picker>`;
 
 export const Overview = Template.bind({});
 
 export const WithDateValue = Template.bind({});
 WithDateValue.args = {
-	value: '2021-01-24 15:20'
+	value: '2021-01-24 15:20',
 };
 
 export const WithFormat = Template.bind({});
@@ -32,9 +33,9 @@ WithFormat.args = {
 	config: [
 		{
 			alias: 'format',
-			value: 'dd/MM/yyyy HH:mm:ss'
-		}
-	]
+			value: 'dd/MM/yyyy HH:mm:ss',
+		},
+	],
 };
 
 export const TimeOnly = Template.bind({});
@@ -42,9 +43,9 @@ TimeOnly.args = {
 	config: [
 		{
 			alias: 'format',
-			value: 'HH:mm:ss'
-		}
-	]
+			value: 'HH:mm:ss',
+		},
+	],
 };
 
 export const DateOnly = Template.bind({});
@@ -52,7 +53,7 @@ DateOnly.args = {
 	config: [
 		{
 			alias: 'format',
-			value: 'dd/MM/yyyy'
-		}
-	]
-};
\ No newline at end of file
+			value: 'dd/MM/yyyy',
+		},
+	],
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
index a9eda5c776..f4eed0d05b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-document-picker.element';
 import './property-editor-ui-document-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
index 790e638e37..e38867d3a6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIDropdownElement } from './property-editor-ui-dropdown.element';
 import './property-editor-ui-dropdown.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.stories.ts
index 1bf169f897..6bc8746807 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIEyeDropperElement } from './property-editor-ui-eye-dropper.element';
 import './property-editor-ui-eye-dropper.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
index 37beb48855..3c5d0856f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbIconPickerModalElement } from '../../../../shared/modals/icon-picker/icon-picker-modal.element';
 import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.stories.ts
index c73186ac2f..2f75d4945a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIImageCropperElement } from './property-editor-ui-image-cropper.element';
 import './property-editor-ui-image-cropper.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.stories.ts
index e9f75ddc91..811330e122 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIImageCropsConfigurationElement } from './property-editor-ui-image-crops-configuration.element';
 import './property-editor-ui-image-crops-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts
index 862aa36bd2..77beeb6727 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUILabelElement } from './property-editor-ui-label.element';
 import './property-editor-ui-label.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts
index 33ba0d5203..0e7ada92e4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMarkdownEditorElement } from './property-editor-ui-markdown-editor.element';
 import './property-editor-ui-markdown-editor.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.stories.ts
index 1fec0a8e86..66e8ad7aa7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMediaPickerElement } from './property-editor-ui-media-picker.element';
 import './property-editor-ui-media-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts
index 8d437fdf32..abdf596558 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMemberGroupPickerElement } from './property-editor-ui-member-group-picker.element';
 import './property-editor-ui-member-group-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts
index be840c23ed..a2da67c5d5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMemberPickerElement } from './property-editor-ui-member-picker.element';
 import './property-editor-ui-member-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
index ec833487f1..cc86da68ca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMultiUrlPickerElement } from './property-editor-ui-multi-url-picker.element';
 import './property-editor-ui-multi-url-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 9e4704946f..6f8dc64a1f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbPropertyValueChangeEvent } from '../..';
 import UmbInputMultipleTextStringElement, {
 	MultipleTextStringValue,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
index 39f2b28be8..455f61bcea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIMultipleTextStringElement } from './property-editor-ui-multiple-text-string.element';
 import './property-editor-ui-multiple-text-string.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
index b3b0027c60..e562fe2603 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUINumberRangeElement } from './property-editor-ui-number-range.element';
 import './property-editor-ui-number-range.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.stories.ts
index be74c018be..0bb4c88e3b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUINumberElement } from './property-editor-ui-number.element';
 import './property-editor-ui-number.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts
index ecf903f68d..2db7f21592 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIOrderDirectionElement } from './property-editor-ui-order-direction.element';
 import './property-editor-ui-order-direction.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
index 4ae4156e8e..5a428f985c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIOverlaySizeElement } from './property-editor-ui-overlay-size.element';
 import './property-editor-ui-overlay-size.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts
index 731d38eeab..67d1fde28d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIRadioButtonListElement } from './property-editor-ui-radio-button-list.element';
 import './property-editor-ui-radio-button-list.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.stories.ts
index 2c409547b9..3a1276d23f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUISliderElement } from './property-editor-ui-slider.element';
 import './property-editor-ui-slider.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts
index 77f2d144f8..2dde067661 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element';
 import './property-editor-ui-tags-storage-type.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.stories.ts
index 2e81b69e8a..de47fda75b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITagsElement } from './property-editor-ui-tags.element';
 import './property-editor-ui-tags.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.stories.ts
index a636a73f31..f0ac712382 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITextBoxElement } from './property-editor-ui-text-box.element';
 import './property-editor-ui-text-box.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.stories.ts
index 49cfb72302..389abbb0fe 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITextareaElement } from './property-editor-ui-textarea.element';
 import './property-editor-ui-textarea.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts
index 447be2a933..7d3ea279e8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element';
 import './property-editor-ui-tiny-mce-configuration.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
index 3dc06cef73..9de6efe4eb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element';
 import './property-editor-ui-tiny-mce.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.stories.ts
index 4720a23399..27b2a4a29f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIToggleElement } from './property-editor-ui-toggle.element';
 import './property-editor-ui-toggle.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts
index 3cec8808f8..514000a8ea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITreePickerStartNodeElement } from './property-editor-ui-tree-picker-start-node.element';
 import './property-editor-ui-tree-picker-start-node.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.stories.ts
index ef4f2ef961..cfc9ef64b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUITreePickerElement } from './property-editor-ui-tree-picker.element';
 import './property-editor-ui-tree-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.stories.ts
index ba5426d78b..7729437b01 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIUploadFieldElement } from './property-editor-ui-upload-field.element';
 import './property-editor-ui-upload-field.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts
index 503373fd41..b57a2e47f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIUserPickerElement } from './property-editor-ui-user-picker.element';
 import './property-editor-ui-user-picker.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts
index e2883ab499..f0ec7b357f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbPropertyEditorUIValueTypeElement } from './property-editor-ui-value-type.element';
 import './property-editor-ui-value-type.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index d54a609082..8107a3c8f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import { UmbTableConfig, UmbTableColumn, UmbTableItem } from '../../../../backoffice/shared/components/table';
 import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository';
 import { UMB_CREATE_DICTIONARY_MODAL_TOKEN } from '../../dictionary/entity-actions/create/';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index 6386bd5cfc..984a59dacf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalResult } from '.';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
index 041c5ffd67..3dc06e07e5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.stories.ts
index 71a1059e42..3c1afd4dad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.stories.ts
@@ -1,6 +1,6 @@
 import './dictionary-workspace.element';
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { data } from '../../../../core/mocks/data/dictionary.data';
 import type { UmbWorkspaceDictionaryElement } from './dictionary-workspace.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
index a7c3c1eab6..e9d43ece41 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUITextareaElement, UUITextareaEvent } from '@umbraco-ui/uui';
 import { UmbDictionaryWorkspaceContext } from '../../dictionary-workspace.context';
 import { UmbDictionaryRepository } from '../../../repository/dictionary.repository';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.stories.ts
index 806bd714e5..f2afe0facf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 //import { data } from '../../../../../core/mocks/data/dictionary.data';
 import type { UmbWorkspaceViewDictionaryEditElement } from './workspace-view-dictionary-edit.element';
 import './workspace-view-dictionary-edit.element';
@@ -15,11 +15,11 @@ export default {
 			/*html` <umb-context-provider key="umbDataTypeContext" .value=${new UmbWorkspaceDictionaryContext(data[0])}>
 				${story()}
 			</umb-context-provider>`,*/
-		}
+		},
 	],
 } as Meta;
 
 export const AAAOverview: Story<UmbWorkspaceViewDictionaryEditElement> = () =>
 	html` <umb-workspace-view-dictionary-edit></umb-workspace-view-dictionary-edit>`;
-	
+
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
index f3566ee265..99f10ee203 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
@@ -2,7 +2,7 @@ import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import type { UmbSectionViewUsersElement } from '../../section-view-users.element';
 import {
 	UmbUserGroupStore,
diff --git a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
index 30fa1449ae..5ab064e243 100644
--- a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts
index a1002bf1cf..e1c4bb2daa 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
 	title: 'API/Modals',
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
index ff597b1948..42f97388b3 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/icon/icon.stories.ts b/src/Umbraco.Web.UI.Client/src/core/stores/icon/icon.stories.ts
index 5ae2c50da3..33a278ba1c 100644
--- a/src/Umbraco.Web.UI.Client/src/core/stores/icon/icon.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/stores/icon/icon.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import icons from '../../../../public-assets/icons/icons.json';
 
diff --git a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts
index 747b7665ca..df99ad1c6c 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { installerContextProvider } from '../shared/utils.story-helpers';
 import type { UmbInstallerConsentElement } from './installer-consent.element';
diff --git a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts
index 5453cae29d..0c4df7d1e3 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.stories.ts
@@ -1,7 +1,7 @@
 import './installer-database.element';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { rest } from 'msw';
 
 import { installerContextProvider } from '../shared/utils.story-helpers';
diff --git a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts
index 941eba5c87..8583f1ec65 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { installerContextProvider } from '../shared/utils.story-helpers';
 import { UmbInstallerContext } from '../installer.context';
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
index 5022d30ccd..ee6dcf05da 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import '.';
 
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts
index 585bd6fb62..679d66ef66 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { installerContextProvider } from '../shared/utils.story-helpers';
 import type { UmbInstallerInstallingElement } from './installer-installing.element';
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts
index 3b6a66584e..e84aab175e 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbInstallerLayoutElement } from './installer-layout.element';
 import './installer-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
index 7b03df75c4..f131df752a 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { UmbInstallerContext } from '../installer.context';
 import '../../core/context-provider/context-provider.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts
index 625ef190a1..5ad27fc76e 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { installerContextProvider } from '../shared/utils.story-helpers';
 import type { UmbInstallerUserElement } from './installer-user.element';
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
index 7b57f9266b..77d63cefb8 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
@@ -1,7 +1,7 @@
 import './upgrader-view.element';
 
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import type { UmbUpgraderView } from './upgrader-view.element';
 

From ef243ef9335e1f283281abd75ee8823fee599a98 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:56:28 +0100
Subject: [PATCH 3/3] Feature/code editor (#607)

* create component

* import styles correctly

* import component

* show code editor element on the template workspace

* wire input event

* sync code property with editor value

* move workers to a separate file

* create class for code editor

* add very simple insert method

* focus after insert

* make scroll bar bit nicer

* add markdown example and fancier template

* make insert work with multiple cursors and selections

* now really make it works with selections and multiple cursors

* map options

* add hack to fix the jumpy cursor

* Observe themes

* add own model for range, return array of ranges from find

* add backoffice-fit dark mode

* add theme story

* add themes folder

* add new methods

insertAtPosition
getValueInRange
select

* add documentation to editor class

* add docs

* rename file

* rename donut files

* cleanup

* add some more imports

* test heap size fix

* heap error test 2

* fix imports

* node fail error test

* rename

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
---
 .../.github/workflows/build_test.yml          |   3 +
 src/Umbraco.Web.UI.Client/package-lock.json   |  11 +
 src/Umbraco.Web.UI.Client/package.json        |   1 +
 .../code-editor/code-editor.controller.ts     | 370 ++++++++++++++++++
 .../code-editor/code-editor.element.ts        | 172 ++++++++
 .../code-editor/code-editor.model.ts          | 229 +++++++++++
 .../code-editor/code-editor.stories.ts        | 232 +++++++++++
 .../shared/components/code-editor/index.ts    |   8 +
 .../components/code-editor/languageWorkers.ts |  33 ++
 .../shared/components/code-editor/styles.ts   |  14 +
 .../themes/code-editor.dark.theme.ts          |  10 +
 .../themes/code-editor.hc-dark.theme.ts       |   8 +
 .../themes/code-editor.hc-light.theme.ts      |   8 +
 .../themes/code-editor.light.theme.ts         |   8 +
 .../components/code-editor/themes/index.ts    |  24 ++
 ...{donut-chart.ts => donut-chart.element.ts} |   4 +-
 .../donut-chart/donut-chart.stories.ts        |   4 +-
 ...{donut-slice.ts => donut-slice.element.ts} |   0
 .../shared/components/donut-chart/index.ts    |   4 +-
 .../src/backoffice/shared/components/index.ts |   1 +
 .../workspace/template-workspace.element.ts   |  50 ++-
 .../src/core/mocks/data/template.data.ts      |  15 +-
 22 files changed, 1191 insertions(+), 18 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.model.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/languageWorkers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/styles.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.dark.theme.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-dark.theme.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-light.theme.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.light.theme.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/index.ts
 rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/{donut-chart.ts => donut-chart.element.ts} (99%)
 rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/{donut-slice.ts => donut-slice.element.ts} (100%)

diff --git a/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml b/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
index 5a1a10a376..f806a8eaa1 100644
--- a/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
+++ b/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
@@ -15,6 +15,9 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  NODE_OPTIONS: --max_old_space_size=16384  
+
 jobs:
   build:
 
diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index b12d83fb70..524f3d9036 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -18,6 +18,7 @@
 				"element-internals-polyfill": "^1.1.19",
 				"lit": "^2.6.1",
 				"lodash-es": "4.17.21",
+				"monaco-editor": "^0.36.1",
 				"router-slot": "file:router-slot-1.6.1.tgz",
 				"rxjs": "^7.8.0",
 				"uuid": "^9.0.0"
@@ -13446,6 +13447,11 @@
 			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
 			"dev": true
 		},
+		"node_modules/monaco-editor": {
+			"version": "0.36.1",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz",
+			"integrity": "sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg=="
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -28332,6 +28338,11 @@
 			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
 			"dev": true
 		},
+		"monaco-editor": {
+			"version": "0.36.1",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz",
+			"integrity": "sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg=="
+		},
 		"mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 555f6d2cca..833bb4bde1 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -68,6 +68,7 @@
 		"element-internals-polyfill": "^1.1.19",
 		"lit": "^2.6.1",
 		"lodash-es": "4.17.21",
+		"monaco-editor": "^0.36.1",
 		"router-slot": "file:router-slot-1.6.1.tgz",
 		"rxjs": "^7.8.0",
 		"uuid": "^9.0.0"
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
new file mode 100644
index 0000000000..f79acaeace
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
@@ -0,0 +1,370 @@
+import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/events';
+import * as monaco from 'monaco-editor';
+import {
+	CodeEditorConstructorOptions,
+	CodeEditorSearchOptions,
+	CodeEditorTheme,
+	UmbCodeEditorCursorPosition,
+	UmbCodeEditorCursorPositionChangedEvent,
+	UmbCodeEditorCursorSelectionChangedEvent,
+	UmbCodeEditorHost,
+	UmbCodeEditorRange,
+	UmbCodeEditorSelection,
+} from './code-editor.model';
+import themes from './themes';
+
+//TODO - consider firing change event on blur
+
+/**
+ * This is a wrapper class for the [monaco editor](https://microsoft.github.io/monaco-editor). It exposes some of the monaco editor API. It also handles the creation of the monaco editor.
+ * It allows access to the entire monaco editor object through `monacoEditor` property, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility.
+ * Through the UmbCodeEditorHost interface it can be used in a custom element.
+ * By using monaco library directly you can access the entire monaco API along with code completions, actions etc. This class creates some level of abstraction over the monaco editor. It only provides basic functionality, that should be enough for most of the use cases and should be possible to implement with any code editor library.
+ *
+ * Current issues: [shadow DOM related issues](https://github.com/microsoft/monaco-editor/labels/editor-shadow-dom) #3217  currently fixed by a hack , [razor syntax highlight](https://github.com/microsoft/monaco-editor/issues/1997)
+ *
+ *
+ * @export
+ * @class UmbCodeEditor
+ */
+export class UmbCodeEditorController {
+	#host: UmbCodeEditorHost;
+	#editor?: monaco.editor.IStandaloneCodeEditor;
+	/**
+	 * The monaco editor object. This is the actual monaco editor object. It is exposed for advanced usage, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility. For more information see [monaco editor API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html).
+	 *
+	 * @readonly
+	 * @memberof UmbCodeEditor
+	 */
+	get monacoEditor() {
+		return this.#editor;
+	}
+
+	#options: CodeEditorConstructorOptions = {};
+	/**
+	 * The options used to create the editor.
+	 *
+	 * @readonly
+	 * @type {CodeEditorConstructorOptions}
+	 * @memberof UmbCodeEditor
+	 */
+	get options(): CodeEditorConstructorOptions {
+		return this.#options;
+	}
+
+	#defaultMonacoOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+		automaticLayout: true,
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			verticalScrollbarSize: 5,
+		},
+		// disable this, as it does not work with shadow dom properly.
+		colorDecorators: false,
+	};
+
+	#position: UmbCodeEditorCursorPosition | null = null;
+	/**
+	 * Provides the current position of the cursor.
+	 *
+	 * @readonly
+	 * @memberof UmbCodeEditor
+	 */
+	get position() {
+		return this.#position;
+	}
+	#secondaryPositions: UmbCodeEditorCursorPosition[] = [];
+	/**
+	 * Provides positions of all the secondary cursors.
+	 *
+	 * @readonly
+	 * @memberof UmbCodeEditor
+	 */
+	get secondaryPositions() {
+		return this.#secondaryPositions;
+	}
+
+	/**
+	 * Provides the current value of the editor.
+	 *
+	 * @memberof UmbCodeEditor
+	 */
+	get value() {
+		if (!this.#editor) return '';
+		const value = this.#editor.getValue();
+		return value;
+	}
+
+	set value(newValue: string) {
+		if (!this.#editor) throw new Error('Editor object not found');
+
+		const oldValue = this.value;
+		if (newValue !== oldValue) {
+			this.#editor.setValue(newValue);
+		}
+	}
+	/**
+	 * Provides the current model of the editor. For advanced usage. Bare in mind that in case of the monaco library being swapped in the future, this might not be available. For more information see [monaco editor model API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html).
+	 *
+	 * @readonly
+	 * @memberof UmbCodeEditor
+	 */
+	get monacoModel() {
+		if (!this.#editor) return null;
+		return this.#editor.getModel();
+	}
+	/**
+	 * Creates an instance of UmbCodeEditor. You should instantiate this class through the `UmbCodeEditorHost` interface and that should happen when inside DOM nodes of the host container are available, otherwise the editor will not be able to initialize, for example in lit `firstUpdated` lifecycle hook. It will make host emit change and input events when the value of the editor changes.
+	 * @param {UmbCodeEditorHost} host
+	 * @param {CodeEditorConstructorOptions} [options]
+	 * @memberof UmbCodeEditor
+	 */
+	constructor(host: UmbCodeEditorHost, options?: CodeEditorConstructorOptions) {
+		this.#options = { ...options };
+		this.#host = host;
+		this.#registerThemes();
+		this.#createEditor(options);
+	}
+
+	#registerThemes() {
+		Object.entries(themes).forEach(([name, theme]) => {
+			this.#defineTheme(name, theme);
+		});
+	}
+
+	#defineTheme(name: string, theme: monaco.editor.IStandaloneThemeData) {
+		monaco.editor.defineTheme(name, theme);
+	}
+
+	#initiateEvents() {
+		this.#editor?.onDidChangeModelContent(() => {
+			this.#host.code = this.value ?? '';
+			this.#host.dispatchEvent(new UmbInputEvent());
+		});
+
+		this.#editor?.onDidChangeModel(() => {
+			this.#host.dispatchEvent(new UmbChangeEvent());
+		});
+		this.#editor?.onDidChangeCursorPosition((e) => {
+			this.#position = e.position;
+			this.#secondaryPositions = e.secondaryPositions;
+		});
+	}
+
+	#mapOptions(options: CodeEditorConstructorOptions): monaco.editor.IStandaloneEditorConstructionOptions {
+		const hasLineNumbers = Object.prototype.hasOwnProperty.call(options, 'lineNumbers');
+		const hasMinimap = Object.prototype.hasOwnProperty.call(options, 'minimap');
+		const hasLightbulb = Object.prototype.hasOwnProperty.call(options, 'lightbulb');
+
+		return {
+			...options,
+			lineNumbers: hasLineNumbers ? (options.lineNumbers ? 'on' : 'off') : undefined,
+			minimap: hasMinimap ? (options.minimap ? { enabled: true } : { enabled: false }) : undefined,
+			lightbulb: hasLightbulb ? (options.lightbulb ? { enabled: true } : { enabled: false }) : undefined,
+		};
+	}
+	/**
+	 * Updates the options of the editor. This is useful for updating the options after the editor has been created.
+	 *
+	 * @param {CodeEditorConstructorOptions} newOptions
+	 * @memberof UmbCodeEditor
+	 */
+	updateOptions(newOptions: CodeEditorConstructorOptions) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#options = { ...this.#options, ...newOptions };
+		this.#editor.updateOptions(this.#mapOptions(newOptions));
+	}
+
+	#createEditor(options: CodeEditorConstructorOptions = {}) {
+		if (!this.#host.container) throw new Error('Container not found');
+		if (this.#host.container.hasChildNodes()) throw new Error('Editor container should be empty');
+
+		const mergedOptions = { ...this.#defaultMonacoOptions, ...this.#mapOptions(options) };
+
+		this.#editor = monaco.editor.create(this.#host.container, {
+			...mergedOptions,
+			value: this.#host.code ?? '',
+			language: this.#host.language,
+			theme: this.#host.theme,
+			readOnly: this.#host.readonly,
+			ariaLabel: this.#host.label,
+		});
+		this.#initiateEvents();
+	}
+	/**
+	 * Provides the current selections of the editor.
+	 *
+	 * @return {*}  {UmbCodeEditorSelection[]}
+	 * @memberof UmbCodeEditor
+	 */
+	getSelections(): UmbCodeEditorSelection[] {
+		if (!this.#editor) return [];
+		return this.#editor.getSelections() ?? [];
+	}
+	/**
+	 * Provides the current positions of the cursor or multiple cursors.
+	 *
+	 * @return {*}  {(UmbCodeEditorCursorPosition | null)}
+	 * @memberof UmbCodeEditor
+	 */
+	getPositions(): UmbCodeEditorCursorPosition | null {
+		if (!this.#editor) return null;
+		return this.#editor.getPosition();
+	}
+	/**
+	 * Inserts text at the current cursor position or multiple cursor positions.
+	 *
+	 * @param {string} text
+	 * @memberof UmbCodeEditor
+	 */
+	insert(text: string) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		const selections = this.#editor.getSelections() ?? [];
+		if (selections?.length > 0) {
+			this.#editor.executeEdits(
+				null,
+				selections.map((selection) => ({ range: selection, text }))
+			);
+		}
+	}
+	/**
+	 * Looks for a string or matching strings in the editor and returns the ranges of the found strings. Can use regex, case sensitive and more. If you want regex set the isRegex to true in the options.
+	 *
+	 * @param {string} searchString
+	 * @param {CodeEditorSearchOptions} [searchOptions=<CodeEditorSearchOptions>{}]
+	 * @return {*}  {UmbCodeEditorRange[]}
+	 * @memberof UmbCodeEditor
+	 */
+	find(
+		searchString: string,
+		searchOptions: CodeEditorSearchOptions = <CodeEditorSearchOptions>{}
+	): UmbCodeEditorRange[] {
+		if (!this.#editor) throw new Error('Editor object not found');
+		const defaultOptions = {
+			searchOnlyEditableRange: false,
+
+			isRegex: false,
+
+			matchCase: false,
+
+			wordSeparators: null,
+
+			captureMatches: false,
+		};
+
+		const { searchOnlyEditableRange, isRegex, matchCase, wordSeparators, captureMatches } = {
+			...defaultOptions,
+			...searchOptions,
+		};
+		return (
+			this.monacoModel
+				?.findMatches(searchString, searchOnlyEditableRange, isRegex, matchCase, wordSeparators, captureMatches)
+				.map((findMatch) => ({
+					startLineNumber: findMatch.range.startLineNumber,
+					startColumn: findMatch.range.startColumn,
+					endLineNumber: findMatch.range.endLineNumber,
+					endColumn: findMatch.range.endColumn,
+				})) ?? []
+		);
+	}
+	/**
+	 * Returns the value of the editor for a given range.
+	 *
+	 * @param {UmbCodeEditorRange} range
+	 * @return {*}  {string}
+	 * @memberof UmbCodeEditor
+	 */
+	getValueInRange(range: UmbCodeEditorRange): string {
+		if (!this.#editor) throw new Error('Editor object not found');
+		return this.monacoModel?.getValueInRange(range) ?? '';
+	}
+	/**
+	 * Inserts text at a given position.
+	 *
+	 * @param {string} text
+	 * @param {UmbCodeEditorCursorPosition} position
+	 * @memberof UmbCodeEditor
+	 */
+	insertAtPosition(text: string, position: UmbCodeEditorCursorPosition) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.executeEdits(null, [
+			{
+				range: {
+					startLineNumber: position.lineNumber,
+					startColumn: position.column,
+					endLineNumber: position.lineNumber,
+					endColumn: position.column,
+				},
+				text,
+			},
+		]);
+	}
+	/**
+	 * Selects a range of text in the editor.
+	 *
+	 * @param {UmbCodeEditorRange} range
+	 * @memberof UmbCodeEditor
+	 */
+	select(range: UmbCodeEditorRange) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.setSelection(range);
+	}
+	/**
+	 * Changes the theme of the editor.
+	 *
+	 * @template T
+	 * @param {(CodeEditorTheme | T)} theme
+	 * @memberof UmbCodeEditor
+	 */
+	setTheme<T extends string>(theme: CodeEditorTheme | T) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		monaco.editor.setTheme(theme);
+	}
+	/**
+	 * Runs callback on change of model content. (for example when typing)
+	 *
+	 * @param {() => void} callback
+	 * @memberof UmbCodeEditor
+	 */
+	onChangeModelContent(callback: () => void) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.onDidChangeModelContent(() => {
+			callback();
+		});
+	}
+	/**
+	 * Runs callback on change of model (when the entire model is replaced	)
+	 *
+	 * @param {() => void} callback
+	 * @memberof UmbCodeEditor
+	 */
+	onDidChangeModel(callback: () => void) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.onDidChangeModel(() => {
+			callback();
+		});
+	}
+	/**
+	 * Runs callback on change of cursor position. Gives as parameter the new position.
+	 *
+	 * @param {((e: UmbCodeEditorCursorPositionChangedEvent | undefined) => void)} callback
+	 * @memberof UmbCodeEditor
+	 */
+	onDidChangeCursorPosition(callback: (e: UmbCodeEditorCursorPositionChangedEvent | undefined) => void) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.onDidChangeCursorPosition((event) => {
+			callback(event);
+		});
+	}
+	/**
+	 * Runs callback on change of cursor selection. Gives as parameter the new selection.
+	 *
+	 * @param {((e: UmbCodeEditorCursorSelectionChangedEvent | undefined) => void)} callback
+	 * @memberof UmbCodeEditor
+	 */
+	onDidChangeCursorSelection(callback: (e: UmbCodeEditorCursorSelectionChangedEvent | undefined) => void) {
+		if (!this.#editor) throw new Error('Editor object not found');
+		this.#editor.onDidChangeCursorSelection((event) => {
+			callback(event);
+		});
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
new file mode 100644
index 0000000000..876d94e08f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
@@ -0,0 +1,172 @@
+import { css, html, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
+import { UMB_THEME_CONTEXT_TOKEN } from '../../../themes/theme.context';
+import { UmbCodeEditorController } from './code-editor.controller';
+import { CodeEditorLanguage, CodeEditorTheme, UmbCodeEditorHost } from './code-editor.model';
+import { monacoEditorStyles, monacoJumpingCursorHack } from './styles';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+/**
+ * A custom element that renders a code editor. Code editor is based on the Monaco Editor library.
+ * The element will listen to the theme context and update the theme accordingly.
+ * Parts of the monaco Api is exposed through the `editor` property. You can access the monaco editor instance through `editor.monacoEditor`.
+ *
+ * @element umb-code-editor
+ *
+ * @export
+ * @class UmbCodeEditorElement
+ * @extends {UmbLitElement}
+ * @implements {UmbCodeEditorHost}
+ * @fires input - Fired when the value of the editor changes.
+ * @fires change - Fired when the entire model of editor is replaced.
+ */
+@customElement('umb-code-editor')
+export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditorHost {
+	static styles = [
+		monacoEditorStyles,
+		monacoJumpingCursorHack,
+		css`
+			:host {
+				display: block;
+			}
+			#editor-container {
+				width: var(--editor-width);
+				height: var(--editor-height, 100%);
+
+				--vscode-scrollbar-shadow: #dddddd;
+				--vscode-scrollbarSlider-background: var(--uui-color-disabled-contrast);
+				--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+				--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+			}
+		`,
+	];
+
+	private containerRef: Ref<HTMLElement> = createRef();
+
+	get container() {
+		if (!this.containerRef?.value) throw new Error('Container not found');
+		return this.containerRef!.value;
+	}
+
+	#editor?: UmbCodeEditorController;
+
+	get editor() {
+		return this.#editor;
+	}
+	/**
+	 * Theme of the editor. Default is light. Element will listen to the theme context and update the theme accordingly.
+	 *
+	 * @type {CodeEditorTheme}
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property()
+	theme: CodeEditorTheme = CodeEditorTheme.Light;
+	/**
+	 * Language of the editor. Default is javascript.
+	 *
+	 * @type {CodeEditorLanguage}
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property()
+	language: CodeEditorLanguage = 'javascript';
+	/**
+	 * Label of the editor. Default is 'Code Editor'.
+	 *
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property()
+	label = 'Code Editor';
+
+	//TODO - this should be called a value
+	#code = '';
+	/**
+	 * Value of the editor. Default is empty string.
+	 *
+	 * @readonly
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property()
+	get code() {
+		return this.#code;
+	}
+
+	set code(value: string) {
+		const oldValue = this.#code;
+		this.#code = value;
+		if (this.#editor) {
+			this.#editor.value = value;
+		}
+		this.requestUpdate('code', oldValue);
+	}
+	/**
+	 * Whether the editor is readonly. Default is false.
+	 *
+	 * @memberof UmbCodeEditorElement
+	 */
+	@property({ type: Boolean, attribute: 'readonly' })
+	readonly = false;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_THEME_CONTEXT_TOKEN, (instance) => {
+			instance.theme.subscribe((themeAlias) => {
+				this.theme = themeAlias ? this.#translateTheme(themeAlias) : CodeEditorTheme.Light;
+			});
+		});
+	}
+
+	firstUpdated() {
+		this.#editor = new UmbCodeEditorController(this);
+	}
+
+	protected updated(_changedProperties: PropertyValues<this>): void {
+		if (_changedProperties.has('theme') || _changedProperties.has('language')) {
+			this.#editor?.updateOptions({
+				theme: this.theme,
+				language: this.language,
+			});
+		}
+	}
+
+	#translateTheme(theme: string) {
+		switch (theme) {
+			case 'umb-light-theme':
+				return CodeEditorTheme.Light;
+			case 'umb-dark-theme':
+				return CodeEditorTheme.Dark;
+			case 'umb-high-contrast-theme':
+				return CodeEditorTheme.HighContrastLight;
+			default:
+				return CodeEditorTheme.Light;
+		}
+	}
+	/**
+	 * Inserts text at the current cursor position.
+	 *
+	 * @param {string} text
+	 * @memberof UmbCodeEditorElement
+	 */
+	insert(text: string) {
+		this.#editor?.insert(text);
+	}
+	/**
+	 * Finds all occurrence of the given string or matches the given regular expression.
+	 *
+	 * @param {string} text
+	 * @return {*}
+	 * @memberof UmbCodeEditorElement
+	 */
+	find(text: string) {
+		return this.#editor?.find(text);
+	}
+
+	render() {
+		return html` <div id="editor-container" ${ref(this.containerRef)}></div> `;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-code-editor': UmbCodeEditorElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.model.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.model.ts
new file mode 100644
index 0000000000..e093a81084
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.model.ts
@@ -0,0 +1,229 @@
+export type CodeEditorLanguage = 'razor' | 'typescript' | 'javascript' | 'css' | 'markdown' | 'json' | 'html';
+
+export enum CodeEditorTheme {
+	Light = 'umb-light',
+	Dark = 'umb-dark',
+	HighContrastLight = 'umb-hc-light',
+	HighContrastDark = 'umb-hc-dark',
+}
+
+export interface UmbCodeEditorHost extends HTMLElement {
+	container: HTMLElement;
+	language: CodeEditorLanguage;
+	theme: CodeEditorTheme;
+	code: string;
+	readonly: boolean;
+	label: string;
+}
+
+export interface UmbCodeEditorCursorPosition {
+	column: number;
+	lineNumber: number;
+}
+
+export interface UmbCodeEditorRange {
+	startLineNumber: number;
+	startColumn: number;
+	endLineNumber: number;
+	endColumn: number;
+}
+
+export interface UmbCodeEditorSelection {
+	startLineNumber: number;
+	startColumn: number;
+	endLineNumber: number;
+	endColumn: number;
+	positionColumn: number;
+	positionLineNumber: number;
+	selectionStartColumn: number;
+	selectionStartLineNumber: number;
+}
+
+export interface UmbCodeEditorCursorPositionChangedEvent {
+	position: UmbCodeEditorCursorPosition;
+	secondaryPositions: UmbCodeEditorCursorPosition[];
+}
+
+export interface UmbCodeEditorCursorSelectionChangedEvent {
+	selection: UmbCodeEditorSelection;
+	secondarySelections: UmbCodeEditorSelection[];
+}
+
+export interface CodeEditorConstructorOptions {
+	/**
+	 * The initial value of the auto created model in the editor.
+	 */
+	value?: string;
+	/**
+	 * The initial language of the auto created model in the editor.
+	 */
+	language?: CodeEditorLanguage;
+	/**
+	 * Initial theme to be used for rendering.
+	 * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black', 'hc-light.
+	 * You can create custom themes via `monaco.editor.defineTheme`.
+	 * To switch a theme, use `monaco.editor.setTheme`.
+	 * **NOTE**: The theme might be overwritten if the OS is in high contrast mode, unless `autoDetectHighContrast` is set to false.
+	 */
+	theme?: CodeEditorTheme;
+	/**
+	 * Container element to use for ARIA messages.
+	 * Defaults to document.body.
+	 */
+	ariaContainerElement?: HTMLElement;
+	/**
+	 * The aria label for the editor's textarea (when it is focused).
+	 */
+	ariaLabel?: string;
+	/**
+	 * The `tabindex` property of the editor's textarea
+	 */
+	tabIndex?: number;
+
+	/**
+	 * Control the rendering of line numbers.
+	 * Defaults to `true`.
+	 */
+	lineNumbers?: boolean;
+	/**
+	 * Class name to be added to the editor.
+	 */
+	extraEditorClassName?: string;
+	/**
+	 * Should the editor be read only. See also `domReadOnly`.
+	 * Defaults to false.
+	 */
+	readOnly?: boolean;
+	/**
+	 * Control the behavior and rendering of the minimap.
+	 */
+	minimap?: boolean;
+	/**
+	 * Enable that the editor will install a ResizeObserver to check if its container dom node size has changed.
+	 * Defaults to false.
+	 */
+	automaticLayout?: boolean;
+	/**
+	 * Control the wrapping of the editor.
+	 * When `wordWrap` = "off", the lines will never wrap.
+	 * When `wordWrap` = "on", the lines will wrap at the viewport width.
+	 * When `wordWrap` = "wordWrapColumn", the lines will wrap at `wordWrapColumn`.
+	 * When `wordWrap` = "bounded", the lines will wrap at min(viewport width, wordWrapColumn).
+	 * Defaults to "off".
+	 */
+	wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
+	/**
+	 * Enable detecting links and making them clickable.
+	 * Defaults to true.
+	 */
+	links?: boolean;
+	/**
+	 * Enable inline color decorators and color picker rendering.
+	 */
+	colorDecorators?: boolean;
+	/**
+	 * Controls the max number of color decorators that can be rendered in an editor at once.
+	 */
+	colorDecoratorsLimit?: number;
+	/**
+	 * Enable custom contextmenu.
+	 * Defaults to true.
+	 */
+	contextmenu?: boolean;
+	/**
+	 * The modifier to be used to add multiple cursors with the mouse.
+	 * Defaults to 'alt'
+	 */
+	multiCursorModifier?: 'ctrlCmd' | 'alt';
+	/**
+	 * Controls the max number of text cursors that can be in an active editor at once.
+	 */
+	multiCursorLimit?: number;
+	/**
+	 * Controls the number of lines in the editor that can be read out by a screen reader
+	 */
+	accessibilityPageSize?: number;
+	/**
+	 * Controls the spacing around the editor.
+	 * @type {{bottom: number; top: number}}
+	 * @memberof CodeEditorConstructorOptions
+	 */
+	padding?: { bottom: number; top: number };
+	/**
+	 * Controls if the editor should allow to move selections via drag and drop.
+	 * Defaults to false.
+	 */
+	dragAndDrop?: boolean;
+	/**
+	 * Show code lens
+	 * Defaults to true.
+	 */
+	codeLens?: boolean;
+	/**
+	 * Control the behavior and rendering of the code action lightbulb.
+	 */
+	lightbulb?: boolean;
+	/**
+	 * Enable code folding.
+	 * Defaults to true.
+	 */
+	folding?: boolean;
+	/**
+	 * The font family
+	 */
+	fontFamily?: string;
+	/**
+	 * The font weight
+	 */
+	fontWeight?: string;
+	/**
+	 * The font size
+	 */
+	fontSize?: number;
+	/**
+	 * The line height
+	 */
+	lineHeight?: number;
+	/**
+	 * The letter spacing
+	 */
+	letterSpacing?: number;
+}
+
+export interface CodeEditorSearchOptions {
+	/**
+	 *   Limit the searching to only search inside the editable range of the model.
+	 *
+	 * @type {boolean}
+	 * @memberof CodeEditorSearchOptions
+	 */
+	searchOnlyEditableRange: boolean;
+	/**
+	 * Used to indicate that searchString is a regular expression.
+	 *
+	 * @type {boolean}
+	 * @memberof CodeEditorSearchOptions
+	 */
+	isRegex: boolean;
+	/**
+	 * Force the matching to match lower/upper case exactly.
+	 *
+	 * @type {boolean}
+	 * @memberof CodeEditorSearchOptions
+	 */
+	matchCase: boolean;
+	/**
+	 * Force the matching to match entire words only. Pass null otherwise.
+	 *
+	 * @type {string}
+	 * @memberof CodeEditorSearchOptions
+	 */
+	wordSeparators: string | null;
+	/**
+	 * The result will contain the captured groups.
+	 *
+	 * @type {boolean}
+	 * @memberof CodeEditorSearchOptions
+	 */
+	captureMatches: boolean;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
new file mode 100644
index 0000000000..bfa042e01b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
@@ -0,0 +1,232 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { UmbCodeEditorElement } from './code-editor.element';
+import { CodeEditorLanguage, CodeEditorTheme } from './code-editor.model';
+
+const meta: Meta<UmbCodeEditorElement> = {
+	title: 'Components/Code Editor',
+	component: 'umb-code-editor',
+	decorators: [(story) => html`<div style="--editor-height: 800px">${story()}</div>`],
+	parameters: { layout: 'fullscreen' },
+	argTypes: {
+		theme: {
+			control: 'select',
+			options: [
+				CodeEditorTheme.Dark,
+				CodeEditorTheme.Light,
+				CodeEditorTheme.HighContrastLight,
+				CodeEditorTheme.HighContrastLight,
+			],
+		},
+	},
+};
+
+const codeSnippets: Record<CodeEditorLanguage, string> = {
+	javascript: `// Returns "banana"
+	('b' + 'a' + + 'a' + 'a').toLowerCase();`,
+	css: `:host {
+		display: flex;
+		background-color: var(--uui-color-background);
+		width: 100%;
+		height: 100%;
+		flex-direction: column;
+	}
+	
+	#header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 70px;
+		background-color: var(--uui-color-surface);
+		border-bottom: 1px solid var(--uui-color-border);
+		box-sizing: border-box;
+	}
+	
+	#headline {
+		display: block;
+		margin: 0 var(--uui-size-layout-1);
+	}
+	
+	#tabs {
+		margin-left: auto;
+	}`,
+	html: `<!DOCTYPE html>
+	<html>
+	<head>
+	<title>Page Title</title>
+	</head>
+	<body>
+	
+	<h1>This is a Heading</h1>
+	<p>This is a paragraph.</p>
+	
+	</body>
+	</html>`,
+	razor: `@using Umbraco.Extensions
+	@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
+	@{
+		if (Model?.Areas.Any() != true) { return; }
+	}
+	
+	<div class="umb-block-grid__area-container"
+		 style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
+		@foreach (var area in Model.Areas)
+		{
+			@await Html.GetBlockGridItemAreaHtmlAsync(area)
+		}
+	</div>`,
+	markdown: `
+	You will like those projects!
+	
+	---
+	
+	# h1 Heading 8-)
+	## h2 Heading
+	### h3 Heading
+	#### h4 Heading
+	##### h5 Heading
+	###### h6 Heading
+	
+	
+	## Horizontal Rules
+	
+	___
+	
+	---
+	
+	***
+	
+	
+	## Typographic replacements
+	
+	Enable typographer option to see result.
+	
+	(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+	
+	test.. test... test..... test?..... test!....
+	
+	!!!!!! ???? ,,  -- ---
+	
+	"Smartypants, double quotes" and 'single quotes'`,
+	typescript: `import { UmbTemplateRepository } from '../repository/template.repository';
+	import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
+	import { createObservablePart, DeepState } from '@umbraco-cms/observable-api';
+	import { TemplateModel } from '@umbraco-cms/backend-api';
+	import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+	
+	export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository> {
+		#data = new DeepState<TemplateModel | undefined>(undefined);
+		data = this.#data.asObservable();
+		name = createObservablePart(this.#data, (data) => data?.name);
+		content = createObservablePart(this.#data, (data) => data?.content);
+	
+		constructor(host: UmbControllerHostInterface) {
+			super(host, new UmbTemplateRepository(host));
+		}
+	
+		getData() {
+			return this.#data.getValue();
+		}
+	
+		setName(value: string) {
+			this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', name: value });
+		}
+	
+		setContent(value: string) {
+			this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', content: value });
+		}
+	
+		async load(entityKey: string) {
+			const { data } = await this.repository.requestByKey(entityKey);
+			if (data) {
+				this.setIsNew(false);
+				this.#data.next(data);
+			}
+		}
+	
+		async createScaffold(parentKey: string | null) {
+			const { data } = await this.repository.createScaffold(parentKey);
+			if (!data) return;
+			this.setIsNew(true);
+			this.#data.next(data);
+		}
+	}`,
+	json: `{
+		"compilerOptions": {
+			"module": "esnext",
+			"target": "esnext",
+			"lib": ["es2020", "dom", "dom.iterable"],
+			"declaration": true,
+			"emitDeclarationOnly": true,
+			"noEmitOnError": true,
+			"outDir": "./types",
+			"strict": true,
+			"noImplicitReturns": true,
+			"noFallthroughCasesInSwitch": true,
+			"moduleResolution": "node",
+			"isolatedModules": true,
+			"allowSyntheticDefaultImports": true,
+			"experimentalDecorators": true,
+			"forceConsistentCasingInFileNames": true,
+			"useDefineForClassFields": false,
+			"skipLibCheck": true,
+			"resolveJsonModule": true,
+			"baseUrl": ".",
+			"paths": {
+				"@umbraco-cms/css": ["libs/css/custom-properties.css"],
+				"@umbraco-cms/modal": ["src/core/modal"],
+				"@umbraco-cms/models": ["libs/models"],
+				"@umbraco-cms/backend-api": ["libs/backend-api"],
+				"@umbraco-cms/context-api": ["libs/context-api"],
+				"@umbraco-cms/controller": ["libs/controller"],
+				"@umbraco-cms/element": ["libs/element"],
+				"@umbraco-cms/extensions-api": ["libs/extensions-api"],
+				"@umbraco-cms/extensions-registry": ["libs/extensions-registry"],
+				"@umbraco-cms/notification": ["libs/notification"],
+				"@umbraco-cms/observable-api": ["libs/observable-api"],
+				"@umbraco-cms/events": ["libs/events"],
+				"@umbraco-cms/entity-action": ["libs/entity-action"],
+				"@umbraco-cms/workspace": ["libs/workspace"],
+				"@umbraco-cms/utils": ["libs/utils"],
+				"@umbraco-cms/router": ["libs/router"],
+				"@umbraco-cms/test-utils": ["libs/test-utils"],
+				"@umbraco-cms/repository": ["libs/repository"],
+				"@umbraco-cms/resources": ["libs/resources"],
+				"@umbraco-cms/store": ["libs/store"],
+				"@umbraco-cms/components/*": ["src/backoffice/components/*"],
+				"@umbraco-cms/sections/*": ["src/backoffice/sections/*"]
+			}
+		},
+		"include": ["src/**/*.ts", "apps/**/*.ts", "libs/**/*.ts", "e2e/**/*.ts"],
+		"references": [
+			{
+				"path": "./tsconfig.node.json"
+			}
+		]
+	}`,
+};
+
+export default meta;
+type Story = StoryObj<UmbCodeEditorElement>;
+
+const [Javascript, Css, Html, Razor, Markdown, Typescript, Json]: Story[] = Object.keys(codeSnippets).map(
+	(language) => {
+		return {
+			args: {
+				language: language as CodeEditorLanguage,
+				code: codeSnippets[language as CodeEditorLanguage],
+			},
+		};
+	}
+);
+
+const Themes: Story = {
+	args: {
+		language: 'javascript',
+		code: codeSnippets.javascript,
+		theme: CodeEditorTheme.Dark,
+	},
+};
+
+export { Javascript, Css, Html, Razor, Markdown, Typescript, Json, Themes };
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/index.ts
new file mode 100644
index 0000000000..36b9c2e5c2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/index.ts
@@ -0,0 +1,8 @@
+import * as initializeWorkers from './languageWorkers';
+import { UmbCodeEditorElement } from './code-editor.element';
+import { UmbCodeEditorController } from './code-editor.controller';
+import { monacoEditorStyles } from './styles';
+
+export default UmbCodeEditorElement;
+
+export { initializeWorkers, UmbCodeEditorController as UmbCodeEditor, UmbCodeEditorElement, monacoEditorStyles };
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/languageWorkers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/languageWorkers.ts
new file mode 100644
index 0000000000..8fd766ec2e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/languageWorkers.ts
@@ -0,0 +1,33 @@
+//eslint-disable-next-line
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+//eslint-disable-next-line
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+//eslint-disable-next-line
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+//eslint-disable-next-line
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+//eslint-disable-next-line
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+export const initializeWorkers = () => {
+	self.MonacoEnvironment = {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		getWorker(_: any, label: string) {
+			if (label === 'json') {
+				return new jsonWorker();
+			}
+			if (label === 'css' || label === 'scss' || label === 'less') {
+				return new cssWorker();
+			}
+			if (label === 'html' || label === 'handlebars' || label === 'razor') {
+				return new htmlWorker();
+			}
+			if (label === 'typescript' || label === 'javascript') {
+				return new tsWorker();
+			}
+			return new editorWorker();
+		},
+	};
+};
+
+initializeWorkers();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/styles.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/styles.ts
new file mode 100644
index 0000000000..00f7a55e4d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/styles.ts
@@ -0,0 +1,14 @@
+import { css, unsafeCSS } from 'lit';
+import styles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
+
+export const monacoEditorStyles = css`
+	${unsafeCSS(styles)}
+`;
+
+export const monacoJumpingCursorHack = css`
+	/* a hacky workaround this issue: https://github.com/microsoft/monaco-editor/issues/3217 
+	should probably be removed when the issue is fixed */
+	.view-lines {
+		font-feature-settings: revert !important;
+	}
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.dark.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.dark.theme.ts
new file mode 100644
index 0000000000..cb746a8db7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.dark.theme.ts
@@ -0,0 +1,10 @@
+import * as monaco from 'monaco-editor';
+
+export const UmbCodeEditorThemeDark: monaco.editor.IStandaloneThemeData = {
+	base: 'vs-dark',
+	inherit: true, // can also be false to completely replace the builtin rules
+	rules: [],
+	colors: {
+		'editor.background': '#21262e',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-dark.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-dark.theme.ts
new file mode 100644
index 0000000000..6e5083021f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-dark.theme.ts
@@ -0,0 +1,8 @@
+import * as monaco from 'monaco-editor';
+
+export const UmbCodeEditorThemeHighContrastDark: monaco.editor.IStandaloneThemeData = {
+	base: 'vs-dark',
+	inherit: true, // can also be false to completely replace the builtin rules
+	rules: [],
+	colors: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-light.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-light.theme.ts
new file mode 100644
index 0000000000..f783ff22ab
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.hc-light.theme.ts
@@ -0,0 +1,8 @@
+import * as monaco from 'monaco-editor';
+
+export const UmbCodeEditorThemeHighContrastLight: monaco.editor.IStandaloneThemeData = {
+	base: 'vs',
+	inherit: true, // can also be false to completely replace the builtin rules
+	rules: [],
+	colors: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.light.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.light.theme.ts
new file mode 100644
index 0000000000..1c5c98cbb3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/code-editor.light.theme.ts
@@ -0,0 +1,8 @@
+import * as monaco from 'monaco-editor';
+
+export const UmbCodeEditorThemeLight: monaco.editor.IStandaloneThemeData = {
+	base: 'vs',
+	inherit: true, // can also be false to completely replace the builtin rules
+	rules: [],
+	colors: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/index.ts
new file mode 100644
index 0000000000..89c7798708
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/themes/index.ts
@@ -0,0 +1,24 @@
+import * as monaco from 'monaco-editor';
+import { CodeEditorTheme } from '../code-editor.model';
+import { UmbCodeEditorThemeHighContrastLight } from './code-editor.hc-light.theme';
+import { UmbCodeEditorThemeHighContrastDark } from './code-editor.hc-dark.theme';
+import { UmbCodeEditorThemeLight } from './code-editor.light.theme';
+import { UmbCodeEditorThemeDark } from './code-editor.dark.theme';
+/**
+ * 4 themes for the code editor.
+ *
+ * @type {*} */
+const themes: Record<CodeEditorTheme, monaco.editor.IStandaloneThemeData> = {
+	'umb-dark': UmbCodeEditorThemeDark,
+	'umb-light': UmbCodeEditorThemeLight,
+	'umb-hc-light': UmbCodeEditorThemeHighContrastLight,
+	'umb-hc-dark': UmbCodeEditorThemeHighContrastDark,
+};
+export {
+	UmbCodeEditorThemeDark,
+	UmbCodeEditorThemeLight,
+	UmbCodeEditorThemeHighContrastLight,
+	UmbCodeEditorThemeHighContrastDark,
+	themes,
+};
+export default themes;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
similarity index 99%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
index 916ce79310..fb3a7bfcd4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, svg } from 'lit';
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { clamp } from 'lodash-es';
-import { UmbDonutSliceElement } from './donut-slice';
+import { UmbDonutSliceElement } from './donut-slice.element';
 
 export interface Circle {
 	color: string;
@@ -180,8 +180,6 @@ export class UmbDonutChartElement extends LitElement {
 
 			this.#printCircles();
 		}
-
-
 	}
 
 	#calculatePercentage(partialValue: number) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
index efeb9c3405..94a935efb6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.stories.ts
@@ -1,5 +1,5 @@
-import './donut-slice';
-import './donut-chart';
+import './donut-slice.element';
+import './donut-chart.element';
 
 import { Meta } from '@storybook/web-components';
 import { html } from 'lit';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-slice.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-slice.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-slice.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-slice.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/index.ts
index 218f52b18f..b01b77e83f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/index.ts
@@ -1,2 +1,2 @@
-export * from './donut-chart';
-export * from './donut-slice';
+export * from './donut-chart.element';
+export * from './donut-slice.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index 2078c9d6ad..6bdba312a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -45,6 +45,7 @@ import './history/history-item.element';
 
 import './workspace/workspace-action/workspace-action.element';
 import './workspace/workspace-layout/workspace-layout.element';
+import './code-editor';
 
 import './workspace/workspace-footer-layout/workspace-footer-layout.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
index 01ed7e744f..461f748a51 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
@@ -1,7 +1,8 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { UUIInputElement, UUITextareaElement } from '@umbraco-ui/uui';
+import { customElement, query, state } from 'lit/decorators.js';
+import { UUIInputElement } from '@umbraco-ui/uui';
+import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element';
 import { UmbTemplateWorkspaceContext } from './template-workspace.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -16,8 +17,18 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 				height: 100%;
 			}
 
-			#content {
-				height: 200px;
+			umb-code-editor {
+				--editor-height: calc(100vh - 300px);
+			}
+
+			uui-box {
+				margin: 1em;
+				--uui-box-default-padding: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin: 1em;
 			}
 		`,
 	];
@@ -37,6 +48,9 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 	@state()
 	private _content?: string | null = '';
 
+	@query('umb-code-editor')
+	private _codeEditor?: UmbCodeEditorElement;
+
 	#templateWorkspaceContext = new UmbTemplateWorkspaceContext(this);
 	#isNew = false;
 
@@ -59,17 +73,35 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 		this.#templateWorkspaceContext.setName(value);
 	}
 
-	#onTextareaInput(event: Event) {
-		const target = event.target as UUITextareaElement;
-		const value = target.value as string;
+	//TODO - debounce that
+	#onCodeEditorInput(event: Event) {
+		const target = event.target as UmbCodeEditorElement;
+		const value = target.code as string;
 		this.#templateWorkspaceContext.setContent(value);
 	}
 
+	#insertCode(event: Event) {
+		const target = event.target as UUIInputElement;
+		const value = target.value as string;
+
+		this._codeEditor?.insert(`My hovercraft is full of eels`);
+	}
+
 	render() {
 		// TODO: add correct UI elements
 		return html`<umb-workspace-layout alias="Umb.Workspace.Template">
-			<uui-input .value=${this._name} @input=${this.#onNameInput}></uui-input>
-			<uui-textarea id="content" .value=${this._content} @input="${this.#onTextareaInput}"></uui-textarea>
+			<uui-input slot="header" .value=${this._name} @input=${this.#onNameInput}></uui-input>
+			<uui-box>
+				<uui-button color="danger" look="primary" slot="header" @click=${this.#insertCode}
+					>Insert "My hovercraft is full of eels"</uui-button
+				>
+
+				<umb-code-editor
+					language="razor"
+					id="content"
+					.code=${this._content ?? ''}
+					@input=${this.#onCodeEditorInput}></umb-code-editor>
+			</uui-box>
 		</umb-workspace-layout>`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts
index d1714e2ac4..210f4b48d5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts
@@ -32,8 +32,19 @@ export const data: Array<TemplateDBItem> = [
 		icon: 'icon-layout',
 		hasChildren: false,
 		alias: 'Doc1',
-		content:
-			'@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Doc1>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = null;\r\n}',
+		content: `@using Umbraco.Extensions
+		@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
+		@{
+			if (Model?.Areas.Any() != true) { return; }
+		}
+		
+		<div class="umb-block-grid__area-container"
+			 style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
+			@foreach (var area in Model.Areas)
+			{
+				@await Html.GetBlockGridItemAreaHtmlAsync(area)
+			}
+		</div>`,
 	},
 	{
 		$type: '',