From 93eb274d5980d637c13011f6fd80c721c68440ff Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Wed, 12 Aug 2026 08:56:15 -0700
Subject: [PATCH 1/2] feat(evo-menu): replace @item separator with @group
 attribute tag

Adds <@group> to evo-menu and evo-menu-button: each group has its own
selected/selectedChange and nested <@item> tags, with separators
rendered automatically between groups. Top-level items render first as
an implicit group sharing the menu-level selected. selected now also
accepts null (single-select with nothing selected), and default item
values are unique across the whole menu so roving focus works across
groups.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .changeset/hungry-melons-repeat.md            |   5 +
 .../evo-menu-button/examples/groups.marko     |  16 +
 .../evo-menu-button/examples/separator.marko  |  13 -
 .../src/tags/evo-menu-button/index.marko      |   6 +-
 .../evo-menu-button/menu-button.stories.ts    |   9 +-
 .../test/__snapshots__/test.server.ts.snap    | 290 +++++------
 .../tags/evo-menu-button/test/test.server.ts  |   6 +-
 .../tags/evo-menu/examples/controlled.marko   |  25 +
 .../src/tags/evo-menu/examples/groups.marko   |  13 +
 .../tags/evo-menu/examples/separator.marko    |   8 -
 .../evo-marko/src/tags/evo-menu/index.marko   | 111 +++--
 .../src/tags/evo-menu/menu.stories.ts         |  35 +-
 .../test/__snapshots__/test.server.ts.snap    | 471 +++++++++++++++++-
 .../src/tags/evo-menu/test/test.browser.ts    | 135 ++++-
 .../src/tags/evo-menu/test/test.server.ts     |  27 +-
 15 files changed, 915 insertions(+), 255 deletions(-)
 create mode 100644 .changeset/hungry-melons-repeat.md
 create mode 100644 packages/evo-marko/src/tags/evo-menu-button/examples/groups.marko
 delete mode 100644 packages/evo-marko/src/tags/evo-menu-button/examples/separator.marko
 create mode 100644 packages/evo-marko/src/tags/evo-menu/examples/controlled.marko
 create mode 100644 packages/evo-marko/src/tags/evo-menu/examples/groups.marko
 delete mode 100644 packages/evo-marko/src/tags/evo-menu/examples/separator.marko

diff --git a/.changeset/hungry-melons-repeat.md b/.changeset/hungry-melons-repeat.md
new file mode 100644
index 00000000000..b1bd231ed1f
--- /dev/null
+++ b/.changeset/hungry-melons-repeat.md
@@ -0,0 +1,5 @@
+---
+"@evo-web/marko": minor
+---
+
+BREAKING: `<evo-menu>` / `<evo-menu-button>`: replace the `separator` attribute on `<@item>` with a new `<@group>` attribute tag. Each `<@group>` accepts its own `selected`/`selectedChange` and nested `<@item>` tags, and adjacent groups are divided by separators automatically. Top-level `<@item>` tags may be combined with `<@group>` tags and always render first, sharing the menu-level `selected`. `selected` (on the menu or a `<@group>`) now also accepts `null`, meaning single-select with nothing selected yet, whereas omitting `selected` means the items are not selectable.
diff --git a/packages/evo-marko/src/tags/evo-menu-button/examples/groups.marko b/packages/evo-marko/src/tags/evo-menu-button/examples/groups.marko
new file mode 100644
index 00000000000..ea4c0f689e2
--- /dev/null
+++ b/packages/evo-marko/src/tags/evo-menu-button/examples/groups.marko
@@ -0,0 +1,16 @@
+<let/sortSelected="price-low">
+<let/formatSelected=["shipping-free"]>
+<evo-menu-button
+    ...input
+>
+    eBay Menu groups
+    <@group selected:=sortSelected>
+        <@item value="price-low">Price: low to high</@item>
+        <@item value="price-high">Price: high to low</@item>
+    </@group>
+    <@group selected:=formatSelected>
+        <@item value="shipping-free">Free shipping</@item>
+        <@item value="buy-it-now">Buy It Now</@item>
+        <@item value="auction">Auction</@item>
+    </@group>
+</evo-menu-button>
diff --git a/packages/evo-marko/src/tags/evo-menu-button/examples/separator.marko b/packages/evo-marko/src/tags/evo-menu-button/examples/separator.marko
deleted file mode 100644
index 0dfc150cf17..00000000000
--- a/packages/evo-marko/src/tags/evo-menu-button/examples/separator.marko
+++ /dev/null
@@ -1,13 +0,0 @@
-<evo-menu-button
-    ...input
->
-    eBay Menu separator
-    <@item>item 1</@item>
-    <@item>item 2</@item>
-    <@item separator/>
-    <@item>item 3</@item>
-    <@item>item 4</@item>
-    <@item separator/>
-    <@item>item 5</@item>
-    <@item>item 6</@item>
-</evo-menu-button>
diff --git a/packages/evo-marko/src/tags/evo-menu-button/index.marko b/packages/evo-marko/src/tags/evo-menu-button/index.marko
index 750bca1d47f..35c3a155907 100644
--- a/packages/evo-marko/src/tags/evo-menu-button/index.marko
+++ b/packages/evo-marko/src/tags/evo-menu-button/index.marko
@@ -38,6 +38,7 @@ export interface Input<
     disabled,
     variant,
     item: items,
+    group: groups,
     label,
     selected: inputSelected,
     selectedChange,
@@ -75,7 +76,7 @@ export interface Input<
         tagName = FilterChip;
         isSelected = Array.isArray(selected)
             ? selected.length > 0
