diff --git a/src/components/action-bar/action-bar.e2e.ts b/src/components/action-bar/action-bar.e2e.ts
index 40ea4e00e6b..1e9a9cbdb81 100755
--- a/src/components/action-bar/action-bar.e2e.ts
+++ b/src/components/action-bar/action-bar.e2e.ts
@@ -236,8 +236,7 @@ describe("calcite-action-bar", () => {
         </calcite-action-bar>
       `,
       {
-        focusId: "expand-toggle",
-        focusTargetSelector: "calcite-action-bar"
+        focusTargetSelector: "calcite-action"
       }
     ));
 
diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx
index 54f960aba8b..45a8b97e840 100755
--- a/src/components/action-bar/action-bar.tsx
+++ b/src/components/action-bar/action-bar.tsx
@@ -14,7 +14,7 @@ import {
 import { Position, Scale, Layout } from "../interfaces";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { CSS, SLOTS } from "./resources";
-import { getSlotted, focusElement } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import {
   geActionDimensions,
   getOverflowCount,
@@ -53,7 +53,9 @@ import {
 @Component({
   tag: "calcite-action-bar",
   styleUrl: "action-bar.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class ActionBar
@@ -227,18 +229,11 @@ export class ActionBar
 
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
   @Method()
-  async setFocus(focusId?: "expand-toggle"): Promise<void> {
+  async setFocus(): Promise<void> {
     await componentLoaded(this);
 
-    if (focusId === "expand-toggle") {
-      await focusElement(this.expandToggleEl);
-      return;
-    }
-
     this.el?.focus();
   }
 
diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx
index a7c5045e787..169da1ad05e 100755
--- a/src/components/action-group/action-group.tsx
+++ b/src/components/action-group/action-group.tsx
@@ -28,7 +28,9 @@ import { Messages } from "./assets/action-group/t9n";
 @Component({
   tag: "calcite-action-group",
   styleUrl: "action-group.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
diff --git a/src/components/action-pad/action-pad.e2e.ts b/src/components/action-pad/action-pad.e2e.ts
index 255494717ea..6ff9e07523e 100755
--- a/src/components/action-pad/action-pad.e2e.ts
+++ b/src/components/action-pad/action-pad.e2e.ts
@@ -192,8 +192,7 @@ describe("calcite-action-pad", () => {
         </calcite-action-pad>
       `,
       {
-        focusId: "expand-toggle",
-        focusTargetSelector: "calcite-action-pad"
+        focusTargetSelector: "calcite-action"
       }
     ));
 
diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx
index 313c3df33a9..c264cc90b28 100755
--- a/src/components/action-pad/action-pad.tsx
+++ b/src/components/action-pad/action-pad.tsx
@@ -13,7 +13,7 @@ import {
 } from "@stencil/core";
 import { Layout, Position, Scale } from "../interfaces";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
