@umbraco-cms/backoffice 17.3.3 → 17.4.0-rc

package/dist-cms/packages/tiptap/extensions/media-picker/media-picker.tiptap-toolbar-api.js

@@ -1,6 +1,6 @@
 import { NodeSelection } from '../../externals.js';
 import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
-import { getGuidFromUdi, imageSize } from '../../../core/utils/index.js';
+import { getGuidFromUdi, splitStringToArray } from '../../../core/utils/index.js';
 import { ImageCropModeModel } from '../../../core/backend-api/index.js';
 import { UmbImagingRepository } from '../../../media/imaging/index.js';
 import { UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../../media/media/index.js';
@@ -15,6 +15,9 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
         const maxImageSize = parseInt(this.configuration?.getValueByAlias('maxImageSize') ?? '', 10);
         return isNaN(maxImageSize) ? 500 : maxImageSize;
     }
+    get #allowedMediaTypeIds() {
+        return splitStringToArray(this.configuration?.getValueByAlias('allowedMediaTypes'));
+    }
     constructor(host) {
         super(host);
         this.#imagingRepository = new UmbImagingRepository(this);
@@ -31,17 +34,28 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
         return editor?.isActive('image') === true || editor?.isActive('figure') === true;
     }
     async execute(editor) {
-        const currentTarget = editor.getAttributes('image');
-        const currentMediaUdi = this.#extractMediaUdi(currentTarget);
-        const currentAltText = currentTarget?.alt;
-        const currentCaption = this.#extractCaption(editor.state.selection);
-        await this.#updateImageWithMetadata(editor, currentMediaUdi, currentAltText, currentCaption);
-    }
-    async #updateImageWithMetadata(editor, currentMediaUdi, currentAltText, currentCaption) {
-        const mediaGuid = await this.#getMediaGuid(currentMediaUdi);
+        let currentTarget = editor.getAttributes('image');
+        let currentMediaUdi = this.#extractMediaUdi(currentTarget);
+        let currentCaption;
+        // If no image found directly, check if cursor is inside a figure (e.g. in figcaption)
+        if (!currentMediaUdi) {
+            const figureData = this.#extractFigureImageData(editor);
+            if (figureData) {
+                currentTarget = figureData.imageAttrs;
+                currentMediaUdi = this.#extractMediaUdi(currentTarget);
+                currentCaption = figureData.caption;
+                // Select the figure so insertContent replaces it instead of inserting at cursor
+                editor.commands.setNodeSelection(figureData.pos);
+            }
+        }
+        else {
+            currentCaption = this.#extractCaption(editor.state.selection);
+        }
+        // If editing existing image, use its UDI; otherwise open media picker
+        const mediaGuid = currentMediaUdi ?? (await this.#openMediaPicker());
         if (!mediaGuid)
             return;
-        const media = await this.#showMediaCaptionAltText(mediaGuid, currentAltText, currentCaption);
+        const media = await this.#showMediaCaptionAltText(mediaGuid, currentTarget?.alt, currentCaption, currentTarget?.width ? parseInt(currentTarget.width, 10) : undefined, currentTarget?.height ? parseInt(currentTarget.height, 10) : undefined);
         if (!media)
             return;
         this.#insertInEditor(editor, mediaGuid, media);
@@ -54,81 +68,81 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
             return undefined;
         if (selection.node.type.name !== 'figure')
             return undefined;
-        return this.#findFigcaptionText(selection.node);
-    }
-    #findFigcaptionText(figureNode) {
         let caption;
