@umbraco-cms/backoffice 1.0.0-next.37dcc47c → 1.0.0-next.386e13e7

package/README.md

@@ -40,7 +40,7 @@ Create an umbraco-package.json file in the root of your package.
 Then create a dashboard.js file the same folder.
 
 ```javascript
-import { UmbElementMixin } from '@umbraco-cms/backoffice/element';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 const template = document.createElement('template');
@@ -87,10 +87,10 @@ customElements.define('my-custom-dashboard', MyDashboardElement);
 
 ### TypeScript with Lit
 
-First install Lit and Vite. This command will create a new folder called "my-package". Choose "lit" and "typescript" when prompted.
+First install Lit and Vite. This command will create a new folder called `my-package` which will have the Vite tooling and Lit for WebComponent development setup.
 
 ```bash
-npm create vite@latest my-package
+npm create vite@latest -- --template lit-ts my-package
 ```
 
 Go to the new folder and install the backoffice package.
@@ -100,34 +100,34 @@ cd my-package
 npm install -D @umbraco-cms/backoffice
 ```
 
-Then go to the element located in `src/my-element.ts` and add the following code.
+Then go to the element located in `src/my-element.ts` and replace it with the following code.
 
 ```typescript
 // src/my-element.ts
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { UmbElementMixin } from '@umbraco-cms/backoffice/element';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 @customElement('my-element')
 export default class MyElement extends UmbElementMixin(LitElement) {
-	#notificationContext?: UmbNotificationContext;
+	private _notificationContext?: UmbNotificationContext;
 
 	constructor() {
 		super();
 		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (_instance) => {
-			this.#notificationContext = _instance;
+			this._notificationContext = _instance;
 		});
 	}
 
 	onClick() {
-		this.#notificationContext?.peek('positive', { data: { message: '#h5yr' } });
+		this._notificationContext?.peek('positive', { data: { message: '#h5yr' } });
 	}
 
 	render() {
 		return html`
 			<uui-box headline="Welcome">
-				<p>TS dashboard</p>
+				<p>A TypeScript Lit Dashboard</p>
 				<uui-button look="primary" label="Click me" @click=${() => this.onClick()}></uui-button>
 			</uui-box>
 		`;
@@ -141,7 +141,7 @@ declare global {
 }
 ```
 
-Finally add an umbraco-package.json file in the root of your package.
+Finally add an umbraco-package.json file in the root of your package folder `my-package`.
 
 ```json
 {