@astryxdesign/core 0.1.0 → 0.1.1-canary.129bf0e

package/src/Lightbox/Lightbox.doc.mjs

@@ -30,7 +30,6 @@ export const docs = {
       name: 'index',
       type: 'number',
       description: 'Current index in gallery mode (when media is an array).',
-      default: '0',
     },
     {
       name: 'onIndexChange',
@@ -94,7 +93,6 @@ export const docsZh = {
       name: 'index',
       type: 'number',
       description: '画廊模式中当前索引。',
-      default: '0',
     },
     {
       name: 'onIndexChange',

package/src/Link/Link.doc.mjs

@@ -99,7 +99,7 @@ export const docs = {
       isHiddenFromOverview: true,
       displayName: 'Link Provider',
       description:
-        'Provider that sets the default link component for all XDS link-rendering components in the subtree. ' +
+        'Provider that sets the default link component for all Astryx link-rendering components in the subtree. ' +
         'Wrap your app root to replace native <a> elements with your framework router (Next.js Link, React Router Link, etc.).',
       props: [
         {
@@ -226,7 +226,7 @@ export const docsZh = {
       isHiddenFromOverview: true,
       displayName: 'Link Provider',
       description:
-        '为子树中所有 XDS 链接组件设置默认链接组件的 Provider。',
+        '为子树中所有 Astryx 链接组件设置默认链接组件的 Provider。',
       props: [
         {
           name: 'component',
@@ -310,7 +310,7 @@ export const docsDense = {
       isHiddenFromOverview: true,
       displayName: 'Link Provider',
       description:
-        'Provider setting default link component for all XDS links in subtree.',
+        'Provider setting default link component for all Astryx links in subtree.',
       propDescriptions: {
         component: 'Component for all link elements',
         children: 'Subtree',

package/src/Link/LinkProvider.doc.mjs

@@ -10,7 +10,7 @@ export const docs = {
   isHiddenFromOverview: true,
   keywords: ['link', 'provider', 'router', 'nextjs', 'client-side-routing'],
   usage: {
-    description: 'Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all XDS components.',
+    description: 'Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   },
   props: [
     {name: 'component', type: 'LinkComponentType', required: true, description: 'Link component to use for all link elements in the subtree (e.g. Next.js Link).'},
@@ -20,9 +20,9 @@ export const docs = {
 
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
-  description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all XDS components.',
+  description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   usage: {
-    description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all XDS components.',
+    description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   },
   propDescriptions: {
     component: 'link component for all link elements in subtree (e.g. Next.js Link)',

package/src/Markdown/Markdown.doc.mjs

@@ -75,6 +75,7 @@ export const docs = {
       type: 'number | string',
       description:
         'Max width for prose content (paragraphs, headings, lists, blockquotes). Tables and code blocks are unconstrained and can expand to the full container width. Use for readable line lengths in wide layouts.',
+      default: '680',
     },
     {
       name: 'contentAlign',
@@ -131,7 +132,7 @@ export const docs = {
   },
   usage: {
     description:
-      'Renders a markdown string as XDS-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
+      'Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
     bestPractices: [
       { guidance: true, description: 'Set headingLevelStart to match the page hierarchy, e.g. start at 3 if the markdown sits inside an h2 section.' },
       { guidance: true, description: 'Use contentWidth to keep prose at a readable line length in wide layouts.' },
@@ -245,6 +246,7 @@ export const docsZh = {
       type: 'number | string',
       description:
         '正文内容的最大宽度（段落、标题、列表、引用块）。表格和代码块不受限制，可扩展到完整容器宽度。用于在宽布局中保持可读行长。',
+      default: '680',
     },
     {
       name: 'contentAlign',
@@ -294,7 +296,7 @@ export const docsZh = {
   },
   usage: {
     description:
-      'Renders a markdown string as XDS-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
+      'Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
     bestPractices: [
       { guidance: true, description: 'Set headingLevelStart to match the page hierarchy, e.g. start at 3 if the markdown sits inside an h2 section.' },
       { guidance: true, description: 'Use contentWidth to keep prose at a readable line length in wide layouts.' },
@@ -306,10 +308,10 @@ export const docsZh = {
 
 export const docsDense = {
   description:
-    'Renders markdown string as XDS-styled components. Use for user-generated content, AI responses, docs. Headings, lists, tables, code, citations w/ consistent styling.',
+    'Renders markdown string as Astryx-styled components. Use for user-generated content, AI responses, docs. Headings, lists, tables, code, citations w/ consistent styling.',
   usage: {
     description:
-      'Renders a markdown string as XDS-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
+      'Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.',
     bestPractices: [
       { guidance: true, description: 'Set headingLevelStart to match the page hierarchy, e.g. start at 3 if the markdown sits inside an h2 section.' },
       { guidance: true, description: 'Use contentWidth to keep prose at a readable line length in wide layouts.' },

package/src/Markdown/Markdown.test.tsx

@@ -22,9 +22,16 @@ describe('Markdown', () => {
     expect(screen.getByText('Heading 2').tagName).toBe('H2');
   });
 
-  it('renders paragraphs', () => {
+  it('renders paragraphs as block <div> (never <p>) for composition safety', () => {
     render(<Markdown>{'Hello world'}</Markdown>);
-    expect(screen.getByText('Hello world').tagName).toBe('P');
+    // Markdown paragraphs render as <div> so block-level inline content
+    // (images, custom inline components) never trips the phrasing-content
+    // trap that a <p> would impose. role="paragraph" re-exposes the paragraph
+    // role to assistive tech without the <p> hazard. Consumers who want a real
+    // <p> element can pass `components={{paragraph: 'p'}}`.
+    const para = screen.getByText('Hello world');
+    expect(para.tagName).toBe('DIV');
+    expect(para).toHaveAttribute('role', 'paragraph');
   });
 
   it('renders inline display without block wrappers', () => {
@@ -201,9 +208,7 @@ describe('Markdown', () => {
   });
 
   it('shows streaming cursor when isStreaming is true', () => {
-    const {container} = render(
-      <Markdown isStreaming>{'Hello'}</Markdown>,
-    );
+    const {container} = render(<Markdown isStreaming>{'Hello'}</Markdown>);
     // Streaming mode parses incrementally but no cursor element
     expect(container.querySelector('[role="document"]')).toBeInTheDocument();
   });
@@ -243,9 +248,7 @@ describe('Markdown', () => {
 
   it('sanitizes data: URLs in images', () => {
     const {container} = render(
-      <Markdown>
-        {'![xss](data:text/html,<script>alert(1)</script>)'}
-      </Markdown>,
+      <Markdown>{'![xss](data:text/html,<script>alert(1)</script>)'}</Markdown>,
     );
     const img = container.querySelector('img');
     expect(img).toBeNull();
@@ -435,9 +438,7 @@ describe('inlinePlugins', () => {
       },
     };
     const {container} = render(
-      <Markdown inlinePlugins={[plugin]}>
-        {'See TAG:important here'}
-      </Markdown>,
+      <Markdown inlinePlugins={[plugin]}>{'See TAG:important here'}</Markdown>,
     );
     const tag = container.querySelector('[data-testid="tag-match"]');
     expect(tag).toBeInTheDocument();
@@ -446,9 +447,7 @@ describe('inlinePlugins', () => {
 
   it('renders identically when no inlinePlugins are provided', () => {
     const withPlugins = render(
-      <Markdown inlinePlugins={[]}>
-        {'Hello **world** and `code`'}
-      </Markdown>,
+      <Markdown inlinePlugins={[]}>{'Hello **world** and `code`'}</Markdown>,
     );
     const withoutPlugins = render(
       <Markdown>{'Hello **world** and `code`'}</Markdown>,
@@ -481,9 +480,7 @@ describe('inlinePlugins', () => {
 
     it('renders bare https URLs as links when autolink="gfm"', () => {
       const {container} = render(
-        <Markdown autolink="gfm">
-          {'see https://example.com here'}
-        </Markdown>,
+        <Markdown autolink="gfm">{'see https://example.com here'}</Markdown>,
       );
       const link = container.querySelector('a');
       expect(link).not.toBeNull();
@@ -503,9 +500,7 @@ describe('inlinePlugins', () => {
 
     it('renders bare emails with mailto: href', () => {
       const {container} = render(
-        <Markdown autolink="gfm">
-          {'ping user@example.com please'}
-        </Markdown>,
+        <Markdown autolink="gfm">{'ping user@example.com please'}</Markdown>,
       );
       const link = container.querySelector('a');
       expect(link).not.toBeNull();
@@ -515,9 +510,7 @@ describe('inlinePlugins', () => {
 
     it('does not autolink URLs inside code spans', () => {
       const {container} = render(
-        <Markdown autolink="gfm">
-          {'try `https://example.com` here'}
-        </Markdown>,
+        <Markdown autolink="gfm">{'try `https://example.com` here'}</Markdown>,
       );
       expect(container.querySelector('a')).toBeNull();
       expect(container.querySelector('code')).not.toBeNull();
@@ -525,9 +518,7 @@ describe('inlinePlugins', () => {
 
     it('does not autolink URLs inside code blocks', () => {
       const {container} = render(
-        <Markdown autolink="gfm">
-          {'```\nhttps://example.com\n```'}
-        </Markdown>,
+        <Markdown autolink="gfm">{'```\nhttps://example.com\n```'}</Markdown>,
       );
       expect(container.querySelector('a')).toBeNull();
       expect(container.querySelector('pre')).not.toBeNull();

package/src/Markdown/Markdown.tsx

@@ -1113,9 +1113,19 @@ function renderBlock(
       if (ParagraphComp) {
         return <ParagraphComp key={index}>{paraChildren}</ParagraphComp>;
       }
+      // Markdown paragraphs render as <div>, not <p>: inline content can
+      // include block-level nodes (images, custom inline components), and a
+      // <p> would reparent them, desyncing SSR markup from the hydrated DOM.
+      // Block spacing comes from token-based StyleX margins, so the rendered
+      // appearance is unchanged. role="paragraph" re-exposes the paragraph
+      // role in the accessibility tree (a pure ARIA hint — it does not trigger
+      // the parser's block-child reparenting) so prose semantics are preserved
+      // without the <p> composition hazard. Consumers who want a real <p>
+      // element can still pass components={{paragraph: 'p'}}.
       return (
-        <p
+        <div
           key={index}
+          role="paragraph"
           {...stylex.props(
             spacing,
             contentWidthValue != null
@@ -1128,7 +1138,7 @@ function renderBlock(
             isLast && styles.noMarginBlockEnd,
           )}>
           {paraChildren}
-        </p>
+        </div>
       );
     }
     case 'codeblock': {
@@ -1487,7 +1497,7 @@ function renderBlock(
       const safeSrc = sanitizeUrl(node.src);
       if (safeSrc == null) {
         return (
-          <p
+          <div
             key={index}
             {...stylex.props(
               spacing,
@@ -1495,11 +1505,11 @@ function renderBlock(
               isLast && styles.noMarginBlockEnd,
             )}>
             [{node.alt}]
-          </p>
+          </div>
         );
       }
       return (
-        <p
+        <div
           key={index}
           {...stylex.props(
             spacing,
@@ -1507,7 +1517,7 @@ function renderBlock(
             isLast && styles.noMarginBlockEnd,
           )}>
           <img src={safeSrc} alt={node.alt} {...stylex.props(styles.image)} />
-        </p>
+        </div>
       );
     }
   }

package/src/MobileNav/MobileNav.doc.mjs

@@ -43,14 +43,14 @@ export const docs = {
           type: 'number',
           description:
             'Drawer width in pixels. Capped at 85vw to prevent overflow on small screens.',
-          default: '280',
+          default: '320',
         },
         {
           name: 'side',
-          type: "'start' | 'end'",
+          type: "'start' | 'end' | 'auto'",
           description:
-            'Which side the drawer slides from. Start is left in LTR, right in RTL.',
-          default: "'start'",
+            'Which side the drawer slides from. Start is left in LTR, right in RTL. Auto picks a side based on the trigger position.',
+          default: "'auto'",
         },
       ],
     },
@@ -124,14 +124,14 @@ export const docsZh = {
       type: 'number',
       description:
         '抽屉宽度（像素）。上限为 85vw 以防止在小屏幕上溢出。',
-      default: '280',
+      default: '320',
     },
     {
       name: 'side',
-      type: "'start' | 'end'",
+      type: "'start' | 'end' | 'auto'",
       description:
-        '抽屉滑出的方向。在 LTR 布局中 start 为左侧，在 RTL 布局中为右侧。',
-      default: "'start'",
+        '抽屉滑出的方向。在 LTR 布局中 start 为左侧，在 RTL 布局中为右侧。auto 根据触发元素的位置自动选择方向。',
+      default: "'auto'",
     },
   ],
   theming: {

package/src/MobileNav/MobileNav.tsx

@@ -363,8 +363,21 @@ export function MobileNav({
     return () => {
       if (closeTimeoutRef.current) {
         clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
+      // Close the native dialog on teardown if it's still open. Inside AppShell
+      // the drawer is mounted in an <Activity> that switches to mode="hidden"
+      // when the drawer closes; React then runs this cleanup (with a stale
+      // isOpen) instead of re-running the effect with isOpen=false, so the
+      // close branch above never fires. If we leave the <dialog> `open` here,
+      // showModal() is skipped on the next open (the dialog is already open in
+      // the hidden tree) and the drawer can never be re-opened. Closing it
+      // unconditionally on teardown keeps the native dialog state in sync so a
+      // subsequent open cleanly calls showModal() again.
+      if (dialog.open) {
+        dialog.close();
+      }
     };
   }, [isOpen, side]);
 

package/src/MobileNav/MobileNavReopen.test.tsx

@@ -0,0 +1,118 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavReopen.test.tsx
+ * @input Uses vitest, @testing-library/react, AppShell + SideNav
+ * @output Regression test for mobile hamburger nav re-open after close
+ * @position Testing; validates the OOTB AppShell mobile drawer toggle cycle
+ *
+ * Repro for: mobile hamburger nav can be opened and closed once, but cannot
+ * be re-opened after closing.
+ */
+
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import {AppShell} from '../AppShell/AppShell';
+import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal =
+    HTMLDialogElement.prototype.showModal ||
+    function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+    };
+  HTMLDialogElement.prototype.close =
+    HTMLDialogElement.prototype.close ||
+    function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+    };
+});
+
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('ResizeObserver', MockResizeObserver);
+
+function createMockMatchMedia(matches: boolean) {
+  return {
+    matches,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  };
+}
+
+beforeEach(() => {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockReturnValue(createMockMatchMedia(true)),
+  );
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function TestShell() {
+  return (
+    <AppShell
+      sideNav={
+        <SideNav>
+          <SideNavSection title="Test" isHeaderHidden>
+            <SideNavItem label="Home" />
+          </SideNavSection>
+        </SideNav>
+      }
+      mobileNav={{breakpoint: 'md'}}>
+      <div>Content</div>
+    </AppShell>
+  );
+}
+
+describe('Mobile nav re-open after close (uncontrolled OOTB)', () => {
+  it('can be opened, closed, then opened again', () => {
+    vi.useFakeTimers();
+    try {
+      render(<TestShell />);
+
+      const getDialog = () => screen.getAllByRole('dialog', {hidden: true})[0];
+      const openToggle = () =>
+        screen.getByRole('button', {name: /open navigation/i});
+
+      // 1. Open
+      fireEvent.click(openToggle());
+      expect(getDialog()).toHaveAttribute('open');
+
+      // 2. Close via the drawer's close button
+      fireEvent.click(screen.getByRole('button', {name: /close navigation/i}));
+      // Flush the delayed dialog.close() (slide-out transition)
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(getDialog()).not.toHaveAttribute('open');
+
+      // 3. Open AGAIN — this is the bug: it should re-open
+      fireEvent.click(openToggle());
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(getDialog()).toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/Outline/Outline.doc.mjs

@@ -228,7 +228,7 @@ export const docsZh = {
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
   description:
-    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy via IntersectionObserver topmost-visible-heading; controlled with activeId; smooth-scroll on click.',
+    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy by scroll position (last heading past its scroll-margin-top line; first item at top, last at bottom); controlled with activeId; smooth-scroll on click that pins the active item until the next manual scroll.',
   usage: {
     description:
       'A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes.',

package/src/Outline/Outline.test.tsx

@@ -37,7 +37,13 @@ describe('parseOutlineFromMarkdown', () => {
       parseOutlineFromMarkdown(
         '## **Install** `@astryxdesign/core`\n\n```\n# Not a heading\n```',
       ),
-    ).toEqual([{id: 'install-astryxdesign-core', label: 'Install @astryxdesign/core', level: 2}]);
+    ).toEqual([
+      {
+        id: 'install-astryxdesign-core',
+        label: 'Install @astryxdesign/core',
+        level: 2,
+      },
+    ]);
   });
 
   it('deduplicates generated ids', () => {
@@ -87,7 +93,7 @@ describe('Outline', () => {
     ).not.toHaveAttribute('aria-current');
   });
 
-  it('smooth-scrolls and reports active id on click', async () => {
+  it('smooth-scrolls and defers the indicator until the scroll settles when uncontrolled', async () => {
     const user = userEvent.setup();
     const target = document.createElement('h2');
     target.id = 'install';
@@ -101,6 +107,47 @@ describe('Outline', () => {
       behavior: 'smooth',
       block: 'start',
     });
+    // Uncontrolled: the indicator is deferred during the programmatic scroll,
+    // so it has not moved to the clicked item yet.
+    expect(
+      screen.getByRole('link', {name: 'Installation'}),
+    ).not.toHaveAttribute('aria-current', 'true');
+
+    // When the scroll settles, the indicator lands on the clicked item.
+    act(() => {
+      window.dispatchEvent(new Event('scrollend'));
+    });
+    expect(onActiveIdChange).toHaveBeenCalledWith('install');
+    expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
+      'aria-current',
+      'true',
+    );
+
+    document.body.removeChild(target);
+  });
+
+  it('reports active id on click when controlled', async () => {
+    const user = userEvent.setup();
+    const target = document.createElement('h2');
+    target.id = 'install';
+    document.body.appendChild(target);
+    const onActiveIdChange = vi.fn();
+
+    render(
+      <Outline
+        items={items}
+        activeId="intro"
+        onActiveIdChange={onActiveIdChange}
+      />,
+    );
+    await user.click(screen.getByRole('link', {name: 'Installation'}));
+
+    expect(target.scrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'start',
+    });
+    // Controlled: there is no built-in scroll-spy, so the consumer owns the
+    // active state and must be notified on click.
     expect(onActiveIdChange).toHaveBeenCalledWith('install');
 
     document.body.removeChild(target);
@@ -122,11 +169,7 @@ describe('Outline', () => {
 
   it('renders with density="compact"', () => {
     render(
-      <Outline
-        items={items}
-        density="compact"
-        data-testid="outline-compact"
-      />,
+      <Outline items={items} density="compact" data-testid="outline-compact" />,
     );
     expect(screen.getByTestId('outline-compact').className).toContain(
       'compact',
@@ -201,50 +244,45 @@ describe('Outline', () => {
     ).not.toHaveAttribute('aria-current');
   });
 
-  it('updates uncontrolled active id from IntersectionObserver', () => {
-    let observerCallback: IntersectionObserverCallback | undefined;
-
-    class MockIntersectionObserver {
-      observe = vi.fn();
-      disconnect = vi.fn();
-
-      constructor(callback: IntersectionObserverCallback) {
-        observerCallback = callback;
-      }
-    }
-
-    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
-
+  it('updates uncontrolled active id from scroll position', () => {
     const intro = document.createElement('h2');
     intro.id = 'intro';
+    const install = document.createElement('h3');
+    install.id = 'install';
     const api = document.createElement('h3');
     api.id = 'api';
-    document.body.append(intro, api);
+    document.body.append(intro, install, api);
 
-    const onActiveIdChange = vi.fn();
-    render(<Outline items={items} onActiveIdChange={onActiveIdChange} />);
+    // Not at the bottom of the page.
+    Object.defineProperty(document.documentElement, 'scrollHeight', {
+      value: 4000,
+      configurable: true,
+    });
 
-    const entry: IntersectionObserverEntry = {
-      target: api,
-      isIntersecting: true,
-      boundingClientRect: {top: 12} as DOMRectReadOnly,
-      intersectionRatio: 1,
-      intersectionRect: {} as DOMRectReadOnly,
-      rootBounds: null,
-      time: 0,
-    };
+    // intro + install have scrolled above the activation line (top <= 0);
+    // api is still below it, so install is the last passed heading.
+    vi.spyOn(intro, 'getBoundingClientRect').mockReturnValue({
+      top: -200,
+    } as DOMRect);
+    vi.spyOn(install, 'getBoundingClientRect').mockReturnValue({
+      top: -10,
+    } as DOMRect);
+    vi.spyOn(api, 'getBoundingClientRect').mockReturnValue({
+      top: 400,
+    } as DOMRect);
 
-    act(() => {
-      observerCallback?.([entry], {} as IntersectionObserver);
-    });
+    const onActiveIdChange = vi.fn();
+    // The hook resolves the active id from scroll position on mount.
+    render(<Outline items={items} onActiveIdChange={onActiveIdChange} />);
 
-    expect(screen.getByRole('link', {name: 'API'})).toHaveAttribute(
+    expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
       'true',
     );
-    expect(onActiveIdChange).toHaveBeenCalledWith('api');
+    expect(onActiveIdChange).toHaveBeenCalledWith('install');
 
     document.body.removeChild(intro);
+    document.body.removeChild(install);
     document.body.removeChild(api);
   });
 });