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, adds the React platform (IgrVirtualScroll, new in igniteui-react 19.9.0), closes the template gaps from the audit, and corrects the prose that igniteui-webcomponents 7.4.1 invalidated. EN and JP are both updated; JP builds on the native check in #855.

Changes

• React platform: dropped React from the toc exclude list in EN and JP and added React bodies to 14 sections (Getting Started through FAQ). React has no dataWindow, so Paged Data stays Angular-only; itemTemplate is a function returning JSX, and the events are onStateChange / onDataRequest carrying a native CustomEvent. Verified by compiling against igniteui-react@19.9.0 + React 19, not from the release notes, which document no API. WebComponents blocks that already hold for React (anatomy DOM, styling, ARIA, Do/Don't prose, Related Components) were widened to for="React, WebComponents" rather than duplicated.
• Anatomy: anatomy-content-light/virtual-scroll-lt-a.png rendered with <Anatomy> and a 1–5 legend. Dropped the name and description props, which <Anatomy> does not accept and silently discards.
• Do/Don't: two 537×640 design cards — 100,000 items (Do) vs. 5 items (Don't) — each panel carrying its image, label and guidance text. Rendered with a small inline grid in the topic rather than a shared component (see Decisions).
• 7.4.1 corrections: keyFunction added to the props tables and explained under Data; the averaged-item-size behaviour split into Angular vs React/WebComponents in Estimated Item Size, Troubleshooting and the FAQ; the element-reuse behaviour corrected in Known Limitations, Keyboard Interaction and the Do/Don't intro.
• Template gaps: relatedComponents → ["List", "Grid", "Card"] (D1); WebComponents When not to use redirects to ../grids/data-grid.mdx; link text Grid → {Platform} Data Grid (B6); unused DocsAside import removed.
• Accuracy (verified against source): a host that grows with its content renders every item — Angular sets no default host height; migration table igxForRemote → igxForTotalItemCount; role="presentation" on igx-virtual-scroll inside igx-list (as Combo does), with a matching Screen Readers / ARIA bullet.

Acceptance criteria

• (a) Anatomy renders with image and legend in every build; no TODO in EN or JP.
• (b) Deviates by design. Usage ends with the Do/Don't pair, but the standalone When to use: / When not to use: labels are gone — that guidance now sits inside each panel, under its Do / Don't label, as the design shows. The section is preceded by a base paragraph in the manner of the Card topic.
• (c) relatedComponents matches the linked siblings; WebComponents and React redirect tabular data to the Data Grid.
• (d) No unused imports; check-relative-links reports 0 broken links.
• (e) Declined, re-verified. defineAllComponents() does not list the Virtual Scroll in 7.3.0/7.3.1, but IgcComboComponent declares it as a dependency and registerComponent() calls .register() on every dependency, so igc-virtual-scroll was defined regardless. Confirmed by unpacking igniteui-webcomponents@7.3.1. No Troubleshooting entry is warranted.
• (f) Done, not deferred. All four changes shipped in webcomponents 7.4.1 (2026-09-25), which React 19.9.0 pins, so they are no longer unreleased. keyFunction, element recycling and the averaged item size are documented; scrollToIndex block: 'nearest' needed no change, since Angular already matched the corrected behaviour.

Decisions

• Virtual ForOf stays out of relatedComponents: Angular-only, and a directive rather than a component.
• Each Do/Don't panel renders image → label → text, as in the design, rather than the two-column image table used by badge.mdx and avatar.mdx. The design fixes the card at 537×640 with the caption aligned to the card edge, which the table pattern cannot express. The grid is ~60 lines of inline CSS in the topic.
• The 7.4.1 behaviour changes are split per platform because Angular is a separate implementation with none of them; the element-reuse wording is shared, because Angular's @for also reuses the item wrappers.

Design

Doc Samples Structure — Virtual Scroll. The Do/Don't cards, the 26px gap, the badge geometry and the base paragraph all come from this frame.

Needs product-team confirmation (not changed here)

• igxForOf deprecation: the topics call it deprecated, but IgxForOfDirective has no @deprecated tag on master or 22.2.0-rc.1.
• License: the topic says MIT, but igx-virtual-scroll is not in igniteui-angular's MIT list.

Release dependencies

• API links: WebComponents after registry PR chore: update ApiLink staging registry snapshots #838; Angular after the 22.2.0 API docs publish; React once the registry carries IgrVirtualScroll — until then the topic's React ApiLinks degrade to plain <code>, which is a silent fallback and never a build error.
• Samples:
  • React — IgniteUI/igniteui-react-examples#1109, still open. All five paths the topic embeds (overview, variable-size, horizontal, scroll-to-index, infinite-scroll) exist on its branch.
  • WebComponents — Updating prod from staging igniteui-wc-examples#1265, merged to vnext.
  • Angular — Updating Production from Staging igniteui-angular-samples#4027, merged to vnext.

JP

Updated in this PR on top of #855. New JP text: the anatomy legend, the Do/Don't labels and base paragraph, the React blocks, and the 7.4.1 corrections. Alt text stays in English, per convention.

Validation

• Strict DOCS_TOC_STRICT=true builds pass for Angular, React EN, React JP and WebComponents.
• markdownlint, cspell and check:llms-metadata pass; check-relative-links reports 0 broken links.
• Geometry verified in headless Chromium at six widths (1920→390): 26px gap between panels, card and caption flush, badge 26×26 at a 28px inset, no horizontal overflow; light and dark themes checked.

🤖 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.