Merge branch 'main' into feature/partial-view-editor

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

@@ -45,6 +45,7 @@
 				"local-rules/prefer-umbraco-cms-imports": "error",
 				"local-rules/no-external-imports": "error",
 				"local-rules/umb-class-prefix": "error",
+				"local-rules/prefer-static-styles-last": "warn",
 				"@typescript-eslint/no-non-null-assertion": "off"
 			},
 			"settings": {

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

@@ -5,6 +5,24 @@ import loginImg from '/login.jpeg';
 
 @customElement('umb-auth-layout')
 export class UmbAuthLayoutElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<div id="background"></div>
+
+			<div id="logo">
+				<img src="${logoImg}" alt="Umbraco" />
+			</div>
+
+			<div id="container">
+				<uui-box id="box">
+					<slot></slot>
+				</uui-box>
+			</div>
+		`;
+	}
+	
 	static styles: CSSResultGroup = [
 		css`
 			#background {
@@ -49,22 +67,6 @@ export class UmbAuthLayoutElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<div id="background"></div>
-
-			<div id="logo">
-				<img src="${logoImg}" alt="Umbraco" />
-			</div>
-
-			<div id="container">
-				<uui-box id="box">
-					<slot></slot>
-				</uui-box>
-			</div>
-		`;
-	}
 }
 
 declare global {

src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test.element.ts

@@ -4,6 +4,16 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-external-login-provider-test')
 export class UmbExternalLoginProviderTestElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<b>Custom External Login Provider</b>
+			<p>This is an example of a custom external login provider using the external login provider extension point</p>
+			<uui-button label="My custom login provider" look="primary"></uui-button>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -21,14 +31,6 @@ export class UmbExternalLoginProviderTestElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<b>Custom External Login Provider</b>
-			<p>This is an example of a custom external login provider using the external login provider extension point</p>
-			<uui-button label="My custom login provider" look="primary"></uui-button>
-		`;
-	}
 }
 
 export default UmbExternalLoginProviderTestElement;

src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test2.element.ts

@@ -4,6 +4,26 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-external-login-provider-test2')
 export class UmbExternalLoginProviderTest2Element extends LitElement {
+	
+
+	render() {
+		return html`
+			<b>Another Custom External Login Provider</b>
+			<p>This is an example of another custom external login provider</p>
+			<uui-form-layout-item>
+				<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
+				<uui-input
+					type="email"
+					id="email"
+					name="email"
+					placeholder="Enter your email..."
+					required
+					required-message="Email is required"></uui-input>
+			</uui-form-layout-item>
+			<uui-button label="Custom login" look="primary"></uui-button>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -24,24 +44,6 @@ export class UmbExternalLoginProviderTest2Element extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<b>Another Custom External Login Provider</b>
-			<p>This is an example of another custom external login provider</p>
-			<uui-form-layout-item>
-				<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
-				<uui-input
-					type="email"
-					id="email"
-					name="email"
-					placeholder="Enter your email..."
-					required
-					required-message="Email is required"></uui-input>
-			</uui-form-layout-item>
-			<uui-button label="Custom login" look="primary"></uui-button>
-		`;
-	}
 }
 
 export default UmbExternalLoginProviderTest2Element;

src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts

@@ -7,15 +7,7 @@ import './auth-layout.element';
 
 @customElement('umb-login')
 export default class UmbLoginElement extends LitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			#email,
-			#password {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _loggingIn = false;
@@ -109,6 +101,16 @@ export default class UmbLoginElement extends LitElement {
 			</umb-auth-layout>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			#email,
+			#password {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/eslint-local-rules.cjs

@@ -232,4 +232,51 @@ module.exports = {
 			};
 		},
 	},
+
+	/** @type {import('eslint').RuleModule}*/
+	'prefer-static-styles-last': {
+		meta: {
+			type: 'suggestion',
+			docs: {
+				description:
+					'Enforce the "styles" property with the static modifier to be the last property of a class that ends with "Element".',
+				category: 'Best Practices',
+				recommended: true,
+			},
+			fixable: 'code',
+			schema: [],
+		},
+		create: function (context) {
+			return {
+				ClassDeclaration(node) {
+					const className = node.id.name;
+					if (className.endsWith('Element')) {
+						const staticStylesProperty = node.body.body.find((bodyNode) => {
+							return bodyNode.type === 'PropertyDefinition' && bodyNode.key.name === 'styles' && bodyNode.static;
+						});
+						if (staticStylesProperty) {
+							const lastProperty = node.body.body[node.body.body.length - 1];
+							if (lastProperty.key.name !== staticStylesProperty.key.name) {
+								context.report({
+									node: staticStylesProperty,
+									message: 'The "styles" property should be the last property of a class declaration.',
+									data: {
+										className: className,
+									},
+									fix: function (fixer) {
+										const sourceCode = context.getSourceCode();
+										const staticStylesPropertyText = sourceCode.getText(staticStylesProperty);
+										return [
+											fixer.replaceTextRange(staticStylesProperty.range, ''),
+											fixer.insertTextAfterRange(lastProperty.range, '\n	\n	' + staticStylesPropertyText),
+										];
+									},
+								});
+							}
+						}
+					}
+				},
+			};
+		},
+	},
 };

src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete-folder/delete-folder.action.ts

@@ -2,11 +2,9 @@ import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
-import { UmbFolderRepository, UmbItemRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbFolderRepository } from '@umbraco-cms/backoffice/repository';
 
-export class UmbDeleteFolderEntityAction<
-	T extends UmbItemRepository<any> & UmbFolderRepository
-> extends UmbEntityActionBase<T> {
+export class UmbDeleteFolderEntityAction<T extends UmbFolderRepository> extends UmbEntityActionBase<T> {
 	#modalContext?: UmbModalContext;
 
 	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
@@ -20,14 +18,12 @@ export class UmbDeleteFolderEntityAction<
 	async execute() {
 		if (!this.repository || !this.#modalContext) return;
 
-		const { data } = await this.repository.requestItems([this.unique]);
-
-		if (data) {
-			const item = data[0];
+		const { data: folder } = await this.repository.requestFolder(this.unique);
 
+		if (folder) {
 			// TODO: maybe we can show something about how many items are part of the folder?
 			const modalHandler = this.#modalContext.open(UMB_CONFIRM_MODAL, {
-				headline: `Delete folder ${item.name}`,
+				headline: `Delete folder ${folder.name}`,
 				content: 'Are you sure you want to delete this folder?',
 				color: 'danger',
 				confirmLabel: 'Delete',

src/Umbraco.Web.UI.Client/libs/router/index.ts

@@ -1,4 +1,14 @@
-export * from 'router-slot/model';
+export type {
+	IRoute,
+	PageComponent,
+	Guard,
+	IRoutingInfo,
+	IComponentRoute,
+	IRedirectRoute,
+	IResolverRoute,
+	Params,
+	Query,
+} from 'router-slot/model';
 export * from 'router-slot/util';
 export * from './route-location.interface';
 export * from './route.context';

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

@@ -70,9 +70,9 @@
 				"tiny-glob": "^0.2.9",
 				"typescript": "^5.0.3",
 				"typescript-json-schema": "^0.55.0",
-				"vite": "^4.2.1",
-				"vite-plugin-static-copy": "^0.13.0",
-				"vite-tsconfig-paths": "^4.0.5",
+				"vite": "^4.3.1",
+				"vite-plugin-static-copy": "^0.14.0",
+				"vite-tsconfig-paths": "^4.2.0",
 				"web-component-analyzer": "^2.0.0-next.4"
 			},
 			"engines": {
@@ -16085,9 +16085,9 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "3.18.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.18.0.tgz",
-			"integrity": "sha512-J8C6VfEBjkvYPESMQYxKHxNOh4A5a3FlP+0BETGo34HEcE4eTlgCrO2+eWzlu2a/sHs2QUkZco+wscH7jhhgWg==",
+			"version": "3.20.7",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.7.tgz",
+			"integrity": "sha512-P7E2zezKSLhWnTz46XxjSmInrbOCiul1yf+kJccMxT56vxjHwCbDfoLbiqFgu+WQoo9ij2PkraYaBstgB2prBA==",
 			"dev": true,
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -17382,9 +17382,9 @@
 			"dev": true
 		},
 		"node_modules/tsconfck": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.0.3.tgz",
-			"integrity": "sha512-o3DsPZO1+C98KqHMdAbWs30zpxD30kj8r9OLA4ML1yghx4khNDzaaShNalfluh8ZPPhzKe3qyVCP1HiZszSAsw==",
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.1.1.tgz",
+			"integrity": "sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww==",
 			"dev": true,
 			"bin": {
 				"tsconfck": "bin/tsconfck.js"
@@ -17393,7 +17393,7 @@
 				"node": "^14.13.1 || ^16 || >=18"
 			},
 			"peerDependencies": {
-				"typescript": "^4.3.5"
+				"typescript": "^4.3.5 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"typescript": {
@@ -17956,15 +17956,14 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
-			"integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
+			"integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.17.5",
 				"postcss": "^8.4.21",
-				"resolve": "^1.22.1",
-				"rollup": "^3.18.0"
+				"rollup": "^3.20.2"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
@@ -18005,9 +18004,9 @@
 			}
 		},
 		"node_modules/vite-plugin-static-copy": {
-			"version": "0.13.1",
-			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.13.1.tgz",
-			"integrity": "sha512-KwIcGBT1aOxSq+laK3VmSngoEa3HXWj/6ZEXdv+y59eZ7p/XSuPahoDo+CfYW22JjTdnstgeKWiX+78KNgDu6g==",
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.14.0.tgz",
+			"integrity": "sha512-RMFmb4czomcrsbQBiUZs9HcDGN3kxGvF+OrtkfTVocp12CuoUCuJQhcY26RK35A6KS4WasGzEwcYZqHMjkAvVw==",
 			"dev": true,
 			"dependencies": {
 				"chokidar": "^3.5.3",
@@ -18023,14 +18022,22 @@
 			}
 		},
 		"node_modules/vite-tsconfig-paths": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.5.tgz",
-			"integrity": "sha512-/L/eHwySFYjwxoYt1WRJniuK/jPv+WGwgRGBYx3leciR5wBeqntQpUE6Js6+TJemChc+ter7fDBKieyEWDx4yQ==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
+			"integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
 			"dev": true,
 			"dependencies": {
 				"debug": "^4.1.1",
 				"globrex": "^0.1.2",
-				"tsconfck": "^2.0.1"
+				"tsconfck": "^2.1.0"
+			},
+			"peerDependencies": {
+				"vite": "*"
+			},
+			"peerDependenciesMeta": {
+				"vite": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/walker": {
@@ -30587,9 +30594,9 @@
 			}
 		},
 		"rollup": {
-			"version": "3.18.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.18.0.tgz",
-			"integrity": "sha512-J8C6VfEBjkvYPESMQYxKHxNOh4A5a3FlP+0BETGo34HEcE4eTlgCrO2+eWzlu2a/sHs2QUkZco+wscH7jhhgWg==",
+			"version": "3.20.7",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.7.tgz",
+			"integrity": "sha512-P7E2zezKSLhWnTz46XxjSmInrbOCiul1yf+kJccMxT56vxjHwCbDfoLbiqFgu+WQoo9ij2PkraYaBstgB2prBA==",
 			"dev": true,
 			"requires": {
 				"fsevents": "~2.3.2"
@@ -31607,9 +31614,9 @@
 			"dev": true
 		},
 		"tsconfck": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.0.3.tgz",
-			"integrity": "sha512-o3DsPZO1+C98KqHMdAbWs30zpxD30kj8r9OLA4ML1yghx4khNDzaaShNalfluh8ZPPhzKe3qyVCP1HiZszSAsw==",
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.1.1.tgz",
+			"integrity": "sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww==",
 			"dev": true
 		},
 		"tsconfig-paths": {
@@ -32024,22 +32031,21 @@
 			"dev": true
 		},
 		"vite": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
-			"integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
+			"integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
 			"dev": true,
 			"requires": {
 				"esbuild": "^0.17.5",
 				"fsevents": "~2.3.2",
 				"postcss": "^8.4.21",
-				"resolve": "^1.22.1",
-				"rollup": "^3.18.0"
+				"rollup": "^3.20.2"
 			}
 		},
 		"vite-plugin-static-copy": {
-			"version": "0.13.1",
-			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.13.1.tgz",
-			"integrity": "sha512-KwIcGBT1aOxSq+laK3VmSngoEa3HXWj/6ZEXdv+y59eZ7p/XSuPahoDo+CfYW22JjTdnstgeKWiX+78KNgDu6g==",
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.14.0.tgz",
+			"integrity": "sha512-RMFmb4czomcrsbQBiUZs9HcDGN3kxGvF+OrtkfTVocp12CuoUCuJQhcY26RK35A6KS4WasGzEwcYZqHMjkAvVw==",
 			"dev": true,
 			"requires": {
 				"chokidar": "^3.5.3",
@@ -32049,14 +32055,14 @@
 			}
 		},
 		"vite-tsconfig-paths": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.5.tgz",
-			"integrity": "sha512-/L/eHwySFYjwxoYt1WRJniuK/jPv+WGwgRGBYx3leciR5wBeqntQpUE6Js6+TJemChc+ter7fDBKieyEWDx4yQ==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
+			"integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
 			"dev": true,
 			"requires": {
 				"debug": "^4.1.1",
 				"globrex": "^0.1.2",
-				"tsconfck": "^2.0.1"
+				"tsconfck": "^2.1.0"
 			}
 		},
 		"walker": {

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

@@ -122,9 +122,9 @@
 		"tiny-glob": "^0.2.9",
 		"typescript": "^5.0.3",
 		"typescript-json-schema": "^0.55.0",
-		"vite": "^4.2.1",
-		"vite-plugin-static-copy": "^0.13.0",
-		"vite-tsconfig-paths": "^4.0.5",
+		"vite": "^4.3.1",
+		"vite-plugin-static-copy": "^0.14.0",
+		"vite-tsconfig-paths": "^4.2.0",
 		"web-component-analyzer": "^2.0.0-next.4"
 	},
 	"msw": {

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

@@ -22,18 +22,7 @@ import { contextData, umbDebugContextEventType } from '@umbraco-cms/backoffice/c
 
 @customElement('umb-app')
 export class UmbAppElement extends UmbLitElement {
-	static styles = css`
-		:host {
-			overflow: hidden;
-		}
-
-		:host,
-		#router-slot {
-			display: block;
-			width: 100%;
-			height: 100vh;
-		}
-	`;
+	
 
 	@property({ type: String })
 	private umbracoUrl?: string;
@@ -158,6 +147,19 @@ export class UmbAppElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = css`
+		:host {
+			overflow: hidden;
+		}
+
+		:host,
+		#router-slot {
+			display: block;
+			width: 100%;
+			height: 100vh;
+		}
+	`;
 }
 
 declare global {

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

@@ -28,23 +28,7 @@ const CORE_PACKAGES = [
 
 @defineElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				width: 100%;
-				color: var(--uui-color-text);
-				font-size: 14px;
-				box-sizing: border-box;
-			}
-			umb-backoffice-modal-container {
-				z-index: 1000;
-			}
-		`,
-	];
+	
 
 	constructor() {
 		super();
@@ -64,6 +48,24 @@ export class UmbBackofficeElement extends UmbLitElement {
 			<umb-backoffice-modal-container></umb-backoffice-modal-container>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				width: 100%;
+				color: var(--uui-color-text);
+				font-size: 14px;
+				box-sizing: border-box;
+			}
+			umb-backoffice-modal-container {
+				z-index: 1000;
+			}
+		`,
+	];
 }
 
 export default UmbBackofficeElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts

@@ -13,79 +13,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-redirect-management')
 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);
