Merge branch 'main' into feature/selectable-filter

src/Umbraco.Web.UI.Client/.storybook/main.ts

@@ -1,7 +1,7 @@
 import { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
-	stories: ['../@(src|libs|apps)/**/*.mdx', '../@(src|libs|apps)/**/*.stories.@(js|jsx|ts|tsx)'],
+	stories: ['../@(src|libs|apps|storybook)/**/*.mdx', '../@(src|libs|apps|storybook)/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
 	framework: {
 		name: '@storybook/web-components-vite',

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

@@ -24,7 +24,7 @@ import { umbExtensionsRegistry } from '../libs/extensions-api';
 
 import '../src/core/context-provider/context-provider.element';
 import '../src/core/controller-host/controller-host-test.element';
-import '../src/backoffice/shared/components';
+import '../src/backoffice/core/components';
 
 import { manifests as documentManifests } from '../src/backoffice/documents';
 

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -1,6 +1,7 @@
 {
 	"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"],
 	"cSpell.words": [
+		"Backoffice",
 		"combobox",
 		"Elementable",
 		"pickable",

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

@@ -5,8 +5,6 @@ import 'element-internals-polyfill';
 
 import './core/router/router-slot.element';
 import './core/router/variant-router-slot.element';
-import './core/notification/layouts/default';
-import './core/modal/modal-element.element';
 
 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';

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

@@ -5,16 +5,14 @@ import { UmbStoreExtensionInitializer } from '../core/store-extension-initialize
 import {
 	UmbBackofficeContext,
 	UMB_BACKOFFICE_CONTEXT_TOKEN,
-} from './shared/components/backoffice-frame/backoffice.context';
+} from './core/components/backoffice-frame/backoffice.context';
 import { UmbExtensionInitializer } from './packages/repository/server-extension.controller';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbEntryPointExtensionInitializer } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 const CORE_PACKAGES = [
-	import('./shared/umbraco-package'),
+	import('./core/umbraco-package'),
 	import('./settings/umbraco-package'),
 	import('./documents/umbraco-package'),
 	import('./media/umbraco-package'),
@@ -31,8 +29,6 @@ const CORE_PACKAGES = [
 export class UmbBackofficeElement extends UmbLitElement {
 	constructor() {
 		super();
-		this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(this));
-		this.provideContext(UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext());
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 		new UmbStoreExtensionInitializer(this);
@@ -43,8 +39,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		return html`
 			<umb-backoffice-header></umb-backoffice-header>
 			<umb-backoffice-main></umb-backoffice-main>
-			<umb-backoffice-notification-container></umb-backoffice-notification-container>
-			<umb-backoffice-modal-container></umb-backoffice-modal-container>
+			<slot></slot>
 		`;
 	}
 
@@ -60,9 +55,6 @@ export class UmbBackofficeElement extends UmbLitElement {
 				font-size: 14px;
 				box-sizing: border-box;
 			}
-			umb-backoffice-modal-container {
-				z-index: 1000;
-			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts

@@ -7,8 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-modal-container')
 export class UmbBackofficeModalContainerElement extends UmbLitElement {
-	
-
 	@state()
 	private _modals?: UmbModalHandler[];
 
@@ -38,12 +36,13 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			</uui-modal-container>
 		`;
 	}
-	
+
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
 			:host {
 				position: absolute;
+				z-index: 1000;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts

@@ -11,8 +11,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-notification-container')
 export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
-	
-
 	@state()
 	private _notifications?: UmbNotificationHandler[];
 
@@ -48,7 +46,7 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
 			</uui-toast-notification-container>
 		`;
 	}
-	
+
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts

@@ -54,7 +54,7 @@ import './workspace/workspace-editor/workspace-editor.element';
 import './workspace/workspace-footer/workspace-footer.element';
 import './workspace/workspace-action-menu/workspace-action-menu.element';
 
-import './variant-selector/variant-selector.element.ts';
+import './variant-selector/variant-selector.element';
 
 import './code-editor';
 

src/Umbraco.Web.UI.Client/src/backoffice/core/components/section/section.element.ts

@@ -48,7 +48,7 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 			},
 			{
 				path: '**',
-				component: () => import('../section/section-views/section-views.element'),
+				component: () => import('./section-views/section-views.element'),
 				setup: (element) => {
 					(element as UmbSectionViewsElement).sectionAlias = this.manifest?.alias;
 				},