From c7fd3cf53af326186b58e07ce816643b74c0be9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 14 Nov 2023 17:25:58 +0100
Subject: [PATCH 01/52] [rdar://116401230] feat: working on UI changes

---
 src/components/DocumentationTopic.vue         | 23 +++++
 .../DocumentationTopic/DocumentationNav.vue   | 99 ++++---------------
 .../{DocumentationNav => }/Hierarchy.vue      | 20 +++-
 .../HierarchyCollapsedItems.vue               |  0
 .../{DocumentationNav => }/HierarchyItem.vue  |  0
 src/components/NavBase.vue                    | 15 +--
 .../Navigator/BaseNavigatorCard.vue           | 31 ++----
 src/styles/core/typography/_font-styles.scss  |  2 +-
 src/views/DocumentationTopic.vue              | 68 ++++++++++---
 9 files changed, 121 insertions(+), 137 deletions(-)
 rename src/components/DocumentationTopic/{DocumentationNav => }/Hierarchy.vue (94%)
 rename src/components/DocumentationTopic/{DocumentationNav => }/HierarchyCollapsedItems.vue (100%)
 rename src/components/DocumentationTopic/{DocumentationNav => }/HierarchyItem.vue (100%)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index ae8c8bb48..28b841f18 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -30,6 +30,15 @@
           <slot name="above-hero-content" />
         </template>
         <slot name="above-title" />
+        <Hierarchy
+          :currentTopicTitle="title"
+          :isSymbolDeprecated="isSymbolDeprecated"
+          :isSymbolBeta="isSymbolBeta"
+          :parentTopicIdentifiers="hierarchyItems"
+          :currentTopicTags="currentTopicTags"
+          :references="references"
+          :rootLink="rootLink"
+        />
         <LanguageSwitcher
           v-if="shouldShowLanguageSwitcher"
           :interfaceLanguage="interfaceLanguage"
@@ -175,6 +184,7 @@ import SeeAlso from './DocumentationTopic/SeeAlso.vue';
 import Title from './DocumentationTopic/Title.vue';
 import Topics from './DocumentationTopic/Topics.vue';
 import OnThisPageStickyContainer from './DocumentationTopic/OnThisPageStickyContainer.vue';
+import Hierarchy from './DocumentationTopic/Hierarchy.vue';
 
 // size above which, the OnThisPage container is visible
 const ON_THIS_PAGE_CONTAINER_BREAKPOINT = 1050;
@@ -219,6 +229,7 @@ export default {
     Topics,
     ViewMore,
     WordBreak,
+    Hierarchy,
   },
   props: {
     abstract: {
@@ -370,6 +381,18 @@ export default {
       type: Array,
       required: false,
     },
+    currentTopicTags: {
+      type: Array,
+      required: true,
+    },
+    hierarchyItems: {
+      type: Array,
+      required: false,
+    },
+    rootLink: {
+      type: Object,
+      required: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.identifier change, the provided value
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 40523c24e..e29d4e1cd 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -22,25 +22,19 @@
   >
     <template #pre-title="{ closeNav, isOpen, currentBreakpoint, className }" v-if="displaySidenav">
       <div :class="className">
-        <transition name="sidenav-toggle">
-          <div
-            v-show="sidenavHiddenOnLarge"
-            class="sidenav-toggle-wrapper"
+        <div class="sidenav-toggle-wrapper">
+          <button
+            :aria-label="$t('navigator.open-navigator')"
+            :id="baseNavOpenSidenavButtonId"
+            class="sidenav-toggle"
+            :tabindex="isOpen ? -1 : null"
+            @click.prevent="handleSidenavToggle(closeNav, currentBreakpoint)"
           >
-            <button
-              :aria-label="$t('navigator.open-navigator')"
-              :id="baseNavOpenSidenavButtonId"
-              class="sidenav-toggle"
-              :tabindex="isOpen ? -1 : null"
-              @click.prevent="handleSidenavToggle(closeNav, currentBreakpoint)"
-            >
-            <span class="sidenav-icon-wrapper">
-              <SidenavIcon class="icon-inline sidenav-icon" />
-            </span>
-            </button>
-            <span class="sidenav-toggle__separator" />
-          </div>
-        </transition>
+          <span class="sidenav-icon-wrapper">
+            <SidenavIcon class="icon-inline sidenav-icon" />
+          </span>
+          </button>
+        </div>
       </div>
     </template>
     <template #default>
@@ -59,17 +53,8 @@
       </slot>
     </template>
     <template #tray="{ closeNav }">
-      <Hierarchy
-        :currentTopicTitle="title"
-        :isSymbolDeprecated="isSymbolDeprecated"
-        :isSymbolBeta="isSymbolBeta"
-        :parentTopicIdentifiers="hierarchyItems"
-        :currentTopicTags="currentTopicTags"
-        :references="references"
-      />
       <NavMenuItems
         class="nav-menu-settings"
-        :previousSiblingChildren="breadcrumbCount"
       >
         <LanguageToggle
           v-if="interfaceLanguage && (swiftPath || objcPath)"
@@ -80,7 +65,7 @@
         />
         <slot name="menu-items" />
       </NavMenuItems>
-      <slot name="tray-after" v-bind="{ breadcrumbCount }" />
+      <slot name="tray-after" />
     </template>
     <template #after-content>
       <slot name="after-content" />
@@ -95,7 +80,6 @@ import { BreakpointName } from 'docc-render/utils/breakpoints';
 import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import { SIDEBAR_HIDE_BUTTON_ID } from 'docc-render/constants/sidebar';
 import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
-import Hierarchy from './DocumentationNav/Hierarchy.vue';
 import LanguageToggle from './DocumentationNav/LanguageToggle.vue';
 
 export default {
@@ -104,14 +88,9 @@ export default {
     SidenavIcon,
     NavBase,
     NavMenuItems,
-    Hierarchy,
     LanguageToggle,
   },
   props: {
-    title: {
-      type: String,
-      required: false,
-    },
     parentTopicIdentifiers: {
       type: Array,
       required: false,
@@ -132,10 +111,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    currentTopicTags: {
-      type: Array,
-      required: true,
-    },
     references: {
       type: Object,
       default: () => ({}),
@@ -160,42 +135,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    rootLink: {
+      type: Object,
+      required: false,
+    },
   },
   computed: {
     baseNavOpenSidenavButtonId: () => baseNavOpenSidenavButtonId,
     BreakpointName: () => BreakpointName,
-    breadcrumbCount: ({ hierarchyItems }) => hierarchyItems.length + 1,
-    /**
-     * Returns the first(root) hierarchy item reference
-     * @return {Object}
-     */
-    rootHierarchyReference: ({ parentTopicIdentifiers, references }) => (
-      references[parentTopicIdentifiers[0]] || {}
-    ),
-    /**
-     * Returns whether the root link is a technology page.
-     * @return {boolean}
-     */
-    isRootTechnologyLink: ({ rootHierarchyReference: { kind } }) => kind === 'technologies',
-    /**
-     * Returns the root url reference object, if is a `technologies` link.
-     * Otherwise returns a manual route query object.
-     * @return {Object}
-     */
-    rootLink: ({
-      isRootTechnologyLink, rootHierarchyReference, $route,
-    }) => (isRootTechnologyLink
-      ? {
-        path: rootHierarchyReference.url,
-        query: $route.query,
-      } : null),
-    /**
-     * Strips out the first link, if is the root Technologies link.
-     * @return {string[]}
-     */
-    hierarchyItems: ({ parentTopicIdentifiers, isRootTechnologyLink }) => (
-      isRootTechnologyLink ? parentTopicIdentifiers.slice(1) : parentTopicIdentifiers
-    ),
   },
   methods: {
     async handleSidenavToggle(closeNav, currentBreakpoint) {
@@ -275,16 +222,8 @@ $sidenav-icon-padding-size: 5px;
 .documentation-nav {
   :deep() {
     // normalize the Title font with menu items
-    .nav-title {
-      @include font-styles(documentation-nav);
-
-      .nav-title-link.inactive {
-        height: auto;
-        color: var(--color-figure-gray-secondary-alt);
-        @include nav-dark($nested: true) {
-          color: dark-color(figure-gray-secondary-alt);
-        }
-      }
+    .nav-title-link.inactive {
+      height: auto;
     }
   }
 }
diff --git a/src/components/DocumentationTopic/DocumentationNav/Hierarchy.vue b/src/components/DocumentationTopic/Hierarchy.vue
similarity index 94%
rename from src/components/DocumentationTopic/DocumentationNav/Hierarchy.vue
rename to src/components/DocumentationTopic/Hierarchy.vue
index e9249a1af..7038100ff 100644
--- a/src/components/DocumentationTopic/DocumentationNav/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hierarchy.vue
@@ -14,6 +14,18 @@
     :class="{ 'has-badge': hasBadge }"
     class="hierarchy"
   >
+    <slot
+      name="title"
+      v-bind="{ rootLink }"
+    >
+      <HierarchyItem
+        v-if="rootLink"
+        :to="rootLink"
+      >
+        {{ $t('documentation.title') }}
+      </HierarchyItem>
+      <span v-else>{{ $t('documentation.title') }}</span>
+    </slot>
     <HierarchyItem
       v-if="root"
       :key="root.title"
@@ -120,6 +132,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    rootLink: {
+      type: Object,
+      required: false,
+    },
   },
   computed: {
     windowWidth: ({ store }) => store.state.contentWidth,
@@ -178,10 +194,10 @@ export default {
 
 .hierarchy {
   justify-content: flex-start;
+  margin: 0 80px 0 0;
   min-width: 0;
-  margin-right: 80px;
   @include nav-in-breakpoint() {
-    margin-right: 0;
+    margin: 0;
   }
 
   // make sure the root-hierarchy has a limit as well
diff --git a/src/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/HierarchyCollapsedItems.vue
similarity index 100%
rename from src/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.vue
rename to src/components/DocumentationTopic/HierarchyCollapsedItems.vue
diff --git a/src/components/DocumentationTopic/DocumentationNav/HierarchyItem.vue b/src/components/DocumentationTopic/HierarchyItem.vue
similarity index 100%
rename from src/components/DocumentationTopic/DocumentationNav/HierarchyItem.vue
rename to src/components/DocumentationTopic/HierarchyItem.vue
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index abc5bb8a6..2943ab654 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -561,19 +561,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 
 .pre-title {
   display: flex;
-  overflow: hidden;
-  padding-left: $nav-padding;
-  margin-left: -$nav-padding;
-
-  &:empty {
-    display: none;
-  }
-
-  @include nav-in-breakpoint() {
-    overflow: visible;
-    padding: 0;
-    margin-left: 0;
-  }
 }
 
 // Nav content (title and menus)
@@ -691,6 +678,8 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   align-items: center;
   white-space: nowrap;
   box-sizing: border-box;
+  width: 100%;
+  padding-left: $nav-padding / 2;
 
   @include breakpoint(small, $scope: nav) {
     padding-top: 0;
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 52ebe2ec4..5f1ca05e6 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -25,15 +25,6 @@
               </h2>
               <Badge v-if="isTechnologyBeta" variant="beta" />
             </Reference>
-            <button
-              :id="SIDEBAR_HIDE_BUTTON_ID"
-              class="close-card"
-              :class="{ 'hide-on-large': !allowHiding }"
-              :aria-label="$t('navigator.close-navigator')"
-              @click="handleHideClick"
-            >
-              <SidenavIcon class="icon-inline close-icon" />
-            </button>
           </div>
         </div>
         <slot name="body" className="card-body"/>
@@ -47,7 +38,6 @@ import {
   INDEX_ROOT_KEY,
   SIDEBAR_HIDE_BUTTON_ID,
 } from 'docc-render/constants/sidebar';
-import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Badge from 'docc-render/components/Badge.vue';
 import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
@@ -55,7 +45,6 @@ import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
 export default {
   name: 'BaseNavigatorCard',
   components: {
-    SidenavIcon,
     Reference,
     Badge,
   },
@@ -130,6 +119,7 @@ $close-icon-padding: 5px;
 
   .head-inner {
     overflow: hidden;
+    padding-top: var(--card-horizontal-spacing);
   }
 
   .head-wrapper {
@@ -139,12 +129,11 @@ $close-icon-padding: 5px;
 
   .navigator-head {
     --navigator-head-padding-right: calc(var(--card-horizontal-spacing) * 2 + #{$close-icon-size});
-    padding: 0 var(--navigator-head-padding-right) 0 var(--card-horizontal-spacing);
-    background: $navigator-head-background;
-    border-bottom: 1px solid var(--color-grid);
+    padding: calc(var(--card-horizontal-spacing) / 3);
+    background: var(--color-fill-gray-quaternary);
+    border-radius: 5px;
     display: flex;
     align-items: center;
-    height: $nav-height;
     white-space: nowrap;
 
     .card-link {
@@ -159,14 +148,6 @@ $close-icon-padding: 5px;
       margin-top: 0;
     }
 
-    &.router-link-exact-active {
-      background: $navigator-head-background-active;
-
-      .card-link {
-        font-weight: $font-weight-bold;
-      }
-    }
-
     &:hover {
       background: var(--color-navigator-item-hover);
       text-decoration: none;
@@ -178,8 +159,8 @@ $close-icon-padding: 5px;
       }
     }
 
-    @include safe-area-left-set(padding-left, var(--card-horizontal-spacing));
-    @include safe-area-right-set(padding-right, var(--navigator-head-padding-right));
+    @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
+    @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
 
     @include breakpoint(medium, nav) {
       justify-content: center;
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 1480a0552..5eafc14fe 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -182,7 +182,7 @@ $font-styles: (
   ),
   // nav typography
   nav-title: (
-    large: (19_27, nav),
+    large: (21_25_semibold, nav),
   ),
   nav-title-compact: (
     small: (nav_17_17_semibold, nav)
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index 2efed4090..aea142452 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -11,6 +11,24 @@
 <template>
   <CodeTheme class="doc-topic-view">
     <template v-if="topicData">
+      <Nav
+        v-if="!isTargetIDE"
+        :title="topicProps.title"
+        :diffAvailability="topicProps.diffAvailability"
+        :interfaceLanguage="topicProps.interfaceLanguage"
+        :objcPath="objcPath"
+        :swiftPath="swiftPath"
+        :parentTopicIdentifiers="parentTopicIdentifiers"
+        :isSymbolDeprecated="isSymbolDeprecated"
+        :isSymbolBeta="isSymbolBeta"
+        :currentTopicTags="topicProps.tags"
+        :references="topicProps.references"
+        :displaySidenav="enableNavigator"
+        :sidenavHiddenOnLarge="sidenavHiddenOnLarge"
+        :hierarchyItems="hierarchyItems"
+        :rootLink="rootLink"
+        @toggle-sidenav="handleToggleSidenav"
+      />
       <component
         :is="enableNavigator ? 'AdjustableSidebarWidth' : 'StaticContentWidth'"
         v-bind="sidebarProps"
@@ -57,22 +75,6 @@
             </template>
           </NavigatorDataProvider>
         </template>
-        <Nav
-          v-if="!isTargetIDE"
-          :title="topicProps.title"
-          :diffAvailability="topicProps.diffAvailability"
-          :interfaceLanguage="topicProps.interfaceLanguage"
-          :objcPath="objcPath"
-          :swiftPath="swiftPath"
-          :parentTopicIdentifiers="parentTopicIdentifiers"
-          :isSymbolDeprecated="isSymbolDeprecated"
-          :isSymbolBeta="isSymbolBeta"
-          :currentTopicTags="topicProps.tags"
-          :references="topicProps.references"
-          :displaySidenav="enableNavigator"
-          :sidenavHiddenOnLarge="sidenavHiddenOnLarge"
-          @toggle-sidenav="handleToggleSidenav"
-        />
         <Topic
           v-bind="topicProps"
           :key="topicKey"
@@ -83,6 +85,9 @@
           :languagePaths="languagePaths"
           :enableOnThisPageNav="enableOnThisPageNav"
           :enableMinimized="enableMinimized"
+          :currentTopicTags="topicProps.tags"
+          :hierarchyItems="hierarchyItems"
+          :rootLink="rootLink"
         />
       </component>
     </template>
@@ -278,6 +283,37 @@ export default {
         'update:hiddenOnLarge': this.toggleLargeSidenav,
       }) : {};
     },
+    /**
+     * Returns the first(root) hierarchy item reference
+     * @return {Object}
+     */
+    rootHierarchyReference: ({ parentTopicIdentifiers, topicProps: { references } }) => (
+      references[parentTopicIdentifiers[0]] || {}
+    ),
+    /**
+     * Returns whether the root link is a technology page.
+     * @return {boolean}
+     */
+    isRootTechnologyLink: ({ rootHierarchyReference: { kind } }) => kind === 'technologies',
+    /**
+     * Strips out the first link, if is the root Technologies link.
+     * @return {string[]}
+     */
+    hierarchyItems: ({ parentTopicIdentifiers, isRootTechnologyLink }) => (
+      isRootTechnologyLink ? parentTopicIdentifiers.slice(1) : parentTopicIdentifiers
+    ),
+    /**
+     * Returns the root url reference object, if is a `technologies` link.
+     * Otherwise returns a manual route query object.
+     * @return {Object}
+     */
+    rootLink: ({
+      isRootTechnologyLink, rootHierarchyReference, $route,
+    }) => (isRootTechnologyLink
+      ? {
+        path: rootHierarchyReference.url,
+        query: $route.query,
+      } : null),
   },
   methods: {
     applyObjcOverrides() {

From 15d26fbb7b8ea81939636003fe28ee1a62c636ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 14 Nov 2023 18:01:56 +0100
Subject: [PATCH 02/52] [rdar://116401230] feat: increase font size

---
 src/components/Navigator/BaseNavigatorCard.vue | 2 +-
 src/styles/core/typography/_font-styles.scss   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 5f1ca05e6..98250adff 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -138,7 +138,7 @@ $close-icon-padding: 5px;
 
     .card-link {
       color: var(--color-text);
-      @include font-styles(body-reduced);
+      @include font-styles(label-reduced);
       font-weight: $font-weight-semibold;
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 5eafc14fe..db1eb69d8 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -69,7 +69,7 @@ $font-styles: (
     large: 14_20
   ),
   body-reduced-tight: (
-    large: 14_18
+    large: 17_25
   ),
   caption: (
     large: 12_16

From db3df7a83edbf2504c27fd40340e2d4131e6fc36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 14 Nov 2023 20:05:41 +0100
Subject: [PATCH 03/52] =?UTF-8?q?[rdar://116401230]=20fix:=20active=20mode?=
 =?UTF-8?q?=20doesn=E2=80=99t=20reach=20the=20whole=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Navigator/BaseNavigatorCardItem.vue       | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Navigator/BaseNavigatorCardItem.vue b/src/components/Navigator/BaseNavigatorCardItem.vue
index 77c5c3b97..76c7d1b75 100644
--- a/src/components/Navigator/BaseNavigatorCardItem.vue
+++ b/src/components/Navigator/BaseNavigatorCardItem.vue
@@ -54,7 +54,7 @@ $depth-spacer-base-spacing: (
 $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-small;
 
 .navigator-card-item {
-  --nav-head-wrapper-left-space: #{$nav-card-horizontal-spacing};
+  --nav-head-wrapper-left-space: #{$nav-card-horizontal-spacing-large};
   --nav-head-wrapper-right-space: #{$nav-card-horizontal-spacing-large};
   --head-wrapper-vertical-space: 5px;
   --nav-depth-spacer: #{$depth-spacer-base-spacing};
@@ -64,6 +64,7 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
   align-items: stretch;
   min-height: $item-height;
   box-sizing: border-box;
+  padding: 0 var(--nav-head-wrapper-right-space) 0 var(--nav-head-wrapper-left-space);
 
   @include on-keyboard-focus-within() {
     @include focus-outline(-4px);
@@ -73,12 +74,16 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
   }
 
   &.active {
-    background: var(--color-fill-gray-quaternary);
+    .head-wrapper {
+      background: var(--color-fill-gray-quaternary);
+    }
   }
 
   &:not(.is-group) {
     .hover & {
-      background: var(--color-navigator-item-hover);
+      .head-wrapper {
+        background: var(--color-navigator-item-hover);
+      }
     }
   }
 }
@@ -102,17 +107,15 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
 }
 
 .head-wrapper {
-  padding: var(--head-wrapper-vertical-space)
-  var(--nav-head-wrapper-right-space)
-  var(--head-wrapper-vertical-space)
-  var(--nav-head-wrapper-left-space);
   position: relative;
   display: flex;
   align-items: center;
   flex: 1;
   min-width: 0;
+  border-radius: var(--border-radius, 4px);
+
+  padding: var(--head-wrapper-vertical-space) 0;
 
-  @include safe-area-left-set(padding-left, var(--nav-head-wrapper-left-space));
   @include safe-area-right-set(padding-right, var(--nav-head-wrapper-right-space));
 }
 </style>

From eeddb55a819dc41af0337ee6c6a3ef760cdb27c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 20 Nov 2023 17:04:39 +0100
Subject: [PATCH 04/52] [rdar://116401230] fix: focus states

---
 .../DocumentationTopic/DocumentationNav.vue    |  8 --------
 src/components/Navigator/BaseNavigatorCard.vue | 18 +++++++++---------
 .../Navigator/BaseNavigatorCardItem.vue        | 11 ++++-------
 src/views/DocumentationTopic.vue               |  5 -----
 4 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index e29d4e1cd..982189009 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -91,10 +91,6 @@ export default {
     LanguageToggle,
   },
   props: {
-    parentTopicIdentifiers: {
-      type: Array,
-      required: false,
-    },
     isSymbolBeta: {
       type: Boolean,
       required: false,
@@ -111,10 +107,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    references: {
-      type: Object,
-      default: () => ({}),
-    },
     interfaceLanguage: {
       type: String,
       required: false,
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 98250adff..24d9ac5ee 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -90,7 +90,7 @@ export default {
 
 $navigator-card-vertical-spacing: 8px !default;
 $navigator-head-background: var(--color-fill) !default;
-$navigator-head-background-active: var(--color-fill) !default;
+$navigator-head-background-active: var(--color-fill-gray-quaternary) !default;
 $close-icon-size: 19px;
 $close-icon-padding: 5px;
 
@@ -118,7 +118,6 @@ $close-icon-padding: 5px;
   }
 
   .head-inner {
-    overflow: hidden;
     padding-top: var(--card-horizontal-spacing);
   }
 
@@ -130,7 +129,7 @@ $close-icon-padding: 5px;
   .navigator-head {
     --navigator-head-padding-right: calc(var(--card-horizontal-spacing) * 2 + #{$close-icon-size});
     padding: calc(var(--card-horizontal-spacing) / 3);
-    background: var(--color-fill-gray-quaternary);
+    background: $navigator-head-background;
     border-radius: 5px;
     display: flex;
     align-items: center;
@@ -148,17 +147,18 @@ $close-icon-padding: 5px;
       margin-top: 0;
     }
 
+    &.router-link-exact-active {
+      background: $navigator-head-background-active;
+      .card-link {
+        font-weight: $font-weight-bold;
+      }
+    }
+
     &:hover {
       background: var(--color-navigator-item-hover);
       text-decoration: none;
     }
 
-    &:focus .card-link {
-      .fromkeyboard & {
-        @include focus-outline();
-      }
-    }
-
     @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
     @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
 
diff --git a/src/components/Navigator/BaseNavigatorCardItem.vue b/src/components/Navigator/BaseNavigatorCardItem.vue
index 76c7d1b75..e8babb0a1 100644
--- a/src/components/Navigator/BaseNavigatorCardItem.vue
+++ b/src/components/Navigator/BaseNavigatorCardItem.vue
@@ -66,13 +66,6 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
   box-sizing: border-box;
   padding: 0 var(--nav-head-wrapper-right-space) 0 var(--nav-head-wrapper-left-space);
 
-  @include on-keyboard-focus-within() {
-    @include focus-outline(-4px);
-    &:not(.is-group) {
-      background: var(--color-navigator-item-hover);
-    }
-  }
-
   &.active {
     .head-wrapper {
       background: var(--color-fill-gray-quaternary);
@@ -116,6 +109,10 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
 
   padding: var(--head-wrapper-vertical-space) 0;
 
+  @include on-keyboard-focus-within() {
+    @include focus-outline(-4px);
+  }
+
   @include safe-area-right-set(padding-right, var(--nav-head-wrapper-right-space));
 }
 </style>
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index aea142452..762d3adb5 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -13,19 +13,14 @@
     <template v-if="topicData">
       <Nav
         v-if="!isTargetIDE"
-        :title="topicProps.title"
         :diffAvailability="topicProps.diffAvailability"
         :interfaceLanguage="topicProps.interfaceLanguage"
         :objcPath="objcPath"
         :swiftPath="swiftPath"
-        :parentTopicIdentifiers="parentTopicIdentifiers"
         :isSymbolDeprecated="isSymbolDeprecated"
         :isSymbolBeta="isSymbolBeta"
-        :currentTopicTags="topicProps.tags"
-        :references="topicProps.references"
         :displaySidenav="enableNavigator"
         :sidenavHiddenOnLarge="sidenavHiddenOnLarge"
-        :hierarchyItems="hierarchyItems"
         :rootLink="rootLink"
         @toggle-sidenav="handleToggleSidenav"
       />

From 1b23dd084e5699e15cadf987aabaff47320de112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 20 Nov 2023 19:01:26 +0100
Subject: [PATCH 05/52] [rdar://116401230] fix: mobile navigator head

---
 .../DocumentationTopic/DocumentationNav.vue   |  1 +
 src/components/Navigator.vue                  |  5 --
 .../Navigator/BaseNavigatorCard.vue           | 56 +++++++++----------
 .../Navigator/BaseNavigatorCardItem.vue       |  2 +-
 4 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 982189009..1efa89f89 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -248,6 +248,7 @@ $sidenav-icon-padding-size: 5px;
   color: var(--color-nav-link-color);
   position: relative;
   margin: 0 (-$sidenav-icon-padding-size);
+  border-radius: $nano-border-radius;
 
   @include nav-dark {
     color: var(--color-nav-dark-link-color);
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index caac25b8c..987e55dbd 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -23,7 +23,6 @@
       :error-fetching="errorFetching"
       :render-filter-on-top="renderFilterOnTop"
       :api-changes="apiChanges"
-      :allow-hiding="allowHiding"
       :navigator-references="navigatorReferences"
       @close="$emit('close')"
     >
@@ -122,10 +121,6 @@ export default {
       type: Object,
       default: null,
     },
-    allowHiding: {
-      type: Boolean,
-      default: true,
-    },
   },
   computed: {
     // gets the paths for each parent in the breadcrumbs
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 24d9ac5ee..57cce43a9 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -14,6 +14,14 @@
       <div class="navigator-card-inner">
         <div class="head-wrapper">
           <div class="head-inner">
+            <button
+              :id="SIDEBAR_HIDE_BUTTON_ID"
+              class="close-card"
+              :aria-label="$t('navigator.close-navigator')"
+              @click="handleHideClick"
+            >
+              <SidenavIcon class="icon-inline close-icon" />
+            </button>
             <Reference
               :id="INDEX_ROOT_KEY"
               :url="technologyPath"
@@ -38,6 +46,7 @@ import {
   INDEX_ROOT_KEY,
   SIDEBAR_HIDE_BUTTON_ID,
 } from 'docc-render/constants/sidebar';
+import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Badge from 'docc-render/components/Badge.vue';
 import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
@@ -45,14 +54,11 @@ import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
 export default {
   name: 'BaseNavigatorCard',
   components: {
+    SidenavIcon,
     Reference,
     Badge,
   },
   props: {
-    allowHiding: {
-      type: Boolean,
-      default: true,
-    },
     technologyPath: {
       type: String,
       default: '',
@@ -118,7 +124,11 @@ $close-icon-padding: 5px;
   }
 
   .head-inner {
-    padding-top: var(--card-horizontal-spacing);
+    padding-top: $navigator-card-vertical-spacing;
+    display: flex;
+    @include breakpoint(medium, nav) {
+      justify-content: center;
+    }
   }
 
   .head-wrapper {
@@ -130,7 +140,8 @@ $close-icon-padding: 5px;
     --navigator-head-padding-right: calc(var(--card-horizontal-spacing) * 2 + #{$close-icon-size});
     padding: calc(var(--card-horizontal-spacing) / 3);
     background: $navigator-head-background;
-    border-radius: 5px;
+    border-radius: $nano-border-radius;
+    width: 100%;
     display: flex;
     align-items: center;
     white-space: nowrap;
@@ -168,38 +179,25 @@ $close-icon-padding: 5px;
     }
 
     @include breakpoint(small, nav) {
-      height: $nav-height-small;
+      height: calc(#{$nav-height-small} - #{$navigator-card-vertical-spacing * 2});
       padding: 0 $nav-card-horizontal-spacing-large;
+      width: auto;
     }
   }
 }
 
 .close-card {
-  display: flex;
+  display: none;
   position: absolute;
   z-index: 1;
-  align-items: center;
-  justify-content: center;
-  right: $nav-padding - rem($close-icon-padding);
-  padding: $close-icon-padding;
-  margin-left: -$close-icon-padding;
-  top: calc(50% - #{$close-icon-size} + #{$close-icon-padding});
-  transition: transform $adjustable-sidebar-hide-transition-duration ease-in 0s, visibility 0s;
 
   @include breakpoint(medium, nav) {
-    right: unset;
-    top: 0;
+    display: flex;
+    align-items: center;
+    top: $navigator-card-vertical-spacing;
     left: 0;
-    margin: 0;
-    padding: 0 $nav-padding 0 $nav-card-horizontal-spacing-large;
-    height: 100%;
-    @include safe-area-left-set(padding-left, $nav-padding);
-  }
-
-  @include breakpoint(small, nav) {
-    padding-left: $nav-padding-small;
-    padding-right: $nav-padding-small;
-    @include safe-area-left-set(padding-left, $nav-padding-small);
+    height: calc(100% - #{$navigator-card-vertical-spacing});
+    @include safe-area-left-set(margin-left, $nav-padding);
   }
 
   .close-icon {
@@ -208,10 +206,6 @@ $close-icon-padding: 5px;
   }
 
   @include breakpoints-from(large, nav) {
-    &.hide-on-large {
-      display: none;
-    }
-
     &:hover {
       border-radius: $nano-border-radius;
       background: var(--color-fill-gray-quaternary);
diff --git a/src/components/Navigator/BaseNavigatorCardItem.vue b/src/components/Navigator/BaseNavigatorCardItem.vue
index e8babb0a1..bf39cc2d5 100644
--- a/src/components/Navigator/BaseNavigatorCardItem.vue
+++ b/src/components/Navigator/BaseNavigatorCardItem.vue
@@ -105,7 +105,7 @@ $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-sm
   align-items: center;
   flex: 1;
   min-width: 0;
-  border-radius: var(--border-radius, 4px);
+  border-radius: $nano-border-radius;
 
   padding: var(--head-wrapper-vertical-space) 0;
 

From 47f299123c6fc42dcb9ce3f14f8d8172d8cb2b90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 21 Nov 2023 17:48:16 +0100
Subject: [PATCH 06/52] [rdar://116401230] test: fix tests

---
 src/components/DocumentationTopic.vue         |  2 +-
 .../components/DocumentationTopic.spec.js     | 37 ++++++--
 .../DocumentationNav.spec.js                  | 89 ++-----------------
 .../DocumentationTopic/Hierarchy.spec.js      |  2 +-
 .../HierarchyCollapsedItems.spec.js           |  2 +-
 .../HierarchyItem.spec.js                     |  2 +-
 tests/unit/components/Navigator.spec.js       |  2 -
 .../Navigator/BaseNavigatorCard.spec.js       | 10 ---
 tests/unit/views/DocumentationTopic.spec.js   | 65 ++++++++++++--
 9 files changed, 97 insertions(+), 114 deletions(-)
 rename tests/unit/components/DocumentationTopic/{DocumentationNav => }/HierarchyCollapsedItems.spec.js (96%)
 rename tests/unit/components/DocumentationTopic/{DocumentationNav => }/HierarchyItem.spec.js (96%)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 28b841f18..5ff4102f2 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -383,7 +383,7 @@ export default {
     },
     currentTopicTags: {
       type: Array,
-      required: true,
+      default: () => [],
     },
     hierarchyItems: {
       type: Array,
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 7540e9f9f..9a81cbbd6 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -22,6 +22,7 @@ import Declaration from '@/components/DocumentationTopic/PrimaryContent/Declarat
 const { ON_THIS_PAGE_CONTAINER_BREAKPOINT } = DocumentationTopic.constants;
 
 const {
+  Hierarchy,
   Abstract,
   ContentNode,
   DefaultImplementations,
@@ -109,14 +110,6 @@ const sampleCodeDownload = {
 const propsData = {
   abstract: [abstract],
   conformance: { constraints: [], availabilityPrefix: [] },
-  hierarchy: {
-    paths: [
-      [
-        'topic://foo',
-        'topic://bar',
-      ],
-    ],
-  },
   identifier: 'doc://fookit',
   interfaceLanguage: 'swift',
   role: TopicTypes.collection,
@@ -155,6 +148,20 @@ const propsData = {
   ],
   remoteSource: { url: 'foo' },
   pageImages: [{ identifier: 'foo', type: 'icon' }],
+  currentTopicTags: [{
+    type: 'foo',
+    text: 'Foo',
+  }, {
+    type: 'custom',
+  }],
+  rootLink: {
+    path: 'foo',
+    query: {},
+  },
+  hierarchyItems: [
+    'topic://foo',
+    'topic://bar',
+  ],
 };
 
 describe('DocumentationTopic', () => {
@@ -285,6 +292,20 @@ describe('DocumentationTopic', () => {
     });
   });
 
+  it('renders a Hierarchy', () => {
+    const hierarchy = wrapper.find(Hierarchy);
+    expect(hierarchy.exists()).toBe(true);
+    expect(hierarchy.props()).toEqual({
+      currentTopicTitle: propsData.title,
+      parentTopicIdentifiers: propsData.hierarchyItems,
+      isSymbolBeta: false,
+      isSymbolDeprecated: false,
+      currentTopicTags: propsData.currentTopicTags,
+      references: propsData.references,
+      rootLink: propsData.rootLink,
+    });
+  });
+
   it('render a `DocumentationHero`, enabled, if top-level technology page', () => {
     const hero = wrapper.find(DocumentationHero);
     expect(hero.props()).toEqual({
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index 2943922d9..c3ab6f923 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -23,7 +23,6 @@ jest.mock('docc-render/utils/scroll-lock');
 jest.mock('docc-render/utils/FocusTrap');
 
 const {
-  Hierarchy,
   NavBase,
   LanguageToggle,
   NavMenuItems,
@@ -34,12 +33,9 @@ const stubs = {
   NavBase,
 };
 
-const TechnologiesRootIdentifier = 'topic://technologies';
-
-const references = {
-  [TechnologiesRootIdentifier]: { kind: 'technologies', url: '/documentation/technologies' },
-  'topic://foo': {},
-  'topic://bar': {},
+const rootLink = {
+  path: '/documentation/technologies',
+  query: {},
 };
 
 const mocks = {
@@ -60,14 +56,11 @@ describe('DocumentationNav', () => {
       'topic://foo',
       'topic://bar',
     ],
-    currentTopicTags: [{
-      type: 'foo',
-    }],
     interfaceLanguage: 'swift',
     swiftPath: 'documentation/foo',
     objcPath: 'documentation/bar',
-    references,
     displaySidenav: true,
+    rootLink: null,
   };
 
   beforeEach(() => {
@@ -118,90 +111,26 @@ describe('DocumentationNav', () => {
 
   it('renders the title "Documentation" link, when there is a Technology root', () => {
     wrapper.setProps({
-      parentTopicIdentifiers: [
-        TechnologiesRootIdentifier,
-        ...propsData.parentTopicIdentifiers,
-      ],
+      rootLink,
     });
     const title = wrapper.find('.nav-title-link');
     expect(title.exists()).toBe(true);
     expect(title.is(RouterLinkStub)).toBe(true);
-    expect(title.props('to')).toEqual({
-      path: references[TechnologiesRootIdentifier].url,
-      query: {},
-    });
+    expect(title.props('to')).toEqual(rootLink);
     expect(title.text()).toBe('documentation.title');
   });
 
-  it('renders the title "Documentation" link and preservers query params, using the root reference path', () => {
-    wrapper = shallowMount(DocumentationNav, {
-      stubs,
-      propsData: {
-        ...propsData,
-        parentTopicIdentifiers: [
-          TechnologiesRootIdentifier,
-          ...propsData.parentTopicIdentifiers,
-        ],
-      },
-      mocks: {
-        $route: {
-          query: {
-            changes: 'latest_minor',
-          },
-        },
-      },
-    });
-    expect(wrapper.find('.nav-title-link').props('to'))
-      .toEqual({
-        path: references[TechnologiesRootIdentifier].url,
-        query: { changes: 'latest_minor' },
-      });
-  });
-
-  it('renders a Hierarchy', () => {
-    const hierarchy = wrapper.find(Hierarchy);
-    expect(hierarchy.exists()).toBe(true);
-    expect(hierarchy.props()).toEqual({
-      currentTopicTitle: propsData.title,
-      parentTopicIdentifiers: propsData.parentTopicIdentifiers,
-      isSymbolBeta: false,
-      isSymbolDeprecated: false,
-      currentTopicTags: propsData.currentTopicTags,
-      references,
-    });
-  });
-
-  it('renders a Hierarchy with correct items, if first hierarchy item is the root link', () => {
-    const parentTopicIdentifiers = [
-      TechnologiesRootIdentifier,
-      ...propsData.parentTopicIdentifiers,
-    ];
-
-    wrapper.setProps({ parentTopicIdentifiers });
-    const hierarchy = wrapper.find(Hierarchy);
-    expect(hierarchy.props())
-      // passes all items, without the first one
-      .toHaveProperty('parentTopicIdentifiers', parentTopicIdentifiers.slice(1));
-  });
-
   it('exposes a `tray-after` scoped slot', () => {
-    let slotProps = null;
     const fooBar = 'Foo bar';
     wrapper = shallowMount(DocumentationNav, {
       stubs,
       propsData,
       mocks,
       scopedSlots: {
-        'tray-after': (props) => {
-          slotProps = props;
-          return fooBar;
-        },
+        'tray-after': () => fooBar,
       },
     });
     expect(wrapper.text()).toContain(fooBar);
-    expect(slotProps).toEqual({
-      breadcrumbCount: 3,
-    });
   });
 
   it('renders a LanguageToggle', () => {
@@ -273,11 +202,7 @@ describe('DocumentationNav', () => {
     const btn = document.createElement('button');
     btn.id = SIDEBAR_HIDE_BUTTON_ID;
     document.body.appendChild(btn);
-    // assert the wrapper is hidden
     const sidenavToggleWrapper = wrapper.find('.sidenav-toggle-wrapper');
-    expect(sidenavToggleWrapper.isVisible()).toBe(false);
-    // show the wrapper
-    wrapper.setProps({ sidenavHiddenOnLarge: true });
     // assert its visible
     expect(sidenavToggleWrapper.isVisible()).toBe(true);
     // interact with button
diff --git a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
index 92ccebb73..d506f16dd 100644
--- a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
@@ -9,7 +9,7 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import Hierarchy from 'docc-render/components/DocumentationTopic/DocumentationNav/Hierarchy.vue';
+import Hierarchy from 'docc-render/components/DocumentationTopic/Hierarchy.vue';
 import Badge from 'docc-render/components/Badge.vue';
 import Vue from 'vue';
 
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.spec.js b/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
similarity index 96%
rename from tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.spec.js
rename to tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
index 43fe8d0b5..473f7c147 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.spec.js
+++ b/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
@@ -10,7 +10,7 @@
 
 import { RouterLinkStub, shallowMount } from '@vue/test-utils';
 import HierarchyCollapsedItems
-  from 'docc-render/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.vue';
+  from 'docc-render/components/DocumentationTopic/HierarchyCollapsedItems.vue';
 import EllipsisIcon from 'theme/components/Icons/EllipsisIcon.vue';
 
 const mocks = { $route: {} };
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyItem.spec.js b/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
similarity index 96%
rename from tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyItem.spec.js
rename to tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
index 0944e3202..bdc2f16cb 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav/HierarchyItem.spec.js
+++ b/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
@@ -10,7 +10,7 @@
 
 import { RouterLinkStub, shallowMount } from '@vue/test-utils';
 import HierarchyItem
-  from 'docc-render/components/DocumentationTopic/DocumentationNav/HierarchyItem.vue';
+  from 'docc-render/components/DocumentationTopic/HierarchyItem.vue';
 import NavMenuItemBase from 'docc-render/components/NavMenuItemBase.vue';
 
 const mountWithProps = props => shallowMount(HierarchyItem, {
diff --git a/tests/unit/components/Navigator.spec.js b/tests/unit/components/Navigator.spec.js
index 5c8255a1f..4cd40698c 100644
--- a/tests/unit/components/Navigator.spec.js
+++ b/tests/unit/components/Navigator.spec.js
@@ -146,7 +146,6 @@ describe('Navigator', () => {
       renderFilterOnTop: defaultProps.renderFilterOnTop,
       errorFetching: false,
       apiChanges: null,
-      allowHiding: true,
       navigatorReferences,
       hideAvailableTags: false,
     });
@@ -186,7 +185,6 @@ describe('Navigator', () => {
       renderFilterOnTop: defaultProps.renderFilterOnTop,
       errorFetching: false,
       apiChanges: null,
-      allowHiding: true,
       navigatorReferences,
       hideAvailableTags: false,
     });
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index a2ec31a5e..1f1312b8c 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -16,7 +16,6 @@ import { flushPromises } from '../../../../test-utils';
 const { Reference, Badge } = BaseNavigatorCard.components;
 
 const defaultProps = {
-  allowHiding: true,
   technology: 'Technology',
   technologyPath: '/path',
   isTechnologyBeta: false,
@@ -54,15 +53,6 @@ describe('BaseNavigatorCard', () => {
     expect(document.activeElement).toEqual(btn);
   });
 
-  it('hides the toggle button, if `allowHiding` is `false`', async () => {
-    const wrapper = createWrapper({
-      propsData: {
-        allowHiding: false,
-      },
-    });
-    expect(wrapper.find('.close-card').classes()).toContain('hide-on-large');
-  });
-
   it('renders a Beta badge in the header', async () => {
     const wrapper = createWrapper({
       propsData: {
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index d7f066167..ef36fb00d 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -72,6 +72,9 @@ const mocks = {
     params: {
       locale: 'en-US',
     },
+    query: {
+      changes: 'latest_minor',
+    },
   },
 };
 
@@ -229,7 +232,6 @@ describe('DocumentationTopic', () => {
       // assert we are passing the default technology, if we dont have the children yet
       technology,
       apiChanges: null,
-      allowHiding: true,
       flatChildren: [],
       navigatorReferences: {},
       renderFilterOnTop: false,
@@ -245,7 +247,6 @@ describe('DocumentationTopic', () => {
       references: topicData.references,
       technology: TechnologyWithChildren,
       apiChanges: null,
-      allowHiding: true,
       flatChildren: [],
       navigatorReferences,
     });
@@ -515,19 +516,16 @@ describe('DocumentationTopic', () => {
     // assert the Nav
     const nav = wrapper.find(Nav);
     expect(nav.props()).toEqual({
-      parentTopicIdentifiers: topicData.hierarchy.paths[0],
-      title: topicData.metadata.title,
       isDark: false,
       hasNoBorder: false,
-      currentTopicTags: [],
       displaySidenav: false,
-      references: topicData.references,
       isSymbolBeta: false,
       isSymbolDeprecated: false,
       interfaceLanguage: topicData.identifier.interfaceLanguage,
       objcPath: topicData.variants[0].paths[0],
       swiftPath: topicData.variants[1].paths[0],
       sidenavHiddenOnLarge: false,
+      rootLink: null,
     });
     expect(nav.attributes()).toMatchObject({
       interfacelanguage: 'swift',
@@ -565,8 +563,6 @@ describe('DocumentationTopic', () => {
     });
     expect(wrapper.find(Navigator).props('parentTopicIdentifiers'))
       .toEqual(topicData.hierarchy.paths[1]);
-    expect(wrapper.find(Nav).props('parentTopicIdentifiers'))
-      .toEqual(topicData.hierarchy.paths[1]);
   });
 
   it('handles the `@close`, on Navigator, for Mobile breakpoints', async () => {
@@ -667,6 +663,59 @@ describe('DocumentationTopic', () => {
       enableMinimized: false, // disabled by default
       topicSectionsStyle: TopicSectionsStyle.list, // default value
       disableHeroBackground: false,
+      hierarchyItems: topicData.hierarchy.paths[0],
+      rootLink: null,
+      currentTopicTags: [],
+    });
+  });
+
+  it('renders a `Topic` with `topicData` without the first hierarchy item if there is root link', () => {
+    const TechnologiesRootIdentifier = 'topic://technologies';
+
+    const references = {
+      [TechnologiesRootIdentifier]: { kind: 'technologies', url: '/documentation/technologies' },
+      'topic://foo': { title: 'FooTechnology', url: '/documentation/foo' },
+      'topic://bar': { title: 'BarTechnology', url: '/documentation/bar' },
+    };
+
+    wrapper.setData({
+      topicData: {
+        ...topicData,
+        hierarchy: {
+          paths: [
+            [TechnologiesRootIdentifier, ...topicData.hierarchy.paths[0]],
+          ],
+        },
+        references,
+      },
+    });
+
+    const topic = wrapper.find(Topic);
+    expect(topic.exists()).toBe(true);
+    expect(topic.attributes('style')).toBeFalsy();
+    expect(topic.props()).toEqual({
+      ...wrapper.vm.topicProps,
+      isSymbolBeta: false,
+      isSymbolDeprecated: false,
+      objcPath: topicData.variants[0].paths[0],
+      swiftPath: topicData.variants[1].paths[0],
+      languagePaths: {
+        occ: ['documentation/objc'],
+        swift: ['documentation/swift'],
+      },
+      enableOnThisPageNav: true, // enabled by default
+      enableMinimized: false, // disabled by default
+      topicSectionsStyle: TopicSectionsStyle.list, // default value
+      disableHeroBackground: false,
+      hierarchyItems: topicData.hierarchy.paths[0],
+      rootLink: {
+        path: references[TechnologiesRootIdentifier].url,
+        query: {
+          // preservers query params
+          changes: 'latest_minor',
+        },
+      },
+      currentTopicTags: [],
     });
   });
 

From c0766f120a14c24932e5801f584caabed52acca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 21 Nov 2023 19:40:31 +0100
Subject: [PATCH 07/52] [rdar://116401230] feat: add above-navigator-head slot

---
 src/components/Navigator/BaseNavigatorCard.vue | 12 +++++++-----
 src/components/Navigator/NavigatorCard.vue     |  3 +++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 57cce43a9..c3d75732b 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -22,6 +22,7 @@
             >
               <SidenavIcon class="icon-inline close-icon" />
             </button>
+            <slot name="above-navigator-head"/>
             <Reference
               :id="INDEX_ROOT_KEY"
               :url="technologyPath"
@@ -126,8 +127,14 @@ $close-icon-padding: 5px;
   .head-inner {
     padding-top: $navigator-card-vertical-spacing;
     display: flex;
+    flex-direction: column;
+
+    @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
+    @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
+
     @include breakpoint(medium, nav) {
       justify-content: center;
+      align-items: center;
     }
   }
 
@@ -141,7 +148,6 @@ $close-icon-padding: 5px;
     padding: calc(var(--card-horizontal-spacing) / 3);
     background: $navigator-head-background;
     border-radius: $nano-border-radius;
-    width: 100%;
     display: flex;
     align-items: center;
     white-space: nowrap;
@@ -170,9 +176,6 @@ $close-icon-padding: 5px;
       text-decoration: none;
     }
 
-    @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
-    @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
-
     @include breakpoint(medium, nav) {
       justify-content: center;
       --navigator-head-padding-right: var(--card-horizontal-spacing);
@@ -181,7 +184,6 @@ $close-icon-padding: 5px;
     @include breakpoint(small, nav) {
       height: calc(#{$nav-height-small} - #{$navigator-card-vertical-spacing * 2});
       padding: 0 $nav-card-horizontal-spacing-large;
-      width: auto;
     }
   }
 }
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index f0ffc597f..76102f4ef 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -19,6 +19,9 @@
     @close="$emit('close')"
     @head-click-alt="toggleAllNodes"
   >
+    <template #above-navigator-head>
+      <slot name="above-navigator-head"/>
+    </template>
     <template #body="{ className }">
       <slot name="post-head" />
       <div

From fddefdd0c33315593972a1189b4ea37540bf8e5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 22 Nov 2023 18:45:26 +0100
Subject: [PATCH 08/52] [rdar://116401230] feat: allows to hide the navigator
 head on large viewport

---
 src/components/Navigator/BaseNavigatorCard.vue        | 11 +++++++++++
 src/components/Navigator/NavigatorCard.vue            |  1 +
 tests/unit/components/Navigator.spec.js               |  2 ++
 .../components/Navigator/BaseNavigatorCard.spec.js    | 10 ++++++++++
 4 files changed, 24 insertions(+)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index c3d75732b..b6b129b76 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -26,6 +26,7 @@
             <Reference
               :id="INDEX_ROOT_KEY"
               :url="technologyPath"
+              :class="{ 'hide-on-large': hideNavigatorHeadOnLarge }"
               class="navigator-head"
               @click.alt.native.prevent="$emit('head-click-alt')"
             >
@@ -72,6 +73,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideNavigatorHeadOnLarge: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -185,6 +190,12 @@ $close-icon-padding: 5px;
       height: calc(#{$nav-height-small} - #{$navigator-card-vertical-spacing * 2});
       padding: 0 $nav-card-horizontal-spacing-large;
     }
+
+    @include breakpoints-from(large, nav) {
+      &.hide-on-large {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 76102f4ef..f97e502b1 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -11,6 +11,7 @@
 <template>
   <BaseNavigatorCard
     :class="{ 'filter-on-top': renderFilterOnTop }"
+    :hideNavigatorHeadOnLarge="hideNavigatorHeadOnLarge"
     v-bind="{
       technology,
       isTechnologyBeta,
diff --git a/tests/unit/components/Navigator.spec.js b/tests/unit/components/Navigator.spec.js
index 4cd40698c..8539d8266 100644
--- a/tests/unit/components/Navigator.spec.js
+++ b/tests/unit/components/Navigator.spec.js
@@ -148,6 +148,7 @@ describe('Navigator', () => {
       apiChanges: null,
       navigatorReferences,
       hideAvailableTags: false,
+      hideNavigatorHeadOnLarge: false,
     });
   });
 
@@ -187,6 +188,7 @@ describe('Navigator', () => {
       apiChanges: null,
       navigatorReferences,
       hideAvailableTags: false,
+      hideNavigatorHeadOnLarge: false,
     });
   });
 
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index 1f1312b8c..5506ec8ac 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -16,6 +16,7 @@ import { flushPromises } from '../../../../test-utils';
 const { Reference, Badge } = BaseNavigatorCard.components;
 
 const defaultProps = {
+  hideNavigatorHeadOnLarge: false,
   technology: 'Technology',
   technologyPath: '/path',
   isTechnologyBeta: false,
@@ -65,6 +66,15 @@ describe('BaseNavigatorCard', () => {
     });
   });
 
+  it('hides navigator head on large viewport, if `hideNavigatorHeadOnLarge` is `true`', async () => {
+    const wrapper = createWrapper({
+      propsData: {
+        hideNavigatorHeadOnLarge: true,
+      },
+    });
+    expect(wrapper.find('.navigator-head').classes()).toContain('hide-on-large');
+  });
+
   it('renders a card-link with the technology name', () => {
     const wrapper = createWrapper();
     expect(wrapper.find(Reference).props('url')).toEqual(defaultProps.technologyPath);

From 87961e875f374874fee49b7cbc4c0c7f01267e58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 22 Nov 2023 19:37:11 +0100
Subject: [PATCH 09/52] [rdar://116401230] fix: loading navigation

---
 src/components/Navigator/LoadingNavigatorCard.vue | 3 ++-
 src/styles/core/_vars.scss                        | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigator/LoadingNavigatorCard.vue b/src/components/Navigator/LoadingNavigatorCard.vue
index 3b9021fb7..4eb624783 100644
--- a/src/components/Navigator/LoadingNavigatorCard.vue
+++ b/src/components/Navigator/LoadingNavigatorCard.vue
@@ -12,6 +12,7 @@
   <BaseNavigatorCard
     v-bind="$props"
     @close="$emit('close')"
+    hideNavigatorHeadOnLarge
   >
     <template #body="{ className }">
       <transition name="delay-visibility">
@@ -65,6 +66,6 @@ export default {
 }
 
 .loading-navigator {
-  padding-top: var(--card-vertical-spacing);
+  padding-top: $nav-card-vertical-spacing;
 }
 </style>
diff --git a/src/styles/core/_vars.scss b/src/styles/core/_vars.scss
index e17d000b0..3c88a77f8 100644
--- a/src/styles/core/_vars.scss
+++ b/src/styles/core/_vars.scss
@@ -66,6 +66,7 @@ $aside-width-left-border: 6px !default;
 $total-columns: 12 !default;
 
 // Navigator
+$nav-card-vertical-spacing: 10px;
 $nav-card-horizontal-spacing: 10px;
 $nav-card-horizontal-spacing-large: $nav-card-horizontal-spacing * 2;
 $nav-card-horizontal-spacing-small: $nav-card-horizontal-spacing * 0.5;

From dbf52172a7ed2129e5e7488b75edc8ad4651e35a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 29 Nov 2023 17:34:44 +0100
Subject: [PATCH 10/52] [rdar://116401230] fix: slash on HierarchyItem

---
 src/components/DocumentationTopic/Hierarchy.vue     | 3 ++-
 src/components/DocumentationTopic/HierarchyItem.vue | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/DocumentationTopic/Hierarchy.vue b/src/components/DocumentationTopic/Hierarchy.vue
index 7038100ff..32838e421 100644
--- a/src/components/DocumentationTopic/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hierarchy.vue
@@ -20,7 +20,8 @@
     >
       <HierarchyItem
         v-if="rootLink"
-        :to="rootLink"
+        :url="rootLink"
+        :hasSlash="false"
       >
         {{ $t('documentation.title') }}
       </HierarchyItem>
diff --git a/src/components/DocumentationTopic/HierarchyItem.vue b/src/components/DocumentationTopic/HierarchyItem.vue
index a4c0783f8..5a5a13173 100644
--- a/src/components/DocumentationTopic/HierarchyItem.vue
+++ b/src/components/DocumentationTopic/HierarchyItem.vue
@@ -14,7 +14,7 @@
     :class="[{ collapsed: props.isCollapsed }, data.staticClass]"
     class="hierarchy-item"
   >
-    <span class="hierarchy-item-icon icon-inline">/</span>
+    <span v-if="props.hasSlash" class="hierarchy-item-icon icon-inline">/</span>
     <router-link v-if="props.url" class="parent item nav-menu-link" :to="props.url">
       <slot />
     </router-link>
@@ -40,6 +40,10 @@ export default {
       type: String,
       required: false,
     },
+    hasSlash: {
+      type: Boolean,
+      default: () => true,
+    },
   },
 };
 </script>

From 7deba6ad9cf0c1f5087361de4dc19c07e18f8de7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 1 Dec 2023 19:25:48 +0100
Subject: [PATCH 11/52] [rdar://116401230] fix: navigator alignment

---
 src/components/Navigator/BaseNavigatorCard.vue     | 2 +-
 src/components/Navigator/BaseNavigatorCardItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index b6b129b76..a49e55913 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -150,7 +150,7 @@ $close-icon-padding: 5px;
 
   .navigator-head {
     --navigator-head-padding-right: calc(var(--card-horizontal-spacing) * 2 + #{$close-icon-size});
-    padding: calc(var(--card-horizontal-spacing) / 3);
+    padding: calc(var(--card-horizontal-spacing) / 3) var(--card-horizontal-spacing);
     background: $navigator-head-background;
     border-radius: $nano-border-radius;
     display: flex;
diff --git a/src/components/Navigator/BaseNavigatorCardItem.vue b/src/components/Navigator/BaseNavigatorCardItem.vue
index bf39cc2d5..e3e3a988d 100644
--- a/src/components/Navigator/BaseNavigatorCardItem.vue
+++ b/src/components/Navigator/BaseNavigatorCardItem.vue
@@ -49,7 +49,7 @@ $item-height: 32px;
 $chevron-width: $nav-card-horizontal-spacing;
 $tree-toggle-padding: $nav-card-horizontal-spacing-small;
 $depth-spacer-base-spacing: (
-  $nav-card-horizontal-spacing + $chevron-width + $tree-toggle-padding
+  $nav-card-horizontal-spacing + $chevron-width
 );
 $nesting-spacing: $nav-card-horizontal-spacing + $nav-card-horizontal-spacing-small;
 

From 48ea057619857a0508b7e7b42238b284029aa0fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 2 Jan 2024 17:14:49 +0100
Subject: [PATCH 12/52] [rdar://116401230] test: fix tests

---
 .../DocumentationTopic/Hierarchy.spec.js      | 76 +++++++++++++++----
 1 file changed, 61 insertions(+), 15 deletions(-)

diff --git a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
index d506f16dd..2602bb30b 100644
--- a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
@@ -126,7 +126,7 @@ describe('Hierarchy', () => {
 
     const currentItem = items.at(items.length - 1);
     expect(currentItem.attributes()).toEqual({
-      url: undefined,
+      hasslash: 'true',
     });
     expect(currentItem.text()).toBe(baz.title);
 
@@ -205,20 +205,26 @@ describe('Hierarchy', () => {
         // next assert the collapsible items. Only one, as 3 can live outside at 1200
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -242,22 +248,28 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. Two collapsed, as 2 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -280,6 +292,7 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -287,23 +300,28 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -334,6 +352,7 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -341,23 +360,28 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 4, as 0 can live outside below 800
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -408,22 +432,27 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. Two, as 2 can live outside at 1200 with tags
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -454,23 +483,28 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. 3 collapsed, as 1 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -501,6 +535,7 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -508,23 +543,28 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -563,6 +603,7 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -570,23 +611,28 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
+          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({});
+        expect(items.at(5).attributes()).toEqual({
+          hasslash: 'true',
+        });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);

From 788a426c8abbd9020cbd69e18be9c3c6e3d7c322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 2 Jan 2024 17:41:07 +0100
Subject: [PATCH 13/52] [rdar://116401230] test: add test for
 #above-navigator-head slot

---
 .../unit/components/Navigator/BaseNavigatorCard.spec.js  | 9 +++++++++
 tests/unit/components/Navigator/NavigatorCard.spec.js    | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index 5506ec8ac..5503aa64a 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -90,4 +90,13 @@ describe('BaseNavigatorCard', () => {
     });
     expect(wrapper.find('.card-body').text()).toBe('CustomBody');
   });
+
+  it('exposes a #above-navigator-head slot', () => {
+    const wrapper = createWrapper({
+      scopedSlots: {
+        'above-navigator-head': '<div class="above-navigator-head">CustomAboveNavigatorHeadComponent</div>',
+      },
+    });
+    expect(wrapper.find('.above-navigator-head').text()).toBe('CustomAboveNavigatorHeadComponent');
+  });
 });
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 223890832..48645c4bb 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -315,6 +315,15 @@ describe('NavigatorCard', () => {
     expect(wrapper.find('.post-head').text()).toBe('CustomPostHead');
   });
 
+  it('exposes a #above-navigator-head slot', () => {
+    const wrapper = createWrapper({
+      scopedSlots: {
+        'above-navigator-head': '<div class="above-navigator-head">CustomAboveNavigatorHeadComponent</div>',
+      },
+    });
+    expect(wrapper.find('.above-navigator-head').text()).toBe('CustomAboveNavigatorHeadComponent');
+  });
+
   it('exposes a #filter slot', () => {
     const wrapper = createWrapper({
       scopedSlots: {

From e4a2fef49a0ff6863d487126550b69a16dfd5749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 3 Jan 2024 20:06:12 +0100
Subject: [PATCH 14/52] [rdar://116401230] fix: alignment in localnav

---
 src/components/NavBase.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index 2943ab654..9a5c790d1 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -602,6 +602,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   @include font-styles(nav-menu);
   flex: 1 1 auto;
   display: flex;
+  justify-content: flex-end;
   min-width: 0;
 
   @include nav-in-breakpoint {
@@ -611,8 +612,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 }
 
 .nav-menu-tray {
-  width: 100%;
-  max-width: 100%;
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -624,6 +623,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
     visibility: hidden;
     max-height: 0;
     transition: $nav-menu-tray-transition;
+    width: 100%;
 
     @include nav-is-open($nested: true) {
       $max-height: calc(100vh - #{$nav-height-small} - #{$nav-height-small});
@@ -678,7 +678,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   align-items: center;
   white-space: nowrap;
   box-sizing: border-box;
-  width: 100%;
   padding-left: $nav-padding / 2;
 
   @include breakpoint(small, $scope: nav) {

From f189ed8d499be019d286d5c4f58069027790072a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 5 Jan 2024 17:12:38 +0100
Subject: [PATCH 15/52] [rdar://116401230] fix: improve HierarchyItems

---
 .../DocumentationTopic/Hierarchy.vue          | 18 ++++++-
 .../HierarchyCollapsedItems.vue               | 25 ++++------
 .../DocumentationTopic/HierarchyItem.vue      | 25 +++-------
 src/styles/core/_nav.scss                     |  2 +-
 .../DocumentationTopic/Hierarchy.spec.js      | 48 +------------------
 .../HierarchyCollapsedItems.spec.js           |  4 --
 .../DocumentationTopic/HierarchyItem.spec.js  |  6 ---
 7 files changed, 35 insertions(+), 93 deletions(-)

diff --git a/src/components/DocumentationTopic/Hierarchy.vue b/src/components/DocumentationTopic/Hierarchy.vue
index 32838e421..822bd2a21 100644
--- a/src/components/DocumentationTopic/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hierarchy.vue
@@ -21,7 +21,6 @@
       <HierarchyItem
         v-if="rootLink"
         :url="rootLink"
-        :hasSlash="false"
       >
         {{ $t('documentation.title') }}
       </HierarchyItem>
@@ -206,4 +205,21 @@ export default {
     @include truncate(10rem);
   }
 }
+
+// Applies colors to any link inside the nav
+:deep(.nav-menu-link) {
+  color: var(--color-nav-link-color);
+
+  &:hover {
+    color: var(--color-nav-link-color-hover);
+  }
+
+  @include nav-dark {
+    color: var(--color-nav-dark-link-color);
+
+    &:hover {
+      color: var(--color-nav-dark-link-color-hover);
+    }
+  }
+}
 </style>
diff --git a/src/components/DocumentationTopic/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/HierarchyCollapsedItems.vue
index 91322b1c8..194b120f3 100644
--- a/src/components/DocumentationTopic/HierarchyCollapsedItems.vue
+++ b/src/components/DocumentationTopic/HierarchyCollapsedItems.vue
@@ -10,7 +10,6 @@
 
 <template>
   <li class="hierarchy-collapsed-items">
-    <span class="hierarchy-item-icon icon-inline">/</span>
     <button
       class="toggle"
       ref="btn"
@@ -116,11 +115,10 @@ $hierarchy-dropdown-box-shadow: 0 1px 4px -1px var(--color-figure-gray-secondary
 
 $tail-width: 1rem * 0.5;
 
-$tail-offset: rem($nav-menu-item-left-margin)
-  + rem($nav-space-hierarchy-elements)
-  - math.div($toggle-width, 2)
-  + $tail-width
-  + rem(4px);
+$tail-offset:
+  + rem($nav-space-hierarchy-elements * 3)
+  + math.div($toggle-width, 2)
+  - $tail-width;
 
 $dropdown-vertical-offset: rem(7px);
 
@@ -128,16 +126,11 @@ $dropdown-vertical-offset: rem(7px);
   position: relative;
   display: inline-flex;
   align-items: center;
-  margin-left: $nav-space-hierarchy-elements;
 
-  .hierarchy-item-icon {
-    width: 9px;
-    height: 15px;
-    margin-right: $nav-space-hierarchy-elements;
-    display: flex;
-    justify-content: center;
-    font-size: 1em;
-    align-self: baseline;
+  &:before{
+    content: '/';
+    width: $nav-space-hierarchy-elements;
+    margin: 0 $nav-space-hierarchy-elements;
   }
 
   @include nav-in-breakpoint() {
@@ -186,6 +179,8 @@ $dropdown-vertical-offset: rem(7px);
 
 .dropdown {
   background: $dropdown-bg-color;
+  margin: 0;
+  list-style-type: none;
   border-color: $dropdown-border-color;
   border-radius: $border-radius;
   border-style: $border-style;
diff --git a/src/components/DocumentationTopic/HierarchyItem.vue b/src/components/DocumentationTopic/HierarchyItem.vue
index 44111fcf4..1e56578df 100644
--- a/src/components/DocumentationTopic/HierarchyItem.vue
+++ b/src/components/DocumentationTopic/HierarchyItem.vue
@@ -14,7 +14,6 @@
     :class="[{ collapsed: props.isCollapsed }, data.staticClass]"
     class="hierarchy-item"
   >
-    <span v-if="props.hasSlash" class="hierarchy-item-icon icon-inline">/</span>
     <router-link v-if="props.url" class="parent item nav-menu-link" :to="props.url">
       <slot />
     </router-link>
@@ -40,10 +39,6 @@ export default {
       type: String,
       required: false,
     },
-    hasSlash: {
-      type: Boolean,
-      default: () => true,
-    },
   },
 };
 </script>
@@ -52,24 +47,16 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .hierarchy-item {
-  // style the chevron icon
- :deep(.hierarchy-item-icon) {
-    width: 9px;
-    height: 15px;
-    margin-right: $nav-space-hierarchy-elements;
-    display: flex;
-    justify-content: center;
-    font-size: 1em;
-    align-self: baseline;
-    // hide on when collapsed
-    @include nav-in-breakpoint() {
-      display: none;
-    }
+  // applies "/" at the start of the item when the item is not the first child
+  &:not(:first-child):before{
+    content: '/';
+    width: $nav-space-hierarchy-elements;
+    margin: 0 $nav-space-hierarchy-elements;
   }
 
   display: flex;
   align-items: center;
-  margin-left: $nav-space-hierarchy-elements;
+  margin-left: 0;
 
   @include nav-in-breakpoint() {
     border-top: 1px solid var(--color-nav-hierarchy-item-borders);
diff --git a/src/styles/core/_nav.scss b/src/styles/core/_nav.scss
index c5df36626..f3be20620 100644
--- a/src/styles/core/_nav.scss
+++ b/src/styles/core/_nav.scss
@@ -24,7 +24,7 @@ $nav-menu-item-stagger-delay: 0s !default;
 $nav-bg-transition-timing: 0s !default;
 $nav-bg-color-transition: $nav-bg-transition-timing $nav-timingfunction !default;
 $nav-space-between-elements: rem(10px);
-$nav-space-hierarchy-elements: rem(3px);
+$nav-space-hierarchy-elements: rem(5px);
 $nav-z-index: 9997;
 
 @mixin nav-in-breakpoint($nested: false) {
diff --git a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
index 2602bb30b..3f71974df 100644
--- a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
@@ -125,9 +125,7 @@ describe('Hierarchy', () => {
     expect(barItem.text()).toBe(bar.title);
 
     const currentItem = items.at(items.length - 1);
-    expect(currentItem.attributes()).toEqual({
-      hasslash: 'true',
-    });
+    expect(currentItem.attributes()).toEqual({});
     expect(currentItem.text()).toBe(baz.title);
 
     expect(wrapper.contains(HierarchyCollapsedItems)).toBe(false);
@@ -205,25 +203,20 @@ describe('Hierarchy', () => {
         // next assert the collapsible items. Only one, as 3 can live outside at 1200
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -248,27 +241,22 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. Two collapsed, as 2 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -292,7 +280,6 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -300,27 +287,22 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -352,7 +334,6 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -360,27 +341,22 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 4, as 0 can live outside below 800
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -432,26 +408,21 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. Two, as 2 can live outside at 1200 with tags
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -483,27 +454,22 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. 3 collapsed, as 1 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -535,7 +501,6 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -543,27 +508,22 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -603,7 +563,6 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
@@ -611,27 +570,22 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
diff --git a/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js b/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
index 473f7c147..059d7d11d 100644
--- a/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
+++ b/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
@@ -45,10 +45,6 @@ describe('HierarchyCollapsedItems', () => {
     expect(wrapper.is('li.hierarchy-collapsed-items')).toBe(true);
   });
 
-  it('renders a slash instead of an icon', () => {
-    expect(wrapper.find('.hierarchy-item-icon').text()).toBe('/');
-  });
-
   it('renders a non-focused button', () => {
     const btn = wrapper.find('button.toggle');
     expect(btn.exists()).toBe(true);
diff --git a/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js b/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
index bdc2f16cb..197e38067 100644
--- a/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
+++ b/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
@@ -33,12 +33,6 @@ describe('HierarchyItem', () => {
     expect(wrapper.classes('collapsed')).toBe(true);
   });
 
-  it('renders a slash instead of an icon', () => {
-    const wrapper = mountWithProps({ url: 'foo.bar' });
-
-    expect(wrapper.find('.hierarchy-item-icon').text()).toBe('/');
-  });
-
   it('renders a .parent.item link if the URL exists', () => {
     const wrapper = mountWithProps({ url: 'foo.bar' });
     const item = wrapper.find('.item');

From fa617e839c68f4023ff4055493d850d416734670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 5 Jan 2024 17:28:37 +0100
Subject: [PATCH 16/52] [rdar://116401230] fix: font styles

---
 src/components/DocumentationTopic/DocumentationNav.vue | 4 ++++
 src/components/Navigator/NavigatorCardItem.vue         | 2 +-
 src/styles/core/typography/_font-styles.scss           | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 1efa89f89..98033947b 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -217,6 +217,10 @@ $sidenav-icon-padding-size: 5px;
     .nav-title-link.inactive {
       height: auto;
     }
+
+    .nav-title {
+      @include font-styles(nav-title-large);
+    }
   }
 }
 
diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue
index 34f52a281..19b9ad91d 100644
--- a/src/components/Navigator/NavigatorCardItem.vue
+++ b/src/components/Navigator/NavigatorCardItem.vue
@@ -322,7 +322,7 @@ $chevron-width: $nav-card-horizontal-spacing;
   max-width: 100%;
   display: inline;
   vertical-align: middle;
-  @include font-styles(body-reduced-tight);
+  @include font-styles(body);
 
   @include on-keyboard-focus {
     outline: none;
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index db1eb69d8..ad4cca73e 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -69,7 +69,7 @@ $font-styles: (
     large: 14_20
   ),
   body-reduced-tight: (
-    large: 17_25
+    large: 14_18
   ),
   caption: (
     large: 12_16
@@ -182,6 +182,9 @@ $font-styles: (
   ),
   // nav typography
   nav-title: (
+    large: (19_27, nav),
+  ),
+  nav-title-large: (
     large: (21_25_semibold, nav),
   ),
   nav-title-compact: (

From 188841a59df5226b5ac9a678fb44399d03eed7fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 8 Jan 2024 18:13:52 +0100
Subject: [PATCH 17/52] [rdar://116401230] fix: localnav background

---
 src/components/DocumentationTopic/DocumentationNav.vue          | 1 -
 .../unit/components/DocumentationTopic/DocumentationNav.spec.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 98033947b..8340f12bf 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -12,7 +12,6 @@
   <NavBase
     :breakpoint="BreakpointName.medium"
     :hasOverlay="false"
-    hasSolidBackground
     :hasNoBorder="hasNoBorder"
     :isDark="isDark"
     isWideFormat
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index c3ab6f923..6670e82e3 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -78,7 +78,7 @@ describe('DocumentationNav', () => {
     expect(nav.classes('nav-hero')).toBe(false);
     expect(nav.classes('theme-dark')).toBe(false);
     expect(nav.classes()).toContain('documentation-nav');
-    expect(nav.props()).toHaveProperty('hasSolidBackground', true);
+    expect(nav.props()).toHaveProperty('hasSolidBackground', false);
     expect(nav.props()).toHaveProperty('hasNoBorder', false);
     expect(nav.props()).toHaveProperty('hasFullWidthBorder', true);
     expect(nav.props()).toHaveProperty('hasOverlay', false);

From d96594b85ed174880132f33c6131409d733bae34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 8 Jan 2024 18:25:09 +0100
Subject: [PATCH 18/52] [rdar://116401230] fix: Hierarchy alignment on mobile

---
 src/components/DocumentationTopic/Hierarchy.vue     | 3 ++-
 src/components/DocumentationTopic/HierarchyItem.vue | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DocumentationTopic/Hierarchy.vue b/src/components/DocumentationTopic/Hierarchy.vue
index 822bd2a21..2d780a484 100644
--- a/src/components/DocumentationTopic/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hierarchy.vue
@@ -194,7 +194,8 @@ export default {
 
 .hierarchy {
   justify-content: flex-start;
-  margin: 0 80px 0 0;
+  align-items: flex-start;
+  margin: 0;
   min-width: 0;
   @include nav-in-breakpoint() {
     margin: 0;
diff --git a/src/components/DocumentationTopic/HierarchyItem.vue b/src/components/DocumentationTopic/HierarchyItem.vue
index 1e56578df..c3cf01ac9 100644
--- a/src/components/DocumentationTopic/HierarchyItem.vue
+++ b/src/components/DocumentationTopic/HierarchyItem.vue
@@ -55,7 +55,6 @@ export default {
   }
 
   display: flex;
-  align-items: center;
   margin-left: 0;
 
   @include nav-in-breakpoint() {

From 437d7554d823495fceec1a7787689f18ad197d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 9 Jan 2024 17:51:11 +0100
Subject: [PATCH 19/52] [rdar://116401230] fix: address feedback

---
 src/components/DocumentationTopic/DocumentationHero.vue      | 4 ----
 src/components/DocumentationTopic/DocumentationNav.vue       | 1 +
 .../components/DocumentationTopic/DocumentationNav.spec.js   | 5 +++++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index ba2d56db8..de473c1d2 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -238,8 +238,4 @@ $doc-hero-icon-dimension: 250px;
   // apply extra bottom padding when shouldShowLanguageSwitcher
   padding-bottom: rem(65px);
 }
-
-.theme-dark :deep(a:not(.button-cta)) {
-  color: dark-color(figure-blue);
-}
 </style>
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 8340f12bf..ec74df448 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -54,6 +54,7 @@
     <template #tray="{ closeNav }">
       <NavMenuItems
         class="nav-menu-settings"
+        :previousSiblingChildren="1"
       >
         <LanguageToggle
           v-if="interfaceLanguage && (swiftPath || objcPath)"
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index 6670e82e3..c96434772 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -146,6 +146,11 @@ describe('DocumentationNav', () => {
     });
   });
 
+  it('provides the correct number of previous sibling children to `NavMenuItems`', async () => {
+    const menuItems = wrapper.find(NavMenuItems);
+    expect(menuItems.props()).toHaveProperty('previousSiblingChildren', 1);
+  });
+
   it('does not render a `LanguageToggle` when there is no swift nor objc path', () => {
     expect(wrapper.contains(LanguageToggle)).toBe(true);
     wrapper.setProps({ swiftPath: null, objcPath: null });

From 3c18396ebe24ee67df4ceb0764003fb88f327f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 10 Jan 2024 16:38:18 +0100
Subject: [PATCH 20/52] [rdar://116401230] refactor: move components inside
 Hero folder

---
 src/components/DocumentationTopic.vue                       | 6 +++---
 .../DocumentationTopic/{ => Hero}/DocumentationHero.vue     | 0
 src/components/DocumentationTopic/{ => Hero}/Hierarchy.vue  | 0
 .../{ => Hero}/HierarchyCollapsedItems.vue                  | 0
 .../DocumentationTopic/{ => Hero}/HierarchyItem.vue         | 0
 src/components/DocumentationTopic/{ => Hero}/Title.vue      | 0
 tests/unit/components/DocumentationTopic.spec.js            | 2 +-
 .../DocumentationTopic/{ => Hero}/DocumentationHero.spec.js | 2 +-
 .../DocumentationTopic/{ => Hero}/Hierarchy.spec.js         | 2 +-
 .../{ => Hero}/HierarchyCollapsedItems.spec.js              | 2 +-
 .../DocumentationTopic/{ => Hero}/HierarchyItem.spec.js     | 2 +-
 .../components/DocumentationTopic/{ => Hero}/Title.spec.js  | 2 +-
 12 files changed, 9 insertions(+), 9 deletions(-)
 rename src/components/DocumentationTopic/{ => Hero}/DocumentationHero.vue (100%)
 rename src/components/DocumentationTopic/{ => Hero}/Hierarchy.vue (100%)
 rename src/components/DocumentationTopic/{ => Hero}/HierarchyCollapsedItems.vue (100%)
 rename src/components/DocumentationTopic/{ => Hero}/HierarchyItem.vue (100%)
 rename src/components/DocumentationTopic/{ => Hero}/Title.vue (100%)
 rename tests/unit/components/DocumentationTopic/{ => Hero}/DocumentationHero.spec.js (98%)
 rename tests/unit/components/DocumentationTopic/{ => Hero}/Hierarchy.spec.js (99%)
 rename tests/unit/components/DocumentationTopic/{ => Hero}/HierarchyCollapsedItems.spec.js (96%)
 rename tests/unit/components/DocumentationTopic/{ => Hero}/HierarchyItem.spec.js (96%)
 rename tests/unit/components/DocumentationTopic/{ => Hero}/Title.spec.js (93%)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 07fb08b36..d5193d42c 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -181,7 +181,7 @@ import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
 import ViewMore from 'theme/components/DocumentationTopic/ViewMore.vue';
-import DocumentationHero from 'docc-render/components/DocumentationTopic/DocumentationHero.vue';
+import DocumentationHero from 'docc-render/components/DocumentationTopic/Hero/DocumentationHero.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
 import { TopicSectionsStyle } from 'docc-render/constants/TopicSectionsStyle';
 import OnThisPageNav from 'theme/components/OnThisPageNav.vue';
@@ -198,10 +198,10 @@ import Relationships from './DocumentationTopic/Relationships.vue';
 import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue';
 import Availability from './DocumentationTopic/Summary/Availability.vue';
 import SeeAlso from './DocumentationTopic/SeeAlso.vue';
-import Title from './DocumentationTopic/Title.vue';
+import Title from './DocumentationTopic/Hero/Title.vue';
 import Topics from './DocumentationTopic/Topics.vue';
 import OnThisPageStickyContainer from './DocumentationTopic/OnThisPageStickyContainer.vue';
-import Hierarchy from './DocumentationTopic/Hierarchy.vue';
+import Hierarchy from './DocumentationTopic/Hero/Hierarchy.vue';
 
 // size above which, the OnThisPage container is visible
 const ON_THIS_PAGE_CONTAINER_BREAKPOINT = 1050;
diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
similarity index 100%
rename from src/components/DocumentationTopic/DocumentationHero.vue
rename to src/components/DocumentationTopic/Hero/DocumentationHero.vue
diff --git a/src/components/DocumentationTopic/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
similarity index 100%
rename from src/components/DocumentationTopic/Hierarchy.vue
rename to src/components/DocumentationTopic/Hero/Hierarchy.vue
diff --git a/src/components/DocumentationTopic/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
similarity index 100%
rename from src/components/DocumentationTopic/HierarchyCollapsedItems.vue
rename to src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
diff --git a/src/components/DocumentationTopic/HierarchyItem.vue b/src/components/DocumentationTopic/Hero/HierarchyItem.vue
similarity index 100%
rename from src/components/DocumentationTopic/HierarchyItem.vue
rename to src/components/DocumentationTopic/Hero/HierarchyItem.vue
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Hero/Title.vue
similarity index 100%
rename from src/components/DocumentationTopic/Title.vue
rename to src/components/DocumentationTopic/Hero/Title.vue
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index ef4274445..f55240ba0 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -13,7 +13,7 @@ import DocumentationTopic from 'docc-render/components/DocumentationTopic.vue';
 import Language from 'docc-render/constants/Language';
 import InlinePlusCircleIcon from 'docc-render/components/Icons/InlinePlusCircleIcon.vue';
 import { TopicTypes } from '@/constants/TopicTypes';
-import DocumentationHero from '@/components/DocumentationTopic/DocumentationHero.vue';
+import DocumentationHero from '@/components/DocumentationTopic/Hero/DocumentationHero.vue';
 import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import OnThisPageNav from '@/components/OnThisPageNav.vue';
 import OnThisPageStickyContainer
diff --git a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js b/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
similarity index 98%
rename from tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
rename to tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
index 1be0287a2..531aef78c 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
@@ -8,7 +8,7 @@
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
 
-import DocumentationHero from '@/components/DocumentationTopic/DocumentationHero.vue';
+import DocumentationHero from '@/components/DocumentationTopic/Hero/DocumentationHero.vue';
 import { shallowMount } from '@vue/test-utils';
 import { TopicTypes, TopicTypeAliases } from '@/constants/TopicTypes';
 import TopicTypeIcon from 'docc-render/components/TopicTypeIcon.vue';
diff --git a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
similarity index 99%
rename from tests/unit/components/DocumentationTopic/Hierarchy.spec.js
rename to tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index 3f71974df..e88a4b4e8 100644
--- a/tests/unit/components/DocumentationTopic/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -9,7 +9,7 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import Hierarchy from 'docc-render/components/DocumentationTopic/Hierarchy.vue';
+import Hierarchy from 'docc-render/components/DocumentationTopic/Hero/Hierarchy.vue';
 import Badge from 'docc-render/components/Badge.vue';
 import Vue from 'vue';
 
diff --git a/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
similarity index 96%
rename from tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
rename to tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
index 059d7d11d..388c037b4 100644
--- a/tests/unit/components/DocumentationTopic/HierarchyCollapsedItems.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
@@ -10,7 +10,7 @@
 
 import { RouterLinkStub, shallowMount } from '@vue/test-utils';
 import HierarchyCollapsedItems
-  from 'docc-render/components/DocumentationTopic/HierarchyCollapsedItems.vue';
+  from 'docc-render/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue';
 import EllipsisIcon from 'theme/components/Icons/EllipsisIcon.vue';
 
 const mocks = { $route: {} };
diff --git a/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js b/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
similarity index 96%
rename from tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
rename to tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
index 197e38067..b3f36475d 100644
--- a/tests/unit/components/DocumentationTopic/HierarchyItem.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
@@ -10,7 +10,7 @@
 
 import { RouterLinkStub, shallowMount } from '@vue/test-utils';
 import HierarchyItem
-  from 'docc-render/components/DocumentationTopic/HierarchyItem.vue';
+  from 'docc-render/components/DocumentationTopic/Hero/HierarchyItem.vue';
 import NavMenuItemBase from 'docc-render/components/NavMenuItemBase.vue';
 
 const mountWithProps = props => shallowMount(HierarchyItem, {
diff --git a/tests/unit/components/DocumentationTopic/Title.spec.js b/tests/unit/components/DocumentationTopic/Hero/Title.spec.js
similarity index 93%
rename from tests/unit/components/DocumentationTopic/Title.spec.js
rename to tests/unit/components/DocumentationTopic/Hero/Title.spec.js
index 756cfa59b..c65b50310 100644
--- a/tests/unit/components/DocumentationTopic/Title.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Title.spec.js
@@ -9,7 +9,7 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import Title from 'docc-render/components/DocumentationTopic/Title.vue';
+import Title from 'docc-render/components/DocumentationTopic/Hero/Title.vue';
 
 describe('Title', () => {
   let wrapper;

From 590efcb11bf8c5126d4eaaa88788e2a8a8fe644a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 12 Jan 2024 20:01:51 +0100
Subject: [PATCH 21/52] [rdar://116401230] fix: hierarchy styles

---
 .../DocumentationTopic/Hero/DocumentationHero.vue    |  2 +-
 src/components/DocumentationTopic/Hero/Hierarchy.vue | 12 +++---------
 src/styles/core/typography/_font-styles.scss         |  3 +++
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/DocumentationTopic/Hero/DocumentationHero.vue b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
index de473c1d2..451658621 100644
--- a/src/components/DocumentationTopic/Hero/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
@@ -197,7 +197,7 @@ $doc-hero-icon-dimension: 250px;
 
   &__content:not(.minimized-hero) {
     padding-top: rem(40px);
-    padding-bottom: 40px;
+    padding-bottom: rem(40px);
     position: relative;
     z-index: 1;
     @include dynamic-content-container;
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 2d780a484..a69b7e195 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -193,9 +193,10 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .hierarchy {
+  @include font-styles(hierarchy);
   justify-content: flex-start;
   align-items: flex-start;
-  margin: 0;
+  margin: 0 0 rem(20px) 0;
   min-width: 0;
   @include nav-in-breakpoint() {
     margin: 0;
@@ -210,17 +211,10 @@ export default {
 // Applies colors to any link inside the nav
 :deep(.nav-menu-link) {
   color: var(--color-nav-link-color);
-
-  &:hover {
-    color: var(--color-nav-link-color-hover);
-  }
+  @include underline-text;
 
   @include nav-dark {
     color: var(--color-nav-dark-link-color);
-
-    &:hover {
-      color: var(--color-nav-dark-link-color-hover);
-    }
   }
 }
 </style>
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index ad4cca73e..9c4c9b26e 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -204,6 +204,9 @@ $font-styles: (
   card-eyebrow-small: (
     large: 14_18_semibold,
   ),
+  hierarchy: (
+    large: 14_18_semibold,
+  ),
   card-eyebrow-large: (
     large: 17_21_semibold,
     medium: 14_18_semibold,

From 606131ac8b3e13e5623b148477fcb39209df595c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 18 Jan 2024 15:57:53 +0100
Subject: [PATCH 22/52] [rdar://116401230] fix: hierarchy colors

---
 src/components/DocumentationTopic/Hero/Hierarchy.vue | 6 +-----
 src/styles/core/_typography.scss                     | 2 --
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index a69b7e195..e5009a360 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -210,11 +210,7 @@ export default {
 
 // Applies colors to any link inside the nav
 :deep(.nav-menu-link) {
-  color: var(--color-nav-link-color);
+  color: inherit;
   @include underline-text;
-
-  @include nav-dark {
-    color: var(--color-nav-dark-link-color);
-  }
 }
 </style>
diff --git a/src/styles/core/_typography.scss b/src/styles/core/_typography.scss
index 10a434b41..bdcad9956 100644
--- a/src/styles/core/_typography.scss
+++ b/src/styles/core/_typography.scss
@@ -13,8 +13,6 @@ $body-font-size: 17px;
 
 @mixin underline-text() {
   text-decoration: underline;
-  // prevent underscore characters to be covered by the underline style
-  text-underline-position: under;
 }
 
 @import "typography/font-style-utils";

From b84871eadce301554a8a3095420b94a600a41743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 22 Jan 2024 16:15:13 +0100
Subject: [PATCH 23/52] [rdar://116401230] chore: delete rootLink from
 hierarchy

---
 src/components/DocumentationTopic.vue         |  5 ----
 .../DocumentationTopic/Hero/Hierarchy.vue     | 24 ++-------------
 src/views/DocumentationTopic.vue              |  1 -
 .../components/DocumentationTopic.spec.js     |  1 -
 .../DocumentationTopic/Hero/Hierarchy.spec.js | 29 +++----------------
 tests/unit/views/DocumentationTopic.spec.js   |  8 -----
 6 files changed, 6 insertions(+), 62 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index d5193d42c..1e9c9aa03 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -37,7 +37,6 @@
           :parentTopicIdentifiers="hierarchyItems"
           :currentTopicTags="currentTopicTags"
           :references="references"
-          :rootLink="rootLink"
         />
         <LanguageSwitcher
           v-if="shouldShowLanguageSwitcher"
@@ -407,10 +406,6 @@ export default {
       type: Array,
       required: false,
     },
-    rootLink: {
-      type: Object,
-      required: false,
-    },
   },
   provide() {
     // NOTE: this is not reactive: if this.identifier change, the provided value
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index e5009a360..28bdfb99a 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -14,19 +14,7 @@
     :class="{ 'has-badge': hasBadge }"
     class="hierarchy"
   >
-    <slot
-      name="title"
-      v-bind="{ rootLink }"
-    >
-      <HierarchyItem
-        v-if="rootLink"
-        :url="rootLink"
-      >
-        {{ $t('documentation.title') }}
-      </HierarchyItem>
-      <span v-else>{{ $t('documentation.title') }}</span>
-    </slot>
-    <HierarchyItem
+     <HierarchyItem
       v-if="root"
       :key="root.title"
       class="root-hierarchy"
@@ -132,10 +120,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    rootLink: {
-      type: Object,
-      required: false,
-    },
   },
   computed: {
     windowWidth: ({ store }) => store.state.contentWidth,
@@ -150,11 +134,7 @@ export default {
         return all;
       }, []);
     },
-    /**
-     * Extract the root item from the parentTopics.
-     * Works only if above 1000px windowWidth
-     */
-    root: ({ parentTopics, windowWidth }) => (windowWidth <= 1000 ? null : parentTopics[0]),
+    root: ({ parentTopics }) => parentTopics[0],
     firstItemSlice: ({ root }) => (root ? 1 : 0),
     /**
      * Figure out how many items we can show, after the collapsed items,
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index cd05b6f53..32a4f336e 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -83,7 +83,6 @@
           :enableMinimized="enableMinimized"
           :currentTopicTags="topicProps.tags"
           :hierarchyItems="hierarchyItems"
-          :rootLink="rootLink"
         />
       </component>
     </template>
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index f55240ba0..997d89a79 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -334,7 +334,6 @@ describe('DocumentationTopic', () => {
       isSymbolDeprecated: false,
       currentTopicTags: propsData.currentTopicTags,
       references: propsData.references,
-      rootLink: propsData.rootLink,
     });
   });
 
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index e88a4b4e8..237aa442f 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -280,10 +280,9 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          class: 'root-hierarchy',
           url: references[parentTopicIdentifiers[0]].url,
-          iscollapsed: 'true',
         });
-        expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
@@ -309,10 +308,6 @@ describe('Hierarchy', () => {
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
         expect(collapsedItems.exists()).toBe(true);
         expect(collapsedItems.props('topics')).toEqual([
-          {
-            title: foo.title,
-            url: foo.url,
-          },
           {
             title: bar.title,
             url: bar.url,
@@ -334,10 +329,9 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          class: 'root-hierarchy',
           url: references[parentTopicIdentifiers[0]].url,
-          iscollapsed: 'true',
         });
-        expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 4, as 0 can live outside below 800
         expect(items.at(1).attributes()).toEqual({
@@ -363,10 +357,6 @@ describe('Hierarchy', () => {
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
         expect(collapsedItems.exists()).toBe(true);
         expect(collapsedItems.props('topics')).toEqual([
-          {
-            title: foo.title,
-            url: foo.url,
-          },
           {
             title: bar.title,
             url: bar.url,
@@ -501,11 +491,9 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          class: 'root-hierarchy',
           url: references[parentTopicIdentifiers[0]].url,
-          iscollapsed: 'true',
         });
-        expect(items.at(0).classes()).not.toContain('root-hierarchy');
-
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
@@ -530,10 +518,6 @@ describe('Hierarchy', () => {
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
         expect(collapsedItems.exists()).toBe(true);
         expect(collapsedItems.props('topics')).toEqual([
-          {
-            title: foo.title,
-            url: foo.url,
-          },
           {
             title: bar.title,
             url: bar.url,
@@ -563,10 +547,9 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
+          class: 'root-hierarchy',
           url: references[parentTopicIdentifiers[0]].url,
-          iscollapsed: 'true',
         });
-        expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
@@ -592,10 +575,6 @@ describe('Hierarchy', () => {
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
         expect(collapsedItems.exists()).toBe(true);
         expect(collapsedItems.props('topics')).toEqual([
-          {
-            title: foo.title,
-            url: foo.url,
-          },
           {
             title: bar.title,
             url: bar.url,
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index 00da7368c..b3d491a53 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -666,7 +666,6 @@ describe('DocumentationTopic', () => {
       topicSectionsStyle: TopicSectionsStyle.list, // default value
       disableHeroBackground: false,
       hierarchyItems: topicData.hierarchy.paths[0],
-      rootLink: null,
       currentTopicTags: [],
     });
   });
@@ -710,13 +709,6 @@ describe('DocumentationTopic', () => {
       topicSectionsStyle: TopicSectionsStyle.list, // default value
       disableHeroBackground: false,
       hierarchyItems: topicData.hierarchy.paths[0],
-      rootLink: {
-        path: references[TechnologiesRootIdentifier].url,
-        query: {
-          // preservers query params
-          changes: 'latest_minor',
-        },
-      },
       currentTopicTags: [],
     });
   });

From 27b98f3d807a047095c534759b6503271cd691de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 25 Jan 2024 17:11:35 +0100
Subject: [PATCH 24/52] [rdar://116401230] fix: only show Hierarchy in hero
 when enableMinimized is false

---
 src/components/DocumentationTopic.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 1e9c9aa03..e8a867e1a 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,6 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
+          v-if="!enableMinimized"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"

From f7bed750897cc5cc90e0d90e6c3d112eecd4728e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 26 Jan 2024 18:44:00 +0100
Subject: [PATCH 25/52] [rdar://116401230] feat: mobile viewport

---
 .../DocumentationTopic/DocumentationNav.vue   |  23 +--
 src/components/NavBase.vue                    |   2 +-
 src/components/Navigator.vue                  |   3 +
 .../Navigator/BaseNavigatorCard.vue           | 147 ++++--------------
 src/components/Navigator/NavigatorCard.vue    |  77 +++++++--
 src/styles/core/typography/_font-styles.scss  |   1 +
 src/views/DocumentationTopic.vue              |  21 ++-
 .../DocumentationNav.spec.js                  |  35 +----
 .../Navigator/BaseNavigatorCard.spec.js       |  30 ----
 .../Navigator/NavigatorCard.spec.js           |  22 ++-
 tests/unit/views/DocumentationTopic.spec.js   |  68 ++++++--
 11 files changed, 205 insertions(+), 224 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index ec74df448..86723c837 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -37,19 +37,7 @@
       </div>
     </template>
     <template #default>
-      <slot
-        name="title"
-        v-bind="{ rootLink, linkClass: 'nav-title-link', inactiveClass: 'inactive' }"
-      >
-        <router-link
-          v-if="rootLink"
-          :to="rootLink"
-          class="nav-title-link"
-        >
-          {{ $t('documentation.title') }}
-        </router-link>
-        <span v-else class="nav-title-link inactive">{{ $t('documentation.title') }}</span>
-      </slot>
+      <slot name="title" />
     </template>
     <template #tray="{ closeNav }">
       <NavMenuItems
@@ -127,10 +115,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    rootLink: {
-      type: Object,
-      required: false,
-    },
   },
   computed: {
     baseNavOpenSidenavButtonId: () => baseNavOpenSidenavButtonId,
@@ -213,11 +197,6 @@ $sidenav-icon-padding-size: 5px;
 
 .documentation-nav {
   :deep() {
-    // normalize the Title font with menu items
-    .nav-title-link.inactive {
-      height: auto;
-    }
-
     .nav-title {
       @include font-styles(nav-title-large);
     }
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index 9a5c790d1..4df837600 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -684,10 +684,10 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
     padding-top: 0;
     height: $nav-height-small;
     width: 90%;
+    padding-left: 0;
   }
 
   :deep(span) {
-    height: 100%;
     line-height: initial;
   }
 
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index baa1f3126..f07d8d0d9 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -28,6 +28,9 @@
       @close="$emit('close')"
     >
       <template #filter><slot name="filter" /></template>
+      <template #navigator-head>
+        <slot name="navigator-head"/>
+      </template>
     </NavigatorCard>
     <LoadingNavigatorCard
       v-else
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index a49e55913..52a47bc01 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -13,28 +13,17 @@
     <div class="navigator-card-full-height">
       <div class="navigator-card-inner">
         <div class="head-wrapper">
+          <slot name="above-navigator-head"/>
           <div class="head-inner">
+            <slot name="navigator-head"/>
             <button
               :id="SIDEBAR_HIDE_BUTTON_ID"
               class="close-card"
               :aria-label="$t('navigator.close-navigator')"
               @click="handleHideClick"
             >
-              <SidenavIcon class="icon-inline close-icon" />
+              <InlineCloseIcon class="icon-inline close-icon" />
             </button>
-            <slot name="above-navigator-head"/>
-            <Reference
-              :id="INDEX_ROOT_KEY"
-              :url="technologyPath"
-              :class="{ 'hide-on-large': hideNavigatorHeadOnLarge }"
-              class="navigator-head"
-              @click.alt.native.prevent="$emit('head-click-alt')"
-            >
-              <h2 class="card-link">
-                {{ technology }}
-              </h2>
-              <Badge v-if="isTechnologyBeta" variant="beta" />
-            </Reference>
           </div>
         </div>
         <slot name="body" className="card-body"/>
@@ -45,30 +34,21 @@
 
 <script>
 import {
-  INDEX_ROOT_KEY,
   SIDEBAR_HIDE_BUTTON_ID,
 } from 'docc-render/constants/sidebar';
-import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
-import Reference from 'docc-render/components/ContentNode/Reference.vue';
-import Badge from 'docc-render/components/Badge.vue';
+import InlineCloseIcon from 'theme/components/Icons/InlineCloseIcon.vue';
 import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
 
 export default {
   name: 'BaseNavigatorCard',
   components: {
-    SidenavIcon,
-    Reference,
-    Badge,
+    InlineCloseIcon,
   },
   props: {
     technologyPath: {
       type: String,
       default: '',
     },
-    technology: {
-      type: String,
-      required: true,
-    },
     isTechnologyBeta: {
       type: Boolean,
       default: false,
@@ -81,7 +61,6 @@ export default {
   data() {
     return {
       SIDEBAR_HIDE_BUTTON_ID,
-      INDEX_ROOT_KEY,
     };
   },
   methods: {
@@ -100,9 +79,7 @@ export default {
 <style scoped lang='scss'>
 @import 'docc-render/styles/_core.scss';
 
-$navigator-card-vertical-spacing: 8px !default;
-$navigator-head-background: var(--color-fill) !default;
-$navigator-head-background-active: var(--color-fill-gray-quaternary) !default;
+$navigator-card-vertical-spacing: 10px !default;
 $close-icon-size: 19px;
 $close-icon-padding: 5px;
 
@@ -114,9 +91,9 @@ $close-icon-padding: 5px;
   display: flex;
   flex-direction: column;
   min-height: 0;
-  height: calc(var(--app-height) - var(--nav-height, 0px));
+  height: calc(var(--app-height) - $nav-height);
   position: sticky;
-  top: var(--nav-height, 0px);
+  top: $nav-height;
 
   @include breakpoint(medium, nav) {
     height: 100%;
@@ -130,113 +107,44 @@ $close-icon-padding: 5px;
   }
 
   .head-inner {
-    padding-top: $navigator-card-vertical-spacing;
-    display: flex;
-    flex-direction: column;
-
-    @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
-    @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
+    display: none;
+    width: 100%;
+    @include font-styles(nav-title-large);
+    height: $nav-height-small;
 
     @include breakpoint(medium, nav) {
-      justify-content: center;
+      display: flex;
+      justify-content: flex-end;
       align-items: center;
     }
-  }
 
-  .head-wrapper {
-    position: relative;
-    flex: 1 0 auto;
+    > a {
+      color: var(--color-figure-gray);
+      width: 100%;
+    }
   }
 
-  .navigator-head {
-    --navigator-head-padding-right: calc(var(--card-horizontal-spacing) * 2 + #{$close-icon-size});
-    padding: calc(var(--card-horizontal-spacing) / 3) var(--card-horizontal-spacing);
-    background: $navigator-head-background;
-    border-radius: $nano-border-radius;
+  .head-wrapper {
+    @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
+    @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
     display: flex;
-    align-items: center;
-    white-space: nowrap;
-
-    .card-link {
-      color: var(--color-text);
-      @include font-styles(label-reduced);
-      font-weight: $font-weight-semibold;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .badge {
-      margin-top: 0;
-    }
-
-    &.router-link-exact-active {
-      background: $navigator-head-background-active;
-      .card-link {
-        font-weight: $font-weight-bold;
-      }
-    }
-
-    &:hover {
-      background: var(--color-navigator-item-hover);
-      text-decoration: none;
-    }
-
-    @include breakpoint(medium, nav) {
-      justify-content: center;
-      --navigator-head-padding-right: var(--card-horizontal-spacing);
-    }
-
-    @include breakpoint(small, nav) {
-      height: calc(#{$nav-height-small} - #{$navigator-card-vertical-spacing * 2});
-      padding: 0 $nav-card-horizontal-spacing-large;
-    }
-
-    @include breakpoints-from(large, nav) {
-      &.hide-on-large {
-        display: none;
-      }
-    }
+    justify-content: space-between;
+    flex: 1 0 auto;
   }
 }
 
 .close-card {
-  display: none;
-  position: absolute;
-  z-index: 1;
-
-  @include breakpoint(medium, nav) {
-    display: flex;
-    align-items: center;
-    top: $navigator-card-vertical-spacing;
-    left: 0;
-    height: calc(100% - #{$navigator-card-vertical-spacing});
-    @include safe-area-left-set(margin-left, $nav-padding);
-  }
 
   .close-icon {
     width: $close-icon-size;
     height: $close-icon-size;
   }
-
-  @include breakpoints-from(large, nav) {
-    &:hover {
-      border-radius: $nano-border-radius;
-      background: var(--color-fill-gray-quaternary);
-    }
-    // when the navigator is closed on desktop,
-    // move the button so it looks like its going to the nav
-    .sidebar-hidden & {
-      transition: transform $adjustable-sidebar-hide-transition-duration ease-in 0s,
-      visibility 0s linear $adjustable-sidebar-hide-transition-duration;
-      visibility: hidden;
-      // 2x the nav padding, 1px border, and the size of the icon
-      transform: translateX(rem($close-icon-size + 1px) + $nav-padding * 2);
-    }
-  }
 }
 
 :deep() {
   .card-body {
+    display: flex;
+    flex-direction: column;
     // right padding is added by the items, so visually the scroller is stuck to the side
     padding-right: 0;
     flex: 1 1 auto;
@@ -252,5 +160,10 @@ $close-icon-padding: 5px;
   display: flex;
   flex-flow: column;
   height: 100%;
+  padding-top: $navigator-card-vertical-spacing;
+
+  @include breakpoint(medium, nav) {
+    padding-top: 0;
+  }
 }
 </style>
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 01793ae11..8f2f1e84a 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -13,16 +13,17 @@
     :class="{ 'filter-on-top': renderFilterOnTop }"
     :hideNavigatorHeadOnLarge="hideNavigatorHeadOnLarge"
     v-bind="{
-      technology,
       isTechnologyBeta,
       technologyPath,
     }"
     @close="$emit('close')"
-    @head-click-alt="toggleAllNodes"
   >
     <template #above-navigator-head>
       <slot name="above-navigator-head"/>
     </template>
+    <template #navigator-head>
+      <slot name="navigator-head"/>
+    </template>
     <template #body="{ className }">
       <slot name="post-head" />
       <div
@@ -32,6 +33,18 @@
         @keydown.up.exact.capture.prevent="focusPrev"
         @keydown.down.exact.capture.prevent="focusNext"
       >
+        <Reference
+          v-if="technology"
+          :id="INDEX_ROOT_KEY"
+          :url="technologyPath"
+          class="technology-title"
+          @click.alt.native.prevent="toggleAllNodes"
+        >
+          <h2 class="card-link">
+            {{ technology }}
+          </h2>
+          <Badge v-if="isTechnologyBeta" variant="beta" />
+        </Reference>
         <DynamicScroller
           v-show="hasNodes"
           :id="scrollLockID"
@@ -78,9 +91,7 @@
           {{ politeAriaLive }}
         </div>
         <div aria-live="assertive" class="no-items-wrapper">
-          <p class="no-items">
-            {{ $t(assertiveAriaLive) }}
-          </p>
+          <p class="no-items">{{ $t(assertiveAriaLive) }}</p>
         </div>
       </div>
       <div class="filter-wrapper" v-if="!errorFetching">
@@ -132,6 +143,8 @@ import {
   getParents,
   getSiblings,
 } from 'docc-render/utils/navigatorData';
+import Reference from 'docc-render/components/ContentNode/Reference.vue';
+import Badge from 'docc-render/components/Badge.vue';
 
 const STORAGE_KEY = 'navigator.state';
 
@@ -196,6 +209,8 @@ export default {
     DynamicScroller,
     DynamicScrollerItem,
     BaseNavigatorCard,
+    Reference,
+    Badge,
   },
   props: {
     ...BaseNavigatorCard.props,
@@ -203,6 +218,10 @@ export default {
       type: Array,
       required: true,
     },
+    technology: {
+      type: String,
+      required: false,
+    },
     activePath: {
       type: Array,
       required: true,
@@ -262,6 +281,7 @@ export default {
       lastFocusTarget: null,
       allNodesToggled: false,
       translatableTags: [HIDE_DEPRECATED],
+      INDEX_ROOT_KEY,
     };
   },
   computed: {
@@ -1130,7 +1150,11 @@ export default {
 
 // unfortunately we need to hard-code the filter height
 $filter-height: 71px;
-$filter-height-small: 60px;
+$filter-height-small: 50px;
+$close-icon-size: 19px;
+$technology-title-background: var(--color-fill) !default;
+$technology-title-background-active: var(--color-fill-gray-quaternary) !default;
+$navigator-card-vertical-spacing: 8px !default;
 
 .navigator-card {
   &.filter-on-top {
@@ -1149,7 +1173,7 @@ $filter-height-small: 60px;
   overflow: hidden;
   color: var(--color-figure-gray-tertiary);
 
-  .no-items {
+  .no-items:not(:empty) {
     @include font-styles(body-reduced);
     padding: var(--card-vertical-spacing) var(--card-horizontal-spacing);
     // make sure the text does not get weirdly cut
@@ -1158,6 +1182,42 @@ $filter-height-small: 60px;
   }
 }
 
+.technology-title {
+  @include safe-area-left-set(margin-left, var(--card-horizontal-spacing));
+  @include safe-area-right-set(margin-right, var(--card-horizontal-spacing));
+  padding: $navigator-card-vertical-spacing $nav-card-horizontal-spacing;
+  padding-left: $nav-card-horizontal-spacing * 2;
+  background: $technology-title-background;
+  border-radius: $nano-border-radius;
+  display: flex;
+  white-space: nowrap;
+
+  @include breakpoint(small, nav) {
+    margin-top: 0;
+  }
+
+  .card-link {
+    color: var(--color-text);
+    @include font-styles(label-reduced);
+    font-weight: $font-weight-semibold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .badge {
+    margin-top: 0;
+  }
+
+  &.router-link-exact-active {
+    background: $technology-title-background-active;
+  }
+
+  &:hover {
+    background: var(--color-navigator-item-hover);
+    text-decoration: none;
+  }
+}
+
 .navigator-filter {
   box-sizing: border-box;
   padding: 15px var(--nav-filter-horizontal-padding);
@@ -1177,7 +1237,7 @@ $filter-height-small: 60px;
   @include breakpoint(medium, nav) {
     --nav-filter-horizontal-padding: 20px;
     border: none;
-    padding-top: 10px;
+    padding-top: 0px;
     padding-bottom: 10px;
     height: $filter-height-small;
   }
@@ -1207,7 +1267,6 @@ $filter-height-small: 60px;
 .scroller {
   height: 100%;
   box-sizing: border-box;
-  padding: var(--card-vertical-spacing) 0;
   padding-bottom: calc(var(--top-offset, 0px) + var(--card-vertical-spacing));
   transition: padding-bottom ease-in 0.15s;
 
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 9c4c9b26e..fcaf6adb4 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -186,6 +186,7 @@ $font-styles: (
   ),
   nav-title-large: (
     large: (21_25_semibold, nav),
+    small: (nav_17_17_semibold, nav),
   ),
   nav-title-compact: (
     small: (nav_17_17_semibold, nav)
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index 32a4f336e..f97264a56 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -21,9 +21,18 @@
         :isSymbolBeta="isSymbolBeta"
         :displaySidenav="enableNavigator"
         :sidenavHiddenOnLarge="sidenavHiddenOnLarge"
-        :rootLink="rootLink"
         @toggle-sidenav="handleToggleSidenav"
-      />
+      >
+        <template #title>
+          <component
+            :is="rootLink ? 'router-link' : 'span'"
+            :to="rootLink"
+            class="nav-title-link"
+          >
+            {{ $t('documentation.title') }}
+          </component>
+        </template>
+      </Nav>
       <component
         :is="enableNavigator ? 'AdjustableSidebarWidth' : 'StaticContentWidth'"
         v-bind="sidebarProps"
@@ -65,6 +74,14 @@
                     <template v-if="enableQuickNavigation" #filter>
                       <QuickNavigationButton @click.native="openQuickNavigationModal" />
                     </template>
+                    <template #navigator-head>
+                      <component
+                        :is="rootLink ? 'router-link' : 'span'"
+                        :to="rootLink"
+                      >
+                        {{ $t('documentation.title') }}
+                      </component>
+                    </template>
                   </Navigator>
                 </transition>
               </div>
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index c96434772..8e0ac4d33 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -33,11 +33,6 @@ const stubs = {
   NavBase,
 };
 
-const rootLink = {
-  path: '/documentation/technologies',
-  query: {},
-};
-
 const mocks = {
   $router: {
     push: jest.fn(),
@@ -60,7 +55,6 @@ describe('DocumentationNav', () => {
     swiftPath: 'documentation/foo',
     objcPath: 'documentation/bar',
     displaySidenav: true,
-    rootLink: null,
   };
 
   beforeEach(() => {
@@ -102,24 +96,6 @@ describe('DocumentationNav', () => {
     expect(nav.props()).toHaveProperty('hasNoBorder', true);
   });
 
-  it('renders an inactive link, when no technologies root paths', () => {
-    const title = wrapper.find('.nav-title-link');
-    expect(title.classes()).toContain('inactive');
-    expect(title.is('span')).toBe(true);
-    expect(title.text()).toBe('documentation.title');
-  });
-
-  it('renders the title "Documentation" link, when there is a Technology root', () => {
-    wrapper.setProps({
-      rootLink,
-    });
-    const title = wrapper.find('.nav-title-link');
-    expect(title.exists()).toBe(true);
-    expect(title.is(RouterLinkStub)).toBe(true);
-    expect(title.props('to')).toEqual(rootLink);
-    expect(title.text()).toBe('documentation.title');
-  });
-
   it('exposes a `tray-after` scoped slot', () => {
     const fooBar = 'Foo bar';
     wrapper = shallowMount(DocumentationNav, {
@@ -184,23 +160,16 @@ describe('DocumentationNav', () => {
   });
 
   it('exposes a `title` slot', () => {
-    let slotProps = null;
     const fooBar = 'Foo bar';
     wrapper = shallowMount(DocumentationNav, {
       stubs,
       propsData,
       mocks,
-      scopedSlots: {
-        title: (props) => {
-          slotProps = props;
-          return fooBar;
-        },
+      slots: {
+        title: fooBar,
       },
     });
     expect(wrapper.text()).toContain(fooBar);
-    expect(slotProps)
-      .toEqual({ inactiveClass: 'inactive', linkClass: 'nav-title-link', rootLink: null });
-    expect(wrapper.find('.nav-title-link').exists()).toBe(false);
   });
 
   it('renders a sidenav toggle, emitting `@toggle-sidenav` event', async () => {
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index 5503aa64a..c218bd974 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -13,8 +13,6 @@ import { shallowMount } from '@vue/test-utils';
 import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
 import { flushPromises } from '../../../../test-utils';
 
-const { Reference, Badge } = BaseNavigatorCard.components;
-
 const defaultProps = {
   hideNavigatorHeadOnLarge: false,
   technology: 'Technology',
@@ -54,34 +52,6 @@ describe('BaseNavigatorCard', () => {
     expect(document.activeElement).toEqual(btn);
   });
 
-  it('renders a Beta badge in the header', async () => {
-    const wrapper = createWrapper({
-      propsData: {
-        isTechnologyBeta: true,
-      },
-    });
-    await flushPromises();
-    expect(wrapper.find('.navigator-head').find(Badge).props()).toMatchObject({
-      variant: 'beta',
-    });
-  });
-
-  it('hides navigator head on large viewport, if `hideNavigatorHeadOnLarge` is `true`', async () => {
-    const wrapper = createWrapper({
-      propsData: {
-        hideNavigatorHeadOnLarge: true,
-      },
-    });
-    expect(wrapper.find('.navigator-head').classes()).toContain('hide-on-large');
-  });
-
-  it('renders a card-link with the technology name', () => {
-    const wrapper = createWrapper();
-    expect(wrapper.find(Reference).props('url')).toEqual(defaultProps.technologyPath);
-    expect(wrapper.find('.card-link').text()).toBe(defaultProps.technology);
-    expect(wrapper.find('.card-link').is('h2')).toBe(true);
-  });
-
   it('exposes a #body slot', () => {
     const wrapper = createWrapper({
       scopedSlots: {
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 48645c4bb..7fd916e05 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -43,6 +43,8 @@ const {
   HIDE_DEPRECATED,
 } = NavigatorCard.constants;
 
+const { Reference, Badge } = NavigatorCard.components;
+
 const DynamicScrollerStub = {
   props: DynamicScroller.props,
   template: '<div class="vue-recycle-scroller-stub"><template v-for="(item, index) in items"><slot v-bind="{ item, index, active: false }" /></template></div>',
@@ -339,6 +341,24 @@ describe('NavigatorCard', () => {
     expect(wrapper.vm.focusedIndex).toBe(1);
   });
 
+  it('renders a card-link with the technology name', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(Reference).props('url')).toEqual(defaultProps.technologyPath);
+    expect(wrapper.find('.card-link').text()).toBe(defaultProps.technology);
+    expect(wrapper.find('.card-link').is('h2')).toBe(true);
+  });
+
+  it('renders a Beta badge in the technology title', async () => {
+    const wrapper = createWrapper();
+    wrapper.setProps({
+      isTechnologyBeta: true,
+    });
+    await flushPromises();
+    expect(wrapper.find('.technology-title').find(Badge).props()).toMatchObject({
+      variant: 'beta',
+    });
+  });
+
   it('focus the first item if there is no active item', async () => {
     const wrapper = createWrapper();
     await flushPromises();
@@ -423,7 +443,7 @@ describe('NavigatorCard', () => {
     // assert initial items are rendered
     expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(4);
 
-    const navHead = wrapper.find('.navigator-head');
+    const navHead = wrapper.find('.technology-title');
 
     // open all children symbols
     navHead.trigger('click', { altKey: true });
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index b3d491a53..f69d80669 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -9,7 +9,7 @@
 */
 
 import * as dataUtils from 'docc-render/utils/data';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import DocumentationTopic from 'docc-render/views/DocumentationTopic.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
@@ -61,6 +61,21 @@ const {
 } = DocumentationTopic.components;
 const { NAVIGATOR_HIDDEN_ON_LARGE_KEY } = DocumentationTopic.constants;
 
+const rootLink = {
+  path: '/documentation/technologies',
+  query: {
+    changes: 'latest_minor',
+  },
+};
+
+const TechnologiesRootIdentifier = 'topic://technologies';
+
+const references = {
+  [TechnologiesRootIdentifier]: { kind: 'technologies', url: '/documentation/technologies' },
+  'topic://foo': { title: 'FooTechnology', url: '/documentation/foo' },
+  'topic://bar': { title: 'BarTechnology', url: '/documentation/bar' },
+};
+
 const mocks = {
   $bridge: {
     on: jest.fn(),
@@ -527,7 +542,6 @@ describe('DocumentationTopic', () => {
       objcPath: topicData.variants[0].paths[0],
       swiftPath: topicData.variants[1].paths[0],
       sidenavHiddenOnLarge: false,
-      rootLink: null,
     });
     expect(nav.attributes()).toMatchObject({
       interfacelanguage: 'swift',
@@ -670,15 +684,51 @@ describe('DocumentationTopic', () => {
     });
   });
 
-  it('renders a `Topic` with `topicData` without the first hierarchy item if there is root link', () => {
-    const TechnologiesRootIdentifier = 'topic://technologies';
+  it('renders an inactive link, when no technologies root paths', () => {
+    wrapper = createWrapper({
+      stubs: {
+        ...stubs,
+        Nav: DocumentationNav,
+        NavBase,
+      },
+    });
 
-    const references = {
-      [TechnologiesRootIdentifier]: { kind: 'technologies', url: '/documentation/technologies' },
-      'topic://foo': { title: 'FooTechnology', url: '/documentation/foo' },
-      'topic://bar': { title: 'BarTechnology', url: '/documentation/bar' },
-    };
+    wrapper.setData({ topicData });
 
+    const title = wrapper.find('span.nav-title-link');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('documentation.title');
+  });
+
+  it('renders the title "Documentation" link, if there is root link', () => {
+    wrapper = createWrapper({
+      stubs: {
+        ...stubs,
+        Nav: DocumentationNav,
+        NavBase,
+        'router-link': RouterLinkStub,
+      },
+    });
+
+    wrapper.setData({
+      topicData: {
+        ...topicData,
+        hierarchy: {
+          paths: [
+            [TechnologiesRootIdentifier, ...topicData.hierarchy.paths[0]],
+          ],
+        },
+        references,
+      },
+    });
+
+    const title = wrapper.find(RouterLinkStub);
+    expect(title.exists()).toBe(true);
+    expect(title.props('to')).toEqual(rootLink);
+    expect(title.text()).toBe('documentation.title');
+  });
+
+  it('renders a `Topic` with `topicData` without the first hierarchy item if there is root link', () => {
     wrapper.setData({
       topicData: {
         ...topicData,

From 7c68aede10c493fe64260c5d06c13fe3ce6c80ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 26 Jan 2024 20:44:13 +0100
Subject: [PATCH 26/52] [rdar://116401230] fix: adjust safe-area in mobile

---
 src/components/DocumentationTopic/DocumentationNav.vue | 10 +++++-----
 src/components/NavBase.vue                             |  4 +---
 src/components/Navigator/BaseNavigatorCard.vue         |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 86723c837..68d55f43e 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -253,12 +253,12 @@ $sidenav-icon-padding-size: 5px;
     margin: 0 $nav-padding;
   }
 
+  @include safe-area-right-set(padding-left, $nav-card-horizontal-spacing-large);
+  @include safe-area-right-set(padding-right, $nav-card-horizontal-spacing-large);
+
   @include nav-in-breakpoint() {
-    $space: 14px;
-    margin-left: -$space;
-    margin-right: -$space;
-    padding-left: $space;
-    padding-right: $space;
+    margin-left: -$nav-card-horizontal-spacing-large - $sidenav-icon-padding-size;
+    margin-right: -$nav-card-horizontal-spacing-large;
     align-self: stretch;
 
     &__separator {
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index 4df837600..a3a01e5f8 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -649,14 +649,12 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 .nav-actions {
   display: flex;
   align-items: center;
+  @include safe-area-right-set(padding-right, $nav-card-horizontal-spacing-large);
 
   @include nav-in-breakpoint {
     grid-area: actions;
     justify-content: flex-end;
   }
-  @include breakpoint(small, nav) {
-    padding-right: $nav-padding-small;
-  }
 }
 
 .pre-title + .nav-title {
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 52a47bc01..bea2e5b95 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -118,7 +118,7 @@ $close-icon-padding: 5px;
       align-items: center;
     }
 
-    > a {
+    > a, span {
       color: var(--color-figure-gray);
       width: 100%;
     }

From a62fcda6081c7b6858884ce3a8213f5064387eaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 30 Jan 2024 16:55:14 +0100
Subject: [PATCH 27/52] [rdar://116401230] fix: address aligment feedback for
 Tutorials

---
 .../DocumentationTopic/DocumentationNav.vue       |  8 +-------
 src/components/NavBase.vue                        | 15 +++++++--------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 68d55f43e..a82919c88 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -145,6 +145,7 @@ $sidenav-icon-padding-size: 5px;
 // overwrite the typography of menu items outside of breakpoint only
 :deep() .nav-menu {
   @include font-styles(documentation-nav);
+  justify-content: flex-end;
 
   &-settings {
     // ensure settings can get smaller if needed
@@ -253,14 +254,7 @@ $sidenav-icon-padding-size: 5px;
     margin: 0 $nav-padding;
   }
 
-  @include safe-area-right-set(padding-left, $nav-card-horizontal-spacing-large);
-  @include safe-area-right-set(padding-right, $nav-card-horizontal-spacing-large);
-
   @include nav-in-breakpoint() {
-    margin-left: -$nav-card-horizontal-spacing-large - $sidenav-icon-padding-size;
-    margin-right: -$nav-card-horizontal-spacing-large;
-    align-self: stretch;
-
     &__separator {
       display: none;
     }
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index a3a01e5f8..71cedb52d 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -366,6 +366,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   }
 
   @include breakpoint(small, $scope: nav) {
+    --nav-padding: #{$nav-padding-small};
     min-width: map-deep-get($breakpoint-attributes, (nav, small, min-width));
     height: $nav-height-small;
   }
@@ -584,10 +585,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
     padding-right: calc(max(var(--nav-padding), env(safe-area-inset-right)));
   }
 
-  @include breakpoint(small, $scope: nav) {
-    padding: 0 0 0 $nav-padding-small;
-  }
-
   @include nav-in-breakpoint {
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -602,7 +599,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   @include font-styles(nav-menu);
   flex: 1 1 auto;
   display: flex;
-  justify-content: flex-end;
   min-width: 0;
 
   @include nav-in-breakpoint {
@@ -649,7 +645,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 .nav-actions {
   display: flex;
   align-items: center;
-  @include safe-area-right-set(padding-right, $nav-card-horizontal-spacing-large);
 
   @include nav-in-breakpoint {
     grid-area: actions;
@@ -676,13 +671,17 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   align-items: center;
   white-space: nowrap;
   box-sizing: border-box;
-  padding-left: $nav-padding / 2;
+
+  @include breakpoints-from(large, nav) {
+    &:not(:first-child) {
+      padding-left: $nav-padding / 2;
+    }
+  }
 
   @include breakpoint(small, $scope: nav) {
     padding-top: 0;
     height: $nav-height-small;
     width: 90%;
-    padding-left: 0;
   }
 
   :deep(span) {

From d820d421ba80be1c3742820820c6655ce7eecfef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 31 Jan 2024 17:36:21 +0100
Subject: [PATCH 28/52] [rdar://116401230] chore: hide hierarchy in mobile
 viewport

---
 src/components/DocumentationTopic/Hero/Hierarchy.vue | 4 ++++
 src/components/DocumentationTopic/Hero/Title.vue     | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 28bdfb99a..b79203234 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -182,6 +182,10 @@ export default {
     margin: 0;
   }
 
+  @include breakpoint(small) {
+    display: none;
+  }
+
   // make sure the root-hierarchy has a limit as well
   .root-hierarchy .item {
     @include truncate(10rem);
diff --git a/src/components/DocumentationTopic/Hero/Title.vue b/src/components/DocumentationTopic/Hero/Title.vue
index bdb2f168a..49a5ae2e7 100644
--- a/src/components/DocumentationTopic/Hero/Title.vue
+++ b/src/components/DocumentationTopic/Hero/Title.vue
@@ -33,6 +33,12 @@ export default {
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
+.topictitle {
+  @include breakpoint(small) {
+    margin: 0;
+  }
+}
+
 .eyebrow {
   @include font-styles(eyebrow-reduced);
   color: var(--color-documentation-intro-eyebrow, dark-color(figure-gray-secondary));

From 4d05719930d885d1a533646c2a0564bdf0de5385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 5 Feb 2024 18:27:33 +0100
Subject: [PATCH 29/52] [rdar://116401230] fix: does not render a Hierarchy in
 IDE mode

---
 src/components/DocumentationTopic.vue          |  2 +-
 .../unit/components/DocumentationTopic.spec.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index e8a867e1a..cb1216145 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,7 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
-          v-if="!enableMinimized"
+          v-if="!enableMinimized && !isTargetIDE"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 997d89a79..6348d725d 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -337,6 +337,24 @@ describe('DocumentationTopic', () => {
     });
   });
 
+  it('does not render a Hierarchy in IDE mode', () => {
+    const provide = {
+      isTargetIDE: true,
+      store: mockStore,
+    };
+    wrapper = shallowMount(DocumentationTopic, { propsData, provide });
+    expect(wrapper.find(Hierarchy).exists()).toBe(false);
+
+    // Minimized view should not render LanguageSwitcher
+    wrapper.setProps({ enableMinimized: true });
+    expect(wrapper.find(Hierarchy).exists()).toBe(false);
+  });
+
+  it('does not render a Hierarchy in minimized view', () => {
+    wrapper.setProps({ enableMinimized: true });
+    expect(wrapper.find(Hierarchy).exists()).toBe(false);
+  });
+
   it('render a `DocumentationHero`, enabled, if top-level technology page', () => {
     const hero = wrapper.find(DocumentationHero);
     expect(hero.props()).toEqual({

From 0d932d56b9836a4e330c06ff6a9e49a706943841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 5 Feb 2024 18:28:19 +0100
Subject: [PATCH 30/52] [rdar://116401230] fix: it uses referencesProvider in
 Hierarchy instead of prop

---
 src/components/DocumentationTopic.vue             |  1 -
 .../DocumentationTopic/Hero/Hierarchy.vue         |  3 ++-
 tests/unit/components/DocumentationTopic.spec.js  |  1 -
 .../DocumentationTopic/Hero/Hierarchy.spec.js     | 15 +++++++++++----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index cb1216145..843d37125 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -37,7 +37,6 @@
           :isSymbolBeta="isSymbolBeta"
           :parentTopicIdentifiers="hierarchyItems"
           :currentTopicTags="currentTopicTags"
-          :references="references"
         />
         <LanguageSwitcher
           v-if="shouldShowLanguageSwitcher"
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index b79203234..4384501e4 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -62,6 +62,7 @@
 import { buildUrl } from 'docc-render/utils/url-helper';
 import NavMenuItems from 'docc-render/components/NavMenuItems.vue';
 import Badge from 'docc-render/components/Badge.vue';
+import referencesProvider from 'docc-render/mixins/referencesProvider';
 import HierarchyCollapsedItems from './HierarchyCollapsedItems.vue';
 import HierarchyItem from './HierarchyItem.vue';
 
@@ -104,10 +105,10 @@ export default {
     MaxVisibleLinks,
   },
   inject: ['store'],
+  mixins: [referencesProvider],
   props: {
     isSymbolDeprecated: Boolean,
     isSymbolBeta: Boolean,
-    references: Object,
     currentTopicTitle: {
       type: String,
       required: true,
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 6348d725d..07f2153ca 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -333,7 +333,6 @@ describe('DocumentationTopic', () => {
       isSymbolBeta: false,
       isSymbolDeprecated: false,
       currentTopicTags: propsData.currentTopicTags,
-      references: propsData.references,
     });
   });
 
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index 237aa442f..035c13d08 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -64,6 +64,7 @@ const references = {
 const store = Vue.observable({
   state: {
     contentWidth: 1800,
+    references,
   },
 });
 
@@ -73,7 +74,6 @@ function changeSize(size) {
 
 const mountWithProps = ({ propsData, ...others } = {}) => shallowMount(Hierarchy, {
   propsData: {
-    references,
     ...propsData,
   },
   stubs: {
@@ -140,9 +140,16 @@ describe('Hierarchy', () => {
           foo.identifier,
           bar.identifier,
         ],
-        references: {
-          // include only one ref
-          [bar.identifier]: foo,
+      },
+      provide: {
+        store: {
+          state: {
+            contentWidth: 1800,
+            references: {
+              // include only one ref
+              [bar.identifier]: foo,
+            },
+          },
         },
       },
     });

From f0813f1fffab3bb6caa9fa08e3351962c1cf427c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 5 Feb 2024 19:11:12 +0100
Subject: [PATCH 31/52] [rdar://116401230] fix: delete currentTopicTags prop

---
 src/components/DocumentationTopic.vue            | 6 +-----
 src/views/DocumentationTopic.vue                 | 1 -
 tests/unit/components/DocumentationTopic.spec.js | 8 +-------
 tests/unit/views/DocumentationTopic.spec.js      | 2 --
 4 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 843d37125..9460ca6ef 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -36,7 +36,7 @@
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
           :parentTopicIdentifiers="hierarchyItems"
-          :currentTopicTags="currentTopicTags"
+          :currentTopicTags="tags"
         />
         <LanguageSwitcher
           v-if="shouldShowLanguageSwitcher"
@@ -398,10 +398,6 @@ export default {
       type: Array,
       required: false,
     },
-    currentTopicTags: {
-      type: Array,
-      default: () => [],
-    },
     hierarchyItems: {
       type: Array,
       required: false,
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index f97264a56..e5eb4c3ad 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -98,7 +98,6 @@
           :languagePaths="languagePaths"
           :enableOnThisPageNav="enableOnThisPageNav"
           :enableMinimized="enableMinimized"
-          :currentTopicTags="topicProps.tags"
           :hierarchyItems="hierarchyItems"
         />
       </component>
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 07f2153ca..d9ffc33a1 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -149,12 +149,6 @@ const propsData = {
   ],
   remoteSource: { url: 'foo' },
   pageImages: [{ identifier: 'foo', type: 'icon' }],
-  currentTopicTags: [{
-    type: 'foo',
-    text: 'Foo',
-  }, {
-    type: 'custom',
-  }],
   rootLink: {
     path: 'foo',
     query: {},
@@ -332,7 +326,7 @@ describe('DocumentationTopic', () => {
       parentTopicIdentifiers: propsData.hierarchyItems,
       isSymbolBeta: false,
       isSymbolDeprecated: false,
-      currentTopicTags: propsData.currentTopicTags,
+      currentTopicTags: propsData.tags,
     });
   });
 
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index f69d80669..0991f3766 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -680,7 +680,6 @@ describe('DocumentationTopic', () => {
       topicSectionsStyle: TopicSectionsStyle.list, // default value
       disableHeroBackground: false,
       hierarchyItems: topicData.hierarchy.paths[0],
-      currentTopicTags: [],
     });
   });
 
@@ -759,7 +758,6 @@ describe('DocumentationTopic', () => {
       topicSectionsStyle: TopicSectionsStyle.list, // default value
       disableHeroBackground: false,
       hierarchyItems: topicData.hierarchy.paths[0],
-      currentTopicTags: [],
     });
   });
 

From 88538f340c3a7435af62e2ec0d4f7861cb35a94c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 5 Feb 2024 19:24:38 +0100
Subject: [PATCH 32/52] [rdar://116401230] fix: firstItemSlice as a const

---
 src/components/DocumentationTopic/Hero/Hierarchy.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 4384501e4..e91db052e 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -93,6 +93,8 @@ import HierarchyItem from './HierarchyItem.vue';
 // they will be collapsed into a menu that users need to interact with to see.
 const MaxVisibleLinks = 3;
 
+const firstItemSlice = 1;
+
 export default {
   name: 'Hierarchy',
   components: {
@@ -136,7 +138,6 @@ export default {
       }, []);
     },
     root: ({ parentTopics }) => parentTopics[0],
-    firstItemSlice: ({ root }) => (root ? 1 : 0),
     /**
      * Figure out how many items we can show, after the collapsed items,
      * based on the content width
@@ -149,13 +150,13 @@ export default {
       if (windowWidth >= 800) return MaxVisibleLinks - 2 - extraItemsToRemove;
       return 0;
     },
-    collapsibleItems: ({ parentTopics, linksAfterCollapse, firstItemSlice }) => (
+    collapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
       // if there are links, slice all except those, otherwise get all but the root
       linksAfterCollapse
         ? parentTopics.slice(firstItemSlice, -linksAfterCollapse)
         : parentTopics.slice(firstItemSlice)
     ),
-    nonCollapsibleItems: ({ parentTopics, linksAfterCollapse, firstItemSlice }) => (
+    nonCollapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
       // if there are links to show, slice them out, otherwise return none
       linksAfterCollapse ? parentTopics.slice(firstItemSlice).slice(-linksAfterCollapse) : []
     ),

From 44bbbe1762a785f6e75730bcaaa99d5c4bdcc80d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 6 Feb 2024 12:14:15 +0100
Subject: [PATCH 33/52] [rdar://116401230] refactor: delete
 hideNavigatorHeadOnLarge and unnecessary props for BaseNavigatorCard

---
 src/components/Navigator/BaseNavigatorCard.vue     | 14 --------------
 src/components/Navigator/LoadingNavigatorCard.vue  |  1 -
 src/components/Navigator/NavigatorCard.vue         |  6 ++++--
 tests/unit/components/Navigator.spec.js            |  2 --
 .../components/Navigator/BaseNavigatorCard.spec.js |  1 -
 5 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index bea2e5b95..13ee8de92 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -44,20 +44,6 @@ export default {
   components: {
     InlineCloseIcon,
   },
-  props: {
-    technologyPath: {
-      type: String,
-      default: '',
-    },
-    isTechnologyBeta: {
-      type: Boolean,
-      default: false,
-    },
-    hideNavigatorHeadOnLarge: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
       SIDEBAR_HIDE_BUTTON_ID,
diff --git a/src/components/Navigator/LoadingNavigatorCard.vue b/src/components/Navigator/LoadingNavigatorCard.vue
index 4eb624783..1d3965beb 100644
--- a/src/components/Navigator/LoadingNavigatorCard.vue
+++ b/src/components/Navigator/LoadingNavigatorCard.vue
@@ -12,7 +12,6 @@
   <BaseNavigatorCard
     v-bind="$props"
     @close="$emit('close')"
-    hideNavigatorHeadOnLarge
   >
     <template #body="{ className }">
       <transition name="delay-visibility">
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 8f2f1e84a..d6411d4bd 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -11,7 +11,6 @@
 <template>
   <BaseNavigatorCard
     :class="{ 'filter-on-top': renderFilterOnTop }"
-    :hideNavigatorHeadOnLarge="hideNavigatorHeadOnLarge"
     v-bind="{
       isTechnologyBeta,
       technologyPath,
@@ -213,7 +212,10 @@ export default {
     Badge,
   },
   props: {
-    ...BaseNavigatorCard.props,
+    technologyPath: {
+      type: String,
+      default: '',
+    },
     children: {
       type: Array,
       required: true,
diff --git a/tests/unit/components/Navigator.spec.js b/tests/unit/components/Navigator.spec.js
index d45bb6dc0..5906af06f 100644
--- a/tests/unit/components/Navigator.spec.js
+++ b/tests/unit/components/Navigator.spec.js
@@ -149,7 +149,6 @@ describe('Navigator', () => {
       apiChanges: null,
       navigatorReferences,
       hideAvailableTags: false,
-      hideNavigatorHeadOnLarge: false,
       isSpecificOverload: false,
     });
   });
@@ -190,7 +189,6 @@ describe('Navigator', () => {
       apiChanges: null,
       navigatorReferences,
       hideAvailableTags: false,
-      hideNavigatorHeadOnLarge: false,
       isSpecificOverload: false,
     });
   });
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index c218bd974..ea06692bb 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -14,7 +14,6 @@ import { baseNavOpenSidenavButtonId } from 'docc-render/constants/nav';
 import { flushPromises } from '../../../../test-utils';
 
 const defaultProps = {
-  hideNavigatorHeadOnLarge: false,
   technology: 'Technology',
   technologyPath: '/path',
   isTechnologyBeta: false,

From e6a1e6cfeb12de96b0ca2fb7595d287004d6bbf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 6 Feb 2024 12:48:18 +0100
Subject: [PATCH 34/52] [rdar://116401230] refactor: delete unnecessary props
 for DocumentationNav

---
 .../DocumentationTopic/DocumentationNav.vue          | 12 ------------
 src/views/DocumentationTopic.vue                     |  3 ---
 tests/unit/views/DocumentationTopic.spec.js          |  3 ---
 3 files changed, 18 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index a82919c88..4cc1373c7 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -79,14 +79,6 @@ export default {
     LanguageToggle,
   },
   props: {
-    isSymbolBeta: {
-      type: Boolean,
-      required: false,
-    },
-    isSymbolDeprecated: {
-      type: Boolean,
-      required: false,
-    },
     isDark: {
       type: Boolean,
       default: false,
@@ -107,10 +99,6 @@ export default {
       type: String,
       required: false,
     },
-    sidenavHiddenOnLarge: {
-      type: Boolean,
-      default: false,
-    },
     displaySidenav: {
       type: Boolean,
       default: false,
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index e5eb4c3ad..447748d91 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -17,10 +17,7 @@
         :interfaceLanguage="topicProps.interfaceLanguage"
         :objcPath="objcPath"
         :swiftPath="swiftPath"
-        :isSymbolDeprecated="isSymbolDeprecated"
-        :isSymbolBeta="isSymbolBeta"
         :displaySidenav="enableNavigator"
-        :sidenavHiddenOnLarge="sidenavHiddenOnLarge"
         @toggle-sidenav="handleToggleSidenav"
       >
         <template #title>
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index 0991f3766..c7109a375 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -536,12 +536,9 @@ describe('DocumentationTopic', () => {
       isDark: false,
       hasNoBorder: false,
       displaySidenav: false,
-      isSymbolBeta: false,
-      isSymbolDeprecated: false,
       interfaceLanguage: topicData.identifier.interfaceLanguage,
       objcPath: topicData.variants[0].paths[0],
       swiftPath: topicData.variants[1].paths[0],
-      sidenavHiddenOnLarge: false,
     });
     expect(nav.attributes()).toMatchObject({
       interfacelanguage: 'swift',

From 77e9ff70bf82c59609723476650b2b7a4f492baa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 6 Feb 2024 13:08:23 +0100
Subject: [PATCH 35/52] [rdar://116401230] fix: comment for head-inner and
 tests for navigator-head slot

---
 src/components/Navigator/BaseNavigatorCard.vue           | 1 +
 .../unit/components/Navigator/BaseNavigatorCard.spec.js  | 9 +++++++++
 tests/unit/components/Navigator/NavigatorCard.spec.js    | 9 +++++++++
 3 files changed, 19 insertions(+)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 13ee8de92..fd2327935 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -98,6 +98,7 @@ $close-icon-padding: 5px;
     @include font-styles(nav-title-large);
     height: $nav-height-small;
 
+    // display only in medium and small viewports
     @include breakpoint(medium, nav) {
       display: flex;
       justify-content: flex-end;
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index ea06692bb..dc5395ec1 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -68,4 +68,13 @@ describe('BaseNavigatorCard', () => {
     });
     expect(wrapper.find('.above-navigator-head').text()).toBe('CustomAboveNavigatorHeadComponent');
   });
+
+  it('exposes a #navigator-head slot', () => {
+    const wrapper = createWrapper({
+      scopedSlots: {
+        'navigator-head': '<div class="navigator-head">CustomNavigatorHeadComponent</div>',
+      },
+    });
+    expect(wrapper.find('.navigator-head').text()).toBe('CustomNavigatorHeadComponent');
+  });
 });
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 7fd916e05..fc4b6d5d1 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -326,6 +326,15 @@ describe('NavigatorCard', () => {
     expect(wrapper.find('.above-navigator-head').text()).toBe('CustomAboveNavigatorHeadComponent');
   });
 
+  it('exposes a #navigator-head slot', () => {
+    const wrapper = createWrapper({
+      scopedSlots: {
+        'navigator-head': '<div class="navigator-head">CustomNavigatorHeadComponent</div>',
+      },
+    });
+    expect(wrapper.find('.navigator-head').text()).toBe('CustomNavigatorHeadComponent');
+  });
+
   it('exposes a #filter slot', () => {
     const wrapper = createWrapper({
       scopedSlots: {

From 3dd75aa1feb12f72536c8cdaad4bef58b066f692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 6 Feb 2024 14:34:04 +0100
Subject: [PATCH 36/52] [rdar://116401230] chore: update license headers

---
 bin/check-source                                                | 2 +-
 src/components/DocumentationTopic.vue                           | 2 +-
 src/components/DocumentationTopic/DocumentationNav.vue          | 2 +-
 src/components/DocumentationTopic/Hero/DocumentationHero.vue    | 2 +-
 src/components/DocumentationTopic/Hero/Hierarchy.vue            | 2 +-
 .../DocumentationTopic/Hero/HierarchyCollapsedItems.vue         | 2 +-
 src/components/DocumentationTopic/Hero/HierarchyItem.vue        | 2 +-
 src/components/DocumentationTopic/Hero/Title.vue                | 2 +-
 src/components/NavBase.vue                                      | 2 +-
 src/components/Navigator.vue                                    | 2 +-
 src/components/Navigator/BaseNavigatorCard.vue                  | 2 +-
 src/components/Navigator/BaseNavigatorCardItem.vue              | 2 +-
 src/components/Navigator/LoadingNavigatorCard.vue               | 2 +-
 src/components/Navigator/NavigatorCard.vue                      | 2 +-
 src/components/Navigator/NavigatorCardItem.vue                  | 2 +-
 src/styles/core/_nav.scss                                       | 2 +-
 src/styles/core/_vars.scss                                      | 2 +-
 src/styles/core/typography/_font-styles.scss                    | 2 +-
 src/views/DocumentationTopic.vue                                | 2 +-
 tests/unit/components/DocumentationTopic.spec.js                | 2 +-
 .../unit/components/DocumentationTopic/DocumentationNav.spec.js | 2 +-
 .../DocumentationTopic/Hero/DocumentationHero.spec.js           | 2 +-
 tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js | 2 +-
 .../DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js     | 2 +-
 .../components/DocumentationTopic/Hero/HierarchyItem.spec.js    | 2 +-
 tests/unit/components/DocumentationTopic/Hero/Title.spec.js     | 2 +-
 tests/unit/components/Navigator.spec.js                         | 2 +-
 tests/unit/components/Navigator/BaseNavigatorCard.spec.js       | 2 +-
 tests/unit/components/Navigator/NavigatorCard.spec.js           | 2 +-
 tests/unit/views/DocumentationTopic.spec.js                     | 2 +-
 30 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/bin/check-source b/bin/check-source
index 493ef098c..5db6accf9 100755
--- a/bin/check-source
+++ b/bin/check-source
@@ -18,7 +18,7 @@ here="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 function replace_acceptable_years() {
     # this needs to replace all acceptable forms with 'YEARS'
-    sed -e 's/20[12][789012]-20[12][890123]/YEARS/' -e 's/20[12][890123]/YEARS/'
+    sed -e 's/20[12][78901234]-20[12][8901234]/YEARS/' -e 's/20[12][8901234]/YEARS/'
 }
 
 printf "=> Checking license headers… "
diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 9460ca6ef..12398b4c6 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 4cc1373c7..6b92d58fb 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/Hero/DocumentationHero.vue b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
index 451658621..f710d8b5f 100644
--- a/src/components/DocumentationTopic/Hero/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index e91db052e..227347104 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
index 194b120f3..0bc48261c 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/Hero/HierarchyItem.vue b/src/components/DocumentationTopic/Hero/HierarchyItem.vue
index c3cf01ac9..e67ce192f 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyItem.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyItem.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/DocumentationTopic/Hero/Title.vue b/src/components/DocumentationTopic/Hero/Title.vue
index 49a5ae2e7..70d073dc2 100644
--- a/src/components/DocumentationTopic/Hero/Title.vue
+++ b/src/components/DocumentationTopic/Hero/Title.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index 71cedb52d..88a469035 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index f07d8d0d9..956df6870 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index fd2327935..4b6b7ba81 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator/BaseNavigatorCardItem.vue b/src/components/Navigator/BaseNavigatorCardItem.vue
index e3e3a988d..98c4f86d9 100644
--- a/src/components/Navigator/BaseNavigatorCardItem.vue
+++ b/src/components/Navigator/BaseNavigatorCardItem.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator/LoadingNavigatorCard.vue b/src/components/Navigator/LoadingNavigatorCard.vue
index 1d3965beb..4a36566a2 100644
--- a/src/components/Navigator/LoadingNavigatorCard.vue
+++ b/src/components/Navigator/LoadingNavigatorCard.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index d6411d4bd..cf9249313 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue
index 19b9ad91d..15dac728f 100644
--- a/src/components/Navigator/NavigatorCardItem.vue
+++ b/src/components/Navigator/NavigatorCardItem.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/styles/core/_nav.scss b/src/styles/core/_nav.scss
index f3be20620..ab82ec4bd 100644
--- a/src/styles/core/_nav.scss
+++ b/src/styles/core/_nav.scss
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/src/styles/core/_vars.scss b/src/styles/core/_vars.scss
index 3c88a77f8..0d02540e4 100644
--- a/src/styles/core/_vars.scss
+++ b/src/styles/core/_vars.scss
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index fcaf6adb4..e878c65f3 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index 447748d91..0394e5603 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index d9ffc33a1..e0f981e92 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index 8e0ac4d33..66c038304 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js b/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
index 531aef78c..589886ef9 100644
--- a/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index 035c13d08..2f7ec094c 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
index 388c037b4..bdae0a8d2 100644
--- a/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js b/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
index b3f36475d..2bb4e6e96 100644
--- a/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/HierarchyItem.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/DocumentationTopic/Hero/Title.spec.js b/tests/unit/components/DocumentationTopic/Hero/Title.spec.js
index c65b50310..fa3d3463a 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Title.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Title.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/Navigator.spec.js b/tests/unit/components/Navigator.spec.js
index 5906af06f..fde2eb438 100644
--- a/tests/unit/components/Navigator.spec.js
+++ b/tests/unit/components/Navigator.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
index dc5395ec1..de23d484e 100644
--- a/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/BaseNavigatorCard.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index fc4b6d5d1..ae66040dc 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index c7109a375..91634a5ec 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information

From dff4ca5ad31b0deac9eb54a620979647702d88ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 7 Feb 2024 19:12:33 +0100
Subject: [PATCH 37/52] [rdar://116401230] fix: address feedback

---
 src/components/DocumentationTopic.vue           |  2 +-
 .../DocumentationTopic/DocumentationNav.vue     |  1 -
 src/components/NavBase.vue                      |  1 +
 src/components/Navigator.vue                    | 17 +++++++++--------
 src/components/Navigator/BaseNavigatorCard.vue  |  4 ++++
 .../Navigator/LoadingNavigatorCard.vue          |  3 ---
 src/components/Tutorial/NavigationBar.vue       |  1 +
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 12398b4c6..d5adce102 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,7 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
-          v-if="!enableMinimized && !isTargetIDE"
+          v-if="enhanceBackground && !isTargetIDE"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 6b92d58fb..8b749c67a 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -133,7 +133,6 @@ $sidenav-icon-padding-size: 5px;
 // overwrite the typography of menu items outside of breakpoint only
 :deep() .nav-menu {
   @include font-styles(documentation-nav);
-  justify-content: flex-end;
 
   &-settings {
     // ensure settings can get smaller if needed
diff --git a/src/components/NavBase.vue b/src/components/NavBase.vue
index 88a469035..52a976840 100644
--- a/src/components/NavBase.vue
+++ b/src/components/NavBase.vue
@@ -599,6 +599,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   @include font-styles(nav-menu);
   flex: 1 1 auto;
   display: flex;
+  justify-content: flex-end;
   min-width: 0;
 
   @include nav-in-breakpoint {
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index 956df6870..29a9d8462 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -33,9 +33,8 @@
       </template>
     </NavigatorCard>
     <LoadingNavigatorCard
-      v-else
-      v-bind="technologyProps"
       @close="$emit('close')"
+      v-else
     />
     <div aria-live="polite" class="visuallyhidden">
       {{ $t('navigator.navigator-is', {
@@ -96,7 +95,7 @@ export default {
     },
     technology: {
       type: Object,
-      required: true,
+      required: false,
     },
     isFetching: {
       type: Boolean,
@@ -174,11 +173,13 @@ export default {
      * The root item is always a module
      */
     type: () => TopicTypes.module,
-    technologyProps: ({ technology }) => ({
-      technology: technology.title,
-      technologyPath: technology.path || technology.url,
-      isTechnologyBeta: technology.beta,
-    }),
+    technologyProps: ({ technology }) => (
+      !technology ? null : {
+        technology: technology.title,
+        technologyPath: technology.path || technology.url,
+        isTechnologyBeta: technology.beta,
+      }
+    ),
   },
 };
 </script>
diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 4b6b7ba81..11d3ff5f7 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -152,5 +152,9 @@ $close-icon-padding: 5px;
   @include breakpoint(medium, nav) {
     padding-top: 0;
   }
+
+  .filter-on-top & {
+    padding-top: 0;
+  }
 }
 </style>
diff --git a/src/components/Navigator/LoadingNavigatorCard.vue b/src/components/Navigator/LoadingNavigatorCard.vue
index 4a36566a2..b97640c57 100644
--- a/src/components/Navigator/LoadingNavigatorCard.vue
+++ b/src/components/Navigator/LoadingNavigatorCard.vue
@@ -45,9 +45,6 @@ export default {
     BaseNavigatorCard,
     LoadingNavigatorItem,
   },
-  props: {
-    ...BaseNavigatorCard.props,
-  },
   data() {
     return {
       LOADER_ROWS,
diff --git a/src/components/Tutorial/NavigationBar.vue b/src/components/Tutorial/NavigationBar.vue
index 6fbd2de44..dc8ff52c7 100644
--- a/src/components/Tutorial/NavigationBar.vue
+++ b/src/components/Tutorial/NavigationBar.vue
@@ -200,6 +200,7 @@ export default {
 
     .nav-menu {
       padding: 0;
+      justify-content: flex-start;
       grid-column: 3/5;
     }
 

From b43ab1fe275bc027ed53d2198e3923a8a52b0348 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Wed, 7 Feb 2024 20:16:45 +0100
Subject: [PATCH 38/52] [rdar://116401230] fix: (WIP) hierarchy in mobile

---
 .../DocumentationTopic/Hero/Hierarchy.vue     | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 227347104..cfcc7ecf0 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -41,7 +41,7 @@
     >
       {{ topic.title }}
     </HierarchyItem>
-    <HierarchyItem>
+    <HierarchyItem v-if="windowWidth >= 800">
       {{ currentTopicTitle }}
       <template #tags>
         <Badge v-if="isSymbolDeprecated" variant="deprecated" />
@@ -150,12 +150,21 @@ export default {
       if (windowWidth >= 800) return MaxVisibleLinks - 2 - extraItemsToRemove;
       return 0;
     },
-    collapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
+    collapsibleItems: ({
+      windowWidth, parentTopics, linksAfterCollapse, currentTopicTitle,
+    }) => {
       // if there are links, slice all except those, otherwise get all but the root
-      linksAfterCollapse
+      const collapsibleItems = linksAfterCollapse
         ? parentTopics.slice(firstItemSlice, -linksAfterCollapse)
-        : parentTopics.slice(firstItemSlice)
-    ),
+        : parentTopics.slice(firstItemSlice);
+      if (windowWidth < 800) {
+        collapsibleItems.push({
+          title: currentTopicTitle,
+          url: '',
+        });
+      }
+      return collapsibleItems;
+    },
     nonCollapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
       // if there are links to show, slice them out, otherwise return none
       linksAfterCollapse ? parentTopics.slice(firstItemSlice).slice(-linksAfterCollapse) : []
@@ -184,10 +193,6 @@ export default {
     margin: 0;
   }
 
-  @include breakpoint(small) {
-    display: none;
-  }
-
   // make sure the root-hierarchy has a limit as well
   .root-hierarchy .item {
     @include truncate(10rem);

From 4a1c80b317149dd00b4747f044a37b5266a867b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 13:01:07 +0100
Subject: [PATCH 39/52] [rdar://116401230] fix: delete previousSiblingChildren

---
 .../DocumentationTopic/DocumentationNav.vue   | 12 ---------
 src/components/NavMenuItemBase.vue            | 27 -------------------
 src/components/NavMenuItems.vue               | 16 +----------
 .../DocumentationNav.spec.js                  |  5 ----
 tests/unit/components/NavMenuItems.spec.js    |  9 -------
 5 files changed, 1 insertion(+), 68 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 8b749c67a..7ea626e91 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -42,7 +42,6 @@
     <template #tray="{ closeNav }">
       <NavMenuItems
         class="nav-menu-settings"
-        :previousSiblingChildren="1"
       >
         <LanguageToggle
           v-if="interfaceLanguage && (swiftPath || objcPath)"
@@ -144,17 +143,6 @@ $sidenav-icon-padding-size: 5px;
       margin-left: $nav-space-between-elements;
     }
 
-    @include nav-in-breakpoint {
-      // do not apply border if no item are above setting links
-      &:not([data-previous-menu-children-count="0"]) {
-        .nav-menu-setting:first-child {
-          border-top: 1px solid dark-color(figure-gray-tertiary);
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
     .nav-menu-setting {
       display: flex;
       align-items: center;
diff --git a/src/components/NavMenuItemBase.vue b/src/components/NavMenuItemBase.vue
index 0b50f0baa..5a8d94ddb 100644
--- a/src/components/NavMenuItemBase.vue
+++ b/src/components/NavMenuItemBase.vue
@@ -70,32 +70,5 @@ export default {
       transition-delay: $nav-menu-item-stagger-delay;
     }
   }
-  // create a staggered effect, only each settings element (language toggle, API changes)
-  @for $i from 0 to 8 {
-    // describes how many items the previous menu children had
-    [data-previous-menu-children-count='#{$i}'] & {
-      @for $j from 1 to 8 {
-        // each child should delay its removal
-        &:nth-child(#{$j}) {
-          // this is way down here, otherwise parent selectors get broken.
-          @include nav-in-breakpoint {
-            transition-delay: $nav-menu-item-stagger-delay * ($j + $i);
-          }
-        }
-      }
-      // when collapsed
-      @include nav-in-breakpoint {
-        // and expanded
-        @include nav-is-open($nested: true) {
-          @for $k from 1 to 8 {
-            // each child should delay its reveal
-            &:nth-child(#{$k}) {
-              transition-delay: $nav-menu-item-stagger-delay * (9 - ($k + $i));
-            }
-          }
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue
index f6002fc64..e1d332c25 100644
--- a/src/components/NavMenuItems.vue
+++ b/src/components/NavMenuItems.vue
@@ -9,10 +9,7 @@
 -->
 
 <template>
-  <ul
-    class="nav-menu-items"
-    :data-previous-menu-children-count="previousSiblingChildren"
-  >
+  <ul class="nav-menu-items">
     <slot />
   </ul>
 </template>
@@ -20,17 +17,6 @@
 <script>
 export default {
   name: 'NavMenuItems',
-  props: {
-    /**
-     * Defined the amount of children the previous sibling has.
-     * Used to help with staggering effects on children.
-     * @see NavMenuItem
-     */
-    previousSiblingChildren: {
-      type: Number,
-      default: 0,
-    },
-  },
 };
 </script>
 
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index 66c038304..8917bfa2d 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -122,11 +122,6 @@ describe('DocumentationNav', () => {
     });
   });
 
-  it('provides the correct number of previous sibling children to `NavMenuItems`', async () => {
-    const menuItems = wrapper.find(NavMenuItems);
-    expect(menuItems.props()).toHaveProperty('previousSiblingChildren', 1);
-  });
-
   it('does not render a `LanguageToggle` when there is no swift nor objc path', () => {
     expect(wrapper.contains(LanguageToggle)).toBe(true);
     wrapper.setProps({ swiftPath: null, objcPath: null });
diff --git a/tests/unit/components/NavMenuItems.spec.js b/tests/unit/components/NavMenuItems.spec.js
index d4777574f..282845068 100644
--- a/tests/unit/components/NavMenuItems.spec.js
+++ b/tests/unit/components/NavMenuItems.spec.js
@@ -20,15 +20,6 @@ describe('NavMenuItems', () => {
     expect(wrapper.classes()).toContain('nav-menu-items');
   });
 
-  it('adds the provided children count as a data prop', () => {
-    const wrapper = createWrapper({
-      propsData: {
-        previousSiblingChildren: 5,
-      },
-    });
-    expect(wrapper.attributes()).toHaveProperty('data-previous-menu-children-count', '5');
-  });
-
   it('renders data in it`s default slot', () => {
     const wrapper = createWrapper({
       slots: {

From 4e10a13165f87cdf4f3ba4c473fe2639f44fa9c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 15:59:16 +0100
Subject: [PATCH 40/52] [rdar://116401230] fix: Hierarchy feedback

---
 src/components/DocumentationTopic.vue         |  2 +-
 .../DocumentationTopic/Hero/Hierarchy.vue     | 38 +++++++++----------
 .../Hero/HierarchyCollapsedItems.vue          | 19 ++++++----
 .../DocumentationTopic/Hero/Hierarchy.spec.js | 14 +++++--
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index b0a776abc..2537743f5 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,7 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
-          v-if="enhanceBackground && !isTargetIDE"
+          v-if="hierarchyItems && !enableMinimized && !isTargetIDE"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index cfcc7ecf0..9d0ec41e0 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -26,7 +26,7 @@
       v-for="topic in collapsibleItems"
       :key="topic.title"
       isCollapsed
-      :url="addQueryParamsToUrl(topic.url)"
+      :url="topic.url ? addQueryParamsToUrl(topic.url) : null"
     >
       {{ topic.title }}
     </HierarchyItem>
@@ -41,20 +41,18 @@
     >
       {{ topic.title }}
     </HierarchyItem>
-    <HierarchyItem v-if="windowWidth >= 800">
+    <HierarchyItem v-if="!smallViewport">
       {{ currentTopicTitle }}
-      <template #tags>
-        <Badge v-if="isSymbolDeprecated" variant="deprecated" />
-        <Badge v-else-if="isSymbolBeta" variant="beta" />
-        <Badge
-          v-for="badge in currentTopicTags"
-          :key="`${badge.type}-${badge.text}`"
-          :variant="badge.type"
-        >
-          {{ badge.text }}
-        </Badge>
-      </template>
     </HierarchyItem>
+    <Badge v-if="isSymbolDeprecated" variant="deprecated" />
+    <Badge v-else-if="isSymbolBeta" variant="beta" />
+    <Badge
+      v-for="badge in currentTopicTags"
+      :key="`${badge.type}-${badge.text}`"
+      :variant="badge.type"
+    >
+      {{ badge.text }}
+    </Badge>
   </NavMenuItems>
 </template>
 
@@ -138,29 +136,29 @@ export default {
       }, []);
     },
     root: ({ parentTopics }) => parentTopics[0],
+    smallViewport: ({ windowWidth }) => (windowWidth < 800),
     /**
      * Figure out how many items we can show, after the collapsed items,
      * based on the content width
      */
-    linksAfterCollapse: ({ windowWidth, hasBadge }) => {
+    linksAfterCollapse: ({ windowWidth, smallViewport, hasBadge }) => {
       const extraItemsToRemove = hasBadge ? 1 : 0;
       // never show more than the `MaxVisibleLinks`
       if (windowWidth > 1200) return MaxVisibleLinks - extraItemsToRemove;
       if (windowWidth > 1000) return MaxVisibleLinks - 1 - extraItemsToRemove;
-      if (windowWidth >= 800) return MaxVisibleLinks - 2 - extraItemsToRemove;
+      if (!smallViewport) return MaxVisibleLinks - 2 - extraItemsToRemove;
       return 0;
     },
     collapsibleItems: ({
-      windowWidth, parentTopics, linksAfterCollapse, currentTopicTitle,
+      smallViewport, parentTopics, linksAfterCollapse, currentTopicTitle,
     }) => {
       // if there are links, slice all except those, otherwise get all but the root
       const collapsibleItems = linksAfterCollapse
         ? parentTopics.slice(firstItemSlice, -linksAfterCollapse)
         : parentTopics.slice(firstItemSlice);
-      if (windowWidth < 800) {
+      if (smallViewport) {
         collapsibleItems.push({
           title: currentTopicTitle,
-          url: '',
         });
       }
       return collapsibleItems;
@@ -186,7 +184,7 @@ export default {
 .hierarchy {
   @include font-styles(hierarchy);
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   margin: 0 0 rem(20px) 0;
   min-width: 0;
   @include nav-in-breakpoint() {
@@ -200,7 +198,7 @@ export default {
 }
 
 // Applies colors to any link inside the nav
-:deep(.nav-menu-link) {
+:deep(a.nav-menu-link) {
   color: inherit;
   @include underline-text;
 }
diff --git a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
index 0bc48261c..f98514c88 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
@@ -19,8 +19,11 @@
       <span class="indicator"><EllipsisIcon class="icon-inline toggle-icon" /></span>
     </button>
     <ul class="dropdown" ref="dropdown" :class="{ collapsed }">
-      <li v-for="topic in topicsWithUrls" class="dropdown-item" :key="topic.title">
-        <router-link class="nav-menu-link" :to="topic.url">{{ topic.title }}</router-link>
+      <li v-for="topic in formattedTopics" class="dropdown-item" :key="topic.title">
+        <router-link v-if="topic.url" class="nav-menu-link" :to="topic.url">
+          {{ topic.title }}
+        </router-link>
+        <span class="nav-menu-link" v-else>{{ topic.title }}</span>
       </li>
     </ul>
   </li>
@@ -57,13 +60,15 @@ export default {
     document.removeEventListener('click', this.handleDocumentClick, false);
   },
   computed: {
-    topicsWithUrls: ({
+    formattedTopics: ({
       $route,
       topics,
-    }) => topics.map(topic => ({
-      ...topic,
-      url: buildUrl(topic.url, $route.query),
-    })),
+    }) => topics.map(topic => (
+      !topic.url ? topic : {
+        ...topic,
+        url: buildUrl(topic.url, $route.query),
+      }
+    )),
   },
   methods: {
     handleDocumentClick(event) {
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index 2f7ec094c..8a39ec1aa 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -330,7 +330,7 @@ describe('Hierarchy', () => {
         ]);
       });
 
-      it('renders a list with `4 collapsed and no external links`, below 800', () => {
+      it('renders a list with `5 collapsed and no external links`, below 800', () => {
         changeSize(750);
         const items = wrapper.findAll(HierarchyItem);
         // assert what items are shown
@@ -358,6 +358,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
+          iscollapsed: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -380,6 +381,9 @@ describe('Hierarchy', () => {
             title: baw.title,
             url: baw.url,
           },
+          {
+            title: qux.title,
+          },
         ]);
       });
     });
@@ -576,6 +580,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
+          iscollapsed: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -598,6 +603,9 @@ describe('Hierarchy', () => {
             title: baw.title,
             url: baw.url,
           },
+          {
+            title: qux.title,
+          },
         ]);
       });
     });
@@ -640,9 +648,7 @@ describe('Hierarchy', () => {
       },
     });
 
-    const HierarchyItems = wrapper.findAll(HierarchyItem);
-    // The badges are rendered inside the last HierarchyItem slot
-    const badges = HierarchyItems.at(HierarchyItems.length - 1).findAll(Badge);
+    const badges = wrapper.findAll(Badge);
     expect(badges).toHaveLength(3);
     expect(badges.at(0).props('variant')).toBe('deprecated');
     expect(badges.at(0).text()).toBe('aside-kind.deprecated');

From 18a0af7d0bb9161b40b015a2dca5b8cd3d14afbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 17:25:55 +0100
Subject: [PATCH 41/52] [rdar://116401230] fix: revert css property

---
 src/components/DocumentationTopic/Hero/DocumentationHero.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/DocumentationTopic/Hero/DocumentationHero.vue b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
index f710d8b5f..5145baf15 100644
--- a/src/components/DocumentationTopic/Hero/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
@@ -238,4 +238,7 @@ $doc-hero-icon-dimension: 250px;
   // apply extra bottom padding when shouldShowLanguageSwitcher
   padding-bottom: rem(65px);
 }
+.theme-dark :deep(a:not(.button-cta)) {
+  color: dark-color(figure-blue);
+}
 </style>

From 5e14687ef7eeff18d4a2455d9aeec062002326f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 17:32:21 +0100
Subject: [PATCH 42/52] [rdar://116401230] fix: license headers

---
 src/components/NavMenuItems.vue            | 2 +-
 src/components/Tutorial/NavigationBar.vue  | 2 +-
 tests/unit/components/NavMenuItems.spec.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue
index e1d332c25..9c0a2e794 100644
--- a/src/components/NavMenuItems.vue
+++ b/src/components/NavMenuItems.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/src/components/Tutorial/NavigationBar.vue b/src/components/Tutorial/NavigationBar.vue
index dc8ff52c7..9689f28e3 100644
--- a/src/components/Tutorial/NavigationBar.vue
+++ b/src/components/Tutorial/NavigationBar.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
diff --git a/tests/unit/components/NavMenuItems.spec.js b/tests/unit/components/NavMenuItems.spec.js
index 282845068..f3b8bddfb 100644
--- a/tests/unit/components/NavMenuItems.spec.js
+++ b/tests/unit/components/NavMenuItems.spec.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information

From 05c9fc3f3f3b07f681f91e506e241fb4637b537a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 20:25:07 +0100
Subject: [PATCH 43/52] [rdar://116401230] fix: Hierarchy

---
 .../DocumentationTopic/Hero/Hierarchy.vue     | 31 ++++++++++---------
 .../DocumentationTopic/Hero/HierarchyItem.vue |  1 +
 src/styles/core/typography/_font-styles.scss  |  2 +-
 .../DocumentationTopic/Hero/Hierarchy.spec.js | 23 ++++++++------
 4 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 9d0ec41e0..35ad7c209 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -43,16 +43,18 @@
     </HierarchyItem>
     <HierarchyItem v-if="!smallViewport">
       {{ currentTopicTitle }}
+      <template #tags>
+        <Badge v-if="isSymbolDeprecated" variant="deprecated" />
+        <Badge v-else-if="isSymbolBeta" variant="beta" />
+        <Badge
+          v-for="badge in currentTopicTags"
+          :key="`${badge.type}-${badge.text}`"
+          :variant="badge.type"
+        >
+          {{ badge.text }}
+        </Badge>
+      </template>
     </HierarchyItem>
-    <Badge v-if="isSymbolDeprecated" variant="deprecated" />
-    <Badge v-else-if="isSymbolBeta" variant="beta" />
-    <Badge
-      v-for="badge in currentTopicTags"
-      :key="`${badge.type}-${badge.text}`"
-      :variant="badge.type"
-    >
-      {{ badge.text }}
-    </Badge>
   </NavMenuItems>
 </template>
 
@@ -61,6 +63,7 @@ import { buildUrl } from 'docc-render/utils/url-helper';
 import NavMenuItems from 'docc-render/components/NavMenuItems.vue';
 import Badge from 'docc-render/components/Badge.vue';
 import referencesProvider from 'docc-render/mixins/referencesProvider';
+import { BreakpointAttributes } from 'docc-render/utils/breakpoints';
 import HierarchyCollapsedItems from './HierarchyCollapsedItems.vue';
 import HierarchyItem from './HierarchyItem.vue';
 
@@ -75,15 +78,15 @@ import HierarchyItem from './HierarchyItem.vue';
  * technology / link_1 / link_2 / link_3 / current_item - beyond 1200
  * technology / [...] / link_1 / link_2 / link_3 / current_item - beyond 1200 + more than 3 links
  * technology / [...] / link_2 / link_3 / current_item - 1000-1200, 3 or more links
- * technology / [...] / link_3 / current_item - 800-1000, 3 or more links
- * [...] / current_item - <= 800 - technology is also pushed to collapsable items
+ * technology / [...] / link_3 / current_item - 735-1000, 3 or more links
+ * [...] / current_item - <= 735 - technology is also pushed to collapsable items
  *
  * In cases where we have tags, like Deprecated or Beta, the max-items is reduced by 1
  * technology / link_2 / link_3 / current_item [Beta] - beyond 1200 with 2 links
  * technology / [...] / link_2 / link_3 / current_item [Beta] - beyond 1200 + more than 2 links
  * technology / [...] / link_2 / current_item [Beta] - 1000-1200, 2 or more links
- * technology / [...] / current_item [Beta] - 800-1000, 2 or more links
- * [...] / current_item - <= 800 - technology is also pushed to collapsable items
+ * technology / [...] / current_item [Beta] - 735-1000, 2 or more links
+ * [...] / current_item - <= 735 - technology is also pushed to collapsable items
  */
 
 // The max number of link items that will initially be visible and uncollapsed w/o
@@ -136,7 +139,7 @@ export default {
       }, []);
     },
     root: ({ parentTopics }) => parentTopics[0],
-    smallViewport: ({ windowWidth }) => (windowWidth < 800),
+    smallViewport: ({ windowWidth }) => (windowWidth < BreakpointAttributes.default.small.maxWidth),
     /**
      * Figure out how many items we can show, after the collapsed items,
      * based on the content width
diff --git a/src/components/DocumentationTopic/Hero/HierarchyItem.vue b/src/components/DocumentationTopic/Hero/HierarchyItem.vue
index e67ce192f..6159d6637 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyItem.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyItem.vue
@@ -55,6 +55,7 @@ export default {
   }
 
   display: flex;
+  align-items: center;
   margin-left: 0;
 
   @include nav-in-breakpoint() {
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index e878c65f3..42815f67f 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -206,7 +206,7 @@ $font-styles: (
     large: 14_18_semibold,
   ),
   hierarchy: (
-    large: 14_18_semibold,
+    large: 14_18,
   ),
   card-eyebrow-large: (
     large: 17_21_semibold,
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index 8a39ec1aa..b9f28edf0 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -281,7 +281,7 @@ describe('Hierarchy', () => {
         ]);
       });
 
-      it('renders a list with `3 collapsed + max 1 item`, between 800 and 1000px', () => {
+      it('renders a list with `3 collapsed + max 1 item`, between 735 and 1000px', () => {
         changeSize(900);
         const items = wrapper.findAll(HierarchyItem);
         // assert what items are shown
@@ -291,7 +291,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[0]].url,
         });
 
-        // next assert the collapsible items. 3, as 1 can live between 800 and 1000
+        // next assert the collapsible items. 3, as 1 can live between 735 and 1000
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
@@ -330,8 +330,8 @@ describe('Hierarchy', () => {
         ]);
       });
 
-      it('renders a list with `5 collapsed and no external links`, below 800', () => {
-        changeSize(750);
+      it('renders a list with `5 collapsed and no external links`, below 735', () => {
+        changeSize(720);
         const items = wrapper.findAll(HierarchyItem);
         // assert what items are shown
         // assert there is no root item
@@ -340,7 +340,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[0]].url,
         });
 
-        // next assert the collapsible items. 4, as 0 can live outside below 800
+        // next assert the collapsible items. 5, as 0 can live outside below 735
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
@@ -492,7 +492,7 @@ describe('Hierarchy', () => {
         ]);
       });
 
-      it('renders a list with `5 collapsed and no external`, with tags, between 800 and 1000px', () => {
+      it('renders a list with `5 collapsed and no external`, with tags, between 735 and 1000px', () => {
         changeSize(900);
         wrapper.setProps({
           isSymbolBeta: true,
@@ -505,7 +505,7 @@ describe('Hierarchy', () => {
           class: 'root-hierarchy',
           url: references[parentTopicIdentifiers[0]].url,
         });
-        // next assert the collapsible items. 3, as 1 can live between 800 and 1000
+        // next assert the collapsible items. 3, as 1 can live between 735 and 1000
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
@@ -548,7 +548,7 @@ describe('Hierarchy', () => {
         ]);
       });
 
-      it('renders a list with `5 collapsed and no external`,with tags below 800', () => {
+      it('renders a list with `5 collapsed and no external`,with tags below 735', () => {
         changeSize(700);
         wrapper.setProps({
           isSymbolBeta: true,
@@ -562,7 +562,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[0]].url,
         });
 
-        // next assert the collapsible items. 3, as 1 can live between 800 and 1000
+        // next assert the collapsible items. 3, as 1 can live between 735 and 1000
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
@@ -612,6 +612,7 @@ describe('Hierarchy', () => {
   });
 
   it('renders a beta badge', () => {
+    changeSize(1250);
     const wrapper = mountWithProps({
       propsData: {
         currentTopicTitle: 'Foo',
@@ -648,7 +649,9 @@ describe('Hierarchy', () => {
       },
     });
 
-    const badges = wrapper.findAll(Badge);
+    const HierarchyItems = wrapper.findAll(HierarchyItem);
+    // The badges are rendered inside the last HierarchyItem slot
+    const badges = HierarchyItems.at(HierarchyItems.length - 1).findAll(Badge);
     expect(badges).toHaveLength(3);
     expect(badges.at(0).props('variant')).toBe('deprecated');
     expect(badges.at(0).text()).toBe('aside-kind.deprecated');

From e4f2d9bfbe471f46cf183fe2b2d60fd17f3e8771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Thu, 8 Feb 2024 20:31:32 +0100
Subject: [PATCH 44/52] [rdar://116401230] fix: don't apply figure-blue color
 to nav-menu-link

---
 src/components/DocumentationTopic/Hero/DocumentationHero.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocumentationTopic/Hero/DocumentationHero.vue b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
index 5145baf15..30370a541 100644
--- a/src/components/DocumentationTopic/Hero/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/Hero/DocumentationHero.vue
@@ -238,7 +238,7 @@ $doc-hero-icon-dimension: 250px;
   // apply extra bottom padding when shouldShowLanguageSwitcher
   padding-bottom: rem(65px);
 }
-.theme-dark :deep(a:not(.button-cta)) {
+.theme-dark :deep(a:not(.button-cta, .nav-menu-link)) {
   color: dark-color(figure-blue);
 }
 </style>

From 34d4fdd3de1c5a0b70df762dbee60b9ad9b6f4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 9 Feb 2024 16:34:20 +0100
Subject: [PATCH 45/52] [rdar://116401230] refactor: use NavMenuLink for
 HierarchyCollapsedItems

---
 src/components/DocumentationTopic.vue         |  2 +-
 .../DocumentationTopic/Hero/Hierarchy.vue     |  5 +--
 .../Hero/HierarchyCollapsedItems.vue          | 18 +++++------
 .../DocumentationTopic/Hero/Hierarchy.spec.js | 32 ++++++++++++-------
 .../Hero/HierarchyCollapsedItems.spec.js      | 26 +++++++++++----
 5 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 2537743f5..0306fa9da 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,7 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
-          v-if="hierarchyItems && !enableMinimized && !isTargetIDE"
+          v-if="hierarchyItems.length && !enableMinimized && !isTargetIDE"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
diff --git a/src/components/DocumentationTopic/Hero/Hierarchy.vue b/src/components/DocumentationTopic/Hero/Hierarchy.vue
index 35ad7c209..f871b1c90 100644
--- a/src/components/DocumentationTopic/Hero/Hierarchy.vue
+++ b/src/components/DocumentationTopic/Hero/Hierarchy.vue
@@ -26,7 +26,7 @@
       v-for="topic in collapsibleItems"
       :key="topic.title"
       isCollapsed
-      :url="topic.url ? addQueryParamsToUrl(topic.url) : null"
+      :url="addQueryParamsToUrl(topic.url)"
     >
       {{ topic.title }}
     </HierarchyItem>
@@ -153,7 +153,7 @@ export default {
       return 0;
     },
     collapsibleItems: ({
-      smallViewport, parentTopics, linksAfterCollapse, currentTopicTitle,
+      smallViewport, parentTopics, linksAfterCollapse, currentTopicTitle, $route,
     }) => {
       // if there are links, slice all except those, otherwise get all but the root
       const collapsibleItems = linksAfterCollapse
@@ -162,6 +162,7 @@ export default {
       if (smallViewport) {
         collapsibleItems.push({
           title: currentTopicTitle,
+          url: $route.path,
         });
       }
       return collapsibleItems;
diff --git a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
index f98514c88..20c5bad12 100644
--- a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
+++ b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue
@@ -20,10 +20,9 @@
     </button>
     <ul class="dropdown" ref="dropdown" :class="{ collapsed }">
       <li v-for="topic in formattedTopics" class="dropdown-item" :key="topic.title">
-        <router-link v-if="topic.url" class="nav-menu-link" :to="topic.url">
+        <NavMenuLink :url="topic.url">
           {{ topic.title }}
-        </router-link>
-        <span class="nav-menu-link" v-else>{{ topic.title }}</span>
+        </NavMenuLink>
       </li>
     </ul>
   </li>
@@ -32,10 +31,11 @@
 <script>
 import { buildUrl } from 'docc-render/utils/url-helper';
 import EllipsisIcon from 'theme/components/Icons/EllipsisIcon.vue';
+import NavMenuLink from 'docc-render/components/NavMenuLink.vue';
 
 export default {
   name: 'HierarchyCollapsedItems',
-  components: { EllipsisIcon },
+  components: { EllipsisIcon, NavMenuLink },
   data: () => ({ collapsed: true }),
   props: {
     topics: {
@@ -63,12 +63,10 @@ export default {
     formattedTopics: ({
       $route,
       topics,
-    }) => topics.map(topic => (
-      !topic.url ? topic : {
-        ...topic,
-        url: buildUrl(topic.url, $route.query),
-      }
-    )),
+    }) => topics.map(topic => ({
+      ...topic,
+      url: buildUrl(topic.url, $route.query),
+    })),
   },
   methods: {
     handleDocumentClick(event) {
diff --git a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
index b9f28edf0..a0e7fea3c 100644
--- a/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/Hierarchy.spec.js
@@ -52,6 +52,8 @@ const qux = {
   url: '/documentation/foo/bar/baz/qux',
 };
 
+const currentPath = '/foo';
+
 const references = {
   [foo.identifier]: foo,
   [bar.identifier]: bar,
@@ -81,6 +83,8 @@ const mountWithProps = ({ propsData, ...others } = {}) => shallowMount(Hierarchy
   },
   mocks: {
     $route: {
+      name: 'foo',
+      path: '/foo',
       query: { language: 'objc' },
     },
   },
@@ -183,6 +187,8 @@ describe('Hierarchy', () => {
         },
         mocks: {
           $route: {
+            name: 'foo',
+            path: currentPath,
             query: {},
           },
         },
@@ -223,8 +229,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({
-        });
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -263,8 +268,7 @@ describe('Hierarchy', () => {
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
-        expect(items.at(5).attributes()).toEqual({
-        });
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -308,8 +312,8 @@ describe('Hierarchy', () => {
         expect(items.at(4).attributes()).toEqual({
           url: references[parentTopicIdentifiers[4]].url,
         });
-        expect(items.at(5).attributes()).toEqual({
-        });
+        // assert the last item has no attributes
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -359,6 +363,7 @@ describe('Hierarchy', () => {
         });
         expect(items.at(5).attributes()).toEqual({
           iscollapsed: 'true',
+          url: currentPath,
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -383,6 +388,7 @@ describe('Hierarchy', () => {
           },
           {
             title: qux.title,
+            url: currentPath,
           },
         ]);
       });
@@ -423,8 +429,8 @@ describe('Hierarchy', () => {
         expect(items.at(4).attributes()).toEqual({
           url: references[parentTopicIdentifiers[4]].url,
         });
-        expect(items.at(5).attributes()).toEqual({
-        });
+        // assert the last item has no attributes
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -470,8 +476,8 @@ describe('Hierarchy', () => {
         expect(items.at(4).attributes()).toEqual({
           url: references[parentTopicIdentifiers[4]].url,
         });
-        expect(items.at(5).attributes()).toEqual({
-        });
+        // assert the last item has no attributes
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -522,8 +528,8 @@ describe('Hierarchy', () => {
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
-        expect(items.at(5).attributes()).toEqual({
-        });
+        // assert the last item has no attributes
+        expect(items.at(5).attributes()).toEqual({});
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
         const collapsedItems = wrapper.find(HierarchyCollapsedItems);
@@ -581,6 +587,7 @@ describe('Hierarchy', () => {
         });
         expect(items.at(5).attributes()).toEqual({
           iscollapsed: 'true',
+          url: currentPath,
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -605,6 +612,7 @@ describe('Hierarchy', () => {
           },
           {
             title: qux.title,
+            url: currentPath,
           },
         ]);
       });
diff --git a/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
index bdae0a8d2..f3a76f66e 100644
--- a/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
+++ b/tests/unit/components/DocumentationTopic/Hero/HierarchyCollapsedItems.spec.js
@@ -8,12 +8,22 @@
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
 
-import { RouterLinkStub, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import HierarchyCollapsedItems
   from 'docc-render/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue';
 import EllipsisIcon from 'theme/components/Icons/EllipsisIcon.vue';
 
-const mocks = { $route: {} };
+const mocks = {
+  $route: {
+    name: 'foo',
+    path: '/foo',
+    query: {
+      foo: 'bar',
+    },
+  },
+};
+
+const { NavMenuLink } = HierarchyCollapsedItems.components;
 
 const propsData = {
   topics: [
@@ -28,7 +38,7 @@ const propsData = {
   ],
 };
 
-const stubs = { 'router-link': RouterLinkStub };
+const stubs = { NavMenuLink };
 
 describe('HierarchyCollapsedItems', () => {
   let wrapper;
@@ -59,9 +69,9 @@ describe('HierarchyCollapsedItems', () => {
 
     const items = dropdown.findAll('li.dropdown-item');
     propsData.topics.forEach((topic, i) => {
-      const link = items.at(i).find(RouterLinkStub);
+      const link = items.at(i).find(NavMenuLink);
       expect(link.exists()).toBe(true);
-      expect(link.props('to')).toBe(topic.url);
+      expect(link.props('url')).toBe(topic.url);
       expect(link.text()).toBe(topic.title);
     });
   });
@@ -87,15 +97,17 @@ describe('HierarchyCollapsedItems', () => {
     const wrapper2 = shallowMount(HierarchyCollapsedItems, {
       mocks: {
         $route: {
+          name: 'foo',
+          path: '/foo',
           query: { language: 'objc' },
         },
       },
       propsData,
       stubs,
     });
-    const link = wrapper2.find(RouterLinkStub);
+    const link = wrapper2.find(NavMenuLink);
     expect(link.exists()).toBe(true);
-    expect(link.props('to')).toBe('/documentation/foo?language=objc');
+    expect(link.props('url')).toBe('/documentation/foo?language=objc');
     expect(link.classes()).toContain('nav-menu-link');
   });
 });

From 32648985dac53c8d394ddd9454be2cec9bf40823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 9 Feb 2024 17:28:31 +0100
Subject: [PATCH 46/52] [rdar://116401230] refactor: hierarchyItems has a
 default value

---
 src/components/DocumentationTopic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 0306fa9da..e68644edc 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -400,7 +400,7 @@ export default {
     },
     hierarchyItems: {
       type: Array,
-      required: false,
+      default: () => ([]),
     },
   },
   provide() {

From 2fd3988144853f8f9869f9740c06819155b10875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Fri, 9 Feb 2024 17:46:11 +0100
Subject: [PATCH 47/52] [rdar://116401230] fix: get height from parent element
 if it's displayed

---
 src/components/Navigator/NavigatorCard.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index cf9249313..016aef91b 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -938,7 +938,11 @@ export default {
       const { y: areaY, height: areaHeight } = this.$refs.scroller.$el.getBoundingClientRect();
       // get the position of the active element
       const { y: elY } = element.getBoundingClientRect();
-      const elHeight = element.offsetParent.offsetHeight;
+      let elHeight = 0;
+      // get height from parent element if it's displayed
+      if (element.offsetParent) {
+        elHeight = element.offsetParent.offsetHeight;
+      }
       // calculate where element starts from
       const elementStart = elY - areaY - offset.top;
       // element is above the scrollarea

From 1b17dd75d5cc6ef8272901350b69d2531fca6fd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Mon, 12 Feb 2024 20:14:10 +0100
Subject: [PATCH 48/52] [rdar://116401230] chore: update nav-menu-setting color
 and font-weight

---
 src/components/DocumentationTopic/DocumentationNav.vue | 4 ++++
 src/styles/core/colors/_light.scss                     | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 7ea626e91..273b7e03f 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -150,6 +150,10 @@ $sidenav-icon-padding-size: 5px;
       margin-left: 0;
       min-width: 0;
 
+      .nav-menu-link, .current-language, span {
+        font-weight: $font-weight-semibold;
+      }
+
       &:first-child:not(:only-child) {
         margin-right: $nav-space-between-elements;
 
diff --git a/src/styles/core/colors/_light.scss b/src/styles/core/colors/_light.scss
index 788a73dcc..57a903b3f 100644
--- a/src/styles/core/colors/_light.scss
+++ b/src/styles/core/colors/_light.scss
@@ -98,8 +98,8 @@
   --color-hero-eyebrow: #{dark-color(figure-gray-secondary)};
   --color-link: var(--color-figure-blue);
   --color-loading-placeholder-background: var(--color-fill);
-  --color-nav-color: #{light-color(figure-gray-secondary-alt)};
-  --color-nav-current-link: #{change-color(light-color(figure-gray), $alpha: 0.6)};
+  --color-nav-color: #{light-color(figure-gray)};
+  --color-nav-current-link: #{change-color(light-color(figure-gray))};
   --color-nav-expanded: #{light-color(fill)};
   --color-nav-hierarchy-collapse-background: #{light-color(fill-gray-tertiary)};
   --color-nav-hierarchy-collapse-borders: #{dark-color(figure-gray-secondary)};
@@ -116,8 +116,8 @@
   --color-nav-uiblur-stuck: #{change-color(light-color(fill), $alpha: 0.7)};
   --color-nav-root-subhead: var(--color-tutorials-teal);
   --color-nav-dark-border-top-color: #{change-color(light-color(fill), $alpha: 0.4)};
-  --color-nav-dark-color: #{dark-color(figure-gray-secondary-alt)};
-  --color-nav-dark-current-link: #{change-color(dark-color(figure-gray), $alpha: 0.6)};
+  --color-nav-dark-color: #{dark-color(figure-gray)};
+  --color-nav-dark-current-link: #{change-color(dark-color(figure-gray))};
   --color-nav-dark-expanded: #{dark-color(fill-tertiary)};
   --color-nav-dark-hierarchy-collapse-background: #{dark-color(fill-gray-tertiary)};
   --color-nav-dark-hierarchy-collapse-borders: #{light-color(figure-gray-secondary)};

From 67b26a0facc2501e617d836950be2fdef3110485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 13 Feb 2024 13:31:36 +0100
Subject: [PATCH 49/52] [rdar://116401230] feat: emit navigate

---
 src/components/Navigator/NavigatorCard.vue            | 4 +++-
 tests/unit/components/Navigator/NavigatorCard.spec.js | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 016aef91b..e61d6771f 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -1006,9 +1006,11 @@ export default {
      * that points to another technology.
      */
     handleNavigationChange(uid) {
+      const path = this.childrenMap[uid].path;
       // if the path is outside of this technology tree, dont store the uid
-      if (this.childrenMap[uid].path.startsWith(this.technologyPath)) {
+      if (path.startsWith(this.technologyPath)) {
         this.setActiveUID(uid);
+        this.$emit('navigate', path);
       }
     },
     /**
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index ae66040dc..ac4f81133 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -2133,6 +2133,7 @@ describe('NavigatorCard', () => {
           ],
           path: root0Child1.path,
         }));
+      expect(wrapper.emitted('navigate')).toEqual([[root0Child1.path]]);
       // assert all items are still there, even the new one is open
       expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(5);
       // assert the target child is active
@@ -2336,6 +2337,7 @@ describe('NavigatorCard', () => {
       expect(sessionStorage.set).toHaveBeenCalledTimes(2);
       await wrapper.vm.$nextTick();
       expect(sessionStorage.set).toHaveBeenCalledTimes(2);
+      expect(wrapper.emitted('navigate')).toBeFalsy();
     });
   });
 

From 4379e288d5506aebe863974b0be1dc77bda8da63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 13 Feb 2024 16:31:34 +0100
Subject: [PATCH 50/52] [rdar://116401230] fix: UI bug affecting the navigator
 height

---
 src/components/Navigator/BaseNavigatorCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigator/BaseNavigatorCard.vue b/src/components/Navigator/BaseNavigatorCard.vue
index 11d3ff5f7..ba7651a71 100644
--- a/src/components/Navigator/BaseNavigatorCard.vue
+++ b/src/components/Navigator/BaseNavigatorCard.vue
@@ -148,6 +148,7 @@ $close-icon-padding: 5px;
   flex-flow: column;
   height: 100%;
   padding-top: $navigator-card-vertical-spacing;
+  box-sizing: border-box;
 
   @include breakpoint(medium, nav) {
     padding-top: 0;

From edc6e1874710e22e42f8aa4d4705071763f75a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 13 Feb 2024 21:32:40 +0100
Subject: [PATCH 51/52] [rdar://116401230] fix: hierarchy in
 parentTopicIdentifiers

---
 src/components/DocumentationTopic.vue            | 2 +-
 src/views/DocumentationTopic.vue                 | 4 +++-
 tests/unit/components/DocumentationTopic.spec.js | 8 ++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index e68644edc..b2acf7eef 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -31,7 +31,7 @@
         </template>
         <slot name="above-title" />
         <Hierarchy
-          v-if="hierarchyItems.length && !enableMinimized && !isTargetIDE"
+          v-if="hierarchyItems.length && !enableMinimized"
           :currentTopicTitle="title"
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index 0394e5603..cdb0f8976 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -204,7 +204,9 @@ export default {
     // representing a "path" of parent topic IDs that could be considered the
     // hierarchy/breadcrumb for a given topic. We choose to render only the
     // one, that has the same path as the current URL.
-    parentTopicIdentifiers: ({ topicProps: { hierarchy: { paths = [] }, references }, $route }) => {
+    parentTopicIdentifiers: ({ topicProps: { hierarchy, references }, $route }) => {
+      if (!hierarchy) return [];
+      const { paths = [] } = hierarchy;
       if (!paths.length) return [];
       return paths.find((identifiers) => {
         const rootIdentifier = identifiers.find(id => references[id] && references[id].kind !== 'technologies');
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index c80106b2e..a96cf95a1 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -330,12 +330,8 @@ describe('DocumentationTopic', () => {
     });
   });
 
-  it('does not render a Hierarchy in IDE mode', () => {
-    const provide = {
-      isTargetIDE: true,
-      store: mockStore,
-    };
-    wrapper = shallowMount(DocumentationTopic, { propsData, provide });
+  it('does not render a Hierarchy if hierarchyItems is empty or enableMinimized is true', () => {
+    wrapper.setProps({ hierarchyItems: [] });
     expect(wrapper.find(Hierarchy).exists()).toBe(false);
 
     // Minimized view should not render LanguageSwitcher

From 29b7d4aa4715e0ebca97f160ec20da64e0a76366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20A=C3=ADsa?= <marina.aisa@apple.com>
Date: Tue, 13 Feb 2024 21:32:58 +0100
Subject: [PATCH 52/52] [rdar://116401230] fix: this..scroller

---
 src/components/Navigator/NavigatorCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index e61d6771f..6f6c18370 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -957,6 +957,7 @@ export default {
       return 0;
     },
     isInsideScroller(element) {
+      if (!this.$refs.scroller) return false;
       return this.$refs.scroller.$el.contains(element);
     },
     handleFocusIn({ target }) {