-import { focusElement, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 import {
   ConditionalSlotComponent,
@@ -43,7 +43,9 @@ import {
 @Component({
   tag: "calcite-action-pad",
   styleUrl: "action-pad.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class ActionPad
@@ -169,18 +171,11 @@ export class ActionPad
 
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
   @Method()
-  async setFocus(focusId?: "expand-toggle"): Promise<void> {
+  async setFocus(): Promise<void> {
     await componentLoaded(this);
 
-    if (focusId === "expand-toggle") {
-      await focusElement(this.expandToggleEl);
-      return;
-    }
-
     this.el?.focus();
   }
 
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 8774532fb17..17057b7e8ba 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -23,7 +23,7 @@ import {
   HSV_LIMITS,
   RGB_LIMITS
 } from "./resources";
-import { Direction, focusElement, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
+import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
 import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMode } from "./utils";
 import { throttle } from "lodash-es";
 
@@ -54,7 +54,9 @@ const defaultFormat = "auto";
 @Component({
   tag: "calcite-color-picker",
   styleUrl: "color-picker.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class ColorPicker
@@ -641,8 +643,7 @@ export class ColorPicker
   @Method()
   async setFocus(): Promise<void> {
     await componentLoaded(this);
-
-    return focusElement(this.colorFieldScopeNode);
+    this.el.focus();
   }
 
   //--------------------------------------------------------------------------
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
index 7f30e140650..ac7e1d40db1 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/date-picker/date-picker.tsx
@@ -42,7 +42,9 @@ import {
   assetsDirs: ["assets"],
   tag: "calcite-date-picker",
   styleUrl: "date-picker.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class DatePicker implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
diff --git a/src/components/dropdown-group/dropdown-group.tsx b/src/components/dropdown-group/dropdown-group.tsx
index 8ec96c32a68..c17c70c2fdc 100644
--- a/src/components/dropdown-group/dropdown-group.tsx
+++ b/src/components/dropdown-group/dropdown-group.tsx
@@ -20,7 +20,9 @@ import { CSS } from "./resources";
 @Component({
   tag: "calcite-dropdown-group",
   styleUrl: "dropdown-group.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class DropdownGroup {
   //--------------------------------------------------------------------------
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index b4eab4cef81..7cca2f1c879 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -47,7 +47,9 @@ import { isActivationKey } from "../../utils/key";
 @Component({
   tag: "calcite-dropdown",
   styleUrl: "dropdown.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   //--------------------------------------------------------------------------
diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx
index 4f9ea5910f1..0bba5bb1b34 100644
--- a/src/components/filter/filter.tsx
+++ b/src/components/filter/filter.tsx
@@ -14,7 +14,6 @@ import {
 import { debounce } from "lodash-es";
 import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources";
 import { Scale } from "../interfaces";
-import { focusElement } from "../../utils/dom";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import { filter } from "../../utils/filter";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -36,7 +35,9 @@ import {
 @Component({
   tag: "calcite-filter",
   styleUrl: "filter.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class Filter
@@ -184,7 +185,7 @@ export class Filter
   async setFocus(): Promise<void> {
     await componentLoaded(this);
 
-    focusElement(this.textInput);
+    this.el?.focus();
   }
 
   // --------------------------------------------------------------------------
diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx
index b1e13b00cd0..67d9c6e4552 100644
--- a/src/components/inline-editable/inline-editable.tsx
+++ b/src/components/inline-editable/inline-editable.tsx
@@ -38,7 +38,9 @@ import {
  */
 @Component({
   tag: "calcite-inline-editable",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   styleUrl: "inline-editable.scss",
   assetsDirs: ["assets"]
 })
@@ -291,11 +293,7 @@ export class InlineEditable
   async setFocus(): Promise<void> {
     await componentLoaded(this);
 
-    if (this.editingEnabled) {
-      this.inputElement?.setFocus();
-    } else {
-      this.enableEditingButton?.setFocus();
-    }
+    this.el?.focus();
   }
 
   //--------------------------------------------------------------------------
diff --git a/src/components/input-date-picker/input-date-picker.e2e.ts b/src/components/input-date-picker/input-date-picker.e2e.ts
index 55ab27d61cb..bb2a79eb85d 100644
--- a/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -428,8 +428,6 @@ describe("calcite-input-date-picker", () => {
     await page.waitForChanges();
     await page.keyboard.press("Tab");
     await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
     await datepickerEl.type("08/30/2022");
     await page.keyboard.press("Enter");
     await page.waitForChanges();
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
index 6cdbdf75ff9..f6ede9ccf85 100644
--- a/src/components/input-date-picker/input-date-picker.tsx
+++ b/src/components/input-date-picker/input-date-picker.tsx
@@ -73,7 +73,9 @@ import {
 @Component({
   tag: "calcite-input-date-picker",
   styleUrl: "input-date-picker.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class InputDatePicker
   implements
@@ -386,8 +388,7 @@ export class InputDatePicker
   @Method()
   async setFocus(): Promise<void> {
     await componentLoaded(this);
-
-    this.startInput?.setFocus();
+    this.el.focus();
   }
 
   /**
diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx
index 2e83417b955..63bca7869c1 100644
--- a/src/components/input-time-picker/input-time-picker.tsx
+++ b/src/components/input-time-picker/input-time-picker.tsx
@@ -45,7 +45,9 @@ import {
 @Component({
   tag: "calcite-input-time-picker",
   styleUrl: "input-time-picker.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class InputTimePicker
   implements
@@ -333,7 +335,7 @@ export class InputTimePicker
   async setFocus(): Promise<void> {
     await componentLoaded(this);
 
-    this.calciteInputEl?.setFocus();
+    this.el.focus();
   }
 
   /**
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 713f8cb201a..6ea7fdee911 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -39,7 +39,9 @@ export interface PaginationDetail {
 @Component({
   tag: "calcite-pagination",
   styleUrl: "pagination.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class Pagination implements LocalizedComponent, LocalizedComponent, T9nComponent {
diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx
index 7aee065eee2..fa04cf6636c 100644
--- a/src/components/radio-button-group/radio-button-group.tsx
+++ b/src/components/radio-button-group/radio-button-group.tsx
@@ -19,7 +19,9 @@ import { Layout, Scale } from "../interfaces";
 @Component({
   tag: "calcite-radio-button-group",
   styleUrl: "radio-button-group.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class RadioButtonGroup {
   //--------------------------------------------------------------------------
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index 9b23a70db9f..e12b31312f6 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -53,7 +53,9 @@ function isRange(value: number | number[]): value is number[] {
 @Component({
   tag: "calcite-slider",
   styleUrl: "slider.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class Slider
   implements
diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx
index 31475e10a87..479ffba93a0 100644
--- a/src/components/split-button/split-button.tsx
+++ b/src/components/split-button/split-button.tsx
@@ -11,7 +11,9 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac
 @Component({
   tag: "calcite-split-button",
   styleUrl: "split-button.scss",
-  shadow: true
+  shadow: {
+    delegatesFocus: true
+  }
 })
 export class SplitButton implements InteractiveComponent {
   @Element() el: HTMLCalciteSplitButtonElement;
diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx
index 3d8121accb3..f9e0936ef57 100644
--- a/src/components/time-picker/time-picker.tsx
+++ b/src/components/time-picker/time-picker.tsx
@@ -60,7 +60,9 @@ function capitalize(str: string): string {
 @Component({
   tag: "calcite-time-picker",
   styleUrl: "time-picker.scss",
-  shadow: true,
+  shadow: {
+    delegatesFocus: true
+  },
   assetsDirs: ["assets"]
 })
 export class TimePicker