-            : selected !== -1;
+            : selected != null && selected !== -1;
     } else {
         tagName = Button;
         split = inputSplit;
@@ -156,5 +157,6 @@ export interface Input<
         onClick() {
             if (collapseOnSelect) open = false;
         }
-        item=items/>
+        item=items
+        group=groups/>
 </span>
diff --git a/packages/evo-marko/src/tags/evo-menu-button/menu-button.stories.ts b/packages/evo-marko/src/tags/evo-menu-button/menu-button.stories.ts
index d670185b83e..6d4f2b9cc6a 100644
--- a/packages/evo-marko/src/tags/evo-menu-button/menu-button.stories.ts
+++ b/packages/evo-marko/src/tags/evo-menu-button/menu-button.stories.ts
@@ -10,8 +10,8 @@ import IconTemplate from "./examples/icon-with-text.marko";
 import IconTemplateCode from "./examples/icon-with-text.marko?raw";
 import TypeaheadTemplate from "./examples/typeahead.marko";
 import TypeaheadTemplateCode from "./examples/typeahead.marko?raw";
-import SeparatorTemplate from "./examples/separator.marko";
-import SeparatorTemplateCode from "./examples/separator.marko?raw";
+import GroupsTemplate from "./examples/groups.marko";
+import GroupsTemplateCode from "./examples/groups.marko?raw";
 import PrefixLabelTemplate from "./examples/prefix-label.marko";
 import PrefixLabelTemplateCode from "./examples/prefix-label.marko?raw";
 import FilterTemplate from "./examples/filter.marko";
@@ -143,10 +143,7 @@ export const Default = buildExtensionTemplate(
   DefaultTemplateCode,
 );
 export const IconText = buildExtensionTemplate(IconTemplate, IconTemplateCode);
-export const Separator = buildExtensionTemplate(
-  SeparatorTemplate,
-  SeparatorTemplateCode,
-);
+export const Groups = buildExtensionTemplate(GroupsTemplate, GroupsTemplateCode);
 export const Typeahead = buildExtensionTemplate(
   TypeaheadTemplate,
   TypeaheadTemplateCode,
diff --git a/packages/evo-marko/src/tags/evo-menu-button/test/__snapshots__/test.server.ts.snap b/packages/evo-marko/src/tags/evo-menu-button/test/__snapshots__/test.server.ts.snap
index 92a2c61defb..56a2649a14f 100644
--- a/packages/evo-marko/src/tags/evo-menu-button/test/__snapshots__/test.server.ts.snap
+++ b/packages/evo-marko/src/tags/evo-menu-button/test/__snapshots__/test.server.ts.snap
@@ -42,7 +42,6 @@ exports[`menu-button > renders basic version 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -154,7 +153,6 @@ exports[`menu-button > renders with a badge 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-label="1 item unread"
         class="menu-button__item menu-button__item--badged"
@@ -284,7 +282,6 @@ exports[`menu-button > renders with borderless=true 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -397,7 +394,6 @@ exports[`menu-button > renders with button variant 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -510,7 +506,6 @@ exports[`menu-button > renders with disabled state 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -626,7 +621,6 @@ exports[`menu-button > renders with filter 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="true"
         class="menu-button__item"
@@ -771,7 +765,6 @@ exports[`menu-button > renders with fix-width=true 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -883,7 +876,6 @@ exports[`menu-button > renders with fixed strategy 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -999,7 +991,6 @@ exports[`menu-button > renders with footer 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="false"
         class="menu-button__item"
@@ -1112,7 +1103,7 @@ exports[`menu-button > renders with footer 1`] = `
 </span>"
 `;
 
-exports[`menu-button > renders with icon 1`] = `
+exports[`menu-button > renders with groups 1`] = `
 "<span
   class="menu-button"
 >
@@ -1123,37 +1114,14 @@ exports[`menu-button > renders with icon 1`] = `
     type="button"
   >
     <span>
-      Settings 
-      <svg
-        aria-hidden="true"
-        class="icon icon--16"
-      >
-        <symbol
-          id="GENERATED-0"
-          viewBox="0 0 16 16"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M10.799.652A1 1 0 0 0 9.86 0H6.14c-.42 0-.793.26-.94.652l-.412 1.11-.316.184-.274.157-1.17-.199a1.001 1.001 0 0 0-1.034.486l-.921 1.594-.01.015-.93 1.61A1 1 0 0 0 .23 6.747l.755.911.002.398-.001.283-.757.913a1 1 0 0 0-.096 1.138l.93 1.61.007.01.924 1.6c.21.362.622.556 1.034.486l1.17-.198.268.152.322.188.412 1.11c.146.392.52.652.939.652h3.72c.419 0 .793-.26.939-.652l.412-1.11.321-.187.27-.153 1.169.198c.412.07.825-.124 1.034-.486l.922-1.596.008-.013.93-1.61a1 1 0 0 0-.096-1.138l-.755-.911-.002-.399.001-.282.757-.913a1 1 0 0 0 .096-1.138L14.936 4l-.005-.008-.926-1.602a1.001 1.001 0 0 0-1.034-.486l-1.17.199-.27-.154-.32-.187L10.8.652ZM5.468 12.318l.628.359a1 1 0 0 1 .441.52l.299.803h2.328l.299-.803a1 1 0 0 1 .442-.52l.626-.358.57-.333c.204-.118.441-.16.673-.122l.845.144.582-1.008.008-.013.575-.994-.548-.66a1 1 0 0 1-.23-.642l.004-.748-.003-.633a1 1 0 0 1 .23-.643l.547-.66-.578-.998-.005-.01-.582-1.007-.845.144a1.003 1.003 0 0 1-.672-.122l-.572-.333-.626-.358a1 1 0 0 1-.441-.52L9.164 2H6.836l-.299.803a1 1 0 0 1-.441.52l-.621.355-.577.336c-.203.118-.44.161-.672.122l-.845-.143L2.799 5l-.01.015-.572.992.547.66a1 1 0 0 1 .23.642l-.004.747.003.634a1 1 0 0 1-.23.643l-.547.66.576.996L2.8 11l.582 1.008.845-.144c.232-.039.47.004.672.122l.57.332Z"
-            fill-rule="evenodd"
-          />
-          <path
-            clip-rule="evenodd"
-            d="M8 9a1 1 0 1 0 .001-2.001A1 1 0 0 0 8 9Zm0 2a3.002 3.002 0 0 0 3.003-3c0-1.657-1.344-3-3.003-3a3.002 3.002 0 0 0-3.003 3c0 1.657 1.344 3 3.003 3Z"
-            fill-rule="evenodd"
-          />
-        </symbol>
-        <use
-          href="#icon-settings-16"
-        />
-      </svg>
+      eBay Menu groups
     </span>
     <svg
       aria-hidden="true"
       class="icon icon--12"
     >
       <symbol
-        id="GENERATED-1"
+        id="GENERATED-0"
         viewBox="0 0 12 12"
       >
         <path
@@ -1174,25 +1142,25 @@ exports[`menu-button > renders with icon 1`] = `
   >
     <div
       class="menu-button__items"
-      id="GENERATED-2"
+      id="GENERATED-1"
       role="menu"
     >
-       
       <div
+        aria-checked="true"
         class="menu-button__item"
-        data-value="0"
-        role="menuitem"
+        data-value="price-low"
+        role="menuitemradio"
         tabindex="0"
       >
         <span>
-          item 1
+          Price: low to high
         </span>
         <svg
           aria-hidden="true"
           class="icon icon--16"
         >
           <symbol
-            id="GENERATED-3"
+            id="GENERATED-2"
             viewBox="0 0 16 16"
           >
             <path
@@ -1207,13 +1175,14 @@ exports[`menu-button > renders with icon 1`] = `
         </svg>
       </div>
       <div
+        aria-checked="false"
         class="menu-button__item"
-        data-value="1"
-        role="menuitem"
+        data-value="price-high"
+        role="menuitemradio"
         tabindex="-1"
       >
         <span>
-          item 2
+          Price: high to low
         </span>
         <svg
           aria-hidden="true"
@@ -1224,14 +1193,57 @@ exports[`menu-button > renders with icon 1`] = `
           />
         </svg>
       </div>
+      <hr
+        class="menu-button__separator"
+        role="separator"
+      />
       <div
+        aria-checked="true"
         class="menu-button__item"
-        data-value="2"
-        role="menuitem"
+        data-value="shipping-free"
+        role="menuitemcheckbox"
         tabindex="-1"
       >
         <span>
-          item 3
+          Free shipping
+        </span>
+        <svg
+          aria-hidden="true"
+          class="icon icon--16"
+        >
+          <use
+            href="#icon-tick-16"
+          />
+        </svg>
+      </div>
+      <div
+        aria-checked="false"
+        class="menu-button__item"
+        data-value="buy-it-now"
+        role="menuitemcheckbox"
+        tabindex="-1"
+      >
+        <span>
+          Buy It Now
+        </span>
+        <svg
+          aria-hidden="true"
+          class="icon icon--16"
+        >
+          <use
+            href="#icon-tick-16"
+          />
+        </svg>
+      </div>
+      <div
+        aria-checked="false"
+        class="menu-button__item"
+        data-value="auction"
+        role="menuitemcheckbox"
+        tabindex="-1"
+      >
+        <span>
+          Auction
         </span>
         <svg
           aria-hidden="true"
@@ -1247,26 +1259,48 @@ exports[`menu-button > renders with icon 1`] = `
 </span>"
 `;
 
-exports[`menu-button > renders with overflow variant 1`] = `
+exports[`menu-button > renders with icon 1`] = `
 "<span
   class="menu-button"
-  text=""
 >
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="menu-button__button btn btn--overflow btn--secondary"
+    class="menu-button__button btn btn--secondary"
     type="button"
   >
     <span>
-      eBay Menu
+      Settings 
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <symbol
+          id="GENERATED-0"
+          viewBox="0 0 16 16"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10.799.652A1 1 0 0 0 9.86 0H6.14c-.42 0-.793.26-.94.652l-.412 1.11-.316.184-.274.157-1.17-.199a1.001 1.001 0 0 0-1.034.486l-.921 1.594-.01.015-.93 1.61A1 1 0 0 0 .23 6.747l.755.911.002.398-.001.283-.757.913a1 1 0 0 0-.096 1.138l.93 1.61.007.01.924 1.6c.21.362.622.556 1.034.486l1.17-.198.268.152.322.188.412 1.11c.146.392.52.652.939.652h3.72c.419 0 .793-.26.939-.652l.412-1.11.321-.187.27-.153 1.169.198c.412.07.825-.124 1.034-.486l.922-1.596.008-.013.93-1.61a1 1 0 0 0-.096-1.138l-.755-.911-.002-.399.001-.282.757-.913a1 1 0 0 0 .096-1.138L14.936 4l-.005-.008-.926-1.602a1.001 1.001 0 0 0-1.034-.486l-1.17.199-.27-.154-.32-.187L10.8.652ZM5.468 12.318l.628.359a1 1 0 0 1 .441.52l.299.803h2.328l.299-.803a1 1 0 0 1 .442-.52l.626-.358.57-.333c.204-.118.441-.16.673-.122l.845.144.582-1.008.008-.013.575-.994-.548-.66a1 1 0 0 1-.23-.642l.004-.748-.003-.633a1 1 0 0 1 .23-.643l.547-.66-.578-.998-.005-.01-.582-1.007-.845.144a1.003 1.003 0 0 1-.672-.122l-.572-.333-.626-.358a1 1 0 0 1-.441-.52L9.164 2H6.836l-.299.803a1 1 0 0 1-.441.52l-.621.355-.577.336c-.203.118-.44.161-.672.122l-.845-.143L2.799 5l-.01.015-.572.992.547.66a1 1 0 0 1 .23.642l-.004.747.003.634a1 1 0 0 1-.23.643l-.547.66.576.996L2.8 11l.582 1.008.845-.144c.232-.039.47.004.672.122l.57.332Z"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M8 9a1 1 0 1 0 .001-2.001A1 1 0 0 0 8 9Zm0 2a3.002 3.002 0 0 0 3.003-3c0-1.657-1.344-3-3.003-3a3.002 3.002 0 0 0-3.003 3c0 1.657 1.344 3 3.003 3Z"
+            fill-rule="evenodd"
+          />
+        </symbol>
+        <use
+          href="#icon-settings-16"
+        />
+      </svg>
     </span>
     <svg
       aria-hidden="true"
       class="icon icon--12"
     >
       <symbol
-        id="GENERATED-0"
+        id="GENERATED-1"
         viewBox="0 0 12 12"
       >
         <path
@@ -1287,15 +1321,14 @@ exports[`menu-button > renders with overflow variant 1`] = `
   >
     <div
       class="menu-button__items"
-      id="GENERATED-1"
+      id="GENERATED-2"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
-        data-value="item 1"
+        data-value="0"
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
       >
         <span>
           item 1
@@ -1305,7 +1338,7 @@ exports[`menu-button > renders with overflow variant 1`] = `
           class="icon icon--16"
         >
           <symbol
-            id="GENERATED-2"
+            id="GENERATED-3"
             viewBox="0 0 16 16"
           >
             <path
@@ -1321,7 +1354,7 @@ exports[`menu-button > renders with overflow variant 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="item 2"
+        data-value="1"
         role="menuitem"
         tabindex="-1"
       >
@@ -1339,7 +1372,7 @@ exports[`menu-button > renders with overflow variant 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="item 3"
+        data-value="2"
         role="menuitem"
         tabindex="-1"
       >
@@ -1360,24 +1393,19 @@ exports[`menu-button > renders with overflow variant 1`] = `
 </span>"
 `;
 
-exports[`menu-button > renders with prefix label 1`] = `
+exports[`menu-button > renders with overflow variant 1`] = `
 "<span
   class="menu-button"
+  text=""
 >
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="menu-button__button btn btn--secondary"
+    class="menu-button__button btn btn--overflow btn--secondary"
     type="button"
   >
-    <span
-      class="menu-button-prefix-label"
-    >
-      Sort By:
-    </span>
-     
     <span>
-      Name
+      eBay Menu
     </span>
     <svg
       aria-hidden="true"
@@ -1408,15 +1436,14 @@ exports[`menu-button > renders with prefix label 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
-        data-value="0"
+        data-value="item 1"
         role="menuitem"
-        tabindex="0"
+        tabindex="-1"
       >
         <span>
-          Name
+          item 1
         </span>
         <svg
           aria-hidden="true"
@@ -1439,12 +1466,12 @@ exports[`menu-button > renders with prefix label 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="1"
+        data-value="item 2"
         role="menuitem"
         tabindex="-1"
       >
         <span>
-          Year
+          item 2
         </span>
         <svg
           aria-hidden="true"
@@ -1457,12 +1484,12 @@ exports[`menu-button > renders with prefix label 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="2"
+        data-value="item 3"
         role="menuitem"
         tabindex="-1"
       >
         <span>
-          Group
+          item 3
         </span>
         <svg
           aria-hidden="true"
@@ -1478,7 +1505,7 @@ exports[`menu-button > renders with prefix label 1`] = `
 </span>"
 `;
 
-exports[`menu-button > renders with reverse=true 1`] = `
+exports[`menu-button > renders with prefix label 1`] = `
 "<span
   class="menu-button"
 >
@@ -1488,8 +1515,14 @@ exports[`menu-button > renders with reverse=true 1`] = `
     class="menu-button__button btn btn--secondary"
     type="button"
   >
+    <span
+      class="menu-button-prefix-label"
+    >
+      Sort By:
+    </span>
+     
     <span>
-      eBay Menu
+      Name
     </span>
     <svg
       aria-hidden="true"
@@ -1520,15 +1553,14 @@ exports[`menu-button > renders with reverse=true 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
-        data-value="item 1"
+        data-value="0"
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
       >
         <span>
-          item 1
+          Name
         </span>
         <svg
           aria-hidden="true"
@@ -1551,12 +1583,12 @@ exports[`menu-button > renders with reverse=true 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="item 2"
+        data-value="1"
         role="menuitem"
         tabindex="-1"
       >
         <span>
-          item 2
+          Year
         </span>
         <svg
           aria-hidden="true"
@@ -1569,12 +1601,12 @@ exports[`menu-button > renders with reverse=true 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="item 3"
+        data-value="2"
         role="menuitem"
         tabindex="-1"
       >
         <span>
-          item 3
+          Group
         </span>
         <svg
           aria-hidden="true"
@@ -1590,7 +1622,7 @@ exports[`menu-button > renders with reverse=true 1`] = `
 </span>"
 `;
 
-exports[`menu-button > renders with separators 1`] = `
+exports[`menu-button > renders with reverse=true 1`] = `
 "<span
   class="menu-button"
 >
@@ -1601,7 +1633,7 @@ exports[`menu-button > renders with separators 1`] = `
     type="button"
   >
     <span>
-      eBay Menu separator
+      eBay Menu
     </span>
     <svg
       aria-hidden="true"
@@ -1632,12 +1664,11 @@ exports[`menu-button > renders with separators 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
-        data-value="0"
+        data-value="item 1"
         role="menuitem"
-        tabindex="0"
+        tabindex="-1"
       >
         <span>
           item 1
@@ -1663,7 +1694,7 @@ exports[`menu-button > renders with separators 1`] = `
       </div>
       <div
         class="menu-button__item"
-        data-value="1"
+        data-value="item 2"
         role="menuitem"
         tabindex="-1"
       >
@@ -1679,13 +1710,9 @@ exports[`menu-button > renders with separators 1`] = `
           />
         </svg>
       </div>
-      <hr
-        class="menu-button__separator"
-        role="separator"
-      />
       <div
         class="menu-button__item"
-        data-value="3"
+        data-value="item 3"
         role="menuitem"
         tabindex="-1"
       >
@@ -1701,64 +1728,6 @@ exports[`menu-button > renders with separators 1`] = `
           />
         </svg>
       </div>
-      <div
-        class="menu-button__item"
-        data-value="4"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span>
-          item 4
-        </span>
-        <svg
-          aria-hidden="true"
-          class="icon icon--16"
-        >
-          <use
-            href="#icon-tick-16"
-          />
-        </svg>
-      </div>
-      <hr
-        class="menu-button__separator"
-        role="separator"
-      />
-      <div
-        class="menu-button__item"
-        data-value="6"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span>
-          item 5
-        </span>
-        <svg
-          aria-hidden="true"
-          class="icon icon--16"
-        >
-          <use
-            href="#icon-tick-16"
-          />
-        </svg>
-      </div>
-      <div
-        class="menu-button__item"
-        data-value="7"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span>
-          item 6
-        </span>
-        <svg
-          aria-hidden="true"
-          class="icon icon--16"
-        >
-          <use
-            href="#icon-tick-16"
-          />
-        </svg>
-      </div>
     </div>
   </span>
 </span>"
@@ -1806,7 +1775,6 @@ exports[`menu-button > renders with size=small 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -1919,7 +1887,6 @@ exports[`menu-button > renders with type=checkbox and checked=false 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -2036,7 +2003,6 @@ exports[`menu-button > renders with type=checkbox and checked=false and as filte
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="true"
         class="menu-button__item"
@@ -2182,7 +2148,6 @@ exports[`menu-button > renders with type=checkbox and checked=true 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -2299,7 +2264,6 @@ exports[`menu-button > renders with type=checkbox and checked=true and as filter
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="true"
         class="menu-button__item"
@@ -2445,7 +2409,6 @@ exports[`menu-button > renders with type=radio and checked=false 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -2562,7 +2525,6 @@ exports[`menu-button > renders with type=radio and checked=false and as filter 1
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="true"
         class="menu-button__item"
@@ -2708,7 +2670,6 @@ exports[`menu-button > renders with type=radio and checked=true 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
@@ -2825,7 +2786,6 @@ exports[`menu-button > renders with type=radio and checked=true and as filter 1`
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         aria-checked="true"
         class="menu-button__item"
@@ -2976,7 +2936,6 @@ exports[`menu-button > renders with typeahead 1`] = `
       id="GENERATED-1"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="0"
@@ -3296,7 +3255,6 @@ exports[`menu-button > renders without toggle icon 1`] = `
       id="GENERATED-0"
       role="menu"
     >
-       
       <div
         class="menu-button__item"
         data-value="item 1"
diff --git a/packages/evo-marko/src/tags/evo-menu-button/test/test.server.ts b/packages/evo-marko/src/tags/evo-menu-button/test/test.server.ts
index b5f31b8519a..9524f5ffd92 100644
--- a/packages/evo-marko/src/tags/evo-menu-button/test/test.server.ts
+++ b/packages/evo-marko/src/tags/evo-menu-button/test/test.server.ts
@@ -8,7 +8,7 @@ const {
     Default,
     Typeahead,
     Badged,
-    Separator,
+    Groups,
     IconText,
     PrefixLabel,
     Filter,
@@ -68,8 +68,8 @@ describe("menu-button", () => {
         await snapshotHTML(Default, { text: "Button", variant: "button" });
     });
 
-    it("renders with separators", async () => {
-        await snapshotHTML(Separator);
+    it("renders with groups", async () => {
+        await snapshotHTML(Groups);
     });
 
     it("renders with prefix label", async () => {
diff --git a/packages/evo-marko/src/tags/evo-menu/examples/controlled.marko b/packages/evo-marko/src/tags/evo-menu/examples/controlled.marko
new file mode 100644
index 00000000000..afbd89b16da
--- /dev/null
+++ b/packages/evo-marko/src/tags/evo-menu/examples/controlled.marko
@@ -0,0 +1,25 @@
+import { type Input as MenuInput } from "<evo-menu>";
+
+export interface Input extends MenuInput<string> {}
+
+<let/selected=input.selected ?? "system" valueChange=input.selectedChange>
+
+<evo-menu ...input>
+    <@group selected:=selected>
+        <@item value="system">System default</@item>
+    </@group>
+    <@group selected:=selected>
+        <@item value="light">Light</@item>
+        <@item value="dark">Dark</@item>
+        <@item value="high-contrast">High contrast</@item>
+    </@group>
+</evo-menu>
+
+<div style="padding: 16px">
+    <for|value| of=["system", "light", "dark", "high-contrast"]>
+        <label>
+            <input type="radio" value=value checkedValue:=selected>
+            ${value}
+        </label>
+    </for>
+</div>
diff --git a/packages/evo-marko/src/tags/evo-menu/examples/groups.marko b/packages/evo-marko/src/tags/evo-menu/examples/groups.marko
new file mode 100644
index 00000000000..993c7b9eaab
--- /dev/null
+++ b/packages/evo-marko/src/tags/evo-menu/examples/groups.marko
@@ -0,0 +1,13 @@
+<let/sortSelected="price-low">
+<let/filterSelected=["shipping-free"]>
+<evo-menu ...input>
+    <@group selected:=sortSelected>
+        <@item value="price-low">Price: low to high</@item>
+        <@item value="price-high">Price: high to low</@item>
+    </@group>
+    <@group selected:=filterSelected>
+        <@item value="shipping-free">Free shipping</@item>
+        <@item value="buy-it-now">Buy It Now</@item>
+        <@item value="auction">Auction</@item>
+    </@group>
+</evo-menu>
diff --git a/packages/evo-marko/src/tags/evo-menu/examples/separator.marko b/packages/evo-marko/src/tags/evo-menu/examples/separator.marko
deleted file mode 100644
index 09fea1cb759..00000000000
--- a/packages/evo-marko/src/tags/evo-menu/examples/separator.marko
+++ /dev/null
@@ -1,8 +0,0 @@
-<evo-menu ...input>
-    <@item>item 1 that has very long text</@item>
-    <@item>item 2</@item>
-    <@item separator/>
-    <@item>item 3</@item>
-    <@item>item 4</@item>
-    <@item>item 5</@item>
-</evo-menu>
diff --git a/packages/evo-marko/src/tags/evo-menu/index.marko b/packages/evo-marko/src/tags/evo-menu/index.marko
index 54dab5078ea..841ca1528b6 100644
--- a/packages/evo-marko/src/tags/evo-menu/index.marko
+++ b/packages/evo-marko/src/tags/evo-menu/index.marko
@@ -1,16 +1,21 @@
 import { type Input as ButtonInput } from "../evo-button/index.marko";
 export interface Item extends Marko.HTML.Div {
     value?: string;
-    separator?: boolean;
     badgeNumber?: number;
     disabled?: boolean;
 }
+export interface Group {
+    selected?: number | string | (number | string)[] | null;
+    selectedChange?(selected: number | string | (number | string)[]): void;
+    item?: Marko.AttrTag<Item>;
+}
 export interface Input<
     Index extends number | string | (number | string)[],
 > extends Marko.HTML.Span {
-    selected?: Index;
+    selected?: Index | null;
     selectedChange?: (selected: Index) => void;
     item?: Marko.AttrTag<Item>;
+    group?: Marko.AttrTag<Group>;
     variant?: "filter" | "none";
     classPrefix?: string;
     typeaheadTimeoutLength?: number;
@@ -20,6 +25,18 @@ export interface Input<
     footerButton?: Marko.AttrTag<ButtonInput>;
 }
 
+static function nextSelected(
+    current: number | string | (number | string)[] | null | undefined,
+    value: number | string,
+) {
+    if (Array.isArray(current)) {
+        return current.includes(value)
+            ? current.filter((n) => n !== value)
+            : [...current, value];
+    }
+    return value;
+}
+
 <const/{
     class: inputClass,
     classPrefix,
@@ -30,19 +47,36 @@ export interface Input<
     fixWidth,
     footerButton,
     typeaheadTimeoutLength,
-    item: items,
+    item,
+    group,
     variant,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     ...htmlInput
 }=input>
-<const/isRadio=typeof inputIndex === "number" || typeof inputIndex === "string">
 <const/isFilter=variant === "filter">
-<const/isCheckbox=Array.isArray(inputIndex) || (isFilter && !isRadio)>
-<const/isCheckable=isRadio || isCheckbox>
 <const/baseClass=classPrefix || "menu">
 <const/menuClass=(baseClass === "menu" ? "items" : "menu")>
-<let/selected:=input.selected>
+
+<const/groups=(() => {
+    let offset = 0;
+    return [
+        ...(item
+            ? [{ selected: inputIndex, selectedChange, item } as Group]
+            : []),
+        ...(group || []),
+    ].map((group) => {
+        const items = [...(group.item || [])];
+        const normalized = { ...group, items, offset };
+        offset += items.length;
+        return normalized;
+    });
+})()>
+<const/initialSelected=(
+    groups.find(({ selected }) =>
+        Array.isArray(selected) ? selected.length > 0 : selected != null,
+    )?.selected ?? undefined
+)>
 
 <id/menu>
 <span/$el
@@ -61,24 +95,28 @@ export interface Input<
         aria-label=ariaLabel
         aria-labelledby=ariaLabelledby
         id=menu>
-        <const/$items: Iterable<HTMLElement>=$item> // TODO: remove when Marko TS works
+        // TODO: remove when Marko TS works ($item errors when referenced
+        // directly because it is declared inside nested loops)
+        <const/$items: Iterable<HTMLElement>=$item>
         <evo-roving-tabindex/rovTabindex
             nodeList=$items
-            selected:=selected/>
+            selected=initialSelected/>
         <evo-typeahead/{ typeahead }
             nodeList=$items
             timeoutLength=typeaheadTimeoutLength/>
 
-        <for|item, i| of=items>
-            <const/{
-                class: itemClass,
-                value = i,
-                separator,
-                badgeNumber,
-                disabled,
-                content,
-                ...htmlItem
-            }=item>
+        <for|group, groupIndex| of=groups>
+            <if=groupIndex>
+                <hr class=`${baseClass}__separator` role="separator">
+            </if>
+            <let/selected:=group.selected>
+            <const/isRadio=(
+                typeof group.selected === "number" ||
+                typeof group.selected === "string" ||
+                group.selected === null
+            )>
+            <const/isCheckbox=Array.isArray(group.selected) || (isFilter && !isRadio)>
+            <const/isCheckable=isRadio || isCheckbox>
             <const/itemRole=(
                 (isRadio
                     ? "menuitemradio"
@@ -86,15 +124,20 @@ export interface Input<
                       ? "menuitemcheckbox"
                       : "menuitem") as Marko.HTML.Div["role"]
             )>
-            <const/checked=(
-                Array.isArray(selected)
-                    ? selected.includes(value)
-                    : selected === value
-            )>
-            <if=separator>
-                <hr class=`${baseClass}__separator` role="separator">
-            </if>
-            <else>
+            <for|item, i| of=group.items>
+                <const/{
+                    class: itemClass,
+                    value = group.offset + i,
+                    badgeNumber,
+                    disabled,
+                    content,
+                    ...htmlItem
+                }=item>
+                <const/checked=(
+                    Array.isArray(selected)
+                        ? selected.includes(value)
+                        : selected === value
+                )>
                 <div/$item
                     ...htmlItem
                     class=[
@@ -105,16 +148,20 @@ export interface Input<
                     ]
                     onClick(e, target) {
                         rovTabindex.onClick(value);
-                        (item.onClick || null)?.(e, target);
+                        selected = nextSelected(selected, value);
+                        item.onClick && item.onClick(e, target);
                     }
                     onKeyDown(e, target) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            selected = nextSelected(selected, value);
+                        }
                         rovTabindex.onKeyDown(e);
                         const newIndex = typeahead(e);
                         if (newIndex !== -1) {
                             rovTabindex.setFocusIndex(newIndex);
                         }
 
-                        (item.onKeyDown || null)?.(e, target);
+                        item.onKeyDown && item.onKeyDown(e, target);
                     }
                     data-value=value
                     tabindex=(rovTabindex.isFocused(value) ? 0 : -1)
@@ -141,7 +188,7 @@ export interface Input<
                         <evo-icon-tick-16/>
                     </if>
                 </div>
-            </else>
+            </for>
         </for>
     </div>
     <if=footerButton>
@@ -151,4 +198,4 @@ export interface Input<
     </if>
 </span>
 
-<return=$el>
\ No newline at end of file
+<return=$el>
diff --git a/packages/evo-marko/src/tags/evo-menu/menu.stories.ts b/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
index 8a31d624d6f..852023944b3 100644
--- a/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
+++ b/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
@@ -16,8 +16,10 @@ import SpritesTemplate from "./examples/sprites.marko";
 import SpritesTemplateCode from "./examples/sprites.marko?raw";
 import TypeaheadTemplate from "./examples/typeahead.marko";
 import TypeaheadTemplateCode from "./examples/typeahead.marko?raw";
-import SeparatorTemplate from "./examples/separator.marko";
-import SeparatorTemplateCode from "./examples/separator.marko?raw";
+import GroupsTemplate from "./examples/groups.marko";
+import GroupsTemplateCode from "./examples/groups.marko?raw";
+import ControlledTemplate from "./examples/controlled.marko";
+import ControlledTemplateCode from "./examples/controlled.marko?raw";
 import FooterTemplate from "./examples/footer.marko";
 import FooterTemplateCode from "./examples/footer.marko?raw";
 
@@ -36,7 +38,7 @@ export default {
     selected: {
       controllable: true,
       description:
-        "If present, indicates the selected item(s) in the menu and automatically updates them on click. Use a single value for single-select, or an array for multi-select. Compares with `value` is present in `@option`, otherwise index.",
+        "If present, indicates the selected item(s) among the top-level `@item`s and automatically updates them on click. Use a single value for single-select (`null` for single-select with nothing selected), or an array for multi-select. Compares with `value` if present on `@item`, otherwise the item's index in the menu.",
       table: { type: { summary: "number | string | (number | string)[]" } },
     },
     item: {
@@ -47,11 +49,6 @@ export default {
           control: "text",
           description: "Used for tracking the selected item",
         },
-        separator: {
-          type: "boolean",
-          control: "boolean",
-          description: "Render as a separator instead of an item",
-        },
         badgeNumber: {
           type: "number",
           control: "number",
@@ -70,6 +67,21 @@ export default {
         },
       },
     },
+    group: {
+      description:
+        "Attribute tag representing a group of menu items with its own selection state. Groups are separated by dividers automatically. Top-level `@item`s (if any) always render before groups.",
+      "@": {
+        selected: {
+          type: "number | string | (number | string)[]",
+          description:
+            "If present, indicates the selected item(s) within this group and automatically updates them on click. Use a single value for single-select (`null` for single-select with nothing selected), or an array for multi-select. Compares with `value` if present on `@item`, otherwise the item's index in the menu.",
+        },
+        item: {
+          description:
+            "Attribute tag representing a menu item within the group. Accepts the same attributes as a top-level `@item`.",
+        },
+      },
+    },
     variant: {
       type: "string",
       options: ["none (default)", "filter"],
@@ -140,6 +152,13 @@ export const MultiSelect = buildExtensionTemplate(
   },
 );
 
+export const Groups = buildExtensionTemplate(GroupsTemplate, GroupsTemplateCode);
+
+export const Controlled = buildExtensionTemplate(
+  ControlledTemplate,
+  ControlledTemplateCode,
+);
+
 export const Typeahead = buildExtensionTemplate(
   TypeaheadTemplate,
   TypeaheadTemplateCode,
diff --git a/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap b/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
index 338a3eb08fe..5ccf9555136 100644
--- a/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
+++ b/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
@@ -13,7 +13,6 @@ exports[`menu > passes through additional html attributes 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -95,7 +94,6 @@ exports[`menu > passes through additional html attributes 2`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -164,6 +162,86 @@ exports[`menu > passes through additional html attributes 2`] = `
 </span>"
 `;
 
+exports[`menu > renders as radio with no selection when selected=null 1`] = `
+"<span
+  class="menu"
+>
+  <div
+    class="menu__items"
+    id="GENERATED-0"
+    role="menu"
+  >
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="0"
+      role="menuitemradio"
+      tabindex="0"
+    >
+      <span>
+        item 1 that has very long text
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <symbol
+          id="GENERATED-1"
+          viewBox="0 0 16 16"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z"
+            fill-rule="evenodd"
+          />
+        </symbol>
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="1"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        item 2
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="2"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        item 3
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+  </div>
+</span>"
+`;
+
 exports[`menu > renders basic version 1`] = `
 "<span
   class="menu"
@@ -173,7 +251,6 @@ exports[`menu > renders basic version 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -252,7 +329,6 @@ exports[`menu > renders with aria-label 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -331,7 +407,6 @@ exports[`menu > renders with aria-labelledby 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -409,7 +484,6 @@ exports[`menu > renders with badged version 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       aria-label="1 item unread"
       class="menu__item menu__item--badged"
@@ -496,6 +570,142 @@ exports[`menu > renders with badged version 1`] = `
 </span>"
 `;
 
+exports[`menu > renders with controlled selection shared across groups 1`] = `
+"<span
+  class="menu"
+>
+  <div
+    class="menu__items"
+    id="GENERATED-0"
+    role="menu"
+  >
+    <div
+      aria-checked="true"
+      class="menu__item"
+      data-value="system"
+      role="menuitemradio"
+      tabindex="0"
+    >
+      <span>
+        System default
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <symbol
+          id="GENERATED-1"
+          viewBox="0 0 16 16"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z"
+            fill-rule="evenodd"
+          />
+        </symbol>
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <hr
+      class="menu__separator"
+      role="separator"
+    />
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="light"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        Light
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="dark"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        Dark
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="high-contrast"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        High contrast
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+  </div>
+</span>
+<div
+  style="padding: 16px"
+>
+  <label>
+    <input
+      checked=""
+      type="radio"
+      value="system"
+    />
+    system
+  </label>
+  <label>
+    <input
+      type="radio"
+      value="light"
+    />
+    light
+  </label>
+  <label>
+    <input
+      type="radio"
+      value="dark"
+    />
+    dark
+  </label>
+  <label>
+    <input
+      type="radio"
+      value="high-contrast"
+    />
+    high-contrast
+  </label>
+</div>"
+`;
+
 exports[`menu > renders with fix-width=true 1`] = `
 "<span
   class="menu menu__items--fix-width"
@@ -505,7 +715,6 @@ exports[`menu > renders with fix-width=true 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -583,7 +792,6 @@ exports[`menu > renders with footer version 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       aria-checked="false"
       class="menu__item"
@@ -695,6 +903,128 @@ exports[`menu > renders with footer version 1`] = `
 </span>"
 `;
 
+exports[`menu > renders with groups 1`] = `
+"<span
+  class="menu"
+>
+  <div
+    class="menu__items"
+    id="GENERATED-0"
+    role="menu"
+  >
+    <div
+      aria-checked="true"
+      class="menu__item"
+      data-value="price-low"
+      role="menuitemradio"
+      tabindex="0"
+    >
+      <span>
+        Price: low to high
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <symbol
+          id="GENERATED-1"
+          viewBox="0 0 16 16"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z"
+            fill-rule="evenodd"
+          />
+        </symbol>
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="price-high"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        Price: high to low
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <hr
+      class="menu__separator"
+      role="separator"
+    />
+    <div
+      aria-checked="true"
+      class="menu__item"
+      data-value="shipping-free"
+      role="menuitemcheckbox"
+      tabindex="-1"
+    >
+      <span>
+        Free shipping
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="buy-it-now"
+      role="menuitemcheckbox"
+      tabindex="-1"
+    >
+      <span>
+        Buy It Now
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="auction"
+      role="menuitemcheckbox"
+      tabindex="-1"
+    >
+      <span>
+        Auction
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+  </div>
+</span>"
+`;
+
 exports[`menu > renders with reverse=true 1`] = `
 "<span
   class="menu menu__items--reverse"
@@ -704,7 +1034,6 @@ exports[`menu > renders with reverse=true 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -782,7 +1111,6 @@ exports[`menu > renders with sprites version 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -869,6 +1197,124 @@ exports[`menu > renders with sprites version 1`] = `
 </span>"
 `;
 
+exports[`menu > renders with top-level items before groups 1`] = `
+"<span
+  class="menu"
+>
+  <div
+    class="menu__items"
+    id="GENERATED-0"
+    role="menu"
+  >
+    <div
+      aria-checked="true"
+      class="menu__item"
+      data-value="0"
+      role="menuitemradio"
+      tabindex="0"
+    >
+      <span>
+        item 1 that has very long text
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <symbol
+          id="GENERATED-1"
+          viewBox="0 0 16 16"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z"
+            fill-rule="evenodd"
+          />
+        </symbol>
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="1"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        item 2
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="2"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <span>
+        item 3
+      </span>
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <hr
+      class="menu__separator"
+      role="separator"
+    />
+    <div
+      aria-checked="false"
+      class="menu__item"
+      data-value="a"
+      role="menuitemcheckbox"
+      tabindex="-1"
+    >
+      <span />
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+    <div
+      aria-checked="true"
+      class="menu__item"
+      data-value="b"
+      role="menuitemcheckbox"
+      tabindex="-1"
+    >
+      <span />
+      <svg
+        aria-hidden="true"
+        class="icon icon--16"
+      >
+        <use
+          href="#icon-tick-16"
+        />
+      </svg>
+    </div>
+  </div>
+</span>"
+`;
+
 exports[`menu > renders with type=checkbox and checked=false 1`] = `
 "<span
   class="menu"
@@ -879,7 +1325,6 @@ exports[`menu > renders with type=checkbox and checked=false 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -958,7 +1403,6 @@ exports[`menu > renders with type=checkbox and checked=true 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -1037,7 +1481,6 @@ exports[`menu > renders with type=radio and checked=false 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -1116,7 +1559,6 @@ exports[`menu > renders with type=radio and checked=true 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
@@ -1200,7 +1642,6 @@ exports[`menu > renders with typeahead 1`] = `
     id="GENERATED-0"
     role="menu"
   >
-     
     <div
       class="menu__item"
       data-value="0"
diff --git a/packages/evo-marko/src/tags/evo-menu/test/test.browser.ts b/packages/evo-marko/src/tags/evo-menu/test/test.browser.ts
index c2542025ccd..b26151a963a 100644
--- a/packages/evo-marko/src/tags/evo-menu/test/test.browser.ts
+++ b/packages/evo-marko/src/tags/evo-menu/test/test.browser.ts
@@ -3,13 +3,146 @@ import { composeStories } from "@storybook/marko";
 import { render, fireEvent, cleanup, waitFor } from "@marko/testing-library";
 import { pressKey } from "../../../common/test-utils/browser";
 import * as stories from "../menu.stories"; // import all stories from the stories file
-const { Default, Typeahead } = composeStories(stories);
+const { Default, Groups, Controlled, Typeahead } = composeStories(stories);
 const Separator: any = Default;
 
 afterEach(cleanup);
 
 let component: Awaited<ReturnType<typeof render>>;
 
+describe("given the menu is single-select with no selection (selected=null)", () => {
+  const firstItemText = "item 2";
+
+  beforeEach(async () => {
+    component = await render(Default, { selected: null });
+  });
+
+  it("then it renders radio items with none checked", () => {
+    const items = component.getAllByRole("menuitemradio");
+    expect(items).to.have.length(3);
+    for (const item of items) {
+      expect(item).toHaveAttribute("aria-checked", "false");
+    }
+  });
+
+  describe("when an item is clicked", () => {
+    beforeEach(async () => {
+      await fireEvent.click(component.getByText(firstItemText));
+    });
+
+    it("then it becomes the checked item", () => {
+      expect(
+        component.getByText(firstItemText).parentElement,
+      ).toHaveAttribute("aria-checked", "true");
+    });
+  });
+});
+
+describe("given the menu selection is controlled and shared across groups", () => {
+  const selectedItemText = "System default";
+  const otherGroupItemText = "Dark";
+
+  const getItem = (text: string) =>
+    component.getByText(text).parentElement as HTMLElement;
+
+  beforeEach(async () => {
+    component = await render(Controlled);
+  });
+
+  describe("when an item in the other group is clicked", () => {
+    beforeEach(async () => {
+      await fireEvent.click(getItem(otherGroupItemText));
+    });
+
+    it("then the selection moves across groups", () => {
+      expect(getItem(otherGroupItemText)).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+      expect(getItem(selectedItemText)).toHaveAttribute("aria-checked", "false");
+    });
+  });
+
+  describe("when the selection is changed from outside the menu", () => {
+    beforeEach(async () => {
+      await fireEvent.click(component.getByDisplayValue("light"));
+    });
+
+    it("then the menu reflects the external selection", () => {
+      expect(getItem("Light")).toHaveAttribute("aria-checked", "true");
+      expect(getItem(selectedItemText)).toHaveAttribute("aria-checked", "false");
+    });
+  });
+});
+
+describe("given the menu has groups", () => {
+  const radioItemText = "Price: low to high";
+  const otherRadioItemText = "Price: high to low";
+  const checkboxItemText = "Free shipping";
+  const otherCheckboxItemText = "Buy It Now";
+
+  const getItem = (text: string) =>
+    component.getByText(text).parentElement as HTMLElement;
+
+  beforeEach(async () => {
+    component = await render(Groups);
+  });
+
+  it("then it renders a separator between the groups", () => {
+    expect(component.getAllByRole("separator")).to.have.length(1);
+  });
+
+  it("then it renders item roles based on each group's selection type", () => {
+    expect(component.getAllByRole("menuitemradio")).to.have.length(2);
+    expect(component.getAllByRole("menuitemcheckbox")).to.have.length(3);
+  });
+
+  describe("when an item in the radio group is clicked", () => {
+    beforeEach(async () => {
+      await fireEvent.click(getItem(otherRadioItemText));
+    });
+
+    it("then it updates only that group's selection", () => {
+      expect(getItem(otherRadioItemText)).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+      expect(getItem(radioItemText)).toHaveAttribute("aria-checked", "false");
+      expect(getItem(checkboxItemText)).toHaveAttribute("aria-checked", "true");
+    });
+  });
+
+  describe("when an item in the checkbox group is clicked", () => {
+    beforeEach(async () => {
+      await fireEvent.click(getItem(otherCheckboxItemText));
+    });
+
+    it("then it adds to that group's selection without affecting others", () => {
+      expect(getItem(otherCheckboxItemText)).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+      expect(getItem(checkboxItemText)).toHaveAttribute("aria-checked", "true");
+      expect(getItem(radioItemText)).toHaveAttribute("aria-checked", "true");
+    });
+  });
+
+  describe("when the down key is pressed from the last item of a group", () => {
+    beforeEach(async () => {
+      await fireEvent.click(getItem(otherRadioItemText));
+      await pressKey(getItem(otherRadioItemText), {
+        key: "ArrowDown",
+        keyCode: 40,
+      });
+    });
+
+    it("then focus moves into the next group", () => {
+      expect(getItem(checkboxItemText)).toHaveAttribute("tabindex", "0");
+      expect(getItem(otherRadioItemText)).toHaveAttribute("tabindex", "-1");
+    });
+  });
+});
+
 describe.skip("typeahead functionality", () => {
   const firstItemText = "Albania";
   const secondItemText = "Alcania";
diff --git a/packages/evo-marko/src/tags/evo-menu/test/test.server.ts b/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
index 357448a42cc..36322240a08 100644
--- a/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
+++ b/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
@@ -4,7 +4,8 @@ import * as testUtils from "../../../common/test-utils/server";
 import { snapshotHTML } from "../../../common/test-utils/snapshots";
 import * as stories from "../menu.stories"; // import all stories from the stories file
 
-const { Default, Typeahead, Badged, Sprites, Footer } = composeStories(stories);
+const { Default, Groups, Controlled, Typeahead, Badged, Sprites, Footer } =
+  composeStories(stories);
 
 describe("menu", () => {
   it("renders basic version", async () => {
@@ -27,6 +28,30 @@ describe("menu", () => {
     await snapshotHTML(Default, { fixWidth: true });
   });
 
+  it("renders as radio with no selection when selected=null", async () => {
+    await snapshotHTML(Default, { selected: null });
+  });
+
+  it("renders with groups", async () => {
+    await snapshotHTML(Groups);
+  });
+
+  it("renders with controlled selection shared across groups", async () => {
+    await snapshotHTML(Controlled);
+  });
+
+  it("renders with top-level items before groups", async () => {
+    await snapshotHTML(Default, {
+      selected: 0,
+      group: [
+        {
+          selected: ["b"],
+          item: [{ value: "a" }, { value: "b" }],
+        },
+      ],
+    });
+  });
+
   it("renders with typeahead", async () => {
     await snapshotHTML(Typeahead);
   });

From f715d1bba3520a4f0b45b2841c5984bd00d77e90 Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Wed, 12 Aug 2026 09:09:41 -0700
Subject: [PATCH 2/2] refactor(evo-menu): make Group interface generic over
 selection type

Group<Index> defaults to the full selection union so existing usage is
unchanged, while consumers can pin a narrow type (e.g. Group<string>)
and get a matching selectedChange parameter.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/evo-marko/src/tags/evo-menu/index.marko | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/evo-marko/src/tags/evo-menu/index.marko b/packages/evo-marko/src/tags/evo-menu/index.marko
index 841ca1528b6..962743714cc 100644
--- a/packages/evo-marko/src/tags/evo-menu/index.marko
+++ b/packages/evo-marko/src/tags/evo-menu/index.marko
@@ -4,9 +4,14 @@ export interface Item extends Marko.HTML.Div {
     badgeNumber?: number;
     disabled?: boolean;
 }
-export interface Group {
-    selected?: number | string | (number | string)[] | null;
-    selectedChange?(selected: number | string | (number | string)[]): void;
+export interface Group<
+    Index extends number | string | (number | string)[] =
+        | number
+        | string
+        | (number | string)[],
+> {
+    selected?: Index | null;
+    selectedChange?(selected: Index): void;
     item?: Marko.AttrTag<Item>;
 }
 export interface Input<