-				justify-content: space-between;
-				margin-bottom: var(--uui-size-space-4);
-			}
-
-			.actions uui-icon {
-				transform: translateX(50%);
-			}
-
-			uui-table {
-				table-layout: fixed;
-			}
-
-			uui-table-head-cell:nth-child(2*n) {
-				width: 10%;
-			}
-
-			uui-table-head-cell:last-child,
-			uui-table-cell:last-child {
-				text-align: right;
-			}
-
-			uui-table uui-icon {
-				vertical-align: sub;
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-			.pagination {
-				display: flex;
-				justify-content: center;
-				margin-top: var(--uui-size-space-5);
-			}
-
-			.trackerDisabled {
-				position: relative;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-			}
-			.trackerDisabled::after {
-				content: '';
-				background-color: var(--uui-color-disabled);
-				position: absolute;
-				border-radius: 2px;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-			}
-
-			a {
-				color: var(--uui-color-interactive);
-			}
-			a:hover,
-			a:focus {
-				color: var(--uui-color-interactive-emphasis);
-			}
-		`,
-	];
+	
 
 	@property({ type: Number, attribute: 'items-per-page' })
 	itemsPerPage = 20;
@@ -337,6 +265,80 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 			<uui-pagination .total=${totalPages} @change="${this._onPageChange}"></uui-pagination>
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			.actions {
+				display: flex;
+				gap: var(--uui-size-space-1);
+				justify-content: space-between;
+				margin-bottom: var(--uui-size-space-4);
+			}
+
+			.actions uui-icon {
+				transform: translateX(50%);
+			}
+
+			uui-table {
+				table-layout: fixed;
+			}
+
+			uui-table-head-cell:nth-child(2*n) {
+				width: 10%;
+			}
+
+			uui-table-head-cell:last-child,
+			uui-table-cell:last-child {
+				text-align: right;
+			}
+
+			uui-table uui-icon {
+				vertical-align: sub;
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-5);
+			}
+
+			.trackerDisabled {
+				position: relative;
+				-webkit-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+			.trackerDisabled::after {
+				content: '';
+				background-color: var(--uui-color-disabled);
+				position: absolute;
+				border-radius: 2px;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				-webkit-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+
+			a {
+				color: var(--uui-color-interactive);
+			}
+			a:hover,
+			a:focus {
+				color: var(--uui-color-interactive-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardRedirectManagementElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts

@@ -4,15 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-welcome')
 export class UmbDashboardWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -22,6 +14,16 @@ export class UmbDashboardWelcomeElement extends LitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardWelcomeElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts

@@ -12,7 +12,7 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 	UmbAllowedDocumentTypesModalData,
 	UmbAllowedDocumentTypesModalResult
 > {
-	static styles = [UUITextStyles];
+	
 
 	#documentTypeRepository = new UmbDocumentTypeRepository(this);
 
@@ -60,6 +60,8 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbAllowedDocumentTypesModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts

@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-document-type-workspace')
 export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	#workspaceContext = new UmbDocumentTypeWorkspaceContext(this);
 	#element = new UmbDocumentTypeWorkspaceEditorElement();
@@ -28,6 +28,8 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbDocumentTypeWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts

@@ -9,73 +9,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-document-type-workspace-view-design')
 export class UmbDocumentTypeWorkspaceViewDesignElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			/* TODO: This should be replaced with a general workspace bar — naming is hard */
-			#workspace-tab-bar {
-				padding: 0 var(--uui-size-layout-1);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				background-color: var(--uui-color-surface);
-				flex-wrap: nowrap;
-			}
-			.tab-actions {
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-			.tab-actions uui-button uui-icon {
-				padding-right: calc(-1 * var(--uui-size-space-4));
-			}
-
-			uui-tab {
-				display: flex;
-				flex-direction: row;
-				flex-wrap: nowrap;
-			}
-
-			uui-tab .trash {
-				display: flex;
-				align-items: stretch;
-			}
-
-			uui-tab uui-input {
-				flex-grow: 1;
-			}
-
-			uui-input:not(:focus) {
-				border: 1px solid transparent;
-			}
-
-			uui-input:not(:hover, :focus) .trash {
-				opacity: 0;
-			}
-
-			/** Property Group Wrapper */
-
-			#wrapper {
-				margin: var(--uui-size-layout-1);
-			}
-
-			#add-group {
-				margin-top: var(--uui-size-layout-1);
-				width: 100%;
-				--uui-button-height: var(--uui-size-layout-4);
-			}
-
-			.group-headline {
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-			.group-headline uui-input {
-				flex-grow: 1;
-			}
-		`,
-	];
+	
 
 	private _workspaceContext?: UmbDocumentTypeWorkspaceContext;
 
@@ -162,6 +96,74 @@ export class UmbDocumentTypeWorkspaceViewDesignElement extends UmbLitElement {
 			</uui-button>
 		</uui-tab-group>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			/* TODO: This should be replaced with a general workspace bar — naming is hard */
+			#workspace-tab-bar {
+				padding: 0 var(--uui-size-layout-1);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: var(--uui-color-surface);
+				flex-wrap: nowrap;
+			}
+			.tab-actions {
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+			.tab-actions uui-button uui-icon {
+				padding-right: calc(-1 * var(--uui-size-space-4));
+			}
+
+			uui-tab {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+			}
+
+			uui-tab .trash {
+				display: flex;
+				align-items: stretch;
+			}
+
+			uui-tab uui-input {
+				flex-grow: 1;
+			}
+
+			uui-input:not(:focus) {
+				border: 1px solid transparent;
+			}
+
+			uui-input:not(:hover, :focus) .trash {
+				opacity: 0;
+			}
+
+			/** Property Group Wrapper */
+
+			#wrapper {
+				margin: var(--uui-size-layout-1);
+			}
+
+			#add-group {
+				margin-top: var(--uui-size-layout-1);
+				width: 100%;
+				--uui-button-height: var(--uui-size-layout-4);
+			}
+
+			.group-headline {
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+			.group-headline uui-input {
+				flex-grow: 1;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewDesignElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts

@@ -9,18 +9,7 @@ import './document-type-workspace-view-edit-properties.element';
 
 @customElement('umb-document-type-workspace-view-edit-tab')
 export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-
-			#add {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	private _ownerTabId?: string | undefined;
 
@@ -106,6 +95,19 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 			<uui-button id="add" look="placeholder" @click=${this.#onAddGroup}> Add Group </uui-button>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+
+			#add {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewEditTabElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts

@@ -13,25 +13,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-document-type-workspace-view-edit')
 export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				--uui-tab-background: var(--uui-color-surface);
-			}
-
-			/* TODO: This should be replaced with a general workspace bar — naming is hard */
-			#workspace-tab-bar {
-				padding: 0 var(--uui-size-layout-1);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				background-color: var(--uui-color-surface);
-				flex-wrap: nowrap;
-			}
-		`,
-	];
+	
 
 	//private _hasRootProperties = false;
 	private _hasRootGroups = false;
@@ -215,6 +197,26 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
 			</umb-router-slot>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				--uui-tab-background: var(--uui-color-surface);
+			}
+
+			/* TODO: This should be replaced with a general workspace bar — naming is hard */
+			#workspace-tab-bar {
+				padding: 0 var(--uui-size-layout-1);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: var(--uui-color-surface);
+				flex-wrap: nowrap;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts

@@ -7,26 +7,7 @@ import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 // TODO: this could be done more generic, but for now we just need it for the document table
 @customElement('umb-document-table-actions-column-layout')
 export class UmbDocumentTableActionColumnLayoutElement extends LitElement {
-	static styles = [
-		css`
-			#action-menu-popover {
-				display: block;
-				text-align: right;
-			}
-			#action-menu-dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				width: 500px;
-			}
-		`,
-	];
+	
 
 	@property({ type: Object, attribute: false })
 	column!: UmbTableColumn;
@@ -75,6 +56,27 @@ export class UmbDocumentTableActionColumnLayoutElement extends LitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		css`
+			#action-menu-popover {
+				display: block;
+				text-align: right;
+			}
+			#action-menu-dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				width: 500px;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTableActionColumnLayoutElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/document-table-collection-view.element.ts

@@ -23,23 +23,7 @@ type EntityType = DocumentTreeItemResponseModel;
 
 @customElement('umb-document-table-collection-view')
 export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				box-sizing: border-box;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-
-			/* TODO: Should we have embedded padding in the table component? */
-			umb-table {
-				padding: 0; /* To fix the embedded padding in the table component. */
-			}
-		`,
-	];
+	
 
 	@state()
 	private _items?: Array<EntityTreeItemResponseModel>;
@@ -150,6 +134,24 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			/* TODO: Should we have embedded padding in the table component? */
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTableCollectionViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts

@@ -11,40 +11,7 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement<
 	UmbDocumentPickerModalData,
 	UmbDocumentPickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -92,6 +59,41 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentPickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts

@@ -11,40 +11,7 @@ export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
 	UmbDocumentTypePickerModalData,
 	UmbDocumentTypePickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -92,6 +59,41 @@ export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypePickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -7,29 +7,7 @@ import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-a
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#icon-container {
-				position: relative;
-			}
-
-			#icon {
-				vertical-align: middle;
-			}
-
-			#status-symbol {
-				width: 8px;
-				height: 8px;
-				background-color: blue;
-				display: block;
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				border-radius: 100%;
-			}
-		`,
-	];
+	
 
 	private _item?: DocumentTreeItemResponseModel;
 	@property({ type: Object, attribute: false })
