fix(menu-item): Prevent duplicate border in nested vertical menu-items (

#7387)

**Related Issue:** #7386

## Summary
Adds css rule to prevent duplicate border in certain nested cases when
the last item itself is a parent of other Menu Item components.

Before:
<img width="356" alt="Screenshot 2023-07-27 at 1 16 11 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/2fb4e192-c893-4b26-8f15-67737ebb8d87">


After:
<img width="356" alt="Screenshot 2023-07-27 at 1 16 19 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/1fcaedc8-5b6e-40a7-8bf9-6be3b9911ba6">

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

@@ -180,6 +180,10 @@ calcite-action {
   }
 }
 
+:host([layout="vertical"]:last-of-type) .dropdown-menu-items {
+  border-block-end: 0;
+}
+
 :host([slot="submenu-item"]) .parent--vertical {
   @apply ps-6;
 }

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

@@ -134,7 +134,7 @@ export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell
             </calcite-menu-item>
           </calcite-menu-item>
         </calcite-menu-item>
-        <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
+        <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous" open>
           <calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
           <calcite-menu-item icon-start="layer" slot="submenu-item" text="Short one" open>
             <calcite-menu-item icon-start="layer" slot="submenu-item" text="Another thing" open>