add popover layout

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

@@ -33,3 +33,4 @@ export * from './ref-property-editor-ui/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
+export * from './popover-layout/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts

@@ -0,0 +1,3 @@
+import './popover-layout.element.js';
+
+export * from './popover-layout.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts

@@ -0,0 +1,32 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+// TODO: maybe move this to UI Library.
+@customElement('umb-popover-layout')
+export class UmbPopoverLayoutElement extends UmbLitElement {
+	render() {
+		return html`<slot></slot>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				background-color: var(--uui-color-surface);
+				display: block;
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-3);
+				padding: var(--uui-size-space-3);
+				overflow: clip;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-popover-layout': UmbPopoverLayoutElement;
+	}
+}