From c6aafc0706cee675d72c51a6581f07199b4b380f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 6 Oct 2025 15:51:03 +0200
Subject: [PATCH 1/4] enable parsing a custom expand symbol render method

---
 .../lib/uui-menu-item.element.ts              | 16 +++++++---
 .../uui-menu-item/lib/uui-menu-item.story.ts  | 29 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index eb7958d00..51099c395 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -6,7 +6,7 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -122,6 +122,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   @property({ type: String, attribute: 'caret-label' })
   public caretLabel = 'Reveal the underlying items';
 
+  /**
+   * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.
+   */
+  @property({ attribute: false })
+  public renderExpandSymbol?: () => Element | TemplateResult<1>;
+
   @state()
   private iconSlotHasContent = false;
 
@@ -222,9 +228,11 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
               id="caret-button"
               aria-label=${this.caretLabel}
               @click=${this._onCaretClicked}>
-              <uui-symbol-expand
-                aria-hidden="true"
-                ?open=${this.showChildren}></uui-symbol-expand>
+              ${this.renderExpandSymbol
+                ? this.renderExpandSymbol()
+                : html` <uui-symbol-expand
+                    aria-hidden="true"
+                    ?open=${this.showChildren}></uui-symbol-expand>`}
             </button>`
           : ''}
         ${this.href && this.selectOnly !== true && this.selectable !== true
diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts
index e4f81004f..762300d4a 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.story.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts
@@ -126,6 +126,35 @@ export const Nested: Story = {
   },
 };
 
+export const CustomExpandSymbol: Story = {
+  render: args => html`
+    ${labelNames.map(
+      (name: string) =>
+        html` <uui-menu-item
+          label="${name}"
+          .caretLabel="${args.caretLabel}"
+          .renderExpandSymbol=${() => {
+            return html`<uui-icon name="favorite"></uui-icon>`;
+          }}
+          has-children>
+          ${renderItems()}
+        </uui-menu-item>`,
+    )}
+  `,
+  parameters: {
+    docs: {
+      source: {
+        code: html`
+          <uui-menu-item label="Menu Item 1" has-children>
+            <uui-menu-item label="Nested Menu Item 1"></uui-menu-item>
+            <uui-menu-item label="Nested Menu Item 2"></uui-menu-item>
+          </uui-menu-item>
+        `.strings,
+      },
+    },
+  },
+};
+
 export const Active: Story = {
   render: () => {
     const [activeIndex, setActiveIndex] = useState<number>(1);

From ff0e56f507c52b2927f6e826dbcdc57533912941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 6 Oct 2025 15:52:47 +0200
Subject: [PATCH 2/4] fix docs

---
 packages/uui-menu-item/lib/uui-menu-item.story.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts
index 762300d4a..44944cb83 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.story.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts
@@ -145,7 +145,12 @@ export const CustomExpandSymbol: Story = {
     docs: {
       source: {
         code: html`
-          <uui-menu-item label="Menu Item 1" has-children>
+          <uui-menu-item
+            label="Menu Item 1"
+            has-children
+            .renderExpandSymbol=${() => {
+              return html`<uui-icon name="favorite"></uui-icon>`;
+            }}>
             <uui-menu-item label="Nested Menu Item 1"></uui-menu-item>
             <uui-menu-item label="Nested Menu Item 2"></uui-menu-item>
           </uui-menu-item>

From 6a2ec4e53222a28b4fdece94fba65d00c115fe76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 6 Oct 2025 18:24:09 +0200
Subject: [PATCH 3/4] supprt undefined as return of renderExpandSymbol

---
 .../lib/uui-menu-item.element.ts              | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index 683c9cfbb..bcc042dae 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -126,7 +126,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
    * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.
    */
   @property({ attribute: false })
-  public renderExpandSymbol?: () => Element | TemplateResult<1>;
+  public renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;
 
   @state()
   private iconSlotHasContent = false;
@@ -229,11 +229,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
               id="caret-button"
               aria-label=${this.caretLabel}
               @click=${this._onCaretClicked}>
-              ${this.renderExpandSymbol
-                ? this.renderExpandSymbol()
-                : html` <uui-symbol-expand
-                    aria-hidden="true"
-                    ?open=${this.showChildren}></uui-symbol-expand>`}
+              ${this.#renderExpandSymbol()}
             </button>`
           : ''}
         ${this.href && this.selectOnly !== true && this.selectable !== true
@@ -249,6 +245,18 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     `;
   }
 
+  #renderExpandSymbol() {
+    if (this.renderExpandSymbol) {
+      const result = this.renderExpandSymbol();
+      if (result) {
+        return result;
+      }
+    }
+
+    return html`<uui-symbol-expand
+      .direction=${this.showChildren ? 'up' : 'down'}></uui-symbol-expand>`;
+  }
+
   static styles = [
     css`
       :host {

From ac7ebf9fe3577f751a75119286a6fe4913e4d285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 6 Oct 2025 18:55:08 +0200
Subject: [PATCH 4/4] fix expand symbol

---
 packages/uui-menu-item/lib/uui-menu-item.element.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index bcc042dae..a3ed89ffd 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -254,7 +254,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     }
 
     return html`<uui-symbol-expand
-      .direction=${this.showChildren ? 'up' : 'down'}></uui-symbol-expand>`;
+      aria-hidden="true"
+      ?open=${this.showChildren}></uui-symbol-expand>`;
   }
 
   static styles = [