-        figureNode.descendants((child) => {
+        selection.node.descendants((child) => {
             if (child.type.name === 'figcaption') {
                 caption = child.textContent || undefined;
-                return false; // Stop searching
+                return false;
             }
-            return true; // Continue searching
+            return true;
         });
         return caption;
     }
-    async #getMediaGuid(currentMediaUdi) {
-        if (currentMediaUdi) {
-            // Image already exists, go directly to edit alt text/caption
-            return currentMediaUdi;
-        }
-        // No image selected, open media picker
-        const selection = await this.#openMediaPicker();
-        if (!selection?.length)
-            return undefined;
-        const selectedGuid = selection[0];
-        if (!selectedGuid) {
-            throw new Error('No media selected');
+    #extractFigureImageData(editor) {
+        const { $from } = editor.state.selection;
+        for (let depth = $from.depth; depth >= 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === 'figure') {
+                let imageAttrs = {};
+                let caption;
+                node.descendants((child) => {
+                    if (child.type.name === 'image') {
+                        imageAttrs = { ...child.attrs };
+                        return false;
+                    }
+                    if (child.type.name === 'figcaption') {
+                        caption = child.textContent || undefined;
+                        return false;
+                    }
+                    return true;
+                });
+                if (imageAttrs['data-udi']) {
+                    return { imageAttrs, caption, pos: $from.before(depth) };
+                }
+            }
         }
-        return selectedGuid;
+        return undefined;
     }
     async #openMediaPicker(currentMediaUdi) {
+        const allowedIds = this.#allowedMediaTypeIds;
         const modalHandler = this.#modalManager?.open(this, UMB_MEDIA_PICKER_MODAL, {
             data: {
                 multiple: false,
-                //startNodeIsVirtual,
+                pickableFilter: allowedIds.length ? (item) => allowedIds.includes(item.mediaType.unique) : undefined,
             },
             value: {
                 selection: currentMediaUdi ? [currentMediaUdi] : [],
             },
         });
         if (!modalHandler)
-            return;
+            return undefined;
         const { selection } = await modalHandler.onSubmit().catch(() => ({ selection: undefined }));
-        return selection;
+        return selection?.[0] ?? undefined;
     }
-    async #showMediaCaptionAltText(mediaUnique, altText, caption) {
+    async #showMediaCaptionAltText(mediaUnique, altText, caption, width, height) {
         const modalHandler = this.#modalManager?.open(this, UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, {
-            data: { mediaUnique },
-            value: {
-                url: '',
-                altText,
-                caption,
-            },
+            data: { mediaUnique, maxImageSize: this.maxImageSize },
+            value: { url: '', altText, caption, width, height },
+            modal: { size: 'medium' }, // Override default sidebar size for better UX
         });
-        const mediaData = await modalHandler?.onSubmit().catch(() => null);
-        return mediaData;
+        return modalHandler?.onSubmit().catch(() => undefined);
     }
     async #insertInEditor(editor, mediaUnique, media) {
         if (!media?.url)
             return;
-        const maxImageSize = this.maxImageSize;
-        // Get the resized image URL
+        const width = media.width || this.maxImageSize;
+        const height = media.height || this.maxImageSize;
         const { data } = await this.#imagingRepository.requestResizedItems([mediaUnique], {
-            width: maxImageSize,
-            height: maxImageSize,
+            width,
+            height,
             mode: ImageCropModeModel.MAX,
         });
         if (!data?.length || !data[0]?.url) {
             console.error('No data returned from imaging repository');
             return;
         }
-        // Set the media URL to the first item in the data array
-        const src = data[0].url;
-        // Fetch the actual image dimensions
-        const { width, height } = await imageSize(src);
         const img = {
-            src,
+            src: data[0].url,
             alt: media.altText,
             'data-udi': `umb://media/${mediaUnique.replace(/-/g, '')}`,
             width: width.toString(),
@@ -138,24 +152,8 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
             return editor.commands.insertContent({
                 type: 'figure',
                 content: [
-                    {
-                        type: 'paragraph',
-                        content: [
-                            {
-                                type: 'image',
-                                attrs: img,
-                            },
-                        ],
-                    },
-                    {
-                        type: 'figcaption',
-                        content: [
-                            {
-                                type: 'text',
-                                text: media.caption,
-                            },
-                        ],
-                    },
+                    { type: 'paragraph', content: [{ type: 'image', attrs: img }] },
+                    { type: 'figcaption', content: [{ type: 'text', text: media.caption }] },
                 ],
             });
         }

package/dist-cms/packages/tiptap/extensions/media-upload/media-upload.tiptap-api.js

