@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc

package/dist-cms/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.js

@@ -9,11 +9,87 @@ import { css, repeat, customElement, property, state, html, nothing } from '../.
 import { UmbExtensionsElementAndApiInitializer, } from '../../../../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
 /**
+ * A custom element that dynamically renders extensions with both UI elements and API classes.
+ *
+ * Similar to `umb-extension-slot`, this element observes the extension registry and renders permitted extensions.
+ * The key difference is that this slot also initializes an API class for each extension, allowing extensions
+ * to have both a visual component and associated business logic. The API instance is created with configurable
+ * constructor arguments and can receive properties.
  * @element umb-extension-with-api-slot
- * @description A element which renderers the extensions of a given type or types.
- * @slot default - slot for inserting additional things into this slot.
- * @class UmbExtensionSlot
- * @augments {UmbLitElement}
+ * @slot default - Fallback content shown when no extensions are permitted (unless `fallbackRenderMethod` is provided).
+ * @example Basic usage - Render extensions with APIs
+ * ```html
+ * <umb-extension-with-api-slot type="entityAction"></umb-extension-with-api-slot>
+ * ```
+ * @example Multiple types - Render extensions from multiple types
+ * ```html
+ * <umb-extension-with-api-slot .type=${['workspaceAction', 'workspaceActionMenuItem']}></umb-extension-with-api-slot>
+ * ```
+ * @example Single extension - Only render the first matching extension
+ * ```html
+ * <umb-extension-with-api-slot type="collectionTextFilter" single></umb-extension-with-api-slot>
+ * ```
+ * @example With filter - Filter extensions by manifest properties
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="entityAction"
+ *     .filter=${(manifest) => manifest.forEntityTypes.includes(entityType)}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example With element props - Pass data to extension elements
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="entityAction"
+ *     .elementProps=${{ entityType, unique }}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example With API args - Pass constructor arguments to extension APIs
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="workspaceAction"
+ *     .apiArgs=${[workspaceContext]}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example With API args method - Dynamic constructor arguments based on manifest
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="workspaceAction"
+ *     .apiArgs=${(manifest) => [workspaceContext, manifest.meta]}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example Combined usage - Filter, element props, and API args
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="entityAction"
+ *     .filter=${this._filter}
+ *     .elementProps=${this._props}
+ *     .apiArgs=${this._apiArgs}
+ *     .renderMethod=${(ext, index) => ext.component}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example Custom render method - Control how extensions are rendered
+ * ```html
+ * <umb-extension-with-api-slot
+ *     type="menuItem"
+ *     .renderMethod=${(ext, index) => html`
+ *         <div class="menu-item-wrapper">
+ *             ${ext.component}
+ *         </div>
+ *     `}>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example Fallback content - Shows the slotted content when no extensions match
+ * ```html
+ * <umb-extension-with-api-slot type="myExtensionType">
+ *     <p>No actions available</p>
+ * </umb-extension-with-api-slot>
+ * ```
+ * @example Fallback render method - Shows the result of the fallbackRenderMethod when no extensions match
+ * ```html
+ * <umb-extension-with-api-slot type="myExtensionType">
+ *     .fallbackRenderMethod=${() => html`<p>No extensions available</p>`}
+ * </umb-extension-with-api-slot>
+ * ```
  */
 // TODO: Refactor extension-slot and extension-with-api slot.
 // TODO: Fire change event.
