fix(tree): selects all child items when selection-mode is set to ance…

…stors (#7518)

**Related Issue:** #7104 

## Summary

Selects all the child `calcite-tree-item` elements when the root element
is selected with `selection-mode="ancestors"`

packages/calcite-components/src/components/tree/tree.e2e.ts

@@ -126,6 +126,11 @@ describe("calcite-tree", () => {
                 </calcite-tree-item>
                 <calcite-tree-item id="grandchild-two">
                   <span>Grandchild 2</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="greatgrandchild">
+                      <span>Great Grandchild</span>
+                    </calcite-tree-item></calcite-tree
+                  >
                 </calcite-tree-item>
               </calcite-tree>
             </calcite-tree-item>
@@ -140,6 +145,7 @@ describe("calcite-tree", () => {
     const childTwo = await page.find("#child-two");
     const grandchildOne = await page.find("#grandchild-one");
     const grandchildTwo = await page.find("#grandchild-two");
+    const greatgrandchild = await page.find("#greatgrandchild");
 
     expect(one).not.toHaveAttribute("indeterminate");
     expect(one).not.toHaveAttribute("selected");
@@ -149,6 +155,7 @@ describe("calcite-tree", () => {
     expect(childOne).not.toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     // Puppeteer's element click will happen in the center of a component,
     // so we call the method to ensure it happens on the component of interest
@@ -163,6 +170,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).toHaveAttribute("selected");
     expect(grandchildTwo).toHaveAttribute("selected");
+    expect(greatgrandchild).toHaveAttribute("selected");
 
     await childOne.callMethod("click");
     await page.waitForChanges();
@@ -175,6 +183,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     grandchildTwo.setProperty("disabled", true);
     await page.waitForChanges();
@@ -189,6 +198,7 @@ describe("calcite-tree", () => {
     expect(childTwo).not.toHaveAttribute("selected");
     expect(grandchildOne).not.toHaveAttribute("selected");
     expect(grandchildTwo).not.toHaveAttribute("selected");
+    expect(greatgrandchild).not.toHaveAttribute("selected");
 
     grandchildTwo.setProperty("disabled", false);
     await page.waitForChanges();
@@ -202,6 +212,7 @@ describe("calcite-tree", () => {
     expect(childTwo).toHaveAttribute("selected");
     expect(grandchildOne).toHaveAttribute("selected");
     expect(grandchildTwo).toHaveAttribute("selected");
+    expect(greatgrandchild).toHaveAttribute("selected");
   });
 
   describe("item selection", () => {

packages/calcite-components/src/components/tree/tree.tsx

@@ -357,7 +357,7 @@ export class Tree {
       item.indeterminate = selected.length > 0 && unselected.length > 0;
     }
 
-    childItemsWithChildren.forEach((el) => {
+    childItemsWithChildren.reverse().forEach((el) => {
       const directChildItems = Array.from(
         el.querySelectorAll<HTMLCalciteTreeItemElement>(":scope > calcite-tree > calcite-tree-item")
       );