@@ -1,10 +1,13 @@
 import { Extension } from '../../externals.js';
 import { UmbTiptapExtensionApiBase } from '../tiptap-extension-api-base.js';
-import { imageSize } from '../../../core/utils/index.js';
+import { getFileExtension, imageSize, splitStringToArray } from '../../../core/utils/index.js';
 import { TemporaryFileStatus, UmbTemporaryFileManager } from '../../../core/temporary-file/index.js';
 import { UmbId } from '../../../core/id/index.js';
 import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
 import { UMB_NOTIFICATION_CONTEXT } from '../../../core/notification/index.js';
+import { UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL } from '../../../media/media/index.js';
+import { umbOpenModal } from '../../../core/modal/index.js';
+import { UmbMediaTypeStructureRepository } from '../../../media/media-types/index.js';
 export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtensionApiBase {
     #configuration;
     /**
@@ -18,10 +21,22 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
      * @returns {Array<string>} The allowed mime types for uploads
      */
     get allowedFileTypes() {
-        return (this.#configuration?.getValueByAlias('allowedFileTypes') ?? ['image/jpeg', 'image/png', 'image/gif']);
+        return (this.#configuration?.getValueByAlias('allowedFileTypes') ?? [
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            'image/svg+xml',
+            'image/avif',
+        ]);
+    }
+    get #allowedMediaTypeIds() {
+        return splitStringToArray(this.#configuration?.getValueByAlias('allowedMediaTypes'));
     }
     #manager;
     #localize;
+    #mediaTypeStructure;
+    #mediaTypeCache;
     #notificationContext;
     constructor(host) {
         super(host);
@@ -32,6 +47,8 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
         this.maxWidth = this.maxImageSize;
         this.#manager = new UmbTemporaryFileManager(this);
         this.#localize = new UmbLocalizationController(this);
+        this.#mediaTypeStructure = new UmbMediaTypeStructureRepository(this);
+        this.#mediaTypeCache = new Map();
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
             this.#notificationContext = instance;
         });
@@ -79,22 +96,23 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
      * @param {Editor} editor The editor to insert the images into.
      */
     async #uploadTemporaryFile(files, editor) {
-        const filteredFiles = this.#filterFiles(files);
-        const fileModels = filteredFiles.map((file) => this.#mapFileToTemporaryFile(file));
-        this.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true, detail: fileModels }));
-        const uploads = await this.#manager.upload(fileModels);
-        const maxImageSize = this.maxImageSize;
-        uploads.forEach(async (upload) => {
-            if (upload.status !== TemporaryFileStatus.SUCCESS) {
-                this.#notificationContext?.peek('danger', {
-                    data: {
-                        headline: upload.file.name,
-                        message: this.#localize.term('errors_dissallowedMediaType'),
-                    },
-                });
-                return;
+        const { allowed, rejected } = this.#filterFiles(files);
+        for (const file of rejected) {
+            this.#showDisallowedNotification(file.name);
+        }
+        for (const file of allowed) {
+            const isAllowed = await this.#validateMediaType(file);
+            if (!isAllowed)
+                continue;
+            const fileModel = this.#mapFileToTemporaryFile(file);
+            this.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true, detail: [fileModel] }));
+            const uploads = await this.#manager.upload([fileModel]);
+            const upload = uploads[0];
+            if (!upload || upload.status !== TemporaryFileStatus.SUCCESS) {
+                continue;
             }
             const blobUrl = URL.createObjectURL(upload.file);
+            const maxImageSize = this.maxImageSize;
             // Get the image dimensions - this essentially simulates what the server would do
             // when it resizes the image. The server will return the resized image URL.
             // We need to use the blob URL here, as the server will not be able to access the local file.
@@ -109,8 +127,71 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
                 'data-tmpimg': upload.temporaryUnique,
             })
                 .run();
