docs(virtual-scroll): close template gaps and fix Angular accuracy issues

[viktorkombov]

Closes #851

Summary

Adds the design team's anatomy and Do/Don't images to the Virtual Scroll topic, closes the template gaps from the audit, and fixes Angular inaccuracies found while verifying the topic against igniteui-angular master (22.2.0-rc.1). EN and JP are both updated. JP builds on the native check in #855.

Changes

Images (from design, byte-identical in docs/xplat/src/assets/images/ and docs/angular/src/content/{en,jp}/images/)

• anatomy-content-light/virtual-scroll-lt-a.png: rendered with <Anatomy> and a 1–5 legend (host, track, content element, item wrapper, over-scan buffer). The DOM skeletons still follow it.
• virtual-scroll/virtual-scroll-do.png / virtual-scroll-do-not.png: the standard two-column image table, placed before the When to use / When not to use labels (house-style.md:225-226).

Do/Don't content

• The design team illustrated the When to use / When not to use guidance: a 100,000-item list (Do) vs. a 5-item list (Don't). This replaces the issue's suggested subjects (host height, item spacing).
• The Figma Do caption equals our When to use text. The Figma Don't caption ("For simple, short lists, render items directly using the List component") is shortened; When not to use keeps the Data Grid and Card redirects that criterion (c) and D1 require.
• The markdown Do/Don't text table was removed so that Usage ends with the image table and the labels. Its rules remain on the page: Getting Started (host height), Data (new array), Estimated Item Size (estimate, padding vs. margins), and Troubleshooting.

Template gaps

• relatedComponents → ["List", "Grid", "Card"] (D1).
• WebComponents When not to use: add the redirect to ../grids/data-grid.mdx. Related Components: add Data Grid to both platform blocks.
• Link text Grid → {Platform} Data Grid (house-style entity terminology, B6).
• Remove the unused DocsAside import.

Accuracy fixes (verified against source)

• A host that grows with its content renders every item; before, the text said it had "no viewport to fill". Verified in headless Chromium for both frameworks; Angular sets no default host height.
• Angular migration table: igxForRemote (removed in 6.1.0) → igxForTotalItemCount.
• Angular Item Template example: role="presentation" on igx-virtual-scroll inside igx-list, so the items aren't nested in a second list. Combo and Simple Combo use the same override. A matching bullet was added under Screen Readers / ARIA.

Acceptance criteria

• (a) Anatomy renders with image and legend in the Angular and WebComponents builds; no TODO in EN or JP.
• (b) Usage ends with the image table followed by the labels; images in xplat and both Angular mirrors.
• (c) relatedComponents matches the linked siblings; WebComponents redirects tabular data to the Data Grid.
• (d) No unused imports; check-relative-links reports 0 broken links.
• (e) Declined. In 7.3.0/7.3.1, IgcVirtualScrollComponent was missing from the defineAllComponents() list, but IgcComboComponent.register() registers it as a dependency (combo.ts:149-159, register.ts:6-17). So igc-virtual-scroll was still defined; verified at runtime and in tree-shaken bundles. The 7.3.2 changelog's "stayed undefined" is true only for igc-qr-code.
• (f) Unreleased Web Components changes (keyFunction, element recycling, average-size estimate, nearest alignment; possibly fixed-item-size from #2382) are tracked in #. Angular has no counterpart.

Decisions

• Virtual ForOf stays out of relatedComponents: it's an Angular-only directive and isn't named in Do/Don't.
• The Do/Don't image goes before the labels, per house style; the five reference topics use the opposite order.

Needs product-team confirmation (not changed here)

• igxForOf deprecation: the topic, for-of.mdx and drop-down-virtual.mdx call it deprecated, but IgxForOfDirective has no @deprecated tag on master or in 22.2.0-rc.1.
• License: the topic says MIT, but the MIT list in igniteui-angular's LICENSE doesn't include igx-virtual-scroll.

Release dependencies

• API links: Web Components links resolve after the registry PR chore: update ApiLink staging registry snapshots #838 merges; Angular links after the 22.2.0 API docs publish.
• Samples reach production with igniteui-wc-examples #1265 and igniteui-angular-samples #4027.

JP

JP is updated in this PR on top of the native check in #855. The only new JP text is the five-line anatomy legend, built from terms already used on the page, with the half-width parenthesis style from #855. The image-table header reuses the page's 使用すべき / 使用すべきでない labels. Alt text stays in English, per the JP convention.

Validation

• markdownlint, cspell and check:llms-metadata pass.
• check-relative-links (xplat, Angular, generated WebComponents) reports 0 broken links.
• The page renders on dev servers for Angular EN, Angular JP and WebComponents EN with no image-resolution errors.

🤖 Generated with Claude Code

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[jsakamotoIGJP]

@viktorkombov As you asked, I reviewed the JP wording again with an AI agent. I made a few small improvements, mainly to match the terms used in other JP topics and to make some sentences read more naturally. I committed them to a separate branch and opened #855 against vkombov/task-851.

Please merge #855 into this PR when it works for you.

[viktorkombov]

@viktorkombov As you asked, I reviewed the JP wording again with an AI agent. I made a few small improvements, mainly to match the terms used in other JP topics and to make some sentences read more naturally. I committed them to a separate branch and opened #855 against vkombov/task-851.

Please merge #855 into this PR when it works for you.

@jsakamotoIGJP, thanks for reviewing the JP wording and for the improvements! I’ll merge #855 into this PR.