@redocly/theme 0.65.0-next.3 → 0.65.0-next.4

package/src/components/Catalog/variables.ts

@@ -148,6 +148,7 @@ export const catalog = css`
     */
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-row-gap: var(--spacing-xxs);
   --catalog-tags-placeholder-bg-color: var(--bg-color);
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);

package/src/components/Markdown/Markdown.tsx

@@ -6,6 +6,17 @@ import { typography } from '@redocly/theme/core/utils';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
+import {
+  ANCHOR_CLASS,
+  H1_CLASS,
+  H2_CLASS,
+  H3_CLASS,
+  H4_CLASS,
+  H5_CLASS,
+  H6_CLASS,
+  HEADING_ANCHOR_CLASS,
+  MARKDOWN_CLASS_NAME,
+} from '@redocly/theme/core/constants';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;
@@ -66,17 +77,82 @@ export const Markdown = styled.main.attrs<{
     max-width: 100%;
   }
 
-  h1.md,
-  h2.md,
-  h3.md,
-  h4.md,
-  h5.md,
-  h6.md {
+  .${HEADING_ANCHOR_CLASS} {
     font-weight: var(--heading-font-weight);
     font-family: var(--heading-font-family);
     position: relative;
 
     scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    ${headingAnchorCss(ANCHOR_CLASS)};
+
+    h1, h2, h3, h4, h5, h6 {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-sm);
+      margin: 0;
+      font: inherit;
+      color: inherit;
+    }
+  }
+
+  .${H1_CLASS} {
+    ${typography('h1')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+
+    h1 code {
+      font-size: var(--h1-font-size);
+      line-height: var(--h1-code-line-height);
+    }
+  }
+
+  .${H2_CLASS} {
+    ${typography('h2')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+
+    h2 code {
+      font-size: var(--h2-font-size);
+      line-height: var(--h2-code-line-height);
+    }
+  }
+
+  .${H3_CLASS} {
+    ${typography('h3')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+
+    h3 code {
+      font-size: var(--h3-font-size);
+      line-height: var(--h3-code-line-height);
+    }
+  }
+
+  .${H4_CLASS} {
+    ${typography('h4')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+
+    h4 code {
+      font-size: var(--h4-font-size);
+      line-height: var(--h4-code-line-height);
+    }
+  }
+
+  .${H5_CLASS} {
+    ${typography('h5')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+
+    h5 code {
+      font-size: var(--h5-font-size);
+      line-height: var(--h5-code-line-height);
+    }
+  }
+
+  .${H6_CLASS} {
+    ${typography('h6')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+
+    h6 code {
+      font-size: var(--h6-font-size);
+      line-height: var(--h6-code-line-height);
+    }
   }
 
   strong {
@@ -120,71 +196,71 @@ export const Markdown = styled.main.attrs<{
     margin: var(--md-paragraph-margin);
   }
 
-  h1.md {
+  /**
+   * @deprecated Legacy styles for ejected Heading components that render h1-h6 as the root.
+   *
+   * Deprecated legacy heading styles start.
+   */
+  h1.${MARKDOWN_CLASS_NAME} {
     ${typography('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h2.md {
+  h2.${MARKDOWN_CLASS_NAME} {
     ${typography('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h3.md {
+  h3.${MARKDOWN_CLASS_NAME} {
     ${typography('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h4.md {
+  h4.${MARKDOWN_CLASS_NAME} {
     ${typography('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h5.md {
+  h5.${MARKDOWN_CLASS_NAME} {
     ${typography('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h6.md {
+  h6.${MARKDOWN_CLASS_NAME} {
     ${typography('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h1.md code {
+  h1.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h1-font-size);
     line-height: var(--h1-code-line-height);
   }
 
-  h2.md code {
+  h2.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h2-font-size);
     line-height: var(--h2-code-line-height);
   }
 
-  h3.md code {
+  h3.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h3-font-size);
     line-height: var(--h3-code-line-height);
   }
 
-  h4.md code {
+  h4.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h4-font-size);
     line-height: var(--h4-code-line-height);
   }
 
-  h5.md code {
+  h5.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h5-font-size);
     line-height: var(--h5-code-line-height);
   }
 
-  h6.md code {
+  h6.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h6-font-size);
     line-height: var(--h6-code-line-height);
   }
+  /* Deprecated legacy heading styles end. */
 
   code {
     color: var(--inline-code-text-color);
@@ -248,8 +324,8 @@ export const Markdown = styled.main.attrs<{
     }
   }
 
-  ul.md,
-  ol.md {
+  ul.${MARKDOWN_CLASS_NAME},
+  ol.${MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

package/src/components/Markdown/styles/base-table.ts

@@ -1,11 +1,13 @@
 import { css } from 'styled-components';
 
+import { MARKDOWN_CLASS_NAME } from '@redocly/theme/core/constants';
+
 export const markdownBaseTableCss = css`
   .md-table-wrapper {
     overflow-x: auto;
   }
 
