From 643e66d1dfd91194476b801528e493573efe9d81 Mon Sep 17 00:00:00 2001
From: Dena DeBry <denas@stanford.edu>
Date: Thu, 19 Feb 2026 22:14:37 -0700
Subject: [PATCH 1/3] Refactor MenuItem to improve submenu rendering logic

Update MenuItem component to conditionally render caret and submenu based on child items instead of expanded prop.
---
 decoupled-menu/src/main-menu.island.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/decoupled-menu/src/main-menu.island.tsx b/decoupled-menu/src/main-menu.island.tsx
index e8ba563..2883bb4 100644
--- a/decoupled-menu/src/main-menu.island.tsx
+++ b/decoupled-menu/src/main-menu.island.tsx
@@ -349,6 +349,12 @@ const ListItem = styled.li<{ level?: number }>`
   }
 `
 
+/**
+ * Renders a single menu item (link and optional submenu).
+ * The caret and submenu are shown only when this item has children (items.length > 0).
+ * The `expanded` prop is accepted for API compatibility but is not used for display,
+ * consistent with our current documentation, which ignores this Drupal setting. 
+ */
 const MenuItem = ({id, title, url, items, expanded, level = 0}: {
   title: string,
   url: string,
@@ -403,7 +409,8 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: {
           <NoLink>{title}</NoLink>
         }
 
-        {(items && expanded) &&
+        {/* Show caret only when this item has child menu items (not based on expanded). */}
+        {items && items.length > 0 &&
           <>
             <Button
               ref={buttonRef}
@@ -422,7 +429,8 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: {
         }
       </MenuItemContainer>
 
-      {(items && expanded) &&
+      {/* Render submenu only when this item has children; open state is controlled by submenuOpen. */}
+      {items && items.length > 0 &&
         <MenuList open={submenuOpen} level={level}>
 
           {items.map(item =>

From 5ca20569e484334db8214aeef3f48167abe917f1 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@stanford.edu>
Date: Fri, 20 Feb 2026 08:42:24 -0800
Subject: [PATCH 2/3] compile

---
 decoupled-menu/dist/islands/main-menu.island.umd.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/decoupled-menu/dist/islands/main-menu.island.umd.js b/decoupled-menu/dist/islands/main-menu.island.umd.js
index 6acbc59..46ec858 100644
--- a/decoupled-menu/dist/islands/main-menu.island.umd.js
+++ b/decoupled-menu/dist/islands/main-menu.island.umd.js
@@ -239,4 +239,4 @@
   @media (min-width: 1200px) {
     border-bottom: ${e=>0===e.level?"none":"1px solid #d9d9d9"};
   }
-`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&o&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&o&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})()));
\ No newline at end of file
+`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&r.length>0&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&r.length>0&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})()));
\ No newline at end of file

From 19d9eced90ed872eb1161569fabb9f0e490f6f1b Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@stanford.edu>
Date: Fri, 20 Feb 2026 08:45:05 -0800
Subject: [PATCH 3/3] respect expanded

---
 decoupled-menu/dist/islands/main-menu.island.umd.js | 2 +-
 decoupled-menu/src/main-menu.island.tsx             | 7 +++----
 decoupled-menu/src/tools/build-menu-tree.tsx        | 1 +
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/decoupled-menu/dist/islands/main-menu.island.umd.js b/decoupled-menu/dist/islands/main-menu.island.umd.js
index 46ec858..f7f81e5 100644
--- a/decoupled-menu/dist/islands/main-menu.island.umd.js
+++ b/decoupled-menu/dist/islands/main-menu.island.umd.js
@@ -239,4 +239,4 @@
   @media (min-width: 1200px) {
     border-bottom: ${e=>0===e.level?"none":"1px solid #d9d9d9"};
   }
-`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&r.length>0&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&r.length>0&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})()));
\ No newline at end of file
+`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&r.length>0&&o&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&r.length>0&&o&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})()));
\ No newline at end of file
diff --git a/decoupled-menu/src/main-menu.island.tsx b/decoupled-menu/src/main-menu.island.tsx
index 2883bb4..30f6994 100644
--- a/decoupled-menu/src/main-menu.island.tsx
+++ b/decoupled-menu/src/main-menu.island.tsx
@@ -352,10 +352,9 @@ const ListItem = styled.li<{ level?: number }>`
 /**
  * Renders a single menu item (link and optional submenu).
  * The caret and submenu are shown only when this item has children (items.length > 0).
- * The `expanded` prop is accepted for API compatibility but is not used for display,
- * consistent with our current documentation, which ignores this Drupal setting. 
  */
 const MenuItem = ({id, title, url, items, expanded, level = 0}: {
+  id: string
   title: string,
   url: string,
   items?: MenuContentItem[],
@@ -410,7 +409,7 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: {
         }
 
         {/* Show caret only when this item has child menu items (not based on expanded). */}
-        {items && items.length > 0 &&
+        {items && items.length > 0 && expanded &&
           <>
             <Button
               ref={buttonRef}
@@ -430,7 +429,7 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: {
       </MenuItemContainer>
 
       {/* Render submenu only when this item has children; open state is controlled by submenuOpen. */}
-      {items && items.length > 0 &&
+      {items && items.length > 0 && expanded &&
         <MenuList open={submenuOpen} level={level}>
 
           {items.map(item =>
diff --git a/decoupled-menu/src/tools/build-menu-tree.tsx b/decoupled-menu/src/tools/build-menu-tree.tsx
index 601087b..f59277c 100644
--- a/decoupled-menu/src/tools/build-menu-tree.tsx
+++ b/decoupled-menu/src/tools/build-menu-tree.tsx
@@ -5,6 +5,7 @@ export interface MenuContentItem {
   parent: string
   items?: MenuContentItem[]
   weight: number
+  expanded: boolean
 }
 
 export const buildMenuTree = (links: MenuContentItem[], parent = ""): { items?: MenuContentItem[] } => {