diff --git a/package.json b/package.json
index 8dbb4c74a5..db7b06ac2b 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1400 kB",
+      "limit": "1605 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/side-navigation/collapsed.page.tsx b/pages/side-navigation/collapsed.page.tsx
index 7d35fe90d0..cce0ba6d4e 100644
--- a/pages/side-navigation/collapsed.page.tsx
+++ b/pages/side-navigation/collapsed.page.tsx
@@ -1,67 +1,397 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 
 import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
 
-import { Box, Button, Icon, SpaceBetween } from '~components';
+import { Box, Button, Icon, RadioGroup, SpaceBetween, Toggle } from '~components';
 import SideNavigation, { SideNavigationProps } from '~components/side-navigation';
 import { colorBorderDividerDefault } from '~design-tokens';
 
-const items: SideNavigationProps.Item[] = [
+import AppContext, { AppContextType } from '../app/app-context';
+
+type CollapsedNavDemoContext = React.Context<
+  AppContextType<{
+    itemsSet: string;
+  }>
+>;
+
+const cubeIcon = (
+  <Icon
+    svg={
+      <svg viewBox="0 0 16 16" height="16" width="16">
+        <path
+          className="filled no-stroke"
+          fill="currentColor"
+          d="m8.35.34 6.25 3.25.4.2v8.42l-.4.2-6.25 3.26-.35.18-.35-.18-6.25-3.25-.4-.21V3.8l.4-.21L7.65.34 8 .15zM2.5 11.3l4.75 2.46V7.81L2.5 5.44zM8.75 7.8v5.95l4.75-2.46V5.44zM3.42 4.22 8 6.52l4.58-2.3L8 1.85z"
+        ></path>
+      </svg>
+    }
+  />
+);
+
+const kitchenSink: SideNavigationProps.Item[] = [
+  { type: 'link', text: 'Dashboard', href: '#/dashboard', icon: <Icon name="grid-view" /> },
   { type: 'link', text: 'Calendar', href: '#/calendar', icon: <Icon name="calendar" /> },
   { type: 'link', text: 'Settings', href: '#/settings', icon: <Icon name="settings" /> },
+  {
+    type: 'link-group',
+    text: 'Account',
+    icon: <Icon name="user-profile" />,
+    href: '#/account',
+    items: [
+      { type: 'link', text: 'Billing', href: '#/account/billing' },
+      { type: 'link', text: 'Users', href: '#/account/users' },
+      { type: 'link', text: 'Access keys', href: '#/account/access-keys' },
+    ],
+  },
+  {
+    type: 'expandable-link-group',
+    text: 'Buckets',
+    href: '#/buckets',
+    icon: <Icon name="folder" />,
+    items: [
+      { type: 'link', text: 'Photos backup', href: '#/buckets/photos-backup' },
+      { type: 'link', text: 'Static assets', href: '#/buckets/static-assets' },
+      { type: 'link', text: 'Server logs', href: '#/buckets/server-logs' },
+    ],
+  },
+  { type: 'divider' },
   {
     type: 'section',
-    text: 'Section',
+    text: 'Monitoring',
     items: [
-      { type: 'link', text: 'Announcements', href: '#/announcements', icon: <Icon name="announcement" /> },
-      { type: 'link', text: 'Team', href: '#/team', icon: <Icon name="group" /> },
-      { type: 'link', text: 'Networking', href: '#/networking', icon: <Icon name="share" /> },
+      { type: 'link', text: 'Alarms', href: '#/monitoring/alarms', icon: <Icon name="status-warning" /> },
+      { type: 'link', text: 'Dashboards', href: '#/monitoring/dashboards', icon: <Icon name="grid-view" /> },
+      { type: 'link', text: 'Metrics', href: '#/monitoring/metrics', icon: <Icon name="share" /> },
+      {
+        type: 'link-group',
+        text: 'Log groups',
+        icon: <Icon name="user-profile" />,
+        href: '#/monitoring/log-groups',
+        items: [
+          { type: 'link', text: 'API access logs', href: '#/monitoring/log-groups/api-access' },
+          { type: 'link', text: 'Application logs', href: '#/monitoring/log-groups/application' },
+          { type: 'link', text: 'Audit logs', href: '#/monitoring/log-groups/audit' },
+        ],
+      },
     ],
   },
+  { type: 'link', text: 'Documentation', href: '#/docs', external: true },
   { type: 'divider' },
   {
-    type: 'link-group',
-    text: 'Link group',
-    href: '#/',
+    type: 'section-group',
+    title: 'Data management',
     items: [
-      { type: 'link', text: 'Announcements', href: '#/announcements3', icon: <Icon name="announcement" /> },
-      { type: 'link', text: 'Team', href: '#/team3', icon: <Icon name="group" /> },
-      { type: 'link', text: 'Networking', href: '#/networking3', icon: <Icon name="share" /> },
+      { type: 'link', text: 'Replication rules', href: '#/data/replication-rules', icon: <Icon name="announcement" /> },
+      { type: 'link', text: 'Lifecycle rules', href: '#/data/lifecycle-rules', icon: <Icon name="group" /> },
+      { type: 'link', text: 'Transfer jobs', href: '#/data/transfer-jobs', icon: <Icon name="share" /> },
+      {
+        type: 'section',
+        text: 'Backups',
+        items: [
+          { type: 'link', text: 'Backup plans', href: '#/data/backups/plans', icon: <Icon name="file" /> },
+          { type: 'link', text: 'Backup vaults', href: '#/data/backups/vaults', icon: <Icon name="file" /> },
+          { type: 'link', text: 'Restore jobs', href: '#/data/backups/restore-jobs', icon: <Icon name="file" /> },
+          {
+            type: 'expandable-link-group',
+            href: '#/data/backups/schedules',
+            text: 'Schedules',
+            icon: <Icon name="settings" />,
+            items: [
+              { type: 'link', text: 'Daily snapshot', href: '#/data/backups/schedules/daily' },
+              { type: 'link', text: 'Weekly snapshot', href: '#/data/backups/schedules/weekly' },
+              { type: 'link', text: 'Monthly snapshot', href: '#/data/backups/schedules/monthly' },
+              {
+                type: 'expandable-link-group',
+                href: '#/data/backups/schedules/retention',
+                text: 'Retention policies',
+                icon: <Icon name="settings" />,
+                items: [
+                  { type: 'link', text: 'Short-term policy', href: '#/data/backups/schedules/retention/short-term' },
+                  { type: 'link', text: 'Long-term policy', href: '#/data/backups/schedules/retention/long-term' },
+                  { type: 'link', text: 'Compliance policy', href: '#/data/backups/schedules/retention/compliance' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
+];
+
+const simpleItems: SideNavigationProps.Item[] = [
+  {
+    type: 'link',
+    text: 'Dashboard',
+    href: '#/dashboard',
+    icon: <Icon name="grid-view" />,
+  },
+  {
+    type: 'link',
+    text: 'Storage',
+    href: '#/storage',
+    icon: (
+      <Icon
+        svg={
+          <svg viewBox="0 0 16 16" height="16" width="16">
+            <path
+              className="filled no-stroke"
+              fill="currentColor"
+              fillRule="evenodd"
+              d="M3.3.79C4.54.29 6.2 0 8 0s3.46.29 4.7.79a5 5 0 0 1 1.57.94c.41.39.73.9.73 1.52v9.5a2 2 0 0 1-.73 1.52 5 5 0 0 1-1.57.94c-1.24.5-2.9.79-4.7.79s-3.46-.29-4.7-.79a5 5 0 0 1-1.57-.94A2 2 0 0 1 1 12.75v-9.5c0-.62.32-1.13.73-1.52A5 5 0 0 1 3.3.8m-.8 4.54V8c0 .07.03.22.26.43q.33.33 1.1.64c1.02.41 2.49.68 4.14.68s3.12-.27 4.14-.68q.77-.31 1.1-.64c.23-.21.26-.36.26-.43V5.33a6 6 0 0 1-.8.38c-1.24.5-2.9.79-4.7.79s-3.46-.29-4.7-.79a6 6 0 0 1-.8-.38m11-2.08c0 .07-.03.22-.26.43q-.33.33-1.1.64C11.12 4.73 9.65 5 8 5s-3.12-.27-4.14-.68q-.77-.31-1.1-.64c-.23-.21-.26-.36-.26-.43s.03-.22.26-.43q.33-.33 1.1-.64C4.88 1.77 6.35 1.5 8 1.5s3.12.27 4.14.68q.77.31 1.1.64c.23.21.26.36.26.43m0 6.83a6 6 0 0 1-.8.38c-1.24.5-2.9.79-4.7.79s-3.46-.29-4.7-.79a6 6 0 0 1-.8-.38v2.67c0 .07.03.22.26.43q.33.33 1.1.64c1.02.41 2.49.68 4.14.68s3.12-.27 4.14-.68q.77-.31 1.1-.64c.23-.21.26-.36.26-.43z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        }
+      />
+    ),
+  },
+  {
+    type: 'link',
+    text: 'Metrics',
+    href: '#/page3',
+    icon: (
+      <Icon
+        svg={
+          <svg viewBox="0 0 16 16" height="16" width="16">
+            <path
+              className="filled no-stroke"
+              fill="currentColor"
+              fillRule="evenodd"
+              d="M1 1v11.75C1 13.99 2 15 3.25 15H15v-1.5H3.25a.75.75 0 0 1-.75-.75V1zm13.3 5.01.51-.54-1.1-1.03-.5.55-3.23 3.43-2.27-2.27a1 1 0 0 0-1.42 0L4.22 8.22l-.53.53 1.06 1.06.53-.53L7 7.56l2.29 2.29a1 1 0 0 0 1.43-.03z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        }
+      />
+    ),
+  },
+  { type: 'divider' },
+  {
+    type: 'link',
+    text: 'Notifications',
+    href: '#/notifications',
+    icon: <Icon name="notification" />,
+  },
+  {
+    type: 'link',
+    text: 'Support',
+    href: 'https://example.com',
+    external: true,
+    icon: <Icon name="support" />,
+  },
+];
+
+const navWithSections: SideNavigationProps.Item[] = [
+  {
+    type: 'link',
+    text: 'Dashboard',
+    href: '#/dashboard',
+    icon: <Icon name="grid-view" />,
+  },
+  {
+    type: 'link',
+    text: 'Instances',
+    href: '#/instances',
+    icon: cubeIcon,
+  },
+  {
+    type: 'section',
+    text: 'Reports and Analytics',
+    items: [
+      {
+        type: 'link',
+        text: 'Usage',
+        href: '#/page4',
+        icon: (
+          <Icon
+            svg={
+              <svg viewBox="0 0 16 16" height="16" width="16">
+                <path
+                  className="filled no-stroke"
+                  fill="currentColor"
+                  fillRule="evenodd"
+                  d="M1 1v11.75C1 13.99 2 15 3.25 15H15v-1.5H3.25a.75.75 0 0 1-.75-.75V1zm8.5 2.75V3H8v9h1.5V3.75M6 8v4H4.5V8zm7-1.25V6h-1.5v6H13V6.75"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+            }
+          />
+        ),
+      },
+      {
+        type: 'link',
+        text: 'Alarms',
+        href: '#/page5',
+        icon: <Icon name="status-warning" />,
+      },
+      {
+        type: 'link',
+        text: 'Logs',
+        href: '#/page6',
+        icon: <Icon name="list-view" />,
+      },
+    ],
+  },
+  {
+    type: 'section',
+    text: 'Security',
+    items: [
+      {
+        type: 'link',
+        text: 'API Keys',
+        href: '#/page7',
+        icon: <Icon name="key" />,
+      },
+      {
+        type: 'link',
+        text: 'Encryption',
+        href: '#/page8',
+        icon: <Icon name="lock-private" />,
+      },
+      {
+        type: 'link',
+        text: 'Authentication',
+        href: '#/page9',
+        icon: <Icon name="user-profile" />,
+      },
+    ],
+  },
+];
+
+const navWithELGs: SideNavigationProps.Item[] = [
+  {
+    type: 'link',
+    text: 'Dashboard',
+    href: '#/dashboard',
+    icon: (
+      <Icon
+        svg={
+          <svg xmlns="http://w3.org" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor">
+            <path d="M1.75 6.75 L8 1.5 L14.25 6.75 V13.5 A1 1 0 0 1 13.25 14.5 H2.75 A1 1 0 0 1 1.75 13.5 Z" />
+            <path d="M5.75 14.5 V9.5 H10.25 V14.5" />
+          </svg>
+        }
+      />
+    ),
+  },
+  {
+    type: 'link',
+    text: 'Deployments',
+    href: '#/page2',
+    icon: cubeIcon,
+  },
   {
     type: 'expandable-link-group',
-    text: 'Expandable link group',
-    href: '#/projects',
-    icon: <Icon name="folder" />,
+    text: 'Projects',
+    href: '#/group1',
+    icon: <Icon name="grid-view" />,
+    defaultExpanded: true,
     items: [
-      { type: 'link', text: 'Project 1', href: '#/projects/1' },
-      { type: 'link', text: 'Project 2', href: '#/projects/2' },
-      { type: 'link', text: 'Project 3', href: '#/projects/3' },
+      {
+        type: 'link',
+        text: 'Project 1',
+        href: '#/page4',
+      },
+      {
+        type: 'link',
+        text: 'Project 2',
+        href: '#/page5',
+      },
+      {
+        type: 'link',
+        text: 'Project 3',
+        href: '#/page6',
+      },
     ],
   },
-  { type: 'link', text: 'Documentation', href: '#/docs', external: true },
   {
-    type: 'section-group',
-    title: 'Section group',
+    type: 'expandable-link-group',
+    text: 'Groups',
+    href: '#/group2',
+    icon: <Icon name="group" />,
+    defaultExpanded: true,
     items: [
-      { type: 'link', text: 'Announcements', href: '#/announcements2', icon: <Icon name="announcement" /> },
-      { type: 'link', text: 'Team', href: '#/team2', icon: <Icon name="group" /> },
-      { type: 'link', text: 'Networking', href: '#/networking2', icon: <Icon name="share" /> },
+      {
+        type: 'link',
+        text: 'My team',
+        href: '#/page7',
+      },
+      {
+        type: 'link',
+        text: 'My org',
+        href: '#/page8',
+      },
+      {
+        type: 'link',
+        text: 'My company',
+        href: '#/page9',
+      },
     ],
   },
+  { type: 'divider' },
+  {
+    type: 'link',
+    text: 'Help and support',
+    href: 'https://example.com',
+    icon: <Icon name="support" />,
+  },
+  {
+    type: 'link',
+    text: 'Feedback',
+    href: '#/notifications',
+    icon: <Icon name="contact" />,
+  },
 ];
 
+function stripIcons(items: ReadonlyArray<SideNavigationProps.Item>): SideNavigationProps.Item[] {
+  return items.map((item): SideNavigationProps.Item => {
+    switch (item.type) {
+      case 'divider':
+        return item;
+      case 'link':
+        return { ...item, icon: undefined };
+      case 'section':
+        return { ...item, items: stripIcons(item.items) };
+      case 'link-group':
+        return { ...item, icon: undefined, items: stripIcons(item.items) };
+      case 'expandable-link-group':
+        return { ...item, icon: undefined, items: stripIcons(item.items) };
+      case 'section-group':
+        return {
+          ...item,
+          items: stripIcons(item.items) as Array<
+            | SideNavigationProps.Section
+            | SideNavigationProps.Link
+            | SideNavigationProps.LinkGroup
+            | SideNavigationProps.ExpandableLinkGroup
+          >,
+        };
+    }
+  });
+}
+
 const COLLAPSED_WIDTH = 52;
 const EXPANDED_WIDTH = 220;
 
+const itemsByRadioValue: Record<string, SideNavigationProps.Item[]> = {
+  first: simpleItems,
+  second: navWithSections,
+  third: navWithELGs,
+  fourth: kitchenSink,
+};
+
 export default function SideNavigationCollapsedPage() {
-  const [activeHref, setActiveHref] = useState('#/calendar');
+  const { urlParams, setUrlParams } = useContext(AppContext as CollapsedNavDemoContext);
+  const { itemsSet = 'first' } = urlParams;
+  const [activeHref, setActiveHref] = useState('#/dashboard');
   const [collapsed, setCollapsed] = useState(false);
   const [panelWidth, setPanelWidth] = useState(EXPANDED_WIDTH);
+  const [iconLayout, setIconLayout] = useState(true);
+  const items = itemsByRadioValue[itemsSet];
   const navRef = useRef<HTMLElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
   const reducedMotion = useReducedMotion(navRef);
@@ -99,7 +429,8 @@ export default function SideNavigationCollapsedPage() {
           {/* Toggle button at top */}
           <div
             style={{
-              padding: '12px',
+              paddingInline: collapsed ? '12px' : '20px 12px',
+              paddingBlock: '12px',
               display: 'flex',
               alignItems: 'center',
               justifyContent: collapsed ? 'center' : 'space-between',
@@ -108,7 +439,7 @@ export default function SideNavigationCollapsedPage() {
             {!collapsed && <Box variant="h3">Product name</Box>}
             <Button
               ref={toggleRef}
-              iconName={collapsed ? 'angle-right' : 'angle-left'}
+              iconName={'side-bar'}
               variant="icon"
               onClick={handleToggle}
               ariaLabel={collapsed ? 'Expand navigation' : 'Collapse navigation'}
@@ -118,7 +449,7 @@ export default function SideNavigationCollapsedPage() {
           </div>
           <SideNavigation
             activeHref={activeHref}
-            items={items}
+            items={iconLayout ? items : stripIcons(items)}
             collapsed={collapsed}
             onFollow={e => {
               e.preventDefault();
@@ -137,6 +468,19 @@ export default function SideNavigationCollapsedPage() {
             Toggle the navigation panel using the button. Items without icons are hidden in collapsed mode. Sections
             show their icon-bearing children as a flat list, and the section title becomes a divider in its place.
           </Box>
+          <RadioGroup
+            onChange={({ detail }) => setUrlParams({ itemsSet: detail.value })}
+            value={itemsSet}
+            items={[
+              { value: 'first', label: 'Simple' },
+              { value: 'second', label: 'With sections' },
+              { value: 'third', label: 'With ELGs' },
+              { value: 'fourth', label: 'Kitchen sink' },
+            ]}
+          />
+          <Toggle onChange={({ detail }) => setIconLayout(detail.checked)} checked={iconLayout}>
+            Icon layout
+          </Toggle>
         </SpaceBetween>
       </div>
     </div>
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index f19634ea03..44de4f484a 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -801,6 +801,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -813,6 +814,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "0ms",
   "motion-duration-transition-quick": "90ms",
@@ -820,6 +824,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -829,6 +834,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "ease-out",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -861,6 +867,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "size-icon-large": "48px",
   "size-icon-medium": "16px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "28px",
   "size-side-navigation-item-height": "24px",
   "size-table-selection-horizontal": "54px",
   "size-vertical-input": "28px",
@@ -1165,7 +1173,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-segment-wrapper": "#2a2e33",
   "color-background-side-navigation-item-active": "transparent",
   "color-background-side-navigation-item-active-collapsed": "#00a1c9",
-  "color-background-side-navigation-item-icon-hover": "#414750",
+  "color-background-side-navigation-item-icon-hover": "#12293b",
   "color-background-skeleton": "#2a2e33",
   "color-background-skeleton-wave": "#414750",
   "color-background-slider-handle-active": "#44b9d6",
@@ -1784,6 +1792,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -1796,6 +1805,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "0ms",
   "motion-duration-transition-quick": "90ms",
@@ -1803,6 +1815,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -1812,6 +1825,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "ease-out",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -1844,6 +1858,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "size-icon-large": "48px",
   "size-icon-medium": "16px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "54px",
   "size-vertical-input": "32px",
@@ -2767,6 +2783,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -2779,6 +2796,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "0ms",
   "motion-duration-transition-quick": "90ms",
@@ -2786,6 +2806,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -2795,6 +2816,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "ease-out",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -2827,6 +2849,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "size-icon-large": "48px",
   "size-icon-medium": "16px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "54px",
   "size-vertical-input": "32px",
@@ -3750,6 +3774,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-duration-avatar-gen-ai-gradient": "0ms",
   "motion-duration-avatar-loading-dots": "0ms",
   "motion-duration-complex": "0ms",
+  "motion-duration-expandable-content-enter": "0ms",
   "motion-duration-expressive": "0ms",
   "motion-duration-extra-slow": "0ms",
   "motion-duration-fast": "0ms",
@@ -3762,6 +3787,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-duration-rotate-90": "0ms",
   "motion-duration-show-paced": "0ms",
   "motion-duration-show-quick": "0ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "0ms",
   "motion-duration-tooltip-enter": "0ms",
   "motion-duration-transition-quick": "0ms",
@@ -3769,6 +3797,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-duration-transition-show-quick": "0ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -3778,6 +3807,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "ease-out",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -3810,6 +3840,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "size-icon-large": "48px",
   "size-icon-medium": "16px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "54px",
   "size-vertical-input": "32px",
@@ -4733,6 +4765,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -4745,6 +4778,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "115ms",
   "motion-duration-transition-quick": "90ms",
@@ -4752,6 +4788,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -4761,6 +4798,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -4793,6 +4831,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "size-icon-large": "48px",
   "size-icon-medium": "20px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "40px",
   "size-vertical-input": "32px",
@@ -5716,6 +5756,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -5728,6 +5769,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "115ms",
   "motion-duration-transition-quick": "90ms",
@@ -5735,6 +5779,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -5744,6 +5789,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -5776,6 +5822,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "size-icon-large": "48px",
   "size-icon-medium": "20px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "28px",
   "size-side-navigation-item-height": "24px",
   "size-table-selection-horizontal": "40px",
   "size-vertical-input": "28px",
@@ -6080,7 +6128,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-segment-wrapper": "#0f141a",
   "color-background-side-navigation-item-active": "transparent",
   "color-background-side-navigation-item-active-collapsed": "#42b4ff",
-  "color-background-side-navigation-item-icon-hover": "#333843",
+  "color-background-side-navigation-item-icon-hover": "#001129",
   "color-background-skeleton": "#232b37",
   "color-background-skeleton-wave": "#333843",
   "color-background-slider-handle-active": "#75cfff",
@@ -6699,6 +6747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -6711,6 +6760,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "115ms",
   "motion-duration-transition-quick": "90ms",
@@ -6718,6 +6770,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -6727,6 +6780,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -6759,6 +6813,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "size-icon-large": "48px",
   "size-icon-medium": "20px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "40px",
   "size-vertical-input": "32px",
@@ -7063,7 +7119,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-segment-wrapper": "#161d26",
   "color-background-side-navigation-item-active": "transparent",
   "color-background-side-navigation-item-active-collapsed": "#42b4ff",
-  "color-background-side-navigation-item-icon-hover": "#333843",
+  "color-background-side-navigation-item-icon-hover": "#001129",
   "color-background-skeleton": "#232b37",
   "color-background-skeleton-wave": "#333843",
   "color-background-slider-handle-active": "#75cfff",
@@ -7682,6 +7738,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expandable-content-enter": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -7694,6 +7751,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-rotate-90": "135ms",
   "motion-duration-show-paced": "180ms",
   "motion-duration-show-quick": "135ms",
+  "motion-duration-side-navigation-content-enter-fade": "0ms",
+  "motion-duration-side-navigation-content-exit": "0ms",
+  "motion-duration-side-navigation-content-exit-fade": "0ms",
   "motion-duration-slow": "180ms",
   "motion-duration-tooltip-enter": "115ms",
   "motion-duration-transition-quick": "90ms",
@@ -7701,6 +7761,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-content-enter": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -7710,6 +7771,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)",
   "motion-easing-show-paced": "ease-out",
   "motion-easing-show-quick": "ease-out",
+  "motion-easing-side-navigation-content-exit": "ease-out",
   "motion-easing-sticky": "cubic-bezier(1, 0, 0.83, 1)",
   "motion-easing-tooltip-enter": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-transition-quick": "linear",
@@ -7742,6 +7804,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "size-icon-large": "48px",
   "size-icon-medium": "20px",
   "size-icon-normal": "16px",
+  "size-side-navigation-collapsed-width": "52px",
+  "size-side-navigation-item-collapsed": "30px",
   "size-side-navigation-item-height": "28px",
   "size-table-selection-horizontal": "40px",
   "size-vertical-input": "32px",
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 2de90ad51c..7b0c44c509 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -3357,6 +3357,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -7000,6 +7014,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -10643,6 +10671,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -14286,6 +14328,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -17929,6 +17985,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -21572,6 +21642,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -25215,6 +25299,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
       },
     },
+    "size-side-navigation-collapsed-width": {
+      "$description": "The default width of the collapsed side navigation rail.",
+      "$value": {
+        "comfortable": "52px",
+        "compact": "52px",
+      },
+    },
+    "size-side-navigation-item-collapsed": {
+      "$description": "The square size of collapsed side navigation items.",
+      "$value": {
+        "comfortable": "30px",
+        "compact": "28px",
+      },
+    },
     "size-side-navigation-item-height": {
       "$description": "The minimum height of side navigation items.",
       "$value": {
@@ -28863,6 +28961,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -32506,6 +32618,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -36149,6 +36275,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -39792,6 +39932,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -43435,6 +43589,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -47078,6 +47246,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -50721,6 +50903,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -54364,6 +54560,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
           },
         },
+        "size-side-navigation-collapsed-width": {
+          "$description": "The default width of the collapsed side navigation rail.",
+          "$value": {
+            "comfortable": "52px",
+            "compact": "52px",
+          },
+        },
+        "size-side-navigation-item-collapsed": {
+          "$description": "The square size of collapsed side navigation items.",
+          "$value": {
+            "comfortable": "30px",
+            "compact": "28px",
+          },
+        },
         "size-side-navigation-item-height": {
           "$description": "The minimum height of side navigation items.",
           "$value": {
@@ -58007,6 +58217,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
       },
     },
+    "size-side-navigation-collapsed-width": {
+      "$description": "The default width of the collapsed side navigation rail.",
+      "$value": {
+        "comfortable": "52px",
+        "compact": "52px",
+      },
+    },
+    "size-side-navigation-item-collapsed": {
+      "$description": "The square size of collapsed side navigation items.",
+      "$value": {
+        "comfortable": "30px",
+        "compact": "28px",
+      },
+    },
     "size-side-navigation-item-height": {
       "$description": "The minimum height of side navigation items.",
       "$value": {
diff --git a/src/app-layout-toolbar/index.tsx b/src/app-layout-toolbar/index.tsx
index a40660a8ae..4d2b0e269a 100644
--- a/src/app-layout-toolbar/index.tsx
+++ b/src/app-layout-toolbar/index.tsx
@@ -62,6 +62,7 @@ const AppLayoutToolbar = React.forwardRef(
           disableContentPaddings: rest.disableContentPaddings,
           navigationWidth,
           navigationHide: rest.navigationHide,
+          navigationCloseBehavior: rest.navigationCloseBehavior,
           toolsHide: rest.toolsHide,
           toolsWidth,
           maxContentWidth,
diff --git a/src/app-layout/constants.scss b/src/app-layout/constants.scss
index 04a4bcc032..2dff5ba050 100644
--- a/src/app-layout/constants.scss
+++ b/src/app-layout/constants.scss
@@ -35,8 +35,5 @@ $toolbar-z-index: 1000;
 // Shared toolbar drawer component values
 $toolbar-vertical-panel-icon-offset: 14px;
 
-// Default collapsed navigation rail width
-$navigation-collapsed-width-default: 54px;
-
 $ai-drawer-background: #161d26;
 $ai-drawer-background: awsui.$color-background-layout-ai-drawer;
diff --git a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
index 5830eb28e7..36d9a15f62 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
@@ -8,7 +8,7 @@
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
 
-$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, awsui.$size-side-navigation-collapsed-width);
 
 .hide-navigation {
   position: absolute;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 65263ecd5f..4b4d4ac56b 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -155,7 +155,7 @@
 
   &.navigation-collapsed {
     @include desktop-only {
-      inline-size: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+      inline-size: var(#{custom-props.$navigationCollapsedWidth}, awsui.$size-side-navigation-collapsed-width);
     }
   }
 }
diff --git a/src/expandable-section/__tests__/expandable-section.test.tsx b/src/expandable-section/__tests__/expandable-section.test.tsx
index 751611d859..3c240ba9bf 100644
--- a/src/expandable-section/__tests__/expandable-section.test.tsx
+++ b/src/expandable-section/__tests__/expandable-section.test.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { isThemeActive, useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import '../../__a11y__/to-validate-a11y';
 import Button from '../../../lib/components/button';
@@ -17,11 +17,15 @@ import styles from '../../../lib/components/expandable-section/styles.selectors.
 
 jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  isThemeActive: jest.fn().mockReturnValue(false),
   warnOnce: jest.fn(),
+  useReducedMotion: jest.fn().mockReturnValue(false),
 }));
 
 afterEach(() => {
+  (isThemeActive as jest.Mock).mockReturnValue(false);
   (warnOnce as jest.Mock).mockReset();
+  (useReducedMotion as jest.Mock).mockReturnValue(false);
 });
 
 function renderExpandableSection(props: ExpandableSectionProps = {}): ExpandableSectionWrapper {
@@ -230,6 +234,36 @@ describe('Expandable Section', () => {
       expect(header).not.toHaveAttribute('tabindex', '0');
       expect(icon.tagName).toBe('BUTTON');
     });
+    test('settles content immediately under reduced motion, since grid-template-rows never transitions', () => {
+      (isThemeActive as jest.Mock).mockReturnValue(true);
+      (useReducedMotion as jest.Mock).mockReturnValue(true);
+      const wrapper = renderExpandableSection({ defaultExpanded: false, children: 'Example content' });
+      fireEvent.click(wrapper.findHeader().getElement());
+      const contentInner = wrapper.findExpandedContent()!.getElement().querySelector(`.${styles['content-inner']}`)!;
+      expect(contentInner.className).toContain(styles['content-inner-settled']);
+    });
+    test('settles content immediately outside One Theme, where grid-template-rows never transitions', () => {
+      const wrapper = renderExpandableSection({ defaultExpanded: false, children: 'Example content' });
+      fireEvent.click(wrapper.findHeader().getElement());
+      const contentInner = wrapper.findExpandedContent()!.getElement().querySelector(`.${styles['content-inner']}`)!;
+      expect(contentInner.className).toContain(styles['content-inner-settled']);
+    });
+    test('settles after its own transition, ignores nested transitions, and resets immediately on collapse', () => {
+      (isThemeActive as jest.Mock).mockReturnValue(true);
+      const wrapper = renderExpandableSection({ defaultExpanded: false, children: 'Example content' });
+      fireEvent.click(wrapper.findHeader().getElement());
+      const contentOuter = wrapper.findExpandedContent()!.getElement();
+      const contentInner = contentOuter.querySelector(`.${styles['content-inner']}`)!;
+
+      expect(contentInner.className).not.toContain(styles['content-inner-settled']);
+      fireEvent.transitionEnd(contentInner);
+      expect(contentInner.className).not.toContain(styles['content-inner-settled']);
+      fireEvent.transitionEnd(contentOuter);
+      expect(contentInner.className).toContain(styles['content-inner-settled']);
+
+      fireEvent.click(wrapper.findHeader().getElement());
+      expect(contentInner.className).not.toContain(styles['content-inner-settled']);
+    });
   });
 
   describe('defaultExpanded', () => {
@@ -618,6 +652,27 @@ describe('__expandIconPosition', () => {
       });
       expect(wrapper.findContent().getElement()).not.toHaveClass(styles['disable-content-paddings']);
     });
+
+    test('applies disable-content-paddings class for container variant', () => {
+      const wrapper = renderExpandableSection({
+        variant: 'container',
+        disableContentPaddings: true,
+        defaultExpanded: true,
+        headerText: 'Header',
+        children: 'Content',
+      });
+      expect(wrapper.findContent().getElement()).toHaveClass(styles['disable-content-paddings']);
+    });
+
+    test('does not apply disable-content-paddings class for container variant by default', () => {
+      const wrapper = renderExpandableSection({
+        variant: 'container',
+        defaultExpanded: true,
+        headerText: 'Header',
+        children: 'Content',
+      });
+      expect(wrapper.findContent().getElement()).not.toHaveClass(styles['disable-content-paddings']);
+    });
   });
 
   describe('outside icon button (end position with renderIconOutsideHeader)', () => {
diff --git a/src/expandable-section/expandable-section-container.tsx b/src/expandable-section/expandable-section-container.tsx
index f1d045aa40..c0237133cf 100644
--- a/src/expandable-section/expandable-section-container.tsx
+++ b/src/expandable-section/expandable-section-container.tsx
@@ -22,7 +22,6 @@ interface ExpandableSectionContainerProps extends InternalBaseComponentProps {
   children?: React.ReactNode;
   variant: InternalVariant;
   expanded: boolean | undefined;
-  disableContentPaddings: boolean | undefined;
   __injectAnalyticsComponentMetadata?: boolean;
 }
 
@@ -32,7 +31,6 @@ export const ExpandableSectionContainer = ({
   header,
   variant,
   expanded,
-  disableContentPaddings,
   __internalRootRef,
   __injectAnalyticsComponentMetadata,
   ...rest
@@ -59,7 +57,7 @@ export const ExpandableSectionContainer = ({
           className={className}
           header={header}
           variant={variant === 'stacked' ? 'stacked' : 'default'}
-          disableContentPaddings={disableContentPaddings || !expanded}
+          disableContentPaddings={true}
           disableHeaderPaddings={true}
           __hiddenContent={!expanded}
           __internalRootRef={__internalRootRef}
diff --git a/src/expandable-section/expandable-section-header.tsx b/src/expandable-section/expandable-section-header.tsx
index c14266309c..09245de032 100644
--- a/src/expandable-section/expandable-section-header.tsx
+++ b/src/expandable-section/expandable-section-header.tsx
@@ -104,6 +104,7 @@ interface ExpandableDefaultHeaderProps {
 
 interface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {
   ariaLabelledBy?: string;
+  hideExpandIcon?: boolean;
 }
 
 interface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {
@@ -123,6 +124,7 @@ interface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps
   headerActions?: ReactNode;
   headingTagOverride?: ExpandableSectionProps.HeadingTag;
   ariaLabelledBy?: string;
+  hideExpandIcon?: boolean;
 }
 
 const getExpandActionAnalyticsMetadataAttribute = (expanded: boolean) => {
@@ -186,8 +188,9 @@ const ExpandableNavigationHeader = ({
   children,
   icon,
   expandIconPosition,
+  hideExpandIcon,
 }: ExpandableNavigationHeaderProps) => {
-  const expandButton = (
+  const expandButton = hideExpandIcon ? null : (
     <ExpandIconButton
       icon={icon}
       ariaLabelledBy={ariaLabelledBy}
@@ -401,6 +404,7 @@ export const ExpandableSectionHeader = ({
   onKeyDown,
   onClick,
   expandIconPosition,
+  hideExpandIcon,
 }: ExpandableSectionHeaderProps) => {
   const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;
   const icon = (
@@ -446,6 +450,7 @@ export const ExpandableSectionHeader = ({
       <ExpandableNavigationHeader
         className={clsx(className, wrapperClassName)}
         ariaLabelledBy={ariaLabelledBy}
+        hideExpandIcon={hideExpandIcon}
         {...defaultHeaderProps}
       >
         <span className={styles['header-navigation-content']}>{headerText ?? header}</span>
diff --git a/src/expandable-section/internal.tsx b/src/expandable-section/internal.tsx
index 92f36921b4..a9c01e9bdb 100644
--- a/src/expandable-section/internal.tsx
+++ b/src/expandable-section/internal.tsx
@@ -1,16 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { KeyboardEvent, useCallback, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import React, { KeyboardEvent, useCallback, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 
 import { getBaseProps } from '../internal/base-component';
 import { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';
+import { Transition } from '../internal/components/transition';
 import { fireNonCancelableEvent } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
+import { useOneTheme } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
@@ -34,10 +35,15 @@ export type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'varia
     /**
      * Removes default padding from the header wrapper and content wrapper.
      * Used by side-navigation to zero out expandable-section's own padding so the
-     * parent can control spacing directly, eliminating brittle cross-component
-     * positional selectors.
+     * parent can control spacing directly.
      */
     __disableHeaderPaddings?: boolean;
+    /**
+     * When true, the expand/collapse icon button is hidden from assistive technology
+     * and removed from the tab order. Used by side-navigation when the nav is collapsed
+     * and the caret is visually clipped but still present in the DOM.
+     */
+    __hideExpandIcon?: boolean;
   };
 
 export default function InternalExpandableSection({
@@ -59,9 +65,11 @@ export default function InternalExpandableSection({
   __injectAnalyticsComponentMetadata,
   __expandIconPosition = 'start',
   __disableHeaderPaddings = false,
+  __hideExpandIcon = false,
   ...props
 }: InternalExpandableSectionProps) {
-  const ref = useRef<HTMLDivElement>(null);
+  const contentInnerRef = useRef<HTMLDivElement>(null);
+  const isOneTheme = useOneTheme();
   const controlId = useUniqueId();
   const triggerControlId = `${controlId}-trigger`;
   const descriptionId = `${controlId}-description`;
@@ -74,9 +82,9 @@ export default function InternalExpandableSection({
   });
 
   const onExpandChange = useCallback(
-    (expanded: boolean) => {
-      setExpanded(expanded);
-      fireNonCancelableEvent(onChange, { expanded });
+    (newExpanded: boolean) => {
+      setExpanded(newExpanded);
+      fireNonCancelableEvent(onChange, { expanded: newExpanded });
     },
     [onChange, setExpanded]
   );
@@ -103,6 +111,15 @@ export default function InternalExpandableSection({
     }
   }, []);
 
+  // Set inert on collapsed content to block pointer/focus events and hide from
+  // assistive technology. Direct DOM manipulation needed until React supports
+  // the inert attribute natively. https://github.com/facebook/react/issues/17157
+  useEffect(() => {
+    if (contentInnerRef.current) {
+      contentInnerRef.current.inert = !expanded;
+    }
+  }, [expanded]);
+
   const triggerProps = {
     ariaControls: controlId,
     ariaLabel: headerAriaLabel,
@@ -121,7 +138,6 @@ export default function InternalExpandableSection({
       expanded={expanded}
       className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}
       variant={variant}
-      disableContentPaddings={disableContentPaddings}
       __injectAnalyticsComponentMetadata={__injectAnalyticsComponentMetadata}
       header={
         <ExpandableSectionHeader
@@ -143,29 +159,55 @@ export default function InternalExpandableSection({
           headerActions={headerActions}
           headingTagOverride={headingTagOverride}
           expandIconPosition={__expandIconPosition}
+          hideExpandIcon={__hideExpandIcon}
           {...triggerProps}
         />
       }
       __internalRootRef={__internalRootRef}
     >
-      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>
-        <div
-          id={controlId}
-          ref={ref}
-          className={clsx(
-            styles.content,
-            styles[`content-${baseVariant}`],
-            expanded && styles['content-expanded'],
-            disableContentPaddings && styles['disable-content-paddings']
-          )}
-          role="group"
-          aria-label={triggerProps.ariaLabel}
-          aria-labelledby={triggerProps.ariaLabelledBy}
-          aria-describedby={variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined}
-        >
-          {children}
-        </div>
-      </CSSTransition>
+      <Transition<HTMLDivElement> in={!!expanded} disabled={!isOneTheme}>
+        {(transitionState, transitionEventsRef, motionDisabled) => {
+          const contentSettled = !!expanded && (motionDisabled || transitionState === 'entered');
+
+          return (
+            <div
+              ref={transitionEventsRef}
+              id={controlId}
+              className={clsx(
+                styles.content,
+                styles[`content-${baseVariant}`],
+                expanded && styles['content-expanded'],
+                disableContentPaddings && styles['disable-content-paddings']
+              )}
+              role="group"
+              aria-label={triggerProps.ariaLabel}
+              aria-labelledby={triggerProps.ariaLabelledBy}
+              aria-describedby={
+                variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined
+              }
+            >
+              <div
+                ref={contentInnerRef}
+                className={clsx(
+                  styles['content-inner'],
+                  expanded && styles['content-inner-expanded'],
+                  contentSettled && styles['content-inner-settled']
+                )}
+              >
+                <div
+                  className={clsx(
+                    styles['content-inner-body'],
+                    styles[`content-inner-body-${baseVariant}`],
+                    disableContentPaddings && styles['disable-content-paddings']
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            </div>
+          );
+        }}
+      </Transition>
     </ExpandableSectionContainer>
   );
 }
diff --git a/src/expandable-section/motion.scss b/src/expandable-section/motion.scss
deleted file mode 100644
index 9dcef045f5..0000000000
--- a/src/expandable-section/motion.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-
-@use '../internal/styles' as styles;
-@use '../internal/styles/tokens' as tokens;
-
-.content {
-  &-enter {
-    @include styles.with-motion {
-      animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
-      @include styles.animation-fade-in;
-    }
-  }
-}
-
-.trigger {
-  &-expanded {
-    @include styles.with-motion {
-      transition: border-bottom-color tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
-    }
-  }
-}
-
-.icon {
-  @include styles.with-motion {
-    transition: transform tokens.$motion-duration-rotate-90 tokens.$motion-easing-rotate-90;
-  }
-}
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
index 9ea3c929eb..ee38f00c32 100644
--- a/src/expandable-section/styles.scss
+++ b/src/expandable-section/styles.scss
@@ -8,7 +8,13 @@
 @use '../container/shared' as container;
 @use '../internal/styles/utils/theming';
 
-@use './motion';
+// Show/hide animation (show = height leads, opacity trails; hide = equal, no delay).
+$reveal-enter-duration: awsui.$motion-duration-expandable-content-enter;
+$reveal-enter-easing: awsui.$motion-easing-expandable-content-enter;
+$reveal-enter-delay: calc(#{$reveal-enter-duration} / 3);
+$reveal-enter-motion: $reveal-enter-duration $reveal-enter-easing;
+$reveal-enter-delayed-motion: $reveal-enter-motion $reveal-enter-delay;
+$reveal-exit-motion: awsui.$motion-duration-show-quick $reveal-enter-easing;
 
 $icon-width-normal: awsui.$size-icon-normal;
 $icon-width-medium: awsui.$size-icon-medium;
@@ -38,6 +44,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .icon {
   transform: rotate(-90deg);
 
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
+  }
+
   &.expanded {
     transform: rotate(0deg);
   }
@@ -126,9 +136,20 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     &:not(.header-deprecated) {
       padding-inline-start: $icon-total-space-normal;
     }
+
+    // HIDE (collapsed): quick collapse, no delay
+    @include styles.with-motion {
+      transition: border-block-end-color $reveal-exit-motion;
+    }
+
     &.wrapper-expanded {
       padding-block-end: awsui.$space-scaled-xxs;
       border-block-end-color: awsui.$color-border-expandable-section-default;
+
+      // SHOW (expanded): border fades in with the same delay as content opacity so both appear together
+      @include styles.with-motion {
+        transition: border-block-end-color $reveal-enter-delayed-motion;
+      }
     }
   }
 
@@ -151,6 +172,11 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
     padding-inline-end: container.$header-padding-horizontal;
 
+    // HIDE (collapsed state): padding settles back to symmetric top/bottom.
+    @include styles.with-motion {
+      transition: padding-block-end $reveal-exit-motion;
+    }
+
     &:not(.wrapper-expanded) {
       // Equal top and bottom padding so standalone header has vertical symmetry.
       padding-block-end: awsui.$space-container-header-top;
@@ -267,23 +293,82 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .content {
   display: none;
 
+  &-expanded {
+    display: block;
+  }
+
+  &-compact {
+    padding-inline-start: $icon-total-space-normal;
+  }
+
+  // One-theme only: animated grid-template-rows reveal instead of the true/false display:none. VR keeps
+  // instantaneous display toggling, to prevent breaking reliance on synchronous isDisplayed()/isExisting() checks.
+  @include theming.one-theme-only {
+    display: grid;
+    grid-template-rows: 0fr;
+
+    // HIDE (collapsed state): quick collapse, no delay
+    @include styles.with-motion {
+      transition: grid-template-rows $reveal-exit-motion;
+    }
+
+    &-expanded {
+      grid-template-rows: 1fr;
+
+      // SHOW (expanded state): paced height opening, no delay — height leads.
+      @include styles.with-motion {
+        transition: grid-template-rows $reveal-enter-motion;
+      }
+    }
+  }
+}
+
+// One-theme only: inner wrapper that collapses to 0 height via the grid-row track.
+.content-inner {
+  @include theming.one-theme-only {
+    // overflow: visible lets negative-margin backgrounds (e.g. side-navigation
+    // active/hover/focus states) bleed past the inline edges.
+    overflow-x: visible;
+    // overflow: clip (not hidden, which would coerce x-axis to auto) still lets the grid-row track collapse.
+    overflow-y: clip;
+    min-block-size: 0;
+    opacity: 0;
+
+    // HIDE (collapsed state): quick opacity collapse, no delay.
+    @include styles.with-motion {
+      transition: opacity $reveal-exit-motion;
+    }
+
+    &-expanded {
+      opacity: 1;
+
+      // SHOW (expanded state): opacity fades in AFTER height has partially
+      // opened, creating a perceptible fade in the revealed space.
+      @include styles.with-motion {
+        transition: opacity $reveal-enter-delayed-motion;
+      }
+    }
+
+    &-settled {
+      overflow-y: visible;
+    }
+  }
+}
+
+// Padding lives here rather than outer content wrapper so the grid track can fully collapse to zero at 0fr.
+.content-inner-body {
   &-default,
   &-inline {
     padding-block: awsui.$space-scaled-xs;
-    padding-inline: 0;
   }
 
   &-footer {
     padding-block: awsui.$space-xs;
-    padding-inline: 0;
-  }
-
-  &-expanded {
-    display: block;
   }
 
-  &-compact {
-    padding-inline-start: $icon-total-space-normal;
+  &-container {
+    padding-block: awsui.$space-container-content-top awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
   }
 }
 
@@ -319,7 +404,6 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
-// When the expand/collapse icon is rendered at the end of the header.
 // For non-container variants the icon is rendered at the end of the headerButton
 // (taking the full width of the header). For the container variant the icon is
 // rendered as a sibling of the InternalHeader so it appears past any actions.
@@ -425,12 +509,16 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
-// Semantic wrapper around HeadingTag + actions in non-container variants
-.header-icon-end > .header-content {
-  flex: 1;
-  min-inline-size: 0;
+// min-block-size: 0 lets this grid item collapse to zero height when an ancestor
+// uses grid-template-rows: 0fr (side-navigation section header collapse).
+// Must remain global (not scoped to .header-icon-end) because the side-nav
+// collapse targets the header wrapper regardless of icon position.
+.header-content {
+  min-block-size: 0;
 }
 
+// In the end-icon layout, header content elements must shrink without overflowing.
+.header-icon-end > .header-content,
 .header-icon-end > .header-navigation-content {
   flex: 1;
   min-inline-size: 0;
diff --git a/src/internal/components/transition/__tests__/transition.test.tsx b/src/internal/components/transition/__tests__/transition.test.tsx
new file mode 100644
index 0000000000..5621d3b542
--- /dev/null
+++ b/src/internal/components/transition/__tests__/transition.test.tsx
@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
+
+import { Transition } from '..';
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  useReducedMotion: jest.fn().mockReturnValue(false),
+}));
+
+afterEach(() => {
+  (useReducedMotion as jest.Mock).mockReturnValue(false);
+});
+
+function renderTransition({ disabled = false }: { disabled?: boolean } = {}) {
+  const { getByTestId } = render(
+    <Transition<HTMLDivElement> in={true} disabled={disabled}>
+      {(state, ref, motionDisabled) => (
+        <div ref={ref} data-testid="subject" data-state={state} data-motion-disabled={motionDisabled} />
+      )}
+    </Transition>
+  );
+  return getByTestId('subject');
+}
+
+describe('Transition', () => {
+  test('reports motion as enabled by default', () => {
+    expect(renderTransition()).toHaveAttribute('data-motion-disabled', 'false');
+  });
+
+  test('reports motion as disabled through the disabled prop', () => {
+    expect(renderTransition({ disabled: true })).toHaveAttribute('data-motion-disabled', 'true');
+  });
+
+  test('reports motion as disabled through reduced-motion detection', () => {
+    (useReducedMotion as jest.Mock).mockReturnValue(true);
+    expect(renderTransition()).toHaveAttribute('data-motion-disabled', 'true');
+  });
+});
diff --git a/src/internal/components/transition/index.tsx b/src/internal/components/transition/index.tsx
index e38ffc8d67..f8cd9548f6 100644
--- a/src/internal/components/transition/index.tsx
+++ b/src/internal/components/transition/index.tsx
@@ -11,25 +11,29 @@ import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal'
 
 export type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';
 
-interface TransitionProps {
+interface TransitionProps<T extends HTMLElement> {
   in: boolean;
   exit?: boolean;
 
   disabled?: boolean;
 
-  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;
+  children: (
+    state: TransitionStatus,
+    transitioningElementRef: MutableRefObject<T | null>,
+    motionDisabled: boolean
+  ) => React.ReactNode;
   onStatusChange?: (status: TransitionStatus) => void;
   transitionChangeDelay?: { entering?: number };
   exitTimeout?: number;
 }
 
 /**
- * This component is a wrapper around the CSSTransition component.
+ * This component wraps react-transition-group's Transition component.
  *
- * It provides a second parameter in its rendering function that must be
- * attached to the node that is transitioning.
+ * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,
+ * and whether motion is disabled by either user preference or the disabled prop.
  */
-export function Transition({
+export function Transition<T extends HTMLElement = any>({
   in: isIn,
   children,
   exit = true,
@@ -38,8 +42,8 @@ export function Transition({
   transitionChangeDelay,
   exitTimeout,
   ...rest
-}: TransitionProps) {
-  const transitionRootElement = useRef<HTMLElement>(null);
+}: TransitionProps<T>) {
+  const transitionRootElement = useRef<T>(null);
   // the initial state of the transition should be either 'exited' or 'entered' depending
   // on the `in` property, this mimicks how internally the Transition component works here:
   // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121
@@ -113,7 +117,7 @@ export function Transition({
       }}
       {...rest}
     >
-      {() => children(transitionState, transitionRootElement)}
+      {() => children(transitionState, transitionRootElement, motionDisabled)}
     </ReactTransitionGroupTransition>
   );
 }
diff --git a/src/internal/styles/motion/mixins.scss b/src/internal/styles/motion/mixins.scss
index 187fd82c4c..008426d3cc 100644
--- a/src/internal/styles/motion/mixins.scss
+++ b/src/internal/styles/motion/mixins.scss
@@ -21,3 +21,12 @@
   }
 }
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+
+// A wrapper for animation related styles that should be applied to one-theme only.
+@mixin one-theme-with-motion($selector: '') {
+  @include theming.one-theme-only($selector) {
+    @include with-motion {
+      @content;
+    }
+  }
+}
diff --git a/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx b/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx
index 1388f9b481..c610777eff 100644
--- a/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx
+++ b/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx
@@ -3,12 +3,26 @@
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
+import { isThemeActive, useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
+
 import Icon from '../../../lib/components/icon';
 import SideNavigation, { SideNavigationProps } from '../../../lib/components/side-navigation';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
+import styles from '../../../lib/components/side-navigation/styles.css.js';
 import testStyles from '../../../lib/components/side-navigation/test-classes/styles.css.js';
 
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  isThemeActive: jest.fn().mockReturnValue(false),
+  useReducedMotion: jest.fn().mockReturnValue(false),
+}));
+
+afterEach(() => {
+  (isThemeActive as jest.Mock).mockReturnValue(false);
+  (useReducedMotion as jest.Mock).mockReturnValue(false);
+});
+
 function renderSideNavigation(props: SideNavigationProps = {}) {
   const { container } = render(<SideNavigation {...props} />);
   return createWrapper(container).findSideNavigation()!;
@@ -90,40 +104,6 @@ describe('SideNavigation collapsed mode', () => {
   });
 
   describe('sections and section groups', () => {
-    it.each([
-      {
-        label: 'section',
-        items: [
-          {
-            type: 'section' as const,
-            text: 'Resources',
-            items: [iconLink('Compute', '#/compute'), iconLink('Storage', '#/storage'), plainLink('No icon', '#/none')],
-          },
-        ],
-        iconHrefs: ['#/compute', '#/storage'],
-        hiddenHref: '#/none',
-        ariaLabel: 'Resources',
-      },
-      {
-        label: 'section-group',
-        items: [
-          {
-            type: 'section-group' as const,
-            title: 'My Group',
-            items: [iconLink('Item A', '#/a'), iconLink('Item B', '#/b'), plainLink('No icon', '#/none')],
-          },
-        ],
-        iconHrefs: ['#/a', '#/b'],
-        hiddenHref: '#/none',
-        ariaLabel: 'My Group',
-      },
-    ])('flattens $label children with icons and applies aria-label', ({ items, iconHrefs, hiddenHref, ariaLabel }) => {
-      const wrapper = renderSideNavigation({ collapsed: true, items });
-      iconHrefs.forEach(href => expect(wrapper.findLinkByHref(href)).not.toBeNull());
-      expect(wrapper.findLinkByHref(hiddenHref)).toBeNull();
-      expect(wrapper.find(`ul[aria-label="${ariaLabel}"]`)).not.toBeNull();
-    });
-
     it.each([
       {
         label: 'section',
@@ -138,7 +118,7 @@ describe('SideNavigation collapsed mode', () => {
       expect(wrapper.findAll('a')).toHaveLength(0);
     });
 
-    it('renders a divider in place of the section title when collapsed', () => {
+    it('renders collapsed section with children mounted and no divider', () => {
       const wrapper = renderSideNavigation({
         collapsed: true,
         items: [
@@ -150,8 +130,9 @@ describe('SideNavigation collapsed mode', () => {
           },
         ],
       });
-      expect(wrapper.findAll('hr')).toHaveLength(1);
-      expect(wrapper.find('ul[aria-label="Resources"]')).not.toBeNull();
+      expect(wrapper.findAll('hr')).toHaveLength(0);
+      expect(wrapper.findLinkByHref('#/compute')).not.toBeNull();
+      expect(wrapper.findLinkByHref('#/storage')).not.toBeNull();
     });
 
     it('does not render a section divider when the section has no icon-bearing children', () => {
@@ -161,10 +142,40 @@ describe('SideNavigation collapsed mode', () => {
       });
       expect(wrapper.findAll('hr')).toHaveLength(0);
     });
+
+    it('keeps the section expanded when collapsed so children are not height-collapsed', () => {
+      const wrapper = renderSideNavigation({
+        collapsed: true,
+        items: [
+          {
+            type: 'section',
+            text: 'Resources',
+            items: [iconLink('Compute', '#/compute'), iconLink('Storage', '#/storage')],
+          },
+        ],
+      });
+      expect(wrapper.findItemByIndex(1)?.findSection()?.findExpandedContent()).toBeTruthy();
+    });
+
+    it.each([true, false])(
+      'applies the collapsed class to the section-group title only when collapsed=%s',
+      collapsed => {
+        const wrapper = renderSideNavigation({
+          collapsed,
+          items: [{ type: 'section-group', title: 'My Group', items: [iconLink('Item A', '#/a')] }],
+        });
+        const titleEl = wrapper.findItemByIndex(1)?.findSectionGroupTitle()?.getElement();
+        expect(titleEl).not.toBeNull();
+        expect(titleEl!.classList.contains(styles['section-group-title--collapsed'])).toBe(collapsed);
+      }
+    );
   });
 
   describe('expandable link groups', () => {
-    it('renders as a single link in collapsed mode', () => {
+    it.each([
+      { label: 'icon-bearing', items: [iconLink('Alarms', '#/alarms'), iconLink('Logs', '#/logs')] },
+      { label: 'icon-less', items: [plainLink('VPC', '#/vpc'), plainLink('Route 53', '#/r53')] },
+    ])('keeps $label children mounted so the collapse animation has content to transition', ({ items }) => {
       const wrapper = renderSideNavigation({
         collapsed: true,
         items: [
@@ -173,47 +184,100 @@ describe('SideNavigation collapsed mode', () => {
             text: 'Monitoring',
             href: '#/monitoring',
             icon: <Icon name="bug" />,
-            items: [iconLink('Alarms', '#/alarms'), iconLink('Logs', '#/logs')],
+            items,
           },
         ],
       });
       expect(wrapper.findLinkByHref('#/monitoring')).not.toBeNull();
-      expect(wrapper.findLinkByHref('#/alarms')).toBeNull();
+      items.forEach(item => expect(wrapper.findLinkByHref(item.href)).not.toBeNull());
     });
 
-    it('flattens children with icons when ELG itself has no icon', () => {
+    it('inerts the expandable-link-group content when collapsed', () => {
       const wrapper = renderSideNavigation({
         collapsed: true,
         items: [
           {
             type: 'expandable-link-group',
-            text: 'No Icon ELG',
-            href: '#/elg',
-            items: [iconLink('Child', '#/child')],
+            text: 'Monitoring',
+            href: '#/monitoring',
+            icon: <Icon name="bug" />,
+            items: [iconLink('Alarms', '#/alarms')],
           },
         ],
       });
-      expect(wrapper.findLinkByHref('#/child')).not.toBeNull();
-      expect(wrapper.findLinkByHref('#/elg')).toBeNull();
+      const elg = wrapper.findItemByIndex(1)?.findExpandableLinkGroup();
+      const contentInner = elg?.findContent().getElement().firstElementChild as HTMLElement;
+      expect(contentInner.inert).toBe(true);
     });
   });
 
   describe('link groups', () => {
-    it('renders as a single link without children in collapsed mode', () => {
-      const wrapper = renderSideNavigation({
-        collapsed: true,
-        items: [
-          {
-            type: 'link-group',
-            text: 'Group',
-            href: '#/group',
-            icon: <Icon name="folder" />,
-            items: [iconLink('Child 1', '#/c1'), iconLink('Child 2', '#/c2')],
-          },
-        ],
-      });
+    function renderLinkGroupNav(collapsed: boolean, items: SideNavigationProps.Item[] = [iconLink('Child 1', '#/c1')]) {
+      const linkGroupItems: SideNavigationProps.Item[] = [
+        { type: 'link-group', text: 'Group', href: '#/group', icon: <Icon name="folder" />, items },
+      ];
+      const utils = render(<SideNavigation collapsed={collapsed} items={linkGroupItems} />);
+      const rerenderCollapsed = (nextCollapsed: boolean) =>
+        utils.rerender(<SideNavigation collapsed={nextCollapsed} items={linkGroupItems} />);
+      const childrenOuter = utils.container.querySelector(`.${CSS.escape(styles['link-group-children'])}`)!;
+      const childrenInner = childrenOuter.querySelector(
+        `.${CSS.escape(styles['link-group-children-inner'])}`
+      ) as HTMLElement;
+      return {
+        wrapper: createWrapper(utils.container).findSideNavigation()!,
+        rerenderCollapsed,
+        childrenOuter,
+        childrenInner,
+        isSettled: () => childrenInner.className.includes(styles['link-group-children-inner--settled']),
+      };
+    }
+
+    it.each([
+      { label: 'icon-bearing', items: [iconLink('Child 1', '#/c1'), iconLink('Child 2', '#/c2')] },
+      { label: 'icon-less', items: [plainLink('Lambda', '#/lambda'), plainLink('S3', '#/s3')] },
+    ])('keeps $label children mounted but inert when collapsed', ({ items }) => {
+      const { wrapper, childrenInner } = renderLinkGroupNav(true, items);
       expect(wrapper.findLinkByHref('#/group')).not.toBeNull();
-      expect(wrapper.findLinkByHref('#/c1')).toBeNull();
+      items.forEach(item => expect(wrapper.findLinkByHref(item.href)).not.toBeNull());
+      expect(childrenInner.inert).toBe(true);
+    });
+
+    it('applies the collapsed class and is not inert when not collapsed', () => {
+      const { childrenOuter, childrenInner } = renderLinkGroupNav(false);
+      expect(childrenInner.inert).toBe(false);
+      expect(childrenOuter.classList.contains(styles['link-group-children--collapsed'])).toBe(false);
+    });
+
+    it('settles on transitionend after expanding, resets on collapse, and ignores nested transitions', () => {
+      (isThemeActive as jest.Mock).mockReturnValue(true);
+      const { rerenderCollapsed, childrenOuter, childrenInner, isSettled } = renderLinkGroupNav(true);
+      expect(childrenOuter.classList.contains(styles['link-group-children--collapsed'])).toBe(true);
+
+      rerenderCollapsed(false);
+      expect(isSettled()).toBe(false);
+      fireEvent.transitionEnd(childrenInner);
+      expect(isSettled()).toBe(false); // Nested transition: parent does not settle.
+      fireEvent.transitionEnd(childrenOuter);
+      expect(isSettled()).toBe(true); // Real transition end: settles.
+
+      // Collapsing again resets settled immediately, before the exit transition starts,
+      // so overflow-y: clip is re-applied right away rather than lingering as "visible".
+      // Children stay mounted when collapsed, so childrenOuter/childrenInner are still the same live nodes.
+      rerenderCollapsed(true);
+      expect(isSettled()).toBe(false);
+      fireEvent.transitionEnd(childrenOuter);
+      expect(isSettled()).toBe(false); // transitionend while collapsed never (re-)settles.
+    });
+
+    it.each([
+      { label: 'outside One Theme', oneTheme: false, reducedMotion: false },
+      { label: 'under reduced motion', oneTheme: true, reducedMotion: true },
+    ])('settles immediately $label', ({ oneTheme, reducedMotion }) => {
+      (isThemeActive as jest.Mock).mockReturnValue(oneTheme);
+      (useReducedMotion as jest.Mock).mockReturnValue(reducedMotion);
+      const { rerenderCollapsed, isSettled } = renderLinkGroupNav(true);
+      rerenderCollapsed(false);
+      expect(isSettled()).toBe(true);
     });
   });
 
@@ -319,6 +383,27 @@ describe('SideNavigation collapsed mode', () => {
     });
   });
 
+  describe('collapsed CSS classes on root list', () => {
+    it.each([true, false])('applies the collapsed class to the root list only when collapsed=%s', collapsed => {
+      const { container } = render(
+        <SideNavigation collapsed={collapsed} items={[iconLink('Dashboard', '#/dashboard')]} />
+      );
+      const rootUl = container.querySelector(`ul.${CSS.escape(styles['list-variant-root'])}`);
+      expect(rootUl!.classList.contains(styles['list-variant-root--collapsed'])).toBe(collapsed);
+    });
+
+    it('applies the collapsed class to a section list when collapsed', () => {
+      const { container } = render(
+        <SideNavigation
+          collapsed={true}
+          items={[{ type: 'section', text: 'Resources', items: [iconLink('Compute', '#/compute')] }]}
+        />
+      );
+      const sectionUl = container.querySelector(`ul.${CSS.escape(styles['list-variant-section'])}`);
+      expect(sectionUl!.classList.contains(styles['list-variant-section--collapsed'])).toBe(true);
+    });
+  });
+
   describe('tooltip on collapsed items', () => {
     it('shows and hides tooltip on focus/blur of a collapsed link', () => {
       const wrapper = renderSideNavigation({
@@ -380,4 +465,318 @@ describe('SideNavigation collapsed mode', () => {
       expect(createWrapper().findTooltip()!.getElement()).toHaveTextContent('Settings');
     });
   });
+
+  describe('accessibility in collapsed mode', () => {
+    describe('hidden items are non-focusable (inert)', () => {
+      it.each([true, false])('makes the section header wrapper inert only when collapsed=%s', collapsed => {
+        const { container } = render(
+          <SideNavigation
+            collapsed={collapsed}
+            items={[{ type: 'section', text: 'Resources', items: [iconLink('Compute', '#/compute')] }]}
+          />
+        );
+        const headerWrapper = container.querySelector(`.${CSS.escape(styles.section)}`)!.firstElementChild;
+        expect((headerWrapper as HTMLElement).inert).toBe(collapsed);
+      });
+
+      it.each([
+        { label: 'link-group', type: 'link-group' as const },
+        { label: 'expandable-link-group', type: 'expandable-link-group' as const },
+      ])('makes an icon-less $label parent link inert only when collapsed', ({ type }) => {
+        const items = [{ type, text: 'Tools', href: '#/tools', items: [iconLink('Build', '#/build')] }];
+        const expanded = renderSideNavigation({ collapsed: false, items });
+        const collapsed = renderSideNavigation({ collapsed: true, items });
+        expect(expanded.findLinkByHref('#/tools')!.getElement().inert).toBe(false);
+        expect(collapsed.findLinkByHref('#/tools')!.getElement().inert).toBe(true);
+      });
+
+      it('does not make an icon-bearing link-group parent link inert when collapsed', () => {
+        const wrapper = renderSideNavigation({
+          collapsed: true,
+          items: [
+            {
+              type: 'link-group',
+              text: 'Tools',
+              href: '#/tools',
+              icon: <Icon name="folder" />,
+              items: [iconLink('Build', '#/build')],
+            },
+          ],
+        });
+        expect(wrapper.findLinkByHref('#/tools')!.getElement().inert).toBe(false);
+      });
+    });
+
+    describe('group aria-label preserved and children mounted when collapsed', () => {
+      it.each([
+        {
+          label: 'section',
+          items: [
+            {
+              type: 'section' as const,
+              text: 'Resources',
+              items: [iconLink('Compute', '#/compute'), plainLink('No icon', '#/none')],
+            } as SideNavigationProps.Item,
+          ],
+          listClass: 'list-variant-section',
+          expectedLabel: 'Resources',
+          iconHrefs: ['#/compute'],
+          hiddenHref: '#/none',
+        },
+        {
+          label: 'section-group',
+          items: [
+            {
+              type: 'section-group' as const,
+              title: 'My Group',
+              items: [iconLink('Item A', '#/a'), plainLink('No icon', '#/none')],
+            } as SideNavigationProps.Item,
+          ],
+          listClass: 'list-variant-section-group',
+          expectedLabel: 'My Group',
+          iconHrefs: ['#/a'],
+          hiddenHref: '#/none',
+        },
+        {
+          label: 'link-group',
+          items: [
+            {
+              type: 'link-group' as const,
+              text: 'Tools',
+              href: '#/tools',
+              icon: <Icon name="folder" />,
+              items: [iconLink('Build', '#/build')],
+            } as SideNavigationProps.Item,
+          ],
+          listClass: 'list-variant-link-group',
+          expectedLabel: 'Tools',
+          iconHrefs: ['#/build'],
+          // link-group children stay mounted even without icons — they're needed for
+          // the collapse animation — so there's no hiddenHref case to assert here.
+          hiddenHref: undefined,
+        },
+      ])(
+        'adds aria-label to the $label list and keeps icon-bearing children mounted when collapsed',
+        ({ items, listClass, expectedLabel, iconHrefs, hiddenHref }) => {
+          const expanded = render(<SideNavigation collapsed={false} items={items} />).container;
+          const collapsed = renderSideNavigation({ collapsed: true, items });
+          expect(expanded.querySelector(`ul.${CSS.escape(styles[listClass])}`)!.getAttribute('aria-label')).toBeNull();
+          expect(collapsed.getElement().querySelector(`ul[aria-label="${expectedLabel}"]`)).not.toBeNull();
+          // Icon-bearing children remain mounted and visible.
+          iconHrefs.forEach(href => expect(collapsed.findLinkByHref(href)).not.toBeNull());
+          // Children without icons are hidden, except for link-group/expandable-link-group
+          // variants which keep them mounted for the collapse animation (see hiddenHref).
+          if (hiddenHref) {
+            expect(collapsed.findLinkByHref(hiddenHref)).toBeNull();
+          }
+        }
+      );
+    });
+
+    describe('ELG caret hidden from AT when collapsed', () => {
+      it.each([true, false])('shows the expand button only when not collapsed (collapsed=%s)', collapsed => {
+        const wrapper = renderSideNavigation({
+          collapsed,
+          items: [
+            {
+              type: 'expandable-link-group',
+              text: 'Monitoring',
+              href: '#/monitoring',
+              icon: <Icon name="bug" />,
+              items: [iconLink('Alarms', '#/alarms')],
+            },
+          ],
+        });
+        const expandButton = wrapper.findItemByIndex(1)?.findExpandableLinkGroup()?.findExpandButton();
+        expect(expandButton !== null).toBe(!collapsed);
+      });
+    });
+  });
+
+  describe('icon-less parent link vertical collapse', () => {
+    it.each([
+      { label: 'link-group', type: 'link-group' as const },
+      { label: 'expandable-link-group', type: 'expandable-link-group' as const },
+    ])('collapses an icon-less $label parent link to zero size while the list item stays laid out', ({ type }) => {
+      const wrapper = renderSideNavigation({
+        collapsed: true,
+        items: [{ type, text: 'Tools', href: '#/tools', items: [iconLink('Build', '#/build')] }],
+      });
+      const parentLink = wrapper.findLinkByHref('#/tools')!.getElement();
+      expect(parentLink.classList.contains(styles['link--collapsed'])).toBe(true);
+      expect(wrapper.findItemByIndex(1)!.getElement().classList.contains(styles['list-item--collapsed'])).toBe(true);
+    });
+  });
+
+  describe('inter-group spacing identifier class', () => {
+    it.each([
+      { label: 'plain link', item: iconLink('Dashboard', '#/dashboard'), expectGroupClass: false },
+      { label: 'divider', item: { type: 'divider' as const }, expectGroupClass: true },
+      {
+        label: 'section',
+        item: { type: 'section' as const, text: 'Resources', items: [iconLink('Compute', '#/compute')] },
+        expectGroupClass: true,
+      },
+      {
+        label: 'section-group',
+        item: { type: 'section-group' as const, title: 'My Group', items: [iconLink('Item A', '#/a')] },
+        expectGroupClass: true,
+      },
+      {
+        label: 'link-group',
+        item: {
+          type: 'link-group' as const,
+          text: 'Tools',
+          href: '#/tools',
+          icon: <Icon name="folder" />,
+          items: [iconLink('Build', '#/build')],
+        },
+        expectGroupClass: true,
+      },
+      {
+        label: 'expandable-link-group',
+        item: {
+          type: 'expandable-link-group' as const,
+          text: 'Monitoring',
+          href: '#/monitoring',
+          icon: <Icon name="bug" />,
+          items: [iconLink('Alarms', '#/alarms')],
+        },
+        expectGroupClass: true,
+      },
+    ])('applies the group spacing class to $label items only when collapsed', ({ item, expectGroupClass }) => {
+      // A divider needs icon-bearing neighbors on both sides to survive collapsed filtering.
+      const wrapper = renderSideNavigation({
+        collapsed: true,
+        items: [iconLink('Before', '#/before'), item, iconLink('After', '#/after')],
+      });
+      expect(wrapper.findItemByIndex(2)!.getElement().classList.contains(styles['list-item--group'])).toBe(
+        expectGroupClass
+      );
+    });
+
+    it('does not apply the group spacing class to any item when not collapsed', () => {
+      const wrapper = renderSideNavigation({
+        collapsed: false,
+        items: [
+          iconLink('Dashboard', '#/dashboard'),
+          { type: 'section', text: 'Resources', items: [iconLink('Compute', '#/compute')] },
+        ],
+      });
+      expect(wrapper.findAll(`.${styles['list-item--group']}`)).toHaveLength(0);
+    });
+  });
+
+  describe('nested section hiding', () => {
+    it.each([
+      { label: 'section', type: 'section' as const },
+      { label: 'section-group', type: 'section-group' as const },
+    ])('promotes children through a nested $label without making it inert', ({ type }) => {
+      const nested: SideNavigationProps.Item =
+        type === 'section'
+          ? { type: 'section', text: 'Nested', items: [iconLink('Nested Child', '#/nested-child')] }
+          : { type: 'section-group', title: 'Nested', items: [iconLink('Nested Child', '#/nested-child')] };
+      const wrapper = renderSideNavigation({
+        collapsed: true,
+        items: [
+          {
+            type: 'section',
+            text: 'Top Section',
+            items: [iconLink('Top Child', '#/top-child'), nested],
+          },
+        ],
+      });
+      expect(wrapper.findLinkByHref('#/top-child')).not.toBeNull();
+      expect(wrapper.findLinkByHref('#/nested-child')).not.toBeNull();
+      const nestedItem = wrapper.findItemByIndex(1)!.findItemByIndex(2)!;
+      const nestedGroup = type === 'section' ? nestedItem.findSection() : nestedItem.findSectionGroup();
+      expect(nestedGroup!.getElement().inert).toBe(false);
+    });
+
+    it('recursively promotes children through a section nested inside a section-group', () => {
+      const wrapper = renderSideNavigation({
+        collapsed: true,
+        items: [
+          {
+            type: 'section-group',
+            title: 'Top Group',
+            items: [{ type: 'section', text: 'Nested Section', items: [iconLink('Deep Child', '#/deep-child')] }],
+          },
+        ],
+      });
+      expect(wrapper.findLinkByHref('#/deep-child')).not.toBeNull();
+      const sectionGroup = wrapper.findItemByIndex(1)!.findSectionGroup()!.getElement();
+      expect(sectionGroup.inert).toBe(false);
+    });
+  });
+
+  describe('dev warning for icon-less collapsed-rail items', () => {
+    let consoleSpy: jest.SpyInstance;
+    // Import clearMessageCache to reset warnOnce's deduplication between tests.
+    const { clearMessageCache } = jest.requireActual('@cloudscape-design/component-toolkit/internal') as {
+      clearMessageCache: () => void;
+    };
+    beforeEach(() => {
+      clearMessageCache();
+      consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    });
+    afterEach(() => {
+      consoleSpy.mockRestore();
+    });
+
+    it('warns about root-level link without icon when collapsed', () => {
+      render(<SideNavigation collapsed={true} items={[plainLink('No Icon', '#/no-icon')]} />);
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('A root-level "link" ("No Icon") has no icon'));
+    });
+
+    it('warns about link-group without icon when collapsed', () => {
+      render(
+        <SideNavigation
+          collapsed={true}
+          items={[{ type: 'link-group', text: 'Tools', href: '#/tools', items: [iconLink('Build', '#/build')] }]}
+        />
+      );
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('A "link-group" ("Tools") has no icon'));
+    });
+
+    it('warns about expandable-link-group without icon when collapsed', () => {
+      render(
+        <SideNavigation
+          collapsed={true}
+          items={[{ type: 'expandable-link-group', text: 'ELG', href: '#/elg', items: [iconLink('Child', '#/child')] }]}
+        />
+      );
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('An "expandable-link-group" ("ELG") has no icon')
+      );
+    });
+
+    it('warns about icon-less link inside a section when collapsed', () => {
+      render(
+        <SideNavigation
+          collapsed={true}
+          items={[
+            {
+              type: 'section',
+              text: 'Resources',
+              items: [plainLink('No Icon Child', '#/no-icon-child')],
+            },
+          ]}
+        />
+      );
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('A "link" ("No Icon Child") inside section "Resources" has no icon')
+      );
+    });
+
+    it('does not warn when items have icons', () => {
+      render(<SideNavigation collapsed={true} items={[iconLink('Has Icon', '#/has-icon')]} />);
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+
+    it('does not warn when not collapsed', () => {
+      render(<SideNavigation collapsed={false} items={[plainLink('No Icon', '#/no-icon')]} />);
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/side-navigation/implementation.tsx b/src/side-navigation/implementation.tsx
index d802c7ca55..451ed10d84 100644
--- a/src/side-navigation/implementation.tsx
+++ b/src/side-navigation/implementation.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
@@ -11,7 +11,12 @@ import { isDevelopment } from '../internal/is-development';
 import { createWidgetizedComponent } from '../internal/widgets';
 import { SideNavigationProps } from './interfaces';
 import { Header, NavigationItemsList } from './parts';
-import { checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons } from './util';
+import {
+  checkCollapsedIconSupport,
+  checkDuplicateHrefs,
+  generateExpandableItemsMapping,
+  hasNavigationIcons,
+} from './util';
 
 import styles from './styles.css.js';
 
@@ -34,10 +39,14 @@ export function SideNavigationImplementation({
   const withIcons = useMemo(() => hasNavigationIcons(items), [items]);
   const [activeTooltip, setActiveTooltip] = useState<string | null>(null);
 
+  const listContainerRef = useRef<HTMLDivElement>(null);
+
   if (isDevelopment) {
     // This code should be wiped in production anyway.
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => checkDuplicateHrefs(items), [items]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => checkCollapsedIconSupport(items, collapsed), [items, collapsed]);
   }
 
   const onChangeHandler = useCallback(
@@ -84,7 +93,7 @@ export function SideNavigationImplementation({
       )}
       {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}
       {items && (
-        <div className={styles['list-container']}>
+        <div ref={listContainerRef} className={styles['list-container']}>
           <NavigationItemsList
             variant="root"
             items={items}
diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx
index 7f579f5c2a..a8c3934159 100644
--- a/src/side-navigation/parts.tsx
+++ b/src/side-navigation/parts.tsx
@@ -10,6 +10,7 @@ import { ExpandableSectionProps } from '../expandable-section/interfaces';
 import InternalExpandableSection from '../expandable-section/internal';
 import { useInternalI18n } from '../i18n/context';
 import InternalIcon from '../icon/internal';
+import { Transition } from '../internal/components/transition';
 import { isPlainLeftClick } from '../internal/events';
 import { useOneTheme, useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
@@ -109,6 +110,7 @@ interface NavigationItemsListProps extends BaseItemComponentProps {
   items: ReadonlyArray<SideNavigationProps.Item>;
   variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
   withIcons?: boolean;
+  ariaLabel?: string;
 }
 
 interface Item {
@@ -126,6 +128,7 @@ export function NavigationItemsList({
   position = '',
   collapsed,
   withIcons,
+  ariaLabel,
   activeTooltip,
   setActiveTooltip,
 }: NavigationItemsListProps) {
@@ -145,7 +148,7 @@ export function NavigationItemsList({
       lists.push({
         listVariant: variant,
         element: (
-          <div data-itemid={`item-${itemid}`}>
+          <div data-itemid={`item-${itemid}`} className={clsx(collapsed && styles['list-item--group'])}>
             <Divider variant="default" collapsed={collapsed} />
           </div>
         ),
@@ -157,81 +160,16 @@ export function NavigationItemsList({
         }) - 1;
     }
 
-    // Renders icon-bearing children of a container item as a collapsed group.
-    // The inner <ul> carries the group label so list semantics are preserved
-    // for screen readers even when the visual header is hidden.
-    function pushCollapsedGroup(
-      children: ReadonlyArray<SideNavigationProps.Item>,
-      label: string,
-      { leadingDivider = false }: { leadingDivider?: boolean } = {}
+    // In collapsed mode, hide plain links without icons (they have no visual representation).
+    // Exception: link-group / expandable-link-group children must stay rendered so
+    // the grid-template-rows collapse animation has content to transition.
+    if (
+      collapsed &&
+      item.type === 'link' &&
+      !(item as SideNavigationProps.Link).icon &&
+      variant !== 'link-group' &&
+      variant !== 'expandable-link-group'
     ) {
-      const iconChildren = children.filter(child => (child as SideNavigationProps.Link).icon);
-      if (iconChildren.length === 0) {
-        return;
-      }
-      // A section's title is hidden when collapsed; render a divider in its place
-      if (leadingDivider) {
-        pushDivider();
-      }
-      const groupElements = iconChildren.map((child, childIndex) => {
-        const childPosition = `${position ? `${position},` : ''}${itemid},${childIndex + 1}`;
-        return (
-          <li key={childPosition} className={clsx(styles['list-item'], styles['list-item--collapsed'])}>
-            <Link
-              definition={child as SideNavigationProps.Link}
-              activeHref={activeHref}
-              fireFollow={fireFollow}
-              fireChange={fireChange}
-              position={childPosition}
-              collapsed={collapsed}
-              activeTooltip={activeTooltip}
-              setActiveTooltip={setActiveTooltip}
-            />
-          </li>
-        );
-      });
-      const prevItem = index > 0 ? items[index - 1] : null;
-      const nextItem = index < items.length - 1 ? items[index + 1] : null;
-      lists[currentListIndex].items?.push({
-        element: (
-          <li
-            key={`group-${itemid}`}
-            className={clsx(
-              styles['list-item--group'],
-              (leadingDivider || prevItem?.type === 'divider') && styles['list-item--group-no-padding-start'],
-              nextItem?.type === 'divider' && styles['list-item--group-no-padding-end']
-            )}
-          >
-            <ul className={styles['list--collapsed-group']} aria-label={label}>
-              {groupElements}
-            </ul>
-          </li>
-        ),
-      });
-    }
-
-    // In collapsed mode, flatten container items to show only icon-bearing children.
-    if (collapsed && (item.type === 'expandable-link-group' || item.type === 'link-group') && !item.icon) {
-      const group = item as SideNavigationProps.ExpandableLinkGroup | SideNavigationProps.LinkGroup;
-      pushCollapsedGroup(group.items, group.text);
-      return;
-    }
-    if (collapsed && (item.type === 'section' || item.type === 'section-group')) {
-      const sectionLabel =
-        item.type === 'section'
-          ? (item as SideNavigationProps.Section).text
-          : (item as SideNavigationProps.SectionGroup).title;
-      // Section-groups may contain nested sections — flatten one level.
-      const childItems =
-        item.type === 'section'
-          ? (item as SideNavigationProps.Section).items
-          : (item as SideNavigationProps.SectionGroup).items.flatMap(child =>
-              child.type === 'section' ? (child as SideNavigationProps.Section).items : [child]
-            );
-      pushCollapsedGroup(childItems, sectionLabel, { leadingDivider: true });
-      return;
-    }
-    if (collapsed && item.type !== 'divider' && !(item as SideNavigationProps.Link).icon) {
       return;
     }
     switch (item.type) {
@@ -268,7 +206,11 @@ export function NavigationItemsList({
             <li
               key={index}
               data-itemid={`item-${itemid}`}
-              className={clsx(styles['list-item'], collapsed && styles['list-item--collapsed'])}
+              className={clsx(
+                styles['list-item'],
+                collapsed && styles['list-item--collapsed'],
+                collapsed && styles['list-item--group']
+              )}
             >
               <Section
                 definition={item}
@@ -293,7 +235,11 @@ export function NavigationItemsList({
             <li
               key={index}
               data-itemid={`item-${itemid}`}
-              className={clsx(styles['list-item'], collapsed && styles['list-item--collapsed'])}
+              className={clsx(
+                styles['list-item'],
+                collapsed && styles['list-item--collapsed'],
+                collapsed && styles['list-item--group']
+              )}
             >
               <SectionGroup
                 definition={item}
@@ -317,7 +263,11 @@ export function NavigationItemsList({
             <li
               key={index}
               data-itemid={`item-${itemid}`}
-              className={clsx(styles['list-item'], collapsed && styles['list-item--collapsed'])}
+              className={clsx(
+                styles['list-item'],
+                collapsed && styles['list-item--collapsed'],
+                collapsed && styles['list-item--group']
+              )}
             >
               <LinkGroup
                 definition={item}
@@ -341,7 +291,11 @@ export function NavigationItemsList({
             <li
               key={index}
               data-itemid={`item-${itemid}`}
-              className={clsx(styles['list-item'], collapsed && styles['list-item--collapsed'])}
+              className={clsx(
+                styles['list-item'],
+                collapsed && styles['list-item--collapsed'],
+                collapsed && styles['list-item--group']
+              )}
             >
               <ExpandableLinkGroup
                 definition={item}
@@ -392,7 +346,7 @@ export function NavigationItemsList({
               key={`hr-${index}`}
               className={clsx(styles.list, styles[`list-variant-${variant}`], {
                 [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
-                [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+                [styles[`list-variant-${list.listVariant}--collapsed`]]: collapsed,
                 [styles['list--with-icons']]: withIcons,
               })}
             >
@@ -405,9 +359,10 @@ export function NavigationItemsList({
               key={`list-${index}`}
               className={clsx(styles.list, styles[`list-variant-${list.listVariant}`], {
                 [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
-                [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+                [styles[`list-variant-${list.listVariant}--collapsed`]]: collapsed,
                 [styles['list--with-icons']]: withIcons,
               })}
+              aria-label={ariaLabel}
             >
               {list.items.map(item => item.element)}
             </ul>
@@ -509,6 +464,7 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
   checkSafeUrl('SideNavigation', definition.href);
   const isActive = definition.href === activeHref;
   const i18n = useInternalI18n('link');
+  const linkRef = useRef<HTMLAnchorElement>(null);
   const collapsedTooltip = useCollapsedTooltip<HTMLAnchorElement>({
     label: definition.text,
     position,
@@ -516,6 +472,26 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
     setActiveTooltip,
   });
 
+  // Make icon-less collapsed links inert (they collapse to 0×0 and must
+  // not be focusable or visible to assistive technology).
+  const isIconLess = !definition.icon;
+  useEffect(() => {
+    if (linkRef.current) {
+      linkRef.current.inert = !!(collapsed && isIconLess);
+    }
+  }, [collapsed, isIconLess]);
+
+  // Merge linkRef with collapsedTooltip.triggerRef so both can track the <a>.
+  const mergedRef = useCallback(
+    (node: HTMLAnchorElement | null) => {
+      (linkRef as React.MutableRefObject<HTMLAnchorElement | null>).current = node;
+      if (collapsed) {
+        (collapsedTooltip.triggerRef as React.MutableRefObject<HTMLAnchorElement | null>).current = node;
+      }
+    },
+    [collapsed, collapsedTooltip.triggerRef]
+  );
+
   const onClick = useCallback(
     (event: React.MouseEvent) => {
       if (isPlainLeftClick(event)) {
@@ -541,7 +517,7 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
 
   const internalLink = (
     <a
-      ref={collapsed ? collapsedTooltip.triggerRef : undefined}
+      ref={mergedRef}
       href={definition.href}
       className={clsx(styles.link, {
         [styles['link-active']]: isActive,
@@ -556,8 +532,11 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
       {...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)}
     >
       <ItemIcon icon={definition.icon} collapsed={collapsed} aria-hidden={collapsed ? true : undefined} />
-      {!collapsed && (
-        <span className={styles['link-text-wrapper']}>
+      <span
+        className={clsx(styles['link-text-wrapper'], collapsed && styles['link-text-wrapper--collapsed'])}
+        aria-hidden={collapsed ? true : undefined}
+      >
+        <span className={clsx(styles['link-text-wrapper-content'])}>
           <span className={analyticsSelectors['link-text']}>{definition.text}</span>
           {definition.external && (
             <span aria-label={renderedExternalIconAriaLabel} role={renderedExternalIconAriaLabel ? 'img' : undefined}>
@@ -565,7 +544,7 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
             </span>
           )}
         </span>
-      )}
+      </span>
       {collapsed && collapsedTooltip.tooltip}
     </a>
   );
@@ -594,9 +573,12 @@ function Section({
   position,
   collapsed,
   withIcons,
+  activeTooltip,
+  setActiveTooltip,
 }: SectionProps) {
   const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);
   const isVisualRefresh = useVisualRefresh();
+  const sectionRef = useRef<HTMLDivElement>(null);
 
   const onExpandedChange = useCallback(
     (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {
@@ -610,25 +592,44 @@ function Section({
     setExpanded(definition.defaultExpanded ?? true);
   }, [definition]);
 
-  if (collapsed) {
-    return null;
-  }
+  // Sections are transparent in the collapsed rail — only the header is made inert
+  // so child links remain focusable. The header hosts the expand toggle that must
+  // leave the tab order when collapsed.
+  useEffect(() => {
+    const el = sectionRef.current as HTMLElement | null;
+    if (el) {
+      el.inert = false;
+      const header = el.firstElementChild as HTMLElement | null;
+      if (header) {
+        header.inert = !!collapsed;
+      }
+    }
+  }, [collapsed]);
 
   const isInSectionGroup = variant === 'section-group';
 
   return (
     <InternalExpandableSection
       variant="footer"
-      expanded={expanded}
+      expanded={collapsed ? true : expanded}
       onChange={onExpandedChange}
       disableContentPaddings={true}
+      __internalRootRef={sectionRef}
       className={clsx(
         styles.section,
         isInSectionGroup && styles['section--no-ident'],
         withIcons && styles['section--expand-icon-end'],
-        isVisualRefresh && styles.refresh
+        isVisualRefresh && styles.refresh,
+        collapsed && styles['section--collapsed']
       )}
-      headerText={<span className={styles['section-header']}>{definition.text}</span>}
+      headerText={
+        <span
+          className={clsx(styles['section-header'], styles['label-text'], collapsed && styles['label-text--collapsed'])}
+          aria-hidden={collapsed ? true : undefined}
+        >
+          {definition.text}
+        </span>
+      }
       __expandIconPosition={withIcons ? 'end' : 'start'}
     >
       <NavigationItemsList
@@ -638,7 +639,11 @@ function Section({
         fireChange={fireChange}
         activeHref={activeHref}
         position={position}
+        collapsed={collapsed}
         withIcons={withIcons}
+        ariaLabel={collapsed ? definition.text : undefined}
+        activeTooltip={activeTooltip}
+        setActiveTooltip={setActiveTooltip}
       />
     </InternalExpandableSection>
   );
@@ -657,19 +662,32 @@ function SectionGroup({
   position,
   collapsed,
   withIcons,
+  activeTooltip,
+  setActiveTooltip,
 }: SectionGroupProps) {
   const isOneTheme = useOneTheme();
-  if (collapsed) {
-    return null;
-  }
+  const sectionGroupRef = useRef<HTMLDivElement>(null);
+
+  // Section-groups are transparent — children are always promoted in the collapsed rail.
+  useEffect(() => {
+    if (sectionGroupRef.current) {
+      sectionGroupRef.current.inert = false;
+    }
+  }, [collapsed]);
+
   return (
-    <div className={styles['section-group']}>
+    <div ref={sectionGroupRef} className={styles['section-group']}>
       <InternalBox
-        className={styles['section-group-title']}
+        className={clsx(styles['section-group-title'], collapsed && styles['section-group-title--collapsed'])}
         variant="h3"
         fontSize={isOneTheme ? 'heading-s' : undefined}
       >
-        {definition.title}
+        <span
+          className={clsx(styles['label-text'], collapsed && styles['label-text--collapsed'])}
+          aria-hidden={collapsed ? true : undefined}
+        >
+          {definition.title}
+        </span>
       </InternalBox>
       <NavigationItemsList
         variant="section-group"
@@ -678,7 +696,11 @@ function SectionGroup({
         fireChange={fireChange}
         activeHref={activeHref}
         position={position}
+        collapsed={collapsed}
         withIcons={withIcons}
+        ariaLabel={collapsed ? definition.title : undefined}
+        activeTooltip={activeTooltip}
+        setActiveTooltip={setActiveTooltip}
       />
     </div>
   );
@@ -701,6 +723,16 @@ function LinkGroup({
   setActiveTooltip,
 }: LinkGroupProps) {
   checkSafeUrl('SideNavigation', definition.href);
+  const childrenRef = useRef<HTMLDivElement>(null);
+  const isOneTheme = useOneTheme();
+
+  // Set inert on the children container when collapsed so they leave
+  // the tab order and assistive technology.
+  useEffect(() => {
+    if (childrenRef.current) {
+      childrenRef.current.inert = !!collapsed;
+    }
+  }, [collapsed]);
 
   return (
     <>
@@ -720,17 +752,41 @@ function LinkGroup({
         activeTooltip={activeTooltip}
         setActiveTooltip={setActiveTooltip}
       />
-      {!collapsed && (
-        <NavigationItemsList
-          variant="link-group"
-          items={definition.items}
-          fireFollow={fireFollow}
-          fireChange={fireChange}
-          activeHref={activeHref}
-          position={position}
-          withIcons={withIcons}
-        />
-      )}
+      <Transition<HTMLDivElement> in={!collapsed} disabled={!isOneTheme}>
+        {(transitionState, transitionEventsRef, motionDisabled) => {
+          const childrenSettled = !collapsed && (motionDisabled || transitionState === 'entered');
+
+          return (
+            <div
+              ref={transitionEventsRef}
+              className={clsx(styles['link-group-children'], collapsed && styles['link-group-children--collapsed'])}
+            >
+              <div
+                ref={childrenRef}
+                className={clsx(
+                  styles['link-group-children-inner'],
+                  !collapsed && styles['link-group-children-inner--expanded'],
+                  childrenSettled && styles['link-group-children-inner--settled']
+                )}
+              >
+                <NavigationItemsList
+                  variant="link-group"
+                  items={definition.items}
+                  fireFollow={fireFollow}
+                  fireChange={fireChange}
+                  activeHref={activeHref}
+                  position={position}
+                  collapsed={collapsed}
+                  withIcons={withIcons}
+                  ariaLabel={collapsed ? definition.text : undefined}
+                  activeTooltip={activeTooltip}
+                  setActiveTooltip={setActiveTooltip}
+                />
+              </div>
+            </div>
+          );
+        }}
+      </Transition>
     </>
   );
 }
@@ -796,35 +852,22 @@ function ExpandableLinkGroup({
     }
   };
 
-  if (collapsed) {
-    return (
-      <Link
-        definition={{ type: 'link', href: definition.href, text: definition.text, icon: definition.icon }}
-        fireFollow={onHeaderFollow}
-        fireChange={fireChange}
-        activeHref={activeHref}
-        position={position}
-        collapsed={collapsed}
-        activeTooltip={activeTooltip}
-        setActiveTooltip={setActiveTooltip}
-      />
-    );
-  }
-
   return (
     <InternalExpandableSection
       className={clsx(
         styles['expandable-link-group'],
         variant === 'section-group' && styles['expandable-link-group--no-ident'],
         withIcons && styles['expandable-link-group--expand-icon-end'],
-        definition.href === activeHref && styles['expandable-link-group--active']
+        definition.href === activeHref && styles['expandable-link-group--active'],
+        collapsed && styles['expandable-link-group--collapsed']
       )}
       variant="navigation"
-      expanded={userExpanded ?? expanded}
+      expanded={collapsed ? false : (userExpanded ?? expanded)}
       onChange={onExpandedChange}
       disableContentPaddings={true}
       __disableHeaderPaddings={true}
       __expandIconPosition={withIcons ? 'end' : 'start'}
+      __hideExpandIcon={!!collapsed}
       headerText={
         <Link
           definition={{ type: 'link', href: definition.href, text: definition.text, icon: definition.icon }}
@@ -832,6 +875,9 @@ function ExpandableLinkGroup({
           fireChange={fireChange}
           activeHref={activeHref}
           position={position}
+          collapsed={collapsed}
+          activeTooltip={activeTooltip}
+          setActiveTooltip={setActiveTooltip}
         />
       }
     >
@@ -842,7 +888,10 @@ function ExpandableLinkGroup({
         fireChange={fireChange}
         activeHref={activeHref}
         position={position}
+        collapsed={collapsed}
         withIcons={withIcons}
+        activeTooltip={activeTooltip}
+        setActiveTooltip={setActiveTooltip}
       />
     </InternalExpandableSection>
   );
diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss
index eaf11cf8d7..45ccde6d8b 100644
--- a/src/side-navigation/styles.scss
+++ b/src/side-navigation/styles.scss
@@ -5,6 +5,8 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/utils/theming';
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 // ==========================================================================
@@ -18,6 +20,27 @@ $item-padding-block: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.
 $item-padding-inline: awsui.$space-xs;
 $item-indent: calc(awsui.$size-icon-normal + #{$item-icon-text-gap} - #{$item-padding-inline});
 $expandable-icon-negative-margin: awsui.$space-l;
+$root-collapsed-padding-horizontal: awsui.$space-scaled-l;
+// ==========================================================================
+// Collapsed-rail content motion — composite values keep each interaction's
+// duration, easing, and delay together at its transition call sites.
+// ==========================================================================
+$content-enter-duration: awsui.$motion-duration-expandable-content-enter;
+$content-enter-motion: $content-enter-duration awsui.$motion-easing-expandable-content-enter;
+// Fade follows the first quarter of structural reveal, giving layout a short lead without a noticeable pause.
+$content-enter-fade-delay: calc(#{$content-enter-duration} / 4);
+$content-enter-fade-motion: awsui.$motion-duration-side-navigation-content-enter-fade
+  awsui.$motion-easing-expandable-content-enter $content-enter-fade-delay;
+
+// Exit is Side Navigation-specific: labels fade quickly while horizontal and vertical
+// layout collapses around icons that remain visible in the collapsed rail.
+$content-exit-duration: awsui.$motion-duration-side-navigation-content-exit;
+$content-exit-motion: $content-exit-duration awsui.$motion-easing-side-navigation-content-exit;
+$content-exit-fade-duration: awsui.$motion-duration-side-navigation-content-exit-fade;
+$content-exit-fade-motion: $content-exit-fade-duration awsui.$motion-easing-side-navigation-content-exit;
+
+// Step-function delay for overflow/clip toggles on collapse — activates after spatial motion finishes.
+$content-exit-clip-delay: $content-exit-duration;
 
 @mixin item-radius($radius: awsui.$border-radius-side-navigation-item) {
   border-start-start-radius: $radius;
@@ -46,6 +69,11 @@ $expandable-icon-negative-margin: awsui.$space-l;
   padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
   padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
+
+  // Align header to the collapsed icon column when icons are present.
+  .root:has(.list--with-icons) > & {
+    padding-inline-start: $root-collapsed-padding-horizontal;
+  }
 }
 
 .header-link {
@@ -89,14 +117,17 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .items-control,
 .list-container {
   margin-block-start: calc(#{awsui.$space-panel-content-top} - #{$item-padding-block});
-  .root--collapsed > & {
-    margin-block-start: awsui.$space-xs;
-  }
 
   // Toolbar removes margin and item padding for whatever comes first after the header
   .with-toolbar > .divider-header + & {
     margin-block-start: calc(-1 * #{$item-padding-block});
   }
+
+  // When collapsed, the header and divider are hidden so the adjacent-sibling rule
+  // above cannot match. Apply the same reduced margin to keep vertical position stable.
+  .with-toolbar.root--collapsed > & {
+    margin-block-start: awsui.$space-scaled-xxs;
+  }
 }
 
 .list {
@@ -119,12 +150,17 @@ $expandable-icon-negative-margin: awsui.$space-l;
   }
 
   &--collapsed {
-    padding-inline-start: 0;
-    padding-inline-end: 0;
+    padding-inline: calc(
+      (
+          var(#{custom-props.$navigationCollapsedWidth}, awsui.$size-side-navigation-collapsed-width) -
+            #{awsui.$size-side-navigation-item-collapsed}
+        ) /
+        2
+    );
   }
 
   &.list--with-icons:not(.list-variant-root--collapsed) {
-    padding-inline-start: calc(#{awsui.$space-panel-side-right} - #{$item-padding-inline});
+    padding-inline: calc(#{$root-collapsed-padding-horizontal} - #{$item-padding-inline});
   }
 }
 
@@ -134,19 +170,89 @@ $expandable-icon-negative-margin: awsui.$space-l;
   &.list--with-icons {
     padding-inline-start: $item-indent;
   }
+
+  &--collapsed {
+    padding-inline-start: 0;
+  }
 }
 
 .list-variant-section {
   padding-inline-start: calc(#{$expandable-icon-negative-margin} - #{$item-padding-inline});
 
-  &.list--with-icons {
+  &.list--with-icons:not(.list-variant-section--collapsed) {
     padding-inline-start: 0;
     margin-inline-start: calc(-1 * #{awsui.$space-xs});
   }
+
+  &--collapsed {
+    padding-inline-start: 0;
+    margin-inline-start: 0;
+  }
 }
 
 .list-variant-link-group {
   padding-inline-start: $item-indent;
+
+  // ENTER: indent expands to make room for the child list.
+  @include styles.one-theme-with-motion {
+    transition: padding-inline-start $content-enter-motion;
+  }
+
+  &--collapsed {
+    padding-inline-start: 0;
+    // EXIT: indent collapses back to zero.
+    @include styles.one-theme-with-motion {
+      transition: padding-inline-start $content-exit-motion;
+    }
+  }
+}
+
+.link-group-children {
+  display: grid;
+  grid-template-rows: 1fr;
+
+  @include styles.one-theme-with-motion {
+    // ENTER: grid row expands to fit the children.
+    transition: grid-template-rows $content-enter-motion;
+  }
+
+  &--collapsed {
+    grid-template-rows: 0fr;
+
+    @include styles.one-theme-with-motion {
+      // EXIT: grid row collapses to zero height.
+      transition: grid-template-rows $content-exit-motion;
+    }
+  }
+}
+
+.link-group-children-inner {
+  overflow-y: clip;
+  overflow-x: visible;
+  min-block-size: 0;
+  opacity: 0;
+
+  @include styles.one-theme-with-motion {
+    // EXIT: opacity fades out.
+    transition: opacity $content-exit-fade-motion;
+  }
+
+  &--expanded {
+    opacity: 1;
+
+    @include styles.one-theme-with-motion {
+      // ENTER: opacity fades in, delayed until the grid row has partially opened.
+      transition: opacity $content-enter-fade-motion;
+    }
+  }
+
+  // Applied once the expand transition genuinely finishes (or immediately under reduced
+  // motion, where there's no transition to wait for). overflow-y switches to visible so
+  // active/hover/focus states on the last child aren't clipped once the grid track is done
+  // animating — same issue and same fix as expandable-section's content-inner-settled.
+  &--settled {
+    overflow-y: visible;
+  }
 }
 
 .list-variant-section-group {
@@ -154,6 +260,10 @@ $expandable-icon-negative-margin: awsui.$space-l;
   margin-inline: calc(-1 * #{$item-padding-inline});
   padding-block: 0;
   padding-inline: 0;
+
+  &--collapsed {
+    margin-inline: 0;
+  }
 }
 
 // ==========================================================================
@@ -177,39 +287,23 @@ $expandable-icon-negative-margin: awsui.$space-l;
   }
 
   &--collapsed {
+    inline-size: fit-content;
     margin-block: awsui.$space-side-navigation-item-icon-gap;
-    display: flex;
-    justify-content: center;
     padding-block: 0;
     padding-inline: 0;
   }
 
-  &--group {
-    padding-inline: 0;
-    padding-block: awsui.$space-scaled-s;
-    list-style: none;
-
-    &-no-padding-start {
-      padding-block-start: 0;
-    }
-
-    &-no-padding-end {
-      padding-block-end: 0;
-    }
-  }
-
   &--link-with-info {
     display: flex;
     align-items: baseline;
   }
 }
 
-.list--collapsed-group {
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-  list-style: none;
+// Sections and section-groups retain larger visual separation as structural boundaries
+// between children and other groups when collapsed.
+.list-item--collapsed.list-item--group:not(:first-child):has(> .section),
+.list-item--collapsed.list-item--group:not(:first-child):has(> .section-group) {
+  margin-block-start: awsui.$space-scaled-xl;
 }
 
 // ==========================================================================
@@ -223,6 +317,11 @@ $expandable-icon-negative-margin: awsui.$space-l;
   &--expand-icon-end {
     margin-inline-start: 0;
   }
+
+  // Collapsed state: hide the expand icon.
+  &--collapsed {
+    margin-inline-start: 0;
+  }
 }
 
 // Targets the ExpandableSection header wrapper (first child div of the component root).
@@ -239,8 +338,49 @@ $expandable-icon-negative-margin: awsui.$space-l;
   background-color: awsui.$color-background-side-navigation-item-active;
 }
 
+// Collapsed state: constrain to icon square and clip the expand chevron.
+// Delay overflow/size constraints so the expandable-section grid-template-rows
+// collapse animation (1fr→0fr) can run before the parent clips the children area.
+.expandable-link-group--collapsed {
+  // Icon-bearing items: allow inline bleed for active/hover bg (no inline clip).
+  // overflow-y: visible so the focus ring (outline-offset: 2–4px) is not clipped;
+  &:has(.item-icon) {
+    overflow-x: visible;
+    overflow-y: visible;
+    inline-size: awsui.$size-side-navigation-item-collapsed;
+    // EXIT: clip to the icon square only after the content has finished collapsing.
+    @include styles.one-theme-with-motion {
+      transition: inline-size 0s linear $content-exit-clip-delay;
+    }
+  }
+
+  // Collapse to zero; clip is delayed via $content-exit-clip-delay.
+  &:not(:has(.item-icon)) {
+    overflow: hidden;
+    inline-size: 0;
+    block-size: 0;
+    padding-block: 0;
+    margin-block: 0;
+    // EXIT: block-size/padding collapse immediately; overflow/inline-size snap
+    // to zero only after, so the content has time to finish collapsing first.
+    @include styles.one-theme-with-motion {
+      transition:
+        overflow 0s linear $content-exit-clip-delay,
+        inline-size 0s linear $content-exit-clip-delay,
+        block-size $content-exit-motion,
+        padding-block $content-exit-motion;
+    }
+  }
+
+  > :first-child {
+    padding-inline: 0;
+    margin-inline: 0;
+  }
+}
+
 .section {
   margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
+  min-block-size: 0;
   &.refresh {
     margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
   }
@@ -248,6 +388,50 @@ $expandable-icon-negative-margin: awsui.$space-l;
   .list-variant-root--first > .list-item:first-child > & {
     margin-block-start: 0px;
   }
+
+  // One-theme only: nested sections use a grid-based content reveal (see > :first-child
+  // below), and CSS grid containers never let a grid item's margin collapse with the
+  // container's own box. Without this, a section's trailing margin gets trapped inside
+  // its parent section's content instead of collapsing away as the last child — inflating
+  // every ancestor level's grid-row height by that amount. Zeroing it here (only for
+  // sections nested inside another section) restores the same "last child margin doesn't
+  // extend the container" behavior normal block layout gives for free.
+  @at-root .list-variant-section > .list-item:last-child > #{&} {
+    @include theming.one-theme-only {
+      margin-block-end: 0px;
+    }
+  }
+
+  > :first-child {
+    display: grid;
+    grid-template-rows: 1fr;
+    opacity: 1;
+    @include styles.one-theme-with-motion {
+      transition:
+        grid-template-rows $content-enter-motion,
+        padding-block $content-enter-motion,
+        opacity $content-enter-fade-motion;
+    }
+  }
+
+  // Collapsed state: children are forced open, this hides header with zero-height collapse.
+  &--collapsed {
+    margin-block: 0;
+
+    > :first-child {
+      grid-template-rows: 0fr;
+      overflow: hidden;
+      padding-block: 0;
+      opacity: 0;
+      @include styles.one-theme-with-motion {
+        // EXIT: spatial follows opacity — delay collapse.
+        transition:
+          grid-template-rows $content-exit-motion,
+          padding-block $content-exit-motion,
+          opacity $content-exit-fade-motion;
+      }
+    }
+  }
 }
 
 .section-header {
@@ -262,6 +446,7 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .section-group {
   margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
   margin-inline: 0;
+  min-block-size: 0;
 
   .list-variant-root--first > .list-item:first-child > & {
     margin-block-start: 0px;
@@ -269,20 +454,55 @@ $expandable-icon-negative-margin: awsui.$space-l;
 }
 
 .section-group-title {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr;
   align-items: center;
+  overflow: hidden;
+  min-inline-size: 0;
   margin-block: 0;
+  @include styles.one-theme-with-motion {
+    // ENTER: grid-columns snap to 1fr instantly (0s) — full width before text appears.
+    transition:
+      grid-template-columns 0s,
+      block-size $content-enter-motion,
+      padding-block $content-enter-motion;
+  }
+
+  &--collapsed {
+    grid-template-columns: 0fr;
+    block-size: 0;
+    padding-block: 0;
+    margin-block: 0;
+    @include styles.one-theme-with-motion {
+      // EXIT: opacity leads (on .label-text child), grid-columns snap to 0fr AFTER
+      // opacity completes (0s duration, delay = exit opacity duration).
+      transition:
+        grid-template-columns 0s $content-exit-fade-duration,
+        block-size $content-exit-motion,
+        padding-block $content-exit-motion;
+    }
+  }
+}
+
+// Override InternalBox .box.h3-variant padding (specificity 0,2,0) that otherwise
+// wins over the single-class --collapsed rule and reserves vertical space.
+.section-group-title.section-group-title--collapsed {
+  padding-block: 0;
 }
 
 // ==========================================================================
-// Links — all links use awsui.$size-side-navigation-item-height for consistent row sizing and collapse icon size.
+// Links — all links use awsui.$size-side-navigation-item-height for consistent row sizing;
+// collapsed icon square uses awsui.$size-side-navigation-item-collapsed.
 // ==========================================================================
 .link {
   @include styles.font-body-m;
   color: awsui.$color-text-side-navigation-item-default;
   display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-block-size: awsui.$size-side-navigation-item-height;
   padding-block: $item-padding-block;
-  min-inline-size: awsui.$size-side-navigation-item-height;
+  min-inline-size: awsui.$size-side-navigation-item-collapsed;
   padding-inline: $item-padding-inline;
   margin-inline: calc(-1 * #{$item-padding-inline});
   align-items: flex-start;
@@ -290,6 +510,13 @@ $expandable-icon-negative-margin: awsui.$space-l;
   font-weight: styles.$font-weight-normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+  @include styles.one-theme-with-motion {
+    // ENTER: block-size expands back to full row height.
+    // background-color: smooth interpolation prevents jarring swap on hover/active.
+    transition:
+      block-size $content-enter-motion,
+      background-color awsui.$motion-duration-responsive ease-in-out;
+  }
 
   &-active {
     font-weight: awsui.$font-wayfinding-link-active-weight;
@@ -303,15 +530,89 @@ $expandable-icon-negative-margin: awsui.$space-l;
       &:hover {
         color: awsui.$color-text-side-navigation-item-active-collapsed;
       }
+      // Icon-less links collapse to zero size — suppress active background so it
+      // doesn't visibly shrink as a colored square/circle during the spatial exit.
+      &:not(:has(.item-icon)) {
+        background-color: transparent;
+      }
+    }
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      // ENTER: color/background/block-size all settle back to the active state.
+      @include styles.one-theme-with-motion {
+        transition:
+          color awsui.$motion-duration-responsive ease-in-out,
+          background-color $content-enter-duration ease-in-out,
+          block-size $content-enter-motion;
+      }
+    }
+
+    // Icon-less links: step-function the bg so it snaps AFTER the spatial expand
+    // finishes — prevents a growing colored square on enter.
+    &:not(:has(.item-icon)) {
+      // ENTER: background snaps in only after block-size has finished expanding.
+      @include styles.one-theme-with-motion {
+        transition:
+          color awsui.$motion-duration-responsive ease-in-out,
+          background-color 0ms linear $content-enter-duration,
+          block-size $content-enter-motion;
+      }
+
+      // Collapsed state: snap bg to transparent immediately (no delay).
+      &.link--collapsed {
+        // EXIT: background snaps out immediately; block-size collapses after.
+        @include styles.one-theme-with-motion {
+          transition:
+            background-color 0ms linear,
+            block-size $content-exit-motion,
+            min-block-size $content-exit-motion;
+        }
+      }
     }
   }
 
   &--collapsed {
-    padding-inline: 0;
-    margin-inline: 0;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+    margin-inline: 0;
     @include item-radius(awsui.$border-radius-side-navigation-item-collapsed);
+
+    // Icon-bearing items: anchor the icon at the horizontal center of the collapsed
+    // square ($size-side-navigation-item-collapsed) independent of the text-wrapper width.
+    // Using padding-inline-start to fix the icon position decouples it from the
+    // text-wrapper's grid-template-columns step-function collapse, so:
+    //   (1) the text fades out via opacity (compositor-cheap), AND
+    //   (2) the icon center stays stable (no drift from justify-content re-centering).
+    &:has(.item-icon) {
+      justify-content: flex-start;
+      padding-inline-start: calc((#{awsui.$size-side-navigation-item-collapsed} - #{awsui.$size-icon-normal}) / 2);
+      padding-inline-end: 0;
+      // Override base item-height floor to enforce icon-sized square.
+      min-block-size: awsui.$size-side-navigation-item-collapsed;
+      max-block-size: awsui.$size-side-navigation-item-collapsed;
+      // Square forms naturally at rest: min-inline-size enforces minimum, text-wrapper at
+      // grid-template-columns: 0fr contributes zero width. fit-content prevents transient
+      // overflow without a fixed max that would clip the text fade animation.
+      max-inline-size: fit-content;
+      box-sizing: border-box;
+    }
+
+    &:not(:has(.item-icon)) {
+      inline-size: 0;
+      min-inline-size: 0;
+      padding-inline: 0;
+      block-size: 0;
+      min-block-size: 0;
+      padding-block: 0;
+      margin-block: 0;
+      @include styles.one-theme-with-motion {
+        // EXIT: spatial follows opacity — delay block collapse.
+        transition:
+          block-size $content-exit-motion,
+          min-block-size $content-exit-motion;
+      }
+    }
   }
 }
 
@@ -335,13 +636,80 @@ $expandable-icon-negative-margin: awsui.$space-l;
   @include focus-visible.when-visible {
     @include styles.link-focus;
   }
+
+  // Larger gutter for active collapsed items so the focus ring is clearly separated from the background edge.
+  // overflow: visible overrides the base .link--collapsed overflow: hidden so the ::before pseudo-element is not clipped.
+  // stylelint-disable-next-line no-descending-specificity
+  &-active.link--collapsed {
+    overflow: visible;
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(4px);
+    }
+  }
 }
 
 // ==========================================================================
 // Misc
 // ==========================================================================
+
+// Allows text wrapping at rest; parent grid container handles the 0fr clip.
+.link-text-wrapper-content {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  min-inline-size: 0;
+}
+
 .link-text-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+  min-inline-size: 0;
+  opacity: 1;
+
+  // ENTER: grid snaps to 1fr instantly; opacity follows with delay.
+  @include styles.one-theme-with-motion {
+    transition:
+      grid-template-columns 0s,
+      opacity $content-enter-fade-motion;
+  }
+
+  &--collapsed {
+    grid-template-columns: 0fr;
+    opacity: 0;
+
+    // EXIT (collapsed state governs transition INTO collapsed): Opacity leads (no delay).
+    // Grid snaps to 0fr AFTER opacity completes (0s duration, delay = exit opacity duration)
+    // — holds at 1fr during the fade so text remains full-width + visible while fading.
+    @include styles.one-theme-with-motion {
+      transition:
+        grid-template-columns 0s $content-exit-fade-duration,
+        opacity $content-exit-fade-motion;
+    }
+  }
+}
+
+// Shared text-fade for non-link labels (section headers, section-group titles).
+// Uses the same opacity timing as .link-text-wrapper for visual consistency.
+.label-text {
+  opacity: 1;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
   min-inline-size: 0;
+  @include styles.one-theme-with-motion {
+    // ENTER: opacity follows spatial — delayed fade-in after height expands.
+    transition: opacity $content-enter-fade-motion;
+  }
+  &--collapsed {
+    opacity: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    @include styles.one-theme-with-motion {
+      // EXIT: opacity leads — fast fade-out, no delay.
+      transition: opacity $content-exit-fade-motion;
+    }
+  }
 }
 
 .info {
@@ -352,6 +720,12 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .item-icon {
   display: inline-flex;
   flex-shrink: 0;
+  // EXIT: text gap margin collapses to zero once the icon is the only remaining content.
+  @include styles.one-theme-with-motion {
+    transition:
+      color awsui.$motion-duration-responsive awsui.$motion-easing-responsive,
+      margin-inline-end $content-exit-motion;
+  }
   &:not(.item-icon--collapsed) {
     margin-inline-end: $item-icon-text-gap;
   }
@@ -369,7 +743,6 @@ $expandable-icon-negative-margin: awsui.$space-l;
     border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     &.divider--collapsed {
       margin-block: awsui.$space-scaled-2x-m;
-      margin-inline: awsui.$space-xs;
     }
   }
   &-header {
@@ -399,16 +772,16 @@ $expandable-icon-negative-margin: awsui.$space-l;
     @include icon-layout-hover-background;
   }
 
-  // Expandable-link-group header: hover background.
-  > .list-item > .expandable-link-group > div:first-child:hover {
+  // Expandable-link-group header: hover background (expanded only).
+  // Collapsed ELGs use .link--collapsed:hover on the inner <a> instead.
+  > .list-item > .expandable-link-group:not(.expandable-link-group--collapsed) > div:first-child:hover {
     @include icon-layout-hover-background;
   }
 
-  // Section (footer-variant expandable) header: full-width hover geometry + background.
-  // :first-child targets the ExpandableSection header wrapper (positional cross-component coupling).
+  // Section (footer-variant expandable) header :first-child targets the ExpandableSection header wrapper.
   > .list-item > .section > :first-child {
     @include item-radius;
-    display: flex;
+    display: grid;
     padding-inline: $item-padding-inline;
     margin-inline: calc(-1 * #{$item-padding-inline});
     box-sizing: content-box;
@@ -417,6 +790,13 @@ $expandable-icon-negative-margin: awsui.$space-l;
       @include icon-layout-hover-background;
     }
   }
+
+  // In collapsed mode, icon-layout section headers are zero-height; zero their inline offsets
+  // to prevent influencing the layout of children below.
+  > .list-item--collapsed > .section--collapsed > :first-child {
+    padding-inline: 0;
+    margin-inline: 0;
+  }
 }
 
 // --- Collapsed rail items (always have icons; gated by collapsed classes) ---
diff --git a/src/side-navigation/util.tsx b/src/side-navigation/util.tsx
index 438b608234..335ca17f55 100644
--- a/src/side-navigation/util.tsx
+++ b/src/side-navigation/util.tsx
@@ -70,3 +70,62 @@ export function checkDuplicateHrefs(items: ReadonlyArray<SideNavigationProps.Ite
     }
   }
 }
+
+/**
+ * Warns when a collapsed-rail link (root-level link, link-group, ELG, or
+ * promoted root-section child) would render without an icon, making it
+ * invisible in the collapsed state.
+ *
+ * Plain links without icons are hidden entirely. Link-groups and ELGs without
+ * icons render with no visual indicator. Root-level sections/section-groups
+ * promote their direct children, so icon-less children there are also hidden.
+ */
+export function checkCollapsedIconSupport(items: ReadonlyArray<SideNavigationProps.Item>, collapsed: boolean) {
+  if (!collapsed) {
+    return;
+  }
+
+  function warnMissingIcon(
+    item: SideNavigationProps.Link | SideNavigationProps.LinkGroup | SideNavigationProps.ExpandableLinkGroup,
+    context?: string
+  ) {
+    if (item.icon) {
+      return;
+    }
+    const article = item.type === 'expandable-link-group' ? 'An' : 'A';
+    const consequence = item.type === 'link' ? 'will be hidden' : 'will have no visual indicator';
+    const prefix =
+      item.type === 'link' && !context ? `${article} root-level "${item.type}"` : `${article} "${item.type}"`;
+    const suffix = context ? ` inside ${context}` : '';
+
+    warnOnce(
+      'SideNavigation',
+      `${prefix} ("${item.text}")${suffix} has no icon and ${consequence} when collapsed. ` +
+        'Add an icon to make it visible in the collapsed rail.'
+    );
+  }
+
+  for (const item of items) {
+    switch (item.type) {
+      case 'link':
+      case 'link-group':
+      case 'expandable-link-group':
+        warnMissingIcon(item);
+        break;
+      case 'section':
+        for (const child of item.items) {
+          if (child.type === 'link' || child.type === 'link-group' || child.type === 'expandable-link-group') {
+            warnMissingIcon(child, `section "${item.text}"`);
+          }
+        }
+        break;
+      case 'section-group':
+        for (const child of item.items) {
+          if (child.type === 'link' || child.type === 'link-group' || child.type === 'expandable-link-group') {
+            warnMissingIcon(child, `section-group "${item.title}"`);
+          }
+        }
+        break;
+    }
+  }
+}
diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts
index 3799038475..e4f3f13fc2 100644
--- a/style-dictionary/one-theme/index.ts
+++ b/style-dictionary/one-theme/index.ts
@@ -28,7 +28,7 @@ const tokenCategories: Array<StyleDictionary.CategoryModule> = [
   await import('./colors.js'),
   await import('./typography.js'),
   await import('./borders.js'),
-  await import('../visual-refresh/motion.js'),
+  await import('./motion.js'),
   await import('./shadows.js'),
   await import('./sizes.js'),
   await import('./spacing.js'),
diff --git a/style-dictionary/one-theme/motion.ts b/style-dictionary/one-theme/motion.ts
new file mode 100644
index 0000000000..f62dc0cf17
--- /dev/null
+++ b/style-dictionary/one-theme/motion.ts
@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandMotionDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/motion.js';
+
+const tokens: StyleDictionary.MotionDictionary = {
+  motionDurationExpandableContentEnter: { default: '300ms', disabled: '0ms' },
+  motionEasingExpandableContentEnter: 'cubic-bezier(0, 0, 0.2, 1)',
+
+  motionDurationSideNavigationContentEnterFade: { default: '150ms', disabled: '0ms' },
+  motionDurationSideNavigationContentExit: { default: '200ms', disabled: '0ms' },
+  motionDurationSideNavigationContentExitFade: '{motionDurationFast}',
+  motionEasingSideNavigationContentExit: 'cubic-bezier(0.4, 0, 1, 1)',
+};
+
+const mergedTokens = merge({}, parentTokens, expandMotionDictionary(tokens));
+
+export { mergedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'motion';
diff --git a/style-dictionary/one-theme/sizes.ts b/style-dictionary/one-theme/sizes.ts
index 134a391460..df76e5e8b3 100644
--- a/style-dictionary/one-theme/sizes.ts
+++ b/style-dictionary/one-theme/sizes.ts
@@ -9,6 +9,7 @@ import { tokens as parentTokens } from '../visual-refresh/sizes.js';
 const tokens: StyleDictionary.SizesDictionary = {
   sizeVerticalInput: { comfortable: '30px', compact: '26px' },
   sizeSideNavigationItemHeight: { comfortable: '30px', compact: '26px' },
+  sizeSideNavigationItemCollapsed: { comfortable: '28px', compact: '26px' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge(
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index a8f47b0c37..c87945f868 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -1087,6 +1087,10 @@ export type MotionTokenName =
   | 'motionDurationRotate90'
   | 'motionDurationShowPaced'
   | 'motionDurationShowQuick'
+  | 'motionDurationExpandableContentEnter'
+  | 'motionDurationSideNavigationContentEnterFade'
+  | 'motionDurationSideNavigationContentExit'
+  | 'motionDurationSideNavigationContentExitFade'
   | 'motionDurationSlow'
   | 'motionDurationTransitionQuick'
   | 'motionDurationTransitionShowPaced'
@@ -1103,6 +1107,8 @@ export type MotionTokenName =
   | 'motionEasingRotate90'
   | 'motionEasingShowPaced'
   | 'motionEasingShowQuick'
+  | 'motionEasingExpandableContentEnter'
+  | 'motionEasingSideNavigationContentExit'
   | 'motionEasingTransitionQuick'
   | 'motionEasingTransitionShowPaced'
   | 'motionEasingTransitionShowQuick'
@@ -1128,7 +1134,9 @@ export type SizesTokenName =
   | 'sizeTableSelectionHorizontal'
   | 'sizeVerticalInput'
   | 'sizeVerticalPanelIconOffset'
-  | 'sizeSideNavigationItemHeight';
+  | 'sizeSideNavigationItemHeight'
+  | 'sizeSideNavigationItemCollapsed'
+  | 'sizeSideNavigationCollapsedWidth';
 export type SpacingTokenName =
   | 'spaceAlertActionLeft'
   | 'spaceAlertHorizontal'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index ab221457ce..0df53eb11a 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -64,7 +64,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' },
   colorBackgroundSideNavigationItemActive: 'transparent',
   colorBackgroundSideNavigationItemActiveCollapsed: '{colorBackgroundControlChecked}',
-  colorBackgroundSideNavigationItemIconHover: { light: '{colorPrimary50}', dark: '{colorNeutral700}' },
+  colorBackgroundSideNavigationItemIconHover: '{colorBackgroundItemSelected}',
   colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' },
   colorBackgroundLayoutAiDrawer: '{colorNeutral850}',
   colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
diff --git a/style-dictionary/visual-refresh/metadata/sizes.ts b/style-dictionary/visual-refresh/metadata/sizes.ts
index f4e41b8d7e..94ce6b8ef1 100644
--- a/style-dictionary/visual-refresh/metadata/sizes.ts
+++ b/style-dictionary/visual-refresh/metadata/sizes.ts
@@ -14,6 +14,16 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  sizeSideNavigationItemCollapsed: {
+    description: 'The square size of collapsed side navigation items.',
+    public: true,
+    themeable: true,
+  },
+  sizeSideNavigationCollapsedWidth: {
+    description: 'The default width of the collapsed side navigation rail.',
+    public: true,
+    themeable: true,
+  },
 };
 
 export default metadata;
diff --git a/style-dictionary/visual-refresh/motion.ts b/style-dictionary/visual-refresh/motion.ts
index 6b40637f90..4af26e824a 100644
--- a/style-dictionary/visual-refresh/motion.ts
+++ b/style-dictionary/visual-refresh/motion.ts
@@ -49,6 +49,15 @@ const tokens: StyleDictionary.MotionDictionary = {
   motionDurationTooltipEnter: '{motionDurationRefreshOnlyFast}',
   motionEasingTooltipEnter: '{motionEasingRefreshOnlyA}',
 
+  // Keep existing VR motion in expandable section
+  motionDurationExpandableContentEnter: '{motionDurationShowPaced}',
+  motionEasingExpandableContentEnter: '{motionEasingShowPaced}',
+
+  motionDurationSideNavigationContentEnterFade: { default: '0ms', disabled: '0ms' },
+  motionDurationSideNavigationContentExit: { default: '0ms', disabled: '0ms' },
+  motionDurationSideNavigationContentExitFade: { default: '0ms', disabled: '0ms' },
+  motionEasingSideNavigationContentExit: '{motionEasingShowQuick}',
+
   motionKeyframesFadeIn: 'awsui-fade-in-' + tokenStylesSuffix,
   motionKeyframesFadeOut: 'awsui-fade-out-' + tokenStylesSuffix,
   motionKeyframesStatusIconError: 'awsui-status-icon-error-' + tokenStylesSuffix,
diff --git a/style-dictionary/visual-refresh/sizes.ts b/style-dictionary/visual-refresh/sizes.ts
index 64449d28ec..748ab6a0c0 100644
--- a/style-dictionary/visual-refresh/sizes.ts
+++ b/style-dictionary/visual-refresh/sizes.ts
@@ -14,6 +14,8 @@ const tokens: StyleDictionary.SizesDictionary = {
   sizeVerticalInput: { comfortable: '32px', compact: '28px' },
   sizeVerticalPanelIconOffset: { comfortable: '15px', compact: '13px' },
   sizeSideNavigationItemHeight: { comfortable: '28px', compact: '24px' },
+  sizeSideNavigationItemCollapsed: { comfortable: '30px', compact: '28px' },
+  sizeSideNavigationCollapsedWidth: '52px',
 };
 
 const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);