-  table.md {
+  table.${MARKDOWN_CLASS_NAME} {
     width: 100%;
     overflow: hidden;
     word-break: keep-all;

package/src/components/Markdown/styles/heading-anchor.ts

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 
 import type { FlattenSimpleInterpolation } from 'styled-components';
 
-export function headingAnchorCss(className = 'anchor'): FlattenSimpleInterpolation {
+export function headingAnchorCss(className: string): FlattenSimpleInterpolation {
   return css`
     .${className}.before {
       position: absolute;

package/src/components/Search/variables.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-/* eslint-disable theme/no-raw-colors-in-styles */
+ 
 export const search = css`
   /**
     * @tokens Search
@@ -146,7 +146,7 @@ export const search = css`
   * @tokens AI Search
   */
 
-  --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
+  --search-ai-gradient: linear-gradient(to right, var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy)), var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy)));
 
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
@@ -262,4 +262,4 @@ export const search = css`
 
   // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
+ 

package/src/core/constants/heading.ts

@@ -0,0 +1,9 @@
+export const HEADING_ANCHOR_CLASS = 'heading-anchor';
+export const ANCHOR_CLASS = 'anchor';
+export const HEADING_CLASS_PREFIX = 'heading-level';
+export const H1_CLASS = `${HEADING_CLASS_PREFIX}-1`;
+export const H2_CLASS = `${HEADING_CLASS_PREFIX}-2`;
+export const H3_CLASS = `${HEADING_CLASS_PREFIX}-3`;
+export const H4_CLASS = `${HEADING_CLASS_PREFIX}-4`;
+export const H5_CLASS = `${HEADING_CLASS_PREFIX}-5`;
+export const H6_CLASS = `${HEADING_CLASS_PREFIX}-6`;

package/src/core/constants/index.ts

@@ -7,3 +7,5 @@ export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
 export * from './feedback';
+export * from './heading';
+export * from './markdown';

package/src/core/constants/markdown.ts

@@ -0,0 +1 @@
+export const MARKDOWN_CLASS_NAME = 'md';

package/src/core/hooks/use-active-heading.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { enhancedSmoothstep } from '../utils';
+import { HEADING_ANCHOR_CLASS } from '../constants';
 
 type HeadingEntry = {
   [key: string]: IntersectionObserverEntry;
@@ -59,7 +60,7 @@ export function useActiveHeading(
   );
 
   const findHeaders = (allContent: HTMLDivElement) => {
-    const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
+    const allHeaders = allContent.querySelectorAll<HTMLElement>(`.${HEADING_ANCHOR_CLASS}`);
     const headers = Array.from(allHeaders);
 
     if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {

package/src/core/styles/palette.dark.ts

@@ -20,6 +20,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #55576166;
         --color-brand-subtle-4: #6e6f7a66;
         --text-color-on-color: #000000;
+
+        --search-ai-gradient-start-color: var(--color-brand-3); 
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
     case 'pink':
       return css`
@@ -39,6 +42,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #85366866;
         --color-brand-subtle-4: #a03a7b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'coral':
       return css`
@@ -58,6 +64,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #8b3c4266;
         --color-brand-subtle-4: #a9434c66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'amber':
       return css`
@@ -77,6 +86,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #93632f66;
         --color-brand-subtle-4: #b6732a66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'jade':
       return css`
@@ -96,6 +108,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #2b715e66;
         --color-brand-subtle-4: #2b816b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4);
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
     case 'cyan':
       return css`
@@ -115,6 +130,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #246e7f66;
         --color-brand-subtle-4: #1b809766;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'ocean':
       return css`
@@ -134,6 +152,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #2a679566;
         --color-brand-subtle-4: #2277b966;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'indigo':
       return css`
@@ -153,6 +174,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #36498866;
         --color-brand-subtle-4: #3952a466;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     case 'iris':
       return css`
@@ -172,6 +196,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --color-brand-subtle-3: #43438580;
         --color-brand-subtle-4: #4c4ca080;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
     default:
       return css`

package/src/core/styles/palette.ts

@@ -18,6 +18,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-10); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-7); // @presenter Color
       `;
     case 'pink':
       return css`
@@ -35,6 +38,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-7); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'coral':
       return css`
@@ -52,6 +58,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'amber':
       return css`
@@ -69,6 +78,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-7); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'jade':
       return css`
@@ -86,6 +98,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-5); // @presenter Color
       `;
     case 'cyan':
       return css`
@@ -103,6 +118,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'ocean':
       return css`
@@ -120,6 +138,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'indigo':
       return css`
@@ -137,6 +158,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     case 'iris':
       return css`