@@ -67,6 +45,30 @@ export class UmbDocumentTreeItemElement extends UmbLitElement {
 	#renderLabel() {
 		return html` <span id="label" slot="label">${this.item?.name}</span> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#icon-container {
+				position: relative;
+			}
+
+			#icon {
+				vertical-align: middle;
+			}
+
+			#status-symbol {
+				width: 8px;
+				height: 8px;
+				background-color: blue;
+				display: block;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				border-radius: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTreeItemElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts

@@ -9,17 +9,7 @@ import { DocumentTypePropertyTypeResponseModel } from '@umbraco-cms/backoffice/b
 
 @customElement('umb-document-workspace-view-edit-properties')
 export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.property {
-				border-bottom: 1px solid var(--uui-color-divider);
-			}
-			.property:last-child {
-				border-bottom: 0;
-			}
-		`,
-	];
+	
 
 	@property({ type: String, attribute: 'container-name', reflect: false })
 	public get containerName(): string | undefined {
@@ -57,6 +47,18 @@ export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement
 			(property) => html`<umb-variantable-property class="property" .property=${property}></umb-variantable-property> `
 		);
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.property {
+				border-bottom: 1px solid var(--uui-color-divider);
+			}
+			.property:last-child {
+				border-bottom: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditPropertiesElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts

@@ -9,14 +9,7 @@ import './document-workspace-view-edit-properties.element';
 
 @customElement('umb-document-workspace-view-edit-tab')
 export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	private _tabName?: string | undefined;
 
@@ -81,6 +74,15 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 			)}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditTabElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit.element.ts

@@ -12,15 +12,7 @@ import { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-document-workspace-view-edit')
 export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				--uui-tab-background: var(--uui-color-surface);
-			}
-		`,
-	];
+	
 
 	//private _hasRootProperties = false;
 	private _hasRootGroups = false;
@@ -147,6 +139,16 @@ export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
 			</umb-router-slot>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				--uui-tab-background: var(--uui-color-surface);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts

@@ -22,96 +22,7 @@ type HistoryLogType = 'Publish' | 'Save' | 'Unpublish' | 'ContentVersionEnableCl
 
 @customElement('umb-document-info-workspace-view')
 export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: grid;
-				gap: var(--uui-size-layout-1);
-				margin: var(--uui-size-layout-1);
-				grid-template-columns: 1fr 350px;
-			}
-
-			div.container {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-layout-1);
-			}
-
-			//General section
-
-			#general-section {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.general-item {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-1);
-			}
-
-			.general-item:not(:last-child) {
-				margin-bottom: var(--uui-size-space-6);
-			}
-
-			// Link section
-
-			#link-section {
-				display: flex;
-				flex-direction: column;
-				text-align: left;
-			}
-
-			.link-item {
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				display: grid;
-				grid-template-columns: 75px 1fr;
-				color: inherit;
-				text-decoration: none;
-			}
-
-			.link-language {
-				color: var(--uui-color-divider-emphasis);
-			}
-
-			.link-content.italic {
-				font-style: italic;
-			}
-
-			.link-item uui-icon {
-				margin-right: var(--uui-size-space-2);
-				vertical-align: middle;
-			}
-
-			.link-item.with-href {
-				cursor: pointer;
-			}
-
-			.link-item.with-href:hover {
-				background: var(--uui-color-divider);
-			}
-
-			//History section
-
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
-			}
-
-			.log-type {
-				display: flex;
-				gap: var(--uui-size-space-2);
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-			.pagination {
-				display: flex;
-				justify-content: center;
-				margin-top: var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _historyList: HistoryNode[] = [
@@ -325,6 +236,97 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 				return 'Could not detech log type';
 		}
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: grid;
+				gap: var(--uui-size-layout-1);
+				margin: var(--uui-size-layout-1);
+				grid-template-columns: 1fr 350px;
+			}
+
+			div.container {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-layout-1);
+			}
+
+			//General section
+
+			#general-section {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.general-item {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-1);
+			}
+
+			.general-item:not(:last-child) {
+				margin-bottom: var(--uui-size-space-6);
+			}
+
+			// Link section
+
+			#link-section {
+				display: flex;
+				flex-direction: column;
+				text-align: left;
+			}
+
+			.link-item {
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				display: grid;
+				grid-template-columns: 75px 1fr;
+				color: inherit;
+				text-decoration: none;
+			}
+
+			.link-language {
+				color: var(--uui-color-divider-emphasis);
+			}
+
+			.link-content.italic {
+				font-style: italic;
+			}
+
+			.link-item uui-icon {
+				margin-right: var(--uui-size-space-2);
+				vertical-align: middle;
+			}
+
+			.link-item.with-href {
+				cursor: pointer;
+			}
+
+			.link-item.with-href:hover {
+				background: var(--uui-color-divider);
+			}
+
+			//History section
+
+			uui-tag uui-icon {
+				margin-right: var(--uui-size-space-1);
+			}
+
+			.log-type {
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentInfoWorkspaceViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts

@@ -8,20 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-media-type-workspace-edit')
 export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-layout-1);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaTypeName?: string | null = '';
@@ -59,6 +46,21 @@ export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement {
 			<uui-input id="header" slot="header" .value=${this._mediaTypeName} @input="${this.#handleInput}"></uui-input>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-layout-1);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaTypeWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts

@@ -8,20 +8,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-media-type-workspace')
 export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-layout-1);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbWorkspaceMediaTypeContext(this);
 	#element = new UmbMediaTypeWorkspaceEditElement();
@@ -41,6 +28,21 @@ export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-layout-1);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaTypeWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/collection-view-media-test.element.ts

@@ -4,11 +4,13 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-collection-view-media-test')
 export class UmbCollectionViewMediaTestElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`umb-collection-view-media-test`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts

@@ -9,61 +9,7 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api
 
 @customElement('umb-media-grid-collection-view')
 export class UmbMediaGridCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-				position: relative;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-			:host([dragging]) #dropzone {
-				opacity: 1;
-				pointer-events: all;
-			}
-			[dropzone] {
-				opacity: 0;
-			}
-			#dropzone {
-				opacity: 0;
-				pointer-events: none;
-				display: block;
-				position: absolute;
-				inset: 0px;
-				z-index: 100;
-				backdrop-filter: opacity(1); /* Removes the built in blur effect */
-				border-radius: var(--uui-border-radius);
-				overflow: clip;
-				border: 1px solid var(--uui-color-focus);
-			}
-			#dropzone:after {
-				content: '';
-				display: block;
-				position: absolute;
-				inset: 0;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-focus);
-				opacity: 0.2;
-			}
-			#media-folders {
-				margin-bottom: var(--uui-size-space-5);
-			}
-			#media-folders,
-			#media-files {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-				grid-template-rows: repeat(auto-fill, 200px);
-				gap: var(--uui-size-space-5);
-			}
-			.media-item img {
-				object-fit: contain;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaItems?: Array<EntityTreeItemResponseModel>;
@@ -174,6 +120,62 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				position: relative;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+			:host([dragging]) #dropzone {
+				opacity: 1;
+				pointer-events: all;
+			}
+			[dropzone] {
+				opacity: 0;
+			}
+			#dropzone {
+				opacity: 0;
+				pointer-events: none;
+				display: block;
+				position: absolute;
+				inset: 0px;
+				z-index: 100;
+				backdrop-filter: opacity(1); /* Removes the built in blur effect */
+				border-radius: var(--uui-border-radius);
+				overflow: clip;
+				border: 1px solid var(--uui-color-focus);
+			}
+			#dropzone:after {
+				content: '';
+				display: block;
+				position: absolute;
+				inset: 0;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-focus);
+				opacity: 0.2;
+			}
+			#media-folders {
+				margin-bottom: var(--uui-size-space-5);
+			}
+			#media-folders,
+			#media-files {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+				grid-template-rows: repeat(auto-fill, 200px);
+				gap: var(--uui-size-space-5);
+			}
+			.media-item img {
+				object-fit: contain;
+			}
+		`,
+	];
 }
 
 export default UmbMediaGridCollectionViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-table-collection-view.element.ts

@@ -17,23 +17,7 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api
 
 @customElement('umb-media-table-collection-view')
 export class UmbMediaTableCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				box-sizing: border-box;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-
-			/* TODO: Should we have embedded padding in the table component? */
-			umb-table {
-				padding: 0; /* To fix the embedded padding in the table component. */
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaItems?: Array<EntityTreeItemResponseModel>;
@@ -130,6 +114,24 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			/* TODO: Should we have embedded padding in the table component? */
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+		`,
+	];
 }
 
 export default UmbMediaTableCollectionViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts

@@ -10,40 +10,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<
 	UmbMediaPickerModalData,
 	UmbMediaPickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -91,6 +58,41 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbMediaPickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts

@@ -7,25 +7,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-media-workspace-edit')
 export class UmbMediaWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-
-			#footer {
-				margin: 0 var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_id?: string;
@@ -56,6 +38,26 @@ export class UmbMediaWorkspaceEditElement extends UmbLitElement {
 				unique="${this._id}"></umb-workspace-action-menu>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+
+			#footer {
+				margin: 0 var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbMediaWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts

@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-workspace')
 export class UmbMediaWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMediaWorkspaceContext(this);
 	#element = new UmbMediaWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMediaWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.element.ts

@@ -5,11 +5,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-edit-workspace-view')
 export class UmbMediaEditWorkspaceViewElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`<div>Render Media Props</div>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbMediaEditWorkspaceViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.element.ts

@@ -5,11 +5,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-info-workspace-view')
 export class UmbMediaInfoWorkspaceViewElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`<div>Media info</div>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbMediaInfoWorkspaceViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts

@@ -4,15 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-members-welcome')
 export class UmbDashboardMembersWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -25,6 +17,16 @@ export class UmbDashboardMembersWelcomeElement extends LitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardMembersWelcomeElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts

@@ -13,27 +13,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
  */
 @customElement('umb-member-group-workspace-edit')
 export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				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;
 
@@ -72,6 +52,28 @@ export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
 			</div>
 		</umb-workspace-layout> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				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;
+			}
+		`,
+	];
 }
 
 export default UmbMemberGroupWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts

@@ -12,16 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-member-group-workspace')
 export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbWorkspaceMemberGroupContext(this);
 	#element = new UmbMemberGroupWorkspaceEditElement();
@@ -41,6 +32,17 @@ export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberGroupWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts

@@ -8,29 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-view-member-group-info')
 export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				margin: var(--uui-size-layout-1);
