feat(action-menu): support action-groups

packages/calcite-components/src/components/action-group/action-group.scss

@@ -65,4 +65,14 @@
   grid-template-columns: repeat(var(--calcite-action-group-columns), auto);
 }
 
+::slotted(calcite-action) {
+  @apply focus-base
+  flex;
+}
+
+::slotted(calcite-action[data-active]) {
+  @apply focus-outset;
+  outline-offset: 0px;
+}
+
 @include base-component();

packages/calcite-components/src/components/action-menu/action-menu.scss

@@ -17,6 +17,14 @@
   outline-offset: 0px;
 }
 
+::slotted(calcite-action-group) {
+  border-block-end: 1px solid var(--calcite-ui-border-3);
+}
+
+::slotted(calcite-action-group:last-child) {
+  border-block-end: 0;
+}
+
 .default-trigger {
   @apply relative
   h-full

packages/calcite-components/src/components/action-menu/action-menu.stories.ts

@@ -39,6 +39,23 @@ export const open = (): string =>
     </calcite-action-menu>
   `;
 
+export const openWithGroups = (): string =>
+  html`
+    <calcite-action-menu open>
+      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
+      <calcite-action-group>
+        <calcite-action text="Plus" icon="plus" text-enabled></calcite-action
+        ><calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      </calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Table" icon="table" text-enabled></calcite-action
+      ></calcite-action-group>
+      <calcite-action-group>
+        <calcite-action text="Save" icon="save" text-enabled></calcite-action>
+      </calcite-action-group>
+    </calcite-action-menu>
+  `;
+
 export const keyDownOpen_TestOnly = (): string =>
   html`
     <calcite-action-menu>

packages/calcite-components/src/components/action-menu/action-menu.tsx

@@ -401,7 +401,21 @@ export class ActionMenu implements LoadableComponent {
       .assignedElements({
         flatten: true,
       })
-      .filter((el) => el?.matches("calcite-action")) as HTMLCalciteActionElement[];
+      .reduce((previousValue: HTMLCalciteActionElement[], currentValue) => {
+        if (currentValue?.matches("calcite-action")) {
+          return [...previousValue, currentValue];
+        }
+
+        if (currentValue?.matches("calcite-action-group")) {
+          const groupActions = Array.from(
+            currentValue.querySelectorAll("calcite-action")
+          ) as HTMLCalciteActionElement[];
+
+          return [...previousValue, ...groupActions];
+        }
+
+        return previousValue;
+      }, []) as HTMLCalciteActionElement[];
 
     this.actionElements = actions;
   };