feat(evo-menu): replace @item separator with @group attribute tag

.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.

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>

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>

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,