-				gap: var(--uui-size-layout-1);
-				justify-content: space-between;
-			}
-
-			uui-box {
-				margin-bottom: var(--ui-size-layout-1);
-			}
-
-			uui-box:first-child {
-				flex: 1 1 75%;
-			}
-
-			uui-box:last-child {
-				min-width: 320px;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _memberGroup?: MemberGroupDetails;
@@ -80,6 +58,30 @@ export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement {
 	render() {
 		return html` ${this._renderMemberGroupInfo()}${this._renderGeneralInfo()} `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				margin: var(--uui-size-layout-1);
+				gap: var(--uui-size-layout-1);
+				justify-content: space-between;
+			}
+
+			uui-box {
+				margin-bottom: var(--ui-size-layout-1);
+			}
+
+			uui-box:first-child {
+				flex: 1 1 75%;
+			}
+
+			uui-box:last-child {
+				min-width: 320px;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewMemberGroupInfoElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace-edit.element.ts

@@ -5,6 +5,14 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-type-workspace-edit')
 export class UmbMemberTypeWorkspaceEditElement extends UmbLitElement {
+	
+
+	render() {
+		return html`
+			<umb-workspace-layout alias="Umb.Workspace.MemberType"> Member Type Workspace </umb-workspace-layout>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -21,12 +29,6 @@ export class UmbMemberTypeWorkspaceEditElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<umb-workspace-layout alias="Umb.Workspace.MemberType"> Member Type Workspace </umb-workspace-layout>
-		`;
-	}
 }
 
 export default UmbMemberTypeWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.element.ts

@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-type-workspace')
 export class UmbMemberTypeWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMemberTypeWorkspaceContext(this);
 	#element = new UmbMemberTypeWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMemberTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberTypeWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts

@@ -4,6 +4,12 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-member-workspace-edit')
 export class UmbMemberWorkspaceEditElement extends LitElement {
+	
+
+	render() {
+		return html` <umb-workspace-layout alias="Umb.Workspace.Member">Member Workspace</umb-workspace-layout> `;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -14,10 +20,6 @@ export class UmbMemberWorkspaceEditElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html` <umb-workspace-layout alias="Umb.Workspace.Member">Member Workspace</umb-workspace-layout> `;
-	}
 }
 
 export default UmbMemberWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts

@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-workspace')
 export class UmbMemberWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMemberWorkspaceContext(this);
 	#element = new UmbMemberWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMemberWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -13,29 +13,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-workspace-package-builder')
 export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				height: 100%;
-			}
-
-			.header {
-				margin: 0 var(--uui-size-layout-1);
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-
-			uui-checkbox {
-				margin-top: var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@property()
 	entityId?: string;
@@ -286,6 +264,30 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 			<umb-input-checkbox-list></umb-input-checkbox-list>
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+
+			.header {
+				margin: 0 var(--uui-size-layout-1);
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-checkbox {
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspacePackageBuilderElement;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-repo/workspace/workspace-package.element.ts

@@ -4,15 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 @customElement('umb-workspace-package')
 export class UmbWorkspacePackageElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.header {
-				display: flex;
-				font-size: var(--uui-type-h5-size);
-			}
-		`,
-	];
+	
 
 	@property()
 	entityId?: string;
@@ -50,6 +42,16 @@ export class UmbWorkspacePackageElement extends LitElement {
 	render() {
 		return html`<umb-workspace-layout alias="Umb.Workspace.Package"> ${this._renderHeader()} </umb-workspace-layout> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.header {
+				display: flex;
+				font-size: var(--uui-type-h5-size);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspacePackageElement;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts

@@ -10,32 +10,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@um
 
 @customElement('umb-packages-created-overview')
 export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
-	static styles = [
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			uui-box {
-				margin: var(--uui-size-space-5) 0;
-				padding-bottom: var(--uui-size-space-1);
-			}
-
-			.no-packages {
-				display: flex;
-				justify-content: space-around;
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-
-			.pagination,
-			.loading {
-				display: flex;
-				justify-content: center;
-			}
-		`,
-	];
+	
 
 	private take = 20;
 
@@ -149,6 +124,33 @@ export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
 		this._createdPackages.splice(index, 1);
 		this.requestUpdate();
 	}
+	
+	static styles = [
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			uui-box {
+				margin: var(--uui-size-space-5) 0;
+				padding-bottom: var(--uui-size-space-1);
+			}
+
+			.no-packages {
+				display: flex;
+				justify-content: space-around;
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+
+			.pagination,
+			.loading {
+				display: flex;
+				justify-content: center;
+			}
+		`,
+	];
 }
 
 export default UmbPackagesCreatedOverviewElement;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts

@@ -14,12 +14,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-installed-packages-section-view-item')
 export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
-	static styles = css`
-		:host {
-			display: flex;
-			min-height: 47px;
-		}
-	`;
+	
 
 	@property()
 	name?: string;
@@ -147,6 +142,13 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 		});
 		*/
 	}
+	
+	static styles = css`
+		:host {
+			display: flex;
+			min-height: 47px;
+		}
+	`;
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts

@@ -11,34 +11,7 @@ import './installed-packages-section-view-item.element';
 
 @customElement('umb-installed-packages-section-view')
 export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			uui-box {
-				margin-top: var(--uui-size-space-5);
-				padding-bottom: var(--uui-size-space-1);
-			}
-
-			umb-installed-packages-section-view-item {
-				padding: var(--uui-size-space-3) 0 var(--uui-size-space-2);
-			}
-
-			umb-installed-packages-section-view-item:not(:first-child) {
-				border-top: 1px solid var(--uui-color-border, #d8d7d9);
-			}
-
-			.no-packages {
-				display: flex;
-				justify-content: space-around;
-				flex-direction: column;
-				align-items: center;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _installedPackages: UmbPackageWithMigrationStatus[] = [];
@@ -136,6 +109,35 @@ export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 			</uui-ref-list>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			uui-box {
+				margin-top: var(--uui-size-space-5);
+				padding-bottom: var(--uui-size-space-1);
+			}
+
+			umb-installed-packages-section-view-item {
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-2);
+			}
+
+			umb-installed-packages-section-view-item:not(:first-child) {
+				border-top: 1px solid var(--uui-color-border, #d8d7d9);
+			}
+
+			.no-packages {
+				display: flex;
+				justify-content: space-around;
+				flex-direction: column;
+				align-items: center;
+			}
+		`,
+	];
 }
 
 export default UmbInstalledPackagesSectionViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts

@@ -3,6 +3,24 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-packages-market-place-section-view')
 export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
+	
+
+	// TODO: This URL comes from the server
+	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
+	@property()
+	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>`;
+	}
+	
 	static styles = [
 		css`
 			:host {
@@ -24,22 +42,6 @@ export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
 			}
 		`,
 	];
-
-	// TODO: This URL comes from the server
-	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
-	@property()
-	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>`;
-	}
 }
 
 export default UmbPackagesMarketPlaceSectionViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts

@@ -16,135 +16,7 @@ export type SearchGroupItem = {
 };
 @customElement('umb-search-modal')
 export class UmbSearchModalElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				width: 100%;
-				height: 100%;
-				background-color: var(--uui-color-background);
-				box-sizing: border-box;
-				color: var(--uui-color-text);
-				font-size: 1rem;
-			}
-			input {
-				all: unset;
-				height: 100%;
-				width: 100%;
-			}
-			#search-icon,
-			#close-icon {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				aspect-ratio: 1;
-				height: 100%;
-			}
-			#close-icon {
-				padding: 0 var(--uui-size-space-4);
-			}
-			#close-icon > button {
-				background: var(--uui-color-surface-alt);
-				border: 1px solid var(--uui-color-border);
-				padding: 3px 6px 4px 6px;
-				line-height: 1;
-				border-radius: 3px;
-				color: var(--uui-color-text-alt);
-				font-weight: 800;
-				font-size: 12px;
-				cursor: pointer;
-			}
-			#close-icon > button:hover {
-				border-color: var(--uui-color-focus);
-				color: var(--uui-color-focus);
-			}
-			#top {
-				background-color: var(--uui-color-surface);
-				display: flex;
-				height: 48px;
-			}
-			#main {
-				display: flex;
-				flex-direction: column;
-				padding: 0px var(--uui-size-space-6) var(--uui-size-space-5) var(--uui-size-space-6);
-				height: 100%;
-				border-top: 1px solid var(--uui-color-border);
-			}
-			.group {
-				margin-top: var(--uui-size-space-4);
-			}
-			.group-name {
-				font-weight: 600;
-				margin-bottom: var(--uui-size-space-1);
-			}
-			.group-items {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-			.item {
-				background: var(--uui-color-surface);
-				border: 1px solid var(--uui-color-border);
-				padding: var(--uui-size-space-3) var(--uui-size-space-4);
-				border-radius: var(--uui-border-radius);
-				color: var(--uui-color-interactive);
-				display: grid;
-				grid-template-columns: var(--uui-size-space-6) 1fr var(--uui-size-space-5);
-				height: min-content;
-				align-items: center;
-			}
-			.item:hover {
-				background-color: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-			}
-			.item:hover .item-symbol {
-				font-weight: unset;
-				opacity: 1;
-			}
-			.item-icon {
-				margin-bottom: auto;
-				margin-top: 5px;
-			}
-			.item-icon,
-			.item-symbol {
-				opacity: 0.4;
-			}
-			.item-url {
-				font-size: 0.8rem;
-				line-height: 1.2;
-				font-weight: 100;
-			}
-			.item-name {
-				display: flex;
-				flex-direction: column;
-			}
-			.item-icon > * {
-				height: 1rem;
-				display: flex;
-				width: min-content;
-			}
-			.item-symbol {
-				font-weight: 100;
-			}
-			a {
-				text-decoration: none;
-				color: inherit;
-			}
-			#no-results {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				height: 100%;
-				width: 100%;
-				margin-top: var(--uui-size-space-5);
-				color: var(--uui-color-text-alt);
-			}
-		`,
-	];
+	
 
 	@query('input')
 	private _input!: HTMLInputElement;
@@ -306,6 +178,136 @@ export class UmbSearchModalElement extends LitElement {
 			parent: 'Document Types',
 		},
 	];
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				width: 100%;
+				height: 100%;
+				background-color: var(--uui-color-background);
+				box-sizing: border-box;
+				color: var(--uui-color-text);
+				font-size: 1rem;
+			}
+			input {
+				all: unset;
+				height: 100%;
+				width: 100%;
+			}
+			#search-icon,
+			#close-icon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				aspect-ratio: 1;
+				height: 100%;
+			}
+			#close-icon {
+				padding: 0 var(--uui-size-space-4);
+			}
+			#close-icon > button {
+				background: var(--uui-color-surface-alt);
+				border: 1px solid var(--uui-color-border);
+				padding: 3px 6px 4px 6px;
+				line-height: 1;
+				border-radius: 3px;
+				color: var(--uui-color-text-alt);
+				font-weight: 800;
+				font-size: 12px;
+				cursor: pointer;
+			}
+			#close-icon > button:hover {
+				border-color: var(--uui-color-focus);
+				color: var(--uui-color-focus);
+			}
+			#top {
+				background-color: var(--uui-color-surface);
+				display: flex;
+				height: 48px;
+			}
+			#main {
+				display: flex;
+				flex-direction: column;
+				padding: 0px var(--uui-size-space-6) var(--uui-size-space-5) var(--uui-size-space-6);
+				height: 100%;
+				border-top: 1px solid var(--uui-color-border);
+			}
+			.group {
+				margin-top: var(--uui-size-space-4);
+			}
+			.group-name {
+				font-weight: 600;
+				margin-bottom: var(--uui-size-space-1);
+			}
+			.group-items {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+			.item {
+				background: var(--uui-color-surface);
+				border: 1px solid var(--uui-color-border);
+				padding: var(--uui-size-space-3) var(--uui-size-space-4);
+				border-radius: var(--uui-border-radius);
+				color: var(--uui-color-interactive);
+				display: grid;
+				grid-template-columns: var(--uui-size-space-6) 1fr var(--uui-size-space-5);
+				height: min-content;
+				align-items: center;
+			}
+			.item:hover {
+				background-color: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
+			}
+			.item:hover .item-symbol {
+				font-weight: unset;
+				opacity: 1;
+			}
+			.item-icon {
+				margin-bottom: auto;
+				margin-top: 5px;
+			}
+			.item-icon,
+			.item-symbol {
+				opacity: 0.4;
+			}
+			.item-url {
+				font-size: 0.8rem;
+				line-height: 1.2;
+				font-weight: 100;
+			}
+			.item-name {
+				display: flex;
+				flex-direction: column;
+			}
+			.item-icon > * {
+				height: 1rem;
+				display: flex;
+				width: min-content;
+			}
+			.item-symbol {
+				font-weight: 100;
+			}
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
+			#no-results {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+				margin-top: var(--uui-size-space-5);
+				color: var(--uui-color-text-alt);
+			}
+		`,
+	];
 }
 
 export default UmbSearchModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts

@@ -6,15 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-search-header-app')
 export class UmbSearchHeaderAppElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			uui-button {
-				font-size: 18px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-	];
+	
 
 	private _modalContext?: UmbModalContext;
 
@@ -37,6 +29,16 @@ export class UmbSearchHeaderAppElement extends UmbLitElement {
 			</uui-button>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			uui-button {
+				font-size: 18px;
+				--uui-button-background-color: transparent;
+			}
+		`,
+	];
 }
 
 export default UmbSearchHeaderAppElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts

@@ -10,18 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-examine-management')
 export class UmbDashboardExamineManagementElement extends UmbLitElement {
-	static styles = [
-		css`
-			a {
-				color: var(--uui-color-text);
-				background: transparent;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-				display: inline-block;
-			}
-		`,
-	];
+	
 	@state()
 	private _routes: IRoute[] = [
 		{
@@ -65,6 +54,19 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
 					this._activePath = event.target.localActiveViewPath || '';
 				}}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		css`
+			a {
+				color: var(--uui-color-text);
+				background: transparent;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+				display: inline-block;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineManagementElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts

@@ -9,38 +9,7 @@ export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
 	UmbExamineFieldsSettingsModalData,
 	UmbCreateDocumentModalResultData
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: relative;
-			}
-
-			uui-dialog-layout {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
-				border-radius: var(--uui-border-radius);
-				padding: var(--uui-size-space-5);
-				box-sizing: border-box;
-			}
-
-			uui-scroll-container {
-				overflow-y: scroll;
-				max-height: 100%;
-				min-height: 0;
-				flex: 1;
-			}
-
-			div {
-				margin-top: var(--uui-size-space-5);
-				display: flex;
-				flex-direction: row-reverse;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _fields?: UmbExamineFieldsSettingsModalData;
@@ -86,6 +55,39 @@ export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
 			`;
 		} else return html``;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: relative;