+            this.dispatchEvent(new CustomEvent('rte.file.uploaded', { composed: true, bubbles: true, detail: [upload] }));
+        }
+    }
+    /**
+     * Validates a file against the allowed media types configuration.
+     * Uses the media type structure repository to check which media types support the file extension,
+     * then intersects with the configured allowedMediaTypes. Shows a type picker modal when ambiguous.
+     * @param {File} file The file to validate.
+     * @returns {boolean} Whether the file is allowed.
+     */
+    async #validateMediaType(file) {
+        const allowedIds = this.#allowedMediaTypeIds;
+        if (!allowedIds.length)
+            return true;
+        const extension = getFileExtension(file.name)?.toLowerCase();
+        if (!extension) {
+            this.#showDisallowedNotification(file.name);
+            return false;
+        }
+        const availableMediaTypes = await this.#getAvailableMediaTypesOf(extension);
+        if (!availableMediaTypes.length) {
+            this.#showDisallowedNotification(file.name);
+            return false;
+        }
+        // Intersect available media types with the configured allowed types
+        const options = availableMediaTypes.filter((type) => type.unique && allowedIds.includes(type.unique));
+        if (!options.length) {
+            this.#showDisallowedNotification(file.name);
+            return false;
+        }
+        if (options.length === 1)
+            return true;
+        // Multiple matches — prefer specific extension matches over fallbacks
+        const specificMatches = options.filter((x) => x.matchedFileExtension === true);
+        if (specificMatches.length === 1)
+            return true;
+        if (specificMatches.length > 1) {
+            // Multiple specific matches — let the user pick
+            return await this.#showMediaTypePicker(specificMatches);
+        }
+        // All fallbacks — auto-select
+        return true;
+    }
+    async #getAvailableMediaTypesOf(extension) {
+        const cached = this.#mediaTypeCache.get(extension);
+        if (cached)
+            return cached;
+        try {
+            const result = await this.#mediaTypeStructure.requestMediaTypesOf({ fileExtension: extension });
+            this.#mediaTypeCache.set(extension, result);
+            return result;
+        }
+        catch {
+            return [];
+        }
+    }
+    async #showMediaTypePicker(options) {
+        return umbOpenModal(this, UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL, { data: { options } }).then(() => true, () => false);
+    }
+    #showDisallowedNotification(fileName) {
+        this.#notificationContext?.peek('warning', {
+            data: {
+                message: `${this.#localize.term('media_disallowedFileType')} (${fileName})`,
+            },
         });
-        this.dispatchEvent(new CustomEvent('rte.file.uploaded', { composed: true, bubbles: true, detail: uploads }));
     }
     #mapFileToTemporaryFile(file) {
         return {
@@ -119,6 +200,11 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
         };
     }
     #filterFiles(files) {
-        return Array.from(files).filter((file) => this.allowedFileTypes.includes(file.type));
+        const allowed = [];
+        const rejected = [];
+        for (const file of files) {
+            (this.allowedFileTypes.includes(file.type) ? allowed : rejected).push(file);
+        }
+        return { allowed, rejected };
     }
 }

package/dist-cms/packages/tiptap/package.json

@@ -6,15 +6,15 @@
         "build": "vite build"
     },
     "dependencies": {
-        "@tiptap/core": "3.16.0",
-        "@tiptap/extension-image": "3.16.0",
-        "@tiptap/extension-subscript": "3.16.0",
-        "@tiptap/extension-superscript": "3.16.0",
-        "@tiptap/extension-table": "3.16.0",
-        "@tiptap/extension-text-align": "3.16.0",
-        "@tiptap/extension-text-style": "3.16.0",
-        "@tiptap/starter-kit": "3.16.0",
-        "@tiptap/extensions": "3.16.0",
-        "@tiptap/pm": "3.16.0"
+        "@tiptap/core": "3.22.3",
+        "@tiptap/extension-image": "3.22.3",
+        "@tiptap/extension-subscript": "3.22.3",
+        "@tiptap/extension-superscript": "3.22.3",
+        "@tiptap/extension-table": "3.22.3",
+        "@tiptap/extension-text-align": "3.22.3",
+        "@tiptap/extension-text-style": "3.22.3",
+        "@tiptap/starter-kit": "3.22.3",
+        "@tiptap/extensions": "3.22.3",
+        "@tiptap/pm": "3.22.3"
     }
 }

