diff --git a/pages/app-layout/disable-paddings-breadcrumbs.page.tsx b/pages/app-layout/disable-paddings-breadcrumbs.page.tsx
index e9d78921b7..aa1a396897 100644
--- a/pages/app-layout/disable-paddings-breadcrumbs.page.tsx
+++ b/pages/app-layout/disable-paddings-breadcrumbs.page.tsx
@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import clsx from 'clsx';
 
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
@@ -17,7 +16,7 @@ export default function () {
       <AppLayout
         ariaLabels={labels}
         disableContentPaddings={true}
-        breadcrumbs={<div className={clsx(styles.highlightBorder, styles.textContent)}>Breadcrumbs</div>}
+        breadcrumbs={<div className={styles.highlightBorder}>Breadcrumbs</div>}
         notifications={
           <div className={styles.highlightBorder}>
             <Box variant="h2">Notifications</Box>
diff --git a/pages/app-layout/navigation-with-scrollbar.page.tsx b/pages/app-layout/navigation-with-scrollbar.page.tsx
new file mode 100644
index 0000000000..19d74ee74f
--- /dev/null
+++ b/pages/app-layout/navigation-with-scrollbar.page.tsx
@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import AppLayout from '~components/app-layout';
+import Select from '~components/select';
+import SideNavigation, { SideNavigationProps } from '~components/side-navigation';
+
+import labels from './utils/labels';
+
+const items: SideNavigationProps.Item[] = new Array(50).fill(null).map((_, index) => ({
+  type: 'link',
+  text: `Link to page ${index + 1} with long enough text to wrap`,
+  href: '#',
+}));
+
+const itemsControl = (
+  <Select
+    options={[
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ]}
+    selectedOption={{ value: 'option1', label: 'Option 1' }}
+    onChange={() => null}
+  />
+);
+
+export default function SideNavigationPage() {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <AppLayout
+      navigationOpen={open}
+      onNavigationChange={({ detail }) => {
+        setOpen(detail.open);
+      }}
+      ariaLabels={labels}
+      navigation={
+        <SideNavigation
+          header={{
+            href: '#/',
+            text: 'Header title',
+          }}
+          items={items}
+          itemsControl={itemsControl}
+        />
+      }
+      content={
+        <>
+          <h1>App Layout with scrollable Side navigation</h1>
+        </>
+      }
+    />
+  );
+}
diff --git a/pages/app-layout/runtime-drawers-persist-open-state.page.tsx b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx
new file mode 100644
index 0000000000..d23fdcb162
--- /dev/null
+++ b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx
@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import AppLayout from '~components/app-layout';
+import Header from '~components/header';
+import HelpPanel from '~components/help-panel';
+import awsuiPlugins from '~components/internal/plugins';
+
+import { Breadcrumbs, Counter } from './utils/content-blocks';
+import appLayoutLabels from './utils/labels';
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'runtime-drawer-persist-open-state',
+  type: 'global',
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <rect fill="currentColor" x="5" y="5" width="6" height="6" />
+    </svg>`,
+  },
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  mountContent: (container, { onVisibilityChange }) => {
+    awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: true });
+    onVisibilityChange(isVisible => {
+      awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: isVisible });
+    });
+    render(<Counter id="runtime-drawer-persist-open-state" />, container);
+  },
+  unmountContent: container => {
+    unmountComponentAtNode(container);
+  },
+});
+
+export default function () {
+  const [key, setKey] = useState(0);
+  return (
+    <AppLayout
+      key={key}
+      ariaLabels={appLayoutLabels}
+      breadcrumbs={<Breadcrumbs />}
+      content={
+        <>
+          <Header variant="h1" description="This drawer can automatically reopen after app layout instance changes">
+            Drawer with state persistence
+          </Header>
+          <button data-testid="remount-app-layout" onClick={() => setKey(key => key + 1)}>
+            Remount app layout
+          </button>
+        </>
+      }
+      tools={<HelpPanel header={<h2>Info</h2>}>Here is some info for you</HelpPanel>}
+    />
+  );
+}
diff --git a/pages/app-layout/stateful.page.tsx b/pages/app-layout/stateful.page.tsx
index 3f34f9abc3..c9c3d00aa2 100644
--- a/pages/app-layout/stateful.page.tsx
+++ b/pages/app-layout/stateful.page.tsx
@@ -1,26 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React from 'react';
 
 import AppLayout from '~components/app-layout';
 import Header from '~components/header';
 
+import { Counter } from './utils/content-blocks';
 import labels from './utils/labels';
 
-import styles from './styles.scss';
-
-function Counter({ id }: { id: string }) {
-  const [count, setCount] = useState(0);
-  return (
-    <div className={styles.textContent}>
-      <span id={`${id}-text`}>Clicked: {count}</span>
-      <button id={`${id}-button`} onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-    </div>
-  );
-}
-
 export default function AppLayoutStatefulDemo() {
   return (
     <AppLayout
diff --git a/pages/app-layout/styles.scss b/pages/app-layout/styles.scss
index 597b003c85..020694d140 100644
--- a/pages/app-layout/styles.scss
+++ b/pages/app-layout/styles.scss
@@ -35,10 +35,6 @@
   border-inline: 1px solid red;
 }
 
-.textContent {
-  color: awsui.$color-text-body-default;
-}
-
 .longContent {
   block-size: 200vh;
 }
diff --git a/pages/app-layout/utils/content-blocks.tsx b/pages/app-layout/utils/content-blocks.tsx
index 8145c7538b..b1ca229395 100644
--- a/pages/app-layout/utils/content-blocks.tsx
+++ b/pages/app-layout/utils/content-blocks.tsx
@@ -195,3 +195,15 @@ export function CustomDrawerContent() {
     </div>
   );
 }
+
+export function Counter({ id }: { id: string }) {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <span id={`${id}-text`}>Clicked: {count}</span>
+      <button id={`${id}-button`} onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
diff --git a/pages/app-layout/utils/external-widget.tsx b/pages/app-layout/utils/external-widget.tsx
index 0cf2090b05..677b572706 100644
--- a/pages/app-layout/utils/external-widget.tsx
+++ b/pages/app-layout/utils/external-widget.tsx
@@ -6,7 +6,7 @@ import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 import Drawer from '~components/drawer';
 import awsuiPlugins from '~components/internal/plugins';
 
-import { CustomDrawerContent } from './content-blocks';
+import { Counter, CustomDrawerContent } from './content-blocks';
 
 const searchParams = new URL(location.hash.substring(1), location.href).searchParams;
 
@@ -46,6 +46,9 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   defaultActive: !!searchParams.get('force-default-active'),
+  onToggle: event => {
+    console.log('security drawer on toggle', event.detail);
+  },
 
   resizable: true,
   defaultSize: 320,
@@ -84,18 +87,6 @@ awsuiPlugins.appLayout.registerDrawer({
   unmountContent: container => unmountComponentAtNode(container),
 });
 
-const Counter: React.FC = ({ children }) => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <span data-testid="count">{count}</span>
-      <button onClick={() => setCount(count + 1)}>+</button>
-      {children}
-    </div>
-  );
-};
-
 const AutoIncrementCounter: React.FC<{
   onVisibilityChange?: (callback: (isVisible: boolean) => void) => void;
 }> = ({ children, onVisibilityChange }) => {
@@ -143,6 +134,9 @@ awsuiPlugins.appLayout.registerDrawer({
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
   },
+  onToggle: event => {
+    console.log('circle-global drawer on toggle', event.detail);
+  },
 
   trigger: {
     iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
@@ -192,7 +186,13 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<Counter>global widget content circle 2</Counter>, container);
+    ReactDOM.render(
+      <>
+        <Counter id="circle2-global" />
+        global widget content circle 2
+      </>,
+      container
+    );
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
@@ -219,7 +219,13 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<Counter>global widget content circle 3</Counter>, container);
+    ReactDOM.render(
+      <>
+        <Counter id="circle3-global" />
+        global widget content circle 3
+      </>,
+      container
+    );
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
@@ -237,6 +243,9 @@ awsuiPlugins.appLayout.registerDrawer({
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
   },
+  onToggle: event => {
+    console.log('circle4-global drawer on toggle', event.detail);
+  },
 
   mountContent: container => {
     ReactDOM.render(<CustomDrawerContent />, container);
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 85bae0905c..24eae3e9c2 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -2684,7 +2684,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
   "color-background-cell-shaded": "#f6f6f9",
-  "color-background-chat-bubble-incoming": "#f3f3f7",
+  "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
   "color-background-code-editor-gutter-active-line-default": "#656871",
   "color-background-code-editor-gutter-active-line-error": "#db0000",
@@ -3341,7 +3341,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
   "color-background-cell-shaded": "#f6f6f9",
-  "color-background-chat-bubble-incoming": "#f3f3f7",
+  "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
   "color-background-code-editor-gutter-active-line-default": "#656871",
   "color-background-code-editor-gutter-active-line-error": "#db0000",
diff --git a/src/__integ__/use-browser-with-scrollbars.ts b/src/__integ__/use-browser-with-scrollbars.ts
new file mode 100644
index 0000000000..aa88056c02
--- /dev/null
+++ b/src/__integ__/use-browser-with-scrollbars.ts
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+// Workaround until scrollbars are generally shown in tests (AWSUI-59983)
+
+interface TestFunction {
+  (browser: WebdriverIO.Browser): Promise<void> | void;
+}
+
+const options = {
+  capabilities: {
+    'goog:chromeOptions': {
+      args: [
+        // Same array as in
+        // https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
+        // but without --hide-scrollbar.
+        '--disable-background-timer-throttling',
+        '--disable-breakpad',
+        '--disable-client-side-phishing-detection',
+        '--disable-cloud-import',
+        '--disable-default-apps',
+        '--disable-dev-shm-usage',
+        '--disable-extensions',
+        '--disable-gesture-typing',
+        '--disable-hang-monitor',
+        '--disable-infobars',
+        '--disable-notifications',
+        '--disable-offer-store-unmasked-wallet-cards',
+        '--disable-offer-upload-credit-cards',
+        '--disable-popup-blocking',
+        '--disable-print-preview',
+        '--disable-prompt-on-repost',
+        '--disable-setuid-sandbox',
+        '--disable-speech-api',
+        '--disable-sync',
+        '--disable-tab-for-desktop-share',
+        '--disable-translate',
+        '--disable-voice-input',
+        '--disable-wake-on-wifi',
+        '--disk-cache-size=33554432',
+        '--enable-async-dns',
+        '--enable-simple-cache-backend',
+        '--enable-tcp-fast-open',
+        '--enable-webgl',
+        '--ignore-gpu-blacklist',
+        '--media-cache-size=33554432',
+        '--metrics-recording-only',
+        '--mute-audio',
+        '--no-default-browser-check',
+        '--no-first-run',
+        '--no-pings',
+        '--no-zygote',
+        '--password-store=basic',
+        '--prerender-from-omnibox=disabled',
+        '--no-sandbox',
+        '--disable-gpu',
+        '--headless=new',
+      ],
+    },
+  },
+};
+
+export default function (testFn: TestFunction): () => Promise<void> {
+  return useBrowser(options, testFn);
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index eab495412b..39b80dc307 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -17722,7 +17722,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#f3f3f7",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -22740,7 +22740,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#f3f3f7",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -25249,7 +25249,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#f3f3f7",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -27758,7 +27758,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of \`incoming\` chat bubble.",
           "$value": {
             "dark": "#0f141a",
-            "light": "#f3f3f7",
+            "light": "#f6f6f9",
           },
         },
         "color-background-chat-bubble-outgoing": {
@@ -35285,7 +35285,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The background color of \`incoming\` chat bubble.",
       "$value": {
         "dark": "#0f141a",
-        "light": "#f3f3f7",
+        "light": "#f6f6f9",
       },
     },
     "color-background-chat-bubble-outgoing": {
diff --git a/src/app-layout/__integ__/navigation.test.ts b/src/app-layout/__integ__/navigation.test.ts
new file mode 100644
index 0000000000..9560b12cac
--- /dev/null
+++ b/src/app-layout/__integ__/navigation.test.ts
@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowserWithScrollbars from '../../__integ__/use-browser-with-scrollbars';
+import { getUrlParams, Theme } from './utils';
+
+const wrapper = createWrapper().findAppLayout().findNavigation();
+
+function setupTest(testFn: (page: BasePageObject) => Promise<void>, theme: Theme) {
+  return useBrowserWithScrollbars(async browser => {
+    const page = new BasePageObject(browser);
+    const params = getUrlParams(theme);
+    await browser.url(`#/light/app-layout/navigation-with-scrollbar?${params}`);
+    await page.waitForVisible(createWrapper().findSideNavigation().toSelector());
+    await testFn(page);
+  })();
+}
+
+describe('Navigation slot', () => {
+  describe('has expected inline size when a scrollbar is present', () => {
+    test.each(['classic', 'refresh-toolbar'] as const)('%s', theme =>
+      setupTest(async page => {
+        const { width } = await page.getBoundingBox(wrapper.toSelector());
+        expect(width).toBe(280);
+        const navigation = wrapper.findSideNavigation();
+        const navigationWidth = (await page.getBoundingBox(navigation.toSelector())).width;
+        expect(navigationWidth).toBeLessThan(280);
+      }, theme)
+    );
+  });
+});
diff --git a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
index 879811e2e5..b74e4f6e41 100644
--- a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
@@ -142,10 +142,12 @@ describe('toolbar mode only features', () => {
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
       });