+			}
+
+			uui-dialog-layout {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
+				border-radius: var(--uui-border-radius);
+				padding: var(--uui-size-space-5);
+				box-sizing: border-box;
+			}
+
+			uui-scroll-container {
+				overflow-y: scroll;
+				max-height: 100%;
+				min-height: 0;
+				flex: 1;
+			}
+
+			div {
+				margin-top: var(--uui-size-space-5);
+				display: flex;
+				flex-direction: row-reverse;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts

@@ -6,36 +6,7 @@ import type { SearchResultResponseModel } from '@umbraco-cms/backoffice/backend-
 
 @customElement('umb-modal-element-fields-viewer')
 export class UmbModalElementFieldsViewerElement extends UmbModalBaseElement<SearchResultResponseModel & { name: string }> {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: relative;
-			}
-			uui-dialog-layout {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			span {
-				display: block;
-				padding-right: var(--uui-size-space-5);
-			}
-
-			uui-scroll-container {
-				line-height: 0;
-				overflow-y: scroll;
-				max-height: 100%;
-				min-height: 0;
-			}
-			div {
-				margin-top: var(--uui-size-space-5);
-				display: flex;
-				flex-direction: row-reverse;
-			}
-		`,
-	];
+	
 
 	private _handleClose() {
 		this.modalHandler?.reject();
@@ -68,6 +39,37 @@ export class UmbModalElementFieldsViewerElement extends UmbModalBaseElement<Sear
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: relative;
+			}
+			uui-dialog-layout {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			span {
+				display: block;
+				padding-right: var(--uui-size-space-5);
+			}
+
+			uui-scroll-container {
+				line-height: 0;
+				overflow-y: scroll;
+				max-height: 100%;
+				min-height: 0;
+			}
+			div {
+				margin-top: var(--uui-size-space-5);
+				display: flex;
+				flex-direction: row-reverse;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts

@@ -11,71 +11,7 @@ import './section-view-examine-searchers';
 
 @customElement('umb-dashboard-examine-index')
 export class UmbDashboardExamineIndexElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-
-			uui-box,
-			umb-dashboard-examine-searcher {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			div.flex {
-				display: flex;
-			}
-			div.flex > uui-button {
-				padding-left: var(--uui-size-space-4);
-				height: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin-bottom: var(--uui-size-space-5);
-			}
-
-			uui-table.info uui-table-row:first-child uui-table-cell {
-				border-top: none;
-			}
-
-			uui-table-head-cell {
-				text-transform: capitalize;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			uui-icon {
-				vertical-align: top;
-				padding-right: var(--uui-size-space-5);
-			}
-
-			.positive {
-				color: var(--uui-color-positive);
-			}
-			.danger {
-				color: var(--uui-color-danger);
-			}
-
-			button {
-				background: none;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-			}
-			button.bright {
-				font-style: italic;
-				color: var(--uui-color-positive-emphasis);
-			}
-		`,
-	];
+	
 
 	@property()
 	indexName!: string;
@@ -217,6 +153,72 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
 			</uui-button>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			uui-box,
+			umb-dashboard-examine-searcher {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			div.flex {
+				display: flex;
+			}
+			div.flex > uui-button {
+				padding-left: var(--uui-size-space-4);
+				height: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			uui-table.info uui-table-row:first-child uui-table-cell {
+				border-top: none;
+			}
+
+			uui-table-head-cell {
+				text-transform: capitalize;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			uui-icon {
+				vertical-align: top;
+				padding-right: var(--uui-size-space-5);
+			}
+
+			.positive {
+				color: var(--uui-color-positive);
+			}
+			.danger {
+				color: var(--uui-color-danger);
+			}
+
+			button {
+				background: none;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+			}
+			button.bright {
+				font-style: italic;
+				color: var(--uui-color-positive-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineIndexElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts

@@ -14,53 +14,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-examine-overview')
 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);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			a {
-				color: var(--uui-color-text);
-				background: transparent;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-			}
-
-			uui-table-cell {
-				line-height: 0;
-				vertical-align: middle;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			.positive {
-				color: var(--uui-color-positive);
-			}
-
-			.danger {
-				color: var(--uui-color-danger);
-			}
-
-			.not-found-message {
-				font-style: italic;
-				color: var(--uui-color-text-alt);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _indexers?: IndexResponseModel[];
@@ -161,6 +115,54 @@ export class UmbDashboardExamineOverviewElement extends UmbLitElement {
 			</uui-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display:block;
+				margin:var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			a {
+				color: var(--uui-color-text);
+				background: transparent;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+			}
+
+			uui-table-cell {
+				line-height: 0;
+				vertical-align: middle;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			.positive {
+				color: var(--uui-color-positive);
+			}
+
+			.danger {
+				color: var(--uui-color-danger);
+			}
+
+			.not-found-message {
+				font-style: italic;
+				color: var(--uui-color-text-alt);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineOverviewElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts

@@ -24,88 +24,7 @@ interface ExposedSearchResultField {
 
 @customElement('umb-dashboard-examine-searcher')
 export class UmbDashboardExamineSearcherElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			div.flex {
-				display: flex;
-			}
-			div.flex > uui-button {
-				padding-left: var(--uui-size-space-4);
-				height: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin-bottom: var(--uui-size-space-5);
-			}
-
-			uui-table-head-cell {
-				text-transform: capitalize;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			uui-table-cell {
-				min-width: 100px;
-			}
-
-			button.bright {
-				font-style: italic;
-				color: var(--uui-color-positive-emphasis);
-			}
-
-			.field-adder {
-				line-height: 0;
-				cursor: pointer;
-				vertical-align: top;
-				background: transparent;
-				border: none;
-			}
-
-			.table-container uui-scroll-container {
-				padding-bottom: var(--uui-size-space-4);
-				max-width: 100%;
-				overflow-x: scroll;
-				flex: 1;
-			}
-
-			.table-container {
-				display: flex;
-				align-items: flex-start;
-			}
-			uui-tag {
-				margin-block: var(--uui-size-5, 15px);
-			}
-
-			.exposed-field uui-button {
-				align-items: center;
-				font-weight: normal;
-				font-size: 10px;
-				height: 10px;
-				width: 10px;
-				margin-top: -5px;
-			}
-
-			.exposed-field-container {
-				display: flex;
-				justify-content: space-between;
-			}
-		`,
-	];
+	
 
 	private _modalContext?: UmbModalContext;
 
@@ -300,6 +219,89 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 			});
 		})}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			div.flex {
+				display: flex;
+			}
+			div.flex > uui-button {
+				padding-left: var(--uui-size-space-4);
+				height: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			uui-table-head-cell {
+				text-transform: capitalize;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			uui-table-cell {
+				min-width: 100px;
+			}
+
+			button.bright {
+				font-style: italic;
+				color: var(--uui-color-positive-emphasis);
+			}
+
+			.field-adder {
+				line-height: 0;
+				cursor: pointer;
+				vertical-align: top;
+				background: transparent;
+				border: none;
+			}
+
+			.table-container uui-scroll-container {
+				padding-bottom: var(--uui-size-space-4);
+				max-width: 100%;
+				overflow-x: scroll;
+				flex: 1;
+			}
+
+			.table-container {
+				display: flex;
+				align-items: flex-start;
+			}
+			uui-tag {
+				margin-block: var(--uui-size-5, 15px);
+			}
+
+			.exposed-field uui-button {
+				align-items: center;
+				font-weight: normal;
+				font-size: 10px;
+				height: 10px;
+				width: 10px;
+				margin-top: -5px;
+			}
+
+			.exposed-field-container {
+				display: flex;
+				justify-content: space-between;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineSearcherElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts

@@ -10,48 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-health-check-action')
 export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				margin: var(--uui-size-space-4) 0;
-				display: block;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface-alt);
-			}
-			form {
-				margin: 0;
-				padding: 0;
-			}
-
-			p {
-				padding-top: 0;
-				margin-top: 0;
-			}
-
-			.action {
-				padding: var(--uui-size-space-5) var(--uui-size-space-6);
-				width: 100%;
-			}
-
-			.action uui-label {
-				display: block;
-			}
-
-			.action uui-button {
-				flex-shrink: 1;
-			}
-
-			.no-description {
-				color: var(--uui-color-border-emphasis);
-				font-style: italic;
-			}
-
-			.required-value {
-				margin: 0 0 var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@property({ reflect: true })
 	action!: HealthCheckActionRequestModel;
@@ -139,6 +98,49 @@ export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
 
 		return nothing;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				margin: var(--uui-size-space-4) 0;
+				display: block;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface-alt);
+			}
+			form {
+				margin: 0;
+				padding: 0;
+			}
+
+			p {
+				padding-top: 0;
+				margin-top: 0;
+			}
+
+			.action {
+				padding: var(--uui-size-space-5) var(--uui-size-space-6);
+				width: 100%;
+			}
+
+			.action uui-label {
+				display: block;
+			}
+
+			.action uui-button {
+				flex-shrink: 1;
+			}
+
+			.no-description {
+				color: var(--uui-color-border-emphasis);
+				font-style: italic;
+			}
+
+			.required-value {
+				margin: 0 0 var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckActionElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts

@@ -13,45 +13,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-health-check-group-box-overview')
 export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.group-box {
-				position: relative;
-			}
-
-			.group-box:hover::after {
-				content: '';
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: var(--uui-border-radius);
-				transition: opacity 100ms ease-out 0s;
-				opacity: 0.33;
-				outline-color: var(--uui-color-selected);
-				outline-width: 4px;
-				outline-style: solid;
-			}
-
-			a {
-				text-align: center;
-				font-weight: bold;
-				cursor: pointer;
-				text-decoration: none;
-				color: var(--uui-color-text);
-				margin-bottom: var(--uui-size-space-3);
-				display: block;
-			}
-
-			uui-icon {
-				padding-right: var(--uui-size-space-2);
-			}
-		`,
-	];
+	
 
 	@property({ type: Object })
 	manifest?: ManifestHealthCheck;
@@ -152,6 +114,46 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
 		});
 		return tags;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.group-box {
+				position: relative;
+			}
+
+			.group-box:hover::after {
+				content: '';
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: var(--uui-border-radius);
+				transition: opacity 100ms ease-out 0s;
+				opacity: 0.33;
+				outline-color: var(--uui-color-selected);
+				outline-width: 4px;
+				outline-style: solid;
+			}
+
+			a {
+				text-align: center;
+				font-weight: bold;
+				cursor: pointer;
+				text-decoration: none;
+				color: var(--uui-color-text);
+				margin-bottom: var(--uui-size-space-3);
+				display: block;
+			}
+
+			uui-icon {
+				padding-right: var(--uui-size-space-2);
+			}
+		`,
+	];
 }
 
 export default UmbHealthCheckGroupBoxOverviewElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts

@@ -23,54 +23,7 @@ import './health-check-action.element';
 
 @customElement('umb-dashboard-health-check-group')
 export class UmbDashboardHealthCheckGroupElement 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);
-			}
-
-			p {
-				margin: 0;
-			}
-
-			.header {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-
-			.check-results-wrapper .check-result {
-				padding-top: var(--uui-size-space-5);
-			}
-
-			.check-results-wrapper .check-result:not(:last-child) {
-				border-bottom: 1px solid var(--uui-color-divider-standalone);
-				padding-bottom: var(--uui-size-space-5);
-			}
-
-			.check-results-wrapper uui-button {
-				margin-block-start: 1em;
-			}
-
-			.check-result-description {
-				display: flex;
-			}
-
-			.check-result-description span {
-				width: 36px;
-			}
-
-			uui-icon {
-				vertical-align: sub;
-			}
-		`,
-	];
+	
 
 	@property()
 	groupName!: string;
@@ -214,6 +167,55 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 			</div>`;
 		else return nothing;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			p {
+				margin: 0;
+			}
+
+			.header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.check-results-wrapper .check-result {
+				padding-top: var(--uui-size-space-5);
+			}
+
+			.check-results-wrapper .check-result:not(:last-child) {
+				border-bottom: 1px solid var(--uui-color-divider-standalone);
+				padding-bottom: var(--uui-size-space-5);
+			}
+
+			.check-results-wrapper uui-button {
+				margin-block-start: 1em;
+			}
+
+			.check-result-description {
+				display: flex;
+			}
+
+			.check-result-description span {
+				width: 36px;
+			}
+
+			uui-icon {
+				vertical-align: sub;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckGroupElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts

@@ -13,31 +13,7 @@ import './health-check-group-box-overview.element';
 
 @customElement('umb-dashboard-health-check-overview')
 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);
-			}
-
-			.flex {
-				display: flex;
-				justify-content: space-between;
-				align-items:center;
-			}
-
-			.grid {
-				display: grid;
-				gap: var(--uui-size-space-4);
-				grid-template-columns: repeat(auto-fit, minmax(250px, auto));
-			}
-		`,
-	];
+	
 
 	@state()
 	private _buttonState: UUIButtonState;
@@ -76,6 +52,32 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			.flex {
+				display: flex;
+				justify-content: space-between;
+				align-items:center;
+			}
+
+			.grid {
+				display: grid;
+				gap: var(--uui-size-space-4);
+				grid-template-columns: repeat(auto-fit, minmax(250px, auto));
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckOverviewElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts

@@ -13,41 +13,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-models-builder')
 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;
-				align-items: flex-start;
-			}
-
-			.models-description ul {
-				list-style-type: square;
-				margin: 0;
-				padding-left: var(--uui-size-layout-1);
-			}
-
-			span.out-of-date {
-				display: block;
-				padding-block-end: var(--uui-size-space-4);
-			}
-
-			.error {
-				font-weight: bold;
-				color: var(--uui-color-danger);
-			}
-
-			p.models-actions {
-				margin-bottom: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _modelsBuilder?: ModelsBuilderResponseModel;
@@ -169,6 +135,42 @@ export class UmbDashboardModelsBuilderElement extends UmbLitElement {
 				return;
 		}
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			.headline {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+			}
+
+			.models-description ul {
+				list-style-type: square;
+				margin: 0;
+				padding-left: var(--uui-size-layout-1);
+			}
+
+			span.out-of-date {
+				display: block;
+				padding-block-end: var(--uui-size-space-4);
+			}
+
+			.error {
+				font-weight: bold;
+				color: var(--uui-color-danger);
+			}
+
+			p.models-actions {
+				margin-bottom: 0;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts

@@ -7,27 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-performance-profiling')
 export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			
-			uui-toggle {
-				font-weight: bold;
-			}
-
-			h4 {
-				margin-bottom: 0;
-			}
-
-			h4 + p {
-				margin-top: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _profilingStatus?: boolean;
@@ -105,6 +85,28 @@ export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			
+			uui-toggle {
+				font-weight: bold;
+			}
+
+			h4 {
+				margin-bottom: 0;
+			}
+
+			h4 + p {
+				margin-top: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardPerformanceProfilingElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts

@@ -9,22 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-published-status')
 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);
-			}
-			uui-box p:first-child {
-				margin-block-start: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _publishedStatusText = '';
@@ -202,6 +187,23 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+			uui-box p:first-child {
+				margin-block-start: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardPublishedStatusElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts

@@ -4,29 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-settings-welcome')
 export class UmbDashboardSettingsWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#settings-dashboard {
-				display: grid;
-				grid-gap: var(--uui-size-7);
-				grid-template-columns: repeat(3, 1fr);
-				margin: var(--uui-size-layout-1);
-			}
-
-			@media (max-width: 1200px) {
-				#settings-dashboard {
-					grid-template-columns: repeat(2, 1fr);
-				}
-			}
-
-			@media (max-width: 800px) {
-				#settings-dashboard {
-					grid-template-columns: repeat(1, 1fr);
-				}
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -110,6 +88,30 @@ export class UmbDashboardSettingsWelcomeElement extends LitElement {
 			</section>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#settings-dashboard {
+				display: grid;
+				grid-gap: var(--uui-size-7);
+				grid-template-columns: repeat(3, 1fr);
+				margin: var(--uui-size-layout-1);
+			}
+
+			@media (max-width: 1200px) {
+				#settings-dashboard {
+					grid-template-columns: repeat(2, 1fr);
+				}
+			}
+
+			@media (max-width: 800px) {
+				#settings-dashboard {
+					grid-template-columns: repeat(1, 1fr);
+				}
+			}
+		`,
+	];
 }
 
 export default UmbDashboardSettingsWelcomeElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts

@@ -9,15 +9,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-telemetry')
 export class UmbDashboardTelemetryElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _telemetryFormData = TelemetryLevelModel.BASIC;
@@ -145,6 +137,16 @@ export class UmbDashboardTelemetryElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardTelemetryElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/entity-actions/create/modal/data-type-create-options-modal.element.ts

@@ -13,7 +13,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-data-type-create-options-modal')
 export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbDataTypeCreateOptionsModalData>;
@@ -66,6 +66,8 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbDataTypeCreateOptionsModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts

@@ -12,7 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO: make use of UmbPickerLayoutBase
 @customElement('umb-data-type-picker-modal')
 export class UmbDataTypePickerModalElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbDataTypePickerModalData, UmbDataTypePickerModalResult>;
@@ -64,6 +64,8 @@ export class UmbDataTypePickerModalElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbDataTypePickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts

@@ -282,14 +282,7 @@ export class UmbDataTypeRepository
 	async requestFolder(id: string) {
 		if (!id) throw new Error('Key is missing');
 		await this.#init;
-
-		const { data, error } = await this.#folderSource.get(id);
-
-		if (data) {
-			this.#treeStore?.appendItems([data]);
-		}
-
-		return { data, error };
+		return await this.#folderSource.get(id);
 	}
 
 	// Actions

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts

@@ -14,22 +14,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
  */
 @customElement('umb-data-type-workspace-edit-element')
 export class UmbDataTypeWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				/* TODO: can this be applied from layout slot CSS? */
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-		`,
-	];
+	
 
 	@property()
 	manifest?: ManifestWorkspace;
@@ -78,6 +63,23 @@ export class UmbDataTypeWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				/* TODO: can this be applied from layout slot CSS? */
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+		`,
+	];
 }
 
 export default UmbDataTypeWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.element.ts

@@ -9,7 +9,7 @@ import './data-type-workspace-edit.element';
 
 @customElement('umb-data-type-workspace')
 export class UmbDataTypeWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#workspaceContext = new UmbDataTypeWorkspaceContext(this);
 
@@ -38,6 +38,8 @@ export class UmbDataTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbDataTypeWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts

@@ -17,15 +17,7 @@ import '../../../../../shared/components/ref-property-editor-ui/ref-property-edi
 
 @customElement('umb-data-type-details-workspace-view')
 export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_dataType?: DataTypeResponseModel;
@@ -170,6 +162,16 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
 				: nothing}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDataTypeDetailsWorkspaceViewEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts

@@ -9,15 +9,7 @@ import { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-workspace-view-data-type-info')
 export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_dataType?: DataTypeResponseModel;
@@ -67,6 +59,16 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
 	private _renderReferences() {
 		return html` <uui-box headline="References"> </uui-box> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewDataTypeInfoElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts

@@ -8,13 +8,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@um
 
 @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;
@@ -101,6 +95,14 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbExtensionRootWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts

@@ -11,36 +11,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-app-language-select')
 export class UmbAppLanguageSelectElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				position: relative;
-				z-index: 10;
-			}
-
-			#toggle {
-				display: block;
-				width: 100%;
-				text-align: left;
-				background: none;
-				border: none;
-				height: 70px;
-				padding: 0 var(--uui-size-8);
-				border-bottom: 1px solid var(--uui-color-border);
-				font-size: 14px;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				cursor: pointer;
-			}
-
-			#toggle:hover {
-				background-color: var(--uui-color-surface-emphasis);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _languages: Array<LanguageResponseModel> = [];
@@ -140,6 +111,37 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 			)}
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				position: relative;
+				z-index: 10;
+			}
+
+			#toggle {
+				display: block;
+				width: 100%;
+				text-align: left;
+				background: none;
+				border: none;
+				height: 70px;
+				padding: 0 var(--uui-size-8);
+				border-bottom: 1px solid var(--uui-color-border);
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				cursor: pointer;
+			}
+
+			#toggle:hover {
+				background-color: var(--uui-color-surface-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbAppLanguageSelectElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts

@@ -10,7 +10,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-language-picker-modal')
 export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<LanguageResponseModel> {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _languages: Array<LanguageResponseModel> = [];
@@ -63,6 +63,8 @@ export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<Lan
 			</div>
 		</umb-body-layout> `;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbLanguagePickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts

@@ -7,7 +7,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-language-root-table-delete-column-layout')
 export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	value!: LanguageResponseModel;
@@ -45,6 +45,8 @@ export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement
 			</umb-dropdown>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-name-column-layout.element.ts

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-language-root-table-name-column-layout')
 export class UmbLanguageRootTableNameColumnLayoutElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	value!: { isoCode: string; name: string };
@@ -14,6 +14,8 @@ export class UmbLanguageRootTableNameColumnLayoutElement extends LitElement {
 
 		return html`<a href=${'section/settings/workspace/language/edit/' + this.value.isoCode}>${this.value.name}</a>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts

@@ -11,20 +11,7 @@ import './components/language-root-table-name-column-layout.element';
 
 @customElement('umb-language-root-workspace')
 export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#main {
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _tableConfig: UmbTableConfig = {
@@ -135,6 +122,21 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#main {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbLanguageRootWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts

@@ -10,34 +10,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-language-workspace-edit')
 export class UmbLanguageWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-space-6);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			strong {
-				display: flex;
-				align-items: center;
-			}
-
-			#footer {
-				padding: 0 var(--uui-size-layout-1);
-			}
-
-			uui-input:not(:focus) {
-				border: 1px solid transparent;
-			}
-		`,
-	];
+	
 
 	#workspaceContext?: UmbLanguageWorkspaceContext;
 
@@ -95,6 +68,35 @@ export class UmbLanguageWorkspaceEditElement extends UmbLitElement {
 			</div>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-space-6);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			strong {
+				display: flex;
+				align-items: center;
+			}
+
+			#footer {
+				padding: 0 var(--uui-size-layout-1);
+			}
+
+			uui-input:not(:focus) {
+				border: 1px solid transparent;
+			}
+		`,
+	];
 }
 
 export default UmbLanguageWorkspaceEditElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts

