@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/examples/block-workspace-context/README.md

@@ -0,0 +1,9 @@
+# Consuming Variant Context in a Block Workspace View Example
+This example demonstrates how to consume and display the contextual variant information (culture and segment) from the `UMB_VARIANT_CONTEXT` within a block workspace view extension.
+
+## What this example includes
+- **Workspace View** – A custom workspace view that reads the current variant context (culture and segment) and displays it to the user.
+
+## How it works
+The workspace view extension uses the `UMB_VARIANT_CONTEXT` context token to access the current variant's culture and segment. This allows the extension to react to changes in the variant context and display the relevant information.
+This pattern is useful for extension developers who need to make their workspace views aware of the current variant, enabling context-sensitive UI and logic.

package/examples/block-workspace-context/block-workspace-view.ts

@@ -0,0 +1,50 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, state, LitElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant';
+import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
+
+@customElement('example-block-workspace-view')
+export class ExampleBlockWorkspaceViewElement extends UmbElementMixin(LitElement) implements UmbWorkspaceViewElement {
+	@state()
+	private _culture?: string | null;
+	@state()
+	private _segment?: string | null;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_VARIANT_CONTEXT, (context) => {
+			this.observe(context?.displayVariantId, (variantId) => {
+				this._culture = variantId?.culture;
+				this._segment = variantId?.segment;
+			});
+		});
+	}
+
+	override render() {
+		return html`
+			<uui-box class="uui-text">
+				<p class="uui-lead">Current variant context culture: ${this._culture}, & segment of : ${this._segment}</p>
+			</uui-box>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export default ExampleBlockWorkspaceViewElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-block-workspace-view': ExampleBlockWorkspaceViewElement;
+	}
+}

package/examples/block-workspace-context/index.ts

@@ -0,0 +1,23 @@
+import { UMB_BLOCK_WORKSPACE_ALIAS } from '@umbraco-cms/backoffice/block';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspaceView',
+		name: 'Example Block Workspace View',
+		alias: 'example.workspaceView.block',
+		element: () => import('./block-workspace-view.js'),
+		weight: 900,
+		meta: {
+			label: 'Counter',
+			pathname: 'counter',
+			icon: 'icon-lab',
+		},
+		conditions: [
+			{
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
+				match: UMB_BLOCK_WORKSPACE_ALIAS,
+			},
+		],
+	},
+];

package/examples/collection/collection/card-view/manifests.ts

@@ -4,15 +4,9 @@ import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collecti
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'collectionView',
+		kind: 'card',
 		alias: 'Example.CollectionView.Card',
 		name: 'Example Card Collection View',
-		js: () => import('./collection-view.element.js'),
-		weight: 50,
-		meta: {
-			label: 'Card',
-			icon: 'icon-grid',
-			pathName: 'card',
-		},
 		conditions: [
 			{
 				alias: UMB_COLLECTION_ALIAS_CONDITION,

package/examples/collection/collection/manifests.ts

@@ -1,6 +1,7 @@
 import { EXAMPLE_COLLECTION_ALIAS } from './constants.js';
 import { EXAMPLE_COLLECTION_REPOSITORY_ALIAS } from './repository/constants.js';
 import { manifests as cardViewManifests } from './card-view/manifests.js';
+import { manifests as refViewManifests } from './ref-view/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as tableViewManifests } from './table-view/manifests.js';
 
@@ -15,6 +16,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 	},
 	...cardViewManifests,
+	...refViewManifests,
 	...repositoryManifests,
 	...tableViewManifests,
 ];

package/examples/collection/collection/ref-view/manifests.ts

@@ -0,0 +1,17 @@
+import { EXAMPLE_COLLECTION_ALIAS } from '../constants.js';
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'collectionView',
+		kind: 'ref',
+		alias: 'Example.CollectionView.Ref',
+		name: 'Example Ref Collection View',
+		conditions: [
+			{
+				alias: UMB_COLLECTION_ALIAS_CONDITION,
+				match: EXAMPLE_COLLECTION_ALIAS,
+			},
+		],
+	},
+];

package/examples/collection/collection/repository/collection.repository.ts

@@ -16,26 +16,31 @@ export class ExampleCollectionRepository
 				unique: '3e31e9c5-7d66-4c99-a9e5-d9f2b1e2b22f',
 				entityType: 'example',
 				name: 'Example Item 1',
+				icon: 'icon-newspaper',
 			},
 			{
 				unique: 'bc9b6e24-4b11-4dd6-8d4e-7c4f70e59f3c',
 				entityType: 'example',
 				name: 'Example Item 2',
+				icon: 'icon-newspaper',
 			},
 			{
 				unique: '5a2f4e3a-ef7e-470e-8c3c-3d859c02ae0d',
 				entityType: 'example',
 				name: 'Example Item 3',
+				icon: 'icon-newspaper',
 			},
 			{
 				unique: 'f4c3d8b8-6d79-4c87-9aa9-56b1d8fda702',
 				entityType: 'example',
 				name: 'Example Item 4',
+				icon: 'icon-newspaper',
 			},
 			{
 				unique: 'c9f0a8a3-1b49-4724-bde3-70e31592eb6e',
 				entityType: 'example',
 				name: 'Example Item 5',
+				icon: 'icon-newspaper',
 			},
 		];
 

package/examples/collection/collection/repository/types.ts

@@ -4,6 +4,7 @@ export interface ExampleCollectionItemModel {
 	unique: string;
 	entityType: string;
 	name: string;
+	icon: string;
 }
 
 export interface ExampleCollectionFilterModel extends UmbCollectionFilterModel {}

package/examples/collection/collection/table-view/collection-view.element.ts

@@ -52,7 +52,7 @@ export class ExampleTableCollectionViewElement extends UmbLitElement {
 		this._tableItems = items.map((item) => {
 			return {
 				id: item.unique,
-				icon: 'icon-newspaper',
+				icon: item.icon,
 				data: [
 					{
 						columnAlias: 'name',

package/examples/collection/collection/table-view/manifests.ts

@@ -10,7 +10,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		weight: 100,
 		meta: {
 			label: 'Table',
-			icon: 'icon-list',
+			icon: 'icon-table',
 			pathName: 'table',
 		},
 		conditions: [

package/examples/entity-content-type-condition/content-type-alias-condition-workspace-view.element.ts

@@ -0,0 +1,48 @@
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
+import { html, customElement, state, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+@customElement('example-content-type-alias-condition-workspace-view')
+export class ExampleContentTypeAliasConditionWorkspaceViewElement extends UmbLitElement {
+	@state()
+	private _contentTypeAliases: string[] = [];
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
+			this.observe(context?.structure.contentTypeAliases, (contentTypeAliases) => {
+				this._contentTypeAliases = contentTypeAliases || [];
+			});
+		});
+	}
+
+	override render() {
+		return html`<uui-box>
+			<h3>Content Type Alias Condition Example</h3>
+			<p>
+				Content Type ${this._contentTypeAliases.length > 1 ? 'aliases' : 'alias'}:
+				<strong>${this._contentTypeAliases}</strong>
+			</p>
+		</uui-box>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-2);
+			}
+		`,
+	];
+}
+
+export { ExampleContentTypeAliasConditionWorkspaceViewElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-content-type-alias-condition-workspace-view': ExampleContentTypeAliasConditionWorkspaceViewElement;
+	}
+}

package/examples/entity-content-type-condition/content-type-unique-condition-workspace-view.element.ts

@@ -0,0 +1,48 @@
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
+import { html, customElement, state, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+@customElement('example-content-type-unique-condition-workspace-view')
+export class ExampleContentTypeUniqueConditionWorkspaceViewElement extends UmbLitElement {
+	@state()
+	private _contentTypeUniques: string[] = [];
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
+			this.observe(context?.structure.contentTypeUniques, (contentTypeUniques) => {
+				this._contentTypeUniques = contentTypeUniques || [];
+			});
+		});
+	}
+
+	override render() {
+		return html`<uui-box>
+			<h3>Content Type Unique Condition Example</h3>
+			<p>
+				Content Type ${this._contentTypeUniques.length > 1 ? 'ids' : 'id'}:
+				<strong>${this._contentTypeUniques}</strong>
+			</p>
+		</uui-box>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-2);
+			}
+		`,
+	];
+}
+
+export { ExampleContentTypeUniqueConditionWorkspaceViewElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-content-type-unique-condition-workspace-view': ExampleContentTypeUniqueConditionWorkspaceViewElement;
+	}
+}

package/examples/entity-content-type-condition/index.ts

@@ -1,22 +1,43 @@
-import { UMB_WORKSPACE_CONTENT_TYPE_ALIAS_CONDITION_ALIAS } from '@umbraco-cms/backoffice/content-type';
+import {
+	UMB_WORKSPACE_CONTENT_TYPE_ALIAS_CONDITION_ALIAS,
+	UMB_WORKSPACE_CONTENT_TYPE_UNIQUE_CONDITION,
+} from '@umbraco-cms/backoffice/content-type';
 
-const workspace: UmbExtensionManifest = {
+const workspaceViewAlias: UmbExtensionManifest = {
 	type: 'workspaceView',
-	alias: 'Example.WorkspaceView.EntityContentTypeCondition',
-	name: 'Example Workspace View With Entity Content Type Condition',
-	element: () => import('./workspace-view.element.js'),
+	alias: 'Example.WorkspaceView.EntityContentTypeAliasCondition',
+	name: 'Example Workspace View With Entity Content Type Alias Condition',
+	element: () => import('./content-type-alias-condition-workspace-view.element.js'),
 	meta: {
 		icon: 'icon-bus',
-		label: 'Conditional',
-		pathname: 'conditional',
+		label: 'Conditional (Alias)',
+		pathname: 'conditional-alias',
 	},
 	conditions: [
 		{
 			alias: UMB_WORKSPACE_CONTENT_TYPE_ALIAS_CONDITION_ALIAS,
-			//match : 'blogPost'
+			//match: 'blogPost',
 			oneOf: ['blogPost', 'mediaType1'],
 		},
 	],
 };
 
-export const manifests = [workspace];
+const workspaceViewUnique: UmbExtensionManifest = {
+	type: 'workspaceView',
+	alias: 'Example.WorkspaceView.EntityContentTypeUniqueCondition',
+	name: 'Example Workspace View With Content Type Unique Condition',
+	element: () => import('./content-type-unique-condition-workspace-view.element.js'),
+	meta: {
+		icon: 'icon-science',
+		label: 'Conditional (Unique)',
+		pathname: 'conditional-unique',
+	},
+	conditions: [
+		{
+			alias: UMB_WORKSPACE_CONTENT_TYPE_UNIQUE_CONDITION,
+			oneOf: ['721e85d3-0a2d-4f99-be55-61a5c5ed5c14', '1b88975d-60d0-4b84-809a-4a4deff38a66'], // Example uniques
+		},
+	],
+};
+
+export const manifests = [workspaceViewAlias, workspaceViewUnique];

package/examples/menu-item/README.md

@@ -0,0 +1,9 @@
+# Menu Item Example
+
+This example demonstrates how to register a Menu Item.
+
+The example includes:
+
+- Action Menu Item Registration
+- Link Menu Item Registration
+- Entity Menu Item Registration

package/examples/menu-item/action/action-menu-item.api.ts

@@ -0,0 +1,17 @@
+import { UmbMenuItemActionApiBase } from '@umbraco-cms/backoffice/menu';
+
+/**
+ * Example menu item action API
+ * This action will log "Hello world" to the console when executed.
+ */
+export class ExampleActionMenuItemApi extends UmbMenuItemActionApiBase<never> {
+	/**
+	 * This method is executed when the menu item is clicked
+	 */
+	override async execute() {
+		console.log('Hello world');
+	}
+}
+
+// Declare an `api` export so the Extension Registry can initialize this class
+export { ExampleActionMenuItemApi as api };

package/examples/menu-item/action/manifests.ts

@@ -0,0 +1,16 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		kind: 'action',
+		alias: 'Example.MenuItem.Action',
+		name: 'Example Action Menu Item',
+		api: () => import('./action-menu-item.api.js'),
+		meta: {
+			label: 'Example Action Menu Item',
+			icon: 'icon-hammer',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

package/examples/menu-item/entity/manifests.ts

@@ -0,0 +1,15 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		alias: 'Example.MenuItem.Entity',
+		name: 'Example Entity Menu Item',
+		meta: {
+			label: 'Example Entity Menu Item',
+			icon: 'icon-wand',
+			entityType: 'example-entity-type',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

package/examples/menu-item/index.ts

@@ -0,0 +1,5 @@
+import { manifests as actionManifests } from './action/manifests.js';
+import { manifests as entityManifests } from './entity/manifests.js';
+import { manifests as linkManifests } from './link/manifests.js';
+
+export const manifests = [...actionManifests, ...entityManifests, ...linkManifests];

package/examples/menu-item/link/manifests.ts

@@ -0,0 +1,16 @@
+import { UMB_CONTENT_MENU_ALIAS } from '@umbraco-cms/backoffice/document';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'menuItem',
+		kind: 'link',
+		alias: 'Example.MenuItem.ExternalLink',
+		name: 'Example External Link Menu Item',
+		meta: {
+			label: 'Example Link Menu Item',
+			icon: 'icon-link',
+			href: 'https://',
+			menus: [UMB_CONTENT_MENU_ALIAS],
+		},
+	},
+];

package/examples/menu-item/tree/README.md

@@ -0,0 +1,3 @@
+#Tree Menu Item
+
+See the Tree Example of how to register a tree and use it as a menu item in the sidebar.

package/examples/workspace-context-counter/README.md

@@ -1,10 +1,10 @@
-# Workspace Extensions Complete Example
+# Workspace Context Communication Across Extensions Example
 
-The Workspace Context serves as the central communication hub for all workspace extensions. In this example, the context manages a counter that can be manipulated and displayed by different extension types, showcasing the power of shared state management in workspace extensions.
+The Workspace Context serves as the central communication hub for all Workspace extensions. In this example, the Context manages a counter that can be manipulated and displayed by different Extension Types, showcasing the power of shared state management in Workspace extensions.
 
 ## Extension types included
 
-This complete example includes:
+This example includes:
 
 - **Workspace Context** - Manages shared counter state and provides communication between extensions
 - **Workspace Action** - Primary "Increment" button that increases the counter value
@@ -14,6 +14,6 @@ This complete example includes:
 
 ## How it works
 
-All extensions communicate through the shared workspace context. When you increment or reset the counter using the actions, the workspace view and footer app automatically update to show the new value, demonstrating reactive state management across workspace extensions.
+All extensions communicate through the shared Workspace Context. When you increment or reset the counter using the actions, the Workspace view and Footer app update to show the new value, demonstrating reactive state management across Workspace extensions.
 
-This pattern shows how workspace extensions can work together to create cohesive functionality within Umbraco workspaces.
+This pattern shows how various Workspace extensions can communicate via a Workspace Context as their mediator.

package/examples/workspace-context-counter/counter-workspace-context.test.ts

@@ -1,5 +1,5 @@
-import { WorkspaceContextCounterElement, EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
-import { ExampleCounterWorkspaceView } from './counter-workspace-view.js';
+import { ExampleWorkspaceContextCounterContext, EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
+import { ExampleCounterWorkspaceViewElement } from './counter-workspace-view.js';
 import { ExampleCounterStatusFooterAppElement } from './counter-status-footer-app.element.js';
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -10,11 +10,11 @@ const testHostElement = defineCE(TestHostElement);
 
 describe('WorkspaceContextCounterElement', () => {
 	let element: UmbLitElement;
-	let context: WorkspaceContextCounterElement;
+	let context: ExampleWorkspaceContextCounterContext;
 
 	beforeEach(async () => {
 		element = await fixture(`<${testHostElement}></${testHostElement}>`);
-		context = new WorkspaceContextCounterElement(element);
+		context = new ExampleWorkspaceContextCounterContext(element);
 	});
 
 	describe('Counter functionality', () => {
@@ -147,18 +147,18 @@ describe('WorkspaceContextCounterElement', () => {
 });
 
 describe('ExampleCounterWorkspaceView', () => {
-	let element: ExampleCounterWorkspaceView;
-	let context: WorkspaceContextCounterElement;
+	let element: ExampleCounterWorkspaceViewElement;
+	let context: ExampleWorkspaceContextCounterContext;
 	let hostElement: UmbLitElement;
 
 	beforeEach(async () => {
 		hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
-		context = new WorkspaceContextCounterElement(hostElement);
-		
+		context = new ExampleWorkspaceContextCounterContext(hostElement);
+
 		element = await fixture(html`<example-counter-workspace-view></example-counter-workspace-view>`, {
 			parentNode: hostElement,
 		});
-		
+
 		// Wait for context consumption
 		await element.updateComplete;
 	});
@@ -173,7 +173,7 @@ describe('ExampleCounterWorkspaceView', () => {
 		it('reflects counter value changes when incremented', async () => {
 			context.increment();
 			await element.updateComplete;
-			
+
 			const displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Current count value: 1');
 		});
@@ -183,7 +183,7 @@ describe('ExampleCounterWorkspaceView', () => {
 			context.increment();
 			context.increment();
 			await element.updateComplete;
-			
+
 			const displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Current count value: 3');
 		});
@@ -192,13 +192,13 @@ describe('ExampleCounterWorkspaceView', () => {
 			context.increment();
 			context.increment();
 			await element.updateComplete;
-			
+
 			let displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Current count value: 2');
-			
+
 			context.reset();
 			await element.updateComplete;
-			
+
 			displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Current count value: 0');
 		});
@@ -210,11 +210,11 @@ describe('ExampleCounterWorkspaceView', () => {
 			context.increment();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Current count value: 3');
-			
+
 			context.reset();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Current count value: 0');
-			
+
 			context.increment();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Current count value: 1');
@@ -224,17 +224,17 @@ describe('ExampleCounterWorkspaceView', () => {
 
 describe('ExampleCounterStatusFooterAppElement', () => {
 	let element: ExampleCounterStatusFooterAppElement;
-	let context: WorkspaceContextCounterElement;
+	let context: ExampleWorkspaceContextCounterContext;
 	let hostElement: UmbLitElement;
 
 	beforeEach(async () => {
 		hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
-		context = new WorkspaceContextCounterElement(hostElement);
-		
+		context = new ExampleWorkspaceContextCounterContext(hostElement);
+
 		element = await fixture(html`<example-counter-status-footer-app></example-counter-status-footer-app>`, {
 			parentNode: hostElement,
 		});
-		
+
 		// Wait for context consumption
 		await element.updateComplete;
 	});
@@ -249,7 +249,7 @@ describe('ExampleCounterStatusFooterAppElement', () => {
 		it('reflects counter state changes when incremented', async () => {
 			context.increment();
 			await element.updateComplete;
-			
+
 			const displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Counter: 1');
 		});
@@ -261,7 +261,7 @@ describe('ExampleCounterStatusFooterAppElement', () => {
 			context.increment();
 			context.increment();
 			await element.updateComplete;
-			
+
 			const displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Counter: 5');
 		});
@@ -271,13 +271,13 @@ describe('ExampleCounterStatusFooterAppElement', () => {
 			context.increment();
 			context.increment();
 			await element.updateComplete;
-			
+
 			let displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Counter: 3');
-			
+
 			context.reset();
 			await element.updateComplete;
-			
+
 			displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Counter: 0');
 		});
@@ -286,16 +286,16 @@ describe('ExampleCounterStatusFooterAppElement', () => {
 			// Test comprehensive state change tracking
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Counter: 0');
-			
+
 			context.increment();
 			context.increment();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Counter: 2');
-			
+
 			context.reset();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Counter: 0');
-			
+
 			context.increment();
 			await element.updateComplete;
 			expect(element.shadowRoot?.textContent).to.include('Counter: 1');
@@ -310,9 +310,9 @@ describe('ExampleCounterStatusFooterAppElement', () => {
 			context.increment();
 			context.increment();
 			await element.updateComplete;
-			
+
 			const displayText = element.shadowRoot?.textContent;
 			expect(displayText).to.include('Counter: 2');
 		});
 	});
-});
+});