Rewrite v3 Getting Started docs

[radium-v]

Pull Request

📖 Description

Rewrites and expands the FAST Element v3 documentation site. The getting-started guides were dense and in places out of date; this branch reworks them and adds the missing DOM Policy reference.

• Reworked the Quick Start, FAST Element, HTML Templates, CSS Templates, and HTML Directives guides.
• Added previous/next pagination navigation, with supporting Eleventy includes and styles.
• Added the --incremental flag to the website's watch mode so local rebuilds are faster.

📑 Test Plan

Everything here touches sites/website/** (content, Eleventy config, styles). Run npm run start in sites/website, then check the updated pages render and the prev/next navigation links to the right neighbors. All existing tests pass.

✅ Checklist

General

• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

[Copilot]

Pull request overview

This PR rewrites and expands the FAST Element v3 documentation site’s getting-started content, adds a new DOM Policy guide, and introduces prev/next pagination derived from the Eleventy navigation tree. It also tweaks the website dev workflow by enabling Eleventy incremental builds in watch mode.

Changes:

• Reworked v3 getting-started docs (Quick Start, FASTElement, HTML Templates) and added navigation ordering.
• Added a new v3 advanced “DOM Policies” guide and linked it from template/security guidance.
• Implemented prev/next pagination UI (Nunjucks include + CSS) and added a prevNext Eleventy filter; enabled --incremental in the site start script.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
sites/website/src/docs/3.x/getting-started/quick-start.md	Rewritten Quick Start guide; introduces tsconfig guidance and an end-to-end component example.
sites/website/src/docs/3.x/getting-started/html-templates.md	Expanded template authoring/binding reference, including DOMPolicy mention and host bindings.
sites/website/src/docs/3.x/getting-started/fast-element.md	Reworked FASTElement overview; adds lifecycle/define/compose guidance and controller notes.
sites/website/src/docs/3.x/advanced/dom-policy.md	New DOMPolicy advanced guide describing Trusted Types integration and withPolicy().
sites/website/src/css/main.css	Adds pagination navigation styling and hides pagination in print.
sites/website/src/_includes/pagination-nav.njk	New prev/next pagination include driven by eleventy-navigation ordering.
sites/website/src/_includes/3x-container.njk	Renders pagination include for v3 pages.
sites/website/package.json	Adds --incremental to Eleventy serve/watch startup script.
sites/website/eleventy.config.js	Adds a prevNext filter to compute siblings from the navigation tree.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

[janechu]

Docs review comments from REVIEW_FAST_7569.md.

[janechu]

Follow-up review on the updated docs.

[janechu]

slotted() uses assignedNodes() by default, so an unfiltered slot can include text/comment nodes. This sample still types the result as HTMLElement[]; either filter to elements in the sample or type/described it as Node[].

Suggested change

	slottedElements!: HTMLElement[];
	slottedNodes!: Node[];

[janechu]

ratio is nullable/optional above, so this can produce NaN% before a value is set and may not type-check under strict null checks. Normalizing at the usage point keeps the sample safe.

Suggested change

	--fill: ${this.ratio * 100}%;
	--fill: ${(this.ratio ?? 0) * 100}%;

[janechu]

Including content here is confusing because attributes/properties/events on the root <template> apply to the host, but content inside that root renders into the shadow DOM. I’d narrow this to host-applicable bindings.

Suggested change

	All of the bindings described in [Template Bindings](#template-bindings) (content, attribute, boolean attribute, property, and event) work on the `<template>` root. For example, a progress bar can mirror its state to ARIA attributes on the host:
	Host attribute, boolean attribute, property, and event bindings described in [Template Bindings](#template-bindings) work on the `<template>` root. Content placed inside the `<template>` is still rendered into the shadow DOM as usual. For example, a progress bar can mirror its state to ARIA attributes on the host:

[janechu]

ref() assigns the property, but the property does not need to be observed unless the example wants the videoChanged() callback. This wording makes @observable sound like a requirement.

Suggested change

	The `ref()` directive maps an element in the template to an observed property on the component class, so you can reach the element through the component instance.
	The `ref()` directive assigns an element in the template to a property on the component class, so you can reach the element through the component instance. The property only needs to be observable if you want FAST to call a corresponding `*Changed` callback.