@@ -11,7 +11,7 @@ import { generateRoutePathBuilder } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-language-workspace')
 export class UmbLanguageWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#languageWorkspaceContext = new UmbLanguageWorkspaceContext(this);
 
@@ -74,6 +74,8 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement {
 				this.#routerPath = event.target.absoluteRouterPath;
 			}}></umb-router-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbLanguageWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts

@@ -13,37 +13,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-language-details-workspace-view')
 export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				padding: var(--uui-size-space-6);
-			}
-
-			uui-combobox {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-			}
-
-			#default-language-warning {
-				background-color: var(--uui-color-warning);
-				color: var(--uui-color-warning-contrast);
-				padding: var(--uui-size-space-4) var(--uui-size-space-5);
-				border: 1px solid var(--uui-color-warning-standalone);
-				margin-top: var(--uui-size-space-4);
-				border-radius: var(--uui-border-radius);
-			}
-
-			.validation-message {
-				color: var(--uui-color-danger);
-			}
-		`,
-	];
+	
 
 	@state()
 	_language?: LanguageResponseModel;
@@ -215,6 +185,38 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-space-6);
+			}
+
+			uui-combobox {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+			}
+
+			#default-language-warning {
+				background-color: var(--uui-color-warning);
+				color: var(--uui-color-warning-contrast);
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
+				border: 1px solid var(--uui-color-warning-standalone);
+				margin-top: var(--uui-size-space-4);
+				border-radius: var(--uui-border-radius);
+			}
+
+			.validation-message {
+				color: var(--uui-color-danger);
+			}
+		`,
+	];
 }
 
 export default UmbLanguageDetailsWorkspaceViewElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts

