chore(web-components): Upgrade Fluent Web Components to FAST Element v3 (microsoft#36351)

# Pull Request

## 📖 Description

Upgrade the Fluent Web Components (`@fluentui/web-components`) and Chart Web Components (`@fluentui/chart-web-components`) from FAST Element v2 to v3.

The bulk of this change migrates the async (SSR) component definitions away from the `@microsoft/fast-html` `RenderableFASTElement(...).defineAsync(...)` pattern to FAST Element v3's declarative API. Each `*.definition-async.ts` now exports a `declarativeDefinition` built from `declarativeTemplate()` and the `FluentDesignSystem` registry, and each `define-async.ts` registers it with the standard `Element.define(...)` call. This drops the `@microsoft/fast-html` runtime dependency entirely.

Supporting changes:

- Bump `@microsoft/fast-element` from `^2.0.0` to `^3.0.0` in both `web-components` and `chart-web-components`.
- Fix timing bugs and race conditions surfaced by the v3 declarative hydration flow.

This is a prerelease-level change for `@fluentui/web-components` and a patch for `@fluentui/chart-web-components`.

Author: radium-v

apps/vr-tests-web-components/package.json

@@ -18,7 +18,7 @@
     "html-react-parser": "4.0.0",
     "@fluentui/tokens": ">=1.0.0-alpha",
     "@fluentui/web-components": ">=3.0.0-alpha",
-    "@microsoft/fast-element": "^2.0.0",
+    "@microsoft/fast-element": "^3.0.0",
     "tslib": "^2.1.0"
   }
 }

change/@fluentui-chart-web-components-60dd95d5-d74f-488d-bd5c-3639e4e5fc02.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: upgrade to FAST Element v3",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-33e6ef9c-36bb-4072-9bea-aadda8c76bea.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: migrate async definitions to fast-element v3 declarative API",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -72,10 +72,9 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
-    "@microsoft/fast-build": "0.7.0",
-    "@microsoft/fast-element": "2.10.4",
-    "@microsoft/fast-html": "1.0.0-alpha.54",
-    "@microsoft/fast-test-harness": "0.3.1",
+    "@microsoft/fast-build": "0.9.0",
+    "@microsoft/fast-element": "3.0.0",
+    "@microsoft/fast-test-harness": "0.4.0",
     "@microsoft/focusgroup-polyfill": "1.5.0",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",

packages/charts/chart-web-components/package.json

@@ -78,7 +78,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0"
+    "@microsoft/fast-element": "^3.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/charts/chart-web-components/src/utils/chart-helpers.ts

@@ -7,7 +7,7 @@ export const jsonConverter: ValueConverter = {
     return JSON.stringify(value);
   },
   fromView(value: string): any {
-    return JSON.parse(value);
+    return typeof value === 'string' ? JSON.parse(value) : value;
   },
 };
 

packages/web-components/docs/web-components.api.md

@@ -731,6 +731,8 @@ export class BaseField extends FASTElement {
     // (undocumented)
     setValidationStates(): void;
     // @internal
+    protected get slottedInputObserver(): MutationObserver;
+    // @internal
     slottedInputs: SlottableInput[];
     // @internal
     slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;

packages/web-components/package.json

@@ -48,6 +48,7 @@
     "./*/define.js": "./dist/esm/*/define.js",
     "./*/define-async.js": "./dist/esm/*/define-async.js",
     "./*/definition.js": "./dist/esm/*/*.definition.js",
+    "./*/definition-async.js": "./dist/esm/*/*.definition-async.js",
     "./*/options.js": "./dist/esm/*/*.options.js",
     "./*/styles.js": "./dist/esm/*/*.styles.js",
     "./*/styles.css": "./dist/esm/*/*.styles.css",
@@ -109,18 +110,12 @@
     "rollup-plugin-fast-tagged-templates": "^1.0.2"
   },
   "dependencies": {
-    "@fluentui/tokens": "1.0.0-alpha.23",
+    "@fluentui/tokens": "^1.0.0-alpha.23",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0",
-    "@microsoft/fast-html": "^1.0.0-alpha.53",
-    "@microsoft/focusgroup-polyfill": "^1.4.1"
-  },
-  "peerDependenciesMeta": {
-    "@microsoft/fast-html": {
-      "optional": true
-    }
+    "@microsoft/fast-element": "^3.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.5.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/web-components/src/accordion-item/accordion-item.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './accordion-item.options.js';
 
 /**
- * The async definition configuration for the fluent-accordion-item element.
+ * The async definition configuration for the `<fluent-accordion-item>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/accordion-item/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './accordion-item.definition-async.js';
+import { declarativeDefinition } from './accordion-item.definition-async.js';
 import { AccordionItem } from './accordion-item.js';
 
-RenderableFASTElement(AccordionItem).defineAsync(definition);
+AccordionItem.define(declarativeDefinition);