+      const onToggle = jest.fn();
       awsuiPlugins.appLayout.registerDrawer({
         ...drawerDefaults,
         id: 'local-drawer',
         defaultActive: true,
+        onToggle: event => onToggle(event.detail),
         mountContent: container => (container.textContent = 'local-drawer content'),
       });
       awsuiPlugins.appLayout.registerDrawer({
@@ -175,6 +177,7 @@ describe('toolbar mode only features', () => {
       expect(globalDrawersWrapper.findActiveDrawers()[1].getElement()).toHaveTextContent('global drawer content 1');
 
       wrapper.findDrawerTriggerById('global-drawer-2')!.click();
+      expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
 
       await delay();
 
diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx
index ac341450f9..610af890b7 100644
--- a/src/app-layout/__tests__/runtime-drawers.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers.test.tsx
@@ -216,6 +216,20 @@ describeEachAppLayout(({ theme, size }) => {
     expect(onResize).toHaveBeenCalledWith({ size: expect.any(Number), id: drawerDefaults.id });
   });
 
+  test('calls onToggle handler (local runtime drawer)', async () => {
+    const onToggle = jest.fn();
+    awsuiPlugins.appLayout.registerDrawer({
+      ...drawerDefaults,
+      onToggle: event => onToggle(event.detail),
+    });
+    const { wrapper } = await renderComponent(<AppLayout />);
+
+    wrapper.findDrawerTriggerById(drawerDefaults.id)!.click();
+    expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction: true });
+    wrapper.findActiveDrawerCloseButton()!.click();
+    expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
+  });
+
   test('supports badge property', async () => {
     awsuiPlugins.appLayout.registerDrawer({
       ...drawerDefaults,
@@ -1117,6 +1131,41 @@ describe('toolbar mode only features', () => {
       expect(wrapper.findDrawerTriggerById('global1')!.getElement()).toBeInTheDocument();
     });
 
+    test('calls onToggle handler by clicking on drawers trigger button (global runtime drawers)', async () => {
+      const onToggle = jest.fn();
+      awsuiPlugins.appLayout.registerDrawer({
+        ...drawerDefaults,
+        id: 'global-drawer',
+        type: 'global',
+        onToggle: event => onToggle(event.detail),
+      });
+      const { wrapper } = await renderComponent(<AppLayout />);
+
+      wrapper.findDrawerTriggerById('global-drawer')!.click();
+      expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction: true });
+      wrapper.findDrawerTriggerById('global-drawer')!.click();
+      expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
+    });
+
+    test.each([true, false] as const)(
+      'calls onToggle handler by calling openDrawer and closeDrawer plugin api (global runtime drawers) initiatedByUserAction = %s',
+      async initiatedByUserAction => {
+        const onToggle = jest.fn();
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer',
+          type: 'global',
+          onToggle: event => onToggle(event.detail),
+        });
+        await renderComponent(<AppLayout />);
+
+        awsuiPlugins.appLayout.openDrawer('global-drawer', { initiatedByUserAction });
+        expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction });
+        awsuiPlugins.appLayout.closeDrawer('global-drawer', { initiatedByUserAction });
+        expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction });
+      }
+    );
+
     describe('dynamically registered drawers with defaultActive: true', () => {
       test('should open if there are already open local drawer on the page', async () => {
         const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
diff --git a/src/app-layout/classic.tsx b/src/app-layout/classic.tsx
index 7070ce5f01..57a62820d1 100644
--- a/src/app-layout/classic.tsx
+++ b/src/app-layout/classic.tsx
@@ -408,7 +408,7 @@ const ClassicAppLayout = React.forwardRef(
             drawers={drawers}
             activeDrawerId={activeDrawerId}
             onDrawerChange={newDrawerId => {
-              onActiveDrawerChange(newDrawerId);
+              onActiveDrawerChange(newDrawerId, { initiatedByUserAction: true });
               if (newDrawerId !== activeDrawerId) {
                 focusToolsButtons();
                 focusDrawersButtons();
@@ -544,7 +544,7 @@ const ClassicAppLayout = React.forwardRef(
                 if (!isOpen) {
                   focusToolsButtons();
                   focusDrawersButtons();
-                  onActiveDrawerChange(null);
+                  onActiveDrawerChange(null, { initiatedByUserAction: true });
                 }
               }}
               isOpen={true}
@@ -593,7 +593,7 @@ const ClassicAppLayout = React.forwardRef(
                   focusToolsButtons();
                   focusDrawersButtons();
                 }
-                onActiveDrawerChange(newDrawerId);
+                onActiveDrawerChange(newDrawerId, { initiatedByUserAction: true });
               }}
               ariaLabels={ariaLabels}
             />
diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx
index e816e9266e..9717dbede0 100644
--- a/src/app-layout/runtime-drawer/index.tsx
+++ b/src/app-layout/runtime-drawer/index.tsx
@@ -2,18 +2,25 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useEffect, useRef } from 'react';
 
-import { fireNonCancelableEvent } from '../../internal/events';
-import { DrawerConfig as RuntimeDrawerConfig } from '../../internal/plugins/controllers/drawers';
+import { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';
+import {
+  DrawerConfig as RuntimeDrawerConfig,
+  DrawerStateChangeParams,
+} from '../../internal/plugins/controllers/drawers';
 import { sortByPriority } from '../../internal/plugins/helpers/utils';
 import { AppLayoutProps } from '../interfaces';
 import { ActiveDrawersContext } from '../utils/visibility-context';
 
 import styles from './styles.css.js';
 
+export interface RuntimeDrawer extends AppLayoutProps.Drawer {
+  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
+}
+
 export interface DrawersLayout {
-  global: Array<AppLayoutProps.Drawer>;
-  localBefore: Array<AppLayoutProps.Drawer>;
-  localAfter: Array<AppLayoutProps.Drawer>;
+  global: Array<RuntimeDrawer>;
+  localBefore: Array<RuntimeDrawer>;
+  localAfter: Array<RuntimeDrawer>;
 }
 
 type VisibilityCallback = (isVisible: boolean) => void;
@@ -55,6 +62,7 @@ const mapRuntimeConfigToDrawer = (
   runtimeConfig: RuntimeDrawerConfig
 ): AppLayoutProps.Drawer & {
   orderPriority?: number;
+  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
 } => {
   const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;
 
diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index b65f96ae9b..24d1df751f 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -24,6 +24,10 @@ interface ToolsProps {
   disableDrawersMerge?: boolean;
 }
 
+export interface OnChangeParams {
+  initiatedByUserAction: boolean;
+}
+
 function getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {
   if (props.toolsHide) {
     return null;
@@ -47,12 +51,14 @@ function getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {
 
 const DRAWERS_LIMIT = 2;
 
+const DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };
+
 function useRuntimeDrawers(
   disableRuntimeDrawers: boolean | undefined,
   activeDrawerId: string | null,
-  onActiveDrawerChange: (newDrawerId: string | null) => void,
+  onActiveDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,
   activeGlobalDrawersIds: Array<string>,
-  onActiveGlobalDrawersChange: (newDrawerId: string) => void,
+  onActiveGlobalDrawersChange: (newDrawerId: string, { initiatedByUserAction }: OnChangeParams) => void,
   drawers: AppLayoutProps.Drawer[]
 ) {
   const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({
@@ -79,7 +85,7 @@ function useRuntimeDrawers(
       if (!localDrawerWasOpenRef.current) {
         const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);
         if (defaultActiveLocalDrawer) {
-          onLocalDrawerChangeStable(defaultActiveLocalDrawer.id);
+          onLocalDrawerChangeStable(defaultActiveLocalDrawer.id, { initiatedByUserAction: false });
         }
       }
 
@@ -95,7 +101,7 @@ function useRuntimeDrawers(
         drawer => !activeGlobalDrawersIdsRef.current.includes(drawer.id) && drawer.defaultActive
       );
       defaultActiveGlobalDrawers.forEach(drawer => {
-        onGlobalDrawersChangeStable(drawer.id);
+        onGlobalDrawersChangeStable(drawer.id, { initiatedByUserAction: false });
       });
     });
     return () => {
@@ -105,16 +111,16 @@ function useRuntimeDrawers(
   }, [disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]);
 
   useEffect(() => {
-    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened(drawerId => {
+    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened((drawerId, params = DEFAULT_ON_CHANGE_PARAMS) => {
       const localDrawer = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]?.find(
         drawer => drawer.id === drawerId
       );
       const globalDrawer = runtimeDrawers.global?.find(drawer => drawer.id === drawerId);
       if (localDrawer && activeDrawerId !== drawerId) {
-        onActiveDrawerChange(drawerId);
+        onActiveDrawerChange(drawerId, params);
       }
       if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) {
-        onActiveGlobalDrawersChange(drawerId);
+        onActiveGlobalDrawersChange(drawerId, params);
       }
     });
 
@@ -131,16 +137,16 @@ function useRuntimeDrawers(
   ]);
 
   useEffect(() => {
-    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerClosed(drawerId => {
+    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerClosed((drawerId, params = DEFAULT_ON_CHANGE_PARAMS) => {
       const localDrawer = [...runtimeDrawers.localBefore, ...drawers, ...runtimeDrawers.localAfter]?.find(
         drawer => drawer.id === drawerId
       );
       const globalDrawer = runtimeDrawers.global?.find(drawer => drawer.id === drawerId);
       if (localDrawer && activeDrawerId === drawerId) {
-        onActiveDrawerChange(null);
+        onActiveDrawerChange(null, params);
       }
       if (globalDrawer && activeGlobalDrawersIds.includes(drawerId)) {
-        onActiveGlobalDrawersChange(drawerId);
+        onActiveGlobalDrawersChange(drawerId, params);
       }
     });
 
@@ -209,7 +215,10 @@ export function useDrawers(
     fireNonCancelableEvent(activeGlobalDrawer?.onResize, { id, size });
   }
 
-  function onActiveDrawerChange(newDrawerId: string | null) {
+  function onActiveDrawerChange(
+    newDrawerId: string | null,
+    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
+  ) {
     setActiveDrawerId(newDrawerId);
     if (newDrawerId) {
       onAddNewActiveDrawer?.(newDrawerId);
@@ -222,23 +231,37 @@ export function useDrawers(
 
     if (newDrawerId) {
       drawersOpenQueue.current = [newDrawerId, ...drawersOpenQueue.current];
+      const newDrawer = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter]?.find(
+        drawer => drawer.id === newDrawerId
+      );
+      fireNonCancelableEvent(newDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
     }
 
     if (activeDrawerId) {
       drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== activeDrawerId);
+      const activeDrawer = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter]?.find(
+        drawer => drawer.id === activeDrawerId
+      );
+      fireNonCancelableEvent(activeDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
     }
   }
 
-  function onActiveGlobalDrawersChange(drawerId: string) {
+  function onActiveGlobalDrawersChange(
+    drawerId: string,
+    { initiatedByUserAction }: Partial<OnChangeParams> = DEFAULT_ON_CHANGE_PARAMS
+  ) {
+    const drawer = runtimeGlobalDrawers.find(drawer => drawer.id === drawerId);
     if (activeGlobalDrawersIds.includes(drawerId)) {
       setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId));
       onGlobalDrawerFocus?.(drawerId, false);
       drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);
+      fireNonCancelableEvent(drawer?.onToggle, { isOpen: false, initiatedByUserAction });
     } else if (drawerId) {
       onAddNewActiveDrawer?.(drawerId);
       setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT!));
       onGlobalDrawerFocus?.(drawerId, true);
       drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];
+      fireNonCancelableEvent(drawer?.onToggle, { isOpen: true, initiatedByUserAction });
     }
   }
 
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
index 292816bbcb..ba6d185369 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
@@ -134,7 +134,7 @@ function AppLayoutGlobalDrawerImplementation({
                   })}
                   formAction="none"
                   iconName={isMobile ? 'close' : 'angle-right'}
-                  onClick={() => onActiveGlobalDrawersChange(activeDrawerId)}
+                  onClick={() => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}
                   ref={refs?.close}
                   variant="icon"
                 />
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
index f2669f22c1..9055646065 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
@@ -119,7 +119,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
                 })}
                 formAction="none"
                 iconName={isMobile ? 'close' : 'angle-right'}
-                onClick={() => onActiveDrawerChange(null)}
+                onClick={() => onActiveDrawerChange(null, { initiatedByUserAction: true })}
                 ref={drawersFocusControl.refs.close}
                 variant="icon"
               />
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index e5b871440e..05ddef1d02 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -16,7 +16,7 @@ import globalVars from '../../internal/styles/global-vars';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
 import { SplitPanelProviderProps } from '../split-panel';
-import { MIN_DRAWER_SIZE, useDrawers } from '../utils/use-drawers';
+import { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../utils/use-drawers';
 import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';
 import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
 import { ActiveDrawersContext } from '../utils/visibility-context';
@@ -150,8 +150,11 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onToolsToggle,
     });
 
-    const onActiveDrawerChangeHandler = (drawerId: string | null) => {
-      onActiveDrawerChange(drawerId);
+    const onActiveDrawerChangeHandler = (
+      drawerId: string | null,
+      params: OnChangeParams = { initiatedByUserAction: true }
+    ) => {
+      onActiveDrawerChange(drawerId, params);
       drawersFocusControl.setFocus();
     };
 
@@ -369,9 +372,9 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
     const closeFirstDrawer = useStableCallback(() => {
       const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];
       if (activeDrawer && activeDrawer?.id === drawerToClose) {
-        onActiveDrawerChange(null);
+        onActiveDrawerChange(null, { initiatedByUserAction: true });
       } else if (activeGlobalDrawersIds.includes(drawerToClose)) {
-        onActiveGlobalDrawersChange(drawerToClose);
+        onActiveGlobalDrawersChange(drawerToClose, { initiatedByUserAction: true });
       }
     });
 
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 4d24740278..4ae458a2bd 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -6,6 +6,7 @@ import React from 'react';
 import { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
+import { OnChangeParams } from '../utils/use-drawers';
 import { FocusControlMultipleStates, FocusControlState } from '../utils/use-focus-control';
 import { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';
 import { VerticalLayoutOutput } from './compute-layout';
@@ -51,8 +52,8 @@ export interface AppLayoutInternals {
   setToolbarHeight: (height: number) => void;
   onSplitPanelToggle: () => void;
   onNavigationToggle: (open: boolean) => void;
-  onActiveDrawerChange: (newDrawerId: string | null) => void;
+  onActiveDrawerChange: (newDrawerId: string | null, params: OnChangeParams) => void;
   onActiveDrawerResize: (detail: { id: string; size: number }) => void;
-  onActiveGlobalDrawersChange: (newDrawerId: string) => void;
+  onActiveGlobalDrawersChange: (newDrawerId: string, params: OnChangeParams) => void;
   splitPanelAnimationDisabled?: boolean;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/multi-layout.ts b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
index e73680eb40..f7f30c4f52 100644
--- a/src/app-layout/visual-refresh-toolbar/multi-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
@@ -7,6 +7,7 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { awsuiPluginsInternal } from '../../internal/plugins/api';
 import { RegistrationState } from '../../internal/plugins/controllers/app-layout-widget';
 import { AppLayoutProps } from '../interfaces';
+import { OnChangeParams } from '../utils/use-drawers';
 import { Focusable, FocusControlMultipleStates } from '../utils/use-focus-control';
 import { SplitPanelToggleProps, ToolbarProps } from './toolbar';
 
@@ -20,12 +21,12 @@ export interface SharedProps {
   breadcrumbs: React.ReactNode;
   activeDrawerId: string | null;
   drawers: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
-  onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;
+  onActiveDrawerChange: ((drawerId: string | null, params: OnChangeParams) => void) | undefined;
   drawersFocusRef: React.Ref<Focusable> | undefined;
   globalDrawersFocusControl?: FocusControlMultipleStates | undefined;
   globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
   activeGlobalDrawersIds?: Array<string> | undefined;
-  onActiveGlobalDrawersChange?: ((newDrawerId: string) => void) | undefined;
+  onActiveGlobalDrawersChange?: ((newDrawerId: string, params: OnChangeParams) => void) | undefined;
   splitPanel: React.ReactNode;
   splitPanelToggleProps: SplitPanelToggleProps;
   splitPanelFocusRef: React.Ref<Focusable> | undefined;
diff --git a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
index 4e0865b318..6f7d18188b 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
@@ -45,25 +45,27 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
   };
 
   return (
-    <nav
-      aria-label={ariaLabels?.navigation ?? undefined}
-      className={clsx(
-        styles.navigation,
-        {
-          [styles['is-navigation-open']]: navigationOpen,
-          [testutilStyles['drawer-closed']]: !navigationOpen,
-        },
-        testutilStyles.navigation,
-        sharedStyles['with-motion-horizontal']
-      )}
-      aria-hidden={!navigationOpen}
-      onClick={onNavigationClick}
+    <div
+      className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {
+        [styles['is-navigation-open']]: navigationOpen,
+      })}
       style={{
         blockSize: drawerHeight,
         insetBlockStart: drawerTopOffset,
       }}
     >
-      <div className={clsx(styles['content-container'], styles['animated-content'])}>
+      <nav
+        aria-label={ariaLabels?.navigation ?? undefined}
+        className={clsx(
+          styles.navigation,
+          {
+            [testutilStyles['drawer-closed']]: !navigationOpen,
+          },
+          testutilStyles.navigation
+        )}
+        aria-hidden={!navigationOpen}
+        onClick={onNavigationClick}
+      >
         <div className={clsx(styles['hide-navigation'])}>
           <InternalButton
             ariaLabel={ariaLabels?.navigationClose ?? undefined}
@@ -76,8 +78,8 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
           />
         </div>
         {navigation}
-      </div>
-    </nav>
+      </nav>
+    </div>
   );
 }
 
diff --git a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
index 7804f0dd22..9a0d4039cf 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
@@ -8,16 +8,13 @@
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
 
-.navigation {
+// This wrapper clips the actual navigation content during the enter animation.
+.navigation-container {
   position: sticky;
   z-index: constants.$drawer-z-index;
   background-color: awsui.$color-background-container-content;
   inset-block-end: 0;
-  block-size: 100%;
   overflow-x: hidden;
-  overflow-y: auto;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  overscroll-behavior-y: contain;
   word-wrap: break-word;
   pointer-events: auto;
   display: flex;
@@ -30,17 +27,16 @@
     display: none;
   }
 
-  & > .content-container {
+  & > .navigation {
     flex-grow: 1;
-  }
-
-  /*
-  A non-semantic node is added with a fixed width equal to the final Navigation
-  width. This will create the visual appearance of horizontal movement and
-  prevent unwanted text wrapping.
-  */
-  > .animated-content {
+    block-size: 100%;
+    overflow-y: auto;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    overscroll-behavior-y: contain;
+    // Needs to have a fixed width during the enter animation, in which it will be cropped by its parent.
     inline-size: var(#{custom-props.$navigationWidth});
+    // Necessary for the hide-navigation button to be positioned correctly when a scrollbar is present.
+    position: relative;
   }
 
   // The Navigation drawer will take up the entire viewport on mobile
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx
index 72c3405c1c..cd4a9f8818 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx
@@ -9,7 +9,7 @@ import { useMobile } from '../../../internal/hooks/use-mobile';
 import { splitItems } from '../../drawer/drawers-helpers';
 import OverflowMenu from '../../drawer/overflow-menu';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../interfaces';
-import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
+import { OnChangeParams, TOOLS_DRAWER_ID } from '../../utils/use-drawers';
 import { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';
 import TriggerButton from './trigger-button';
 
@@ -31,12 +31,12 @@ interface DrawerTriggersProps {
   activeDrawerId: string | null;
   drawersFocusRef: React.Ref<Focusable> | undefined;
   drawers: ReadonlyArray<AppLayoutProps.Drawer>;
-  onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;
+  onActiveDrawerChange: ((drawerId: string | null, params: OnChangeParams) => void) | undefined;
 
   activeGlobalDrawersIds: ReadonlyArray<string>;
   globalDrawersFocusControl?: FocusControlMultipleStates;
   globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;
-  onActiveGlobalDrawersChange?: (newDrawerId: string) => void;
+  onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;
 
   splitPanelOpen?: boolean;
   splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];
@@ -164,7 +164,9 @@ export function DrawerTriggers({
               iconName={item.trigger!.iconName}
               iconSvg={item.trigger!.iconSvg}
               key={item.id}
-              onClick={() => onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null)}
+              onClick={() =>
+                onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true })
+              }
               ref={item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined}
               selected={item.id === activeDrawerId}
               badge={item.badge}
@@ -197,7 +199,7 @@ export function DrawerTriggers({
               iconSvg={item.trigger!.iconSvg}
               key={item.id}
               onClick={() => {
-                onActiveGlobalDrawersChange && onActiveGlobalDrawersChange(item.id);
+                onActiveGlobalDrawersChange && onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });
               }}
               ref={globalDrawersFocusControl?.refs[item.id]?.toggle}
               selected={activeGlobalDrawersIds.includes(item.id)}
@@ -241,9 +243,9 @@ export function DrawerTriggers({
             onItemClick={event => {
               const id = event.detail.id;
               if (globalDrawers.find(drawer => drawer.id === id)) {
-                onActiveGlobalDrawersChange?.(id);
+                onActiveGlobalDrawersChange?.(id, { initiatedByUserAction: true });
               } else {
-                onActiveDrawerChange?.(event.detail.id);
+                onActiveDrawerChange?.(event.detail.id, { initiatedByUserAction: true });
               }
             }}
             globalDrawersStartIndex={globalDrawersStartIndex - indexOfOverflowItem}
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index 3b9730dc2e..541a47c4de 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -7,6 +7,7 @@ import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal
 
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutProps } from '../../interfaces';
+import { OnChangeParams } from '../../utils/use-drawers';
 import { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';
 import { AppLayoutInternals } from '../interfaces';
 import { BreadcrumbsSlot } from '../skeleton/breadcrumbs';
@@ -42,10 +43,10 @@ export interface ToolbarProps {
   drawers?: ReadonlyArray<AppLayoutProps.Drawer>;
   drawersFocusRef?: React.Ref<Focusable>;
   globalDrawersFocusControl?: FocusControlMultipleStates;
-  onActiveDrawerChange?: (drawerId: string | null) => void;
+  onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;
   globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
   activeGlobalDrawersIds?: ReadonlyArray<string>;
-  onActiveGlobalDrawersChange?: ((drawerId: string) => void) | undefined;
+  onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;
 }
 
 export interface AppLayoutToolbarImplementationProps {
diff --git a/src/app-layout/visual-refresh/context.tsx b/src/app-layout/visual-refresh/context.tsx
index c37e74f58b..0ef1b750dd 100644
--- a/src/app-layout/visual-refresh/context.tsx
+++ b/src/app-layout/visual-refresh/context.tsx
@@ -325,7 +325,7 @@ export const AppLayoutInternalsProvider = React.forwardRef(
     const handleDrawersClick = (id: string | null, skipFocusControl?: boolean) => {
       const newActiveDrawerId = id !== activeDrawerId ? id : null;
 
-      onActiveDrawerChange(newActiveDrawerId);
+      onActiveDrawerChange(newActiveDrawerId, { initiatedByUserAction: true });
 
       !skipFocusControl && focusDrawersButtons();
     };
diff --git a/src/date-range-picker/calendar/__tests__/grid-cell.test.tsx b/src/date-range-picker/calendar/__tests__/grid-cell.test.tsx
new file mode 100644
index 0000000000..922fcbce22
--- /dev/null
+++ b/src/date-range-picker/calendar/__tests__/grid-cell.test.tsx
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { GridCell } from '../../../../lib/components/date-range-picker/calendar/grids/grid-cell';
+import createWrapper from '../../../../lib/components/test-utils/dom';
+
+describe('Date range picker grid cell', () => {
+  const mockOnFocus = jest.fn();
+  const mockOnBlur = jest.fn();
+  const mockOnMouseEnter = jest.fn();
+  const mockOnMouseLeave = jest.fn();
+  const mockDisabledReason = 'Mock disabled reason';
+
+  const testProps = {
+    onFocus: mockOnFocus,
+    onBlur: mockOnBlur,
+    onMouseEnter: mockOnMouseEnter,
+    onMouseLeave: mockOnMouseLeave,
+  };
+
+  describe.each([true, false])('Events register when disabled is %s with disabledReason', isDisabled => {
+    beforeEach(() => jest.resetAllMocks());
+
+    const mockProps = {
+      ...testProps,
+      disabled: isDisabled,
+      disabledReason: mockDisabledReason,
+    };
+    test('Registers a focus event', () => {
+      const { container, getByTestId } = render(
+        <GridCell {...mockProps}>
+          <div data-testid="testitem">Test</div>
+        </GridCell>
+      );
+      const wrapper = createWrapper(container);
+      expect(wrapper).not.toBeNull();
+      fireEvent.focus(getByTestId('testitem'));
+      expect(mockOnFocus).toHaveBeenCalledTimes(1);
+    });
+
+    test('Registers a blur event', () => {
+      const { container, getByTestId } = render(
+        <GridCell {...mockProps}>
+          <div data-testid="testitem">Test</div>
+        </GridCell>
+      );
+      const wrapper = createWrapper(container);
+
+      expect(wrapper).not.toBeNull();
+      fireEvent.blur(getByTestId('testitem'));
+      expect(mockOnBlur).toHaveBeenCalledTimes(1);
+    });
+
+    test('Registers a mouse enter event', () => {
+      const { container, getByTestId } = render(
+        <GridCell {...mockProps}>
+          <div data-testid="testitem">Test</div>
+        </GridCell>
+      );
+      const wrapper = createWrapper(container);
+
+      expect(wrapper).not.toBeNull();
+      fireEvent.mouseEnter(getByTestId('testitem'));
+      expect(mockOnMouseEnter).toHaveBeenCalledTimes(1);
+    });
+
+    test('Registers a mouse leave event', () => {
+      const { container, getByTestId } = render(
+        <GridCell {...mockProps}>
+          <div data-testid="testitem">Test</div>
+        </GridCell>
+      );
+      const wrapper = createWrapper(container);
+
+      expect(wrapper).not.toBeNull();
+      fireEvent.mouseLeave(getByTestId('testitem'));
+      expect(mockOnMouseLeave).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/src/date-range-picker/calendar/grids/grid-cell.tsx b/src/date-range-picker/calendar/grids/grid-cell.tsx
new file mode 100644
index 0000000000..9704eb76b7
--- /dev/null
+++ b/src/date-range-picker/calendar/grids/grid-cell.tsx
@@ -0,0 +1,78 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';
+
+import Tooltip from '../../../internal/components/tooltip';
+import useHiddenDescription from '../../../internal/hooks/use-hidden-description';
+import { useMergeRefs } from '../../../internal/hooks/use-merge-refs';
+import { applyDisplayName } from '../../../internal/utils/apply-display-name';
+
+import styles from './styles.css.js';
+
+interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  disabledReason?: string;
+}
+
+export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
+  const { disabledReason, ...rest } = props;
+  const isDisabledWithReason = !!disabledReason;
+  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
+  const ref = useRef<HTMLTableCellElement>(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <td
+      ref={useMergeRefs(focusedDateRef, ref)}
+      {...rest}
+      {...(isDisabledWithReason ? targetProps : {})}
+      onFocus={event => {
+        if (rest.onFocus) {
+          rest.onFocus(event);
+        }
+
+        if (isDisabledWithReason) {
+          setShowTooltip(true);
+        }
+      }}
+      onBlur={event => {
+        if (rest.onBlur) {
+          rest.onBlur(event);
+        }
+
+        if (isDisabledWithReason) {
+          setShowTooltip(false);
+        }
+      }}
+      onMouseEnter={event => {
+        if (rest.onMouseEnter) {
+          rest.onMouseEnter(event);
+        }
+
+        if (isDisabledWithReason) {
+          setShowTooltip(true);
+        }
+      }}
+      onMouseLeave={event => {
+        if (rest.onMouseLeave) {
+          rest.onMouseLeave(event);
+        }
+
+        if (isDisabledWithReason) {
+          setShowTooltip(false);
+        }
+      }}
+    >
+      {props.children}
+      {isDisabledWithReason && (
+        <>
+          {descriptionEl}
+          {showTooltip && (
+            <Tooltip className={styles['disabled-reason-tooltip']} trackRef={ref} value={disabledReason!} />
+          )}
+        </>
+      )}
+    </td>
+  );
+});
+
+applyDisplayName(GridCell, 'GridCell');
diff --git a/src/date-range-picker/calendar/grids/index.tsx b/src/date-range-picker/calendar/grids/index.tsx
index 9957fb80a5..cea3e5a711 100644
--- a/src/date-range-picker/calendar/grids/index.tsx
+++ b/src/date-range-picker/calendar/grids/index.tsx
@@ -11,7 +11,7 @@ import { hasValue } from '../../../internal/utils/has-value';
 import InternalSpaceBetween from '../../../space-between/internal';
 import { DateRangePickerProps, DayIndex } from '../../interfaces';
 import { findDateToFocus } from '../utils';
-import { Grid } from './grid';
+import { MonthlyGrid } from './monthly-grid';
 
 import styles from '../../styles.css.js';
 
@@ -168,7 +168,7 @@ export const Grids = ({
     <div ref={containerRef} onFocus={onGridFocus} onBlur={onGridBlur}>
       <InternalSpaceBetween size="xs" direction="horizontal">
         {!isSingleGrid && (
-          <Grid
+          <MonthlyGrid
             className={styles['first-grid']}
             baseDate={addMonths(baseDate, -1)}
             selectedEndDate={selectedEndDate}
@@ -188,7 +188,7 @@ export const Grids = ({
             ariaLabelledby={`${headingIdPrefix}-prevmonth`}
           />
         )}
-        <Grid
+        <MonthlyGrid
           className={styles['second-grid']}
           baseDate={baseDate}
           selectedEndDate={selectedEndDate}
diff --git a/src/date-range-picker/calendar/grids/grid.tsx b/src/date-range-picker/calendar/grids/monthly-grid.tsx
similarity index 82%
rename from src/date-range-picker/calendar/grids/grid.tsx
rename to src/date-range-picker/calendar/grids/monthly-grid.tsx
index 29c3f63078..3f8863150d 100644
--- a/src/date-range-picker/calendar/grids/grid.tsx
+++ b/src/date-range-picker/calendar/grids/monthly-grid.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef, TdHTMLAttributes, useMemo, useRef, useState } from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDays,
@@ -17,12 +17,9 @@ import { getCalendarMonth } from 'mnth';
 
 import { getDateLabel, renderDayName } from '../../../calendar/utils/intl';
 import ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';
-import Tooltip from '../../../internal/components/tooltip';
-import useHiddenDescription from '../../../internal/hooks/use-hidden-description';
-import { useMergeRefs } from '../../../internal/hooks/use-merge-refs';
-import { applyDisplayName } from '../../../internal/utils/apply-display-name';
 import { formatDate } from '../../../internal/utils/date-time';
 import { DateRangePickerProps, DayIndex } from '../../interfaces';
+import { GridCell } from './grid-cell';
 
 import styles from './styles.css.js';
 
@@ -67,75 +64,7 @@ export interface GridProps {
   className?: string;
 }
 
-interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
-  disabledReason?: string;
-}
-
-const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
-  const isDisabledWithReason = !!disabledReason;
-  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
-  const ref = useRef<HTMLTableCellElement>(null);
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  return (
-    <td
-      ref={useMergeRefs(focusedDateRef, ref)}
-      {...rest}
-      {...(isDisabledWithReason ? targetProps : {})}
-      onFocus={event => {
-        if (rest.onFocus) {
-          rest.onFocus(event);
-        }
-
-        if (isDisabledWithReason) {
-          setShowTooltip(true);
-        }
-      }}
-      onBlur={event => {
-        if (rest.onBlur) {
-          rest.onBlur(event);
-        }
-
-        if (isDisabledWithReason) {
-          setShowTooltip(false);
-        }
-      }}
-      onMouseEnter={event => {
-        if (rest.onMouseEnter) {
-          rest.onMouseEnter(event);
-        }
-
-        if (isDisabledWithReason) {
-          setShowTooltip(true);
-        }
-      }}
-      onMouseLeave={event => {
-        if (rest.onMouseLeave) {
-          rest.onMouseLeave(event);
-        }
-
-        if (isDisabledWithReason) {
-          setShowTooltip(false);
-        }
-      }}
-    >
-      {props.children}
-      {isDisabledWithReason && (
-        <>
-          {descriptionEl}
-          {showTooltip && (
-            <Tooltip className={styles['disabled-reason-tooltip']} trackRef={ref} value={disabledReason!} />
-          )}
-        </>
-      )}
-    </td>
-  );
-});
-
-applyDisplayName(GridCell, 'GridCell');
-
-export function Grid({
+export function MonthlyGrid({
   baseDate,
   selectedStartDate,
   selectedEndDate,
diff --git a/src/file-upload/internal.tsx b/src/file-upload/internal.tsx
index c6bd6760fa..460f9d029e 100644
--- a/src/file-upload/internal.tsx
+++ b/src/file-upload/internal.tsx
@@ -9,9 +9,9 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import InternalBox from '../box/internal';
 import { ButtonProps } from '../button/interfaces';
 import { useFormFieldContext } from '../contexts/form-field';
-import InternalFileInput from '../file-input/internal';
 import InternalFileDropzone from '../file-dropzone/internal';
 import { useFilesDragging } from '../file-dropzone/use-files-dragging';
+import InternalFileInput from '../file-input/internal';
 import InternalFileTokenGroup from '../file-token-group/internal';
 import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';
 import { getBaseProps } from '../internal/base-component';
diff --git a/src/internal/plugins/controllers/__tests__/drawers.test.ts b/src/internal/plugins/controllers/__tests__/drawers.test.ts
index 2ac9631596..21160fa7a8 100644
--- a/src/internal/plugins/controllers/__tests__/drawers.test.ts
+++ b/src/internal/plugins/controllers/__tests__/drawers.test.ts
@@ -66,12 +66,25 @@ describe('update drawer', () => {
     expect(onDrawersRegistered).not.toHaveBeenCalled();
     await delay();
     expect(onDrawersRegistered).toHaveBeenCalledWith([drawerA, drawerB]);
-    const updatedDrawer = { ...drawerA, badge: true };
+    const updatedDrawer = { ...drawerA, badge: true, defaultActive: true };
     drawers.updateDrawer(updatedDrawer);
     await delay();
     expect(onDrawersRegistered).toHaveBeenLastCalledWith([updatedDrawer, drawerB]);
   });
 
+  test('does not update an unknown property', async () => {
+    const onDrawersRegistered = jest.fn();
+    const drawers = new DrawersController();
+    drawers.onDrawersRegistered(onDrawersRegistered);
+    drawers.registerDrawer(drawerA);
+    await delay();
+    expect(onDrawersRegistered).toHaveBeenCalledWith([drawerA]);
+    const updatedDrawer = { ...drawerA, type: 'global' };
+    drawers.updateDrawer(updatedDrawer);
+    await delay();
+    expect(onDrawersRegistered).toHaveBeenLastCalledWith([drawerA]);
+  });
+
   test('throw error if the update drawer is not registered', () => {
     const drawers = new DrawersController();
     expect(() => drawers.updateDrawer({ id: 'test-drawer' } as UpdateDrawerConfig)).toThrowError(
diff --git a/src/internal/plugins/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts
index b63268c802..70607cf74c 100644
--- a/src/internal/plugins/controllers/drawers.ts
+++ b/src/internal/plugins/controllers/drawers.ts
@@ -9,6 +9,11 @@ export interface MountContentContext {
   onVisibilityChange: DrawerVisibilityChange;
 }
 
+export interface DrawerStateChangeParams {
+  isOpen: boolean;
+  initiatedByUserAction?: boolean;
+}
+
 export interface DrawerConfig {
   id: string;
   type?: 'local' | 'global';
@@ -30,19 +35,35 @@ export interface DrawerConfig {
   mountContent: (container: HTMLElement, mountContext: MountContentContext) => void;
   unmountContent: (container: HTMLElement) => void;
   preserveInactiveContent?: boolean;
+  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
 }
 
-export type UpdateDrawerConfig = Pick<DrawerConfig, 'id' | 'badge' | 'resizable' | 'defaultSize'>;
+const updatableProperties = [
+  'badge',
+  'resizable',
+  'defaultSize',
+  'orderPriority',
+  'defaultActive',
+  'onResize',
+] as const;
+
+export type UpdateDrawerConfig = { id: DrawerConfig['id'] } & Partial<
+  Pick<DrawerConfig, (typeof updatableProperties)[number]>
+>;
 
 export type DrawersRegistrationListener = (drawers: Array<DrawerConfig>) => void;
 
-export type DrawersToggledListener = (drawerId: string) => void;
+export type DrawersToggledListener = (drawerId: string, params?: OpenCloseDrawerParams) => void;
+
+export interface OpenCloseDrawerParams {
+  initiatedByUserAction: boolean;
+}
 
 export interface DrawersApiPublic {
   registerDrawer(config: DrawerConfig): void;
   updateDrawer(config: UpdateDrawerConfig): void;
-  openDrawer(drawerId: string): void;
-  closeDrawer(drawerId: string): void;
+  openDrawer(drawerId: string, params?: OpenCloseDrawerParams): void;
+  closeDrawer(drawerId: string, params?: OpenCloseDrawerParams): void;
 }
 
 export interface DrawersApiInternal {
@@ -67,29 +88,22 @@ export class DrawersController {
     this.scheduleUpdate();
   };
 
-  updateDrawer = (config: UpdateDrawerConfig) => {
-    const { id: drawerId, resizable, badge, defaultSize } = config;
+  updateDrawer = ({ id: drawerId, ...rest }: UpdateDrawerConfig) => {
     const drawerIndex = this.drawers.findIndex(({ id }) => id === drawerId);
     const oldDrawerConfig = this.drawers?.[drawerIndex];
-    if (drawerIndex >= 0 && oldDrawerConfig) {
-      const drawers = this.drawers.slice();
-      const drawerConfig = { ...oldDrawerConfig };
-      if (typeof resizable === 'boolean') {
-        drawerConfig.resizable = resizable;
-      }
-      if (typeof badge === 'boolean') {
-        drawerConfig.badge = badge;
-      }
-      if (typeof defaultSize === 'number') {
-        drawerConfig.defaultSize = defaultSize;
-      }
-
-      drawers[drawerIndex] = drawerConfig;
-      this.drawers = drawers;
-      this.scheduleUpdate();
-    } else {
+    if (!oldDrawerConfig) {
       throw new Error(`[AwsUi] [runtime drawers] drawer with id ${drawerId} not found`);
     }
+    const drawers = this.drawers.slice();
+    const updatedDrawer = { ...oldDrawerConfig };
+    for (const key of updatableProperties) {
+      if (key in rest) {
+        updatedDrawer[key] = (rest as any)[key];
+      }
+    }
+    drawers[drawerIndex] = updatedDrawer;
+    this.drawers = drawers;
+    this.scheduleUpdate();
   };
 
   onDrawersRegistered = (listener: DrawersRegistrationListener) => {
@@ -131,12 +145,12 @@ export class DrawersController {
     };
   };
 
-  openDrawer = (drawerId: string) => {
-    this.drawerOpenedListener?.(drawerId);
+  openDrawer = (drawerId: string, params?: OpenCloseDrawerParams) => {
+    this.drawerOpenedListener?.(drawerId, params);
   };
 
-  closeDrawer = (drawerId: string) => {
-    this.drawerClosedListener?.(drawerId);
+  closeDrawer = (drawerId: string, params?: OpenCloseDrawerParams) => {
+    this.drawerClosedListener?.(drawerId, params);
   };
 
   installPublic(api: Partial<DrawersApiPublic> = {}): DrawersApiPublic {
diff --git a/src/wizard/__integ__/wizard.test.ts b/src/wizard/__integ__/wizard.test.ts
index f2c0ede4b0..ad8aaafabf 100644
--- a/src/wizard/__integ__/wizard.test.ts
+++ b/src/wizard/__integ__/wizard.test.ts
@@ -35,6 +35,8 @@ describe('Wizard keyboard navigation', () => {
   test(
     'navigate to the first step from menu navigation link using the Enter key',
     setupTest(async page => {
+      // Initial render should not focus the header
+      await expect(page.getFocusedElementText()).resolves.not.toBe('Step 1');
       await page.clickPrimaryButton();
       await page.resetFocus();
       await page.keys(['Tab', 'Enter']);
diff --git a/src/wizard/wizard-form.tsx b/src/wizard/wizard-form.tsx
index fdc37c18c9..d897159536 100644
--- a/src/wizard/wizard-form.tsx
+++ b/src/wizard/wizard-form.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
+import React, { MutableRefObject, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';
@@ -14,6 +14,7 @@ import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_STEP_NAME } from '../internal/analytic
 import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';
 import { PACKAGE_VERSION } from '../internal/environment';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
 import { WizardProps } from './interfaces';
 import WizardActions from './wizard-actions';
 import WizardFormHeader from './wizard-form-header';
@@ -42,6 +43,13 @@ export default function WizardFormWithAnalytics(props: WizardFormProps) {
     props.steps[props.activeStepIndex] as BasePropsWithAnalyticsMetadata
   );
   const __internalRootRef = useComponentMetadata('WizardForm', PACKAGE_VERSION, { ...analyticsMetadata });
+  const stepHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  useEffectOnUpdate(() => {
+    if (stepHeaderRef && stepHeaderRef.current) {
+      stepHeaderRef.current?.focus();
+    }
+  }, [props.activeStepIndex]);
 
   return (
     <AnalyticsFunnelStep
@@ -50,13 +58,14 @@ export default function WizardFormWithAnalytics(props: WizardFormProps) {
       stepNameSelector={STEP_NAME_SELECTOR}
       stepNumber={props.activeStepIndex + 1}
     >
-      <WizardForm __internalRootRef={__internalRootRef} {...props} />
+      <WizardForm stepHeaderRef={stepHeaderRef} __internalRootRef={__internalRootRef} {...props} />
     </AnalyticsFunnelStep>
   );
 }
 
 export function WizardForm({
   __internalRootRef,
+  stepHeaderRef,
   steps,
   activeStepIndex,
   showCollapsedSteps,
@@ -69,20 +78,14 @@ export function WizardForm({
   onPreviousClick,
   onPrimaryClick,
   onSkipToClick,
-}: WizardFormProps) {
+}: WizardFormProps & { stepHeaderRef: MutableRefObject<HTMLDivElement | null> }) {
   const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};
   const isLastStep = activeStepIndex >= steps.length - 1;
   const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);
-  const stepHeaderRef = useRef<HTMLDivElement | null>(null);
+
   const { funnelInteractionId, funnelIdentifier } = useFunnel();
   const { funnelStepProps, stepErrorContext } = useFunnelStep();
 
-  useEffect(() => {
-    if (stepHeaderRef && stepHeaderRef.current) {
-      stepHeaderRef.current?.focus();
-    }
-  }, [activeStepIndex]);
-
   const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;
   const skipToButtonText =
     skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
index d0ccf2089e..aad70cc821 100644
--- a/style-dictionary/classic/colors.ts
+++ b/style-dictionary/classic/colors.ts
@@ -46,6 +46,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundSegmentHover: '{colorBackgroundButtonNormalDefault}',
   colorBackgroundTilesDisabled: { dark: '{colorGrey700}' },
   colorBackgroundToggleCheckedDisabled: { dark: '{colorBlue700}' },
+  colorBackgroundChatBubbleIncoming: { light: '{colorGrey150}', dark: '{colorGrey900}' },
   colorBorderButtonNormalActive: '{colorBorderButtonNormalDefault}',
   colorBorderButtonNormalDefault: { light: '{colorGrey600}', dark: '{colorGrey500}' },
   colorBorderToggleButtonNormalPressed: { light: '{colorGrey600}', dark: '{colorGrey500}' },
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 42a697282e..b8c992a809 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -97,7 +97,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundLoadingBarGenAi:
     'linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)',
   colorBackgroundChatBubbleOutgoing: 'transparent',
-  colorBackgroundChatBubbleIncoming: { light: '{colorGrey150}', dark: '{colorGrey900}' },
+  colorBackgroundChatBubbleIncoming: { light: '{colorGrey125}', dark: '{colorGrey900}' },
   colorTextChatBubbleOutgoing: '{colorTextBodyDefault}',
   colorTextChatBubbleIncoming: '{colorTextBodyDefault}',
   colorBorderButtonNormalActive: { light: '{colorBlue800}', dark: '{colorBlue400}' },