@@ -11,42 +11,7 @@ import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/
 
 @customElement('umb-log-viewer-date-range-selector')
 export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			input {
-				font-family: inherit;
-				padding: var(--uui-size-1) var(--uui-size-space-3);
-				font-size: inherit;
-				color: inherit;
-				border-radius: 0;
-				box-sizing: border-box;
-				border: none;
-				background: none;
-				width: 100%;
-				height: 100%;
-				outline: none;
-				position: relative;
-				border-bottom: 2px solid transparent;
-			}
-
-			/* find out better validation for that  */
-			input:out-of-range {
-				border-color: var(--uui-color-danger);
-			}
-
-			:host([horizontal]) .input-container {
-				display: flex;
-				align-items: baseline;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _startDate = '';
@@ -130,6 +95,43 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
         </div>
         `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			input {
+				font-family: inherit;
+				padding: var(--uui-size-1) var(--uui-size-space-3);
+				font-size: inherit;
+				color: inherit;
+				border-radius: 0;
+				box-sizing: border-box;
+				border: none;
+				background: none;
+				width: 100%;
+				height: 100%;
+				outline: none;
+				position: relative;
+				border-bottom: 2px solid transparent;
+			}
+
+			/* find out better validation for that  */
+			input:out-of-range {
+				border-color: var(--uui-color-danger);
+			}
+
+			:host([horizontal]) .input-container {
+				display: flex;
+				align-items: baseline;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts

@@ -13,7 +13,7 @@ interface LevelMapStyles {
 
 @customElement('umb-log-viewer-level-tag')
 export class UmbLogViewerLevelTagElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property()
 	level?: LogLevelModel;
@@ -41,6 +41,8 @@ export class UmbLogViewerLevelTagElement extends LitElement {
 			>${this.level}<slot></slot
 		></uui-tag>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts

@@ -3,13 +3,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-log-viewer-to-many-logs-warning')
 export class UmbLogViewerToManyLogsWarningElement extends LitElement {
-	static styles = [
-		css`
-			:host {
-				text-align: center;
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`<uui-box id="to-many-logs-warning">
@@ -18,6 +12,14 @@ export class UmbLogViewerToManyLogsWarningElement extends LitElement {
 			<p>If you need to view the log files, narrow your date range or try opening them manually.</p>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		css`
+			:host {
+				text-align: center;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts

@@ -14,36 +14,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 //TODO make uui-input accept min and max values
 @customElement('umb-logviewer-workspace')
 export class UmbLogViewerWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-
-				--umb-log-viewer-debug-color: var(--uui-color-default-emphasis);
-				--umb-log-viewer-information-color: var(--uui-color-positive);
-				--umb-log-viewer-warning-color: var(--uui-color-warning);
-				--umb-log-viewer-error-color: var(--uui-color-danger);
-				--umb-log-viewer-fatal-color: var(--uui-palette-black);
-				--umb-log-viewer-verbose-color: var(--uui-color-current);
-			}
-
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-space-6);
-				gap: var(--uui-size-space-4);
-				align-items: center;
-			}
-
-			uui-tab-group {
-				--uui-tab-divider: var(--uui-color-border);
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-			}
-		`,
-	];
+	
 
 	private _alias = 'Umb.Workspace.LogviewerRoot';
 
@@ -182,6 +153,37 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+
+				--umb-log-viewer-debug-color: var(--uui-color-default-emphasis);
+				--umb-log-viewer-information-color: var(--uui-color-positive);
+				--umb-log-viewer-warning-color: var(--uui-color-warning);
+				--umb-log-viewer-error-color: var(--uui-color-danger);
+				--umb-log-viewer-fatal-color: var(--uui-palette-black);
+				--umb-log-viewer-verbose-color: var(--uui-color-current);
+			}
+
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-space-6);
+				gap: var(--uui-size-space-4);
+				align-items: center;
+			}
+
+			uui-tab-group {
+				--uui-tab-divider: var(--uui-color-border);
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+			}
+		`,
+	];
 }
 
 export default UmbLogViewerWorkspaceElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts

@@ -6,67 +6,7 @@ import { LogLevelCountsReponseModel } from '@umbraco-cms/backoffice/backend-api'
 
 @customElement('umb-log-viewer-log-types-chart')
 export class UmbLogViewerLogTypesChartElement extends UmbLitElement {
-	static styles = [
-		css`
-			#log-types-container {
-				display: flex;
-				gap: var(--uui-size-space-4);
-				flex-direction: column-reverse;
-				align-items: center;
-				justify-content: space-between;
-			}
-
-			button {
-				all: unset;
-				display: flex;
-				align-items: center;
-				cursor: pointer;
-			}
-
-			button:focus {
-				outline: 1px solid var(--uui-color-focus);
-			}
-
-			button.active {
-				text-decoration: line-through;
-			}
-
-			#chart {
-				width: 150px;
-				aspect-ratio: 1;
-				background: radial-gradient(white 40%, transparent 41%),
-					conic-gradient(
-						var(--umb-log-viewer-debug-color) 0% 20%,
-						var(--umb-log-viewer-information-color) 20% 40%,
-						var(--umb-log-viewer-warning-color) 40% 60%,
-						var(--umb-log-viewer-error-color) 60% 80%,
-						var(--umb-log-viewer-fatal-color) 80% 100%
-					);
-				margin: 10px;
-				display: inline-block;
-				border-radius: 50%;
-			}
-
-			ul {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				font-size: 100%;
-				font: inherit;
-				vertical-align: baseline;
-			}
-
-			li {
-				display: flex;
-				align-items: center;
-			}
-
-			li uui-icon {
-				margin-right: 1em;
-			}
-		`,
-	];
+	
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 	constructor() {
@@ -158,6 +98,68 @@ export class UmbLogViewerLogTypesChartElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		css`
+			#log-types-container {
+				display: flex;
+				gap: var(--uui-size-space-4);
+				flex-direction: column-reverse;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			button {
+				all: unset;
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+			}
+
+			button:focus {
+				outline: 1px solid var(--uui-color-focus);
+			}
+
+			button.active {
+				text-decoration: line-through;
+			}
+
+			#chart {
+				width: 150px;
+				aspect-ratio: 1;
+				background: radial-gradient(white 40%, transparent 41%),
+					conic-gradient(
+						var(--umb-log-viewer-debug-color) 0% 20%,
+						var(--umb-log-viewer-information-color) 20% 40%,
+						var(--umb-log-viewer-warning-color) 40% 60%,
+						var(--umb-log-viewer-error-color) 60% 80%,
+						var(--umb-log-viewer-fatal-color) 80% 100%
+					);
+				margin: 10px;
+				display: inline-block;
+				border-radius: 50%;
+			}
+
+			ul {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				border: 0;
+				font-size: 100%;
+				font: inherit;
+				vertical-align: baseline;
+			}
+
+			li {
+				display: flex;
+				align-items: center;
+			}
+
+			li uui-icon {
+				margin-right: 1em;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts

@@ -8,35 +8,7 @@ import { PagedLogTemplateResponseModel, SavedLogSearchResponseModel } from '@umb
 //TODO: fix pagination bug when API is fixed
 @customElement('umb-log-viewer-message-templates-overview')
 export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#show-more-templates-btn {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			a {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				text-decoration: none;
-				color: inherit;
-			}
-
-			uui-table-cell {
-				padding: 10px 20px;
-				height: unset;
-			}
-
-			uui-table-row {
-				cursor: pointer;
-			}
-
-			uui-table-row:hover > uui-table-cell {
-				background-color: var(--uui-color-surface-alt);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _messageTemplates: PagedLogTemplateResponseModel | null = null;
@@ -111,6 +83,36 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#show-more-templates-btn {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			a {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				text-decoration: none;
+				color: inherit;
+			}
+
+			uui-table-cell {
+				padding: 10px 20px;
+				height: unset;
+			}
+
+			uui-table-row {
+				cursor: pointer;
+			}
+
+			uui-table-row:hover > uui-table-cell {
+				background-color: var(--uui-color-surface-alt);
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts

@@ -8,33 +8,7 @@ import { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/backend-api
 //TODO: implement the saved searches pagination when the API total bug is fixed
 @customElement('umb-log-viewer-saved-searches-overview')
 export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				height: 100%;
-			}
-
-			ul {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				font-size: 100%;
-				font: inherit;
-				vertical-align: baseline;
-			}
-
-			li {
-				display: flex;
-				align-items: center;
-			}
-
-			li uui-icon {
-				margin-right: 1em;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _savedSearches: SavedLogSearchResponseModel[] = [];
@@ -75,6 +49,34 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 			</ul>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				height: 100%;
+			}
+
+			ul {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				border: 0;
+				font-size: 100%;
+				font: inherit;
+				vertical-align: baseline;
+			}
+
+			li {
+				display: flex;
+				align-items: center;
+			}
+
+			li uui-icon {
+				margin-right: 1em;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts

@@ -7,6 +7,81 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 //TODO: add a disabled attribute to the show more button when the total number of items is correctly returned from the endpoint
 @customElement('umb-log-viewer-overview-view')
 export class UmbLogViewerOverviewViewElement extends UmbLitElement {
+	
+
+	@state()
+	private _errorCount = 0;
+
+	@state()
+	private _logLevelCount: LogLevelCountsReponseModel | null = null;
+
+	@state()
+	private _canShowLogs = false;
+
+	#logViewerContext?: UmbLogViewerWorkspaceContext;
+	constructor() {
+		super();
+		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
+			this.#logViewerContext = instance;
+			this.#observeErrorCount();
+			this.#observeCanShowLogs();
+			this.#logViewerContext?.getLogLevels(0, 100);
+		});
+	}
+
+	#observeErrorCount() {
+		if (!this.#logViewerContext) return;
+
+		this.observe(this.#logViewerContext.logCount, (logLevelCount) => {
+			this._errorCount = logLevelCount?.error ?? 0;
+		});
+	}
+
+	#observeCanShowLogs() {
+		if (!this.#logViewerContext) return;
+		this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
+			this._canShowLogs = canShowLogs ?? false;
+		});
+	}
+
+	render() {
+		return html`
+			<div id="logviewer-layout">
+				<div id="info">
+					<uui-box id="time-period" headline="Time Period">
+						<umb-log-viewer-date-range-selector></umb-log-viewer-date-range-selector>
+					</uui-box>
+
+					<uui-box id="errors" headline="Number of Errors">
+						<uui-button
+							label="Show error logs"
+							href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(
+								`@Level='Fatal' or @Level='Error' or Has(@Exception)`
+							)}`}>
+							<h1 id="error-count">${this._errorCount}</h1></uui-button
+						>
+					</uui-box>
+
+					<uui-box id="level" headline="Log level">
+						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
+					</uui-box>
+
+					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
+				</div>
+
+				${this._canShowLogs
+					? html`<div id="saved-searches-container">
+								<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
+							</div>
+
+							<div id="common-messages-container">
+								<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
+							</div>`
+					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
+			</div>
+		`;
+	}
+	
 	static styles = [
 		css`
 			:host {
@@ -83,79 +158,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	@state()
-	private _errorCount = 0;
-
-	@state()
-	private _logLevelCount: LogLevelCountsReponseModel | null = null;
-
-	@state()
-	private _canShowLogs = false;
-
-	#logViewerContext?: UmbLogViewerWorkspaceContext;
-	constructor() {
-		super();
-		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
-			this.#logViewerContext = instance;
-			this.#observeErrorCount();
-			this.#observeCanShowLogs();
-			this.#logViewerContext?.getLogLevels(0, 100);
-		});
-	}
-
-	#observeErrorCount() {
-		if (!this.#logViewerContext) return;
-
-		this.observe(this.#logViewerContext.logCount, (logLevelCount) => {
-			this._errorCount = logLevelCount?.error ?? 0;
-		});
-	}
-
-	#observeCanShowLogs() {
-		if (!this.#logViewerContext) return;
-		this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
-			this._canShowLogs = canShowLogs ?? false;
-		});
-	}
-
-	render() {
-		return html`
-			<div id="logviewer-layout">
-				<div id="info">
-					<uui-box id="time-period" headline="Time Period">
-						<umb-log-viewer-date-range-selector></umb-log-viewer-date-range-selector>
-					</uui-box>
-
-					<uui-box id="errors" headline="Number of Errors">
-						<uui-button
-							label="Show error logs"
-							href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(
-								`@Level='Fatal' or @Level='Error' or Has(@Exception)`
-							)}`}>
-							<h1 id="error-count">${this._errorCount}</h1></uui-button
-						>
-					</uui-box>
-
-					<uui-box id="level" headline="Log level">
-						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
-					</uui-box>
-
-					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
-				</div>
-
-				${this._canShowLogs
-					? html`<div id="saved-searches-container">
-								<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
-							</div>
-
-							<div id="common-messages-container">
-								<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
-							</div>`
-					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
-			</div>
-		`;
-	}
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts

@@ -10,28 +10,7 @@ import { path, query, toQueryString } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-log-viewer-log-level-filter-menu')
 export class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#log-level-selector {
