feat(flow): Adds setFocus method (#7252)

**Related Issue:** #6400 #5369

## Summary

- Depends on #7255
- Adds `setFocus` method.
- Implements `LoadableComponent`.
- Add test

## Gif


![issue-example](https://github.com/Esri/calcite-components/assets/1231455/b91bf88d-004e-49a8-a45e-9e55bf2c16da)

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

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 
 import { html } from "../../../support/formatting";
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
 import { CSS as ITEM_CSS } from "../flow-item/resources";
 import { CSS } from "./resources";
 
@@ -14,6 +14,18 @@ describe("calcite-flow", () => {
     hidden("calcite-flow");
   });
 
+  describe("is focusable", () => {
+    focusable(
+      html`<calcite-flow>
+        <calcite-flow-item id="one" heading="one">Hello World</calcite-flow-item>
+        <calcite-flow-item id="two" heading="two">Hello World</calcite-flow-item>
+      </calcite-flow>`,
+      {
+        focusTargetSelector: "#two"
+      }
+    );
+  });
+
   it("frame defaults", async () => {
     const page = await newE2EPage();
 

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

@@ -2,6 +2,12 @@ import { Component, Element, h, Listen, Method, State, VNode } from "@stencil/co
 import { createObserver } from "../../utils/observers";
 import { FlowDirection } from "./interfaces";
 import { CSS } from "./resources";
+import {
+  componentFocusable,
+  LoadableComponent,
+  setComponentLoaded,
+  setUpLoadableComponent
+} from "../../utils/loadable";
 
 /**
  * @slot - A slot for adding `calcite-flow-item` elements to the component.
@@ -11,7 +17,7 @@ import { CSS } from "./resources";
   styleUrl: "flow.scss",
   shadow: true
 })
-export class Flow {
+export class Flow implements LoadableComponent {
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -35,11 +41,24 @@ export class Flow {
       ? lastItem.beforeBack
       : (): Promise<void> => Promise.resolve();
 
-    return beforeBack.call(lastItem).then(() => {
-      lastItem.remove();
+    await beforeBack.call(lastItem);
 
-      return lastItem;
-    });
+    lastItem.remove();
+
+    return lastItem;
+  }
+
+  /**
+   * Sets focus on the component.
+   */
+  @Method()
+  async setFocus(): Promise<void> {
+    await componentFocusable(this);
+
+    const { items } = this;
+    const activeItem = items[items.length - 1];
+
+    return activeItem?.setFocus();
   }
 
   // --------------------------------------------------------------------------
@@ -69,6 +88,14 @@ export class Flow {
     this.updateFlowProps();
   }
 
+  async componentWillLoad(): Promise<void> {
+    setUpLoadableComponent(this);
+  }
+
+  componentDidLoad(): void {
+    setComponentLoaded(this);
+  }
+
   disconnectedCallback(): void {
     this.itemMutationObserver?.disconnect();
   }