@@ -154,6 +178,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --text-color-on-color: #ffffff; // @presenter Color
 
         --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     default:
       return css`
@@ -200,6 +227,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
         --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
         --link-color-visited-legacy: var(--color-purple-7); // @presenter Color
+
+        --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
+        --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
       `;
   }
 }

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -36,8 +36,14 @@ const Icon = (props: AiStarsGradientIconProps) => {
       {!isColorOverridden && (
         <defs>
           <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stopColor="#715efe" />
-            <stop offset="100%" stopColor="#ff5cdc" />
+            <stop
+              offset="0%"
+              stopColor="var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy))"
+            />
+            <stop
+              offset="100%"
+              stopColor="var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy))"
+            />
           </linearGradient>
         </defs>
       )}

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
+import { H1_CLASS } from '@redocly/theme/core/constants';
 import { breakpoints } from '@redocly/theme/core/utils';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
@@ -76,7 +77,8 @@ const ContentWrapper = styled.section`
       margin-right: auto;
     }
 
-    &:first-child > h1:first-child {
+    &:first-child > h1:first-child,
+    &:first-child > .${H1_CLASS}:first-child {
       // disable margin top for h1 on the title heading
       margin-top: 0;
     }

package/src/layouts/DocumentationLayout.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
 import { breakpoints } from '@redocly/theme/core/utils';
+import { H1_CLASS } from '@redocly/theme/core/constants';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
 import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
@@ -70,7 +71,8 @@ const ContentWrapper = styled.section<{ withToc: boolean }>`
 
   padding: var(--md-content-padding);
 
-  article:first-child > h1:first-child {
+  article:first-child > h1:first-child,
+  article:first-child > .${H1_CLASS}:first-child {
     // disable margin top for h1 on the title heading
     margin-top: 0;
   }

package/src/markdoc/components/Heading/Heading.tsx

@@ -9,6 +9,12 @@ import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import {
+  ANCHOR_CLASS,
+  HEADING_ANCHOR_CLASS,
+  HEADING_CLASS_PREFIX,
+  MARKDOWN_CLASS_NAME,
+} from '@redocly/theme/core/constants';
 
 function renderWithSpanWrapper(children: ReactNode): ReactNode {
   const childrenArray = React.Children.toArray(children);
@@ -39,11 +45,6 @@ function renderWithSpanWrapper(children: ReactNode): ReactNode {
   );
 }
 
-/**
- * Class name for all MD tags
- */
-const mdClassName = 'md';
-
 export function Heading({
   level,
   id,
@@ -66,31 +67,43 @@ export function Heading({
 
   const isMarkdownPage =
     pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
+  const headingTextId = `${id}-heading-text`;
 
   const linkEl = (
     <a
-      aria-label={`link  to ${id}`}
+      aria-labelledby={headingTextId}
       href={`#${id}`}
-      className={concatClassNames('anchor', 'before')}
+      className={concatClassNames(ANCHOR_CLASS, 'before')}
     >
-      <LinkIcon color="--heading-anchor-color" />
+      <LinkIcon aria-hidden="true" focusable="false" color="--heading-anchor-color" />
     </a>
   );
 
-  return createElement(
+  const headingText = createElement(
     `h${level}`,
-    {
-      id,
-      className: concatClassNames('heading-anchor', mdClassName, className),
-      'data-component-name': 'Markdoc/Heading/Heading',
-      'data-source': dataSource,
-      'data-hash': dataHash,
-    },
-    <HeadingContentWrapper>
-      {linkEl}
-      <span>{renderWithSpanWrapper(children)}</span>
-      {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
-    </HeadingContentWrapper>,
+    { id: headingTextId },
+    renderWithSpanWrapper(children),
+  );
+
+  return (
+    <div
+      id={id}
+      className={concatClassNames(
+        HEADING_ANCHOR_CLASS,
+        MARKDOWN_CLASS_NAME,
+        `${HEADING_CLASS_PREFIX}-${level}`,
+        className,
+      )}
+      data-component-name="Markdoc/Heading/Heading"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <HeadingContentWrapper>
+        {linkEl}
+        {headingText}
+        {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+      </HeadingContentWrapper>
+    </div>
   );
 }
 
@@ -98,20 +111,14 @@ const HeadingContentWrapper = styled.div`
   display: flex;
   gap: var(--spacing-xs);
 
-  & > .anchor {
+  & > .${ANCHOR_CLASS} {
     display: flex;
     align-items: center;
     height: 1lh;
   }
 
-  & > span {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
-  }
-
   &:has([data-component-name='PageActions/PageActions']:hover) {
-    && .anchor svg {
+    && .${ANCHOR_CLASS} svg {
       visibility: hidden;
     }
   }