-				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
-				width: 150px;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.log-level-button-indicator {
-				font-weight: 600;
-			}
-
-			.log-level-button-indicator:not(:last-of-type)::after {
-				content: ', ';
-			}
-		`,
-	];
+	
 
 	@queryAll('#log-level-selector > uui-checkbox')
 	private _logLevelSelectorCheckboxes!: NodeListOf<UUICheckboxElement>;
@@ -121,6 +100,29 @@ export class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement {
 			</umb-button-with-dropdown>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#log-level-selector {
+				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
+				width: 150px;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.log-level-button-indicator {
+				font-weight: 600;
+			}
+
+			.log-level-button-indicator:not(:last-of-type)::after {
+				content: ', ';
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts

@@ -9,110 +9,7 @@ import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router
 //TODO: check how to display EventId field in the message properties
 @customElement('umb-log-viewer-message')
 export class UmbLogViewerMessageElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host > details {
-				border-top: 1px solid var(--uui-color-border);
-			}
-
-			:host(:last-child) > details {
-				border-bottom: 1px solid var(--uui-color-border);
-			}
-
-			summary {
-				display: flex;
-			}
-
-			details[open] {
-				margin-bottom: var(--uui-size-space-3);
-			}
-
-			summary:hover,
-			#properties-list {
-				background-color: var(--uui-color-background);
-			}
-
-			#properties-list {
-				margin: 0;
-				padding: 0;
-				list-style: none;
-				margin-bottom: var(--uui-size-space-3);
-			}
-
-			.property {
-				padding: 10px 20px;
-				display: flex;
-				border-top: 1px solid var(--uui-color-border);
-			}
-
-			summary > div {
-				box-sizing: border-box;
-				padding: 10px 20px;
-				display: flex;
-				align-items: center;
-			}
-
-			#timestamp {
-				flex: 1 0 14ch;
-			}
-
-			#level,
-			#machine {
-				flex: 1 0 14ch;
-			}
-
-			#message {
-				flex: 6 0 14ch;
-			}
-
-			.property-name,
-			.property-value {
-				display: flex;
-				align-items: center;
-			}
-
-			.property-name {
-				font-weight: 600;
-				flex: 1 1 20ch;
-			}
-
-			.property-value {
-				flex: 3 0 20ch;
-			}
-
-			#search-menu {
-				margin: 0;
-				padding: 0;
-				margin-top: var(--uui-size-space-3);
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				max-width: 25%;
-			}
-
-			#search-menu > li {
-				padding: 0;
-			}
-
-			.search-item {
-				width: 100%;
-			}
-
-			pre {
-				background-color: var(--uui-color-background);
-				border-top: 1px solid #d8d7d9;
-				border-left: 4px solid #d42054;
-				color: #303033;
-				display: block;
-				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
-				line-height: 20px;
-				margin: 0;
-				overflow-x: auto;
-				padding: 9.5px;
-				white-space: pre-wrap;
-			}
-		`,
-	];
+	
 
 	@query('details')
 	details!: HTMLDetailsElement;
@@ -298,6 +195,111 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 			</details>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host > details {
+				border-top: 1px solid var(--uui-color-border);
+			}
+
+			:host(:last-child) > details {
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+
+			summary {
+				display: flex;
+			}
+
+			details[open] {
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			summary:hover,
+			#properties-list {
+				background-color: var(--uui-color-background);
+			}
+
+			#properties-list {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			.property {
+				padding: 10px 20px;
+				display: flex;
+				border-top: 1px solid var(--uui-color-border);
+			}
+
+			summary > div {
+				box-sizing: border-box;
+				padding: 10px 20px;
+				display: flex;
+				align-items: center;
+			}
+
+			#timestamp {
+				flex: 1 0 14ch;
+			}
+
+			#level,
+			#machine {
+				flex: 1 0 14ch;
+			}
+
+			#message {
+				flex: 6 0 14ch;
+			}
+
+			.property-name,
+			.property-value {
+				display: flex;
+				align-items: center;
+			}
+
+			.property-name {
+				font-weight: 600;
+				flex: 1 1 20ch;
+			}
+
+			.property-value {
+				flex: 3 0 20ch;
+			}
+
+			#search-menu {
+				margin: 0;
+				padding: 0;
+				margin-top: var(--uui-size-space-3);
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				max-width: 25%;
+			}
+
+			#search-menu > li {
+				padding: 0;
+			}
+
+			.search-item {
+				width: 100%;
+			}
+
+			pre {
+				background-color: var(--uui-color-background);
+				border-top: 1px solid #d8d7d9;
+				border-left: 4px solid #d42054;
+				color: #303033;
+				display: block;
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+				line-height: 20px;
+				margin: 0;
+				overflow-x: auto;
+				padding: 9.5px;
+				white-space: pre-wrap;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts

@@ -8,49 +8,7 @@ import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice
 
 @customElement('umb-log-viewer-messages-list')
 export class UmbLogViewerMessagesListElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			#message-list-header {
-				display: flex;
-				font-weight: 600;
-			}
-
-			#message-list-header > div {
-				box-sizing: border-box;
-				padding: 10px 20px;
-				display: flex;
-				align-items: center;
-			}
-
-			#timestamp {
-				flex: 1 0 14ch;
-			}
-
-			#level,
-			#machine {
-				flex: 1 0 14ch;
-			}
-
-			#message {
-				flex: 6 0 14ch;
-			}
-
-			#empty {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: var(--uui-size-space-3);
-			}
-
-			#pagination {
-				margin: var(--uui-size-space-5, 18px) 0;
-			}
-		`,
-	];
+	
 
 	@query('#logs-scroll-container')
 	private _logsScrollContainer!: UUIScrollContainerElement;
@@ -150,6 +108,50 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 			${this._renderPagination()}
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			#message-list-header {
+				display: flex;
+				font-weight: 600;
+			}
+
+			#message-list-header > div {
+				box-sizing: border-box;
+				padding: 10px 20px;
+				display: flex;
+				align-items: center;
+			}
+
+			#timestamp {
+				flex: 1 0 14ch;
+			}
+
+			#level,
+			#machine {
+				flex: 1 0 14ch;
+			}
+
+			#message {
+				flex: 6 0 14ch;
+			}
+
+			#empty {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
+
+			#pagination {
+				margin: var(--uui-size-space-5, 18px) 0;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts

@@ -12,49 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-log-viewer-polling-button')
 export class UmbLogViewerPollingButtonElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#polling-interval-menu {
-				margin: 0;
-				padding: 0;
-				width: 20ch;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				display: flex;
-				flex-direction: column;
-				transform: translateX(calc((100% - 33px) * -1));
-			}
-
-			#polling-enabled-icon {
-				margin-right: var(--uui-size-space-3);
-				margin-bottom: 1px;
-				-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
-				animation: rotate-center 0.8s ease-in-out infinite both;
-			}
-
-			@-webkit-keyframes rotate-center {
-				0% {
-					-webkit-transform: rotate(0);
-					transform: rotate(0);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
-			@keyframes rotate-center {
-				0% {
-					-webkit-transform: rotate(0);
-					transform: rotate(0);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
-		`,
-	];
+	
 
 	@query('#polling-popover')
 	private _pollingPopover!: UUIPopoverElement;
@@ -131,6 +89,50 @@ export class UmbLogViewerPollingButtonElement extends UmbLitElement {
 			</uui-popover>
 		</uui-button-group>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#polling-interval-menu {
+				margin: 0;
+				padding: 0;
+				width: 20ch;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				display: flex;
+				flex-direction: column;
+				transform: translateX(calc((100% - 33px) * -1));
+			}
+
+			#polling-enabled-icon {
+				margin-right: var(--uui-size-space-3);
+				margin-bottom: 1px;
+				-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
+				animation: rotate-center 0.8s ease-in-out infinite both;
+			}
+
+			@-webkit-keyframes rotate-center {
+				0% {
+					-webkit-transform: rotate(0);
+					transform: rotate(0);
+				}
+				100% {
+					-webkit-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
+			@keyframes rotate-center {
+				0% {
+					-webkit-transform: rotate(0);
+					transform: rotate(0);
+				}
+				100% {
+					-webkit-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts

@@ -10,14 +10,7 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 	{ query: string },
 	SavedLogSearchPresenationBaseModel
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@query('uui-input')
 	private _input!: UUIInputElement;
@@ -64,6 +57,15 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts

@@ -29,84 +29,7 @@ export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken<UmbContextSave
 
 @customElement('umb-log-viewer-search-input')
 export class UmbLogViewerSearchInputElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				gap: var(--uui-size-space-4);
-			}
-
-			#search-input {
-				width: 100%;
-			}
-
-			#saved-searches-button {
-				flex-shrink: 0;
-			}
-
-			#saved-searches-popover {
-				flex: 1;
-			}
-
-			#saved-searches-container {
-				width: 100%;
-				max-height: 300px;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-1);
-			}
-
-			#loader-container {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin: 0 var(--uui-size-space-4);
-			}
-
-			.saved-search-item {
-				display: flex;
-				justify-content: space-between;
-				align-items: stretch;
-				border-bottom: 1px solid #e9e9eb;
-			}
-
-			.saved-search-item-button {
-				display: flex;
-				font-family: inherit;
-				flex: 1;
-				background: 0 0;
-				padding: 0 0;
-				border: 0;
-				clear: both;
-				cursor: pointer;
-				display: flex;
-				font-weight: 400;
-				line-height: 20px;
-				text-align: left;
-				align-items: center;
-				white-space: nowrap;
-				color: var(--uui-color-interactive);
-			}
-
-			.saved-search-item-button:hover {
-				background-color: var(--uui-color-surface-emphasis, rgb(250, 250, 250));
-				color: var(--color-standalone);
-			}
-
-			.saved-search-item-name {
-				font-weight: 600;
-				margin: 0 var(--uui-size-space-3);
-			}
-
-			#polling-symbol-expand,
-			#saved-search-expand-symbol,
-			uui-symbol-sort {
-				margin-left: var(--uui-size-space-3);
-			}
-		`,
-	];
+	
 
 	@query('#saved-searches-popover')
 	private _savedSearchesPopover!: UUIPopoverElement;
@@ -276,6 +199,85 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			</uui-popover>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--uui-size-space-4);
+			}
+
+			#search-input {
+				width: 100%;
+			}
+
+			#saved-searches-button {
+				flex-shrink: 0;
+			}
+
+			#saved-searches-popover {
+				flex: 1;
+			}
+
+			#saved-searches-container {
+				width: 100%;
+				max-height: 300px;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-1);
+			}
+
+			#loader-container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 0 var(--uui-size-space-4);
+			}
+
+			.saved-search-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: stretch;
+				border-bottom: 1px solid #e9e9eb;
+			}
+
+			.saved-search-item-button {
+				display: flex;
+				font-family: inherit;
+				flex: 1;
+				background: 0 0;
+				padding: 0 0;
+				border: 0;
+				clear: both;
+				cursor: pointer;
+				display: flex;
+				font-weight: 400;
+				line-height: 20px;
+				text-align: left;
+				align-items: center;
+				white-space: nowrap;
+				color: var(--uui-color-interactive);
+			}
+
+			.saved-search-item-button:hover {
+				background-color: var(--uui-color-surface-emphasis, rgb(250, 250, 250));
+				color: var(--color-standalone);
+			}
+
+			.saved-search-item-name {
+				font-weight: 600;
+				margin: 0 var(--uui-size-space-3);
+			}
+
+			#polling-symbol-expand,
+			#saved-search-expand-symbol,
+			uui-symbol-sort {
+				margin-left: var(--uui-size-space-3);
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts

@@ -7,40 +7,7 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-log-viewer-search-view')
 export class UmbLogViewerSearchViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#layout {
-				margin: 20px;
-				padding-bottom: 20px;
-			}
-			#levels-container,
-			#input-container {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-4);
-				width: 100%;
-				margin-bottom: 20px;
-			}
-
-			#levels-container {
-				justify-content: space-between;
-			}
-
-			#dates-polling-container {
-				display: flex;
-				align-items: baseline;
-			}
-
-			umb-log-viewer-search-input {
-				flex: 1;
-			}
-
-			umb-log-viewer-date-range-selector {
-				flex-direction: row;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _canShowLogs = false;
@@ -85,6 +52,41 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#layout {
+				margin: 20px;
+				padding-bottom: 20px;
+			}
+			#levels-container,
+			#input-container {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-4);
+				width: 100%;
+				margin-bottom: 20px;
+			}
+
+			#levels-container {
+				justify-content: space-between;
+			}
+
+			#dates-polling-container {
+				display: flex;
+				align-items: baseline;
+			}
+
+			umb-log-viewer-search-input {
+				flex: 1;
+			}
+
+			umb-log-viewer-date-range-selector {
+				flex-direction: row;
+			}
+		`,
+	];
 }
 
 declare global {