package/dist-cms/packages/tiptap/property-editors/tiptap-rte/manifests.js

@@ -61,6 +61,13 @@ _Drag and drop the available actions onto the statusbar areas._`,
                         config: [{ alias: 'min', value: 0 }],
                         weight: 40,
                     },
+                    {
+                        alias: 'createModalSize',
+                        label: '#blockEditor_labelCreateModalSize',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.OverlaySize',
+                        config: [{ alias: 'defaultOptionLabel', value: 'Auto' }],
+                        weight: 55,
+                    },
                     {
                         alias: 'overlaySize',
                         label: '#rte_config_overlaySize',

package/dist-cms/packages/ufm/components/ufm-render/ufm-render.element.d.ts

@@ -7,7 +7,9 @@ export declare class UmbUfmRenderElement extends UmbLitElement {
     get value(): string | unknown | undefined;
     constructor();
     toString(): string;
-    render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/until.js").UntilDirective>;
+    render(): import("lit-html/directive.js").DirectiveResult<{
+        new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/until.js").UntilDirective<Promise<import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective> | null>>;
+    }>;
     static styles: import("lit").CSSResult[];
 }
 export { UmbUfmRenderElement as element };

package/dist-cms/packages/umbraco-news/components/umb-news-card.element.js

@@ -24,7 +24,7 @@ let UmbNewsCardElement = class UmbNewsCardElement extends UmbLitElement {
         const showImage = this.priority <= 2 && !!this.item.imageUrl;
         const content = html `
 			${when(showImage, () => this.item.imageUrl
-            ? html `<img class="card-img" src=${this.item.imageUrl} alt=${this.item.imageAltText ?? ''} />`
+            ? html `<img class="card-img" src=${this.item.imageUrl} alt=${this.item.imageAltText ?? ''} decoding="async" />`
             : html `<div class="card-img placeholder" aria-hidden="true"></div>`, () => nothing)}
 			<div class="card-body uui-text">
 				${this.#renderHeading(this.priority, this.item.header)}

package/dist-cms/packages/user/change-password/modal/change-password-modal.element.d.ts

@@ -6,6 +6,7 @@ export declare class UmbChangePasswordModalElement extends UmbModalBaseElement<U
     private _confirmPasswordInput?;
     private _headline;
     private _isCurrentUser;
+    private _passwordConfiguration?;
     constructor();
     protected firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/user/change-password/modal/change-password-modal.element.js

@@ -7,10 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, customElement, html, query, state, when } from '../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
-import { UmbUserItemRepository } from '../../user/index.js';
+import { UmbUserItemRepository, UmbUserConfigRepository } from '../../user/index.js';
 import { UMB_CURRENT_USER_CONTEXT } from '../../current-user/index.js';
 let UmbChangePasswordModalElement = class UmbChangePasswordModalElement extends UmbModalBaseElement {
+    get #newPasswordValue() {
+        return this._newPasswordInput?.value ?? '';
+    }
+    // Extracted from repeated validator pattern to reduce duplication across password policy rules.
+    #addNewPasswordValidator(messageKey, configKey, pattern) {
+        this._newPasswordInput?.addValidator('customError', () => this.localize.term(messageKey), () => {
+            if (!this._passwordConfiguration?.[configKey])
+                return false;
+            return this.#newPasswordValue.length > 0 && !pattern.test(this.#newPasswordValue);
+        });
+    }
     #userItemRepository;
+    #userConfigRepository;
     #currentUserContext;
     #onClose() {
         this.modalContext?.reject();
@@ -34,10 +46,20 @@ let UmbChangePasswordModalElement = class UmbChangePasswordModalElement extends
         this._headline = this.localize.term('general_changePassword');
         this._isCurrentUser = false;
         this.#userItemRepository = new UmbUserItemRepository(this);
+        this.#userConfigRepository = new UmbUserConfigRepository(this);
         this.consumeContext(UMB_CURRENT_USER_CONTEXT, (instance) => {
             this.#currentUserContext = instance;
             this.#setIsCurrentUser();
         });