@@ -21,14 +97,18 @@ import { UmbLitElement } from '../../../lit-element/index.js';
 let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extends UmbLitElement {
     #attached = false;
     #extensionsController;
+    #disconnectAC;
     /**
-     * The type or types of extensions to render.
-     * @type {string | string[]}
-     * @memberof UmbExtensionSlot
-     * @example
-     * <umb-extension-with-api-slot type="my-extension-type"></umb-extension-with-api-slot>
-     * or multiple:
-     * <umb-extension-with-api-slot .type=${['my-extension-type','another-extension-type']}></umb-extension-with-api-slot>
+     * The type or types of extensions to render. Required for the slot to display anything.
+     * Can be a single type string or an array of type strings to render extensions from multiple types.
+     * @example Single type
+     * ```html
+     * <umb-extension-with-api-slot type="entityAction"></umb-extension-with-api-slot>
+     * ```
+     * @example Multiple types
+     * ```html
+     * <umb-extension-with-api-slot .type=${['workspaceAction', 'workspaceActionMenuItem']}></umb-extension-with-api-slot>
+     * ```
      */
     get type() {
         return this.#type;
@@ -41,12 +121,24 @@ let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extend
     }
     #type;
     /**
-     * Filter method for extension manifests.
-     * This is an initial filter taking effect before conditions or overwrites, the extensions will still be filtered by the conditions defined in the manifest.
-     * @type {(manifest: any) => boolean}
-     * @memberof UmbExtensionSlot
-     * @example
-     * <umb-extension-with-api-slot type="my-extension-type" .filter=${(ext) => ext.meta.anyPropToFilter === 'foo'}></umb-extension-with-api-slot>
+     * Filter function for extension manifests.
+     * This is an initial filter taking effect before conditions or overwrites are applied.
+     * Extensions will still be filtered by their manifest-defined conditions after this filter.
+     * The filter function receives the extension manifest and should return true to include it.
+     * @example Filter by entity type
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="entityAction"
+     *     .filter=${(manifest) => manifest.forEntityTypes.includes(entityType)}>
+     * </umb-extension-with-api-slot>
+     * ```
+     * @example Filter by meta properties
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="workspaceAction"
+     *     .filter=${(manifest) => manifest.meta.look === 'primary'}>
+     * </umb-extension-with-api-slot>
+     * ```
      */
     get filter() {
         return this.#filter;
@@ -59,12 +151,16 @@ let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extend
     }
     #filter = () => true;
     /**
-     * Properties to pass to the extensions elements.
-     * Notice: The individual manifest of the extension is parsed to each extension element no matter if this is set or not.
-     * @type {Record<string, any>}
-     * @memberof UmbExtensionSlot
-     * @example
-     * <umb-extension-with-api-slot type="my-extension-type" .elementProps=${{foo: 'bar'}}></umb-extension-with-api-slot>
+     * Properties to pass to all rendered extension elements.
+     * These properties are spread onto each extension element instance.
+     * Note: The extension's manifest is always passed automatically regardless of this setting.
+     * @example Pass entity context to extension elements
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="entityAction"
+     *     .elementProps=${{ entityType: 'document', unique: documentId }}>
+     * </umb-extension-with-api-slot>
+     * ```
      */
     get elementProps() {
         return this.#elProps;
@@ -78,12 +174,23 @@ let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extend
     }
     #elProps = {};
     /**
-     * constructor arguments to pass to the extensions apis.
-     * Notice: The host argument will be prepended as the first argument no matter if this is set or not.
-     * @type {Array<unknown>}
-     * @memberof UmbExtensionSlot
-     * @example
-     * <umb-extension-with-api-slot type="my-extension-type" .apiArgs=${{foo: 'bar'}}></umb-extension-with-api-slot>
+     * Constructor arguments to pass when instantiating the extension APIs.
+     * Can be an array of arguments or a function that receives the manifest and returns arguments.
+     * Note: The host controller is always prepended as the first argument automatically.
+     * @example Static array of arguments
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="workspaceAction"
+     *     .apiArgs=${[workspaceContext]}>
+     * </umb-extension-with-api-slot>
+     * ```
+     * @example Dynamic arguments based on manifest
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="entityAction"
+     *     .apiArgs=${(manifest) => [entityContext, manifest.meta.actionType]}>
+     * </umb-extension-with-api-slot>
+     * ```
      */
     get apiArgs() {
         return this.#constructorArgs;
@@ -96,12 +203,16 @@ let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extend
     }
     #constructorArgs = [];
     /**
-     * Properties to pass to the extensions apis.
-     * Notice: The individual manifest of the extension is parsed to each extension api no matter if this is set or not.
-     * @type {Record<string, any>}
-     * @memberof UmbExtensionSlot
-     * @example
-     * <umb-extension-with-api-slot type="my-extension-type" .apiProps=${{foo: 'bar'}}></umb-extension-with-api-slot>
+     * Properties to pass to all extension API instances after construction.
+     * These properties are spread onto each API instance.
+     * Note: The extension's manifest is always passed automatically regardless of this setting.
+     * @example Pass configuration to extension APIs
+     * ```html
+     * <umb-extension-with-api-slot
+     *     type="workspaceAction"
+     *     .apiProps=${{ saveOnClick: true, validateFirst: false }}>
+     * </umb-extension-with-api-slot>
+     * ```
      */
     get apiProps() {
         return this.#apiProps;
@@ -117,13 +228,32 @@ let UmbExtensionWithApiSlotElement = class UmbExtensionWithApiSlotElement extend
     connectedCallback() {
         super.connectedCallback();
         this.#attached = true;
+        // Cancel any pending destruction if we're being reconnected (e.g., during a DOM move/sort)
+        if (this.#disconnectAC) {
+            this.#disconnectAC.abort();
+            this.#disconnectAC = undefined;
+            // Only skip re-initialization if the controller still exists
+            if (this.#extensionsController) {
+                return;
+            }
+        }
         this.#observeExtensions();
     }
     disconnectedCallback() {
-        this.#attached = false;
-        this.#extensionsController?.destroy();
-        this.#extensionsController = undefined;
         super.disconnectedCallback();
+        this.#attached = false;
+        // Abort any previously pending disconnect before scheduling a new one
+        this.#disconnectAC?.abort();
+        // Defer destruction to allow for reconnection during DOM moves/sorting
+        // If reconnected before the microtask resolves, the AbortController cancels the callback
+        const abortController = (this.#disconnectAC = new AbortController());
+        queueMicrotask(() => {
+            if (!abortController.signal.aborted) {
+                this.#disconnectAC = undefined;
+                this.#extensionsController?.destroy();
+                this.#extensionsController = undefined;
+            }
+        });
     }
     #observeExtensions() {
         // We want to be attached before we start observing extensions, cause first at this point we know that we got the right properties. [NL]

package/dist-cms/packages/core/http-client/index.d.ts

@@ -1,2 +1,16 @@
 import { client } from '../backend-api/index.js';
+/**
+ * Export the pre-configured client for use in the backoffice. This client will be used by generated SDK functions that include `security` metadata, and can also be used directly for custom API calls.
+ * Note: This client is configured for cookie-based authentication and should only be used in the backoffice context where such authentication is applicable. For other contexts (e.g., public website), a different client configuration may be necessary.
+ * Note: To use the 'auth' option to send a Bearer token, the call must specify a security scheme in the OpenAPI spec, and the generated SDK function must include `security` metadata, or you must specify a security scheme manually. Otherwise, the 'auth' option will not be applied to the request.
+ * @example
+ * ```js
+ * umbHttpClient.get({
+ *   url: '/some/protected/endpoint',
+ *   security: [{ type: 'http', scheme: 'bearer' }] // This tells the client to apply the 'auth' option
+ * }).then(response => {
+ *   // handle response
+ * });
+ * ```
+ */
 export { client as umbHttpClient };

package/dist-cms/packages/core/http-client/index.js

@@ -1,12 +1,32 @@
 import { client } from '../backend-api/index.js';
 /**
- * Pre-configure the client with default credentials for cookie-based authentication.
- * This ensures all requests include cookies by default, which is required for
- * cookie-based authentication in Umbraco 17.0+.
+ * Pre-configure the client for cookie-based authentication (Umbraco 17.0+).
  *
- * Extensions using this client will automatically get credentials: 'include'.
+ * - `credentials: 'include'` ensures cookies are sent with every request.
+ * - `auth` returns `'[redacted]'` which triggers `HideBackOfficeTokensHandler` on the
+ *    server to swap the real token from the httpOnly cookie into the request pipeline.
+ *    This is used by generated SDK functions that include `security` metadata.
+ *
+ * The cookie carries the actual token; the Authorization header tells the server to
+ * look for it. Setting these at module level eliminates any timing dependency on
+ * UmbAuthContext initialization.
  */
 client.setConfig({
     credentials: 'include',
+    auth: () => '[redacted]',
 });
+/**
+ * Export the pre-configured client for use in the backoffice. This client will be used by generated SDK functions that include `security` metadata, and can also be used directly for custom API calls.
+ * Note: This client is configured for cookie-based authentication and should only be used in the backoffice context where such authentication is applicable. For other contexts (e.g., public website), a different client configuration may be necessary.
+ * Note: To use the 'auth' option to send a Bearer token, the call must specify a security scheme in the OpenAPI spec, and the generated SDK function must include `security` metadata, or you must specify a security scheme manually. Otherwise, the 'auth' option will not be applied to the request.
+ * @example
+ * ```js
+ * umbHttpClient.get({
+ *   url: '/some/protected/endpoint',
+ *   security: [{ type: 'http', scheme: 'bearer' }] // This tells the client to apply the 'auth' option
+ * }).then(response => {
+ *   // handle response
+ * });
+ * ```
+ */
 export { client as umbHttpClient };

package/dist-cms/packages/core/icon-registry/icon-dictionary.json

@@ -102,7 +102,7 @@
         },
         {
             "name": "icon-badge",
-            "file": "badge.svg"
+            "file": "id-card.svg"
         },
         {
             "name": "icon-badge-add",

package/dist-cms/packages/core/icon-registry/icons/icon-badge.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-badge\" viewBox=\"0 0 24 24\"><path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76\"/></svg>";
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-id-card\" viewBox=\"0 0 24 24\"><path d=\"M16 10h2M16 14h2M6.17 15a3 3 0 0 1 5.66 0\"/><circle cx=\"9\" cy=\"11\" r=\"2\"/><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"/></svg>";
 export default _default;

package/dist-cms/packages/core/icon-registry/icons/icon-badge.js

@@ -1 +1 @@
-export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-badge" viewBox="0 0 24 24"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"/></svg>`;
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-id-card" viewBox="0 0 24 24"><path d="M16 10h2M16 14h2M6.17 15a3 3 0 0 1 5.66 0"/><circle cx="9" cy="11" r="2"/><rect width="20" height="14" x="2" y="5" rx="2"/></svg>`;

package/dist-cms/packages/core/lit-element/directives/destroy.lit-directive.d.ts

@@ -7,6 +7,7 @@ declare class UmbDestroyDirective extends AsyncDirective {
     render(): symbol;
     update(part: ElementPart): symbol;
     disconnected(): void;
+    reconnected(): void;
 }
 /**
  * @description

package/dist-cms/packages/core/lit-element/directives/destroy.lit-directive.js

@@ -4,6 +4,7 @@ import { AsyncDirective, directive, nothing } from '../../../../external/lit/ind
  */
 class UmbDestroyDirective extends AsyncDirective {
     #el;
+    #disconnectAC;
     render() {
         return nothing;
     }
@@ -12,10 +13,23 @@ class UmbDestroyDirective extends AsyncDirective {
         return nothing;
     }
     disconnected() {
-        if (this.#el) {
-            this.#el.destroy();
+        this.#disconnectAC?.abort();
+        const abortController = (this.#disconnectAC = new AbortController());
+        queueMicrotask(() => {
+            if (!abortController.signal.aborted) {
+                this.#disconnectAC = undefined;
+                if (this.#el) {
+                    this.#el.destroy();
+                    this.#el = undefined;
+                }
+            }
+        });
+    }
+    reconnected() {
+        if (this.#disconnectAC) {
+            this.#disconnectAC.abort();
+            this.#disconnectAC = undefined;
         }
-        this.#el = undefined;
     }
 }
 /**

package/dist-cms/packages/core/manifests.js

@@ -6,7 +6,8 @@ import { manifests as entityActionManifests } from './entity-action/manifests.js
 import { manifests as entityBulkActionManifests } from './entity-bulk-action/manifests.js';
 import { manifests as entityManifests } from './entity/manifests.js';
 import { manifests as entitySignManifests } from './entity-sign/manifests.js';
-import { manifests as extensionManifests } from './extension-registry/manifests.js';
+import { manifests as extensionManifests } from './extension/manifests.js';
+import { manifests as extensionRegistryManifests } from './extension-registry/manifests.js';
 import { manifests as iconRegistryManifests } from './icon-registry/manifests.js';
 import { manifests as localizationManifests } from './localization/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
@@ -18,8 +19,10 @@ import { manifests as propertyEditorManifests } from './property-editor/manifest
 import { manifests as propertySortModeManifests } from './property-sort-mode/manifests.js';
 import { manifests as propertyManifests } from './property/manifests.js';
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
+import { manifests as routerManifests } from './router/manifests.js';
 import { manifests as searchManifests } from './search/manifests.js';
 import { manifests as sectionManifests } from './section/manifests.js';
+import { manifests as serverManifests } from './server/manifests.js';
 import { manifests as serverFileSystemManifests } from './server-file-system/manifests.js';
 import { manifests as temporaryFileManifests } from './temporary-file/manifests.js';
 import { manifests as themeManifests } from './themes/manifests.js';
@@ -35,6 +38,7 @@ export const manifests = [
     ...entityManifests,
     ...entitySignManifests,
     ...extensionManifests,
+    ...extensionRegistryManifests,
     ...iconRegistryManifests,
     ...localizationManifests,
     ...menuManifests,
@@ -46,8 +50,10 @@ export const manifests = [
     ...propertySortModeManifests,
     ...propertyManifests,
     ...recycleBinManifests,
+    ...routerManifests,
     ...searchManifests,
     ...sectionManifests,
+    ...serverManifests,
     ...serverFileSystemManifests,
     ...temporaryFileManifests,
     ...themeManifests,

package/dist-cms/packages/core/modal/common/index.d.ts

@@ -1,4 +1,5 @@
 export * from './confirm/index.js';
 export * from './discard-changes/index.js';
 export * from './error-viewer/index.js';
+export * from './info/index.js';
 export * from './item-picker/index.js';

package/dist-cms/packages/core/modal/common/index.js

@@ -1,4 +1,5 @@
 export * from './confirm/index.js';
 export * from './discard-changes/index.js';
 export * from './error-viewer/index.js';
+export * from './info/index.js';
 export * from './item-picker/index.js';

package/dist-cms/packages/core/modal/common/info/index.d.ts

@@ -0,0 +1,3 @@
+export * from './info-modal.controller.js';
+export * from './info-modal.element.js';
+export * from './info-modal.token.js';

package/dist-cms/packages/core/modal/common/info/index.js

@@ -0,0 +1,3 @@
+export * from './info-modal.controller.js';
+export * from './info-modal.element.js';
+export * from './info-modal.token.js';

package/dist-cms/packages/core/modal/common/info/info-modal.controller.d.ts

@@ -0,0 +1,9 @@
+import { type UmbInfoModalData } from './info-modal.token.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+/**
+ *
+ * @param host {UmbControllerHost} - The host controller
+ * @param data {UmbInfoModalData} - The data to pass to the modal
+ * @returns {UmbOpenModalController} The modal controller instance
+ */
+export declare function umbInfoModal(host: UmbControllerHost, data: UmbInfoModalData): Promise<undefined>;

package/dist-cms/packages/core/modal/common/info/info-modal.controller.js

@@ -0,0 +1,11 @@
+import { UmbOpenModalController } from '../../controller/open-modal.controller.js';
+import { UMB_INFO_MODAL } from './info-modal.token.js';
+/**
+ *
+ * @param host {UmbControllerHost} - The host controller
+ * @param data {UmbInfoModalData} - The data to pass to the modal
+ * @returns {UmbOpenModalController} The modal controller instance
+ */
+export function umbInfoModal(host, data) {
+    return new UmbOpenModalController(host).open(UMB_INFO_MODAL, { data });
+}

package/dist-cms/packages/core/modal/common/info/info-modal.element.d.ts

@@ -0,0 +1,16 @@
+import type { UmbModalContext } from '../../context/index.js';
+import type { UmbInfoModalData, UmbInfoModalValue } from './info-modal.token.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+export declare class UmbInfoModalElement extends UmbLitElement {
+    modalContext?: UmbModalContext<UmbInfoModalData, UmbInfoModalValue>;
+    data?: UmbInfoModalData;
+    private _handleClose;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbInfoModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-info-modal': UmbInfoModalElement;
+    }
+}

package/dist-cms/packages/core/modal/common/info/info-modal.element.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, customElement, property, css, unsafeHTML } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
+import { UmbLitElement, umbFocus } from '../../../lit-element/index.js';
+let UmbInfoModalElement = class UmbInfoModalElement extends UmbLitElement {
+    _handleClose() {
+        this.modalContext?.reject();
+    }
+    render() {
+        return html `
+			<uui-dialog-layout class="uui-text" .headline=${this.localize.string(this.data?.headline) ?? null}>
+				${typeof this.data?.content === 'string'
+            ? unsafeHTML(this.localize.string(this.data?.content))
+            : this.data?.content}
+
+				<uui-button
+					slot="actions"
+					id="close"
+					label=${this.localize.term('general_close')}
+					@click=${this._handleClose}
+					${umbFocus()}></uui-button>
+			</uui-dialog-layout>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			uui-dialog-layout {
+				max-inline-size: 60ch;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbInfoModalElement.prototype, "modalContext", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbInfoModalElement.prototype, "data", void 0);
+UmbInfoModalElement = __decorate([
+    customElement('umb-info-modal')
+], UmbInfoModalElement);
+export { UmbInfoModalElement };
+export default UmbInfoModalElement;

package/dist-cms/packages/core/modal/common/info/info-modal.token.d.ts

@@ -0,0 +1,8 @@
+import { UmbModalToken } from '../../token/index.js';
+import type { TemplateResult } from '../../../../../external/lit/index.js';
+export interface UmbInfoModalData {
+    headline: string;
+    content: TemplateResult | string;
+}
+export type UmbInfoModalValue = undefined;
+export declare const UMB_INFO_MODAL: UmbModalToken<UmbInfoModalData, undefined>;

package/dist-cms/packages/core/modal/common/info/info-modal.token.js

@@ -0,0 +1,6 @@
+import { UmbModalToken } from '../../token/index.js';
+export const UMB_INFO_MODAL = new UmbModalToken('Umb.Modal.Info', {
+    modal: {
+        type: 'dialog',
+    },
+});

package/dist-cms/packages/core/modal/common/info/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/core/modal/common/info/manifests.js

@@ -0,0 +1,8 @@
+export const manifests = [
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.Info',
+        name: 'Info Modal',
+        element: () => import('./info-modal.element.js'),
+    },
+];

package/dist-cms/packages/core/modal/common/manifests.js

@@ -1,10 +1,12 @@
 import { manifests as confirmManifests } from './confirm/manifests.js';
 import { manifests as discardChangesManifests } from './discard-changes/manifests.js';
 import { manifests as errorViewerManifests } from './error-viewer/manifest.js';
+import { manifests as infoManifests } from './info/manifests.js';
 import { manifests as itemPickerManifests } from './item-picker/manifests.js';
 export const manifests = [
     ...confirmManifests,
     ...discardChangesManifests,
     ...errorViewerManifests,
+    ...infoManifests,
     ...itemPickerManifests,
 ];

package/dist-cms/packages/core/modal/component/index.d.ts

@@ -0,0 +1,3 @@
+export * from './modal-base.element.js';
+export * from './modal.element.js';
+export * from './persistent-modal-dialog.element.js';

package/dist-cms/packages/core/modal/component/index.js

@@ -0,0 +1,3 @@
+export * from './modal-base.element.js';
+export * from './modal.element.js';
+export * from './persistent-modal-dialog.element.js';

package/dist-cms/packages/core/modal/component/persistent-modal-dialog.element.d.ts

@@ -0,0 +1,16 @@
+import { UUIModalDialogElement } from '../../../../external/uui/index.js';
+/**
+ * A modal dialog element that cannot be dismissed by pressing ESC.
+ * Use this when the user must interact with the modal content (e.g. re-authentication on timeout).
+ */
+export declare class UmbPersistentModalDialogElement extends UUIModalDialogElement {
+    #private;
+    protected _openModal(): void;
+    forceClose(): void;
+}
+export default UmbPersistentModalDialogElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-persistent-modal-dialog': UmbPersistentModalDialogElement;
+    }
+}