diff --git a/.github/workflows/forward-merge.yml b/.github/workflows/forward-merge.yml
index 09fa97fdc6..9cb03d6f54 100644
--- a/.github/workflows/forward-merge.yml
+++ b/.github/workflows/forward-merge.yml
@@ -150,7 +150,7 @@ jobs:
         run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001
 
       - name: Integration tests
-        run: yarn cypress run --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges
+        run: yarn cypress run --component --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges
         env:
           # Github Actions doesn't support encryption on forks
           # If these keys become compromised, we will rotate and disable these features
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80b574e96d..b1ecb40b89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v12.0.9](https://github.com/Workday/canvas-kit/releases/tag/v12.0.9) (2024-11-04)
+
+### Components
+
+- fix: Add gap to overflow calculations ([#3029](https://github.com/Workday/canvas-kit/pull/3029)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.1.21](https://github.com/Workday/canvas-kit/releases/tag/v11.1.21) (2024-11-04)
+
+### Components
+
+- fix: Add gap to overflow calculations ([#3029](https://github.com/Workday/canvas-kit/pull/3029)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v12.0.8](https://github.com/Workday/canvas-kit/releases/tag/v12.0.8) (2024-11-04)
+
+### Infrastructure
+
+- ci: Updated forward merge yml ([#3027](https://github.com/Workday/canvas-kit/pull/3027)) ([@josh-bagwell](https://github.com/josh-bagwell))
+
+
+## [v12.0.7](https://github.com/Workday/canvas-kit/releases/tag/v12.0.7) (2024-11-04)
+
+### Components
+
+- fix: Update Select to open with spacebar ([#3006](https://github.com/Workday/canvas-kit/pull/3006)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@NicholasBoll](https://github.com/NicholasBoll))
+- fix: Add flex gap to overflow list calculations ([#3021](https://github.com/Workday/canvas-kit/pull/3021)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.1.20](https://github.com/Workday/canvas-kit/releases/tag/v11.1.20) (2024-11-04)
+
+### Components
+
+- fix: Add flex gap to overflow list calculations ([#3021](https://github.com/Workday/canvas-kit/pull/3021)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
 ## [v11.1.19](https://github.com/Workday/canvas-kit/releases/tag/v11.1.19) (2024-10-28)
 
 ### Components
diff --git a/lerna.json b/lerna.json
index ffcab38c74..cfb483318b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "12.0.6",
+  "version": "12.0.9",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {
diff --git a/modules/codemod/package.json b/modules/codemod/package.json
index 0754598f94..28ef5e45a1 100644
--- a/modules/codemod/package.json
+++ b/modules/codemod/package.json
@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
diff --git a/modules/css/package.json b/modules/css/package.json
index b4044b9398..1f73e2df58 100644
--- a/modules/css/package.json
+++ b/modules/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/docs/package.json b/modules/docs/package.json
index 72717ae07e..4e8c32fec9 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.6",
-    "@workday/canvas-kit-preview-react": "^12.0.6",
-    "@workday/canvas-kit-react": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-labs-react": "^12.0.9",
+    "@workday/canvas-kit-preview-react": "^12.0.9",
+    "@workday/canvas-kit-react": "^12.0.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json
index 82f9ca7f3c..07d6d86b73 100644
--- a/modules/labs-css/package.json
+++ b/modules/labs-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index b1aed49c81..25d1458ef7 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-react": "^12.0.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json
index 336718a724..a8bb5e89f5 100644
--- a/modules/popup-stack/package.json
+++ b/modules/popup-stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json
index 1d39d4e6b8..5981b6ac01 100644
--- a/modules/preview-css/package.json
+++ b/modules/preview-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index fbcf87b320..989f8ad8fc 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-react": "^12.0.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8"
diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json
index cebad9b078..9f9a6d14bc 100644
--- a/modules/react-fonts/package.json
+++ b/modules/react-fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/react/collection/lib/useOverflowListMeasure.ts b/modules/react/collection/lib/useOverflowListMeasure.ts
index b9fc1c2bc8..4dbf953efc 100644
--- a/modules/react/collection/lib/useOverflowListMeasure.ts
+++ b/modules/react/collection/lib/useOverflowListMeasure.ts
@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import {createElemPropsHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  useMountLayout,
+  useResizeObserver,
+  useLocalRef,
+} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
 
@@ -9,12 +14,21 @@ import {useOverflowListModel} from './useOverflowListModel';
  * overflow detection.
  */
 export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
-  const localRef = React.useRef(null);
-  const {ref: resizeRef} = useResizeObserver({
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+
+  useResizeObserver({
     ref: localRef,
     onResize: model.events.setContainerWidth,
   });
-  const elementRef = useForkRef(ref, resizeRef);
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.setContainerGap({
+        size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+      });
+    }
+  });
 
   return {
     ref: elementRef,
diff --git a/modules/react/collection/lib/useOverflowListModel.tsx b/modules/react/collection/lib/useOverflowListModel.tsx
index 8f4ea9b1f5..97e09cc304 100644
--- a/modules/react/collection/lib/useOverflowListModel.tsx
+++ b/modules/react/collection/lib/useOverflowListModel.tsx
@@ -6,10 +6,11 @@ import {Item} from './useBaseListModel';
 
 export function getHiddenIds(
   containerWidth: number,
+  containerGap: number,
   overflowTargetWidth: number,
   itemWidthCache: Record<string, number>,
   selectedIds: string[] | 'all',
-  items?: Item<any>[]
+  items: Item<any>[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
@@ -18,17 +19,22 @@ export function getHiddenIds(
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
+  /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+   * consecutive items */
+  let shouldAddGap = false;
+
   if (selectedIds !== 'all' && selectedIds.length) {
-    if (items?.length) {
+    if (items.length) {
       // If selectedIds[0] is not in items, use the first id from items
       selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
-    } else {
-      selectedKey = selectedIds[0];
     }
   }
 
   if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+    Object.keys(itemWidthCache).reduce(
+      (sum, key, index) => sum + itemWidthCache[key] + (index > 0 ? containerGap : 0),
+      0
+    ) <= containerWidth
   ) {
     // All items fit, return empty array
     return [];
@@ -39,6 +45,7 @@ export function getHiddenIds(
     } else {
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
       itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+      shouldAddGap = true;
     }
   } else {
     itemWidth += overflowTargetWidth;
@@ -46,7 +53,8 @@ export function getHiddenIds(
 
   for (const key in itemWidthCache) {
     if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
+      itemWidth += itemWidthCache[key] + (shouldAddGap ? containerGap : 0);
+      shouldAddGap = true;
       if (itemWidth > containerWidth) {
         hiddenIds.push(key);
       }
@@ -75,6 +83,7 @@ export const useOverflowListModel = createModelHook({
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
   const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
   const [containerWidth, setContainerWidth] = React.useState(0);
+  const [containerGap, setContainerGap] = React.useState(0);
   const containerWidthRef = React.useRef(0);
   const itemWidthCacheRef = React.useRef(itemWidthCache);
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
@@ -96,6 +105,7 @@ export const useOverflowListModel = createModelHook({
     hiddenIds: internalHiddenIds,
     itemWidthCache,
     containerWidth,
+    containerGap,
     overflowTargetWidth,
   };
 
@@ -105,6 +115,7 @@ export const useOverflowListModel = createModelHook({
       const {selectedIds} = model.selection.select(data.id, state);
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         selectedIds,
@@ -120,6 +131,21 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds,
+        config.items
+      );
+
+      setHiddenIds(ids);
+    },
+    setContainerGap(data: {size: number}) {
+      setContainerGap(data.size);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        data.size,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -142,6 +168,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -158,6 +185,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds !== 'all'
diff --git a/modules/react/collection/spec/useOverflowModel.spec.tsx b/modules/react/collection/spec/useOverflowModel.spec.tsx
index d45f00fffb..0bc2e41b0d 100644
--- a/modules/react/collection/spec/useOverflowModel.spec.tsx
+++ b/modules/react/collection/spec/useOverflowModel.spec.tsx
@@ -4,41 +4,89 @@ describe('useOverflowModel', () => {
   describe('getHiddenIds', () => {
     const itemWidthCache = {
       first: 100,
-      second: 100,
-      third: 100,
-      fourth: 100,
+      second: 150,
+      third: 200,
+      fourth: 250,
     };
     const overflowTargetWidth = 100;
 
-    const io = [
+    [
       {
         containerWidth: 100,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 199,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 200,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['second', 'third', 'fourth'],
       },
-      {containerWidth: 400, selected: 'first', hiddenIds: []},
-      {containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 700, gap: 0, selected: 'first', hiddenIds: []},
+      {containerWidth: 350, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 549, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 550, gap: 0, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 0,
+        selected: 'second',
+        hiddenIds: ['first', 'third', 'fourth'],
+      },
+      // gap
+      {
+        containerWidth: 100,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
+      {
+        containerWidth: 199,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
       {
         containerWidth: 200,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['second', 'third', 'fourth'],
+      },
+      {containerWidth: 729, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {containerWidth: 730, gap: 10, selected: 'first', hiddenIds: []},
+      {containerWidth: 360, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 559, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 570, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 10,
         selected: 'second',
         hiddenIds: ['first', 'third', 'fourth'],
       },
-    ].forEach(({containerWidth, hiddenIds, selected}) => {
+    ].forEach(({containerWidth, hiddenIds, gap, selected}) => {
       it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
         ', '
       )}] `, () => {
         expect(
-          getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
+          getHiddenIds(
+            containerWidth,
+            gap,
+            overflowTargetWidth,
+            itemWidthCache,
+            [selected],
+            [
+              {id: 'first', value: 'first', index: 0, textValue: 'first'},
+              {id: 'second', value: 'second', index: 1, textValue: 'second'},
+              {id: 'third', value: 'third', index: 2, textValue: 'third'},
+              {id: 'fourth', value: 'fourth', index: 3, textValue: 'fourth'},
+            ]
+          )
         ).toEqual(hiddenIds);
       });
     });
diff --git a/modules/react/package.json b/modules/react/package.json
index 0b3f0e7851..697e36b1b9 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-popup-stack": "^12.0.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 87c0b558f5..52e8e2390e 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling-transform",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-tokens-web": "^2.0.1",
     "stylis": "4.0.13",
     "ts-node": "^10.9.1",
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 844dd04d1a..5b557b95aa 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,7 +53,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.0.2",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.0.6",
+    "@workday/canvas-kit-react": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "typescript": "5.0"