From 96677992b21cebb3d5f06c9fb683ed53dbab50a8 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 27 Nov 2023 21:11:58 +0100
Subject: [PATCH 1/2] wait for close animation

---
 .../backoffice-modal-container.element.ts                    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
index 5002ac21bb..1306f34051 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
@@ -48,10 +48,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			const modalElement = new UmbModalElement();
 			modalElement.modalContext = modal;
 
-			// TODO: We need to change this to the close-end event, when it is added to UUI again.
-			// This solution solves the memory leak issue where the modal contexts where not removed from the manager when they are closed.
-			// It breaks the modal animation though, so we need to wait for the close-end so we are sure the animation is done.
-			modalElement.element?.addEventListener('close', () => this._modalManager?.remove(modal.key));
+			modalElement.element?.addEventListener('close-end', () => this._modalManager?.remove(modal.key));
 
 			this._modalElementMap.set(modal.key, modalElement);
 		});

From 83450eb661c305c90a18ddcade6971a6f3eec70b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 28 Nov 2023 15:39:27 +0100
Subject: [PATCH 2/2] use correct attr

---
 .../permissions/permissions-modal.element.ts       |  4 ++--
 .../input-user-group/user-group-input.element.ts   | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
index 52723230e7..cc30ae0bef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
@@ -1,7 +1,7 @@
 import { UmbDocumentPermissionRepository } from '../../user-permissions/index.js';
 import { UmbDocumentRepository } from '../../repository/index.js';
 import { UmbUserGroupRepository } from '@umbraco-cms/backoffice/user-group';
-import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UMB_ENTITY_USER_PERMISSION_MODAL,
@@ -137,7 +137,7 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 									.userPermissionAliases=${userGroup.permissions}
 									@open=${() => this.#openUserPermissionsModal(userGroup.id)}
 									border>
-									<uui-icon slot="icon" .icon=${userGroup.icon}></uui-icon>
+									${userGroup.icon ? html`<uui-icon slot="icon" name=${userGroup.icon}></uui-icon>` : nothing}
 								</umb-user-group-ref>`,
 						)}
 					</uui-ref-list>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
index 8cf95fadf3..50aceb7305 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
@@ -85,8 +85,16 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
 			() => !!this.max && this.#pickerContext.getSelection().length > this.max,
 		);
 
-		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')), 'umbUserGroupInputSelectionObserver');
-		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), 'umbUserGroupInputItemsObserver');
+		this.observe(
+			this.#pickerContext.selection,
+			(selection) => (super.value = selection.join(',')),
+			'umbUserGroupInputSelectionObserver',
+		);
+		this.observe(
+			this.#pickerContext.selectedItems,
+			(selectedItems) => (this._items = selectedItems),
+			'umbUserGroupInputItemsObserver',
+		);
 	}
 
 	protected getFormElement() {
@@ -106,7 +114,7 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
 		if (!item.id) return;
 		return html`
 			<umb-user-group-ref name="${ifDefined(item.name)}">
-				${item.icon ? html`<uui-icon slot="icon" icon=${item.icon}></uui-icon>` : nothing}
+				${item.icon ? html`<uui-icon slot="icon" name=${item.icon}></uui-icon>` : nothing}
 
 				<uui-action-bar slot="actions">
 					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.id!)} label="Remove ${item.name}"