diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
index d80421f62f9..cdddb5b2a0b 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.scss
+++ b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -6,15 +6,12 @@
flex-col;
}
-.menu ::slotted(calcite-action) {
- @apply focus-base
- m-0.5
- flex;
+::slotted(calcite-action-group) {
+ border-block-end: 1px solid var(--calcite-ui-border-3);
}
-.menu ::slotted(calcite-action[data-active]) {
- @apply focus-outset;
- outline-offset: 0px;
+::slotted(calcite-action-group:last-child) {
+ border-block-end: 0;
}
.default-trigger {
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
index 38c837a0a8b..505126a0b37 100644
--- a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
@@ -39,6 +39,23 @@ export const open = (): string =>
`;
+export const openWithGroups = (): string =>
+ html`
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
export const keyDownOpen_TestOnly = (): string =>
html`
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index a1f977a6dee..368663e2b47 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -401,7 +401,23 @@ export class ActionMenu implements LoadableComponent {
.assignedElements({
flatten: true,
})
- .filter((el) => el?.matches("calcite-action")) as HTMLCalciteActionElement[];
+ .reduce(
+ (previousValue: HTMLCalciteActionElement[], currentValue): HTMLCalciteActionElement[] => {
+ if (currentValue?.matches("calcite-action")) {
+ previousValue.push(currentValue as HTMLCalciteActionElement);
+ return previousValue;
+ }
+
+ if (currentValue?.matches("calcite-action-group")) {
+ return previousValue.concat(
+ Array.from(currentValue.querySelectorAll("calcite-action"))
+ );
+ }
+
+ return previousValue;
+ },
+ []
+ );
this.actionElements = actions;
};
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index ee2a77c5afd..a8947f7eada 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -87,6 +87,10 @@
}
}
+:host([data-active]) .button {
+ @apply focus-inset;
+}
+
:host([scale="s"]) {
.button {
@apply text-n2h px-2 py-1 font-normal;