+        this.#loadPasswordConfiguration();
+    }
+    async #loadPasswordConfiguration() {
+        await this.#userConfigRepository.initialized;
+        if (!this.isConnected)
+            return;
+        this.observe(this.#userConfigRepository.part('passwordConfiguration'), (passwordConfig) => {
+            this._passwordConfiguration = passwordConfig;
+        });
     }
     async #setIsCurrentUser() {
         if (!this.#currentUserContext || !this.data?.user.unique) {
@@ -48,6 +70,19 @@ let UmbChangePasswordModalElement = class UmbChangePasswordModalElement extends
     }
     async firstUpdated() {
         this._confirmPasswordInput?.addValidator('customError', () => this.localize.term('user_passwordMismatch'), () => this._confirmPasswordInput?.value !== this._newPasswordInput?.value);
+        this._newPasswordInput?.addValidator('customError', () => this.localize.term('user_newPasswordFormatLengthTip', [
+            this._passwordConfiguration?.minimumPasswordLength ?? 0,
+        ]), () => {
+            const config = this._passwordConfiguration;
+            if (!config || config.minimumPasswordLength <= 0)
+                return false;
+            const password = this.#newPasswordValue;
+            return password.length > 0 && password.length < config.minimumPasswordLength;
+        });
+        this.#addNewPasswordValidator('user_passwordRequiresDigit', 'requireDigit', /\d/);
+        this.#addNewPasswordValidator('user_passwordRequiresLower', 'requireLowercase', /[a-z]/);
+        this.#addNewPasswordValidator('user_passwordRequiresUpper', 'requireUppercase', /[A-Z]/);
+        this.#addNewPasswordValidator('user_passwordRequiresNonAlphanumeric', 'requireNonLetterOrDigit', /[^a-zA-Z0-9]/);
         if (!this.data?.user.unique)
             return;
         const { data } = await this.#userItemRepository.requestItems([this.data.user.unique]);
@@ -130,6 +165,9 @@ __decorate([
 __decorate([
     state()
 ], UmbChangePasswordModalElement.prototype, "_isCurrentUser", void 0);
+__decorate([
+    state()
+], UmbChangePasswordModalElement.prototype, "_passwordConfiguration", void 0);
 UmbChangePasswordModalElement = __decorate([
     customElement('umb-change-password-modal')
 ], UmbChangePasswordModalElement);

package/dist-cms/packages/user/current-user/current-user-header-app.element.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_CURRENT_USER_MODAL } from './modals/current-user/current-user-modal.token.js';
 import { UMB_CURRENT_USER_CONTEXT } from './constants.js';
+import { getInitials } from './utils/index.js';
 import { css, html, customElement, state } from '../../../external/lit/index.js';
 import { umbOpenModal } from '../../core/modal/index.js';
 import { UmbHeaderAppButtonElement } from '../../core/components/index.js';
@@ -29,11 +30,15 @@ let UmbCurrentUserHeaderAppElement = class UmbCurrentUserHeaderAppElement extend
         await umbOpenModal(this, UMB_CURRENT_USER_MODAL).catch(() => undefined);
     }
     render() {
+        const userInitials = this._currentUser?.name ? getInitials(this._currentUser.name) : '';
+        const accessibleLabel = this._currentUser?.name
+            ? this.localize.term('visuallyHiddenTexts_profileOptions', this._currentUser.name, userInitials)
+            : this.localize.term('visuallyHiddenTexts_profileOptionsDefault');
         return html `
 			<uui-button
 				@click=${this.#handleUserClick}
 				look="primary"
-				label=${this.localize.term('visuallyHiddenTexts_profileOptions')}
+				label=${accessibleLabel}
 				compact>
 				<umb-user-avatar
 					id="Avatar"

package/dist-cms/packages/user/current-user/external-login/modals/external-login-modal.element.js

@@ -121,7 +121,7 @@ let UmbCurrentUserExternalLoginModalElement = class UmbCurrentUserExternalLoginM
             await umbConfirmModal(this, {
                 headline: this.localize.term('defaultdialogs_linkYour', providerDisplayName),
                 content: this.localize.term('defaultdialogs_linkYourConfirm', providerDisplayName),
-                confirmLabel: this.localize.term('general_continue'),
+                confirmLabel: '#general_continue',
                 color: 'positive',
             });
             const authContext = await this.getContext(UMB_AUTH_CONTEXT);
@@ -150,7 +150,7 @@ let UmbCurrentUserExternalLoginModalElement = class UmbCurrentUserExternalLoginM
             await umbConfirmModal(this, {
                 headline: this.localize.term('defaultdialogs_unLinkYour', providerDisplayName),
                 content: this.localize.term('defaultdialogs_unLinkYourConfirm', providerDisplayName),
-                confirmLabel: this.localize.term('general_continue'),
+                confirmLabel: '#general_continue',
                 color: 'danger',
             });
             const authContext = await this.getContext(UMB_AUTH_CONTEXT);

package/dist-cms/packages/user/current-user/repository/current-user-config.store.js

@@ -2,7 +2,7 @@ import { UMB_CURRENT_USER_CONFIG_STORE_CONTEXT } from './current-user-config.sto
 import { UmbStoreObjectBase } from '../../../core/store/index.js';
 export class UmbCurrentUserConfigStore extends UmbStoreObjectBase {
     constructor(host) {
-        super(host, UMB_CURRENT_USER_CONFIG_STORE_CONTEXT.toString());
+        super(host, UMB_CURRENT_USER_CONFIG_STORE_CONTEXT);
     }
 }
 export default UmbCurrentUserConfigStore;

package/dist-cms/packages/user/current-user/utils/get-initials.function.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Extracts the first and last initial from a user's name.
+ * Replicates logic from UUI avatar component to ensure consistency.
+ * @param name - The user's full name
+ * @returns The initials in uppercase
+ *
+ * @note This function duplicates similar logic from the UUI avatar component.
+ * It filters out parts beginning with special characters or punctuation to handle
+ * cases like "John Doe (Admin)" correctly, resulting in "JD" instead of "J(".
+ */
+export declare function getInitials(name: string): string;

package/dist-cms/packages/user/current-user/utils/get-initials.function.js

@@ -0,0 +1,33 @@
+/**
+ * Extracts the first and last initial from a user's name.
+ * Replicates logic from UUI avatar component to ensure consistency.
+ * @param name - The user's full name
+ * @returns The initials in uppercase
+ *
+ * @note This function duplicates similar logic from the UUI avatar component.
+ * It filters out parts beginning with special characters or punctuation to handle
+ * cases like "John Doe (Admin)" correctly, resulting in "JD" instead of "J(".
+ */
+// TODO: When the utility to extract initials is exposed from the UUI library, use it and deprecate this function.
+export function getInitials(name) {
+    let initials = '';
+    if (!name) {
+        return initials;
+    }
+    // Split by whitespace and filter out parts that start with special characters
+    // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)
+    // while keeping parts that start with letters or numbers
+    const nameParts = name
+        .split(/\s+/)
+        .filter(part => part.length > 0 && !/^[^\p{L}\p{N}]/u.test(part));
+    if (nameParts.length === 0) {
+        return initials;
+    }
+    // Take first character of the first valid name part
+    initials = nameParts[0].charAt(0);
+    // If there's more than one valid name part, add the first character of the last valid name part
+    if (nameParts.length > 1) {
+        initials += nameParts.at(-1).charAt(0);
+    }
+    return initials.toUpperCase();
+}

package/dist-cms/packages/user/current-user/utils/index.d.ts

@@ -1,2 +1,3 @@
+export * from './get-initials.function.js';
 export * from './is-current-user-an-admin.function.js';
 export * from './is-current-user.function.js';

package/dist-cms/packages/user/current-user/utils/index.js

@@ -1,2 +1,3 @@
+export * from './get-initials.function.js';
 export * from './is-current-user-an-admin.function.js';
 export * from './is-current-user.function.js';