diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index 5ab4d2a3967..dc242ad3f63 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -12,8 +12,8 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
+import { overflowActionsDebounceInMs, overflowActionsDebounceInMsExtended } from "../../utils/debounceValues";
 import { CSS, SLOTS } from "./resources";
-import { overflowActionsDebounceInMs } from "./utils";
 
 describe("calcite-action-bar", () => {
   describe("renders", () => {
@@ -423,7 +423,7 @@ describe("calcite-action-bar", () => {
           <calcite-action text="Table" icon="table"></calcite-action>`,
         );
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
       await page.waitForChanges();
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
@@ -454,7 +454,7 @@ describe("calcite-action-bar", () => {
         </div>`,
       );
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
@@ -462,7 +462,7 @@ describe("calcite-action-bar", () => {
       const actionBar = await page.find("calcite-action-bar");
       actionBar.setProperty("overflowActionsDisabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -490,7 +490,7 @@ describe("calcite-action-bar", () => {
           </calcite-action-bar>
         </div>`,
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -499,7 +499,7 @@ describe("calcite-action-bar", () => {
         element.style.height = "550px";
       });
 
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
       await page.waitForChanges();
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 21e37492fb7..5d2f20bf6a5 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -40,15 +40,10 @@ import {
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { overflowActionsDebounceInMs } from "../../utils/debounceValues";
 import { ActionBarMessages } from "./assets/action-bar/t9n";
 import { CSS, SLOTS } from "./resources";
-import {
-  geActionDimensions,
-  getOverflowCount,
-  overflowActions,
-  overflowActionsDebounceInMs,
-  queryActions,
-} from "./utils";
+import { geActionDimensions, getOverflowCount, overflowActions, queryActions } from "./utils";
 
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
diff --git a/packages/calcite-components/src/components/action-bar/utils.ts b/packages/calcite-components/src/components/action-bar/utils.ts
index 3e1d00be951..b41e2994f6a 100644
--- a/packages/calcite-components/src/components/action-bar/utils.ts
+++ b/packages/calcite-components/src/components/action-bar/utils.ts
@@ -3,7 +3,6 @@ import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout } from "../interfaces";
 
-export const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 
 const getAverage = (arr: number[]) => arr.reduce((p, c) => p + c, 0) / arr.length;
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 8c7506bf9a2..479b8982e72 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -56,6 +56,7 @@ import {
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { comboboxFilterDebounceInMs } from "../../utils/debounceValues";
 import {
   connectMessages,
   disconnectMessages,
@@ -1129,7 +1130,7 @@ export class Combobox
       if (emit) {
         this.calciteComboboxFilterChange.emit();
       }
-    }, 100);
+    }, comboboxFilterDebounceInMs);
   })();
 
   internalComboboxChangeEvent = (): void => {
diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts
index 45d9961c93e..f9ef6f172ba 100644
--- a/packages/calcite-components/src/components/filter/filter.e2e.ts
+++ b/packages/calcite-components/src/components/filter/filter.e2e.ts
@@ -1,7 +1,7 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
 import { CSS as INPUT_CSS } from "../input/resources";
-import { DEBOUNCE_TIMEOUT } from "./resources";
+import { filterDebounceInMs } from "../../utils/debounceValues";
 
 describe("calcite-filter", () => {
   describe("renders", () => {
@@ -190,7 +190,7 @@ describe("calcite-filter", () => {
     it("updates filtered items after filtering", async () => {
       const filter = await page.find("calcite-filter");
       const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       await page.waitForChanges();
 
       expect(filterChangeSpy).toHaveReceivedEventTimes(0);
@@ -215,7 +215,7 @@ describe("calcite-filter", () => {
       await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => {
         filter.items = filter.items.slice(3);
       });
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       await page.waitForChanges();
 
       assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
@@ -274,7 +274,7 @@ describe("calcite-filter", () => {
 
     it("should return matching value", async () => {
       const filter = await page.find("calcite-filter");
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
     });
 
@@ -282,7 +282,7 @@ describe("calcite-filter", () => {
       const filter = await page.find("calcite-filter");
       filter.setProperty("filterProps", ["description"]);
       await page.waitForChanges();
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       assertMatchingItems(await filter.getProperty("filteredItems"), []);
     });
   });
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 9635f41daad..e2289a74eff 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -34,8 +34,9 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Scale } from "../interfaces";
+import { filterDebounceInMs } from "../../utils/debounceValues";
 import { FilterMessages } from "./assets/filter/t9n";
-import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources";
+import { CSS, ICONS } from "./resources";
 
 @Component({
   tag: "calcite-filter",
@@ -235,7 +236,7 @@ export class Filter
     (value: string, emit = false, onFilter?: () => void): void =>
       this.items.length &&
       this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),
-    DEBOUNCE_TIMEOUT,
+    filterDebounceInMs,
   );
 
   inputHandler = (event: CustomEvent): void => {
diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts
index 0adab7cd3b8..cf06f61b465 100644
--- a/packages/calcite-components/src/components/filter/resources.ts
+++ b/packages/calcite-components/src/components/filter/resources.ts
@@ -7,5 +7,3 @@ export const ICONS = {
   search: "search",
   close: "x",
 } as const;
-
-export const DEBOUNCE_TIMEOUT = 250;
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index eb5e128e9dc..ed2e7cbf8d0 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -3,9 +3,8 @@ import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources";
-import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
-import { debounceTimeout } from "./resources";
+import { listDebounceInMs, noDebounce } from "../../utils/debounceValues";
 import { ListDragDetail } from "./interfaces";
 
 const placeholder = placeholderImage({
@@ -13,8 +12,6 @@ const placeholder = placeholderImage({
   height: 100,
 });
 
-const listDebounceTimeout = debounceTimeout + FILTER_DEBOUNCE_TIMEOUT;
-
 describe("calcite-list", () => {
   describe("defaults", () => {
     defaults("calcite-list", [
@@ -154,7 +151,7 @@ describe("calcite-list", () => {
       );
 
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
 
       let dragHandleValues = [true, false, true, true, false, true, true];
 
@@ -170,7 +167,7 @@ describe("calcite-list", () => {
 
       rootList.setProperty("dragEnabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
 
       dragHandleValues = [false, false, true, true, false, false, false];
 
@@ -210,7 +207,7 @@ describe("calcite-list", () => {
       );
 
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
 
       let dragHandleValues = [true, false, true, true, false, true, true];
 
@@ -226,7 +223,7 @@ describe("calcite-list", () => {
 
       rootList.setProperty("dragEnabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
 
       dragHandleValues = [false, false, true, true, false, false, false];
 
@@ -341,7 +338,7 @@ describe("calcite-list", () => {
     await page.waitForChanges();
     const list = await page.find("calcite-list");
     const filter = await page.find(`calcite-list >>> calcite-filter`);
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(await list.getProperty("filteredItems")).toHaveLength(2);
     expect(await list.getProperty("filteredData")).toHaveLength(2);
     expect(await list.getProperty("filterText")).toBeUndefined();
@@ -352,7 +349,7 @@ describe("calcite-list", () => {
     const calciteListFilterEvent = list.waitForEvent("calciteListFilter");
     await page.keyboard.type("one");
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     await calciteListFilterEvent;
     expect(await list.getProperty("filteredItems")).toHaveLength(1);
     expect(await list.getProperty("filteredData")).toHaveLength(1);
@@ -366,7 +363,7 @@ describe("calcite-list", () => {
     const calciteListFilterEvent2 = list.waitForEvent("calciteListFilter");
     await page.keyboard.type("two");
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     await calciteListFilterEvent2;
     expect(await list.getProperty("filteredItems")).toHaveLength(1);
     expect(await list.getProperty("filteredData")).toHaveLength(1);
@@ -375,7 +372,7 @@ describe("calcite-list", () => {
     const calciteListFilterEvent3 = list.waitForEvent("calciteListFilter");
     await page.keyboard.type(" blah");
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     await calciteListFilterEvent3;
     expect(await list.getProperty("filteredItems")).toHaveLength(0);
     expect(await list.getProperty("filteredData")).toHaveLength(0);
@@ -401,14 +398,14 @@ describe("calcite-list", () => {
 
     const list = await page.find("calcite-list");
     const listItems = await page.findAll("calcite-list-item");
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(await list.getProperty("filteredItems")).toHaveLength(3);
     expect(await list.getProperty("filteredData")).toHaveLength(3);
     expect(await list.getProperty("filterText")).toBeUndefined();
 
     listItems[0].setProperty("selected", true);
     list.setProperty("filterText", "two");
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     await page.waitForChanges();
     let selectedItemValues = await getSelectedItemValues();
     expect(selectedItemValues).toHaveLength(1);
@@ -423,7 +420,7 @@ describe("calcite-list", () => {
 
     list.setProperty("filterText", "three");
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     listItems[2].setProperty("selected", true);
     await page.waitForChanges();
     selectedItemValues = await getSelectedItemValues();
@@ -473,7 +470,7 @@ describe("calcite-list", () => {
 
     await page.waitForChanges();
     const list = await page.find("calcite-list");
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     expect(await list.getProperty("filteredItems")).toHaveLength(3);
     expect(await list.getProperty("filteredData")).toHaveLength(3);
@@ -518,7 +515,7 @@ describe("calcite-list", () => {
     const list = await page.find("calcite-list");
     list.setProperty("filterProps", ["label", "description"]);
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     expect(await list.getProperty("filteredItems")).toHaveLength(2);
     expect(await list.getProperty("filteredData")).toHaveLength(2);
@@ -543,7 +540,7 @@ describe("calcite-list", () => {
       </calcite-list>`,
     );
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     const list = await page.find("calcite-list");
     const items = await page.findAll("calcite-list-item");
@@ -558,7 +555,7 @@ describe("calcite-list", () => {
     await items[0].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(1);
     expect(await list.getProperty("selectedItems")).toHaveLength(1);
 
@@ -569,7 +566,7 @@ describe("calcite-list", () => {
 
     await page.$eval("#item-4", clickItemContent, `.${ListItemCSS.contentContainer}`);
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(2);
     expect(await list.getProperty("selectedItems")).toHaveLength(4);
 
@@ -581,7 +578,7 @@ describe("calcite-list", () => {
     await items[3].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(3);
     expect(await list.getProperty("selectedItems")).toHaveLength(3);
 
@@ -592,7 +589,7 @@ describe("calcite-list", () => {
 
     await page.$eval("#item-1", clickItemContent, `.${ListItemCSS.contentContainer}`);
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(4);
     expect(await list.getProperty("selectedItems")).toHaveLength(0);
 
@@ -612,7 +609,7 @@ describe("calcite-list", () => {
       </calcite-list>`,
     );
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     const list = await page.find("calcite-list");
     const items = await page.findAll("calcite-list-item");
@@ -626,7 +623,7 @@ describe("calcite-list", () => {
     await items[1].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(1);
 
     expect(await items[0].getProperty("active")).toBe(false);
@@ -645,7 +642,7 @@ describe("calcite-list", () => {
     );
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     const items = await page.findAll("calcite-list-item");
 
@@ -658,7 +655,7 @@ describe("calcite-list", () => {
     await items[2].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(1);
 
     expect(await items[0].getProperty("selected")).toBe(false);
@@ -677,7 +674,7 @@ describe("calcite-list", () => {
     );
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
 
     const items = await page.findAll("calcite-list-item");
 
@@ -690,7 +687,7 @@ describe("calcite-list", () => {
     await items[2].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(1);
 
     expect(await items[0].getProperty("selected")).toBe(false);
@@ -700,7 +697,7 @@ describe("calcite-list", () => {
     await items[0].click();
 
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(eventSpy).toHaveReceivedEventTimes(2);
 
     expect(await items[0].getProperty("selected")).toBe(true);
@@ -738,13 +735,13 @@ describe("calcite-list", () => {
 
     listItemOne.setProperty("selected", true);
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(await listItemOne.getProperty("selected")).toBe(true);
     expect(await list.getProperty("selectedItems")).toHaveLength(1);
 
     listItemOne.setProperty("selected", false);
     await page.waitForChanges();
-    await page.waitForTimeout(listDebounceTimeout);
+    await page.waitForTimeout(listDebounceInMs);
     expect(await listItemOne.getProperty("selected")).toBe(false);
     expect(await list.getProperty("selectedItems")).toHaveLength(0);
   });
@@ -829,7 +826,7 @@ describe("calcite-list", () => {
       const listItemThree = await page.find("#three");
       listItemThree.setProperty("disabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
       expect(calciteListChange).toHaveReceivedEventTimes(0);
 
       await list.press("ArrowDown");
@@ -839,7 +836,7 @@ describe("calcite-list", () => {
       const listItemFour = await page.find("#four");
       listItemFour.setProperty("closed", false);
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
       expect(calciteListChange).toHaveReceivedEventTimes(0);
 
       await list.press("ArrowDown");
@@ -869,7 +866,7 @@ describe("calcite-list", () => {
       `);
       await page.waitForChanges();
       const list = await page.find("calcite-list");
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
       await list.callMethod("setFocus");
       await page.waitForChanges();
 
@@ -1111,7 +1108,7 @@ describe("calcite-list", () => {
       await secondDragHandle.click();
 
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
 
       expect(await items[0].getProperty("active")).toBe(false);
       expect(await items[1].getProperty("active")).toBe(true);
@@ -1131,7 +1128,7 @@ describe("calcite-list", () => {
         </calcite-list>`,
       );
       await page.waitForChanges();
-      await page.waitForTimeout(listDebounceTimeout);
+      await page.waitForTimeout(listDebounceInMs);
       return page;
     }
 
@@ -1448,7 +1445,7 @@ describe("calcite-list", () => {
       await page.keyboard.press("ArrowDown");
       await page.waitForChanges();
       expect(await handle.getProperty("selected")).toBe(true);
-      await page.waitForTimeout(debounceTimeout);
+      await page.waitForTimeout(noDebounce);
 
       startIndex += 1;
       const changeHandleLabel = await getAriaLabel();
diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index a3a3d6d26f3..8a4a02bdf3d 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -72,17 +72,25 @@
         <div class="child right-aligned-text">action with text</div>
 
         <div class="child">
-          <calcite-action
-            scale="s"
-            indicator
-            active
-            text="click-me"
-            label="hello world"
-            text-enabled
-            icon="configure-popup"
-          >
-            <calcite-tooltip slot="tooltip">Hello World!</calcite-tooltip>
-          </calcite-action>
+          <div style="width: 500px; height: 500px">
+            <calcite-action-bar style="height: 290px">
+              <calcite-action-group id="dynamic-group"
+                ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
+                <calcite-action id="second-action" text="Styles" icon="shapes"></calcite-action>
+                <calcite-action text="Styles" icon="shapes"></calcite-action>
+                <calcite-action text="Filter" icon="layer-filter"></calcite-action>
+                <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
+                <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
+                <calcite-action text="Labels" icon="label" active></calcite-action>
+                <calcite-action text="Table" icon="table"></calcite-action>
+              </calcite-action-group>
+              <calcite-action-group>
+                <calcite-action text="Save" icon="save" disabled></calcite-action>
+                <calcite-action icon="layers" text="Layers"></calcite-action>
+              </calcite-action-group>
+              <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
+            </calcite-action-bar>
+          </div>
         </div>
 
         <div class="child">
diff --git a/packages/calcite-components/src/utils/debounceValues.ts b/packages/calcite-components/src/utils/debounceValues.ts
new file mode 100644
index 00000000000..644558603ef
--- /dev/null
+++ b/packages/calcite-components/src/utils/debounceValues.ts
@@ -0,0 +1,32 @@
+// Resizing Debounce
+// - Usecase: The `debounce` function ensures that the `resize` method is not called more often than the specified milliseconds, regardless of how frequently the resize event is triggered.
+// - Use in the Component:
+
+// Action-bar resize method is called with debounce when it overflows actions that won't fit into menus.
+export const overflowActionsDebounceInMs = 150;
+export const overflowActionsDebounceInMsExtended = overflowActionsDebounceInMs + 10;
+
+// Filtering Debounce
+// - UseCase: As the user types to filter the options, each keystroke could potentially trigger a filtering operation. By debouncing, the code waits until the user pauses typing before executing the filtering logic, thereby reducing the number of executions and improving performance.
+// - Use in the Component:
+
+// Combobox filtering method is called with debounce.
+export const comboboxFilterDebounceInMs = 100;
+
+// Filter `updateFiltered` method is called with debounce.
+export const filterDebounceInMs = 250;
+
+// List `updateListItems` method is called with debounce.
+export const noDebounce = 0;
+export const listDebounceInMs = noDebounce + filterDebounceInMs;
+
+// UI Reposition Debounce- UseCase: In scenarios where multiple reposition requests might be made in quick succession (e.g., due to rapid UI changes), calling debounce helps in optimizing performance by reducing unnecessary computations and re-renderings.
+// - Use in the Component:
+// Floating-ui `positionFloatingUI` is called with debounce.
+export const repositionDebounceInMs = 100;
+
+// Drag Debounce
+// UseCase: Methods can fire frequently during drag. To perform expensive operations consider using a debounce to avoid locking up the main thread.
+// Use in the Component:
+
+// TODO: Slider `calciteSliderInput`
diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
index 8562a9f99f9..b455b7e4486 100644
--- a/packages/calcite-components/src/utils/floating-ui.spec.ts
+++ b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -1,4 +1,5 @@
 import { waitForAnimationFrame } from "../tests/utils";
+import { repositionDebounceInMs } from "./debounceValues";
 import * as floatingUI from "./floating-ui";
 import { FloatingUIComponent } from "./floating-ui";
 
@@ -13,7 +14,6 @@ const {
   placements,
   positionFloatingUI,
   reposition,
-  repositionDebounceTimeout,
 } = floatingUI;
 
 it("should set calcite placement to FloatingUI placement", () => {
@@ -122,7 +122,7 @@ describe("repositioning", () => {
 
     assertPreOpenPositioning(floatingEl);
 
-    await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceTimeout));
+    await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceInMs));
     assertOpenPositioning(floatingEl);
   });
 
@@ -139,7 +139,7 @@ describe("repositioning", () => {
     floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true);
     expect(positionSpy).toHaveBeenCalledTimes(2);
 
-    await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceTimeout));
+    await new Promise<void>((resolve) => setTimeout(resolve, repositionDebounceInMs));
     expect(positionSpy).toHaveBeenCalledTimes(2);
   });
 });
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index 00275044003..6cf57c3718d 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -18,6 +18,7 @@ import { Build } from "@stencil/core";
 import { debounce, DebouncedFunc } from "lodash-es";
 import { offsetParent } from "composed-offset-position";
 import { Layout } from "../components/interfaces";
+import { repositionDebounceInMs } from "./debounceValues";
 import { getElementDir } from "./dom";
 
 (function setUpFloatingUiForShadowDomPositioning(): void {
@@ -167,11 +168,6 @@ export const positionFloatingUI =
  */
 export const placementDataAttribute = "data-placement";
 
-/**
- * Exported for testing purposes only
- */
-export const repositionDebounceTimeout = 100;
-
 export type ReferenceElement = VirtualElement | Element;
 
 type UIType = "menu" | "tooltip" | "popover";
@@ -457,9 +453,9 @@ function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc<t
     return debounced;
   }
 
-  debounced = debounce(positionFloatingUI, repositionDebounceTimeout, {
+  debounced = debounce(positionFloatingUI, repositionDebounceInMs, {
     leading: true,
-    maxWait: repositionDebounceTimeout,
+    maxWait: repositionDebounceInMs,
   });
 
   componentToDebouncedRepositionMap.set(component, debounced);