diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index d212570fa6..99fe0873ce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts new file mode 100644 index 0000000000..8bea3415c4 --- /dev/null +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts new file mode 100644 index 0000000000..4f60d3e1b0 --- /dev/null +++ b/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``; + } + + 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; + } +}