From 3859b74796ad26f4242e1021e73b708545aaed01 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 22 Apr 2026 16:22:59 -0700
Subject: [PATCH 01/14] feat: change default attribute-name-strategy from none
 to camelCase (#7479)

Changes the default `attribute-name-strategy` from `"none"` to `"camelCase"` across the FAST monorepo. This applies to:

- **`microsoft-fast-build` Rust crate**: The `AttributeNameStrategy` enum's `#[default]` is moved from `None` to `CamelCase`
- **`@microsoft/fast-build` CLI**: Default strategy passed to the WASM renderer and CLI help text updated
- **`@microsoft/fast-html` AttributeMap**: Default fallback changed from `"none"` to `"camelCase"`

With this change, dashed HTML attribute names on custom elements (e.g. `foo-bar`) are now converted to camelCase state keys (e.g. `fooBar`) by default. The `"none"` strategy remains available as an explicit opt-in.

- All existing Rust tests pass (`cargo test`)
- All Playwright tests pass (`npm run test`)
- All fixtures rebuilt successfully (`npm run build:fixtures`)
- Biome check passes (`npm run biome:check`)
- Change files validated (`npm run checkchange`)

- [x] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

(cherry picked from commit 77cd24b00d199fd4b2d2e42a6f2dce2be96396b5)
---
 ...-285b7229-8023-4304-83b0-25de34f617ce.json |  7 +++++++
 ...-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json |  7 +++++++
 crates/microsoft-fast-build/DESIGN.md         |  4 ++--
 crates/microsoft-fast-build/src/config.rs     |  2 +-
 crates/microsoft-fast-build/src/wasm.rs       | 16 +++++++--------
 .../tests/attribute_name_strategy.rs          | 12 +++++------
 .../tests/custom_elements.rs                  | 12 ++++++-----
 packages/fast-build/DESIGN.md                 |  2 +-
 packages/fast-build/README.md                 |  6 +++---
 packages/fast-build/bin/fast.js               |  6 +++---
 .../src/declarative/attribute-map.spec.ts     | 20 ++++++++++---------
 .../attribute-map/attribute-map.spec.ts       | 14 ++++++-------
 .../extensions/attribute-map/index.html       |  2 +-
 .../extensions/attribute-map/state.json       |  2 +-
 .../extensions/attribute-map/templates.html   |  2 +-
 15 files changed, 66 insertions(+), 48 deletions(-)
 create mode 100644 change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json
 create mode 100644 change/@microsoft-fast-element-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json

diff --git a/change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json b/change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json
new file mode 100644
index 00000000000..a60d87b93b4
--- /dev/null
+++ b/change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: change default attribute-name-strategy from none to camelCase",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json b/change/@microsoft-fast-element-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json
new file mode 100644
index 00000000000..9ef94540ce3
--- /dev/null
+++ b/change/@microsoft-fast-element-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: change default attribute-name-strategy from none to camelCase",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/crates/microsoft-fast-build/DESIGN.md b/crates/microsoft-fast-build/DESIGN.md
index e8e85d82fd1..2132eebc3ad 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -267,8 +267,8 @@ Controls how HTML attribute names are mapped to state property names when buildi
 
 | Strategy | Behaviour | Example |
 |----------|-----------|---------|
-| `"none"` (default) | Attribute names are lowercased as-is. Dashes are preserved. | `foo-bar` → `foo-bar` → `{{foo-bar}}` |
-| `"camelCase"` | Dashed attribute names are converted to camelCase. | `foo-bar` → `fooBar` → `{{fooBar}}` |
+| `"camelCase"` (default) | Dashed attribute names are converted to camelCase. | `foo-bar` → `fooBar` → `{{fooBar}}` |
+| `"none"` | Attribute names are lowercased as-is. Dashes are preserved. | `foo-bar` → `foo-bar` → `{{foo-bar}}` |
 
 The `camelCase` strategy only applies to attributes that are **not** already handled by a specialized conversion:
 
diff --git a/crates/microsoft-fast-build/src/config.rs b/crates/microsoft-fast-build/src/config.rs
index ab749e3ea1e..d354acb6d76 100644
--- a/crates/microsoft-fast-build/src/config.rs
+++ b/crates/microsoft-fast-build/src/config.rs
@@ -8,13 +8,13 @@
 pub enum AttributeNameStrategy {
     /// No conversion — attribute names are lowercased as-is.
     /// `foo-bar` stays `foo-bar`, matching `{{foo-bar}}` in the template.
-    #[default]
     None,
     /// Convert dashed attribute names to camelCase.
     /// `foo-bar` becomes `fooBar`, matching `{{fooBar}}` in the template.
     /// Attributes that are already handled by specialized lookup tables
     /// (`data-*`, `aria-*`, and HTML global attributes like `tabindex`)
     /// are unaffected — those always use their standard property names.
+    #[default]
     CamelCase,
 }
 
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index 742ff8b5c09..4a34dbaffa7 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -13,8 +13,8 @@ pub fn render(entry: &str, state: &str) -> Result<String, JsValue> {
 /// Render a FAST HTML template with custom element templates and a JSON state string.
 /// `templates_json` is a JSON object mapping element names to their HTML template strings,
 /// e.g. `{"my-button": "<template>...</template>"}`.
-/// `attribute_name_strategy` controls attribute-to-property mapping: `"none"` (default)
-/// or `"camelCase"`. Pass an empty string for the default.
+/// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
+/// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
 pub fn render_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
@@ -32,8 +32,8 @@ pub fn render_with_templates(entry: &str, templates_json: &str, state: &str, att
 /// output, while non-primitive values (`array`, `object`, `null`) are stripped.
 ///
 /// `templates_json` is a JSON object mapping element names to their HTML template strings.
-/// `attribute_name_strategy` controls attribute-to-property mapping: `"none"` (default)
-/// or `"camelCase"`. Pass an empty string for the default.
+/// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
+/// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
 pub fn render_entry_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
@@ -102,12 +102,12 @@ fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>,
 }
 
 /// Build an `Option<RenderConfig>` from the strategy string.
-/// Returns `None` for `""` or `"none"` (use defaults), `Some(config)` otherwise.
+/// Returns `None` for `""` or `"camelCase"` (use defaults), `Some(config)` for `"none"`.
 fn build_config(strategy: &str) -> Result<Option<RenderConfig>, JsValue> {
     match strategy {
-        "" | "none" => Ok(None),
-        "camelCase" => Ok(Some(
-            RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::CamelCase),
+        "" | "camelCase" => Ok(None),
+        "none" => Ok(Some(
+            RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None),
         )),
         _ => Err(JsValue::from_str(&format!(
             "Invalid attribute-name-strategy '{}': expected 'none' or 'camelCase'",
diff --git a/crates/microsoft-fast-build/tests/attribute_name_strategy.rs b/crates/microsoft-fast-build/tests/attribute_name_strategy.rs
index 50854020e16..ae29b5dd22c 100644
--- a/crates/microsoft-fast-build/tests/attribute_name_strategy.rs
+++ b/crates/microsoft-fast-build/tests/attribute_name_strategy.rs
@@ -118,24 +118,24 @@ fn test_none_strategy_multi_dashed_attr_preserved() {
     assert!(result.contains("42"), "none strategy should preserve dashes: {result}");
 }
 
-// ── default config matches none strategy ──────────────────────────────────────
+// ── default config matches camelCase strategy ─────────────────────────────────
 
 #[test]
-fn test_default_config_matches_none() {
-    let locator = make_locator(&[("my-el", "<span>{{foo-bar}}</span>")]);
+fn test_default_config_matches_camel_case() {
+    let locator = make_locator(&[("my-el", "<span>{{fooBar}}</span>")]);
     let result_default = render_with_locator(
         r#"<my-el foo-bar="hello"></my-el>"#,
         &empty_root(),
         &locator,
         None,
     ).unwrap();
-    let result_none = render_with_locator(
+    let result_camel = render_with_locator(
         r#"<my-el foo-bar="hello"></my-el>"#,
         &empty_root(),
         &locator,
-        Some(&none_config()),
+        Some(&camel_config()),
     ).unwrap();
-    assert_eq!(result_default, result_none, "default should match none strategy");
+    assert_eq!(result_default, result_camel, "default should match camelCase strategy");
 }
 
 // ── camelCase with binding resolution ─────────────────────────────────────────
diff --git a/crates/microsoft-fast-build/tests/custom_elements.rs b/crates/microsoft-fast-build/tests/custom_elements.rs
index 32e791de185..1cc09074069 100644
--- a/crates/microsoft-fast-build/tests/custom_elements.rs
+++ b/crates/microsoft-fast-build/tests/custom_elements.rs
@@ -1,6 +1,6 @@
 mod common;
 use common::{make_locator, empty_root};
-use microsoft_fast_build::{render_template, render_with_locator, render_template_with_locator, render_entry_template_with_locator, Locator, RenderError};
+use microsoft_fast_build::{render_template, render_with_locator, render_template_with_locator, render_entry_template_with_locator, Locator, RenderError, RenderConfig, AttributeNameStrategy};
 
 // ── attribute → state mapping ─────────────────────────────────────────────────
 
@@ -218,26 +218,28 @@ fn test_locator_name_from_f_template_attribute_not_file_stem() {
 
 #[test]
 fn test_custom_element_kebab_attr_hyphens_preserved() {
-    // kebab-case attr names are lowercased; hyphens are preserved
+    // kebab-case attr names are lowercased; with explicit none strategy, hyphens are preserved
     let locator = make_locator(&[("my-el", "<span>{{selected-user-id}}</span>")]);
+    let none_config = RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None);
     let result = render_template_with_locator(
         r#"<my-el selected-user-id="42"></my-el>"#,
         "{}",
         &locator,
-        None,
+        Some(&none_config),
     ).unwrap();
     assert!(result.contains("42"), "kebab attr resolved: {result}");
 }
 
 #[test]
 fn test_custom_element_multi_word_kebab_attrs() {
-    // multiple kebab-case attrs are lowercased and passed to the child scope as-is
+    // multiple kebab-case attrs are lowercased; with explicit none strategy, passed to the child scope as-is
     let locator = make_locator(&[("my-el", "<p>{{show-details}}</p><p>{{enable-continue}}</p>")]);
+    let none_config = RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None);
     let result = render_template_with_locator(
         r#"<my-el show-details="true" enable-continue="false"></my-el>"#,
         "{}",
         &locator,
-        None,
+        Some(&none_config),
     ).unwrap();
     assert!(result.contains("true"), "show-details: {result}");
     assert!(result.contains("false"), "enable-continue: {result}");
diff --git a/packages/fast-build/DESIGN.md b/packages/fast-build/DESIGN.md
index 01c54945e2e..193c004120c 100644
--- a/packages/fast-build/DESIGN.md
+++ b/packages/fast-build/DESIGN.md
@@ -148,7 +148,7 @@ Three WASM functions are used:
 | Function | Used when |
 |----------|-----------|
 | `wasm.render(entry, state)` | No custom element templates |
-| `wasm.render_entry_with_templates(entry, templatesJson, state, strategy)` | At least one template was loaded. `strategy` is `"none"` or `"camelCase"`. |
+| `wasm.render_entry_with_templates(entry, templatesJson, state, strategy)` | At least one template was loaded. `strategy` is `"camelCase"` or `"none"`. |
 | `wasm.parse_f_templates(html)` | Parsing `<f-template>` elements from each matched HTML file |
 
 `templatesJson` is a JSON-stringified object mapping element names to their raw inner template strings (the content extracted from `<template>` inside `<f-template>`). The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM.
diff --git a/packages/fast-build/README.md b/packages/fast-build/README.md
index 07cd968cf61..32a148a4dd1 100644
--- a/packages/fast-build/README.md
+++ b/packages/fast-build/README.md
@@ -39,7 +39,7 @@ fast build [options]
 | `--state="<path>"` | `state.json` | JSON file containing the template state |
 | `--output="<path>"` | `output.html` | Where to write the rendered HTML |
 | `--templates="<glob>"` | _(none)_ | Glob pattern(s) for custom element template HTML files. Separate multiple patterns with commas. A warning is printed if not provided or if no files match a pattern. |
-| `--attribute-name-strategy="<strategy>"` | `none` | Strategy for mapping HTML attribute names to state property names on custom elements. `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). See [Attribute name strategy](#attribute-name-strategy). |
+| `--attribute-name-strategy="<strategy>"` | `camelCase` | Strategy for mapping HTML attribute names to state property names on custom elements. `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). See [Attribute name strategy](#attribute-name-strategy). |
 | `--config="<path>"` | `fast-build.config.json` | Path to a JSON configuration file. If omitted, `fast-build.config.json` in the current directory is used when present. CLI arguments take precedence over config values. See [Configuration file](#configuration-file). |
 
 ### Example
@@ -113,8 +113,8 @@ The `--attribute-name-strategy` option controls how HTML attribute names on cust
 
 | Strategy | Behaviour | Template binding |
 |---|---|---|
-| `none` (default) | Attribute names lowercased as-is, dashes preserved | `foo-bar` → `{{foo-bar}}` |
-| `camelCase` | Dashed attribute names converted to camelCase | `foo-bar` → `{{fooBar}}` |
+| `camelCase` (default) | Dashed attribute names converted to camelCase | `foo-bar` → `{{fooBar}}` |
+| `none` | Attribute names lowercased as-is, dashes preserved | `foo-bar` → `{{foo-bar}}` |
 
 The `camelCase` strategy only affects "plain" custom element attributes. It does **not** change:
 - `data-*` attributes (always use `dataset.*` grouping)
diff --git a/packages/fast-build/bin/fast.js b/packages/fast-build/bin/fast.js
index 276b629815b..c5a1661e828 100755
--- a/packages/fast-build/bin/fast.js
+++ b/packages/fast-build/bin/fast.js
@@ -335,7 +335,7 @@ async function runBuild(args) {
     let rendered;
     if (Object.keys(templatesMap).length > 0) {
         rendered = wasm.render_entry_with_templates(
-            entryContent, JSON.stringify(templatesMap), stateContent, attributeNameStrategy || "none"
+            entryContent, JSON.stringify(templatesMap), stateContent, attributeNameStrategy || ""
         );
     } else {
         rendered = wasm.render(entryContent, stateContent);
@@ -357,9 +357,9 @@ async function main() {
             '  --output="output.html" Output file path (default: output.html)\n' +
             '  --entry="index.html"   Entry HTML template file (default: index.html)\n' +
             '  --state="state.json"   State JSON file (default: state.json)\n' +
-            '  --attribute-name-strategy="none"\n' +
+            '  --attribute-name-strategy="camelCase"\n' +
             '                         Strategy for mapping attribute names to property names.\n' +
-            '                         "none" (default) or "camelCase".\n' +
+            '                         "camelCase" (default) or "none".\n' +
             '  --config="<path>"      Path to a fast-build config JSON file.\n' +
             '                         Defaults to "fast-build.config.json" in the\n' +
             '                         current directory if it exists. File paths in\n' +
diff --git a/packages/fast-element/src/declarative/attribute-map.spec.ts b/packages/fast-element/src/declarative/attribute-map.spec.ts
index 8161ce7f452..09638bef5c9 100644
--- a/packages/fast-element/src/declarative/attribute-map.spec.ts
+++ b/packages/fast-element/src/declarative/attribute-map.spec.ts
@@ -20,13 +20,15 @@ test.describe("AttributeMap", () => {
         expect(hasFooAccessor).toBeTruthy();
     });
 
-    test("should define @attr for a dash-case property", async ({ page }) => {
+    test("should define @attr for a camelCase property derived from binding key", async ({
+        page,
+    }) => {
         const element = page.locator("attribute-map-test-element");
 
         const hasFooBarAccessor = await element.evaluate(node => {
             const desc = Object.getOwnPropertyDescriptor(
                 Object.getPrototypeOf(node),
-                "foo-bar",
+                "fooBar",
             );
             return typeof desc?.get === "function";
         });
@@ -34,14 +36,14 @@ test.describe("AttributeMap", () => {
         expect(hasFooBarAccessor).toBeTruthy();
     });
 
-    test("should use binding key as-is for both attribute and property name", async ({
+    test("should use camelCase property name with kebab-case attribute name", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // Setting the foo-bar attribute should update the foo-bar property (no conversion)
+        // Setting the foo-bar attribute should update the fooBar property (camelCase conversion)
         await element.evaluate(node => node.setAttribute("foo-bar", "dash-case-test"));
-        const propValue = await element.evaluate(node => (node as any)["foo-bar"]);
+        const propValue = await element.evaluate(node => (node as any).fooBar);
 
         expect(propValue).toBe("dash-case-test");
     });
@@ -79,7 +81,7 @@ test.describe("AttributeMap", () => {
         await expect(page.locator(".foo-value")).toHaveText("attr-value");
     });
 
-    test("should update template when dash-case attribute is set via setAttribute", async ({
+    test("should update template when foo-bar attribute is set via setAttribute", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
@@ -115,14 +117,14 @@ test.describe("AttributeMap", () => {
         expect(propValue).toBe("lookup-test");
     });
 
-    test("should update definition attributeLookup for dash-case properties", async ({
+    test("should update definition attributeLookup for camelCase properties", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // setAttribute with foo-bar triggers attributeChangedCallback for the foo-bar property
+        // setAttribute with foo-bar triggers attributeChangedCallback for the fooBar property
         await element.evaluate(node => node.setAttribute("foo-bar", "lookup-bar-test"));
-        const propValue = await element.evaluate(node => (node as any)["foo-bar"]);
+        const propValue = await element.evaluate(node => (node as any).fooBar);
 
         expect(propValue).toBe("lookup-bar-test");
     });
diff --git a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/attribute-map.spec.ts b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/attribute-map.spec.ts
index 53078d98633..124f541ba80 100644
--- a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/attribute-map.spec.ts
+++ b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/attribute-map.spec.ts
@@ -15,21 +15,21 @@ test.describe("AttributeMap", () => {
             const proto = Object.getPrototypeOf(node);
             const isAccessor = (name: string) =>
                 typeof Object.getOwnPropertyDescriptor(proto, name)?.get === "function";
-            return { foo: isAccessor("foo"), "foo-bar": isAccessor("foo-bar") };
+            return { foo: isAccessor("foo"), fooBar: isAccessor("fooBar") };
         });
 
         expect(accessors.foo).toBeTruthy();
-        expect(accessors["foo-bar"]).toBeTruthy();
+        expect(accessors.fooBar).toBeTruthy();
     });
 
-    test("should use binding key as-is for attribute and property name", async ({
+    test("should use camelCase property name and kebab-case attribute name", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // Setting foo-bar attribute should update the foo-bar property (no conversion)
+        // Setting foo-bar attribute should update the fooBar property (camelCase conversion)
         await element.evaluate(node => node.setAttribute("foo-bar", "dash-test"));
-        const propValue = await element.evaluate(node => (node as any)["foo-bar"]);
+        const propValue = await element.evaluate(node => (node as any).fooBar);
 
         expect(propValue).toBe("dash-test");
     });
@@ -90,13 +90,13 @@ test.describe("AttributeMap", () => {
         expect(attrValue).toBe("reflected-value");
     });
 
-    test("should reflect foo-bar property value back to foo-bar attribute", async ({
+    test("should reflect fooBar property value back to foo-bar attribute", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
         await element.evaluate(node => {
-            (node as any)["foo-bar"] = "bar-reflected";
+            (node as any).fooBar = "bar-reflected";
         });
 
         await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
diff --git a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/index.html b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/index.html
index 04eaf541a2b..5f7968753e8 100644
--- a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/index.html
+++ b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/index.html
@@ -14,7 +14,7 @@
 <f-template name="attribute-map-test-element">
     <template>
         <div class="foo-value">{{foo}}</div>
-        <div class="foo-bar-value">{{foo-bar}}</div>
+        <div class="foo-bar-value">{{fooBar}}</div>
         <button type="button" @click="{setFoo()}">Set Foo</button>
         <button type="button" @click="{setFooBar()}">Set FooBar</button>
         <button type="button" @click="{setMultiple()}">Set Multiple</button>
diff --git a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/state.json b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/state.json
index 82182617b39..594cb051599 100644
--- a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/state.json
+++ b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/state.json
@@ -1,4 +1,4 @@
 {
     "foo": "",
-    "foo-bar": ""
+    "fooBar": ""
 }
diff --git a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/templates.html b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/templates.html
index 9f63f63d286..63f5cfdd380 100644
--- a/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/templates.html
+++ b/packages/fast-element/test/declarative/fixtures/extensions/attribute-map/templates.html
@@ -1,7 +1,7 @@
 <f-template name="attribute-map-test-element">
     <template>
         <div class="foo-value">{{foo}}</div>
-        <div class="foo-bar-value">{{foo-bar}}</div>
+        <div class="foo-bar-value">{{fooBar}}</div>
         <button type="button" @click="{setFoo()}">Set Foo</button>
         <button type="button" @click="{setFooBar()}">Set FooBar</button>
         <button type="button" @click="{setMultiple()}">Set Multiple</button>

From 1caa70b0543454371e9b4ce46498293c7ea3cd22 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:30:57 -0700
Subject: [PATCH 02/14] chore(deps): bump liquidjs from 10.25.6 to 10.25.7
 (#7494)

Bumps [liquidjs](https://github.com/harttle/liquidjs) from 10.25.6 to 10.25.7.
- [Release notes](https://github.com/harttle/liquidjs/releases)
- [Changelog](https://github.com/harttle/liquidjs/blob/master/CHANGELOG.md)
- [Commits](https://github.com/harttle/liquidjs/compare/v10.25.6...v10.25.7)

---
updated-dependencies:
- dependency-name: liquidjs
  dependency-version: 10.25.7
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit 46a7dda8e17ac7cd000bd60c03564df4dfa33bae)
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 817333a99b0..778f04eb99d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4883,9 +4883,9 @@
       }
     },
     "node_modules/liquidjs": {
-      "version": "10.25.6",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.6.tgz",
-      "integrity": "sha512-h5ki5HS1PiL9/NmLw3iUcTF1jQswKJd8KLEXNrtSf8XHF0v3c5+d+8llz3N9I5IUdc5rsOuVLb9AVnqvqqscPg==",
+      "version": "10.25.7",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.7.tgz",
+      "integrity": "sha512-rPCjJLiD4eDhQjvv964AeXFC+HbeYBbZrd7Z82Q6hqv1lX7G+5w4SJcKLn9CAAAwHI4aS3dTdo083UB79K3pDA==",
       "license": "MIT",
       "dependencies": {
         "commander": "^10.0.0"

From 2cd0ab87decc79e322cb483e4da813ebe7ed1042 Mon Sep 17 00:00:00 2001
From: Chris Holt <13071055+chrisdholt@users.noreply.github.com>
Date: Tue, 28 Apr 2026 10:28:39 -0700
Subject: [PATCH 03/14] chore: migrate typescript compiltation to
 typescript/native-preview (#7501)

This PR migrates typescript compilation to the latest go-driven typescript implementation.

(cherry picked from commit 7dc34b1203aa08595705d1b91bce670830789791)
---
 ...-69df485f-8d87-42e5-a858-70e27f8988dc.json |   7 ++
 ...-fea08afa-dc62-4165-bc7d-a65e8be2d2d3.json |   7 ++
 examples/todo-app/package.json                |   2 +-
 package-lock.json                             | 118 ++++++++++++++++++
 package.json                                  |   3 +-
 packages/fast-element/docs/api-report.api.md  |   6 +-
 .../docs/context/api-report.api.md            |  14 +--
 .../fast-element/docs/di/api-report.api.md    |  12 +-
 packages/fast-element/package.json            |   4 +-
 packages/fast-element/tsconfig.json           |  17 ++-
 packages/fast-router/docs/api-report.api.md   |  13 +-
 packages/fast-router/package.json             |   6 +-
 packages/fast-router/tsconfig.json            |   8 +-
 packages/fast-test-harness/package.json       |   2 +-
 .../fast-test-harness/tsconfig.build.json     |   8 +-
 .../2.x/api/fast-element.executioncontext.md  |   2 +-
 .../docs/2.x/api/fast-element.observable.md   |   4 +-
 .../context/fast-element.context.md           |  14 +--
 .../api/fast-element/di/fast-element.di.md    |   2 +-
 .../di/fast-element.registration.md           |  10 +-
 .../src/docs/2.x/resources/export-sizes.md    |   2 +-
 21 files changed, 198 insertions(+), 63 deletions(-)
 create mode 100644 change/@microsoft-fast-element-69df485f-8d87-42e5-a858-70e27f8988dc.json
 create mode 100644 change/@microsoft-fast-router-fea08afa-dc62-4165-bc7d-a65e8be2d2d3.json

diff --git a/change/@microsoft-fast-element-69df485f-8d87-42e5-a858-70e27f8988dc.json b/change/@microsoft-fast-element-69df485f-8d87-42e5-a858-70e27f8988dc.json
new file mode 100644
index 00000000000..51e92ed0580
--- /dev/null
+++ b/change/@microsoft-fast-element-69df485f-8d87-42e5-a858-70e27f8988dc.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate typescript compiltation to typescript/native-preview",
+  "packageName": "@microsoft/fast-element",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-fea08afa-dc62-4165-bc7d-a65e8be2d2d3.json b/change/@microsoft-fast-router-fea08afa-dc62-4165-bc7d-a65e8be2d2d3.json
new file mode 100644
index 00000000000..0cac0e55cdc
--- /dev/null
+++ b/change/@microsoft-fast-router-fea08afa-dc62-4165-bc7d-a65e8be2d2d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate typescript compiltation to typescript/native-preview",
+  "packageName": "@microsoft/fast-router",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/examples/todo-app/package.json b/examples/todo-app/package.json
index ed37df8d50a..92a70ed8cee 100644
--- a/examples/todo-app/package.json
+++ b/examples/todo-app/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "tsc -p tsconfig.json && vite build",
+    "build": "tsgo -p tsconfig.json && vite build",
     "start": "vite",
     "test": "npm run build"
   },
diff --git a/package-lock.json b/package-lock.json
index 778f04eb99d..c96d3223f64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@rollup/plugin-terser": "1.0.0",
         "@rollup/plugin-typescript": "12.3.0",
         "@types/express": "^5.0.6",
+        "@typescript/native-preview": "7.0.0-dev.20260421.2",
         "beachball": "2.63.0",
         "concurrently": "9.2.1",
         "esm": "3.2.25",
@@ -2390,6 +2391,123 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript/native-preview": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview/-/native-preview-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-CmajHI25HpVWE9R1XFoxr+cphJPxoYD3eFioQtAvXYkMFKnLdICMS9pXre9Pybizb75ejRxjKD5/CVG055rEIg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsgo": "bin/tsgo.js"
+      },
+      "optionalDependencies": {
+        "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-linux-arm": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-linux-x64": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260421.2",
+        "@typescript/native-preview-win32-x64": "7.0.0-dev.20260421.2"
+      }
+    },
+    "node_modules/@typescript/native-preview-darwin-arm64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-darwin-arm64/-/native-preview-darwin-arm64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-fHv1r3ZmVo6zxuAIFmuX3w9QxbcauoG0SsWhmDwm6VmRubLlOJIcmTtlmV3JAb9oOnq8LuzZljzT7Q39fSMQDw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@typescript/native-preview-darwin-x64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-darwin-x64/-/native-preview-darwin-x64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-KWTR6xbW9t+JS7D5DQIzo75pqVXVWUxF9PMv/+S6xsnOjCVd6g0ixHcFpFMJMKSUQpGPr8Z5f7b8ks6LHW01jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@typescript/native-preview-linux-arm": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-linux-arm/-/native-preview-linux-arm-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-BWLQO3nemLDSV5PoE5GPHe1dU9Dth77Kv8/cle9Ujcp4LhPo0KincdPqFH/qKeU/xvW25mgFueflZ1nc4rKuww==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@typescript/native-preview-linux-arm64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-linux-arm64/-/native-preview-linux-arm64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-VLMEuml3BhUb+jaL0TXQ4xvVODxJF+RhkI+tBWvlynsJI4khTXEiwWh+wPOJrsfBRYFRMXEu28Odl/HXkYze8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@typescript/native-preview-linux-x64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-linux-x64/-/native-preview-linux-x64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-qUrJWTB5/wv4wnRG0TRXElAxc2kykNiRNyEIEqBbLmzDlrcvAW7RRy8MXoY1ZyTiKGMu14itZ3x9oW6+blFpRw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@typescript/native-preview-win32-arm64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-win32-arm64/-/native-preview-win32-arm64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-Rc6NsWlZmCs5YUKVzKgwoBOoRUGsPzct4BDMRX0csD1devLBBc4AbUXWKsJRbpwIAnqMO1ld4sNHEb+wXgfNHQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@typescript/native-preview-win32-x64": {
+      "version": "7.0.0-dev.20260421.2",
+      "resolved": "https://registry.npmjs.org/@typescript/native-preview-win32-x64/-/native-preview-win32-x64-7.0.0-dev.20260421.2.tgz",
+      "integrity": "sha512-GQv1+dya1t6EqF2Cpsb+xoozovdX10JUSf6Kl/8xNkTapzmlHd+uMr+8ku3jIASTxoRGn0Mklgjj3MDKrOTuLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@web/config-loader": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@web/config-loader/-/config-loader-0.1.3.tgz",
diff --git a/package.json b/package.json
index 53a14bdfe08..aef48f503e3 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "test:validation": "npm run test:diff",
     "test": "lage test:node test:playwright",
     "test:chromium": "lage test:node test:chromium",
-    "watch": "tsc -p ./tsconfig.json -w --preserveWatchOutput",
+    "watch": "tsgo -p ./tsconfig.json -w --preserveWatchOutput",
     "format:check": "biome format --changed --no-errors-on-unmatched .",
     "format": "biome format --changed --no-errors-on-unmatched --fix --write .",
     "lint": "biome-changed",
@@ -57,6 +57,7 @@
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "12.3.0",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "@types/express": "^5.0.6",
     "beachball": "2.63.0",
     "concurrently": "9.2.1",
diff --git a/packages/fast-element/docs/api-report.api.md b/packages/fast-element/docs/api-report.api.md
index 871430dabb7..18297e610e5 100644
--- a/packages/fast-element/docs/api-report.api.md
+++ b/packages/fast-element/docs/api-report.api.md
@@ -484,7 +484,7 @@ export interface ExecutionContext<TParent = any> {
 
 // @public
 export const ExecutionContext: Readonly<{
-    default: ExecutionContext<any>;
+    default: ExecutionContext;
     getEvent(): Event | null;
     setEvent(event: Event | null): void;
 }>;
@@ -787,8 +787,8 @@ export const Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn, any>;
-    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(expression: Expression<TSource_1, TReturn_1, any>): boolean;
+    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn>;
+    isVolatileBinding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>): boolean;
 }>;
 
 // @public
diff --git a/packages/fast-element/docs/context/api-report.api.md b/packages/fast-element/docs/context/api-report.api.md
index f7d84f5f86e..cff808c83ce 100644
--- a/packages/fast-element/docs/context/api-report.api.md
+++ b/packages/fast-element/docs/context/api-report.api.md
@@ -14,14 +14,14 @@ export type Context<T> = {
 export const Context: Readonly<{
     eventType: "context-request";
     for<T = unknown>(name: string): FASTContext<T>;
-    create<T_1 = unknown>(name: string, initialValue?: T_1 | undefined): FASTContext<T_1>;
+    create<T = unknown>(name: string, initialValue?: T): FASTContext<T>;
     setDefaultRequestStrategy(strategy: FASTContextRequestStrategy): void;
-    get<T_2 extends UnknownContext>(target: EventTarget, context: T_2): ContextType<T_2>;
-    request<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
-    dispatch<T_4 extends UnknownContext>(target: EventTarget, context: T_4, callback: ContextCallback<ContextType<T_4>>, multiple?: boolean): void;
-    provide<T_5 extends UnknownContext>(target: EventTarget, context: T_5, value: ContextType<T_5>): void;
-    handle<T_6 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_6>) => void, context?: T_6 | undefined): void;
-    defineProperty<T_7 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_7): void;
+    get<T extends UnknownContext>(target: EventTarget, context: T): ContextType<T>;
+    request<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    dispatch<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    provide<T extends UnknownContext>(target: EventTarget, context: T, value: ContextType<T>): void;
+    handle<T extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T>) => void, context?: T): void;
+    defineProperty<T extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T): void;
 }>;
 
 // @public
diff --git a/packages/fast-element/docs/di/api-report.api.md b/packages/fast-element/docs/di/api-report.api.md
index 02bfc0b6921..e38842778da 100644
--- a/packages/fast-element/docs/di/api-report.api.md
+++ b/packages/fast-element/docs/di/api-report.api.md
@@ -100,7 +100,7 @@ export const DI: Readonly<{
     createContext: typeof createContext;
     inject(...dependencies: Key[]): (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void;
     transient<T extends Constructable>(target: T & Partial<RegisterSelf<T>>): T & RegisterSelf<T>;
-    singleton<T_1 extends Constructable>(target: T_1 & Partial<RegisterSelf<T_1>>, options?: SingletonOptions): T_1 & RegisterSelf<T_1>;
+    singleton<T extends Constructable>(target: T & Partial<RegisterSelf<T>>, options?: SingletonOptions): T & RegisterSelf<T>;
 }>;
 
 // @public
@@ -184,11 +184,11 @@ export interface Registration<K = any> {
 // @public
 export const Registration: Readonly<{
     instance<T>(key: Key, value: T): Registration<T>;
-    singleton<T_1 extends Constructable>(key: Key, value: T_1): Registration<InstanceType<T_1>>;
-    transient<T_2 extends Constructable>(key: Key, value: T_2): Registration<InstanceType<T_2>>;
-    callback<T_3>(key: Key, callback: ResolveCallback<T_3>): Registration<Resolved<T_3>>;
-    cachedCallback<T_4>(key: Key, callback: ResolveCallback<T_4>): Registration<Resolved<T_4>>;
-    aliasTo<T_5>(originalKey: T_5, aliasKey: Key): Registration<Resolved<T_5>>;
+    singleton<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    transient<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    callback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    cachedCallback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    aliasTo<T>(originalKey: T, aliasKey: Key): Registration<Resolved<T>>;
 }>;
 
 // @public
diff --git a/packages/fast-element/package.json b/packages/fast-element/package.json
index dc67bc23fc2..78677dd6418 100644
--- a/packages/fast-element/package.json
+++ b/packages/fast-element/package.json
@@ -205,8 +205,8 @@
     "build:fixtures:webui": "node scripts/declarative/build-fixtures-with-webui.js",
     "build:rollup": "rollup -c",
     "build:sizes": "node scripts/measure-sizes.js",
-    "build:tsc": "tsc -p ./tsconfig.json",
-    "dev": "tsc -p ./tsconfig.json -w",
+    "build:tsc": "tsgo -p ./tsconfig.json",
+    "dev": "tsgo -p ./tsconfig.json -w",
     "dev:declarative": "concurrently -k -n tsc,server \"npm run dev\" \"npm run test-server:declarative\"",
     "prepublishOnly": "npm run clean && npm run build",
     "lint": "biome-changed",
diff --git a/packages/fast-element/tsconfig.json b/packages/fast-element/tsconfig.json
index e75c0ef7e63..a4df7d6291f 100644
--- a/packages/fast-element/tsconfig.json
+++ b/packages/fast-element/tsconfig.json
@@ -1,24 +1,23 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
+        "rootDir": "./src",
         "declarationDir": "dist/dts",
         "outDir": "dist/esm",
         "verbatimModuleSyntax": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
+        "strict": false,
         "noImplicitAny": false,
+        "noImplicitThis": false,
+        "strictBindCallApply": false,
+        "strictFunctionTypes": false,
         "strictPropertyInitialization": false,
         "target": "es2015",
         "module": "ESNext",
         "moduleResolution": "bundler",
-        "lib": [
-            "DOM",
-            "ES2015",
-            "ES2016.Array.Include"
-        ]
+        "lib": ["DOM", "ES2015", "ES2016.Array.Include"]
     },
-    "include": [ "src" ],
-    "exclude": [
-        "src/**/*.pw.spec.ts"
-    ]
+    "include": ["src"],
+    "exclude": ["src/**/*.pw.spec.ts"]
 }
diff --git a/packages/fast-router/docs/api-report.api.md b/packages/fast-router/docs/api-report.api.md
index 78383f2a91e..d5ad4d1751c 100644
--- a/packages/fast-router/docs/api-report.api.md
+++ b/packages/fast-router/docs/api-report.api.md
@@ -81,8 +81,8 @@ export class DefaultRouter implements Router {
     addContributor(contributor: NavigationContributor): void;
     // (undocumented)
     beginRender(route: RecognizedRoute, command: RenderCommand): Promise<{
-        commit: any;
-        rollback: any;
+        commit: () => Promise<void>;
+        rollback: () => Promise<void>;
     }>;
     // (undocumented)
     get config(): RouterConfiguration | null;
@@ -514,12 +514,11 @@ export interface Router<TSettings = any> {
 
 // @beta (undocumented)
 export const Router: Readonly<{
-    getOrCreateFor(element: HTMLElement): Router<any> | DefaultRouter;
+    getOrCreateFor(element: HTMLElement): Router<any>;
     find(element: HTMLElement): Router | null;
-    from<TBase extends {
-        new (): HTMLElement;
-        prototype: HTMLElement;
-    }>(BaseType: TBase): new () => InstanceType<TBase> & RouterElement;
+    from<TBase extends typeof HTMLElement>(BaseType: TBase): {
+        new (): InstanceType<TBase> & RouterElement;
+    };
 }>;
 
 // @beta (undocumented)
diff --git a/packages/fast-router/package.json b/packages/fast-router/package.json
index 256a7c003b8..6a9ca12fa17 100644
--- a/packages/fast-router/package.json
+++ b/packages/fast-router/package.json
@@ -25,12 +25,12 @@
     "clean:dist": "clean dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
-    "build": "tsc -p ./tsconfig.json && npm run doc",
-    "dev": "tsc -p ./tsconfig.json -w",
+    "build": "tsgo -p ./tsconfig.json && npm run doc",
+    "dev": "tsgo -p ./tsconfig.json -w",
     "prepublishOnly": "npm run clean:dist && npm run build",
     "lint": "biome-changed",
     "lint:fix": "biome-changed -- --fix",
-    "test:node": "tsc -p ./tsconfig.json && node --test dist/esm/recognizer.spec.js",
+    "test:node": "tsgo -p ./tsconfig.json && node --test dist/esm/recognizer.spec.js",
     "test": "npm run lint && npm run doc:ci && npm run test:recognizer",
     "test:ci": "npm run doc:ci && npm run test:recognizer"
   },
diff --git a/packages/fast-router/tsconfig.json b/packages/fast-router/tsconfig.json
index 33497675001..aa89b185b2a 100644
--- a/packages/fast-router/tsconfig.json
+++ b/packages/fast-router/tsconfig.json
@@ -1,19 +1,19 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
+        "rootDir": "./src",
         "declarationDir": "dist/dts",
         "outDir": "dist/esm",
         "experimentalDecorators": true,
+        "types": ["node"],
+        "useUnknownInCatchVariables": false,
         "noImplicitAny": false,
         "strictPropertyInitialization": false,
         "target": "es2015",
         "module": "NodeNext",
         "importHelpers": true,
         "moduleResolution": "NodeNext",
-        "lib": [
-            "DOM",
-            "ES2015"
-        ]
+        "lib": ["DOM", "ES2015"]
     },
     "include": ["src"]
 }
diff --git a/packages/fast-test-harness/package.json b/packages/fast-test-harness/package.json
index d4d04b36d65..f490f9235b7 100644
--- a/packages/fast-test-harness/package.json
+++ b/packages/fast-test-harness/package.json
@@ -42,7 +42,7 @@
   },
   "scripts": {
     "build": "npm run build:tsc",
-    "build:tsc": "tsc -p tsconfig.build.json"
+    "build:tsc": "tsgo -p tsconfig.build.json"
   },
   "dependencies": {
     "express": "5.2.1"
diff --git a/packages/fast-test-harness/tsconfig.build.json b/packages/fast-test-harness/tsconfig.build.json
index 505ef126dd1..e7bba23dae1 100644
--- a/packages/fast-test-harness/tsconfig.build.json
+++ b/packages/fast-test-harness/tsconfig.build.json
@@ -1,8 +1,12 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
-        "baseUrl": ".",
-        "rootDir": "src",
+        "rootDir": "./src",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": ["node"],
+        "skipLibCheck": true,
+        "strict": false,
         "declarationDir": "dist/dts",
         "sourceMap": false,
         "outDir": "dist/esm"
diff --git a/sites/website/src/docs/2.x/api/fast-element.executioncontext.md b/sites/website/src/docs/2.x/api/fast-element.executioncontext.md
index 9861eb2b366..e094d323e47 100644
--- a/sites/website/src/docs/2.x/api/fast-element.executioncontext.md
+++ b/sites/website/src/docs/2.x/api/fast-element.executioncontext.md
@@ -21,7 +21,7 @@ Provides additional contextual information available to behaviors and expression
 
 ```typescript
 ExecutionContext: Readonly<{
-    default: ExecutionContext<any>;
+    default: ExecutionContext;
     getEvent(): Event | null;
     setEvent(event: Event | null): void;
 }>
diff --git a/sites/website/src/docs/2.x/api/fast-element.observable.md b/sites/website/src/docs/2.x/api/fast-element.observable.md
index 4086de8f420..feefc2804f3 100644
--- a/sites/website/src/docs/2.x/api/fast-element.observable.md
+++ b/sites/website/src/docs/2.x/api/fast-element.observable.md
@@ -28,7 +28,7 @@ Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn, any>;
-    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(expression: Expression<TSource_1, TReturn_1, any>): boolean;
+    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn>;
+    isVolatileBinding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>): boolean;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/2.x/api/fast-element/context/fast-element.context.md b/sites/website/src/docs/2.x/api/fast-element/context/fast-element.context.md
index 3bb7cd0d519..8f000901e57 100644
--- a/sites/website/src/docs/2.x/api/fast-element/context/fast-element.context.md
+++ b/sites/website/src/docs/2.x/api/fast-element/context/fast-element.context.md
@@ -23,13 +23,13 @@ Enables using: [W3C Community Context protocol.](https://github.com/webcomponent
 Context: Readonly<{
     eventType: "context-request";
     for<T = unknown>(name: string): FASTContext<T>;
-    create<T_1 = unknown>(name: string, initialValue?: T_1 | undefined): FASTContext<T_1>;
+    create<T = unknown>(name: string, initialValue?: T): FASTContext<T>;
     setDefaultRequestStrategy(strategy: FASTContextRequestStrategy): void;
-    get<T_2 extends UnknownContext>(target: EventTarget, context: T_2): ContextType<T_2>;
-    request<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
-    dispatch<T_4 extends UnknownContext>(target: EventTarget, context: T_4, callback: ContextCallback<ContextType<T_4>>, multiple?: boolean): void;
-    provide<T_5 extends UnknownContext>(target: EventTarget, context: T_5, value: ContextType<T_5>): void;
-    handle<T_6 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_6>) => void, context?: T_6 | undefined): void;
-    defineProperty<T_7 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_7): void;
+    get<T extends UnknownContext>(target: EventTarget, context: T): ContextType<T>;
+    request<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    dispatch<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    provide<T extends UnknownContext>(target: EventTarget, context: T, value: ContextType<T>): void;
+    handle<T extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T>) => void, context?: T): void;
+    defineProperty<T extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T): void;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/2.x/api/fast-element/di/fast-element.di.md b/sites/website/src/docs/2.x/api/fast-element/di/fast-element.di.md
index dd14a530415..665a2624b12 100644
--- a/sites/website/src/docs/2.x/api/fast-element/di/fast-element.di.md
+++ b/sites/website/src/docs/2.x/api/fast-element/di/fast-element.di.md
@@ -31,6 +31,6 @@ DI: Readonly<{
     createContext: typeof createContext;
     inject(...dependencies: Key[]): (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void;
     transient<T extends Constructable>(target: T & Partial<RegisterSelf<T>>): T & RegisterSelf<T>;
-    singleton<T_1 extends Constructable>(target: T_1 & Partial<RegisterSelf<T_1>>, options?: SingletonOptions): T_1 & RegisterSelf<T_1>;
+    singleton<T extends Constructable>(target: T & Partial<RegisterSelf<T>>, options?: SingletonOptions): T & RegisterSelf<T>;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/2.x/api/fast-element/di/fast-element.registration.md b/sites/website/src/docs/2.x/api/fast-element/di/fast-element.registration.md
index 5b81b16d78b..eeba9c5acf3 100644
--- a/sites/website/src/docs/2.x/api/fast-element/di/fast-element.registration.md
+++ b/sites/website/src/docs/2.x/api/fast-element/di/fast-element.registration.md
@@ -22,11 +22,11 @@ You can use the resulting Registration of any of the factory methods to register
 ```typescript
 Registration: Readonly<{
     instance<T>(key: Key, value: T): Registration<T>;
-    singleton<T_1 extends Constructable>(key: Key, value: T_1): Registration<InstanceType<T_1>>;
-    transient<T_2 extends Constructable>(key: Key, value: T_2): Registration<InstanceType<T_2>>;
-    callback<T_3>(key: Key, callback: ResolveCallback<T_3>): Registration<Resolved<T_3>>;
-    cachedCallback<T_4>(key: Key, callback: ResolveCallback<T_4>): Registration<Resolved<T_4>>;
-    aliasTo<T_5>(originalKey: T_5, aliasKey: Key): Registration<Resolved<T_5>>;
+    singleton<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    transient<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    callback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    cachedCallback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    aliasTo<T>(originalKey: T, aliasKey: Key): Registration<Resolved<T>>;
 }>
 ```
 
diff --git a/sites/website/src/docs/2.x/resources/export-sizes.md b/sites/website/src/docs/2.x/resources/export-sizes.md
index c655cdaec5b..ecac32a669f 100644
--- a/sites/website/src/docs/2.x/resources/export-sizes.md
+++ b/sites/website/src/docs/2.x/resources/export-sizes.md
@@ -20,7 +20,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
 | CDN Rollup Bundle | 67.59 KB | 20.00 KB | 17.93 KB |
-| FASTElement | 28.10 KB | 8.75 KB | 7.87 KB |
+| FASTElement | 28.10 KB | 8.72 KB | 7.86 KB |
 | Updates | 3.61 KB | 1.48 KB | 1.26 KB |
 | Observable | 8.12 KB | 2.99 KB | 2.66 KB |
 | observable | 8.16 KB | 3.00 KB | 2.68 KB |

From 2f87672ca3480134bc1834690fe411f84287e650 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 28 Apr 2026 22:19:08 -0700
Subject: [PATCH 04/14] feat: allow fast-build rendering without state (#7502)

Adds optional-state rendering for `microsoft-fast-build` and `@microsoft/fast-build`:

- Omitted state is treated as an empty object.
- Missing content bindings render empty output.
- Missing bound attributes are omitted.
- Documentation, tests, and a Beachball change file are included.

- `npm run build -w @microsoft/fast-build`
- `cargo test --manifest-path crates/microsoft-fast-build/Cargo.toml`
- `npm run test:node -w @microsoft/fast-build`
- `npm run biome:check`
- `npm run format:check`
- `npm run checkchange`
- `git diff --check`

- [x] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

(cherry picked from commit d40f0a79fb6af50fd87a4e09b251ae78e999c36e)
---
 ...-9d7b843d-87a6-4f82-9db2-039234d8ad6e.json |   7 +
 crates/microsoft-fast-build/DESIGN.md         |  45 +++-
 crates/microsoft-fast-build/README.md         |   7 +-
 crates/microsoft-fast-build/src/attribute.rs  | 184 +++++++++-----
 crates/microsoft-fast-build/src/content.rs    |  12 +-
 crates/microsoft-fast-build/src/directive.rs  |  10 +-
 crates/microsoft-fast-build/src/error.rs      |   2 +-
 crates/microsoft-fast-build/src/lib.rs        |  49 +++-
 crates/microsoft-fast-build/src/node.rs       |  52 ++--
 crates/microsoft-fast-build/src/renderer.rs   |   5 +-
 crates/microsoft-fast-build/src/wasm.rs       | 101 +++++---
 .../tests/custom_elements.rs                  |  15 +-
 .../microsoft-fast-build/tests/edge_cases.rs  | 102 +++++++-
 crates/microsoft-fast-build/tests/errors.rs   |  49 ++--
 crates/microsoft-fast-build/tests/f_repeat.rs |  28 ++
 .../microsoft-fast-build/tests/hydration.rs   |  40 +++
 packages/fast-build/DESIGN.md                 |  21 +-
 packages/fast-build/README.md                 |  18 +-
 packages/fast-build/bin/fast.js               |  30 ++-
 packages/fast-build/test/config.test.js       | 239 ++++++++++++++++++
 20 files changed, 815 insertions(+), 201 deletions(-)
 create mode 100644 change/@microsoft-fast-build-9d7b843d-87a6-4f82-9db2-039234d8ad6e.json

diff --git a/change/@microsoft-fast-build-9d7b843d-87a6-4f82-9db2-039234d8ad6e.json b/change/@microsoft-fast-build-9d7b843d-87a6-4f82-9db2-039234d8ad6e.json
new file mode 100644
index 00000000000..4a44098f1cf
--- /dev/null
+++ b/change/@microsoft-fast-build-9d7b843d-87a6-4f82-9db2-039234d8ad6e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: allow fast-build rendering without state; omitted CLI state no longer probes state.json",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/crates/microsoft-fast-build/DESIGN.md b/crates/microsoft-fast-build/DESIGN.md
index 2132eebc3ad..088c9a37902 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -6,7 +6,7 @@ This document explains how the crate works internally: the data flow, the key da
 
 ## High-level overview
 
-The crate takes a **FAST declarative HTML template** (a string) and a **JSON state object** and produces static HTML. It does this in a single recursive pass — no AST is built, no DOM is constructed. The template string is scanned byte-by-byte, literal regions are copied verbatim, and directives / bindings are resolved and replaced.
+The crate takes a **FAST declarative HTML template** (a string) and an optional **JSON state object** and produces static HTML. Public no-state entry points treat omitted state exactly like an empty object (`{}`). Rendering happens in a single recursive pass — no AST is built, no DOM is constructed. The template string is scanned byte-by-byte, literal regions are copied verbatim, and directives / bindings are resolved and replaced.
 
 ```
 render_template(template, state_str)
@@ -134,7 +134,7 @@ Both binders share the same structure: find the opening delimiter, find the clos
 ### `render_triple_brace` (`{{{expr}}}`)
 - Same resolution, but skips HTML escaping — used for injecting raw HTML.
 
-Both return `RenderError::EmptyBinding` for blank expressions, `RenderError::UnclosedBinding`/`UnclosedUnescapedBinding` if no closing delimiter is found, and `RenderError::MissingState` if the expression does not resolve.
+Both return `RenderError::EmptyBinding` for blank expressions and `RenderError::UnclosedBinding`/`UnclosedUnescapedBinding` if no closing delimiter is found. If the expression does not resolve in state, the content binding renders an empty string.
 
 ---
 
@@ -149,6 +149,12 @@ Both return `RenderError::EmptyBinding` for blank expressions, `RenderError::Unc
 
 `get_nested_property` walks a dot-separated path through `JsonValue::Object` and `JsonValue::Array` nodes. Numeric path segments (e.g. `list.0`) are used as array indices. The implementation traverses the tree via references and only clones the final leaf value — no intermediate sub-trees are cloned. The one exception is the synthesised `length` value for arrays, which is returned early as an owned `JsonValue::Number` only when `length` is the final segment (for example, `items.length`). Additional segments after `length` do not resolve and return `None` (for example, `items.length.foo`).
 
+Callers decide how to handle unresolved values:
+- Content bindings (`{{expr}}` / `{{{expr}}}`) render an empty string.
+- HTML attribute bindings omit the entire attribute.
+- `<f-repeat>` treats a missing list binding as an empty array and renders zero iterations; present non-array values return `RenderError::NotAnArray`.
+- `<f-when>` evaluates a missing binding as falsy.
+
 ### Loop variable scoping
 
 `loop_vars` is a `Vec<(String, JsonValue)>`. Each `<f-repeat>` iteration pushes one entry. Because `resolve_value` scans in reverse, the innermost repeat's variable shadows outer ones. Root state is always accessible for any key that is not shadowed.
@@ -192,7 +198,7 @@ Because `||` is sought before `&&`, the recursive split on `||` runs first. Each
 
 1. Extracts inner HTML and end position (same as `render_when`).
 2. Parses `value="{{item in items}}"` with `parse_repeat_expr` — expects exactly three whitespace-separated tokens where the middle is `"in"`.
-3. Resolves the list expression. Returns `RenderError::NotAnArray` if the value is not a `JsonValue::Array`.
+3. Resolves the list expression. Missing values are treated as an empty array. Present non-array values return `RenderError::NotAnArray`.
 4. For each item in the array, pushes `(var_name, item)` onto a new `loop_vars` vec and calls `render_node` on the inner template.
 5. Uses `Iterator::collect::<Result<String, _>>()` to short-circuit on the first error in any iteration.
 
@@ -228,7 +234,7 @@ A custom element is any opening tag whose name contains a hyphen, excluding `f-w
    - `aria-*` attributes (e.g. `aria-disabled`) are **converted to their camelCase ARIA property name** using the `attribute_lookup::aria_attr_to_property_key` lookup table (`aria-disabled` → `ariaDisabled`, `aria-valuenow` → `ariaValueNow`). This follows the [ARIA reflection](https://developer.mozilla.org/en-US/docs/Web/API/Element#instance_properties_included_from_aria) convention on `Element`. A static lookup table is used instead of algorithmic conversion because ARIA attribute names do not place dashes at word boundaries (e.g. `aria-valuenow`, not `aria-value-now`). Templates reference the camelCase form: `{{ariaDisabled}}`.
    - HTML attributes whose property name differs from the attribute name (e.g. `tabindex` → `tabIndex`, `readonly` → `readOnly`) are **converted to their camelCase DOM property name** using the `attribute_lookup::html_attr_to_property_key` lookup table. Attributes whose names already match (e.g. `disabled`, `title`) are not in the table and pass through as-is.
    - No value (boolean attribute) → `Bool(true)`
-   - `"{{binding}}"` → resolve from parent state (can be any `JsonValue` type, including arrays and objects)
+   - `"{{binding}}"` → resolve from parent state (can be any `JsonValue` type, including arrays and objects); if the binding is missing, the child-state value becomes `JsonValue::Null`, which displays as empty content
    - Value starting with `[` or `{` → parsed as a JSON array or object literal (e.g. `items='["a","b","c"]'` or `config='{"key":"val"}'`). If parsing fails the value falls back to `String`.
    - Anything else → `String` (plain literal values like `count="42"` are strings; use `count="{{count}}"` to resolve from parent state as a number)
 5. **Render the shadow template** by calling `render_node` recursively with the child state as root and a **fresh `HydrationScope`** (always active). The `Locator` is threaded through so nested custom elements are expanded too.
@@ -236,7 +242,7 @@ A custom element is any opening tag whose name contains a hyphen, excluding `f-w
 7. **Build the outer opening tag** via `build_element_open_tag`, which handles attribute resolution and optionally injects hydration markers. The behaviour differs by context:
    - **Root custom elements** (`is_entry: true`): handled by `build_entry_element_open_tag`. `{{binding}}` attribute values are resolved from the root state:
      - **Primitives** (`String`, `Number`, `Bool`) — rendered with the resolved value (HTML-escaped). e.g. `text="{{message}}"` → `text="Hello world"`.
-     - **Non-primitives** (`Array`, `Object`, `Null`) — stripped. Arrays and objects cannot be meaningfully represented as HTML attribute values; the state is available directly in the element's template via state propagation. Because of this, same-name non-primitive bindings like `list="{{list}}"` are redundant in entry HTML and can be omitted — state propagation provides the value automatically.
+     - **Non-primitives** (`Array`, `Object`, `Null`) and missing values — stripped. Arrays and objects cannot be meaningfully represented as HTML attribute values; the state is available directly in the element's template via state propagation. Because of this, same-name non-primitive bindings like `list="{{list}}"` are redundant in entry HTML and can be omitted — state propagation provides the value automatically.
      - **Static attributes** (no binding syntax, e.g. `id="main"`) — passed through unchanged.
      - **Client-only attrs** (`@event`, `:prop`, attribute directives) — stripped as usual.
      - No `data-fe` marker is added — root elements at entry level have no parent hydration scope.
@@ -284,16 +290,22 @@ This means the strategy only affects "plain" custom element attributes like `sel
 All render functions accept `config: Option<&RenderConfig>` as their last parameter. Pass `None` for defaults, or `Some(&config)` for custom configuration:
 
 - `render(template, state, config)`
+- `render_without_state(template, config)`
 - `render_template(template, state_str, config)`
+- `render_template_without_state(template, config)`
 - `render_with_locator(template, state, locator, config)`
+- `render_with_locator_without_state(template, locator, config)`
 - `render_template_with_locator(template, state_str, locator, config)`
+- `render_template_with_locator_without_state(template, locator, config)`
 - `render_entry_with_locator(template, state, locator, config)`
+- `render_entry_with_locator_without_state(template, locator, config)`
 - `render_entry_template_with_locator(template, state_str, locator, config)`
+- `render_entry_template_with_locator_without_state(template, locator, config)`
 
-In WASM, `render_with_templates` and `render_entry_with_templates` accept an `attribute_name_strategy` string parameter (`""`, `"none"`, or `"camelCase"`):
+The `*_without_state` APIs render with an empty object root state. In WASM, the state parameter is optional for `render`, `render_with_templates`, and `render_entry_with_templates`; omitted state also uses an empty object. The template-rendering WASM exports accept an `attribute_name_strategy` string parameter (`""`, `"none"`, or `"camelCase"`):
 
-- `render_with_templates(entry, templates_json, state, attribute_name_strategy)`
-- `render_entry_with_templates(entry, templates_json, state, attribute_name_strategy)`
+- `render_with_templates(entry, templates_json, state?, attribute_name_strategy?)`
+- `render_entry_with_templates(entry, templates_json, state?, attribute_name_strategy?)`
 
 ---
 
@@ -333,7 +345,7 @@ Plain HTML opening tags in the literal regions are scanned by `attribute::find_n
 2. The current `binding_idx` is recorded as `start`, and advanced by the total count.
 3. `resolve_attribute_bindings_in_tag` resolves each attribute binding:
    - `?attr="{{expr}}"` — **boolean binding**: `expr` is evaluated as a boolean. If truthy, the bare attribute name (without `?`) is emitted; if falsy, the attribute is omitted entirely. The `extract_bool_attr_prefix` helper detects this pattern by checking whether the output accumulated so far ends with `?name="`.
-   - `attr="{{expr}}"` — **value binding**: `expr` is resolved to a string and HTML-escaped.
+   - `attr="{{expr}}"` — **value binding**: `expr` is resolved to a string and HTML-escaped. If `expr` is missing, the entire attribute is omitted, though the hydration binding count still includes it.
    - `attr="{expr}"` — **single-brace binding**: left unchanged (client-side only).
 4. `inject_marker` inserts `data-fe="N"` (where `N` is the binding count) before the closing `>` of the tag.
 
@@ -450,12 +462,13 @@ Hand-rolled in `glob_match` → `match_segments` → `match_segment` → `match_
 
 ## WASM bindings — `wasm.rs`
 
-`wasm.rs` is compiled only for the `wasm32-unknown-unknown` target (`#[cfg(target_arch = "wasm32")]`). It exposes three functions to JavaScript via `wasm-bindgen`:
+`wasm.rs` is compiled only for the `wasm32-unknown-unknown` target (`#[cfg(target_arch = "wasm32")]`). It exposes four functions to JavaScript via `wasm-bindgen`:
 
 | Export | Signature | Description |
 |--------|-----------|-------------|
-| `render` | `(entry: &str, state: &str) → String` | Render a template with no custom elements |
-| `render_with_templates` | `(entry: &str, templates_json: &str, state: &str) → String` | Render with a pre-built `{name: content}` templates map |
+| `render` | `(entry: &str, state?: string) → String` | Render a template with no custom elements; omitted state is `{}` |
+| `render_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string) → String` | Render a template with a pre-built `{name: content}` templates map using non-entry semantics; omitted state is `{}` |
+| `render_entry_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string) → String` | Render top-level entry HTML with a pre-built `{name: content}` templates map; omitted state is `{}` |
 | `parse_f_templates` | `(html: &str) → String` | Parse `<f-template>` elements and return a JSON array |
 
 ### `parse_f_templates`
@@ -473,7 +486,11 @@ Calls `locator::parse_f_templates` (the same function used by `Locator::from_pat
 
 ### `render_with_templates`
 
-Accepts `templates_json` as a JSON object string mapping element names to raw template strings (the inner content already extracted from `<template>`). Constructs a `Locator::from_templates` map and calls `render_template_with_locator`.
+Accepts `templates_json` as a JSON object string mapping element names to raw template strings (the inner content already extracted from `<template>`). Constructs a `Locator::from_templates` map and calls `render_template_with_locator` when state is provided, or the no-state equivalent when it is omitted. This preserves the original non-entry semantics for existing JS consumers.
+
+### `render_entry_with_templates`
+
+Accepts the same arguments as `render_with_templates`, but calls `render_entry_template_with_locator` when state is provided, or the no-state equivalent when it is omitted. Root-level custom elements therefore receive entry opening-tag handling, matching CLI entry rendering.
 
 ---
 
@@ -546,6 +563,6 @@ A hand-rolled recursive-descent parser. No external crates.
 
 **Atomic tag processing for attribute bindings.** When a plain HTML opening tag in the literal region contains `{{expr}}` attribute values, those values are resolved and `data-fe` is injected into the tag as a whole before `next_directive` ever sees them. This prevents the `{{expr}}` inside attributes from being mistaken for content bindings. The cost is that `next_directive` is called once extra per tag iteration, but tags are short and rare enough that this has no meaningful performance impact.
 
-**`Result` throughout.** All render functions return `Result<_, RenderError>`. Errors propagate via `?` without any silent failures. The one deliberate choice: missing state keys return `RenderError::MissingState` rather than an empty string, so template bugs surface early.
+**`Result` throughout.** All render functions return `Result<_, RenderError>`. Errors propagate via `?` for malformed templates, invalid JSON, invalid repeat expressions, and invalid directive state. Missing optional values are handled by binding context: content bindings render empty output, attribute bindings omit the attribute, `<f-when>` treats the value as falsy, and `<f-repeat>` treats a missing list binding as an empty array while still erroring when a present value is not an array.
 
 **Left-to-right, first-match scanning.** Directives are found by searching for their literal opening strings. The earliest position wins. This is O(n×d) where n is the template length and d is the number of directive types — acceptable for the template sizes this crate targets.
diff --git a/crates/microsoft-fast-build/README.md b/crates/microsoft-fast-build/README.md
index 69ace6d2165..35c49ba3688 100644
--- a/crates/microsoft-fast-build/README.md
+++ b/crates/microsoft-fast-build/README.md
@@ -221,6 +221,7 @@ When `value` is a bare reference (e.g. `{{items}}`), the value is coerced to a b
 ```
 
 Inside `<f-repeat>`, `{{item}}` resolves to the current loop variable and `{{$index}}` resolves to the 0-based iteration index. Other bindings fall back to the root state (e.g. `{{title}}` above).
+If the list binding or dot path is missing, `<f-repeat>` treats it as an empty array and renders zero iterations. Present non-array values still return `RenderError::NotAnArray`.
 
 ```html
 <f-repeat value="{{row in rows}}">
@@ -517,6 +518,8 @@ const html = render_entry_with_templates(
 );
 ```
 
+Use `render_with_templates` for the original non-entry template-rendering semantics; use `render_entry_with_templates` for top-level entry HTML rendering.
+
 Passing `"none"` or `""` as the strategy uses the default behaviour.
 
 ---
@@ -594,7 +597,7 @@ All render functions return `Result<String, RenderError>`. `RenderError` is an e
 | `UnclosedBinding` | `{{` with no closing `}}` |
 | `UnclosedUnescapedBinding` | `{{{` with no closing `}}}` |
 | `EmptyBinding` | `{{}}` — blank expression |
-| `MissingState` | `{{key}}` where `key` is absent from state |
+| `MissingState` | Required directive state is absent; missing `<f-repeat>` lists render zero iterations instead |
 | `UnclosedDirective` | `<f-when>` / `<f-repeat>` with no matching close tag |
 | `MissingValueAttribute` | Directive missing `value="{{…}}"` attribute |
 | `InvalidRepeatExpression` | Repeat value not in `item in list` format |
@@ -606,7 +609,7 @@ All render functions return `Result<String, RenderError>`. `RenderError` is an e
 Every error message includes a description of the problem and a snippet of the template near the error site to aid debugging:
 
 ```
-missing state: '{{title}}' has no matching key in the provided state — template: "…<h1>{{title}}</h1>…"
+type error: '{{items}}' must resolve to a JSON array for use in <f-repeat> — template: "…<f-repeat value=\"{{item in items}}\">…"
 unclosed binding '{{name': no closing '}}' found to end the expression — template: "Hello {{name"
 duplicate template: element '<my-button>' is defined in multiple files: ./a/my-button.html, ./b/my-button.html
 ```
diff --git a/crates/microsoft-fast-build/src/attribute.rs b/crates/microsoft-fast-build/src/attribute.rs
index d1627e6800e..5b1e21879b9 100644
--- a/crates/microsoft-fast-build/src/attribute.rs
+++ b/crates/microsoft-fast-build/src/attribute.rs
@@ -254,76 +254,116 @@ pub(crate) fn data_attr_to_dataset_key(name: &str) -> Option<String> {
 /// single-brace values and all other content unchanged.
 /// Handles `?attr="{{expr}}"` boolean bindings: evaluates `expr` as a boolean and
 /// either renders the bare attribute name (if true) or omits the attribute (if false).
+/// If a normal attribute binding cannot be resolved, the whole attribute is omitted.
 pub(crate) fn resolve_attribute_bindings_in_tag(
     tag: &str,
     root: &crate::json::JsonValue,
     loop_vars: &[(String, crate::json::JsonValue)],
 ) -> String {
-    use crate::content::html_escape;
-    use crate::context::resolve_value;
     use crate::expression::evaluate;
+
+    let trimmed = tag.trim_end();
+    let is_self_closing = trimmed.ends_with("/>");
+    let has_closing_gt = is_self_closing || trimmed.ends_with('>');
+    let tag_name = match read_tag_name(tag, 0) {
+        Some(name) => name,
+        None => return tag.to_string(),
+    };
+
     let mut result = String::with_capacity(tag.len());
+    result.push('<');
+    result.push_str(&tag_name);
+
+    for attr in parse_element_attribute_parts(tag) {
+        let name = attr.name;
+        if name.starts_with('?') {
+            if let Some(v) = attr.value {
+                let trimmed = v.trim();
+                if trimmed.starts_with("{{") && trimmed.ends_with("}}") && trimmed.len() > 4 {
+                    let expr = trimmed[2..trimmed.len() - 2].trim();
+                    if evaluate(expr, root, loop_vars) {
+                        result.push(' ');
+                        result.push_str(&name[1..]);
+                    }
+                }
+            }
+            continue;
+        }
+
+        match attr.value {
+            None => {
+                result.push(' ');
+                result.push_str(&attr.raw);
+            }
+            Some(v) if v.contains("{{") => {
+                if let Some(resolved) = resolve_attribute_value(&v, root, loop_vars) {
+                    append_quoted_attribute(&mut result, &name, &resolved);
+                }
+            }
+            Some(_) => {
+                result.push(' ');
+                result.push_str(&attr.raw);
+            }
+        }
+    }
+
+    if is_self_closing {
+        result.push_str(" />");
+    } else if has_closing_gt {
+        result.push('>');
+    }
+
+    result
+}
+
+pub(crate) fn append_quoted_attribute(out: &mut String, name: &str, value: &str) {
+    out.push(' ');
+    out.push_str(name);
+    out.push_str("=\"");
+    append_double_quote_escaped(out, value);
+    out.push('"');
+}
+
+fn append_double_quote_escaped(out: &mut String, value: &str) {
+    for ch in value.chars() {
+        match ch {
+            '"' => out.push_str("&quot;"),
+            _ => out.push(ch),
+        }
+    }
+}
+
+fn resolve_attribute_value(
+    value: &str,
+    root: &crate::json::JsonValue,
+    loop_vars: &[(String, crate::json::JsonValue)],
+) -> Option<String> {
+    use crate::content::html_escape;
+    use crate::context::resolve_value;
+
+    let mut result = String::with_capacity(value.len());
     let mut pos = 0;
     loop {
-        let dbl = match find_str(tag, "{{", pos) {
+        let dbl = match find_str(value, "{{", pos) {
             None => {
-                result.push_str(&tag[pos..]);
-                break;
+                result.push_str(&value[pos..]);
+                return Some(result);
             }
             Some(idx) => idx,
         };
         let inner_start = dbl + 2;
-        let end = match find_str(tag, "}}", inner_start) {
+        let end = match find_str(value, "}}", inner_start) {
             None => {
-                result.push_str(&tag[dbl..]);
-                break;
+                result.push_str(&value[pos..]);
+                return Some(result);
             }
             Some(idx) => idx,
         };
-        let expr = tag[inner_start..end].trim();
-
-        // Append literal text up to {{
-        result.push_str(&tag[pos..dbl]);
-
-        // Check whether this {{expr}} is the value of a `?attr` boolean binding.
-        // Pattern: `result` ends with `?name="` after appending the prefix text.
-        if let Some(bool_name) = extract_bool_attr_prefix(&result) {
-            // Remove `?name="` from result (len = '?' + name + '="' = name.len() + 3)
-            let trim_to = result.len() - (bool_name.len() + 3);
-            result.truncate(trim_to);
-            // Render the bare attribute name when the expression is truthy, nothing when falsy.
-            if evaluate(expr, root, loop_vars) {
-                result.push_str(&bool_name);
-            }
-            // Skip past `}}"` (closing `}}` + closing `"`)
-            pos = end + 3;
-        } else {
-            let val = resolve_value(expr, root, loop_vars)
-                .map(|v| html_escape(&v.to_display_string()))
-                .unwrap_or_default();
-            result.push_str(&val);
-            pos = end + 2;
-        }
-    }
-    result
-}
-
-/// If `result` ends with `?name="` (a FAST boolean attribute prefix), return `name`.
-/// Returns `None` for any other suffix.
-fn extract_bool_attr_prefix(result: &str) -> Option<String> {
-    if !result.ends_with("=\"") {
-        return None;
-    }
-    let before_eq = &result[..result.len() - 2];
-    let name_start = before_eq
-        .rfind(|c: char| c.is_ascii_whitespace())
-        .map(|i| i + 1)
-        .unwrap_or(0);
-    let attr_part = &before_eq[name_start..];
-    if attr_part.starts_with('?') && attr_part.len() > 1 {
-        Some(attr_part[1..].to_string())
-    } else {
-        None
+        let expr = value[inner_start..end].trim();
+        let resolved = resolve_value(expr, root, loop_vars)?;
+        result.push_str(&value[pos..dbl]);
+        result.push_str(&html_escape(&resolved.to_display_string()));
+        pos = end + 2;
     }
 }
 
@@ -347,18 +387,18 @@ pub(crate) fn strip_client_only_attrs(tag: &str) -> String {
     };
 
     let mut out = format!("<{}", tag_name);
-    for (name, value) in parse_element_attributes(tag) {
-        if name.starts_with('@') || name.starts_with(':')
+    for attr in parse_element_attribute_parts(tag) {
+        let name = attr.name;
+        if name.starts_with('@')
+            || name.starts_with(':')
             || name.eq_ignore_ascii_case("f-ref")
             || name.eq_ignore_ascii_case("f-slotted")
             || name.eq_ignore_ascii_case("f-children")
         {
             continue;
         }
-        match value {
-            None => { out.push(' '); out.push_str(&name); }
-            Some(v) => out.push_str(&format!(" {}=\"{}\"", name, v)),
-        }
+        out.push(' ');
+        out.push_str(&attr.raw);
     }
 
     if is_self_closing {
@@ -428,6 +468,19 @@ fn is_skippable_tag(name: &str, locator: Option<&crate::locator::Locator>) -> bo
 /// Returns `(attribute_name, Option<value>)` — `None` value means boolean attribute.
 /// Handles double-quoted, single-quoted, and unquoted values.
 pub(crate) fn parse_element_attributes(open_tag: &str) -> Vec<(String, Option<String>)> {
+    parse_element_attribute_parts(open_tag)
+        .into_iter()
+        .map(|attr| (attr.name, attr.value))
+        .collect()
+}
+
+pub(crate) struct ParsedAttribute {
+    pub name: String,
+    pub value: Option<String>,
+    pub raw: String,
+}
+
+pub(crate) fn parse_element_attribute_parts(open_tag: &str) -> Vec<ParsedAttribute> {
     let mut attrs = Vec::new();
     let bytes = open_tag.as_bytes();
     let mut i = 0;
@@ -462,6 +515,7 @@ pub(crate) fn parse_element_attributes(open_tag: &str) -> Vec<(String, Option<St
         {
             i += 1;
         }
+        let name_end = i;
         let name = open_tag[name_start..i].to_string();
 
         if name.is_empty() {
@@ -477,7 +531,11 @@ pub(crate) fn parse_element_attributes(open_tag: &str) -> Vec<(String, Option<St
 
         if i >= bytes.len() || bytes[i] != b'=' {
             // Boolean attribute — no value.
-            attrs.push((name, None));
+            attrs.push(ParsedAttribute {
+                name,
+                value: None,
+                raw: open_tag[name_start..name_end].to_string(),
+            });
             continue;
         }
 
@@ -493,7 +551,11 @@ pub(crate) fn parse_element_attributes(open_tag: &str) -> Vec<(String, Option<St
         let (value, new_i) = parse_attribute_value(open_tag, bytes, i);
         i = new_i;
 
-        attrs.push((name, Some(value)));
+        attrs.push(ParsedAttribute {
+            name,
+            value: Some(value),
+            raw: open_tag[name_start..i].to_string(),
+        });
     }
 
     attrs
@@ -512,7 +574,7 @@ fn parse_attribute_value(open_tag: &str, bytes: &[u8], i: usize) -> (String, usi
     } else {
         let start = i;
         let mut end = i;
-        while end < bytes.len() && !bytes[end].is_ascii_whitespace() && bytes[end] != b'>' && bytes[end] != b'/' {
+        while end < bytes.len() && !bytes[end].is_ascii_whitespace() && bytes[end] != b'>' {
             end += 1;
         }
         (open_tag[start..end].to_string(), end)
diff --git a/crates/microsoft-fast-build/src/content.rs b/crates/microsoft-fast-build/src/content.rs
index 6c33d9bd282..545f594c516 100644
--- a/crates/microsoft-fast-build/src/content.rs
+++ b/crates/microsoft-fast-build/src/content.rs
@@ -4,6 +4,7 @@ use crate::attribute::find_str;
 use crate::error::{RenderError, template_context, truncate};
 
 /// Render a `{{{ expr }}}` unescaped HTML binding.
+/// Missing values render as an empty string.
 pub fn render_triple_brace(
     template: &str,
     at: usize,
@@ -21,14 +22,12 @@ pub fn render_triple_brace(
     }
     let output = resolve_value(expr, root, loop_vars)
         .map(|v| v.to_display_string())
-        .ok_or_else(|| RenderError::MissingState {
-            binding: expr.to_string(),
-            context: template_context(template, at),
-        })?;
+        .unwrap_or_default();
     Ok((output, end + 3))
 }
 
 /// Render a `{{ expr }}` HTML-escaped content binding.
+/// Missing values render as an empty string.
 pub fn render_double_brace(
     template: &str,
     at: usize,
@@ -46,10 +45,7 @@ pub fn render_double_brace(
     }
     let output = resolve_value(expr, root, loop_vars)
         .map(|v| html_escape(&v.to_display_string()))
-        .ok_or_else(|| RenderError::MissingState {
-            binding: expr.to_string(),
-            context: template_context(template, at),
-        })?;
+        .unwrap_or_default();
     Ok((output, end + 2))
 }
 
diff --git a/crates/microsoft-fast-build/src/directive.rs b/crates/microsoft-fast-build/src/directive.rs
index 7b9ec3aa777..144875aa7f4 100644
--- a/crates/microsoft-fast-build/src/directive.rs
+++ b/crates/microsoft-fast-build/src/directive.rs
@@ -142,10 +142,10 @@ pub fn render_repeat(
             context: template_context(template, at),
         })?;
     match resolve_value(&list_expr, root, loop_vars) {
-        None => Err(RenderError::MissingState {
-            binding: list_expr,
-            context: template_context(template, at),
-        }),
+        None => {
+            let output = render_repeat_items(&inner, &[], &var_name, root, loop_vars, locator, hydration, config)?;
+            Ok((output, after))
+        }
         Some(JsonValue::Array(items)) => {
             let output = render_repeat_items(&inner, &items, &var_name, root, loop_vars, locator, hydration, config)?;
             Ok((output, after))
@@ -408,7 +408,7 @@ fn build_element_open_tag(
     is_entry: bool,
 ) -> String {
     if is_entry {
-        // Entry-level root custom elements receive the full root state directly.
+        // Entry-level root custom element opening tags resolve bindings from root state.
         // Resolve {{binding}} attributes: keep primitives (string/number/bool) with
         // their resolved value, strip non-primitives (array/object/null) since they
         // cannot be meaningfully represented as an HTML attribute value.
diff --git a/crates/microsoft-fast-build/src/error.rs b/crates/microsoft-fast-build/src/error.rs
index b02f25b102a..f68c966d348 100644
--- a/crates/microsoft-fast-build/src/error.rs
+++ b/crates/microsoft-fast-build/src/error.rs
@@ -9,7 +9,7 @@ pub enum RenderError {
     UnclosedUnescapedBinding { expr: String, context: String },
     /// `{{}}` — the expression between `{{` and `}}` is empty.
     EmptyBinding { context: String },
-    /// `{{key}}` — `key` is not present in the provided state.
+    /// A required directive binding is not present in the provided state.
     MissingState { binding: String, context: String },
     /// A directive (`<f-when>` / `<f-repeat>`) has no matching closing tag.
     UnclosedDirective { tag: String, context: String },
diff --git a/crates/microsoft-fast-build/src/lib.rs b/crates/microsoft-fast-build/src/lib.rs
index 3d50a6d38a6..a6775cb0e69 100644
--- a/crates/microsoft-fast-build/src/lib.rs
+++ b/crates/microsoft-fast-build/src/lib.rs
@@ -1,9 +1,10 @@
 //! # microsoft-fast-build
 //!
 //! Server-side renderer for [FAST](https://www.fast.design/) declarative HTML templates.
-//! Takes a template string and a JSON state object, resolves bindings, evaluates
+//! Takes a template string and an optional JSON state object, resolves bindings, evaluates
 //! conditionals, iterates repeats, and expands custom element shadow DOM — producing
 //! static HTML ready to be served.
+//! Omitted state is treated as an empty object.
 //!
 //! ## Pipeline
 //!
@@ -75,22 +76,49 @@ pub use error::RenderError;
 pub use locator::Locator;
 pub use config::{RenderConfig, AttributeNameStrategy};
 
+fn empty_state() -> JsonValue {
+    JsonValue::Object(std::collections::HashMap::new())
+}
+
 /// Render a FAST HTML template with a JSON state string.
 pub fn render_template(template: &str, state: &str, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let state_value = json::parse(state).map_err(|e| RenderError::JsonParse { message: e.message })?;
     renderer::render(template, &state_value, config)
 }
 
+/// Render a FAST HTML template with no state, using an empty object.
+pub fn render_template_without_state(template: &str, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    let state_value = empty_state();
+    renderer::render(template, &state_value, config)
+}
+
 /// Render a FAST HTML template with a parsed [`JsonValue`].
 pub fn render(template: &str, state: &JsonValue, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     renderer::render(template, state, config)
 }
 
+/// Render a FAST HTML template with no state, using an empty object.
+pub fn render_without_state(template: &str, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    let state_value = empty_state();
+    renderer::render(template, &state_value, config)
+}
+
 /// Render a FAST HTML template with a parsed [`JsonValue`] and a [`Locator`] for custom elements.
 pub fn render_with_locator(template: &str, state: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     renderer::render_with_locator(template, state, locator, config)
 }
 
+/// Render a FAST HTML template with a [`Locator`] for custom elements and no state.
+pub fn render_with_locator_without_state(template: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    let state_value = empty_state();
+    renderer::render_with_locator(template, &state_value, locator, config)
+}
+
+/// Render a FAST HTML template with a [`Locator`] for custom elements and no state.
+pub fn render_template_with_locator_without_state(template: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    render_with_locator_without_state(template, locator, config)
+}
+
 /// Render a FAST HTML template with a JSON state string and a [`Locator`] for custom elements.
 pub fn render_template_with_locator(template: &str, state: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let state_value = json::parse(state).map_err(|e| RenderError::JsonParse { message: e.message })?;
@@ -98,15 +126,26 @@ pub fn render_template_with_locator(template: &str, state: &str, locator: &Locat
 }
 
 /// Render the top-level **entry HTML** with a parsed [`JsonValue`] and a [`Locator`].
-/// Custom elements found at this level receive the full root state rather than
-/// building their child state from HTML attributes.
+/// Custom elements found at this level build child state from the full root state
+/// with HTML attributes overlaid on top.
 pub fn render_entry_with_locator(template: &str, state: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     renderer::render_entry_with_locator(template, state, locator, config)
 }
 
+/// Render the top-level **entry HTML** with a [`Locator`] and no state.
+pub fn render_entry_with_locator_without_state(template: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    let state_value = empty_state();
+    renderer::render_entry_with_locator(template, &state_value, locator, config)
+}
+
+/// Render the top-level **entry HTML** with a [`Locator`] and no state.
+pub fn render_entry_template_with_locator_without_state(template: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
+    render_entry_with_locator_without_state(template, locator, config)
+}
+
 /// Render the top-level **entry HTML** with a JSON state string and a [`Locator`].
-/// Custom elements found at this level receive the full root state rather than
-/// building their child state from HTML attributes.
+/// Custom elements found at this level build child state from the full root state
+/// with HTML attributes overlaid on top.
 pub fn render_entry_template_with_locator(template: &str, state: &str, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let state_value = json::parse(state).map_err(|e| RenderError::JsonParse { message: e.message })?;
     renderer::render_entry_with_locator(template, &state_value, locator, config)
diff --git a/crates/microsoft-fast-build/src/node.rs b/crates/microsoft-fast-build/src/node.rs
index 68b02b62a61..4513612bfc6 100644
--- a/crates/microsoft-fast-build/src/node.rs
+++ b/crates/microsoft-fast-build/src/node.rs
@@ -13,7 +13,8 @@ use crate::attribute::{
 /// Recursively render a template fragment against root state and loop variables.
 /// When `hydration` is `Some`, binding markers and attribute compact markers are emitted.
 /// When `is_entry` is `true`, custom elements found in this fragment are treated as root
-/// elements and receive the full root state; otherwise they receive attr-based child state.
+/// elements for opening-tag attribute handling. Child state always starts from the current
+/// root state, with any state-relevant attributes overlaid on top.
 pub fn render_node(
     template: &str,
     root: &JsonValue,
@@ -26,9 +27,15 @@ pub fn render_node(
     let mut result = String::new();
     let mut pos = 0;
     loop {
-        if let Some(ref mut hy) = hydration {
-            pos = process_hydration_tags(template, pos, root, loop_vars, locator, hy, &mut result);
-        }
+        pos = process_plain_html_tags(
+            template,
+            pos,
+            root,
+            loop_vars,
+            locator,
+            hydration.as_mut().map(|h| &mut **h),
+            &mut result,
+        );
         let dir_chunk = match next_directive(template, pos, locator) {
             None => { result.push_str(&template[pos..]); break; }
             Some(d) => d,
@@ -46,13 +53,13 @@ pub fn render_node(
     Ok(result)
 }
 
-fn process_hydration_tags(
+fn process_plain_html_tags(
     template: &str,
     mut pos: usize,
     root: &JsonValue,
     loop_vars: &[(String, JsonValue)],
     locator: Option<&Locator>,
-    hy: &mut HydrationScope,
+    mut hydration: Option<&mut HydrationScope>,
     result: &mut String,
 ) -> usize {
     loop {
@@ -87,17 +94,28 @@ fn process_hydration_tags(
         // Count {{expr}} and {expr} attribute bindings on this tag.
         let (db, sb) = count_tag_attribute_bindings(tag_str);
         let total = db + sb;
-        if total > 0 {
-            // Allocate binding indices for this tag's bindings, resolve {{expr}}
-            // attribute values, strip client-only attrs, then inject the
-            // hydration marker `data-fe="N"`.
-            hy.binding_idx += total;
-            let resolved = resolve_attribute_bindings_in_tag(tag_str, root, loop_vars);
-            let stripped = strip_client_only_attrs(&resolved);
-            result.push_str(&inject_count_marker(&stripped, total));
-        } else {
-            // No bindings — still strip client-only attrs but no marker needed.
-            result.push_str(&strip_client_only_attrs(tag_str));
+        match hydration.as_mut() {
+            Some(hy) => {
+                if total > 0 {
+                    // Allocate binding indices for this tag's bindings, resolve {{expr}}
+                    // attribute values, strip client-only attrs, then inject the
+                    // hydration marker `data-fe="N"`.
+                    hy.binding_idx += total;
+                    let resolved = resolve_attribute_bindings_in_tag(tag_str, root, loop_vars);
+                    let stripped = strip_client_only_attrs(&resolved);
+                    result.push_str(&inject_count_marker(&stripped, total));
+                } else {
+                    // No bindings — still strip client-only attrs but no marker needed.
+                    result.push_str(&strip_client_only_attrs(tag_str));
+                }
+            }
+            None => {
+                if db > 0 {
+                    result.push_str(&resolve_attribute_bindings_in_tag(tag_str, root, loop_vars));
+                } else {
+                    result.push_str(tag_str);
+                }
+            }
         }
         pos = tag_end;
     }
diff --git a/crates/microsoft-fast-build/src/renderer.rs b/crates/microsoft-fast-build/src/renderer.rs
index adde9729adb..10e38e1bc6a 100644
--- a/crates/microsoft-fast-build/src/renderer.rs
+++ b/crates/microsoft-fast-build/src/renderer.rs
@@ -16,8 +16,9 @@ pub fn render_with_locator(template: &str, root: &JsonValue, locator: &Locator,
     render_node(template, root, &[], Some(locator), None, false, config)
 }
 
-/// Render the top-level **entry HTML** — custom elements found at this level are treated
-/// as root elements and receive the full root state rather than attribute-based child state.
+/// Render the top-level **entry HTML** — custom elements found at this level use
+/// entry opening-tag handling while their child state starts from the full root
+/// state with HTML attributes overlaid on top.
 pub fn render_entry_with_locator(template: &str, root: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index 4a34dbaffa7..d3887146c0f 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -1,47 +1,79 @@
-use wasm_bindgen::prelude::*;
+use crate::config::{AttributeNameStrategy, RenderConfig};
+use crate::{
+    json, render_entry_template_with_locator, render_entry_template_with_locator_without_state,
+    render_template, render_template_with_locator, render_template_with_locator_without_state,
+    render_template_without_state, Locator,
+};
 use std::collections::HashMap;
-use crate::{json, Locator, render_template, render_template_with_locator, render_entry_template_with_locator};
-use crate::config::{RenderConfig, AttributeNameStrategy};
+use wasm_bindgen::prelude::*;
 
-/// Render a FAST HTML template with a JSON state string.
+/// Render a FAST HTML template with an optional JSON state string.
+/// Omitted state is treated as an empty object.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
-pub fn render(entry: &str, state: &str) -> Result<String, JsValue> {
-    render_template(entry, state, None).map_err(|e| JsValue::from_str(&e.to_string()))
+pub fn render(entry: &str, state: Option<String>) -> Result<String, JsValue> {
+    match state {
+        Some(state) => render_template(entry, &state, None),
+        None => render_template_without_state(entry, None),
+    }
+    .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
-/// Render a FAST HTML template with custom element templates and a JSON state string.
+/// Render a FAST HTML template with custom element templates and an optional JSON state string.
+/// Omitted state is treated as an empty object.
+///
+/// This preserves the original non-entry rendering semantics for this export.
+/// Use `render_entry_with_templates` for top-level entry HTML rendering.
+///
 /// `templates_json` is a JSON object mapping element names to their HTML template strings,
 /// e.g. `{"my-button": "<template>...</template>"}`.
 /// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
 /// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
-pub fn render_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
+pub fn render_with_templates(
+    entry: &str,
+    templates_json: &str,
+    state: Option<String>,
+    attribute_name_strategy: Option<String>,
+) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
     let locator = Locator::from_templates(templates);
-    let config = build_config(attribute_name_strategy)?;
-    render_template_with_locator(entry, state, &locator, config.as_ref())
-        .map_err(|e| JsValue::from_str(&e.to_string()))
+    let config = build_config(attribute_name_strategy.as_deref())?;
+    match state {
+        Some(state) => render_template_with_locator(entry, &state, &locator, config.as_ref()),
+        None => render_template_with_locator_without_state(entry, &locator, config.as_ref()),
+    }
+    .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
-/// Render the top-level **entry HTML** with custom element templates and a JSON state string.
-/// Custom elements found at the root level of `entry` receive the full root state rather than
-/// building their child state from HTML attributes. For `{{binding}}` attributes on root custom
+/// Render the top-level **entry HTML** with custom element templates and an optional JSON state string.
+/// Omitted state is treated as an empty object.
+/// Custom elements found at the root level of `entry` build child state from the full root
+/// state with HTML attributes overlaid on top. For `{{binding}}` attributes on root custom
 /// elements, primitive results (`string`, `number`, and `bool`) are preserved in the rendered
-/// output, while non-primitive values (`array`, `object`, `null`) are stripped.
+/// output, while missing and non-primitive values (`array`, `object`, `null`) are stripped.
 ///
-/// `templates_json` is a JSON object mapping element names to their HTML template strings.
+/// `templates_json` is a JSON object mapping element names to their HTML template strings,
+/// e.g. `{"my-button": "<template>...</template>"}`.
 /// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
 /// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
-pub fn render_entry_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
+pub fn render_entry_with_templates(
+    entry: &str,
+    templates_json: &str,
+    state: Option<String>,
+    attribute_name_strategy: Option<String>,
+) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
     let locator = Locator::from_templates(templates);
-    let config = build_config(attribute_name_strategy)?;
-    render_entry_template_with_locator(entry, state, &locator, config.as_ref())
-        .map_err(|e| JsValue::from_str(&e.to_string()))
+    let config = build_config(attribute_name_strategy.as_deref())?;
+    match state {
+        Some(state) => render_entry_template_with_locator(entry, &state, &locator, config.as_ref()),
+        None => render_entry_template_with_locator_without_state(entry, &locator, config.as_ref()),
+    }
+    .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
 /// Parse all `<f-template>` elements from an HTML string.
@@ -70,29 +102,35 @@ fn escape_json_str(s: &str) -> String {
     let mut out = String::with_capacity(s.len());
     for c in s.chars() {
         match c {
-            '"'  => out.push_str("\\\""),
+            '"' => out.push_str("\\\""),
             '\\' => out.push_str("\\\\"),
             '\n' => out.push_str("\\n"),
             '\r' => out.push_str("\\r"),
             '\t' => out.push_str("\\t"),
-            c    => out.push(c),
+            c => out.push(c),
         }
     }
     out
 }
 
 fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>, JsValue> {
-    let parsed = json::parse(templates_json)
-        .map_err(|e| JsValue::from_str(&format!("Failed to parse templates JSON: {}", e.message)))?;
+    let parsed = json::parse(templates_json).map_err(|e| {
+        JsValue::from_str(&format!("Failed to parse templates JSON: {}", e.message))
+    })?;
     match parsed {
         json::JsonValue::Object(obj) => {
             let mut map = HashMap::new();
             for (k, v) in obj {
                 match v {
-                    json::JsonValue::String(s) => { map.insert(k, s); }
-                    _ => return Err(JsValue::from_str(&format!(
-                        "Template value for '{}' must be a string", k
-                    ))),
+                    json::JsonValue::String(s) => {
+                        map.insert(k, s);
+                    }
+                    _ => {
+                        return Err(JsValue::from_str(&format!(
+                            "Template value for '{}' must be a string",
+                            k
+                        )))
+                    }
                 }
             }
             Ok(map)
@@ -101,9 +139,10 @@ fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>,
     }
 }
 
-/// Build an `Option<RenderConfig>` from the strategy string.
-/// Returns `None` for `""` or `"camelCase"` (use defaults), `Some(config)` for `"none"`.
-fn build_config(strategy: &str) -> Result<Option<RenderConfig>, JsValue> {
+/// Build an `Option<RenderConfig>` from the optional strategy string.
+/// Returns `None` for omitted, `""`, or `"camelCase"`; `Some(config)` for `"none"`.
+fn build_config(strategy: Option<&str>) -> Result<Option<RenderConfig>, JsValue> {
+    let strategy = strategy.unwrap_or("");
     match strategy {
         "" | "camelCase" => Ok(None),
         "none" => Ok(Some(
diff --git a/crates/microsoft-fast-build/tests/custom_elements.rs b/crates/microsoft-fast-build/tests/custom_elements.rs
index 1cc09074069..b34157988b0 100644
--- a/crates/microsoft-fast-build/tests/custom_elements.rs
+++ b/crates/microsoft-fast-build/tests/custom_elements.rs
@@ -462,6 +462,19 @@ fn test_root_custom_element_primitive_binding_resolved() {
     assert!(result.contains("Hello world"), "template still renders state: {result}");
 }
 
+#[test]
+fn test_root_custom_element_missing_binding_attr_omitted() {
+    let locator = make_locator(&[("my-el", "<span>{{text}}</span>")]);
+    let result = render_entry_template_with_locator(
+        r#"<my-el text="{{missing}}"></my-el>"#,
+        "{}",
+        &locator,
+        None,
+    ).unwrap();
+    assert!(!result.contains("text="), "missing binding attr omitted: {result}");
+    assert!(result.contains("<!--fe-b$$start$$0$$text-0$$fe-b--><!--fe-b$$end$$0$$text-0$$fe-b-->"));
+}
+
 #[test]
 fn test_root_custom_element_boolean_attr_binding_truthy() {
     // ?attr="{{expr}}" on a root element should render as the bare attribute name when truthy.
@@ -740,4 +753,4 @@ fn test_custom_element_invalid_json_attr_falls_back_to_string() {
     ).unwrap();
     // Invalid JSON falls back to the raw string value
     assert!(result.contains(r#"["a",]"#), "invalid JSON kept as string: {result}");
-}
\ No newline at end of file
+}
diff --git a/crates/microsoft-fast-build/tests/edge_cases.rs b/crates/microsoft-fast-build/tests/edge_cases.rs
index 18f82a17022..3832ee71575 100644
--- a/crates/microsoft-fast-build/tests/edge_cases.rs
+++ b/crates/microsoft-fast-build/tests/edge_cases.rs
@@ -1,6 +1,9 @@
 mod common;
 use common::{ok, make_locator, empty_root};
-use microsoft_fast_build::{render, render_with_locator, render_entry_with_locator, JsonValue};
+use microsoft_fast_build::{
+    render, render_entry_with_locator, render_entry_with_locator_without_state,
+    render_template_without_state, render_with_locator, JsonValue,
+};
 use std::collections::HashMap;
 
 // ── empty and whitespace-only templates ───────────────────────────────────────
@@ -27,6 +30,94 @@ fn test_empty_state_object() {
     assert_eq!(ok("<h1>Hello</h1>", "{}"), "<h1>Hello</h1>");
 }
 
+#[test]
+fn test_render_template_without_state_uses_empty_object() {
+    let result = render_template_without_state("<h1>{{title}}</h1>", None)
+        .expect("render without state");
+    assert_eq!(result, "<h1></h1>");
+}
+
+#[test]
+fn test_missing_dot_path_content_with_empty_state_renders_empty() {
+    let result = ok("<p>{{ foo.bar }}</p>", "{}");
+    assert_eq!(result, "<p></p>");
+}
+
+#[test]
+fn test_missing_dot_path_content_without_state_renders_empty() {
+    let result = render_template_without_state("<p>{{ foo.bar }}</p>", None)
+        .expect("render without state");
+    assert_eq!(result, "<p></p>");
+}
+
+#[test]
+fn test_missing_regular_html_attribute_binding_is_omitted() {
+    let result = ok(r#"<div class="{{missing}}"></div>"#, "{}");
+    assert_eq!(result, "<div></div>");
+}
+
+#[test]
+fn test_missing_regular_html_attribute_preserves_static_value_with_quotes() {
+    let result = ok(r#"<div title='a "quote"' class="{{missing}}"></div>"#, "{}");
+    assert_eq!(result, r#"<div title='a "quote"'></div>"#);
+}
+
+#[test]
+fn test_unquoted_attribute_path_does_not_hide_later_binding() {
+    let result = ok(
+        r#"<img src=/assets/a.png alt="{{alt}}">"#,
+        r#"{"alt": "Logo"}"#,
+    );
+    assert_eq!(result, r#"<img src=/assets/a.png alt="Logo">"#);
+}
+
+#[test]
+fn test_bound_attribute_value_is_html_escaped() {
+    let result = ok(
+        r#"<div title="{{value}}"></div>"#,
+        r#"{"value": "a \"quote\" & <tag>"}"#,
+    );
+    assert_eq!(result, r#"<div title="a &quot;quote&quot; &amp; &lt;tag&gt;"></div>"#);
+}
+
+#[test]
+fn test_unquoted_attribute_path_with_missing_later_binding_is_omitted() {
+    let result = ok(r#"<img src=/assets/a.png alt="{{alt}}">"#, "{}");
+    assert_eq!(result, r#"<img src=/assets/a.png>"#);
+    assert!(
+        !result.contains("{{alt}}"),
+        "binding must not remain unresolved: {result}"
+    );
+}
+
+#[test]
+fn test_missing_dot_path_regular_html_attribute_with_empty_state_is_omitted() {
+    let result = ok(r#"<div class="{{ foo.bar }}"></div>"#, "{}");
+    assert_eq!(result, "<div></div>");
+}
+
+#[test]
+fn test_missing_dot_path_regular_html_attribute_without_state_is_omitted() {
+    let result = render_template_without_state(r#"<div class="{{ foo.bar }}"></div>"#, None)
+        .expect("render without state");
+    assert_eq!(result, "<div></div>");
+}
+
+#[test]
+fn test_missing_regular_html_attribute_omits_content_stays_empty() {
+    let result = ok(r#"<div class="{{missing}}">{{missing}}</div>"#, "{}");
+    assert_eq!(result, "<div></div>");
+}
+
+#[test]
+fn test_render_entry_with_locator_without_state_uses_empty_object() {
+    let locator = make_locator(&[("my-el", "<span>{{label}}</span>")]);
+    let result = render_entry_with_locator_without_state("<my-el></my-el>", &locator, None)
+        .expect("render entry without state");
+    assert!(result.contains("<span>"), "shadow content rendered: {result}");
+    assert!(result.contains("<!--fe-b$$start$$0$$label-0$$fe-b--><!--fe-b$$end$$0$$label-0$$fe-b-->"));
+}
+
 // ── deeply nested property access ─────────────────────────────────────────────
 
 #[test]
@@ -57,12 +148,9 @@ fn test_deeply_nested_in_f_repeat() {
 }
 
 #[test]
-fn test_deeply_nested_missing_intermediate_returns_error() {
-    use microsoft_fast_build::render_template;
-    use microsoft_fast_build::RenderError;
-    let e = render_template("{{a.b.c.d}}", r#"{"a": {"b": {}}}"#, None)
-        .expect_err("expected MissingState");
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {e}");
+fn test_deeply_nested_missing_intermediate_renders_empty() {
+    let result = ok("{{a.b.c.d}}", r#"{"a": {"b": {}}}"#);
+    assert_eq!(result, "");
 }
 
 // ── multiple root custom elements ─────────────────────────────────────────────
diff --git a/crates/microsoft-fast-build/tests/errors.rs b/crates/microsoft-fast-build/tests/errors.rs
index f28f601138a..cbf2011297b 100644
--- a/crates/microsoft-fast-build/tests/errors.rs
+++ b/crates/microsoft-fast-build/tests/errors.rs
@@ -1,5 +1,5 @@
 mod common;
-use common::err;
+use common::{err, ok};
 use microsoft_fast_build::RenderError;
 
 // ── unclosed bindings ─────────────────────────────────────────────────────────
@@ -56,32 +56,22 @@ fn test_error_whitespace_only_binding() {
     assert!(matches!(e, RenderError::EmptyBinding { .. }), "wrong variant: {msg}");
 }
 
-// ── missing state ─────────────────────────────────────────────────────────────
+// ── missing content values ────────────────────────────────────────────────────
 
 #[test]
-fn test_error_missing_state_double_brace() {
-    let e = err("<p>{{missing}}</p>", r#"{}"#);
-    let msg = e.to_string();
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {msg}");
-    assert!(msg.contains("missing"), "should name the binding: {msg}");
-    assert!(msg.contains("<p>{{missing}}"), "should show template context: {msg}");
+fn test_missing_state_double_brace_renders_empty() {
+    assert_eq!(ok("<p>{{missing}}</p>", r#"{}"#), "<p></p>");
 }
 
 #[test]
-fn test_error_missing_state_triple_brace() {
-    let e = err("{{{ghost}}}", r#"{}"#);
-    let msg = e.to_string();
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {msg}");
-    assert!(msg.contains("ghost"), "should name the binding: {msg}");
+fn test_missing_state_triple_brace_renders_empty() {
+    assert_eq!(ok("{{{ghost}}}", r#"{}"#), "");
 }
 
 #[test]
-fn test_error_missing_nested_property() {
+fn test_missing_nested_property_renders_empty() {
     // foo exists but foo.bar does not
-    let e = err("{{foo.bar}}", r#"{"foo": {}}"#);
-    let msg = e.to_string();
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {msg}");
-    assert!(msg.contains("foo.bar"), "should name the full binding path: {msg}");
+    assert_eq!(ok("{{foo.bar}}", r#"{"foo": {}}"#), "");
 }
 
 // ── unclosed directives ───────────────────────────────────────────────────────
@@ -204,6 +194,14 @@ fn test_error_repeat_not_an_array_bool() {
     assert!(matches!(e, RenderError::NotAnArray { .. }), "wrong variant: {msg}");
 }
 
+#[test]
+fn test_error_repeat_not_an_array_null() {
+    let e = err(r#"<f-repeat value="{{item in items}}">{{item}}</f-repeat>"#, r#"{"items": null}"#);
+    let msg = e.to_string();
+    assert!(matches!(e, RenderError::NotAnArray { .. }), "wrong variant: {msg}");
+    assert!(msg.contains("items"), "should name the binding: {msg}");
+}
+
 // ── JSON parse errors ─────────────────────────────────────────────────────────
 
 #[test]
@@ -231,22 +229,19 @@ fn test_error_invalid_json_trailing_comma() {
 // ── error propagation from nested directives ──────────────────────────────────
 
 #[test]
-fn test_error_propagates_from_f_when_inner() {
-    let e = err(
+fn test_missing_content_inside_f_when_renders_empty() {
+    let result = ok(
         r#"<f-when value="{{show}}">{{missing}}</f-when>"#,
         r#"{"show": true}"#,
     );
-    let msg = e.to_string();
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {msg}");
-    assert!(msg.contains("missing"), "should name the missing binding: {msg}");
+    assert_eq!(result, "");
 }
 
 #[test]
-fn test_error_propagates_from_f_repeat_inner() {
-    let e = err(
+fn test_missing_content_inside_f_repeat_renders_empty() {
+    let result = ok(
         r#"<f-repeat value="{{item in items}}">{{missing}}</f-repeat>"#,
         r#"{"items": ["a"]}"#,
     );
-    let msg = e.to_string();
-    assert!(matches!(e, RenderError::MissingState { .. }), "wrong variant: {msg}");
+    assert_eq!(result, "");
 }
diff --git a/crates/microsoft-fast-build/tests/f_repeat.rs b/crates/microsoft-fast-build/tests/f_repeat.rs
index 6a6d26a31fd..9d840168d5c 100644
--- a/crates/microsoft-fast-build/tests/f_repeat.rs
+++ b/crates/microsoft-fast-build/tests/f_repeat.rs
@@ -1,5 +1,6 @@
 mod common;
 use common::ok;
+use microsoft_fast_build::render_template_without_state;
 
 #[test]
 fn test_f_repeat_basic() {
@@ -24,3 +25,30 @@ fn test_f_repeat_root_access() {
         "<span>Items: a</span><span>Items: b</span>",
     );
 }
+
+#[test]
+fn test_f_repeat_missing_list_renders_empty() {
+    assert_eq!(
+        ok(r#"before<f-repeat value="{{item in items}}"><span>{{item}}</span></f-repeat>after"#, r#"{}"#),
+        "beforeafter",
+    );
+}
+
+#[test]
+fn test_f_repeat_missing_dot_path_list_renders_empty() {
+    assert_eq!(
+        ok(r#"<f-repeat value="{{item in items.list}}"><span>{{item}}</span></f-repeat>"#, r#"{}"#),
+        "",
+    );
+}
+
+#[test]
+fn test_f_repeat_without_state_renders_empty() {
+    let result = render_template_without_state(
+        r#"<f-repeat value="{{item in items}}"><span>{{item}}</span></f-repeat>"#,
+        None,
+    )
+    .expect("render without state");
+
+    assert_eq!(result, "");
+}
diff --git a/crates/microsoft-fast-build/tests/hydration.rs b/crates/microsoft-fast-build/tests/hydration.rs
index 07f9b40d1db..4bbb3d8ef0c 100644
--- a/crates/microsoft-fast-build/tests/hydration.rs
+++ b/crates/microsoft-fast-build/tests/hydration.rs
@@ -82,6 +82,28 @@ fn test_hydration_attribute_binding_compact() {
     assert!(!result.contains(r#"data-fe="2""#), "should not have count 2: {result}");
 }
 
+/// Missing `{{expr}}` attribute values are omitted rather than rendered empty.
+#[test]
+fn test_hydration_missing_attribute_binding_omits_attribute() {
+    let locator = make_locator(&[(
+        "test-element",
+        r#"<input type="{{type}}" value="{{missing}}" class="static">"#,
+    )]);
+    let root = hand_root(vec![("type", str_val("text"))]);
+    let result = render_with_locator(
+        r#"<test-element type="text"></test-element>"#,
+        &root,
+        &locator,
+        None,
+    ).unwrap();
+
+    let shadow = extract_shadow(&result);
+    assert!(shadow.contains("data-fe-c-0-2"), "compact marker: {result}");
+    assert!(shadow.contains(r#"type="text""#), "resolved attr: {result}");
+    assert!(shadow.contains(r#"class="static""#), "static attr: {result}");
+    assert!(!shadow.contains("value="), "missing attr omitted: {result}");
+}
+
 /// Single-brace `@click="{handler()}"` event binding — compact marker present, attr stripped.
 #[test]
 fn test_hydration_event_binding_compact() {
@@ -581,6 +603,24 @@ fn test_hydration_nested_element_attr_binding() {
     assert!(result.contains(r#"label="Hi""#), "resolved attr: {result}");
 }
 
+#[test]
+fn test_hydration_nested_element_missing_attr_binding_omits_attribute() {
+    let locator = make_locator(&[
+        ("parent-element", r#"<child-element label="{{missing}}"></child-element>"#),
+        ("child-element", r#"<span>{{label}}</span>"#),
+    ]);
+    let result = render_with_locator(
+        r#"<parent-element></parent-element>"#,
+        &empty(),
+        &locator,
+        None,
+    ).unwrap();
+
+    assert!(result.contains("data-fe-c-0-1"), "attr binding marker remains: {result}");
+    assert!(!result.contains("label="), "missing attr omitted: {result}");
+    assert!(result.contains("<!--fe-b$$start$$0$$label-0$$fe-b--><!--fe-b$$end$$0$$label-0$$fe-b-->"));
+}
+
 // ── Unescaped triple-brace ────────────────────────────────────────────────────
 
 /// `{{{html}}}` unescaped binding also gets hydration markers.
diff --git a/packages/fast-build/DESIGN.md b/packages/fast-build/DESIGN.md
index 193c004120c..b744f26f0ac 100644
--- a/packages/fast-build/DESIGN.md
+++ b/packages/fast-build/DESIGN.md
@@ -10,7 +10,7 @@ This document describes the internal architecture of the `@microsoft/fast-build`
 
 1. Parsing CLI arguments and loading configuration
 2. Locating and parsing template HTML files (glob scanning + `<f-template>` extraction)
-3. Loading the entry HTML and state JSON files
+3. Loading the entry HTML file and optional state JSON file
 4. Calling the WASM renderer
 5. Writing the rendered output
 
@@ -39,10 +39,11 @@ fast build [options]
         │                └─ wasm.parse_f_templates(html)  ← Rust parses <f-template>
         │
         ├─ fs.readFileSync(entry)   ← entry HTML template
-        ├─ fs.readFileSync(state)   ← state JSON
+        ├─ fs.readFileSync(state)   ← state JSON, only when explicitly provided
+        │       └─ omitted state → WASM receives no state and renders with {}
         │
         ▼
-  wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state, strategy)
+  wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state?, strategy)
         ▼
   fs.writeFileSync(output, rendered)
 ```
@@ -72,7 +73,7 @@ The CLI supports an optional JSON configuration file that provides default value
 
 CLI arguments always take precedence over config file values. The merge uses **presence-based** checking (`hasOwnProperty`), not truthiness, so an explicit `--entry=` on the command line will override a config file's `entry` value even if the CLI value is an empty string.
 
-When a value is not provided by either source, built-in defaults apply (`index.html`, `state.json`, `output.html`).
+When a value is not provided by either source, built-in defaults apply (`index.html`, `output.html`). State is optional: if neither CLI nor config provides `state`, the CLI does not look for a state file and calls WASM without a state value, which renders as `{}`. This is a breaking change from earlier CLI behavior that implicitly loaded `state.json` from the current working directory when present.
 
 ### Path resolution
 
@@ -89,7 +90,7 @@ The config file must be a JSON object. Each key must be one of the allowed optio
 | Function | Role |
 |----------|------|
 | `loadConfig(configPath)` | Reads, parses, and validates the config file. Returns `{ config, configDir }`. |
-| `resolveOption(args, config, configDir, key, defaultValue)` | Returns the CLI arg if present, otherwise the config value (with path resolution), otherwise the default. |
+| `resolveOption(args, config, configDir, key, defaultValue)` | Returns the CLI arg if present, otherwise the config value (with path resolution), otherwise the default. The caller separately tracks whether `state` was explicitly provided so an explicit missing state file errors while omitted state is passed through to WASM as `{}`. |
 
 ---
 
@@ -143,12 +144,13 @@ This means exact file paths like `"./components/my-button.html"` are fully suppo
 
 ## WASM integration
 
-Three WASM functions are used:
+Four WASM functions are available; the CLI uses the entry renderer when templates are loaded:
 
 | Function | Used when |
 |----------|-----------|
-| `wasm.render(entry, state)` | No custom element templates |
-| `wasm.render_entry_with_templates(entry, templatesJson, state, strategy)` | At least one template was loaded. `strategy` is `"camelCase"` or `"none"`. |
+| `wasm.render(entry, state?)` | No custom element templates. Omitted state renders as `{}`. |
+| `wasm.render_with_templates(entry, templatesJson, state?, strategy)` | JS consumers that need non-entry template rendering with custom elements. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. |
+| `wasm.render_entry_with_templates(entry, templatesJson, state?, strategy)` | CLI entry HTML rendering when at least one template was loaded. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. |
 | `wasm.parse_f_templates(html)` | Parsing `<f-template>` elements from each matched HTML file |
 
 `templatesJson` is a JSON-stringified object mapping element names to their raw inner template strings (the content extracted from `<template>` inside `<f-template>`). The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM.
@@ -168,7 +170,8 @@ See the [`microsoft-fast-build` DESIGN.md](../../crates/microsoft-fast-build/DES
 | Config file has unknown key | Print error to stderr; exit code 1 |
 | Config file has non-string value | Print error to stderr; exit code 1 |
 | `--entry` file not found | Print error to stderr; exit code 1 |
-| `--state` file not found | Print error to stderr; exit code 1 |
+| Explicit `--state` or config `state` file not found | Print error to stderr; exit code 1 |
+| State omitted | Do not check `state.json`; render with an empty state object (`{}`); breaking change from earlier implicit `state.json` loading |
 | `--templates` not provided | Warning to stderr; rendering continues without custom elements |
 | `--attribute-name-strategy` invalid value | Print error to stderr; exit code 1 |
 | Pattern matches no files | Warning to stderr; pattern is skipped |
diff --git a/packages/fast-build/README.md b/packages/fast-build/README.md
index 32a148a4dd1..878ccb080d8 100644
--- a/packages/fast-build/README.md
+++ b/packages/fast-build/README.md
@@ -25,7 +25,7 @@ import { render } from '@microsoft/fast-build';
 
 ## CLI usage
 
-Once installed, the `fast` binary is available. Use the `build` subcommand to render an HTML template with a JSON state file:
+Once installed, the `fast` binary is available. Use the `build` subcommand to render an HTML template with an optional JSON state file:
 
 ```shell
 fast build [options]
@@ -36,7 +36,7 @@ fast build [options]
 | Option | Default | Description |
 |---|---|---|
 | `--entry="<path>"` | `index.html` | Entry HTML template to render |
-| `--state="<path>"` | `state.json` | JSON file containing the template state |
+| `--state="<path>"` | `{}` when omitted | JSON file containing the template state. If omitted, no state file is loaded and rendering uses an empty state object. If `--state` is provided, the file must exist. |
 | `--output="<path>"` | `output.html` | Where to write the rendered HTML |
 | `--templates="<glob>"` | _(none)_ | Glob pattern(s) for custom element template HTML files. Separate multiple patterns with commas. A warning is printed if not provided or if no files match a pattern. |
 | `--attribute-name-strategy="<strategy>"` | `camelCase` | Strategy for mapping HTML attribute names to state property names on custom elements. `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). See [Attribute name strategy](#attribute-name-strategy). |
@@ -81,6 +81,18 @@ Produces `output.html`:
 </html>
 ```
 
+### Missing or omitted state
+
+State is optional. When `--state` is omitted and no `state` path is provided by config, `fast build` does not look for `state.json`; rendering uses an empty object (`{}`). An explicit `--state` path, or a `state` path from config, must exist or the command exits with an error.
+
+> **Breaking change:** Earlier versions implicitly loaded `state.json` from the current working directory when `--state` was omitted. To use a state file, pass `--state=state.json` or set `"state": "state.json"` in `fast-build.config.json`.
+
+When a binding value is not present in state:
+
+- Content bindings render nothing, including unresolved dot paths: `<p>{{foo.bar}}</p>` becomes `<p></p>`.
+- Attribute bindings omit the entire attribute, including unresolved dot paths: `<div class="{{foo.bar}}"></div>` becomes `<div></div>`.
+- `<f-repeat>` treats a missing list binding, including unresolved dot paths, as an empty array and renders zero iterations. If the binding is present but is not an array, rendering still errors.
+
 ### Custom element templates
 
 Pass a glob pattern (or comma-separated list of patterns) to `--templates` to expand custom elements into [Declarative Shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom):
@@ -153,7 +165,7 @@ fast build --config=configs/my-build.json
 
 **Path resolution:** File paths in the config file (`entry`, `state`, `output`, `templates`) are resolved relative to the config file's directory, not the current working directory. This ensures the config works correctly regardless of where the CLI is invoked.
 
-All keys are optional. Only the following keys are allowed: `entry`, `state`, `output`, `templates`, `attribute-name-strategy`. Unknown keys or non-string values produce an error.
+All keys are optional. Only the following keys are allowed: `entry`, `state`, `output`, `templates`, `attribute-name-strategy`. Unknown keys or non-string values produce an error. If `state` is omitted, rendering uses `{}`; if `state` is present, the referenced file must exist.
 
 ## Template syntax
 
diff --git a/packages/fast-build/bin/fast.js b/packages/fast-build/bin/fast.js
index c5a1661e828..ec66d30aaea 100755
--- a/packages/fast-build/bin/fast.js
+++ b/packages/fast-build/bin/fast.js
@@ -278,7 +278,10 @@ async function runBuild(args) {
     const templatesArg = resolveOption(args, config, configDir, "templates");
     const output = resolveOption(args, config, configDir, "output", "output.html");
     const entry = resolveOption(args, config, configDir, "entry", "index.html");
-    const stateFile = resolveOption(args, config, configDir, "state", "state.json");
+    const stateFile = resolveOption(args, config, configDir, "state");
+    const stateWasProvided =
+        Object.prototype.hasOwnProperty.call(args, "state") ||
+        Object.prototype.hasOwnProperty.call(config, "state");
     const attributeNameStrategy = resolveOption(args, config, configDir, "attribute-name-strategy");
 
     if (attributeNameStrategy && attributeNameStrategy !== "none" && attributeNameStrategy !== "camelCase") {
@@ -324,18 +327,28 @@ async function runBuild(args) {
     }
     const entryContent = fs.readFileSync(entry, "utf8");
 
-    // Read state file
-    if (!fs.existsSync(stateFile)) {
-        process.stderr.write(`Error: State file "${stateFile}" not found.\n`);
-        process.exit(1);
+    // Read state only when explicitly provided; omitted state is handled by WASM as `{}`.
+    let stateContent;
+    if (stateWasProvided) {
+        if (stateFile === undefined || stateFile === "" || !fs.existsSync(stateFile)) {
+            const stateFileLabel =
+                stateFile === undefined || stateFile === ""
+                    ? "(no path provided)"
+                    : `"${stateFile}"`;
+            process.stderr.write(`Error: State file ${stateFileLabel} not found.\n`);
+            process.exit(1);
+        }
+        stateContent = fs.readFileSync(stateFile, "utf8");
     }
-    const stateContent = fs.readFileSync(stateFile, "utf8");
 
     // Render
     let rendered;
     if (Object.keys(templatesMap).length > 0) {
         rendered = wasm.render_entry_with_templates(
-            entryContent, JSON.stringify(templatesMap), stateContent, attributeNameStrategy || ""
+            entryContent,
+            JSON.stringify(templatesMap),
+            stateContent,
+            attributeNameStrategy || "",
         );
     } else {
         rendered = wasm.render(entryContent, stateContent);
@@ -356,7 +369,8 @@ async function main() {
             '                         Separate multiple patterns with commas.\n' +
             '  --output="output.html" Output file path (default: output.html)\n' +
             '  --entry="index.html"   Entry HTML template file (default: index.html)\n' +
-            '  --state="state.json"   State JSON file (default: state.json)\n' +
+            '  --state="state.json"   State JSON file. If omitted, rendering uses\n' +
+            '                         an empty state object.\n' +
             '  --attribute-name-strategy="camelCase"\n' +
             '                         Strategy for mapping attribute names to property names.\n' +
             '                         "camelCase" (default) or "none".\n' +
diff --git a/packages/fast-build/test/config.test.js b/packages/fast-build/test/config.test.js
index 024e527f4a3..96903d16628 100644
--- a/packages/fast-build/test/config.test.js
+++ b/packages/fast-build/test/config.test.js
@@ -8,6 +8,7 @@ const path = require("node:path");
 const os = require("node:os");
 
 const FAST_BIN = path.resolve(__dirname, "../bin/fast.js");
+const WASM = require("../wasm/microsoft_fast_build.js");
 
 function tmpDir() {
     return fs.mkdtempSync(path.join(os.tmpdir(), "fast-build-test-"));
@@ -206,3 +207,241 @@ describe("backward compatibility", () => {
         assert.ok(output.includes("Hello"));
     });
 });
+
+describe("no state behavior", () => {
+    /** @type {string} */
+    let dir;
+
+    beforeEach(() => {
+        dir = tmpDir();
+    });
+
+    afterEach(() => {
+        fs.rmSync(dir, { recursive: true, force: true });
+    });
+
+    it("uses an empty object when state is omitted", () => {
+        fs.writeFileSync(
+            path.join(dir, "entry.html"),
+            '<h1>{{title}}</h1><div class="{{missing}}"></div>',
+        );
+        run(["--entry=entry.html", "--output=out.html"], dir);
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.equal(output, "<h1></h1><div></div>");
+    });
+
+    it("treats missing f-repeat lists as empty when state is omitted", () => {
+        fs.writeFileSync(
+            path.join(dir, "entry.html"),
+            '<ul><f-repeat value="{{item in items}}"><li>{{item}}</li></f-repeat></ul>',
+        );
+        run(["--entry=entry.html", "--output=out.html"], dir);
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.equal(output, "<ul></ul>");
+    });
+
+    it("ignores state.json when state is omitted", () => {
+        fs.writeFileSync(
+            path.join(dir, "entry.html"),
+            '<h1>{{title}}</h1><div class="{{missing}}"></div>',
+        );
+        fs.writeFileSync(
+            path.join(dir, "state.json"),
+            '{"title":"This should not render","missing":"also-ignored"}',
+        );
+        run(["--entry=entry.html", "--output=out.html"], dir);
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.equal(output, "<h1></h1><div></div>");
+    });
+
+    it("loads an explicit state file", () => {
+        fs.writeFileSync(path.join(dir, "entry.html"), "<h1>{{title}}</h1>");
+        fs.writeFileSync(path.join(dir, "state.json"), '{"title":"Hello"}');
+        run(["--entry=entry.html", "--state=state.json", "--output=out.html"], dir);
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.equal(output, "<h1>Hello</h1>");
+    });
+
+    it("errors when an explicit CLI state file is missing", () => {
+        fs.writeFileSync(path.join(dir, "entry.html"), "<h1>{{title}}</h1>");
+        const result = runWithStderr(
+            ["--entry=entry.html", "--state=missing.json", "--output=out.html"],
+            dir,
+        );
+        assert.equal(result.exitCode, 1);
+        assert.ok(result.stderr.includes('State file "missing.json" not found'));
+    });
+
+    it("errors when an explicit CLI state path is empty", () => {
+        fs.writeFileSync(path.join(dir, "entry.html"), "<h1>{{title}}</h1>");
+        const result = runWithStderr(
+            ["--entry=entry.html", "--state=", "--output=out.html"],
+            dir,
+        );
+        assert.equal(result.exitCode, 1);
+        assert.ok(result.stderr.includes("State file (no path provided) not found"));
+    });
+
+    it("errors when an explicit config state file is missing", () => {
+        fs.writeFileSync(path.join(dir, "entry.html"), "<h1>{{title}}</h1>");
+        fs.writeFileSync(path.join(dir, "state.json"), '{"title":"Default ignored"}');
+        fs.writeFileSync(
+            path.join(dir, "fast-build.config.json"),
+            JSON.stringify({
+                entry: "entry.html",
+                state: "missing.json",
+                output: "out.html",
+            }),
+        );
+        const result = runWithStderr([], dir);
+        assert.equal(result.exitCode, 1);
+        assert.ok(result.stderr.includes("State file"));
+        assert.ok(result.stderr.includes("missing.json"));
+        assert.ok(result.stderr.includes("not found"));
+    });
+
+    it("omits missing attributes and empty-renders missing content", () => {
+        fs.writeFileSync(path.join(dir, "entry.html"), "<test-element></test-element>");
+        fs.writeFileSync(
+            path.join(dir, "templates.html"),
+            [
+                '<f-template name="test-element"><template>',
+                '<input class="{{ foo.bar }}" aria-label="{{foo.bar}}">',
+                "<p>{{ foo.bar }}</p>",
+                "</template></f-template>",
+            ].join(""),
+        );
+
+        run(
+            ["--entry=entry.html", "--templates=templates.html", "--output=out.html"],
+            dir,
+        );
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.ok(!output.includes("class="));
+        assert.ok(!output.includes("aria-label="));
+        assert.ok(output.includes("<p>"));
+    });
+
+    it("uses entry-template rendering when custom element templates are loaded", () => {
+        fs.writeFileSync(
+            path.join(dir, "entry.html"),
+            '<test-element list="{{items}}"></test-element>',
+        );
+        fs.writeFileSync(path.join(dir, "state.json"), '{"items":["one","two"]}');
+        fs.writeFileSync(
+            path.join(dir, "templates.html"),
+            [
+                '<f-template name="test-element"><template>',
+                '<f-repeat value="{{item in list}}"><span>{{item}}</span></f-repeat>',
+                "</template></f-template>",
+            ].join(""),
+        );
+
+        run(
+            [
+                "--entry=entry.html",
+                "--state=state.json",
+                "--templates=templates.html",
+                "--output=out.html",
+            ],
+            dir,
+        );
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        assert.ok(!output.includes("list="), output);
+        assert.ok(output.includes("one"), output);
+        assert.ok(output.includes("two"), output);
+    });
+});
+
+describe("WASM optional state", () => {
+    it("render accepts omitted state", () => {
+        assert.equal(WASM.render("<p>{{missing}}</p>"), "<p></p>");
+        assert.equal(WASM.render('<div class="{{missing}}"></div>'), "<div></div>");
+    });
+
+    it("render accepts missing dot paths with omitted or empty state", () => {
+        assert.equal(WASM.render("<p>{{ foo.bar }}</p>"), "<p></p>");
+        assert.equal(WASM.render("<p>{{ foo.bar }}</p>", "{}"), "<p></p>");
+        assert.equal(WASM.render('<div class="{{ foo.bar }}"></div>'), "<div></div>");
+        assert.equal(
+            WASM.render('<div class="{{ foo.bar }}"></div>', "{}"),
+            "<div></div>",
+        );
+    });
+
+    it("render treats missing f-repeat lists as empty arrays", () => {
+        assert.equal(
+            WASM.render(
+                '<f-repeat value="{{item in items}}"><span>{{item}}</span></f-repeat>',
+            ),
+            "",
+        );
+        assert.equal(
+            WASM.render(
+                '<f-repeat value="{{item in items.list}}"><span>{{item}}</span></f-repeat>',
+                "{}",
+            ),
+            "",
+        );
+    });
+
+    it("render_with_templates accepts omitted state", () => {
+        const result = WASM.render_with_templates(
+            "<test-element></test-element>",
+            JSON.stringify({
+                "test-element": '<input class="{{foo.bar}}"><span>{{ foo.bar }}</span>',
+            }),
+        );
+        assert.ok(!result.includes("class="));
+        assert.ok(result.includes("<span>"));
+    });
+
+    it("render_entry_with_templates renders entry custom elements from root state", () => {
+        const result = WASM.render_entry_with_templates(
+            "<test-element></test-element>",
+            JSON.stringify({
+                "test-element": "<span>{{ foo.bar }}</span>",
+            }),
+            JSON.stringify({ foo: { bar: "Hello" } }),
+        );
+        assert.ok(result.includes("Hello"));
+    });
+
+    it("exports both template renderers with distinct root tag handling", () => {
+        const templates = JSON.stringify({
+            "test-element": "<span>{{ list }}</span>",
+        });
+        const state = JSON.stringify({ list: ["one", "two"] });
+        const entry = '<test-element list="{{list}}"></test-element>';
+
+        const templateResult = WASM.render_with_templates(entry, templates, state);
+        const entryResult = WASM.render_entry_with_templates(entry, templates, state);
+
+        assert.ok(templateResult.includes('list="[Array]"'), templateResult);
+        assert.ok(!entryResult.includes("list="), entryResult);
+    });
+
+    it("render_with_templates accepts a strategy when state is omitted", () => {
+        const result = WASM.render_with_templates(
+            '<test-element foo-bar="Hello"></test-element>',
+            JSON.stringify({
+                "test-element": "<span>{{foo-bar}}</span>",
+            }),
+            undefined,
+            "none",
+        );
+        assert.ok(result.includes("Hello"));
+    });
+
+    it("render_entry_with_templates accepts a strategy when state is omitted", () => {
+        const result = WASM.render_entry_with_templates(
+            '<test-element foo-bar="Hello"></test-element>',
+            JSON.stringify({
+                "test-element": "<span>{{foo-bar}}</span>",
+            }),
+            undefined,
+            "none",
+        );
+        assert.ok(result.includes("Hello"));
+    });
+});

From 297701facbec990eb841f95ead341689ec1c0eec Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 28 Apr 2026 22:19:44 -0700
Subject: [PATCH 05/14] docs: update the documentation for agents and move
 relevant code docs into a per-package docs folder (#7503)

This change updates agent skills for Rust and Documentation and moves the architectural docs for `@microsoft/fast-element` into a `docs/` folder.

- [ ] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [ ] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

(cherry picked from commit aa76170636629744c0a4e8c2203e20bd4c64d3eb)
---
 .github/copilot-instructions.md               |  2 ++
 .github/skills/documentation/SKILL.md         | 18 ++++++++++++++++
 .github/skills/rust/SKILL.md                  | 12 +++++++++++
 ...-158aeac2-32cf-4dfb-9166-0cf6ab1fb196.json |  7 +++++++
 packages/fast-element/ARCHITECTURE_INTRO.md   | 10 ---------
 packages/fast-element/DESIGN.md               | 21 +++++++++----------
 .../architecture/fastelement.md}              |  2 +-
 .../html-tagged-template-literal.md}          |  0
 .../fast-element/docs/architecture/intro.md   | 10 +++++++++
 .../architecture/overview.md}                 |  0
 .../architecture/updates.md}                  |  0
 .../template-bindings.md}                     |  0
 12 files changed, 60 insertions(+), 22 deletions(-)
 create mode 100644 .github/skills/documentation/SKILL.md
 create mode 100644 .github/skills/rust/SKILL.md
 create mode 100644 change/@microsoft-fast-element-158aeac2-32cf-4dfb-9166-0cf6ab1fb196.json
 delete mode 100644 packages/fast-element/ARCHITECTURE_INTRO.md
 rename packages/fast-element/{ARCHITECTURE_FASTELEMENT.md => docs/architecture/fastelement.md} (96%)
 rename packages/fast-element/{ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md => docs/architecture/html-tagged-template-literal.md} (100%)
 create mode 100644 packages/fast-element/docs/architecture/intro.md
 rename packages/fast-element/{ARCHITECTURE_OVERVIEW.md => docs/architecture/overview.md} (100%)
 rename packages/fast-element/{ARCHITECTURE_UPDATES.md => docs/architecture/updates.md} (100%)
 rename packages/fast-element/{src/templating/TEMPLATE-BINDINGS.md => docs/template-bindings.md} (100%)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 86531d45f58..7529d8eb3b1 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -41,11 +41,13 @@ Each package includes a DESIGN.md file, read that to gain a general understandin
 These contain domain-specific guidance. Read when performing related tasks:
 
 - [TypeScript](./skills/typescript/SKILL.md) — compiler constraints, import/export conventions, decorator usage, testing patterns.
+- [Rust](./skills/rust/SKILL.md) — general guidance on performing updates between the crate and package.
 - [Shipping](./skills/shipping/SKILL.md) — pull request format, change file generation, documentation updates.
 - [Pull Request](./skills/fast-pull-request/SKILL.md) — generate a pull request description from the branch diff.
 - [Bug Report](./skills/fast-bug-report/SKILL.md) — generate a bug report issue from conversation context.
 - [Feature Request](./skills/fast-feature-request/SKILL.md) — generate a feature request issue from conversation context.
 - [Testing](./skills/testing/SKILL.md) — running tests locally and in CI, writing Playwright fixture tests.
+- [Documentation](./skills/documentation/SKILL.md) — adding documentation in code, markdown files in each package/crate, and the website.
 
 ## Commands
 
diff --git a/.github/skills/documentation/SKILL.md b/.github/skills/documentation/SKILL.md
new file mode 100644
index 00000000000..40e5add3b38
--- /dev/null
+++ b/.github/skills/documentation/SKILL.md
@@ -0,0 +1,18 @@
+---
+name: documentation
+description: Add documentation for contributors and developers.
+---
+
+Documentation exists in 3 forms, code comments, design/architectural documentation that is made up of markdown files describing code flow and core concepts (such as DESIGN.md), and the documentation website.
+
+Design/architectural documentation such as DESIGN.md should always be kept up-to-date.
+
+The website captures the documentation primarily for the `@microsoft/fast-element` package. Other packages are treated as tangential, so testing packages or other utilities should have their own sections.
+
+The website has been written in 11ty and primarily consists of markdown files. When making changes, ensure that the website has been scanned on whichever latest major version is available. These are organized by folder, so if 1.x/2.x/3.x folders are available, you will update the documentation in the 3.x folder.
+
+If you are making a breaking change, ensure the migration document has been updated.
+
+All markdown documentation aside from the package/crate level DESIGN.md files are in that package/crates docs folder.
+
+Any documentation created for the website should be written with the developer implementing the package in mind, it is not intended for other audiences.
diff --git a/.github/skills/rust/SKILL.md b/.github/skills/rust/SKILL.md
new file mode 100644
index 00000000000..9ba2133d7c3
--- /dev/null
+++ b/.github/skills/rust/SKILL.md
@@ -0,0 +1,12 @@
+---
+description: Use this guide when working on Rust changes in the FAST monorepo.
+name: rust
+---
+
+# Working with the Rust crate and the Rust NodeJS CLI
+
+The primary location for the Rust logic should exist within a crate. If the logic is made accessible in the NodeJS environment via wrapping the crate and using a wasm bindgen, as much as possible any logic that exists in Rust should not be duplicated in JavaScript/TypeScript.
+
+## Breaking changes
+
+Understand [semver](https://semver.org/) and check the crate and package version. If the version is currently in a prerelease state, update the APIs with breaking changes as necessary and ensure that any generated pull request descriptions capture this.
diff --git a/change/@microsoft-fast-element-158aeac2-32cf-4dfb-9166-0cf6ab1fb196.json b/change/@microsoft-fast-element-158aeac2-32cf-4dfb-9166-0cf6ab1fb196.json
new file mode 100644
index 00000000000..c6bf8d1aaec
--- /dev/null
+++ b/change/@microsoft-fast-element-158aeac2-32cf-4dfb-9166-0cf6ab1fb196.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: update the documentation for agents and move relevant code docs into a per-package docs folder",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-element/ARCHITECTURE_INTRO.md b/packages/fast-element/ARCHITECTURE_INTRO.md
deleted file mode 100644
index f90a1f9d989..00000000000
--- a/packages/fast-element/ARCHITECTURE_INTRO.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Introduction
-
-This document (and the linked documents) explains how the exports and side effects of `@microsoft/fast-element` are used to create custom elements.
-
-## Glossary
-
-- [Overview](./ARCHITECTURE_OVERVIEW.md): How the `@microsoft/fast-element` should be used by a developer and what code is executed during the first render.
-- [`FASTElement`](./ARCHITECTURE_FASTELEMENT.md): How the `FASTElement` is architected.
-- [`html` tagged template literal](./ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md): How the `html` tagged template literal takes and converts the contents into a `ViewTemplate`.
-- [`Updates` queue](./ARCHITECTURE_UPDATES.md): How updates to attributes and observables are processed.
\ No newline at end of file
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index 1fdc075520b..56a45c520e5 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -196,7 +196,7 @@ When the tag function is called it invokes `ViewTemplate.create(strings, values)
 
 No DOM nodes are created at this point; compilation is deferred.
 
-See [ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md](./ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md) for more detail on directives and the `Markup`/`Parser` helpers.
+See [docs/architecture/html-tagged-template-literal.md](./docs/architecture/html-tagged-template-literal.md) for more detail on directives and the `Markup`/`Parser` helpers.
 
 ---
 
@@ -241,7 +241,7 @@ See [ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md](./ARCHITECTURE_HTML_TAGGED_TE
 
 `ViewBehaviorFactory` (created at template-authoring time) is the blueprint; `ViewBehavior` (created per `HTMLView` instance) is the live runtime object.
 
-See [src/templating/TEMPLATE-BINDINGS.md](./src/templating/TEMPLATE-BINDINGS.md) for the full binding pipeline including `DOMAspect` routing and two-way binding.
+See [docs/template-bindings.md](./docs/template-bindings.md) for the full binding pipeline including `DOMAspect` routing and two-way binding.
 
 ---
 
@@ -262,7 +262,7 @@ In async mode, the first `enqueue` call schedules a `requestAnimationFrame` call
 
 Observable setters and `attributeChangedCallback` enqueue their DOM mutations through `Updates`, ensuring that multiple synchronous property changes result in only one DOM update per frame.
 
-See [ARCHITECTURE_UPDATES.md](./ARCHITECTURE_UPDATES.md) for more detail.
+See [docs/architecture/updates.md](./docs/architecture/updates.md) for more detail.
 
 ---
 
@@ -557,8 +557,7 @@ src/
 │   ├── ref.ts             # ref directive
 │   ├── render.ts          # render directive
 │   ├── children.ts        # children directive
-│   ├── slotted.ts         # slotted directive
-│   └── TEMPLATE-BINDINGS.md
+│   └── slotted.ts         # slotted directive
 ├── styles/
 │   ├── css.ts             # css tag
 │   ├── element-styles.ts  # ElementStyles
@@ -599,13 +598,13 @@ src/
 
 | Document | What it covers |
 |---|---|
-| [ARCHITECTURE_INTRO.md](./ARCHITECTURE_INTRO.md) | Glossary / index for all architecture docs |
-| [ARCHITECTURE_OVERVIEW.md](./ARCHITECTURE_OVERVIEW.md) | General FAST usage, compose/define flow, module load sequence |
-| [ARCHITECTURE_FASTELEMENT.md](./ARCHITECTURE_FASTELEMENT.md) | FASTElement & ElementController lifecycle in detail |
-| [ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md](./ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md) | `html` tag, directives, binding pre-processing |
-| [ARCHITECTURE_UPDATES.md](./ARCHITECTURE_UPDATES.md) | Updates queue, attribute and observable change batching |
+| [docs/architecture/intro.md](./docs/architecture/intro.md) | Glossary / index for all architecture docs |
+| [docs/architecture/overview.md](./docs/architecture/overview.md) | General FAST usage, compose/define flow, module load sequence |
+| [docs/architecture/fastelement.md](./docs/architecture/fastelement.md) | FASTElement & ElementController lifecycle in detail |
+| [docs/architecture/html-tagged-template-literal.md](./docs/architecture/html-tagged-template-literal.md) | `html` tag, directives, binding pre-processing |
+| [docs/architecture/updates.md](./docs/architecture/updates.md) | Updates queue, attribute and observable change batching |
 | [DECLARATIVE_DESIGN.md](./DECLARATIVE_DESIGN.md) | Declarative HTML runtime, parser, schema, maps, and fixture architecture |
-| [src/templating/TEMPLATE-BINDINGS.md](./src/templating/TEMPLATE-BINDINGS.md) | Full template binding pipeline: authoring → compilation → binding → DOM updates |
+| [docs/template-bindings.md](./docs/template-bindings.md) | Full template binding pipeline: authoring → compilation → binding → DOM updates |
 | [docs/fast-element-2-changes.md](./docs/fast-element-2-changes.md) | Breaking changes from v1 to v2 |
 
 ---
diff --git a/packages/fast-element/ARCHITECTURE_FASTELEMENT.md b/packages/fast-element/docs/architecture/fastelement.md
similarity index 96%
rename from packages/fast-element/ARCHITECTURE_FASTELEMENT.md
rename to packages/fast-element/docs/architecture/fastelement.md
index d6e451a1205..9389e2bab7a 100644
--- a/packages/fast-element/ARCHITECTURE_FASTELEMENT.md
+++ b/packages/fast-element/docs/architecture/fastelement.md
@@ -1,6 +1,6 @@
 # FASTElement
 
-The `FASTElement` is our extension of the `HTMLElement`. As such it leverages the lifecycles but also requires additional setup before before the class `constructor` or the `connectedCallback` method is executed which are explained in the [overview](./ARCHITECTURE_OVERVIEW.md). This document explains specifically what `FASTElement` leverages inside the `HTMLElement`s lifecycle hooks.
+The `FASTElement` is our extension of the `HTMLElement`. As such it leverages the lifecycles but also requires additional setup before before the class `constructor` or the `connectedCallback` method is executed which are explained in the [overview](./overview.md). This document explains specifically what `FASTElement` leverages inside the `HTMLElement`s lifecycle hooks.
 
 For an explanation into `HTMLElement` lifecycle hooks refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks).
 
diff --git a/packages/fast-element/ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md b/packages/fast-element/docs/architecture/html-tagged-template-literal.md
similarity index 100%
rename from packages/fast-element/ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md
rename to packages/fast-element/docs/architecture/html-tagged-template-literal.md
diff --git a/packages/fast-element/docs/architecture/intro.md b/packages/fast-element/docs/architecture/intro.md
new file mode 100644
index 00000000000..14767bb9303
--- /dev/null
+++ b/packages/fast-element/docs/architecture/intro.md
@@ -0,0 +1,10 @@
+# Introduction
+
+This document (and the linked documents) explains how the exports and side effects of `@microsoft/fast-element` are used to create custom elements.
+
+## Glossary
+
+- [Overview](./overview.md): How the `@microsoft/fast-element` should be used by a developer and what code is executed during the first render.
+- [`FASTElement`](./fastelement.md): How the `FASTElement` is architected.
+- [`html` tagged template literal](./html-tagged-template-literal.md): How the `html` tagged template literal takes and converts the contents into a `ViewTemplate`.
+- [`Updates` queue](./updates.md): How updates to attributes and observables are processed.
\ No newline at end of file
diff --git a/packages/fast-element/ARCHITECTURE_OVERVIEW.md b/packages/fast-element/docs/architecture/overview.md
similarity index 100%
rename from packages/fast-element/ARCHITECTURE_OVERVIEW.md
rename to packages/fast-element/docs/architecture/overview.md
diff --git a/packages/fast-element/ARCHITECTURE_UPDATES.md b/packages/fast-element/docs/architecture/updates.md
similarity index 100%
rename from packages/fast-element/ARCHITECTURE_UPDATES.md
rename to packages/fast-element/docs/architecture/updates.md
diff --git a/packages/fast-element/src/templating/TEMPLATE-BINDINGS.md b/packages/fast-element/docs/template-bindings.md
similarity index 100%
rename from packages/fast-element/src/templating/TEMPLATE-BINDINGS.md
rename to packages/fast-element/docs/template-bindings.md

From 5855da6fb6e6583c0655e533220effeb9d6a2d87 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:52:15 -0700
Subject: [PATCH 06/14] feat: propagate shadowroot attributes (#7504)

- Propagates `shadowroot*` attributes from `f-template` onto rendered declarative shadow DOM `<template>` elements.
- Preserves the existing default `shadowrootmode="open"` and `shadowroot="open"` behavior when no mode is provided.
- Updates FAST build configuration/docs and adds Rust/Node coverage for explicit, boolean, escaped, and extra shadowroot attributes.

Please focus review on the shadowroot attribute normalization/escaping path shared between the Rust renderer and the JS CLI configuration bridge.

Passed:

- `git diff --check`
- `cargo test --manifest-path crates/microsoft-fast-build/Cargo.toml`
- `npm run build -w @microsoft/fast-build`
- `npm run test:node -w @microsoft/fast-build`
- `npm run build`
- `npm run biome:check`
- `npm run checkchange`

- [ ] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

(cherry picked from commit 4eabc23aa874db773f2564802ac4dd9e5aec4563)
---
 ...-182ff259-711c-45c5-8be6-8925f2d78e79.json |   7 +
 ...-3b4bc9ff-fe92-4caa-a471-0f4895fe24b8.json |   7 +
 crates/microsoft-fast-build/DESIGN.md         |  23 +-
 crates/microsoft-fast-build/README.md         |   4 +
 crates/microsoft-fast-build/src/directive.rs  |  77 ++++++-
 crates/microsoft-fast-build/src/locator.rs    | 205 +++++++++++++-----
 crates/microsoft-fast-build/src/wasm.rs       | 136 ++++++++++--
 .../tests/custom_elements.rs                  | 162 ++++++++++++++
 .../fixtures/shadowroot-boolean-mode.html     |   5 +
 .../shadowroot-boolean-shadowroot.html        |   5 +
 .../shadowroot-closed-boolean-shadowroot.html |   5 +
 .../shadowroot-closed-empty-shadowroot.html   |   5 +
 .../tests/fixtures/shadowroot-closed.html     |   5 +
 ...adowroot-empty-mode-closed-shadowroot.html |   5 +
 .../tests/fixtures/shadowroot-empty-mode.html |   5 +
 .../fixtures/shadowroot-empty-shadowroot.html |   5 +
 .../tests/fixtures/shadowroot-escaped.html    |   5 +
 .../tests/fixtures/shadowroot-explicit.html   |   5 +
 .../tests/fixtures/shadowroot-extra.html      |   5 +
 .../fixtures/shadowroot-legacy-closed.html    |   5 +
 packages/fast-build/DESIGN.md                 |   3 +-
 packages/fast-build/README.md                 |   2 +
 packages/fast-build/bin/fast.js               |  24 +-
 packages/fast-build/test/config.test.js       |  45 ++++
 24 files changed, 669 insertions(+), 86 deletions(-)
 create mode 100644 change/@microsoft-fast-build-182ff259-711c-45c5-8be6-8925f2d78e79.json
 create mode 100644 change/@microsoft-fast-element-3b4bc9ff-fe92-4caa-a471-0f4895fe24b8.json
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-mode.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-shadowroot.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-boolean-shadowroot.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-empty-shadowroot.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-closed.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode-closed-shadowroot.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-shadowroot.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-escaped.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-explicit.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-extra.html
 create mode 100644 crates/microsoft-fast-build/tests/fixtures/shadowroot-legacy-closed.html

diff --git a/change/@microsoft-fast-build-182ff259-711c-45c5-8be6-8925f2d78e79.json b/change/@microsoft-fast-build-182ff259-711c-45c5-8be6-8925f2d78e79.json
new file mode 100644
index 00000000000..c3fb3846f4c
--- /dev/null
+++ b/change/@microsoft-fast-build-182ff259-711c-45c5-8be6-8925f2d78e79.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: propagate shadowroot attributes",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-3b4bc9ff-fe92-4caa-a471-0f4895fe24b8.json b/change/@microsoft-fast-element-3b4bc9ff-fe92-4caa-a471-0f4895fe24b8.json
new file mode 100644
index 00000000000..c4b7b2e2e12
--- /dev/null
+++ b/change/@microsoft-fast-element-3b4bc9ff-fe92-4caa-a471-0f4895fe24b8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: propagate shadowroot attributes from f-template to declarative shadow DOM template",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/crates/microsoft-fast-build/DESIGN.md b/crates/microsoft-fast-build/DESIGN.md
index 088c9a37902..cc18d314d15 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -255,6 +255,8 @@ A custom element is any opening tag whose name contains a hyphen, excluding `f-w
      [light DOM children]
    </my-button>
    ```
+   The `<template>` receives any `shadowroot*` attributes declared on the source `<f-template>`. The renderer normalizes `shadowrootmode` and legacy `shadowroot` for compatibility: when neither has a non-empty value, it emits `shadowrootmode="open" shadowroot="open"`; when exactly one has a non-empty value, that value is mirrored to the other; when both have explicit non-empty values, both are preserved as authored, even if they conflict.
+
    When a nested element has attribute bindings (`{{expr}}` or `{expr}` values) and is being rendered inside another element's shadow (i.e., `parent_hydration` is `Some`), those bindings are counted, `data-fe="N"` is added to the element's opening tag, and the binding indices are allocated from the parent scope.
 
 Note: `is_entry` controls only opening-tag attribute handling. Child state is always built using the current root state as a base with per-element attributes overlaid on top, regardless of the `is_entry` flag.
@@ -438,16 +440,17 @@ For each glob pattern:
 6. `<f-template>` elements missing a `name` attribute emit a warning to stderr and are ignored.
 7. If two `<f-template>` elements across different files share the same name → `RenderError::DuplicateTemplate`.
 
-### `<f-template>` parsing (`parse_f_templates`, `extract_attr_value`, `extract_template_content`)
+### `<f-template>` parsing (`parse_f_templates`, `parse_element_attributes`, `extract_template_content`)
 
 `parse_f_templates(html)` scans for `<f-template` occurrences using `str::find` in a loop. For each match:
 - Verifies the character after `<f-template` is not alphanumeric or `-` to avoid matching `<f-templateX>`.
 - Extracts the attribute string between `<f-template` and `>`.
-- Calls `extract_attr_value(attrs, "name")` to get the name (supports both `"` and `'` quoting).
+- Uses `parse_element_attributes` to get the `name` attribute value (supports both `"` and `'` quoting).
+- Collects all unique `shadowroot`-prefixed attributes from the `<f-template>` opening tag, preserving boolean attributes as `None` and lowercasing attribute names.
 - Extracts the inner HTML between `>` and `</f-template>`.
 - Calls `extract_template_content` on the inner HTML to get the content inside the `<template>` element.
 
-Returns `Vec<(Option<String>, String)>` — pairs of (name, template content).
+Returns a `Vec<FTemplate>` containing the optional name, template content, and the collected shadowroot attributes. The locator stores those attributes with the template definition so custom-element rendering can apply them to the emitted Declarative Shadow DOM `<template>`.
 
 ### Glob matching
 
@@ -477,12 +480,20 @@ Calls `locator::parse_f_templates` (the same function used by `Locator::from_pat
 
 ```json
 [
-  {"name": "my-button", "content": "<button>{{label}}</button>"},
-  {"name": null, "content": "<span>unnamed</span>"}
+  {
+    "name": "my-button",
+    "content": "<button>{{label}}</button>",
+    "shadowrootAttributes": [{"name": "shadowrootmode", "value": "closed"}]
+  },
+  {
+    "name": null,
+    "content": "<span>unnamed</span>",
+    "shadowrootAttributes": []
+  }
 ]
 ```
 
-`name` is `null` when the `<f-template>` element has no `name` attribute. The `@microsoft/fast-build` CLI uses this export to parse HTML files without reimplementing the parsing logic in JavaScript.
+`name` is `null` when the `<f-template>` element has no `name` attribute. The `shadowrootAttributes` array preserves forwarded `shadowroot*` attributes as `{name, value}` metadata, using `null` for boolean attributes. The `@microsoft/fast-build` CLI uses this export to parse HTML files without reimplementing the parsing logic in JavaScript.
 
 ### `render_with_templates`
 
diff --git a/crates/microsoft-fast-build/README.md b/crates/microsoft-fast-build/README.md
index 35c49ba3688..0ecbb705134 100644
--- a/crates/microsoft-fast-build/README.md
+++ b/crates/microsoft-fast-build/README.md
@@ -318,6 +318,8 @@ A single file may contain multiple templates:
 
 If an `<f-template>` element is missing a `name` attribute, a warning is emitted to stderr and the template is ignored.
 
+Any `shadowroot*` attributes on `<f-template>` are copied to the rendered Declarative Shadow DOM `<template>`. The renderer normalizes `shadowrootmode` and legacy `shadowroot` for compatibility: when neither has a non-empty value, it emits `shadowrootmode="open" shadowroot="open"`; when exactly one has a non-empty value, that value is mirrored to the other; when both have explicit non-empty values, both are preserved as authored, even if they conflict.
+
 ### Rendering with a Locator
 
 ```rust
@@ -465,7 +467,9 @@ The renderer wraps the rendered template in Declarative Shadow DOM and adds the
 </my-button>
 ```
 
+- `shadowrootmode="open"` — the standard declarative shadow DOM mode emitted by default.
 - `shadowroot="open"` — legacy declarative shadow DOM attribute for broader browser compatibility.
+- `shadowroot*` attributes declared on the source `<f-template>` are forwarded to the output `<template>`; `shadowrootmode` and `shadowroot` default to `open` when neither has a non-empty value, mirror when exactly one has a non-empty value, and are preserved as authored when both have explicit non-empty values.
 
 Custom elements that have no matching template in the locator are passed through verbatim.
 
diff --git a/crates/microsoft-fast-build/src/directive.rs b/crates/microsoft-fast-build/src/directive.rs
index 144875aa7f4..c3bd5e42ca5 100644
--- a/crates/microsoft-fast-build/src/directive.rs
+++ b/crates/microsoft-fast-build/src/directive.rs
@@ -219,7 +219,7 @@ fn parse_repeat_expr(expr: &str) -> Option<(String, String)> {
 ///
 /// Output format:
 ///   `<original-open-tag>
-///    <template shadowrootmode="open" shadowroot="open">{rendered}</template>
+///    <template {shadowroot-attrs}>{rendered}</template>
 ///    {children}</{tag-name}>`
 ///
 /// For self-closing elements (`<my-button />`), the element is emitted as non-self-closing.
@@ -353,6 +353,7 @@ pub fn render_custom_element(
     let mut shadow_scope = HydrationScope::new();
     let element_template = locator.get_template(&tag_name).unwrap_or_default();
     let rendered = render_node(element_template, child_root, &[], Some(locator), Some(&mut shadow_scope), false, config)?;
+    let shadowroot_attributes = build_shadowroot_template_attrs(locator.get_shadowroot_attributes(&tag_name));
 
     // Build the final opening tag, resolving {{expr}} attrs and injecting hydration attrs.
     let element_open = build_element_open_tag(&open_tag_base, open_tag_content, root, loop_vars, parent_hydration, is_entry);
@@ -369,13 +370,83 @@ pub fn render_custom_element(
     };
 
     let output = format!(
-        "{}<template shadowrootmode=\"open\" shadowroot=\"open\">{}</template>{}</{}>",
-        element_open, rendered, children, tag_name
+        "{}<template{}>{}</template>{}</{}>",
+        element_open, shadowroot_attributes, rendered, children, tag_name
     );
 
     Ok((output, after))
 }
 
+fn build_shadowroot_template_attrs(attrs: &[(String, Option<String>)]) -> String {
+    let mut mode: Option<Option<String>> = None;
+    let mut legacy_shadowroot: Option<Option<String>> = None;
+    let mut forwarded: Vec<(String, Option<String>)> = Vec::new();
+    let mut seen_forwarded: Vec<String> = Vec::new();
+
+    for (name, value) in attrs {
+        let normalized = name.to_lowercase();
+        match normalized.as_str() {
+            "shadowrootmode" => {
+                if mode.is_none() {
+                    mode = Some(value.clone());
+                }
+            }
+            "shadowroot" => {
+                if legacy_shadowroot.is_none() {
+                    legacy_shadowroot = Some(value.clone());
+                }
+            }
+            _ if normalized.starts_with("shadowroot") => {
+                if !seen_forwarded.contains(&normalized) {
+                    seen_forwarded.push(normalized.clone());
+                    forwarded.push((normalized, value.clone()));
+                }
+            }
+            _ => {}
+        }
+    }
+
+    let explicit_mode = explicit_shadowroot_attr_value(mode);
+    let explicit_legacy_shadowroot = explicit_shadowroot_attr_value(legacy_shadowroot);
+    let mode = explicit_mode
+        .clone()
+        .or_else(|| explicit_legacy_shadowroot.clone())
+        .unwrap_or_else(|| "open".to_string());
+    let legacy_shadowroot = explicit_legacy_shadowroot
+        .or(explicit_mode)
+        .unwrap_or_else(|| mode.clone());
+
+    let mut out = String::new();
+    append_template_attr_value(&mut out, "shadowrootmode", &mode);
+    append_template_attr_value(&mut out, "shadowroot", &legacy_shadowroot);
+    for (name, value) in forwarded {
+        append_template_attr(&mut out, &name, &value);
+    }
+    out
+}
+
+fn explicit_shadowroot_attr_value(value: Option<Option<String>>) -> Option<String> {
+    value.flatten().filter(|value| !value.is_empty())
+}
+
+fn append_template_attr(out: &mut String, name: &str, value: &Option<String>) {
+    match value {
+        Some(value) => append_template_attr_value(out, name, value),
+        None => {
+            out.push(' ');
+            out.push_str(name);
+        }
+    }
+}
+
+fn append_template_attr_value(out: &mut String, name: &str, value: &str) {
+    out.push(' ');
+    out.push_str(name);
+    out.push_str("=\"");
+    out.push_str(&html_escape(value));
+    out.push('"');
+}
+
 fn attribute_to_json_value(value: Option<&String>, root: &JsonValue, loop_vars: &[(String, JsonValue)]) -> JsonValue {
     let v = match value {
         None => return JsonValue::Bool(true), // boolean attribute (no value)
diff --git a/crates/microsoft-fast-build/src/locator.rs b/crates/microsoft-fast-build/src/locator.rs
index 3888bd92580..be5ec4f2ef5 100644
--- a/crates/microsoft-fast-build/src/locator.rs
+++ b/crates/microsoft-fast-build/src/locator.rs
@@ -1,9 +1,23 @@
 use std::collections::HashMap;
 use std::path::Path;
+use crate::attribute::{find_tag_end, parse_element_attributes};
 use crate::error::RenderError;
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub(crate) struct FTemplate {
+    pub name: Option<String>,
+    pub content: String,
+    pub shadowroot_attributes: Vec<(String, Option<String>)>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct TemplateDefinition {
+    content: String,
+    shadowroot_attributes: Vec<(String, Option<String>)>,
+}
+
 pub struct Locator {
-    templates: HashMap<String, String>,
+    templates: HashMap<String, TemplateDefinition>,
 }
 
 impl Locator {
@@ -12,8 +26,8 @@ impl Locator {
     /// The element name is read from the `name` attribute of `<f-template>` elements inside each file.
     /// Errors if two different files contain an `<f-template>` with the same name.
     pub fn from_patterns(patterns: &[&str]) -> Result<Self, RenderError> {
-        // element_name → list of (file_path, template_content) from all matching files
-        let mut element_entries: HashMap<String, Vec<(String, String)>> = HashMap::new();
+        // element_name → list of (file_path, template_definition) from all matching files
+        let mut element_entries: HashMap<String, Vec<(String, FTemplate)>> = HashMap::new();
 
         for &pattern in patterns {
             let dir_str = static_prefix_dir(pattern);
@@ -39,21 +53,18 @@ impl Locator {
                             message: e.to_string(),
                         }
                     })?;
-                    for (name_opt, content) in parse_f_templates(&html) {
-                        match name_opt {
-                            Some(name) => {
-                                element_entries
-                                    .entry(name)
-                                    .or_default()
-                                    .push((norm_file.clone(), content));
-                            }
-                            None => {
-                                eprintln!(
-                                    "warning: <f-template> without a 'name' attribute in '{}': {}",
-                                    norm_file,
-                                    content.trim()
-                                );
-                            }
+                    for template in parse_f_templates(&html) {
+                        if let Some(name) = template.name.clone() {
+                            element_entries
+                                .entry(name)
+                                .or_default()
+                                .push((norm_file.clone(), template));
+                        } else {
+                            eprintln!(
+                                "warning: <f-template> without a 'name' attribute in '{}': {}",
+                                norm_file,
+                                template.content.trim()
+                            );
                         }
                     }
                 }
@@ -66,27 +77,80 @@ impl Locator {
                 let paths = entries.into_iter().map(|(p, _)| p).collect();
                 return Err(RenderError::DuplicateTemplate { element, paths });
             }
-            let (_, content) = entries.into_iter().next().expect(
+            let (_, template) = entries.into_iter().next().expect(
                 "expected exactly one entry for element; duplicates rejected above and entries are only created when a template is added",
             );
-            templates.insert(element, content);
+            templates.insert(element, TemplateDefinition {
+                content: template.content,
+                shadowroot_attributes: template.shadowroot_attributes,
+            });
         }
 
         Ok(Locator { templates })
     }
 
     /// Create a Locator from an explicit map (useful for testing without filesystem).
+    ///
+    /// This API only carries template content. Shadowroot-prefixed attributes for
+    /// Declarative Shadow DOM are empty for these entries. Use [`Locator::from_patterns`]
+    /// with `<f-template>` metadata, or call [`Locator::add_template_with_shadowroot_attrs`]
+    /// for templates that need shadowroot attributes.
     pub fn from_templates(templates: HashMap<String, String>) -> Self {
+        let templates = templates
+            .into_iter()
+            .map(|(name, content)| (name, TemplateDefinition { content, shadowroot_attributes: Vec::new() }))
+            .collect();
+        Locator { templates }
+    }
+
+    #[cfg_attr(not(target_arch = "wasm32"), allow(dead_code))]
+    pub(crate) fn from_template_definitions(templates: HashMap<String, (String, Vec<(String, Option<String>)>)>) -> Self {
+        let templates = templates
+            .into_iter()
+            .map(|(name, (content, shadowroot_attributes))| (name, TemplateDefinition { content, shadowroot_attributes }))
+            .collect();
         Locator { templates }
     }
 
     /// Add a template directly.
+    ///
+    /// This only stores template content. Shadowroot-prefixed attributes for
+    /// Declarative Shadow DOM are empty for this entry. Use
+    /// [`Locator::add_template_with_shadowroot_attrs`] when the rendered shadow
+    /// `<template>` needs attributes such as `shadowrootmode`.
     pub fn add_template(&mut self, element_name: &str, content: &str) {
-        self.templates.insert(element_name.to_string(), content.to_string());
+        self.templates.insert(element_name.to_string(), TemplateDefinition {
+            content: content.to_string(),
+            shadowroot_attributes: Vec::new(),
+        });
+    }
+
+    /// Add a template directly with shadowroot-prefixed attributes.
+    ///
+    /// Only attributes whose names begin with `shadowroot` are retained. Names
+    /// are normalized to lowercase and duplicate names are ignored, matching
+    /// `<f-template>` parsing. Use `None` for boolean attributes.
+    pub fn add_template_with_shadowroot_attrs(
+        &mut self,
+        element_name: &str,
+        content: &str,
+        attrs: &[(String, Option<String>)],
+    ) {
+        self.templates.insert(element_name.to_string(), TemplateDefinition {
+            content: content.to_string(),
+            shadowroot_attributes: collect_shadowroot_attributes(attrs),
+        });
     }
 
     pub fn get_template(&self, element_name: &str) -> Option<&str> {
-        self.templates.get(element_name).map(|s| s.as_str())
+        self.templates.get(element_name).map(|template| template.content.as_str())
+    }
+
+    pub fn get_shadowroot_attributes(&self, element_name: &str) -> &[(String, Option<String>)] {
+        self.templates
+            .get(element_name)
+            .map(|template| template.shadowroot_attributes.as_slice())
+            .unwrap_or(&[])
     }
 
     pub fn has_template(&self, element_name: &str) -> bool {
@@ -95,8 +159,8 @@ impl Locator {
 }
 
 /// Parse all `<f-template>` elements from an HTML string.
-/// Returns list of (name, inner_template_content). name is None if missing.
-pub(crate) fn parse_f_templates(html: &str) -> Vec<(Option<String>, String)> {
+/// Returns the name, inner template content, and shadowroot-prefixed attributes.
+pub(crate) fn parse_f_templates(html: &str) -> Vec<FTemplate> {
     let mut results = Vec::new();
     let mut search_start = 0;
     while let Some(rel) = html[search_start..].find("<f-template") {
@@ -110,12 +174,17 @@ pub(crate) fn parse_f_templates(html: &str) -> Vec<(Option<String>, String)> {
             }
         }
         // Find the closing '>' of the opening <f-template ...> tag
-        let tag_close = match html[after_tag..].find('>') {
-            Some(i) => after_tag + i + 1,
+        let tag_close = match find_tag_end(html, tag_start) {
+            Some(i) => i,
             None => break,
         };
-        let attrs = &html[after_tag..tag_close - 1];
-        let name = extract_attr_value(attrs, "name");
+        let open_tag = &html[tag_start..tag_close];
+        let attrs = parse_element_attributes(open_tag);
+        let name = attrs
+            .iter()
+            .find(|(name, _)| name.eq_ignore_ascii_case("name"))
+            .and_then(|(_, value)| value.clone());
+        let shadowroot_attributes = collect_shadowroot_attributes(&attrs);
 
         // Find </f-template>
         let inner_start = tag_close;
@@ -127,31 +196,28 @@ pub(crate) fn parse_f_templates(html: &str) -> Vec<(Option<String>, String)> {
         let inner_html = &html[inner_start..inner_end];
         let content = extract_template_content(inner_html);
 
-        results.push((name, content));
+        results.push(FTemplate {
+            name,
+            content,
+            shadowroot_attributes,
+        });
         search_start = inner_end + end_tag.len();
     }
     results
 }
 
-/// Extract the value of an attribute from an attribute string like ` name="foo" `.
-fn extract_attr_value(attrs: &str, attr_name: &str) -> Option<String> {
-    // Try double-quoted: name="value"
-    let double_pat = format!("{}=\"", attr_name);
-    if let Some(pos) = attrs.find(&double_pat) {
-        let value_start = pos + double_pat.len();
-        if let Some(end) = attrs[value_start..].find('"') {
-            return Some(attrs[value_start..value_start + end].to_string());
-        }
-    }
-    // Try single-quoted: name='value'
-    let single_pat = format!("{}='", attr_name);
-    if let Some(pos) = attrs.find(&single_pat) {
-        let value_start = pos + single_pat.len();
-        if let Some(end) = attrs[value_start..].find('\'') {
-            return Some(attrs[value_start..value_start + end].to_string());
+fn collect_shadowroot_attributes(attrs: &[(String, Option<String>)]) -> Vec<(String, Option<String>)> {
+    let mut results = Vec::new();
+    let mut seen = Vec::new();
+    for (name, value) in attrs {
+        let normalized = name.to_lowercase();
+        if !normalized.starts_with("shadowroot") || seen.contains(&normalized) {
+            continue;
         }
+        seen.push(normalized.clone());
+        results.push((normalized, value.clone()));
     }
-    None
+    results
 }
 
 /// Extract the inner content of the first `<template>` element found in `html`.
@@ -332,8 +398,9 @@ mod tests {
 </f-template>"#;
         let results = parse_f_templates(html);
         assert_eq!(results.len(), 1);
-        assert_eq!(results[0].0, Some("my-button".to_string()));
-        assert_eq!(results[0].1, "<button>{{label}}</button>");
+        assert_eq!(results[0].name, Some("my-button".to_string()));
+        assert_eq!(results[0].content, "<button>{{label}}</button>");
+        assert!(results[0].shadowroot_attributes.is_empty());
     }
 
     #[test]
@@ -346,10 +413,10 @@ mod tests {
 </f-template>"#;
         let results = parse_f_templates(html);
         assert_eq!(results.len(), 2);
-        assert_eq!(results[0].0, Some("my-a".to_string()));
-        assert_eq!(results[0].1, "<span>A</span>");
-        assert_eq!(results[1].0, Some("my-b".to_string()));
-        assert_eq!(results[1].1, "<div>B</div>");
+        assert_eq!(results[0].name, Some("my-a".to_string()));
+        assert_eq!(results[0].content, "<span>A</span>");
+        assert_eq!(results[1].name, Some("my-b".to_string()));
+        assert_eq!(results[1].content, "<div>B</div>");
     }
 
     #[test]
@@ -359,7 +426,39 @@ mod tests {
 </f-template>"#;
         let results = parse_f_templates(html);
         assert_eq!(results.len(), 1);
-        assert_eq!(results[0].0, None);
+        assert_eq!(results[0].name, None);
+    }
+
+    #[test]
+    fn test_parse_f_templates_shadowroot_attrs() {
+        let html = r#"<f-template name="my-el" shadowrootmode="closed" shadowrootdelegatesfocus shadowrootclonable="true">
+    <template><span>shadow</span></template>
+</f-template>"#;
+        let results = parse_f_templates(html);
+        assert_eq!(results.len(), 1);
+        assert_eq!(
+            results[0].shadowroot_attributes,
+            vec![
+                ("shadowrootmode".to_string(), Some("closed".to_string())),
+                ("shadowrootdelegatesfocus".to_string(), None),
+                ("shadowrootclonable".to_string(), Some("true".to_string())),
+            ]
+        );
+    }
+
+    #[test]
+    fn test_add_template_with_shadowroot_attrs_preserves_attrs() {
+        let mut locator = Locator::from_templates(std::collections::HashMap::new());
+        let attrs = vec![
+            ("shadowrootmode".to_string(), Some("closed".to_string())),
+            ("shadowrootdelegatesfocus".to_string(), None),
+            ("shadowrootclonable".to_string(), Some("true".to_string())),
+        ];
+
+        locator.add_template_with_shadowroot_attrs("my-el", "<span>shadow</span>", &attrs);
+
+        assert_eq!(locator.get_template("my-el"), Some("<span>shadow</span>"));
+        assert_eq!(locator.get_shadowroot_attributes("my-el"), attrs.as_slice());
     }
 
     #[test]
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index d3887146c0f..07ffafea4b0 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -26,7 +26,7 @@ pub fn render(entry: &str, state: Option<String>) -> Result<String, JsValue> {
 /// Use `render_entry_with_templates` for top-level entry HTML rendering.
 ///
 /// `templates_json` is a JSON object mapping element names to their HTML template strings,
-/// e.g. `{"my-button": "<template>...</template>"}`.
+/// e.g. `{"my-button": "<template>...</template>"}`, or template metadata objects.
 /// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
 /// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
@@ -38,7 +38,7 @@ pub fn render_with_templates(
     attribute_name_strategy: Option<String>,
 ) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
-    let locator = Locator::from_templates(templates);
+    let locator = Locator::from_template_definitions(templates);
     let config = build_config(attribute_name_strategy.as_deref())?;
     match state {
         Some(state) => render_template_with_locator(entry, &state, &locator, config.as_ref()),
@@ -55,7 +55,7 @@ pub fn render_with_templates(
 /// output, while missing and non-primitive values (`array`, `object`, `null`) are stripped.
 ///
 /// `templates_json` is a JSON object mapping element names to their HTML template strings,
-/// e.g. `{"my-button": "<template>...</template>"}`.
+/// e.g. `{"my-button": "<template>...</template>"}`, or template metadata objects.
 /// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
 /// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
@@ -67,7 +67,7 @@ pub fn render_entry_with_templates(
     attribute_name_strategy: Option<String>,
 ) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
-    let locator = Locator::from_templates(templates);
+    let locator = Locator::from_template_definitions(templates);
     let config = build_config(attribute_name_strategy.as_deref())?;
     match state {
         Some(state) => render_entry_template_with_locator(entry, &state, &locator, config.as_ref()),
@@ -77,22 +77,39 @@ pub fn render_entry_with_templates(
 }
 
 /// Parse all `<f-template>` elements from an HTML string.
-/// Returns a JSON array of `{"name": string | null, "content": string}` objects,
+/// Returns a JSON array of template metadata objects,
 /// one per `<f-template>` element found. `name` is `null` when the element has
 /// no `name` attribute.
 #[wasm_bindgen]
 pub fn parse_f_templates(html: &str) -> String {
     let templates = crate::locator::parse_f_templates(html);
     let mut parts = Vec::with_capacity(templates.len());
-    for (name_opt, content) in templates {
-        let name_json = match name_opt {
+    for template in templates {
+        let name_json = match template.name {
             Some(n) => format!("\"{}\"", escape_json_str(&n)),
             None => "null".to_string(),
         };
         parts.push(format!(
-            "{{\"name\":{},\"content\":\"{}\"}}",
+            "{{\"name\":{},\"content\":\"{}\",\"shadowrootAttributes\":{}}}",
             name_json,
-            escape_json_str(&content)
+            escape_json_str(&template.content),
+            shadowroot_attributes_json(&template.shadowroot_attributes)
+        ));
+    }
+    format!("[{}]", parts.join(","))
+}
+
+fn shadowroot_attributes_json(attrs: &[(String, Option<String>)]) -> String {
+    let mut parts = Vec::with_capacity(attrs.len());
+    for (name, value) in attrs {
+        let value_json = match value {
+            Some(value) => format!("\"{}\"", escape_json_str(value)),
+            None => "null".to_string(),
+        };
+        parts.push(format!(
+            "{{\"name\":\"{}\",\"value\":{}}}",
+            escape_json_str(name),
+            value_json
         ));
     }
     format!("[{}]", parts.join(","))
@@ -113,7 +130,9 @@ fn escape_json_str(s: &str) -> String {
     out
 }
 
-fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>, JsValue> {
+fn parse_templates_map(
+    templates_json: &str,
+) -> Result<HashMap<String, (String, Vec<(String, Option<String>)>)>, JsValue> {
     let parsed = json::parse(templates_json).map_err(|e| {
         JsValue::from_str(&format!("Failed to parse templates JSON: {}", e.message))
     })?;
@@ -123,13 +142,16 @@ fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>,
             for (k, v) in obj {
                 match v {
                     json::JsonValue::String(s) => {
-                        map.insert(k, s);
+                        map.insert(k, (s, Vec::new()));
+                    }
+                    json::JsonValue::Object(template) => {
+                        map.insert(k.clone(), parse_template_metadata(&k, &template)?);
                     }
                     _ => {
                         return Err(JsValue::from_str(&format!(
-                            "Template value for '{}' must be a string",
+                            "Template value for '{}' must be a string or metadata object",
                             k
-                        )))
+                        )));
                     }
                 }
             }
@@ -139,6 +161,94 @@ fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>,
     }
 }
 
+fn parse_template_metadata(
+    template_name: &str,
+    template: &HashMap<String, json::JsonValue>,
+) -> Result<(String, Vec<(String, Option<String>)>), JsValue> {
+    let content = match template.get("content") {
+        Some(json::JsonValue::String(content)) => content.clone(),
+        _ => {
+            return Err(JsValue::from_str(&format!(
+                "Template metadata for '{}' must include a string content property",
+                template_name
+            )));
+        }
+    };
+
+    let attrs = match template.get("shadowrootAttributes") {
+        Some(json::JsonValue::Array(attrs)) => parse_shadowroot_attributes(template_name, attrs)?,
+        Some(json::JsonValue::Null) | None => Vec::new(),
+        Some(_) => {
+            return Err(JsValue::from_str(&format!(
+                "Template metadata for '{}' must use an array shadowrootAttributes property",
+                template_name
+            )));
+        }
+    };
+
+    Ok((content, attrs))
+}
+
+fn parse_shadowroot_attributes(
+    template_name: &str,
+    attrs: &[json::JsonValue],
+) -> Result<Vec<(String, Option<String>)>, JsValue> {
+    let mut parsed = Vec::with_capacity(attrs.len());
+    for attr in attrs {
+        let attr = match attr {
+            json::JsonValue::Object(attr) => attr,
+            _ => {
+                return Err(JsValue::from_str(&format!(
+                    "Template metadata for '{}' contains a non-object shadowroot attribute",
+                    template_name
+                )));
+            }
+        };
+        let name = match attr.get("name") {
+            Some(json::JsonValue::String(name)) => name.clone(),
+            _ => {
+                return Err(JsValue::from_str(&format!(
+                    "Template metadata for '{}' contains a shadowroot attribute without a string name",
+                    template_name
+                )));
+            }
+        };
+        let value = match attr.get("value") {
+            Some(json::JsonValue::String(value)) => Some(value.clone()),
+            Some(json::JsonValue::Null) | None => None,
+            _ => {
+                return Err(JsValue::from_str(&format!(
+                    "Template metadata for '{}' contains a shadowroot attribute with a non-string value",
+                    template_name
+                )));
+            }
+        };
+        parsed.push((name, value));
+    }
+    Ok(parsed)
+}
+
+#[cfg(all(test, target_arch = "wasm32"))]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parse_templates_map_treats_null_shadowroot_attributes_as_empty() {
+        let templates = match parse_templates_map(
+            r#"{"test-element":{"content":"<span></span>","shadowrootAttributes":null}}"#,
+        ) {
+            Ok(templates) => templates,
+            Err(_) => panic!("template metadata with null shadowrootAttributes should parse"),
+        };
+
+        let attrs = &templates
+            .get("test-element")
+            .expect("template should be present")
+            .1;
+        assert!(attrs.is_empty());
+    }
+}
+
 /// Build an `Option<RenderConfig>` from the optional strategy string.
 /// Returns `None` for omitted, `""`, or `"camelCase"`; `Some(config)` for `"none"`.
 fn build_config(strategy: Option<&str>) -> Result<Option<RenderConfig>, JsValue> {
diff --git a/crates/microsoft-fast-build/tests/custom_elements.rs b/crates/microsoft-fast-build/tests/custom_elements.rs
index b34157988b0..98ae509adb1 100644
--- a/crates/microsoft-fast-build/tests/custom_elements.rs
+++ b/crates/microsoft-fast-build/tests/custom_elements.rs
@@ -90,6 +90,168 @@ fn test_custom_element_with_children() {
     assert!(result.contains("</my-layout>"), "close tag: {result}");
 }
 
+#[test]
+fn test_f_template_shadowroot_defaults_remain_open() {
+    let locator = Locator::from_patterns(&["tests/fixtures/my-button.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<my-button label="Hi"></my-button>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="open" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_shadowrootmode_forwarded_with_legacy_shadowroot() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-closed.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-closed></shadowroot-closed>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="closed">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_legacy_shadowroot_value_mirrors_to_mode() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-legacy-closed.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-legacy-closed></shadowroot-legacy-closed>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="closed">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_additional_shadowroot_attrs_forwarded() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-extra.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-extra></shadowroot-extra>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(
+        result.contains(r#"<template shadowrootmode="open" shadowroot="open" shadowrootdelegatesfocus shadowrootclonable="true">"#),
+        "shadow attrs: {result}"
+    );
+}
+
+#[test]
+fn test_f_template_explicit_shadowroot_value_is_preserved() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-explicit.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-explicit></shadowroot-explicit>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_boolean_shadowrootmode_defaults_to_open() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-boolean-mode.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-boolean-mode></shadowroot-boolean-mode>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="open" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_boolean_shadowroot_defaults_to_open() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-boolean-shadowroot.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-boolean-shadowroot></shadowroot-boolean-shadowroot>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="open" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_empty_shadowrootmode_defaults_to_open() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-empty-mode.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-empty-mode></shadowroot-empty-mode>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="open" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_empty_shadowroot_defaults_to_open() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-empty-shadowroot.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-empty-shadowroot></shadowroot-empty-shadowroot>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="open" shadowroot="open">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_boolean_shadowroot_mirrors_closed_mode() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-closed-boolean-shadowroot.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-closed-boolean-shadowroot></shadowroot-closed-boolean-shadowroot>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="closed">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_empty_shadowroot_mirrors_closed_mode() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-closed-empty-shadowroot.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-closed-empty-shadowroot></shadowroot-closed-empty-shadowroot>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="closed">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_empty_shadowrootmode_mirrors_closed_shadowroot() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-empty-mode-closed-shadowroot.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-empty-mode-closed-shadowroot></shadowroot-empty-mode-closed-shadowroot>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(result.contains(r#"<template shadowrootmode="closed" shadowroot="closed">"#), "shadow attrs: {result}");
+}
+
+#[test]
+fn test_f_template_shadowroot_attr_values_are_escaped() {
+    let locator = Locator::from_patterns(&["tests/fixtures/shadowroot-escaped.html"]).unwrap();
+    let result = render_with_locator(
+        r#"<shadowroot-escaped></shadowroot-escaped>"#,
+        &empty_root(),
+        &locator,
+        None,
+    ).unwrap();
+    assert!(
+        result.contains(r#"<template shadowrootmode="open" shadowroot="open" shadowrootserializable="a&quot;b&amp;c">"#),
+        "shadow attrs: {result}"
+    );
+}
+
 // ── passthrough when no template or locator ───────────────────────────────────
 
 #[test]
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-mode.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-mode.html
new file mode 100644
index 00000000000..81ea0258093
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-mode.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-boolean-mode" shadowrootmode>
+    <template>
+        <span>boolean mode</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-shadowroot.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-shadowroot.html
new file mode 100644
index 00000000000..344888d6b48
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-boolean-shadowroot.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-boolean-shadowroot" shadowroot>
+    <template>
+        <span>boolean shadowroot</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-boolean-shadowroot.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-boolean-shadowroot.html
new file mode 100644
index 00000000000..54114c3842e
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-boolean-shadowroot.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-closed-boolean-shadowroot" shadowrootmode="closed" shadowroot>
+    <template>
+        <span>closed boolean shadowroot</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-empty-shadowroot.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-empty-shadowroot.html
new file mode 100644
index 00000000000..0ec2dfbb909
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed-empty-shadowroot.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-closed-empty-shadowroot" shadowrootmode="closed" shadowroot="">
+    <template>
+        <span>closed empty shadowroot</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed.html
new file mode 100644
index 00000000000..f5ece0b7ff2
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-closed.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-closed" shadowrootmode="closed">
+    <template>
+        <span>closed</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode-closed-shadowroot.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode-closed-shadowroot.html
new file mode 100644
index 00000000000..f1f057de6d4
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode-closed-shadowroot.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-empty-mode-closed-shadowroot" shadowrootmode="" shadowroot="closed">
+    <template>
+        <span>empty mode closed shadowroot</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode.html
new file mode 100644
index 00000000000..0527f4b9b9c
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-mode.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-empty-mode" shadowrootmode="">
+    <template>
+        <span>empty mode</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-shadowroot.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-shadowroot.html
new file mode 100644
index 00000000000..fc2a07edadb
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-empty-shadowroot.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-empty-shadowroot" shadowroot="">
+    <template>
+        <span>empty shadowroot</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-escaped.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-escaped.html
new file mode 100644
index 00000000000..f429c11a7c1
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-escaped.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-escaped" shadowrootserializable='a"b&c'>
+    <template>
+        <span>escaped</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-explicit.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-explicit.html
new file mode 100644
index 00000000000..8cdaa3d9f6f
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-explicit.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-explicit" shadowrootmode="closed" shadowroot="open">
+    <template>
+        <span>explicit</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-extra.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-extra.html
new file mode 100644
index 00000000000..a37e005be3c
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-extra.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-extra" shadowrootdelegatesfocus shadowrootclonable="true">
+    <template>
+        <span>extra</span>
+    </template>
+</f-template>
diff --git a/crates/microsoft-fast-build/tests/fixtures/shadowroot-legacy-closed.html b/crates/microsoft-fast-build/tests/fixtures/shadowroot-legacy-closed.html
new file mode 100644
index 00000000000..41dabb8e738
--- /dev/null
+++ b/crates/microsoft-fast-build/tests/fixtures/shadowroot-legacy-closed.html
@@ -0,0 +1,5 @@
+<f-template name="shadowroot-legacy-closed" shadowroot="closed">
+    <template>
+        <span>legacy closed</span>
+    </template>
+</f-template>
diff --git a/packages/fast-build/DESIGN.md b/packages/fast-build/DESIGN.md
index b744f26f0ac..a3a4f39bd52 100644
--- a/packages/fast-build/DESIGN.md
+++ b/packages/fast-build/DESIGN.md
@@ -108,6 +108,7 @@ Template HTML files are scanned for `<f-template>` elements. Each `<f-template>`
 
 - The `name` attribute value becomes the element name key in the templates map.
 - The inner content of the `<template>` child element becomes the raw template string sent to the WASM renderer.
+- Any `shadowroot`-prefixed attributes on `<f-template>` become `shadowrootAttributes` metadata that the WASM renderer applies to the emitted Declarative Shadow DOM `<template>`.
 - A file may contain multiple `<f-template>` elements (each becomes a separate entry).
 - If an `<f-template>` has no `name` attribute, a warning is printed to stderr and it is skipped.
 
@@ -153,7 +154,7 @@ Four WASM functions are available; the CLI uses the entry renderer when template
 | `wasm.render_entry_with_templates(entry, templatesJson, state?, strategy)` | CLI entry HTML rendering when at least one template was loaded. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. |
 | `wasm.parse_f_templates(html)` | Parsing `<f-template>` elements from each matched HTML file |
 
-`templatesJson` is a JSON-stringified object mapping element names to their raw inner template strings (the content extracted from `<template>` inside `<f-template>`). The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM.
+`templatesJson` is a JSON-stringified object mapping element names to template metadata objects. Each object contains the raw inner template string extracted from `<template>` inside `<f-template>` and any forwarded `shadowrootAttributes`. The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM, copying `shadowroot*` attributes to the emitted `<template>`. It normalizes `shadowrootmode` and legacy `shadowroot` for compatibility: when neither has a non-empty value, it emits `shadowrootmode="open" shadowroot="open"`; when exactly one has a non-empty value, that value is mirrored to the other; when both have explicit non-empty values, both are preserved as authored, even if they conflict.
 
 See the [`microsoft-fast-build` DESIGN.md](../../crates/microsoft-fast-build/DESIGN.md) for details on the Rust rendering pipeline.
 
diff --git a/packages/fast-build/README.md b/packages/fast-build/README.md
index 878ccb080d8..2ed8ff7e2b8 100644
--- a/packages/fast-build/README.md
+++ b/packages/fast-build/README.md
@@ -119,6 +119,8 @@ Template files must use the following format:
 
 If an `<f-template>` element has no `name` attribute, a warning is printed and it is ignored. Exact file paths (no wildcards) are also accepted as patterns, making it possible to register a single template file.
 
+Any `shadowroot*` attributes on `<f-template>` are forwarded to the rendered Declarative Shadow DOM `<template>`. The CLI normalizes `shadowrootmode` and legacy `shadowroot` for compatibility: when neither has a non-empty value, it emits `shadowrootmode="open" shadowroot="open"`; when exactly one has a non-empty value, that value is mirrored to the other; when both have explicit non-empty values, both are preserved as authored, even if they conflict.
+
 ### Attribute name strategy
 
 The `--attribute-name-strategy` option controls how HTML attribute names on custom elements are mapped to state property names in their shadow templates.
diff --git a/packages/fast-build/bin/fast.js b/packages/fast-build/bin/fast.js
index ec66d30aaea..5f7b83cd5fb 100755
--- a/packages/fast-build/bin/fast.js
+++ b/packages/fast-build/bin/fast.js
@@ -218,24 +218,28 @@ function staticPrefixDir(pattern) {
 
 /**
  * Parse all `<f-template>` elements from an HTML string using the WASM module.
- * Returns [{name, content}] for templates that have a `name` attribute.
+ * Returns template metadata for templates that have a `name` attribute.
  * Emits a warning to stderr for any `<f-template>` without a `name`.
  * @param {string} html
  * @param {string} filePath - used in warning messages
  * @param {object} wasm - the loaded WASM module
- * @returns {{ name: string, content: string }[]}
+ * @returns {{ name: string, content: string, shadowrootAttributes: { name: string, value: string | null }[] }[]}
  */
 function parseFTemplates(html, filePath, wasm) {
-    /** @type {{ name: string | null, content: string }[]} */
+    /** @type {{ name: string | null, content: string, shadowrootAttributes?: { name: string, value: string | null }[] }[]} */
     const parsed = JSON.parse(wasm.parse_f_templates(html));
     const results = [];
-    for (const { name, content } of parsed) {
+    for (const { name, content, shadowrootAttributes } of parsed) {
         if (name === null) {
             process.stderr.write(
                 `Warning: <f-template> without a 'name' attribute in '${filePath}': ${content.trim()}\n`
             );
         } else {
-            results.push({ name, content });
+            results.push({
+                name,
+                content,
+                shadowrootAttributes: shadowrootAttributes || [],
+            });
         }
     }
     return results;
@@ -248,7 +252,7 @@ function parseFTemplates(html, filePath, wasm) {
  * Warns (but does not error) if the base directory does not exist.
  * @param {string} pattern
  * @param {object} wasm - the loaded WASM module
- * @returns {{ name: string, content: string }[]}
+ * @returns {{ name: string, content: string, shadowrootAttributes: { name: string, value: string | null }[] }[]}
  */
 function resolvePattern(pattern, wasm) {
     const baseDir = staticPrefixDir(pattern);
@@ -262,8 +266,8 @@ function resolvePattern(pattern, wasm) {
         if (globMatch(pattern, file)) {
             const html = fs.readFileSync(file, "utf8");
             const templates = parseFTemplates(html, file, wasm);
-            for (const { name, content } of templates) {
-                results.push({ name, content });
+            for (const { name, content, shadowrootAttributes } of templates) {
+                results.push({ name, content, shadowrootAttributes });
             }
         }
     }
@@ -309,13 +313,13 @@ async function runBuild(args) {
                     `Warning: No template files found for pattern "${pattern}".\n`
                 );
             }
-            for (const { name, content } of matches) {
+            for (const { name, content, shadowrootAttributes } of matches) {
                 if (name in templatesMap) {
                     process.stderr.write(
                         `Warning: Duplicate template name "${name}" — later file overwrites earlier.\n`
                     );
                 }
-                templatesMap[name] = content;
+                templatesMap[name] = { content, shadowrootAttributes };
             }
         }
     }
diff --git a/packages/fast-build/test/config.test.js b/packages/fast-build/test/config.test.js
index 96903d16628..5740a9801d0 100644
--- a/packages/fast-build/test/config.test.js
+++ b/packages/fast-build/test/config.test.js
@@ -208,6 +208,51 @@ describe("backward compatibility", () => {
     });
 });
 
+describe("template shadowroot attributes", () => {
+    /** @type {string} */
+    let dir;
+
+    beforeEach(() => {
+        dir = tmpDir();
+    });
+
+    afterEach(() => {
+        fs.rmSync(dir, { recursive: true, force: true });
+    });
+
+    it("forwards f-template shadowroot attributes through the CLI", () => {
+        writeFixture(dir, {
+            entry: "<my-el></my-el>",
+            state: "{}",
+        });
+        fs.mkdirSync(path.join(dir, "templates"));
+        fs.writeFileSync(
+            path.join(dir, "templates", "my-el.html"),
+            `<f-template name="my-el" shadowrootmode="closed" shadowrootdelegatesfocus>
+                <template><span>shadow</span></template>
+            </f-template>`,
+        );
+
+        run(
+            [
+                "--templates=templates/*.html",
+                "--entry=entry.html",
+                "--state=state.json",
+                "--output=out.html",
+            ],
+            dir,
+        );
+
+        const output = fs.readFileSync(path.join(dir, "out.html"), "utf8");
+        const templateMatch = output.match(/<template\b[^>]*>/);
+        assert.ok(templateMatch, output);
+        const templateTag = templateMatch[0];
+        assert.ok(templateTag.includes(`shadowrootmode="closed"`), output);
+        assert.ok(templateTag.includes(`shadowroot="closed"`), output);
+        assert.ok(templateTag.includes("shadowrootdelegatesfocus"), output);
+    });
+});
+
 describe("no state behavior", () => {
     /** @type {string} */
     let dir;

From fdf02b06ee0d603b09c12a8f2c3bd8bf3c5b3bfd Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 30 Apr 2026 11:46:43 -0700
Subject: [PATCH 07/14] chore: bump packages after failed publish (#7505)

The CD pipeline failing, this resets it back to the original good state.

To correct this `npm run bump` was run after resetting to the commit where publish last failed.

- [ ] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [ ] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

(cherry picked from commit 7d933fbbf8460646fbcd479ac11935a1c62c8736)
---
 ...ild-5aac0659-95f9-4cb6-997d-252316b7841c.json} |  4 ++--
 ...ment-5636cb6f-65c6-4c40-b964-d6c4b4b054f6.json |  7 -------
 package-lock.json                                 |  6 +++---
 packages/fast-build/CHANGELOG.json                | 15 +++++++++++++++
 packages/fast-build/CHANGELOG.md                  | 10 +++++++++-
 packages/fast-build/package.json                  |  2 +-
 packages/fast-element/CHANGELOG.json              | 15 +++++++++++++++
 packages/fast-test-harness/package.json           |  2 +-
 sites/website/package.json                        |  2 +-
 9 files changed, 47 insertions(+), 16 deletions(-)
 rename change/{@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json => @microsoft-fast-build-5aac0659-95f9-4cb6-997d-252316b7841c.json} (56%)
 delete mode 100644 change/@microsoft-fast-element-5636cb6f-65c6-4c40-b964-d6c4b4b054f6.json

diff --git a/change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json b/change/@microsoft-fast-build-5aac0659-95f9-4cb6-997d-252316b7841c.json
similarity index 56%
rename from change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json
rename to change/@microsoft-fast-build-5aac0659-95f9-4cb6-997d-252316b7841c.json
index a60d87b93b4..019c5eb2cb3 100644
--- a/change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json
+++ b/change/@microsoft-fast-build-5aac0659-95f9-4cb6-997d-252316b7841c.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "feat: change default attribute-name-strategy from none to camelCase",
+  "type": "none",
+  "comment": "chore: bump packages after failed publish",
   "packageName": "@microsoft/fast-build",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-5636cb6f-65c6-4c40-b964-d6c4b4b054f6.json b/change/@microsoft-fast-element-5636cb6f-65c6-4c40-b964-d6c4b4b054f6.json
deleted file mode 100644
index f468ccd0591..00000000000
--- a/change/@microsoft-fast-element-5636cb6f-65c6-4c40-b964-d6c4b4b054f6.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "chore: replace rollup-plugin-filesize with esbuild bundle size reporting",
-  "packageName": "@microsoft/fast-element",
-  "email": "7559015+janechu@users.noreply.github.com",
-  "dependentChangeType": "none"
-}
diff --git a/package-lock.json b/package-lock.json
index c96d3223f64..d9d59759b47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7078,7 +7078,7 @@
     },
     "packages/fast-build": {
       "name": "@microsoft/fast-build",
-      "version": "0.4.0",
+      "version": "0.5.0",
       "license": "MIT",
       "bin": {
         "fast": "bin/fast.js"
@@ -7128,7 +7128,7 @@
         "node": ">=22.18.0"
       },
       "peerDependencies": {
-        "@microsoft/fast-build": ">=0.4.0 <1.0.0",
+        "@microsoft/fast-build": ">=0.5.0 <1.0.0",
         "@microsoft/fast-element": ">=2.10.4 <=3.0.0-rc.1",
         "@playwright/test": ">=1.40.0",
         "vite": ">=7.0.0"
@@ -7422,7 +7422,7 @@
         "@microsoft/api-documenter": "7.29.7"
       },
       "devDependencies": {
-        "@microsoft/fast-build": "^0.4.0",
+        "@microsoft/fast-build": "^0.5.0",
         "@microsoft/fast-element": "^3.0.0-rc.1"
       }
     },
diff --git a/packages/fast-build/CHANGELOG.json b/packages/fast-build/CHANGELOG.json
index 4caa82b7ef8..9aabcdc7296 100644
--- a/packages/fast-build/CHANGELOG.json
+++ b/packages/fast-build/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@microsoft/fast-build",
   "entries": [
+    {
+      "date": "Thu, 30 Apr 2026 17:21:11 GMT",
+      "version": "0.5.0",
+      "tag": "@microsoft/fast-build_v0.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-build",
+            "commit": "77cd24b00d199fd4b2d2e42a6f2dce2be96396b5",
+            "comment": "feat: change default attribute-name-strategy from none to camelCase"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 17 Apr 2026 00:26:37 GMT",
       "version": "0.4.0",
diff --git a/packages/fast-build/CHANGELOG.md b/packages/fast-build/CHANGELOG.md
index 398381e9122..0530f29b690 100644
--- a/packages/fast-build/CHANGELOG.md
+++ b/packages/fast-build/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @microsoft/fast-build
 
-<!-- This log was last generated on Fri, 17 Apr 2026 00:26:37 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 30 Apr 2026 17:21:11 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.5.0
+
+Thu, 30 Apr 2026 17:21:11 GMT
+
+### Minor changes
+
+- feat: change default attribute-name-strategy from none to camelCase (7559015+janechu@users.noreply.github.com)
+
 ## 0.4.0
 
 Fri, 17 Apr 2026 00:26:37 GMT
diff --git a/packages/fast-build/package.json b/packages/fast-build/package.json
index 7697e622bb4..07b1d25b710 100644
--- a/packages/fast-build/package.json
+++ b/packages/fast-build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-build",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "CLI and Node.js API for server-side rendering of FAST declarative HTML templates.",
   "author": {
     "name": "Microsoft",
diff --git a/packages/fast-element/CHANGELOG.json b/packages/fast-element/CHANGELOG.json
index 67633b148d8..bfc81127d05 100644
--- a/packages/fast-element/CHANGELOG.json
+++ b/packages/fast-element/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Thu, 30 Apr 2026 17:21:11 GMT",
+      "version": "2.10.4",
+      "tag": "@microsoft/fast-element_v2.10.4",
+      "comments": {
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "9f575eb973e92bdf8412d9b6df4ff2dc1e8672e4",
+            "comment": "chore: replace rollup-plugin-filesize with esbuild bundle size reporting"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 17 Apr 2026 00:26:37 GMT",
       "version": "2.10.4",
diff --git a/packages/fast-test-harness/package.json b/packages/fast-test-harness/package.json
index f490f9235b7..18cd2448522 100644
--- a/packages/fast-test-harness/package.json
+++ b/packages/fast-test-harness/package.json
@@ -52,7 +52,7 @@
     "@microsoft/fast-element": "*"
   },
   "peerDependencies": {
-    "@microsoft/fast-build": ">=0.4.0 <1.0.0",
+    "@microsoft/fast-build": ">=0.5.0 <1.0.0",
     "@microsoft/fast-element": ">=2.10.4 <=3.0.0-rc.1",
     "@playwright/test": ">=1.40.0",
     "vite": ">=7.0.0"
diff --git a/sites/website/package.json b/sites/website/package.json
index b9163820737..b0ccffe1f1b 100644
--- a/sites/website/package.json
+++ b/sites/website/package.json
@@ -29,7 +29,7 @@
     "@microsoft/api-documenter": "7.29.7"
   },
   "devDependencies": {
-    "@microsoft/fast-build": "^0.4.0",
+    "@microsoft/fast-build": "^0.5.0",
     "@microsoft/fast-element": "^3.0.0-rc.1"
   }
 }

From 979733c13500fe78e7108f57249b113aed3c1932 Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:35:54 -0700
Subject: [PATCH 08/14] feat: add build utilities and SSR renderer to
 fast-test-harness (#7469)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prepares `@microsoft/fast-test-harness` for publishing by adding comprehensive test coverage, build utilities, and accurate documentation.

- **Build utilities**: Added `dom-shim`, `generate-stylesheets`, `generate-templates`, and `generate-webui-templates` modules for extracting CSS and converting FAST Element `ViewTemplate` modules into `<f-template>` and WebUI-compatible `<template shadowrootmode="open">` HTML files.
- **SSR renderer**: Rewrote `createSSRRenderer` to use the `@microsoft/fast-build` WASM module for full expression evaluation and nested component support. Supports both monolithic (`packageName`) and per-component (`components`) package layouts.
- **CLI subcommands**: `fast-test-harness` now supports `serve` (default), `generate-templates`, `generate-stylesheets`, and `generate-webui-templates` subcommands.
- **Server rewrite**: Replaced Express with a plain `node:http` server, added in-memory fixture caching, concurrent request deduplication, and a Vite plugin for resolving bare CSS specifiers in SSR fixtures.
- **Test coverage**: Added 96 Node.js unit tests and 129 Playwright E2E tests covering all modules — `convertTemplate` tests use real FAST Element `html`/`ref`/`slotted`/`children` directives.
- **Documentation**: Updated README and DESIGN.md to reflect actual config values, CLI subcommands, exports, and added Mermaid diagrams for the CSR/SSR routing flow and SSR fixture generation sequence.

All 96 Node.js unit tests and 129 Playwright tests (across Chromium, Firefox, and WebKit) pass:

```
npm run test         # runs test:node && test:playwright
```

Key test areas:
- `convertTemplate` — exercises real FAST Element `html`, `ref`, `slotted`, `children`, event/property/boolean bindings
- `generateWebuiTemplates` — temp directory file I/O, format functions, `shadowrootdelegatesfocus` propagation
- `createSSRRenderer` — WASM rendering, monolithic vs per-component modes, theme stylesheet injection
- CSR/SSR fixtures — `setTemplate`, `updateTemplate`, `applyTokens`, `addStyleTag` buffering, custom state assertions

- [x] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

- Beachball configuration
- Package publish

(cherry picked from commit f076f361064d099e6efdc20a038b930070be818c)
---
 .github/workflows/ci-validate-platforms.yml   |   4 +-
 .github/workflows/ci-validate-pr.yml          |   4 +-
 .github/workflows/ci-webui-integration.yml    |   2 +-
 ...-c2765407-ced6-420a-b45d-af7f9a31c057.json |   7 +
 package-lock.json                             | 519 +++++++-------
 package.json                                  |   2 +-
 packages/fast-test-harness/DESIGN.md          | 214 +++---
 packages/fast-test-harness/README.md          | 121 +++-
 packages/fast-test-harness/package.json       |  37 +-
 .../fast-test-harness/playwright.config.d.ts  |   4 +
 ...wright.config.ts => playwright.config.mjs} |  21 +-
 packages/fast-test-harness/server.mjs         | 380 +++++++---
 .../src/build/dom-shim.test.ts                | 263 +++++++
 .../fast-test-harness/src/build/dom-shim.ts   | 157 +++++
 .../src/build/generate-stylesheets.test.ts    | 111 +++
 .../src/build/generate-stylesheets.ts         | 145 ++++
 .../src/build/generate-templates.test.ts      | 332 +++++++++
 .../src/build/generate-templates.ts           | 379 ++++++++++
 .../build/generate-webui-templates.test.ts    | 285 ++++++++
 .../src/build/generate-webui-templates.ts     | 212 ++++++
 .../src/fixtures/csr-fixture.pw.spec.ts       | 200 ++++++
 .../fast-test-harness/src/fixtures/index.ts   |   2 +-
 .../src/fixtures/ssr-fixture.pw.spec.ts       | 285 ++++++++
 packages/fast-test-harness/src/index.ts       |  22 +-
 packages/fast-test-harness/src/ssr/assets.ts  |  67 --
 .../fast-test-harness/src/ssr/render.test.ts  | 333 +++++++++
 packages/fast-test-harness/src/ssr/render.ts  | 655 +++++++++++++-----
 packages/fast-test-harness/start.mjs          | 244 ++++++-
 packages/fast-test-harness/test/index.html    |  11 +
 .../test/public/test-theme.css                |   7 +
 .../test/src/entry-client.ts                  |   9 +
 .../test/src/entry-server.ts                  |   9 +
 packages/fast-test-harness/test/src/main.ts   |   3 +
 .../src/test-widget/test-widget.styles.css    |   7 +
 .../src/test-widget/test-widget.template.html |   6 +
 .../test/src/test-widget/test-widget.ts       |  38 +
 packages/fast-test-harness/test/ssr.html      |  13 +
 .../fast-test-harness/test/vite.config.mjs    |   3 +
 packages/fast-test-harness/tsconfig.json      |   1 +
 packages/fast-test-harness/vite.config.d.ts   |   4 +
 packages/fast-test-harness/vite.config.mjs    |  14 +-
 41 files changed, 4320 insertions(+), 812 deletions(-)
 create mode 100644 change/@microsoft-fast-test-harness-c2765407-ced6-420a-b45d-af7f9a31c057.json
 create mode 100644 packages/fast-test-harness/playwright.config.d.ts
 rename packages/fast-test-harness/{playwright.config.ts => playwright.config.mjs} (58%)
 create mode 100644 packages/fast-test-harness/src/build/dom-shim.test.ts
 create mode 100644 packages/fast-test-harness/src/build/dom-shim.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-stylesheets.test.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-stylesheets.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-templates.test.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-templates.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-webui-templates.test.ts
 create mode 100644 packages/fast-test-harness/src/build/generate-webui-templates.ts
 create mode 100644 packages/fast-test-harness/src/fixtures/csr-fixture.pw.spec.ts
 create mode 100644 packages/fast-test-harness/src/fixtures/ssr-fixture.pw.spec.ts
 delete mode 100644 packages/fast-test-harness/src/ssr/assets.ts
 create mode 100644 packages/fast-test-harness/src/ssr/render.test.ts
 create mode 100644 packages/fast-test-harness/test/index.html
 create mode 100644 packages/fast-test-harness/test/public/test-theme.css
 create mode 100644 packages/fast-test-harness/test/src/entry-client.ts
 create mode 100644 packages/fast-test-harness/test/src/entry-server.ts
 create mode 100644 packages/fast-test-harness/test/src/main.ts
 create mode 100644 packages/fast-test-harness/test/src/test-widget/test-widget.styles.css
 create mode 100644 packages/fast-test-harness/test/src/test-widget/test-widget.template.html
 create mode 100644 packages/fast-test-harness/test/src/test-widget/test-widget.ts
 create mode 100644 packages/fast-test-harness/test/ssr.html
 create mode 100644 packages/fast-test-harness/test/vite.config.mjs
 create mode 100644 packages/fast-test-harness/vite.config.d.ts

diff --git a/.github/workflows/ci-validate-platforms.yml b/.github/workflows/ci-validate-platforms.yml
index 68615481900..b76f539ef1f 100644
--- a/.github/workflows/ci-validate-platforms.yml
+++ b/.github/workflows/ci-validate-platforms.yml
@@ -74,11 +74,11 @@ jobs:
         run: cargo install wasm-pack
 
       - name: Build workspaces
-        run: npx lage build ${{ github.event_name == 'pull_request' && '--since origin/main' || '' }} --allow-no-target-runs
+        run: npx lage build ${{ github.event_name == 'pull_request' && '--since origin/main' || '' }} --allow-no-target-runs --verbose
 
       - name: Install playwright dependencies and browsers
         run: |
           npx playwright install --with-deps
 
       - name: Run tests in all Packages
-        run: npx lage test:node test:playwright ${{ github.event_name == 'pull_request' && '--since origin/main' || '' }} --allow-no-target-runs
+        run: npx lage test:node test:playwright ${{ github.event_name == 'pull_request' && '--since origin/main' || '' }} --allow-no-target-runs --verbose
diff --git a/.github/workflows/ci-validate-pr.yml b/.github/workflows/ci-validate-pr.yml
index 3e12f8927f9..80612cbecd5 100644
--- a/.github/workflows/ci-validate-pr.yml
+++ b/.github/workflows/ci-validate-pr.yml
@@ -58,14 +58,14 @@ jobs:
       run: cargo install wasm-pack
 
     - name: Build workspaces
-      run: npx lage build ${{ github.event_name == 'pull_request' && format('--since origin/{0}', github.event.pull_request.base.ref) || '' }} --allow-no-target-runs
+      run: npx lage build ${{ github.event_name == 'pull_request' && format('--since origin/{0}', github.event.pull_request.base.ref) || '' }} --allow-no-target-runs --verbose
 
     - name: Install playwright dependencies and browsers
       run: |
         npx playwright install --with-deps
 
     - name: Testing unit tests
-      run: npx lage test:node test:chromium ${{ github.event_name == 'pull_request' && format('--since origin/{0}', github.event.pull_request.base.ref) || '' }} --allow-no-target-runs
+      run: npx lage test:node test:chromium ${{ github.event_name == 'pull_request' && format('--since origin/{0}', github.event.pull_request.base.ref) || '' }} --allow-no-target-runs --verbose
 
     - name: Testing final validation
       run: npm run test:validation
diff --git a/.github/workflows/ci-webui-integration.yml b/.github/workflows/ci-webui-integration.yml
index 2f90b381a41..971b14a0097 100644
--- a/.github/workflows/ci-webui-integration.yml
+++ b/.github/workflows/ci-webui-integration.yml
@@ -41,7 +41,7 @@ jobs:
       run: cargo install wasm-pack
 
     - name: Build workspaces
-      run: npm run build
+      run: npm run build -- --verbose
 
     - name: Install Playwright browsers
       run: npx playwright install --with-deps chromium
diff --git a/change/@microsoft-fast-test-harness-c2765407-ced6-420a-b45d-af7f9a31c057.json b/change/@microsoft-fast-test-harness-c2765407-ced6-420a-b45d-af7f9a31c057.json
new file mode 100644
index 00000000000..03024291dfc
--- /dev/null
+++ b/change/@microsoft-fast-test-harness-c2765407-ced6-420a-b45d-af7f9a31c057.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enhance SSR renderer and CLI with new template generation capabilities",
+  "packageName": "@microsoft/fast-test-harness",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/package-lock.json b/package-lock.json
index d9d59759b47..e7fe9311483 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "lage": "2.15.8",
         "lefthook": "2.1.4",
         "rollup": "4.59.0",
-        "typescript": "5.3.3",
+        "typescript": "5.5.4",
         "vite": "7.3.2",
         "yargs": "17.7.2"
       },
@@ -2861,7 +2861,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
@@ -2900,6 +2899,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -2909,6 +2909,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2922,6 +2923,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -2974,6 +2976,91 @@
         "node": ">=8"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.2.0.tgz",
+      "integrity": "sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "encoding-sniffer": "^0.2.1",
+        "htmlparser2": "^10.1.0",
+        "parse5": "^7.3.0",
+        "parse5-htmlparser2-tree-adapter": "^7.1.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^7.19.0",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -3177,6 +3264,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -3186,6 +3274,7 @@
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
       "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -3244,7 +3333,6 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
       "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0",
@@ -3261,7 +3349,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
       "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
@@ -3369,7 +3456,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
       "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.3.0",
@@ -3384,7 +3470,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -3409,7 +3494,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
       "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.3.0"
@@ -3425,7 +3509,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
       "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^2.0.0",
@@ -3440,6 +3523,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -3479,6 +3563,31 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/encoding-sniffer/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -3527,6 +3636,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3552,6 +3662,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -3922,6 +4033,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -3988,6 +4100,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -4012,6 +4125,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -4262,6 +4376,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4317,6 +4432,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4528,6 +4644,7 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
@@ -5104,6 +5221,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5370,7 +5488,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -5417,6 +5534,7 @@
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5545,6 +5663,55 @@
         "node": ">=14.13.0"
       }
     },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5786,6 +5953,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "forwarded": "0.2.0",
@@ -5814,6 +5982,7 @@
       "version": "6.14.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
       "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -6250,6 +6419,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -6269,6 +6439,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
       "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -6285,6 +6456,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -6303,6 +6475,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -6671,9 +6844,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -6707,6 +6880,15 @@
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
+      "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.19.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
@@ -6752,6 +6934,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -6831,6 +7014,54 @@
         }
       }
     },
+    "node_modules/vite/node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7115,7 +7346,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "express": "5.2.1"
+        "cheerio": "1.2.0"
       },
       "bin": {
         "fast-test-harness": "start.mjs"
@@ -7142,268 +7373,6 @@
         }
       }
     },
-    "packages/fast-test-harness/node_modules/accepts": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "packages/fast-test-harness/node_modules/body-parser": {
-      "version": "2.2.2",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/content-disposition": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
-    "packages/fast-test-harness/node_modules/debug": {
-      "version": "4.4.3",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "packages/fast-test-harness/node_modules/express": {
-      "version": "5.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.1",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/finalhandler": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/fresh": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "packages/fast-test-harness/node_modules/iconv-lite": {
-      "version": "0.7.2",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/media-typer": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "packages/fast-test-harness/node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "packages/fast-test-harness/node_modules/mime-db": {
-      "version": "1.54.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "packages/fast-test-harness/node_modules/mime-types": {
-      "version": "3.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/ms": {
-      "version": "2.1.3",
-      "license": "MIT"
-    },
-    "packages/fast-test-harness/node_modules/negotiator": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "packages/fast-test-harness/node_modules/raw-body": {
-      "version": "3.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "~3.1.2",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.7.0",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "packages/fast-test-harness/node_modules/send": {
-      "version": "1.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/serve-static": {
-      "version": "2.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "packages/fast-test-harness/node_modules/type-is": {
-      "version": "2.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "sites/benchmarks": {
       "name": "@microsoft/fast-bench",
       "version": "0.0.0",
diff --git a/package.json b/package.json
index aef48f503e3..40afb0e7115 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "lage": "2.15.8",
     "lefthook": "2.1.4",
     "rollup": "4.59.0",
-    "typescript": "5.3.3",
+    "typescript": "5.5.4",
     "vite": "7.3.2",
     "yargs": "17.7.2"
   },
diff --git a/packages/fast-test-harness/DESIGN.md b/packages/fast-test-harness/DESIGN.md
index 89f10fb72ec..933fcda7613 100644
--- a/packages/fast-test-harness/DESIGN.md
+++ b/packages/fast-test-harness/DESIGN.md
@@ -17,17 +17,11 @@ This document describes the internal architecture of the `@microsoft/fast-test-h
    - [CSR Request Flow](#csr-request-flow)
    - [SSR Request Flow](#ssr-request-flow)
    - [Caching and Deduplication](#caching-and-deduplication)
-6. [SSR Rendering Utilities](#ssr-rendering-utilities)
-   - [renderFixture](#renderfixture)
-   - [renderTemplate](#rendertemplate)
-   - [processDsdTemplate](#processdstemplate)
-   - [injectChildTemplates](#injectchildtemplates)
-   - [renderPreloadLinks](#renderpreloadlinks)
-7. [Asset Resolution](#asset-resolution)
-8. [Configuration Files](#configuration-files)
+6. [SSR Rendering](#ssr-rendering)
+7. [Configuration Files](#configuration-files)
    - [Playwright Configuration](#playwright-configuration)
    - [Vite Configuration](#vite-configuration)
-9. [Exports](#exports)
+8. [Exports](#exports)
 
 ---
 
@@ -40,24 +34,28 @@ This document describes the internal architecture of the `@microsoft/fast-test-h
 
 The mode is selected per test via `test.use({ ssr: true })` or globally via the `PLAYWRIGHT_TEST_SSR=true` environment variable.
 
-```
+```ts
 test("renders element", async ({ fastPage }) => {
     await fastPage.setTemplate({ attributes: { label: "Hello" } });
     await expect(fastPage.element).toBeVisible();
 });
-        │
-        ├── CSR path ──────────────────────────────────────────┐
-        │   page.goto("/")                                     │
-        │   page.evaluate() → inject HTML into <body>          │
-        │   waitForCustomElement() + waitForStability()        │
-        │                                                      │
-        └── SSR path ──────────────────────────────────────────┐
-            POST /generate-fixture { tagName, attributes, … } │
-            server: vite.ssrLoadModule("entry-server.js")      │
-            server: render(queryObj) → { template, fixture }   │
-            server: inject into ssr.html → write to temp/      │
-            page.goto("/ssr-<testId>.html")                    │
-            waitForStability()                                 │
+```
+
+Both modes use the same test API. The fixture handles routing internally:
+
+```mermaid
+flowchart TD
+    A["setTemplate(options)"] --> B{ssr?}
+    B -- CSR --> C["page.goto('/')"]
+    C --> D["page.evaluate() — inject HTML into body"]
+    D --> E["waitForCustomElement()"]
+    E --> F["waitForStability()"]
+    B -- SSR --> G["POST /generate-fixture"]
+    G --> H["Server: vite.ssrLoadModule('entry-server.js')"]
+    H --> I["Server: render(queryObj)"]
+    I --> J["Server: assemble ssr.html, cache in memory"]
+    J --> K["page.goto('/ssr-testId.html')"]
+    K --> F
 ```
 
 ---
@@ -66,17 +64,20 @@ test("renders element", async ({ fastPage }) => {
 
 | File | Role |
 |------|------|
-| `src/index.ts` | Package barrel — re-exports fixtures, assertions, and SSR utilities |
+| `src/index.ts` | Package barrel — re-exports fixtures, assertions, build utilities, and SSR renderer |
 | `src/fixtures/index.ts` | Extends Playwright's `test` with `fastPage` fixture and `expect` with custom assertions |
 | `src/fixtures/csr-fixture.ts` | `CSRFixture` class — client-side rendering fixture |
 | `src/fixtures/ssr-fixture.ts` | `SSRFixture` class — server-side rendering fixture (extends `CSRFixture`) |
 | `src/fixtures/assertions.ts` | Custom Playwright assertion `toHaveCustomState` |
-| `src/ssr/render.ts` | SSR rendering helpers: `renderFixture`, `renderTemplate`, `renderPreloadLinks` |
-| `src/ssr/assets.ts` | Asset resolution helpers: `readAsset`, `resolveAssetUrl` |
-| `src/ssr/entry-client.ts` | SSR client entrypoint that enables FAST Element hydration |
-| `server.mjs` | Express + Vite dev server — serves CSR pages and handles SSR fixture generation |
-| `start.mjs` | CLI entry point (`fast-test-harness` bin) — calls `startServer()` |
-| `playwright.config.ts` | Shared Playwright configuration (browsers, web server, test matching) |
+| `src/build/dom-shim.ts` | Minimal DOM shim for running FAST Element's `css` and `html` tagged templates in Node.js |
+| `src/build/generate-stylesheets.ts` | Extracts compiled FAST `ElementStyles` JS modules into plain `.css` files |
+| `src/build/generate-templates.ts` | Converts compiled FAST `ViewTemplate` JS modules into declarative `<f-template>` HTML files |
+| `src/build/generate-webui-templates.ts` | Converts compiled FAST `ViewTemplate` JS modules into WebUI-compatible declarative shadow DOM `<template>` HTML files |
+| `src/ssr/render.ts` | `createSSRRenderer` factory — scans for component build artifacts and uses the `@microsoft/fast-build` WASM module to produce SSR output |
+| `src/ssr/entry-client.ts` | SSR hydration entry point — defines `<f-template>` for the browser |
+| `server.mjs` | Node.js HTTP server with Vite middleware — serves CSR pages and handles SSR fixture generation |
+| `start.mjs` | CLI entry point (`fast-test-harness` bin) — supports subcommands (`serve`, `generate-templates`, `generate-stylesheets`, `generate-webui-templates`) and flags via `node:util` `parseArgs` |
+| `playwright.config.mjs` | Shared Playwright configuration (browsers, web server, test matching) |
 | `vite.config.mjs` | Shared Vite configuration (port, resolve conditions, build settings) |
 | `public/styles.css` | Base CSS reset served as a Vite public asset |
 
@@ -163,7 +164,7 @@ The assertion evaluates `el.matches(`:state(${state})`)` in the browser via `loc
 
 ## Server
 
-The server (`server.mjs`) is an Express application with Vite running in middleware mode. It handles both CSR page serving and SSR fixture generation.
+The server (`server.mjs`) is a plain Node.js HTTP server (using `node:http`) with Vite running in middleware mode. It handles both CSR page serving and SSR fixture generation.
 
 ### Consumer-Owned SSR Contract
 
@@ -183,21 +184,21 @@ The `startServer(cwd, root, configFile)` function accepts overrides for each pat
 |-----------|---------|-------------|
 | `cwd` | `process.cwd()` | Static file serving root |
 | `root` | `<cwd>/test` | Vite root (contains `index.html`, `ssr.html`) |
-| `configFile` | `<root>/vite.config.ts` | Vite config path |
+| `configFile` | Vite auto-discovery | Vite config path |
 
 ### Startup
 
-`startServer(cwd, root, configFile)` initializes:
+`startServer(cwd, root, configFile, options)` accepts an `options` object with `port`, `base`, and `debug` properties (falling back to `PORT`, `BASE`, and `FAST_DEBUG` environment variables, then defaults). It initializes:
 
-1. A `temp/` directory under `root` for writing SSR fixture files (cleaned on startup)
-2. A Vite dev server in middleware mode, configured to ignore the temp directory
-3. Express middleware stack: Vite middleware → static file serving from `cwd` → route handlers
+1. A Vite dev server in middleware mode, configured to ignore the temp directory and with a `fast-test-harness:resolve-css-links` plugin that resolves bare package CSS specifiers in `<link>` tags to `/@fs/` URLs
+2. A Node.js HTTP server with this request handling order: route handlers (`/generate-fixture`, `/ssr-*.html`) → static file serving from `cwd` → Vite middleware → HTML catch-all
+3. When `debug` is enabled: a `temp/` directory under `root` for writing SSR fixture HTML files (cleaned on startup, useful for post-failure inspection)
 
-The server listens on port `5273` by default (configurable via `PORT` environment variable).
+The server listens on `port` (default `3278`).
 
 ### CSR Request Flow
 
-The catch-all `*all` handler serves the Vite-transformed `index.html` for navigation requests (those with `Accept: text/html`). The transformed HTML is cached after the first request. Non-HTML requests (module imports, assets) fall through to Vite's middleware.
+After Vite's middleware processes module transforms and HMR, a fallback handler serves the Vite-transformed `index.html` for navigation requests (those with `Accept: text/html`). The transformed HTML is cached after the first request. Non-HTML requests that Vite doesn't handle receive a 404.
 
 ```
 Browser GET /
@@ -211,26 +212,31 @@ Browser GET /
 
 The `/generate-fixture` POST endpoint handles SSR fixture generation:
 
-```
-Browser POST /generate-fixture { testId, tagName, attributes, … }
-    → validate testId (required, alphanumeric + hyphens/underscores only)
-    → parse attributes and styles from JSON strings
-    → check pendingGenerations deduplication map
-    → read ssr.html template
-    → vite.transformIndexHtml() for module injection
-    → vite.ssrLoadModule("/src/entry-server.js")
-    → call render(body) → { template, fixture, preloadLinks }
-    → replace placeholders in ssr.html:
-        <!--fixturetitle--> → test title
-        <!--templates-->    → f-template HTML
-        <!--fixture-->      → rendered element HTML
-        <!--stylespreload--> → preload links + inline styles
-    → cache in fixtureCache Map
-    → write to temp/ssr-<testId>.html (for debugging)
-    → respond with { url: "/ssr-<testId>.html" }
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    participant V as Vite
+    participant E as entry-server.ts
+
+    B->>S: POST /generate-fixture { testId, tagName, … }
+    S->>S: Validate testId, parse attributes & styles
+    S->>S: Check pendingGenerations (dedup)
+    S->>S: Read ssr.html template
+    S->>V: ssrLoadModule("/src/entry-server.js")
+    V-->>S: entry-server module
+    S->>E: render(body)
+    E-->>S: { template, fixture, preloadLinks }
+    S->>S: Replace placeholders in ssr.html
+    S->>V: transformIndexHtml(url, assembled)
+    V-->>S: Transformed HTML
+    S->>S: Cache in fixtureCache
+    S-->>B: { url: "/ssr-testId.html" }
+    B->>S: GET /ssr-testId.html
+    S-->>B: Cached fixture HTML
 ```
 
-A dedicated `GET /ssr-:id.html` handler serves cached fixtures directly from memory, bypassing the filesystem.
+When `debug` is enabled, the server also writes fixtures to `temp/ssr-<testId>.html` for post-failure inspection.
 
 ### Caching and Deduplication
 
@@ -238,61 +244,50 @@ A dedicated `GET /ssr-:id.html` handler serves cached fixtures directly from mem
 |-------|---------|
 | `cachedIndexHtml` | Caches the Vite-transformed `index.html` for CSR — avoids re-reading and re-transforming on every navigation |
 | `fixtureCache` | Maps SSR fixture URLs to their rendered HTML — serves fixtures from memory without filesystem reads |
-| `pendingGenerations` | Deduplicates concurrent SSR generation requests for the same `testId` — if a generation is already in progress, subsequent requests await the same promise |
+| `pendingGenerations` | Deduplicates concurrent SSR generation requests for the same `testId` — if a generation is already in progress, subsequent requests await the same promise. This guards against retries of the same test dispatching overlapping requests before the first completes. |
 
 ---
 
-## SSR Rendering Utilities
-
-These functions in `src/ssr/render.ts` are used by consumer `entry-server.ts` modules to build SSR output.
-
-### renderFixture
-
-`renderFixture(queryObj, dsdTemplate?, styles?, templateData?, childTemplates?)` assembles the fixture element HTML.
-
-- If `queryObj.html` is present, uses it as the raw fixture HTML.
-- Otherwise, builds the element from `queryObj.tagName`, `queryObj.attributes` (parsed from JSON), and `queryObj.innerHTML`.
-- When a `dsdTemplate` is provided, it is processed through `processDsdTemplate` to resolve `{{placeholder}}` bindings from the element's attributes and `templateData`.
-- The processed DSD is injected inside the opening tag before the innerHTML.
-- If `childTemplates` is provided, DSD templates are injected into nested custom elements via `injectChildTemplates`.
+## SSR Rendering
 
-### renderTemplate
+The `src/ssr/render.ts` module exports `createSSRRenderer`, a factory that scans for component build artifacts (f-templates, stylesheets) and returns a `{ render }` object compatible with the server's `entry-server.ts` contract. It uses the `@microsoft/fast-build` WASM module to render f-templates into declarative shadow DOM on each request, with full expression evaluation and nested component support.
 
-`renderTemplate(rawTemplate, styles)` replaces `{{styles}}` in an f-template HTML string with a `<link rel="stylesheet">` tag. If no `{{styles}}` placeholder is found and a styles URL is provided, it inserts the link tag after the opening `<template>` tag.
+### createSSRRenderer
 
-### processDsdTemplate
+`createSSRRenderer(options: SSRRendererOptions)` returns `{ render(queryObj) => RenderResult }`.
 
-`processDsdTemplate(dsd, templateValues)` resolves `{{varName}}` placeholders in a DSD template string. It uses a character-scanning approach (not regex) to avoid O(n²) backtracking on untrusted input.
+**Options:**
 
-The function handles two contexts:
-
-| Context | Behavior |
-|---------|----------|
-| **Attribute binding** (`attr="{{varName}}"` or `?attr="{{varName}}"`) | Scans backwards from `{{` to find the attribute name and optional `?` boolean prefix. If the value is `undefined`, the entire attribute is removed. For boolean attributes (`?`), a truthy value emits the bare attribute name; falsy removes it. |
-| **Text content** (`{{varName}}` in element body) | Replaces with the stringified value, or empty string if `undefined`. |
-
-Attribute names are also normalized by stripping hyphens (e.g., `my-attr` also checks `myattr`) to support camelCase state properties bound to hyphenated HTML attributes.
-
-### injectChildTemplates
-
-`injectChildTemplates(html, childTemplates)` injects DSD templates into nested custom elements found in an HTML string. It uses a regex with a lookahead (`(?=[\s>/])`) to avoid partial matches on hyphenated names (e.g., `my-radio` does not match `my-radio-group`). Each child element's own attributes are extracted and passed to `processDsdTemplate`.
-
-### renderPreloadLinks
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `tagPrefix` | `string` | — | Tag name prefix for custom elements (e.g., `"fluent"`, `"mai"`) |
+| `packageName` | `string?` | — | Monolithic package name — scans subdirectories for component artifacts. Mutually exclusive with `components`. |
+| `components` | `ComponentRegistration[]?` | — | Explicit list of per-component packages. Mutually exclusive with `packageName`. |
+| `distDir` | `string?` | `"dist/esm"` | Artifact directory relative to the package root. Only used with `packageName`. |
+| `themeStylesheet` | `string?` | — | Stylesheet URL or server-relative path for a global theme stylesheet included in every SSR fixture. Used directly as the `<link>` tag's `href`. |
 
-`renderPreloadLinks(styles, tokensThemeUrl?)` generates `<link>` tags: a `stylesheet` link for the theme URL (if provided) and `preload` links for each style URL.
+**Supported layouts:**
 
----
+- **Monolithic package** (`packageName`): Scans `<packageRoot>/<distDir>` for `**/*.template.html` files, treating each parent directory as a component name. Resolves `<packageName>/<componentDir>/template.html` and `<packageName>/<componentDir>/styles.css` via the package's exports map.
+- **Per-component packages** (`components`): Uses an explicit `ComponentRegistration[]` array. Each entry maps a component name to an npm package, and resolves `<packageName>/template.html` and `<packageName>/styles.css`.
 
-## Asset Resolution
+**Initialization flow:**
 
-The `src/ssr/assets.ts` module provides two helpers for locating files in SSR `entry-server.ts` modules:
+1. Validates that `packageName` and `components` are not both provided (throws if so).
+2. Loads the `@microsoft/fast-build` WASM module (throws if not installed).
+3. Collects f-template and stylesheet artifacts for all components.
+4. Injects stylesheet `<link>` tags into f-templates (replaces `{{styles}}` placeholder or strips the marker when styles URL is empty).
+5. Parses f-templates into the WASM templates map (`tagName → inner template content`).
+6. Loads CEM default state per-package, keyed by tag name.
+7. Concatenates all styled f-templates for client hydration.
 
-| Function | Purpose |
-|----------|---------|
-| `readAsset(specifier)` | Reads a file as a UTF-8 string. Accepts bare package specifiers (resolved via `import.meta.resolve` through `package.json` exports maps) or filesystem paths (resolved relative to `process.cwd()`). |
-| `resolveAssetUrl(specifier, root?)` | Resolves a specifier to a server-relative URL path (starting with `/`) for use in `<link>` tags. The path is made relative to `root` (defaults to `process.cwd()`). |
+**Per-request `render(queryObj)` flow:**
 
-Both delegate to `resolveSpecifier`, which distinguishes bare specifiers from filesystem paths by checking whether the specifier starts with `.` or `/`.
+1. Builds entry HTML from `queryObj` — either raw HTML (`queryObj.html`) or a constructed element (`queryObj.tagName`, `queryObj.attributes`, `queryObj.innerHTML`). Attributes with `false`, `null`, or `undefined` values are omitted; other values are HTML-escaped.
+2. Builds state JSON from attributes (including hyphen-stripped variants for camelCase bindings).
+3. Calls the WASM `render_entry_with_templates()` to produce full HTML with declarative shadow DOM.
+4. Extracts `<body>` content from the rendered document.
+5. Returns `{ template, fixture, preloadLinks }`.
 
 ---
 
@@ -304,13 +299,14 @@ Both delegate to `resolveSpecifier`, which distinguishes bare specifiers from fi
 
 | Setting | Value |
 |---------|-------|
-| `retries` | `3` |
-| `fullyParallel` | `true` |
-| `reducedMotion` | `"reduce"` |
-| `testMatch` | `src/**/*.pw.spec.ts` |
+| `retries` | `3` in CI, `1` locally |
+| `timeout` | `10_000` in CI, `5_000` locally |
+| `fullyParallel` | `true` locally, `false` in CI |
+| `use.contextOptions.reducedMotion` | `"reduce"` |
+| `testMatch` | `**/*.pw.spec.ts` |
 | `reporter` | `"list"` |
-| `webServer.command` | `node start.mjs` |
-| `webServer.port` | `5273` |
+| `webServer.command` | `fast-test-harness` |
+| `webServer.port` | `3278` (configurable via `PORT` env var) |
 | `projects` | Chromium, Firefox, WebKit (Safari with `deviceScaleFactor: 1`) |
 
 ### Vite Configuration
@@ -321,7 +317,7 @@ Both delegate to `resolveSpecifier`, which distinguishes bare specifiers from fi
 |---------|-------|
 | `clearScreen` | `false` |
 | `resolve.conditions` | `["test"]` — enables the `test` condition in `package.json` exports maps, allowing packages to expose source files (`.ts`) directly to Vite instead of compiled output |
-| `server.port` | `5273` (from `PORT` env var) |
+| `server.port` | `3278` (from `PORT` env var) |
 | `server.strictPort` | `true` |
 | `build.minify` | `false` |
 | `build.sourcemap` | `true` |
@@ -332,10 +328,10 @@ Both delegate to `resolveSpecifier`, which distinguishes bare specifiers from fi
 
 | Specifier | Contents |
 |-----------|----------|
-| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `readAsset`, `resolveAssetUrl`, `renderFixture`, `renderTemplate` |
-| `@microsoft/fast-test-harness/server.mjs` | `startServer`, `app` |
-| `@microsoft/fast-test-harness/ssr/render.js` | `renderFixture`, `renderTemplate`, `renderPreloadLinks` |
-| `@microsoft/fast-test-harness/ssr/assets.js` | `readAsset`, `resolveAssetUrl` |
-| `@microsoft/fast-test-harness/playwright.config.ts` | Shared Playwright configuration |
+| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `createSSRRenderer`, `ComponentRegistration`, `RenderResult`, `SSRRendererOptions`, build utilities (`installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates`) |
+| `@microsoft/fast-test-harness/server.mjs` | `startServer` |
+| `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `ComponentRegistration`, `RenderResult`, `SSRRendererOptions`, `renderTemplate`, `buildEntryHtml`, `buildState`, `parseDefaultValue` |
+| `@microsoft/fast-test-harness/build/*.js` | Build utilities: `installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates` |
+| `@microsoft/fast-test-harness/playwright.config.mjs` | Shared Playwright configuration |
 | `@microsoft/fast-test-harness/vite.config.mjs` | Shared Vite configuration |
 | `@microsoft/fast-test-harness/public/*` | Static assets (base CSS reset) |
diff --git a/packages/fast-test-harness/README.md b/packages/fast-test-harness/README.md
index d0c3138d743..b8a71e90ec2 100644
--- a/packages/fast-test-harness/README.md
+++ b/packages/fast-test-harness/README.md
@@ -133,9 +133,13 @@ import { enableHydration } from "@microsoft/fast-element/hydration.js";
 
 enableHydration();
 
-// Load all define-async modules
-const modules = import.meta.glob("../../src/*/define-async.{ts,js}");
-Promise.all(Object.values(modules).map(m => m()));
+import { RenderableFASTElement } from "@microsoft/fast-html";
+import { MyButton, definition } from "../../src/button/index.js";
+
+RenderableFASTElement(MyButton).defineAsync({
+    name: definition.name,
+    templateOptions: "defer-and-hydrate",
+});
 ```
 
 **`entry-server.ts`** exports a `render()` function that the server calls for each `setTemplate()` request. It returns three strings that get injected into `ssr.html`:
@@ -148,35 +152,47 @@ export function render(queryObj: Record<string, string>): {
 };
 ```
 
-Each component needs three build artifacts for SSR: an `<f-template>` (`.template.html`), a DSD template (`.template-dsd.html`), and optionally a stylesheet (`.styles.css`). Use `renderFixture` and `renderTemplate` from the harness to assemble the output:
+Use `createSSRRenderer` from the harness to build the `render()` function. It scans for component build artifacts (f-templates, stylesheets) and uses the `@microsoft/fast-build` WASM renderer to produce declarative shadow DOM on each request.
+
+**Multi-component package** (all components in one package):
 
 ```ts
-import { readAsset, resolveAssetUrl } from "@microsoft/fast-test-harness/ssr/assets.js";
-import { renderFixture, renderTemplate } from "@microsoft/fast-test-harness/ssr/render.js";
+import { createSSRRenderer } from "@microsoft/fast-test-harness/ssr/render.js";
+
+const { render } = createSSRRenderer({
+    packageName: "@my-scope/web-components",
+    tagPrefix: "my",
+});
 
-const fTemplate = readAsset("@my-scope/button/template.html");
-const dsd = readAsset("@my-scope/button/template-dsd.html");
-const styles = resolveAssetUrl("@my-scope/button/styles.css");
+export { render };
+```
+
+**Per-component packages** (each component is a separate npm package):
+
+```ts
+import { createSSRRenderer } from "@microsoft/fast-test-harness/ssr/render.js";
+
+const { render } = createSSRRenderer({
+    tagPrefix: "my",
+    components: [
+        { name: "button", packageName: "@my-scope/button" },
+        { name: "checkbox", packageName: "@my-scope/checkbox" },
+    ],
+});
 
-export function render(queryObj: Record<string, string> = {}) {
-    return {
-        template: renderTemplate(fTemplate, styles),
-        fixture: renderFixture(queryObj, dsd, styles),
-        preloadLinks: "",
-    };
-}
+export { render };
 ```
 
 ## Server
 
-The package includes an Express + Vite server that handles both CSR page serving and SSR fixture generation. Run it directly or let Playwright manage it via `webServer`:
+The package includes a Node.js HTTP server with Vite middleware that handles both CSR page serving and SSR fixture generation. Run it directly or let Playwright manage it via `webServer`:
 
 ```ts
 // playwright.config.ts
 export default defineConfig({
     webServer: {
         command: "fast-test-harness",
-        port: 5173,
+        port: 3278,
         reuseExistingServer: true,
     },
 });
@@ -186,38 +202,71 @@ For custom setup, import `startServer`:
 
 ```ts
 import { startServer } from "@microsoft/fast-test-harness/server.mjs";
-await startServer(process.cwd(), "./test", "./test/vite.config.ts");
+await startServer(process.cwd(), "./test", "./test/vite.config.ts", {
+    port: 4000,
+    debug: true,
+});
 ```
 
 | Parameter | Default | Description |
-|-----------|---------|-------------|
+| --------- | ------- | ----------- |
 | `cwd` | `process.cwd()` | Static file serving root |
 | `root` | `<cwd>/test` | Vite root (contains `index.html`, `ssr.html`) |
-| `configFile` | `<root>/vite.config.ts` | Vite config path |
+| `configFile` | Vite auto-discovery | Vite config path |
+| `options.port` | `3278` | Server port |
+| `options.base` | `/` | Base URL path |
+| `options.debug` | `false` | Write SSR fixtures to `temp/` for inspection |
 
-| Environment variable | Default | Description |
-|---------------------|---------|-------------|
-| `PORT` | `5173` | Server port |
-| `BASE` | `/` | Base URL path |
-| `PLAYWRIGHT_TEST_SSR` | — | Set `"true"` for SSR mode |
+### CLI flags
 
-## Rendering utilities
+```
+fast-test-harness [command] [options]
+
+Commands:
+  serve                    Start the test harness dev server (default)
+  generate-templates       Generate <f-template> HTML files from compiled templates
+  generate-stylesheets     Generate CSS files from compiled ElementStyles
+  generate-webui-templates Generate WebUI-compatible DSD templates
+
+Serve options:
+  -p, --port <number>    Server port (default: 3278)
+  -b, --base <path>      Base URL path (default: /)
+  -r, --root <path>      Vite root directory (default: <cwd>/test)
+  -c, --config <path>    Vite config file path (default: Vite auto-discovery)
+  -d, --debug            Write SSR fixtures to temp/ for inspection
+  -v, --version          Show version number
+  -h, --help             Show help message
+```
+
+CLI flags take precedence over environment variables.
 
-**`renderFixture(queryObj, dsdTemplate?, styles?, templateData?, childTemplates?)`** builds the fixture element HTML. Injects the DSD template inside the element when provided. `childTemplates` is a `Record<tagName, dsdHtml>` that injects DSD into nested custom elements found in the innerHTML or raw HTML.
+| Environment variable | Default | Description |
+| -------------------- | ------- | ----------- |
+| `PORT` | `3278` | Server port (overridden by `--port`) |
+| `BASE` | `/` | Base URL path (overridden by `--base`) |
+| `FAST_DEBUG` | — | Set `"true"` to enable debug mode (overridden by `--debug`) |
+| `PLAYWRIGHT_TEST_SSR` | — | Set `"true"` for SSR mode |
 
-**`renderTemplate(rawTemplate, styles)`** replaces `{{styles}}` in an f-template HTML string with a `<link>` tag for the given stylesheet URL.
+## SSR renderer
 
-**`readAsset(specifier)`** reads a file as UTF-8 from a package export path or filesystem path using `import.meta.resolve`.
+**`createSSRRenderer(options)`** scans for component build artifacts and returns a `{ render }` object compatible with the server's `entry-server.ts` contract. It uses the `@microsoft/fast-build` WASM module to render f-templates into declarative shadow DOM.
 
-**`resolveAssetUrl(specifier, root?)`** resolves a specifier to a server-relative URL path for use in `<link>` tags.
+| Option | Type | Description |
+|--------|------|-------------|
+| `tagPrefix` | `string` | Tag name prefix for custom elements (e.g., `"fluent"`, `"mai"`) |
+| `packageName` | `string?` | Monolithic package name — scans subdirectories for component artifacts. Mutually exclusive with `components`. |
+| `components` | `ComponentRegistration[]?` | Explicit list of per-component packages. Mutually exclusive with `packageName`. |
+| `distDir` | `string?` | Artifact directory relative to the package root (default: `"dist/esm"`). Only used with `packageName`. |
+| `themeStylesheet` | `string?` | URL or package specifier for a global theme stylesheet. |
 
 ## Exports
 
 | Specifier | Contents |
 |-----------|----------|
-| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `readAsset`, `resolveAssetUrl`, `renderFixture`, `renderTemplate` |
-| `@microsoft/fast-test-harness/server.mjs` | `startServer`, `app` |
-| `@microsoft/fast-test-harness/ssr/entry-client.js` | Enables FAST Element hydration for SSR pages |
-| `@microsoft/fast-test-harness/ssr/render.js` | `renderFixture`, `renderTemplate`, `renderPreloadLinks` |
-| `@microsoft/fast-test-harness/ssr/assets.js` | `readAsset`, `resolveAssetUrl` |
+| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `createSSRRenderer`, build utilities |
+| `@microsoft/fast-test-harness/server.mjs` | `startServer` |
+| `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `ComponentRegistration`, `RenderResult`, `SSRRendererOptions` |
+| `@microsoft/fast-test-harness/build/*.js` | `installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates` |
+| `@microsoft/fast-test-harness/playwright.config.mjs` | Shared Playwright configuration |
+| `@microsoft/fast-test-harness/vite.config.mjs` | Shared Vite configuration |
 | `@microsoft/fast-test-harness/public/*` | Static assets (base CSS) |
diff --git a/packages/fast-test-harness/package.json b/packages/fast-test-harness/package.json
index 18cd2448522..6c426c99b3b 100644
--- a/packages/fast-test-harness/package.json
+++ b/packages/fast-test-harness/package.json
@@ -1,6 +1,5 @@
 {
   "name": "@microsoft/fast-test-harness",
-  "private": true,
   "version": "0.0.1",
   "author": {
     "name": "Microsoft",
@@ -23,29 +22,51 @@
   "exports": {
     ".": {
       "types": "./dist/dts/index.d.ts",
-      "test": "./src/index.ts",
       "default": "./dist/esm/index.js"
     },
-    "./vite.config.mjs": {
-      "default": "./vite.config.mjs"
+    "./build/*.js": {
+      "types": "./dist/dts/build/*.d.ts",
+      "default": "./dist/esm/build/*.js"
     },
     "./ssr/*.js": {
       "types": "./dist/dts/ssr/*.d.ts",
-      "test": "./src/ssr/*.ts",
       "default": "./dist/esm/ssr/*.js"
     },
-    "./playwright.config.ts": "./playwright.config.ts",
+    "./playwright.config.mjs": {
+      "types": "./playwright.config.d.ts",
+      "default": "./playwright.config.mjs"
+    },
     "./public/*": "./public/*",
+    "./template.html": "./test/src/test-widget/test-widget.template.html",
+    "./styles.css": "./test/src/test-widget/test-widget.styles.css",
     "./server.mjs": "./server.mjs",
     "./start.mjs": "./start.mjs",
+    "./vite.config.mjs": {
+      "types": "./vite.config.d.ts",
+      "default": "./vite.config.mjs"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
+    "clean": "clean dist temp test-results",
     "build": "npm run build:tsc",
-    "build:tsc": "tsgo -p tsconfig.build.json"
+    "build:tsc": "tsgo -p tsconfig.build.json",
+    "test": "npm run test:node && npm run test:playwright",
+    "test:node": "node --test --experimental-test-isolation=none \"**/*.test.ts\"",
+    "test:playwright": "playwright test"
   },
+  "files": [
+    "dist",
+    "playwright.config.mjs",
+    "playwright.config.d.ts",
+    "public",
+    "server.mjs",
+    "start.mjs",
+    "vite.config.mjs",
+    "vite.config.d.ts"
+  ],
   "dependencies": {
-    "express": "5.2.1"
+    "cheerio": "1.2.0"
   },
   "devDependencies": {
     "@microsoft/fast-build": "*",
diff --git a/packages/fast-test-harness/playwright.config.d.ts b/packages/fast-test-harness/playwright.config.d.ts
new file mode 100644
index 00000000000..4810f2a0886
--- /dev/null
+++ b/packages/fast-test-harness/playwright.config.d.ts
@@ -0,0 +1,4 @@
+declare module "@microsoft/fast-test-harness/playwright.config.mjs" {
+    const config: import("@playwright/test").PlaywrightTestConfig;
+    export default config;
+}
diff --git a/packages/fast-test-harness/playwright.config.ts b/packages/fast-test-harness/playwright.config.mjs
similarity index 58%
rename from packages/fast-test-harness/playwright.config.ts
rename to packages/fast-test-harness/playwright.config.mjs
index 9e678c9d5eb..81f665c5440 100644
--- a/packages/fast-test-harness/playwright.config.ts
+++ b/packages/fast-test-harness/playwright.config.mjs
@@ -1,9 +1,14 @@
 import { defineConfig, devices } from "@playwright/test";
 
+const CI = process.env.CI === "true";
+const PORT = process.env.PORT ? Number(process.env.PORT) : 3278;
+
 export default defineConfig({
-    retries: 3,
-    fullyParallel: true,
+    retries: CI ? 3 : 1,
+    timeout: CI ? 10_000 : 5_000,
+    fullyParallel: !CI,
     use: {
+        baseURL: `http://localhost:${PORT}`,
         contextOptions: {
             reducedMotion: "reduce",
         },
@@ -20,12 +25,14 @@ export default defineConfig({
         },
     ],
     reporter: "list",
-    testMatch: "src/**/*.pw.spec.ts",
+    testMatch: "**/*.pw.spec.ts",
     webServer: {
-        command: "node start.mjs",
-        port: 5273,
+        command: "fast-test-harness",
+        port: PORT,
+        env: {
+            ...process.env,
+            PORT: PORT.toString(),
+        },
         reuseExistingServer: true,
-        stdout: "pipe",
-        stderr: "pipe",
     },
 });
diff --git a/packages/fast-test-harness/server.mjs b/packages/fast-test-harness/server.mjs
index 2dec893b9a5..64e34467f22 100644
--- a/packages/fast-test-harness/server.mjs
+++ b/packages/fast-test-harness/server.mjs
@@ -1,24 +1,132 @@
 import fs from "node:fs/promises";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import express from "express";
+import { createServer as createHttpServer } from "node:http";
+import { extname, isAbsolute, relative, resolve } from "node:path";
+import { load } from "cheerio";
+
+const MIME_TYPES = {
+    ".html": "text/html",
+    ".js": "application/javascript",
+    ".mjs": "application/javascript",
+    ".css": "text/css",
+    ".json": "application/json",
+    ".wasm": "application/wasm",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".gif": "image/gif",
+    ".ico": "image/x-icon",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+    ".ttf": "font/ttf",
+};
+
+/**
+ * Read the full request body as a string.
+ */
+function readBody(req) {
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        req.on("data", chunk => chunks.push(chunk));
+        req.on("end", () => resolve(Buffer.concat(chunks).toString()));
+        req.on("error", reject);
+    });
+}
 
-const __dirname = fileURLToPath(dirname(import.meta.url));
+/**
+ * Send a JSON response.
+ */
+function jsonResponse(res, statusCode, data) {
+    const body = JSON.stringify(data);
+    res.writeHead(statusCode, {
+        "Content-Type": "application/json",
+        "Content-Length": Buffer.byteLength(body),
+    });
+    res.end(body);
+}
 
-const PORT = process.env.PORT || 5273;
-const base = process.env.BASE || "/";
+/**
+ * Send an HTML response.
+ */
+function htmlResponse(res, statusCode, html) {
+    res.writeHead(statusCode, {
+        "Content-Type": "text/html",
+        "Content-Length": Buffer.byteLength(html),
+    });
+    res.end(html);
+}
+
+/**
+ * Try to serve a static file from `root`. Returns true if served.
+ */
+async function tryServeStatic(req, res, root) {
+    const urlPath = new URL(req.url, "http://localhost").pathname;
+    const filePath = resolve(root, `.${urlPath}`);
+
+    // Prevent path traversal — reject if the resolved path escapes root.
+    const rel = relative(root, filePath);
+    if (rel.startsWith("..") || isAbsolute(rel)) {
+        return false;
+    }
+
+    try {
+        const stat = await fs.stat(filePath);
+        if (!stat.isFile()) {
+            return false;
+        }
+        const ext = extname(filePath);
+        const mime = MIME_TYPES[ext] || "application/octet-stream";
+        const content = await fs.readFile(filePath);
+        res.writeHead(200, {
+            "Content-Type": mime,
+            "Content-Length": content.length,
+        });
+        res.end(content);
+        return true;
+    } catch {
+        return false;
+    }
+}
 
-export const app = express();
+export async function startServer(cwd = process.cwd(), root, configFile, options = {}) {
+    const {
+        port = process.env.PORT ? Number(process.env.PORT) : 3278,
+        base = process.env.BASE || "/",
+        debug = process.env.FAST_DEBUG === "true",
+    } = options;
 
-export async function startServer(cwd = process.cwd(), root, configFile) {
     root = root ?? resolve(cwd, "./test");
-    configFile = configFile ?? resolve(root, "vite.config.ts");
+
+    try {
+        await fs.access(root);
+    } catch {
+        console.error(
+            `Error: Vite root directory does not exist: ${root}\n` +
+                `  Use --root to specify a different directory, or run from a package with a test/ folder.`,
+        );
+        process.exit(1);
+    }
+
+    if (configFile) {
+        try {
+            await fs.access(configFile);
+        } catch {
+            console.error(
+                `Error: Vite config file not found: ${configFile}\n` +
+                    `  Use --config to specify a different config file.`,
+            );
+            process.exit(1);
+        }
+    }
+
     const indexPath = resolve(root, "./index.html");
 
-    const tempDir = resolve(root, "temp");
-    await fs.rm(tempDir, { recursive: true, force: true });
-    await fs.mkdir(tempDir, { recursive: true });
-    const realTempDir = await fs.realpath(tempDir);
+    let realTempDir;
+    if (debug) {
+        const tempDir = resolve(root, "temp");
+        await fs.rm(tempDir, { recursive: true, force: true });
+        await fs.mkdir(tempDir, { recursive: true });
+        realTempDir = await fs.realpath(tempDir);
+    }
 
     const pendingGenerations = new Map();
     let cachedIndexHtml = null;
@@ -28,7 +136,7 @@ export async function startServer(cwd = process.cwd(), root, configFile) {
 
     const vite = await createServer({
         root,
-        configFile,
+        ...(configFile && { configFile }),
         server: {
             middlewareMode: true,
             watch: {
@@ -36,128 +144,174 @@ export async function startServer(cwd = process.cwd(), root, configFile) {
             },
         },
         appType: "custom",
-        publicDir: resolve(__dirname, "./public"),
+        plugins: [
+            {
+                name: "fast-test-harness:resolve-css-links",
+                transformIndexHtml: {
+                    order: "pre",
+                    async handler(html) {
+                        const $ = load(html, {
+                            xmlMode: false,
+                            decodeEntities: false,
+                        });
+                        let changed = false;
+
+                        for (const el of $("link[href$='.css']").toArray()) {
+                            const href = $(el).attr("href");
+                            if (
+                                !href ||
+                                href.startsWith("/") ||
+                                href.startsWith(".") ||
+                                href.startsWith("http")
+                            ) {
+                                continue;
+                            }
+                            const resolved = await vite.pluginContainer.resolveId(
+                                href,
+                                root,
+                            );
+                            if (resolved?.id) {
+                                $(el).attr("href", `/@fs/${resolved.id}`);
+                                changed = true;
+                            }
+                        }
+
+                        return changed ? $.html() : html;
+                    },
+                },
+            },
+        ],
     });
 
-    app.use(vite.middlewares);
+    const server = createHttpServer(async (req, res) => {
+        const url = new URL(req.url, "http://localhost");
+        const pathname = url.pathname;
 
-    app.use(express.static(cwd));
+        // POST /generate-fixture — SSR fixture generation.
+        if (req.method === "POST" && pathname === "/generate-fixture") {
+            try {
+                const body = JSON.parse(await readBody(req));
 
-    app.post("/generate-fixture", express.json(), async (req, res) => {
-        try {
-            if (!req.body.testId) {
-                throw new Error("testId is required");
-            }
+                if (!body.testId) {
+                    throw new Error("testId is required");
+                }
 
-            if (!/^[a-z0-9_-]+$/i.test(req.body.testId)) {
-                throw new Error("testId contains invalid characters");
-            }
+                if (!/^[a-z0-9_-]+$/i.test(body.testId)) {
+                    throw new Error("testId contains invalid characters");
+                }
 
-            if (req.body.attributes) {
-                req.body.attributes = JSON.parse(req.body.attributes);
-            }
+                if (body.attributes) {
+                    body.attributes = JSON.parse(body.attributes);
+                }
 
-            if (req.body.styles) {
-                req.body.styles = JSON.parse(req.body.styles);
-            }
+                if (body.styles) {
+                    body.styles = JSON.parse(body.styles);
+                }
 
-            const testId = req.body.testId;
-            const filename = `ssr-${testId}.html`;
-            const filePath = resolve(realTempDir, filename);
+                const testId = body.testId;
+                const filename = `ssr-${testId}.html`;
 
-            const url = `/${filename}`;
+                const fixtureUrl = `/${filename}`;
 
-            if (pendingGenerations.has(filename)) {
-                await pendingGenerations.get(filename);
-                return res.status(200).json({ url });
-            }
+                if (pendingGenerations.has(filename)) {
+                    await pendingGenerations.get(filename);
+                    return jsonResponse(res, 200, { url: fixtureUrl });
+                }
 
-            const generateTask = (async () => {
-                const templateFile = await fs.readFile(
-                    resolve(root, "./ssr.html"),
-                    "utf-8",
-                );
-                const page = await vite.transformIndexHtml(url, templateFile);
-
-                const { render } = await vite.ssrLoadModule("/src/entry-server.js");
-
-                const { template, fixture, preloadLinks } = render(req.body);
-
-                const styleTags = (req.body.styles || [])
-                    .map(s => `<style>${s}</style>`)
-                    .join("\n");
-
-                const html = page
-                    .replace(
-                        "<!--fixturetitle-->",
-                        () => req.body.testTitle || "FAST Test Harness (SSR)",
-                    )
-                    .replace("<!--templates-->", () => template ?? "")
-                    .replace("<!--fixture-->", () => fixture ?? "")
-                    .replace(
-                        "<!--stylespreload-->",
-                        () => `${preloadLinks ?? ""}${styleTags}`,
+                const generateTask = (async () => {
+                    const templateFile = await fs.readFile(
+                        resolve(root, "./ssr.html"),
+                        "utf-8",
                     );
 
-                fixtureCache.set(url, html);
-
-                // Write to disk for debugging; served from cache above.
-                await fs.writeFile(filePath, html, "utf-8");
-            })();
-
-            pendingGenerations.set(filename, generateTask);
-
-            try {
-                await generateTask;
-                res.status(200).json({ url });
-            } finally {
-                pendingGenerations.delete(filename);
+                    const { render } = await vite.ssrLoadModule("/src/entry-server.js");
+
+                    const { template, fixture, preloadLinks } = render(body);
+
+                    const styleTags = (body.styles || [])
+                        .map(s => `<style>${s}</style>`)
+                        .join("\n");
+
+                    const assembled = templateFile
+                        .replace(
+                            "<!--fixturetitle-->",
+                            () => body.testTitle || "FAST Test Harness (SSR)",
+                        )
+                        .replace("<!--templates-->", () => template ?? "")
+                        .replace("<!--fixture-->", () => fixture ?? "")
+                        .replace(
+                            "<!--stylespreload-->",
+                            () => `${preloadLinks ?? ""}${styleTags}`,
+                        );
+
+                    const html = await vite.transformIndexHtml(fixtureUrl, assembled);
+
+                    fixtureCache.set(fixtureUrl, html);
+
+                    if (debug) {
+                        const filePath = resolve(realTempDir, filename);
+                        await fs.writeFile(filePath, html, "utf-8");
+                    }
+                })();
+
+                pendingGenerations.set(filename, generateTask);
+
+                try {
+                    await generateTask;
+                    jsonResponse(res, 200, { url: fixtureUrl });
+                } finally {
+                    pendingGenerations.delete(filename);
+                }
+            } catch (e) {
+                vite?.ssrFixStacktrace?.(e);
+                console.log(e.stack);
+                res.writeHead(500).end("Internal Server Error");
             }
-        } catch (e) {
-            vite?.ssrFixStacktrace?.(e);
-            console.log(e.stack);
-            res.status(500).end("Internal Server Error");
+            return;
         }
-    });
 
-    // Serve SSR fixtures from cache without hitting the filesystem.
-    app.get("/ssr-:id.html", (req, res, next) => {
-        const url = req.path;
-        const cached = fixtureCache.get(url);
-        if (cached) {
-            return res.status(200).set({ "Content-Type": "text/html" }).send(cached);
+        // GET /ssr-*.html — serve cached SSR fixtures.
+        if (req.method === "GET" && /^\/ssr-[^/]+\.html$/.test(pathname)) {
+            const cached = fixtureCache.get(pathname);
+            if (cached) {
+                return htmlResponse(res, 200, cached);
+            }
         }
-        next();
-    });
 
-    // This server is a Playwright test harness, not a production service.
-    // It only serves localhost during test runs (local and CI). Rate limiting
-    // is unnecessary.
-    app.use("*all", async (req, res, next) => {
-        // Only serve the HTML shell for navigation requests, not for
-        // module/asset requests that Vite's middleware didn't handle.
-        const accept = req.headers.accept || "";
-        if (!accept.includes("text/html")) {
-            return next();
+        // Try static files from cwd.
+        if (req.method === "GET" && (await tryServeStatic(req, res, cwd))) {
+            return;
         }
 
-        try {
-            const url = req.originalUrl.replace(base, "");
-
-            if (!cachedIndexHtml) {
-                const indexFile = await fs.readFile(indexPath, "utf-8");
-                cachedIndexHtml = await vite.transformIndexHtml(url, indexFile);
+        // Delegate to Vite's middleware (module transforms, HMR, etc.).
+        // Vite handles its own routes; for anything left over, serve
+        // the HTML shell for navigation requests.
+        vite.middlewares(req, res, async () => {
+            const accept = req.headers.accept || "";
+            if (!accept.includes("text/html")) {
+                res.writeHead(404).end();
+                return;
             }
 
-            res.status(200).set({ "Content-Type": "text/html" }).send(cachedIndexHtml);
-        } catch (e) {
-            vite?.ssrFixStacktrace?.(e);
-            console.log(e.stack);
-            res.status(500).end("Internal Server Error");
-        }
+            try {
+                if (!cachedIndexHtml) {
+                    const indexFile = await fs.readFile(indexPath, "utf-8");
+                    cachedIndexHtml = await vite.transformIndexHtml(
+                        req.url || "/",
+                        indexFile,
+                    );
+                }
+
+                htmlResponse(res, 200, cachedIndexHtml);
+            } catch (e) {
+                vite?.ssrFixStacktrace?.(e);
+                console.log(e.stack);
+                res.writeHead(500).end("Internal Server Error");
+            }
+        });
     });
 
-    app.listen(PORT, () => {
-        console.log(`Server started at http://localhost:${PORT}`);
+    server.listen(port, () => {
+        console.log(`Server started at http://localhost:${port}`);
     });
 }
diff --git a/packages/fast-test-harness/src/build/dom-shim.test.ts b/packages/fast-test-harness/src/build/dom-shim.test.ts
new file mode 100644
index 00000000000..a40baf593c5
--- /dev/null
+++ b/packages/fast-test-harness/src/build/dom-shim.test.ts
@@ -0,0 +1,263 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+// Each test needs a clean globalThis, so we tear down the shim between tests.
+function teardownShim() {
+    for (const key of [
+        "Node",
+        "Element",
+        "HTMLElement",
+        "Document",
+        "CustomEvent",
+        "CSSStyleSheet",
+        "ShadowRoot",
+        "CustomElementRegistry",
+        "MutationObserver",
+        "MediaQueryList",
+        "matchMedia",
+        "document",
+        "customElements",
+        "window",
+        "CSS",
+    ]) {
+        delete (globalThis as any)[key];
+    }
+}
+
+test.describe("installDomShim", () => {
+    test.beforeEach(() => {
+        teardownShim();
+    });
+
+    async function loadShim() {
+        // Dynamic import so each test gets a fresh evaluation context
+        // after globalThis is cleaned.
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    }
+
+    test("should assign globals on first call", async () => {
+        await loadShim();
+
+        assert.ok((globalThis as any).window !== undefined);
+        assert.ok((globalThis as any).document !== undefined);
+        assert.ok((globalThis as any).customElements !== undefined);
+        assert.ok((globalThis as any).Node !== undefined);
+        assert.ok((globalThis as any).Element !== undefined);
+        assert.ok((globalThis as any).HTMLElement !== undefined);
+        assert.ok((globalThis as any).CSSStyleSheet !== undefined);
+        assert.ok((globalThis as any).MutationObserver !== undefined);
+        assert.ok((globalThis as any).matchMedia !== undefined);
+    });
+
+    test("should be idempotent when window is already defined", async () => {
+        const sentinel = { __sentinel: true };
+        (globalThis as any).window = sentinel;
+
+        await loadShim();
+
+        assert.strictEqual((globalThis as any).window, sentinel);
+        assert.strictEqual((globalThis as any).document, undefined);
+    });
+
+    test("should set window to globalThis", async () => {
+        await loadShim();
+
+        assert.strictEqual((globalThis as any).window, globalThis);
+    });
+
+    test("should provide CSS.supports that returns true", async () => {
+        await loadShim();
+
+        assert.strictEqual((globalThis as any).CSS.supports("display", "flex"), true);
+    });
+
+    test("should not overwrite an existing CSS global", async () => {
+        const existing = { supports: () => false };
+        (globalThis as any).CSS = existing;
+
+        await loadShim();
+
+        assert.strictEqual((globalThis as any).CSS, existing);
+    });
+});
+
+test.describe("ShimHTMLElement", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should support setAttribute / getAttribute / hasAttribute", () => {
+        const el = new (globalThis as any).HTMLElement();
+
+        assert.strictEqual(el.hasAttribute("id"), false);
+        assert.strictEqual(el.getAttribute("id"), null);
+
+        el.setAttribute("id", "test");
+        assert.strictEqual(el.hasAttribute("id"), true);
+        assert.strictEqual(el.getAttribute("id"), "test");
+    });
+
+    test("should support removeAttribute", () => {
+        const el = new (globalThis as any).HTMLElement();
+        el.setAttribute("class", "foo");
+        assert.strictEqual(el.hasAttribute("class"), true);
+
+        el.removeAttribute("class");
+        assert.strictEqual(el.hasAttribute("class"), false);
+        assert.strictEqual(el.getAttribute("class"), null);
+    });
+
+    test("should return attributes as an array of {name, value}", () => {
+        const el = new (globalThis as any).HTMLElement();
+        el.setAttribute("role", "button");
+        el.setAttribute("aria-label", "Close");
+
+        const attrs = el.attributes;
+        assert.strictEqual(attrs.length, 2);
+        assert.deepStrictEqual(attrs.map((a: any) => a.name).sort(), [
+            "aria-label",
+            "role",
+        ]);
+    });
+
+    test("should support attachShadow with open mode", () => {
+        const el = new (globalThis as any).HTMLElement();
+        const sr = el.attachShadow({ mode: "open" });
+
+        assert.ok(sr);
+        assert.strictEqual(sr.host, el);
+        assert.strictEqual(el.shadowRoot, sr);
+    });
+
+    test("should not expose shadowRoot for closed mode", () => {
+        const el = new (globalThis as any).HTMLElement();
+        el.attachShadow({ mode: "closed" });
+
+        assert.strictEqual(el.shadowRoot, null);
+    });
+
+    test("should provide a classList stub", () => {
+        const el = new (globalThis as any).HTMLElement();
+        const cl = el.classList;
+
+        assert.strictEqual(cl.contains("foo"), false);
+        // Should not throw
+        cl.add("foo");
+        cl.remove("foo");
+        cl.toggle("foo");
+    });
+});
+
+test.describe("ShimCSSStyleSheet", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should support insertRule", () => {
+        const sheet = new (globalThis as any).CSSStyleSheet();
+
+        const idx = sheet.insertRule(".foo { color: red }", 0);
+        assert.strictEqual(idx, 0);
+        assert.strictEqual(sheet.cssRules.length, 1);
+        assert.strictEqual(sheet.cssRules[0].selectorText, ".foo ");
+    });
+});
+
+test.describe("ShimCustomElementRegistry", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should support define and get", () => {
+        class MyEl {}
+        (globalThis as any).customElements.define("my-el", MyEl);
+
+        assert.strictEqual((globalThis as any).customElements.get("my-el"), MyEl);
+    });
+
+    test("should return undefined for unknown elements", () => {
+        assert.strictEqual(
+            (globalThis as any).customElements.get("unknown-el"),
+            undefined,
+        );
+    });
+
+    test("should resolve whenDefined immediately", async () => {
+        const result = await (globalThis as any).customElements.whenDefined("any-el");
+        assert.strictEqual(result, undefined);
+    });
+});
+
+test.describe("ShimDocument", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should create elements via createElement", () => {
+        const el = (globalThis as any).document.createElement("div");
+        assert.ok(el);
+        assert.strictEqual(typeof el.setAttribute, "function");
+    });
+
+    test("should support adoptedStyleSheets", () => {
+        assert.ok(Array.isArray((globalThis as any).document.adoptedStyleSheets));
+    });
+});
+
+test.describe("ShimCustomEvent", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should carry detail", () => {
+        const evt = new (globalThis as any).CustomEvent("test", { detail: 42 });
+        assert.strictEqual(evt.detail, 42);
+        assert.strictEqual(evt.type, "test");
+    });
+
+    test("should default detail to null", () => {
+        const evt = new (globalThis as any).CustomEvent("test");
+        assert.strictEqual(evt.detail, null);
+    });
+});
+
+test.describe("matchMedia", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import(
+            "@microsoft/fast-test-harness/build/dom-shim.js"
+        );
+        installDomShim();
+    });
+
+    test("should return a MediaQueryList with matches = false", () => {
+        const mql = (globalThis as any).matchMedia("(prefers-color-scheme: dark)");
+        assert.strictEqual(mql.matches, false);
+        // Should not throw
+        mql.addEventListener("change", () => {});
+        mql.removeEventListener("change", () => {});
+    });
+});
diff --git a/packages/fast-test-harness/src/build/dom-shim.ts b/packages/fast-test-harness/src/build/dom-shim.ts
new file mode 100644
index 00000000000..7dae60a73e0
--- /dev/null
+++ b/packages/fast-test-harness/src/build/dom-shim.ts
@@ -0,0 +1,157 @@
+/**
+ * Minimal DOM shim for running FAST Element's `css` and `html` tagged
+ * templates in Node.js. Provides just enough of the DOM API to resolve
+ * `ElementStyles.toString()` and compile `html` templates.
+ *
+ * This module is idempotent — if `globalThis.window` is already defined,
+ * no shims are applied.
+ */
+
+class ShimNode extends EventTarget {}
+class ShimElement extends ShimNode {}
+
+class ShimHTMLElement extends ShimElement {
+    static elementAttributes = new WeakMap<ShimHTMLElement, Map<string, string>>();
+    _shadowRoot: object | null = null;
+
+    get attributes(): Array<{ name: string; value: string }> {
+        return Array.from(ShimHTMLElement.elementAttributes.get(this) ?? []).map(
+            ([name, value]) => ({ name, value }),
+        );
+    }
+
+    get shadowRoot() {
+        return this._shadowRoot;
+    }
+
+    setAttribute(name: string, value: string) {
+        let attrs = ShimHTMLElement.elementAttributes.get(this);
+        if (!attrs) {
+            attrs = new Map();
+            ShimHTMLElement.elementAttributes.set(this, attrs);
+        }
+        attrs.set(name, value);
+    }
+
+    removeAttribute(name: string) {
+        ShimHTMLElement.elementAttributes.get(this)?.delete(name);
+    }
+
+    hasAttribute(name: string) {
+        return ShimHTMLElement.elementAttributes.get(this)?.has(name) ?? false;
+    }
+
+    getAttribute(name: string) {
+        const v = ShimHTMLElement.elementAttributes.get(this)?.get(name);
+        return v === undefined ? null : v;
+    }
+
+    attachShadow(init?: { mode?: string }) {
+        const sr = { host: this };
+        if (init?.mode === "open") {
+            this._shadowRoot = sr;
+        }
+        return sr;
+    }
+
+    get classList() {
+        return {
+            add() {},
+            remove() {},
+            contains() {
+                return false;
+            },
+            toggle() {},
+        };
+    }
+
+    get part() {
+        return this.classList;
+    }
+}
+
+class ShimCSSStyleSheet {
+    cssRules: Array<{ selectorText: string }> = [];
+
+    replace() {}
+
+    insertRule(rule: string, index = 0) {
+        this.cssRules.splice(index, 0, { selectorText: rule.split("{")[0] });
+        return index;
+    }
+}
+
+class ShimCustomElementRegistry {
+    __definitions = new Map<string, { ctor: any; observedAttributes: string[] }>();
+
+    define(name: string, ctor: any) {
+        this.__definitions.set(name, {
+            ctor,
+            observedAttributes: ctor.observedAttributes ?? [],
+        });
+    }
+
+    get(name: string) {
+        return this.__definitions.get(name)?.ctor;
+    }
+
+    whenDefined() {
+        return Promise.resolve();
+    }
+}
+
+class ShimDocument extends ShimNode {
+    adoptedStyleSheets: any[] = [];
+
+    createTreeWalker() {
+        return {};
+    }
+
+    createTextNode() {
+        return {};
+    }
+
+    createElement() {
+        return new ShimHTMLElement();
+    }
+}
+
+class ShimMutationObserver {
+    observe() {}
+    disconnect() {}
+}
+
+class ShimMediaQueryList {
+    matches = false;
+    addEventListener() {}
+    removeEventListener() {}
+}
+
+export function installDomShim(): void {
+    if ((globalThis as any).window !== undefined) {
+        return;
+    }
+
+    (globalThis as any).Node = ShimNode;
+    (globalThis as any).Element = ShimElement;
+    (globalThis as any).HTMLElement = ShimHTMLElement;
+    (globalThis as any).Document = ShimDocument;
+    (globalThis as any).CustomEvent = class extends Event {
+        detail: any;
+        constructor(type: string, init?: CustomEventInit) {
+            super(type, init);
+            this.detail = init?.detail ?? null;
+        }
+    };
+    (globalThis as any).CSSStyleSheet = ShimCSSStyleSheet;
+    (globalThis as any).ShadowRoot = class {};
+    (globalThis as any).CustomElementRegistry = ShimCustomElementRegistry;
+    (globalThis as any).MutationObserver = ShimMutationObserver;
+    (globalThis as any).MediaQueryList = ShimMediaQueryList;
+    (globalThis as any).matchMedia = () => new ShimMediaQueryList();
+    (globalThis as any).document = new ShimDocument();
+    (globalThis as any).customElements = new ShimCustomElementRegistry();
+    (globalThis as any).window = globalThis;
+
+    (globalThis as any).CSS ??= { supports: () => true };
+}
diff --git a/packages/fast-test-harness/src/build/generate-stylesheets.test.ts b/packages/fast-test-harness/src/build/generate-stylesheets.test.ts
new file mode 100644
index 00000000000..ad0b52c9bdd
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-stylesheets.test.ts
@@ -0,0 +1,111 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+
+test.describe("generateStylesheets", () => {
+    let tempDir: string;
+
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-styles-"));
+    });
+
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+
+    test("should extract CSS from a styles module", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        // Write a fake styles module that exports an ElementStyles-like object.
+        await writeFile(
+            join(distDir, "button.styles.js"),
+            `export const styles = { styles: [":host { display: block; }", "span { color: red; }"] };`,
+        );
+
+        await generateStylesheets({ cwd: tempDir });
+
+        const css = await readFile(join(distDir, "button.styles.css"), "utf8");
+        assert.ok(css.includes(":host { display: block; }"));
+        assert.ok(css.includes("span { color: red; }"));
+    });
+
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        const outDir = join(tempDir, "out");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "card.styles.js"),
+            `export const styles = { styles: [".card { padding: 8px; }"] };`,
+        );
+
+        await generateStylesheets({ cwd: tempDir, outDir: "out" });
+
+        const css = await readFile(join(outDir, "card.styles.css"), "utf8");
+        assert.ok(css.includes(".card { padding: 8px; }"));
+    });
+
+    test("should apply a format function", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "link.styles.js"),
+            `export const styles = { styles: ["a { color: blue; }"] };`,
+        );
+
+        await generateStylesheets({
+            cwd: tempDir,
+            format: css => `/* formatted */\n${css}`,
+        });
+
+        const css = await readFile(join(distDir, "link.styles.css"), "utf8");
+        assert.ok(css.startsWith("/* formatted */"));
+    });
+
+    test("should flatten nested styles arrays", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "nested.styles.js"),
+            `export const styles = {
+                styles: [
+                    { styles: [":host { display: flex; }", "div { margin: 0; }"] },
+                    "span { font-size: 14px; }"
+                ]
+            };`,
+        );
+
+        await generateStylesheets({ cwd: tempDir });
+
+        const css = await readFile(join(distDir, "nested.styles.css"), "utf8");
+        assert.ok(css.includes(":host { display: flex; }"));
+        assert.ok(css.includes("div { margin: 0; }"));
+        assert.ok(css.includes("span { font-size: 14px; }"));
+    });
+
+    test("should skip modules without a styles export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "empty.styles.js"),
+            `export const template = "<div></div>";`,
+        );
+
+        await generateStylesheets({ cwd: tempDir });
+
+        // Should not create a CSS file
+        try {
+            await readFile(join(distDir, "empty.styles.css"), "utf8");
+            assert.fail("Should not have created a CSS file");
+        } catch (err: any) {
+            assert.strictEqual(err.code, "ENOENT");
+        }
+    });
+});
diff --git a/packages/fast-test-harness/src/build/generate-stylesheets.ts b/packages/fast-test-harness/src/build/generate-stylesheets.ts
new file mode 100644
index 00000000000..e7f65c08142
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-stylesheets.ts
@@ -0,0 +1,145 @@
+/**
+ * Style extraction — converts compiled FAST ElementStyles JS modules
+ * into plain CSS files.
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+ *
+ * await generateStylesheets({ cwd: process.cwd() });
+ * ```
+ *
+ * Usage as a Lage worker:
+ * ```ts
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+ *
+ * export default async function init({ target }) {
+ *     await generateStylesheets({ cwd: target.cwd });
+ * }
+ * ```
+ */
+
+import { glob, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { styleText } from "node:util";
+import { installDomShim } from "./dom-shim.js";
+
+export interface GenerateStylesheetsOptions {
+    /**
+     * Root directory of the package. Defaults to `process.cwd()`.
+     */
+    cwd?: string;
+
+    /**
+     * Directory containing compiled JS style modules, relative to `cwd`.
+     * @default "dist"
+     */
+    distDir?: string;
+
+    /**
+     * Glob pattern for style modules, relative to `distDir`.
+     * @default `**​/*.styles.js`
+     */
+    pattern?: string;
+
+    /**
+     * Output directory for generated CSS files, relative to `cwd`.
+     * When set, output files are written here instead of next to the
+     * source JS modules.
+     * @default distDir
+     */
+    outDir?: string;
+
+    /**
+     * Optional formatter function applied to extracted CSS before writing.
+     * Receives the CSS string and output file path, returns formatted CSS.
+     *
+     * Example with Prettier:
+     * ```ts
+     * import prettier from "prettier";
+     *
+     * await generateStylesheets({
+     *     format: async (css, filePath) => {
+     *         const options = await prettier.resolveConfig(filePath);
+     *         return prettier.format(css, { ...options, filepath: filePath });
+     *     },
+     * });
+     * ```
+     */
+    format?: (css: string, filePath: string) => string | Promise<string>;
+}
+
+interface StyleSheet {
+    styles: Array<string | StyleSheet>;
+    toString?: () => string;
+}
+
+function flattenStyles(style: string | StyleSheet): string[] {
+    if (typeof style === "string") {
+        return [style];
+    }
+    if (Array.isArray(style.styles)) {
+        return style.styles.flatMap(flattenStyles);
+    }
+    return [style.toString?.() ?? ""];
+}
+
+export async function generateStylesheets(
+    options: GenerateStylesheetsOptions = {},
+): Promise<void> {
+    installDomShim();
+
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.styles.js";
+
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const baseName = path.basename(jsFile, ".js") + ".css";
+        const cssFilePath = outDir
+            ? path.resolve(outDir, baseName)
+            : path.resolve(path.dirname(jsFilePath), baseName);
+
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const stylesheet: StyleSheet | undefined = mod.styles ?? mod.default;
+
+            if (!stylesheet?.styles) {
+                continue;
+            }
+
+            let css = stylesheet.styles.flatMap(flattenStyles).join("\n");
+
+            if (options.format) {
+                try {
+                    css = await options.format(css, cssFilePath);
+                } catch (formatError: any) {
+                    console.warn(
+                        styleText(["yellow", "bold"], "⚠"),
+                        `Format failed for ${path.relative(cwd, cssFilePath)}:`,
+                        formatError.message,
+                    );
+                }
+            }
+
+            await mkdir(path.dirname(cssFilePath), { recursive: true });
+            await writeFile(cssFilePath, css, "utf8");
+
+            console.log(
+                styleText(["green", "bold"], "✔"),
+                "Style:",
+                styleText("dim", path.relative(cwd, jsFilePath)),
+                "→",
+                styleText("bold", path.relative(cwd, cssFilePath)),
+            );
+        } catch (error: any) {
+            console.error(
+                styleText(["red", "bold"], "✘"),
+                `Failed: ${path.relative(cwd, jsFilePath)}`,
+                error.message,
+            );
+        }
+    }
+}
diff --git a/packages/fast-test-harness/src/build/generate-templates.test.ts b/packages/fast-test-harness/src/build/generate-templates.test.ts
new file mode 100644
index 00000000000..21d590f612d
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-templates.test.ts
@@ -0,0 +1,332 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { installDomShim } from "@microsoft/fast-test-harness/build/dom-shim.js";
+import {
+    convertTemplate,
+    generateFTemplates,
+} from "@microsoft/fast-test-harness/build/generate-templates.js";
+import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
+
+test.describe("convertTemplate", async () => {
+    // Install the DOM shim before any tests — convertTemplate needs fast-html
+    // syntax constants which require a DOM environment, and FAST Element needs
+    // basic DOM globals to initialize.
+    installDomShim();
+
+    // Dynamic import after the DOM shim is installed so FAST Element can
+    // access `document`, `CSSStyleSheet`, etc.
+    const { html, ref, slotted, children } = await import("@microsoft/fast-element");
+    test("should wrap a static template in f-template tags", () => {
+        const template = html`<template><div>hello</div></template>`;
+        const result = convertTemplate(template, "fast-test");
+
+        assert.ok(result);
+        assert.ok(result.includes('<f-template name="fast-test"'));
+        assert.ok(result.includes("shadowrootmode"));
+        assert.ok(result.includes("<div>hello</div>"));
+        assert.ok(result.includes("{{styles}}"));
+    });
+
+    test("should return null-safe for empty factories", () => {
+        const template = html`<template><span></span></template>`;
+        const result = convertTemplate(template, "fast-empty");
+
+        assert.ok(result);
+        assert.ok(result.includes("<span></span>"));
+    });
+
+    test("should inject {{styles}} after the opening template tag", () => {
+        const template = html`<template><p>content</p></template>`;
+        const result = convertTemplate(template, "fast-styles");
+
+        assert.ok(result);
+        const templateIdx = result.indexOf("<template>");
+        const stylesIdx = result.indexOf("{{styles}}");
+        assert.ok(stylesIdx > templateIdx, "{{styles}} should appear after <template>");
+    });
+
+    test("should convert RefDirective factories to f-ref attributes", () => {
+        const template = html`<template><div ${ref("myRef")}></div></template>`;
+        const result = convertTemplate(template, "fast-ref");
+
+        assert.ok(result);
+        assert.ok(result.includes('f-ref="{myRef}"'), `got: ${result}`);
+    });
+
+    test("should convert SlottedDirective factories to f-slotted attributes", () => {
+        const template = html`<template><slot ${slotted("slottedItems")}></slot></template>`;
+        const result = convertTemplate(template, "fast-slotted");
+
+        assert.ok(result);
+        assert.ok(result.includes("f-slotted="), `got: ${result}`);
+        assert.ok(result.includes("slottedItems"), `got: ${result}`);
+    });
+
+    test("should convert value bindings to {{expression}}", () => {
+        const template = html`<template><span>${x => x.label}</span></template>`;
+        const result = convertTemplate(template, "fast-binding");
+
+        assert.ok(result);
+        assert.ok(result.includes("{{label}}"), `got: ${result}`);
+    });
+
+    test("should convert boolean bindings to ?attr expressions", () => {
+        const template = html`<template><button ?disabled="${x => x.disabled}"></button></template>`;
+        const result = convertTemplate(template, "fast-bool");
+
+        assert.ok(result);
+        assert.ok(result.includes('?disabled="{{disabled}}"'), `got: ${result}`);
+    });
+
+    test("should inline static sub-templates", () => {
+        const template = html`<template><div>${() => "<svg>icon</svg>"}</div></template>`;
+        const result = convertTemplate(template, "fast-inline");
+
+        assert.ok(result);
+        assert.ok(result.includes("<svg>icon</svg>"), `got: ${result}`);
+    });
+
+    test("should convert ChildrenDirective factories to f-children attributes", () => {
+        const template = html`<template><div ${children("childItems")}></div></template>`;
+        const result = convertTemplate(template, "fast-children");
+
+        assert.ok(result);
+        assert.ok(result.includes("f-children="), `got: ${result}`);
+        assert.ok(result.includes("childItems"), `got: ${result}`);
+    });
+
+    test("should convert event bindings to @event expressions", () => {
+        const template = html`<template><button @click="${(x, c) => x.handleClick(c.event)}"></button></template>`;
+        const result = convertTemplate(template, "fast-event");
+
+        assert.ok(result);
+        assert.ok(result.includes("@click="), `got: ${result}`);
+        assert.ok(result.includes("handleClick"), `got: ${result}`);
+    });
+
+    test("should convert property bindings to :prop expressions", () => {
+        const template = html`<template><input :value="${x => x.currentValue}" /></template>`;
+        const result = convertTemplate(template, "fast-prop");
+
+        assert.ok(result);
+        assert.ok(result.includes(":value="), `got: ${result}`);
+        assert.ok(result.includes("currentValue"), `got: ${result}`);
+    });
+
+    test("should handle multiple factories in a single template", () => {
+        const template = html`<template><span>${x => x.label}</span><button ?disabled="${x => x.disabled}"></button></template>`;
+        const result = convertTemplate(template, "fast-multi");
+
+        assert.ok(result);
+        assert.ok(result.includes("{{label}}"), `got: ${result}`);
+        assert.ok(result.includes('?disabled="{{disabled}}"'), `got: ${result}`);
+    });
+
+    test("should inline a static sub-template ViewTemplate", () => {
+        const icon = html`<svg>icon</svg>`;
+        const template = html`<template><div>${() => icon}</div></template>`;
+        const result = convertTemplate(template, "fast-sub");
+
+        assert.ok(result);
+        assert.ok(result.includes("<svg>icon</svg>"), `got: ${result}`);
+    });
+});
+
+test.describe("generateFTemplates", () => {
+    let tempDir: string;
+
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-ftemplates-"));
+    });
+
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+
+    test("should generate an f-template HTML file from a template module", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "badge.template.js"),
+            `export const template = {
+                html: "<template><slot></slot></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateFTemplates({ cwd: tempDir, tagPrefix: "mai" });
+
+        const html = await readFile(join(distDir, "badge.template.html"), "utf8");
+        assert.ok(html.includes('<f-template name="mai-badge"'));
+        assert.ok(html.includes("<slot></slot>"));
+        assert.ok(html.includes("{{styles}}"));
+    });
+
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "card.template.js"),
+            `export const template = {
+                html: "<template><div>card</div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateFTemplates({ cwd: tempDir, outDir: "out", tagPrefix: "fast" });
+
+        const html = await readFile(join(tempDir, "out", "card.template.html"), "utf8");
+        assert.ok(html.includes('<f-template name="fast-card"'));
+    });
+
+    test("should skip modules without a template export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "empty.template.js"),
+            `export const styles = ":host {}";`,
+        );
+
+        await generateFTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        try {
+            await readFile(join(distDir, "empty.template.html"), "utf8");
+            assert.fail("Should not have created an HTML file");
+        } catch (err: any) {
+            assert.strictEqual(err.code, "ENOENT");
+        }
+    });
+
+    test("should apply a format function", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "text.template.js"),
+            `export const template = {
+                html: "<template><span>text</span></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateFTemplates({
+            cwd: tempDir,
+            tagPrefix: "fast",
+            format: html => `<!-- formatted -->\n${html}`,
+        });
+
+        const html = await readFile(join(distDir, "text.template.html"), "utf8");
+        assert.ok(html.startsWith("<!-- formatted -->"));
+    });
+});
+
+test.describe("generateWebuiTemplates", () => {
+    let tempDir: string;
+
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-webui-"));
+    });
+
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+
+    test("should generate a webui template without f-template wrapper", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "badge.template.js"),
+            `export const template = {
+                html: "<template><slot></slot></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
+
+        const html = await readFile(join(distDir, "badge.template-webui.html"), "utf8");
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+        assert.ok(html.includes("<slot></slot>"));
+        assert.ok(!html.includes("<f-template"), "should not have f-template wrapper");
+        assert.ok(!html.includes("{{styles}}"), "should not have styles marker");
+    });
+
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "card.template.js"),
+            `export const template = {
+                html: "<template><div>card</div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            outDir: "out",
+            tagPrefix: "fast",
+        });
+
+        const html = await readFile(
+            join(tempDir, "out", "card.template-webui.html"),
+            "utf8",
+        );
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+    });
+
+    test("should add shadowrootdelegatesfocus from definition-async", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "input.template.js"),
+            `export const template = {
+                html: "<template><input /></template>",
+                factories: {}
+            };`,
+        );
+
+        await writeFile(
+            join(distDir, "input.definition-async.js"),
+            `export const definition = {
+                name: "fast-input",
+                shadowOptions: { delegatesFocus: true },
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "input.template-webui.html"), "utf8");
+        assert.ok(
+            html.includes("shadowrootdelegatesfocus"),
+            `should include delegatesFocus, got: ${html}`,
+        );
+    });
+
+    test("should not add shadowrootdelegatesfocus when absent", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "div.template.js"),
+            `export const template = {
+                html: "<template><div>hello</div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "div.template-webui.html"), "utf8");
+        assert.ok(!html.includes("shadowrootdelegatesfocus"));
+    });
+});
diff --git a/packages/fast-test-harness/src/build/generate-templates.ts b/packages/fast-test-harness/src/build/generate-templates.ts
new file mode 100644
index 00000000000..ed50eb8a8e7
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-templates.ts
@@ -0,0 +1,379 @@
+/**
+ * F-template generation — converts compiled FAST Element ViewTemplate
+ * JS modules into declarative `<f-template>` HTML files.
+ *
+ * This reverse-engineers FAST Element's internal binding marker format
+ * back into human-readable f-template syntax (`f-ref`, `f-slotted`,
+ * `@event`, `?bool`, `:prop`, `{{expr}}`).
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateFTemplates } from "@microsoft/fast-test-harness/build/generate-templates.js";
+ *
+ * await generateFTemplates({ cwd: process.cwd(), tagPrefix: "fluent" });
+ * ```
+ */
+
+import { glob, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { styleText } from "node:util";
+import {
+    attributeDirectivePrefix,
+    clientSideCloseExpression,
+    clientSideOpenExpression,
+    closeExpression,
+    eventArgAccessor,
+    openExpression,
+} from "@microsoft/fast-html/syntax.js";
+import { installDomShim } from "./dom-shim.js";
+
+const stylesMarker = `${openExpression}styles${closeExpression}`;
+
+function wrapClientExpression(expression: string): string {
+    return `${clientSideOpenExpression}${expression}${clientSideCloseExpression}`;
+}
+
+function wrapDefaultExpression(expression: string): string {
+    return `${openExpression}${expression}${closeExpression}`;
+}
+
+function attributeDirective(name: string, value: string): string {
+    return `${attributeDirectivePrefix}${name}="${wrapClientExpression(value)}"`;
+}
+
+export interface GenerateFTemplatesOptions {
+    /**
+     * Root directory of the package. Defaults to `process.cwd()`.
+     */
+    cwd?: string;
+
+    /**
+     * Directory containing compiled JS template modules, relative to `cwd`.
+     * @default "dist"
+     */
+    distDir?: string;
+
+    /**
+     * Glob pattern for template modules, relative to `distDir`.
+     * @default `**​/*.template.js`
+     */
+    pattern?: string;
+
+    /**
+     * Output directory for generated HTML files, relative to `cwd`.
+     * When set, output files are written here instead of next to the
+     * source JS modules.
+     * @default distDir
+     */
+    outDir?: string;
+
+    /**
+     * Tag name prefix for generated component names.
+     * Combined with the component directory name: `${tagPrefix}-${componentName}`.
+     * @default "fast"
+     */
+    tagPrefix?: string;
+
+    /**
+     * Optional formatter function applied to generated HTML before writing.
+     */
+    format?: (html: string, filePath: string) => string | Promise<string>;
+}
+
+export interface ViewTemplate {
+    html: string | HTMLTemplateElement;
+    factories: Record<string, Factory>;
+}
+
+interface Factory {
+    constructor: { name: string };
+    options?: any;
+    dataBinding?: {
+        evaluate: (...args: any[]) => any;
+    };
+}
+
+/**
+ * Extract a readable binding expression from a factory's evaluate function.
+ */
+function extractBindingExpression(factory: Factory): string {
+    if (!factory?.dataBinding?.evaluate) {
+        return "";
+    }
+
+    const fnStr = factory.dataBinding.evaluate.toString();
+    const arrowMatch = fnStr.match(/=>\s*(.+)$/s);
+    if (arrowMatch) {
+        let expr = arrowMatch[1].trim();
+        expr = expr.replace(/\bx\./g, "").replace(/c\.event\b/g, eventArgAccessor);
+        return expr;
+    }
+
+    return fnStr;
+}
+
+/**
+ * Extract the `filter elements(...)` suffix for a slotted or children
+ * directive.
+ */
+function extractSlottedFilter(factory: Factory): string {
+    const filter = factory.options?.filter;
+    if (!filter) {
+        return "";
+    }
+
+    if (filter.name === "selectElements") {
+        return " filter elements()";
+    }
+
+    let selector: string | null = null;
+    try {
+        filter({
+            nodeType: 1,
+            matches(s: string) {
+                selector = s;
+                return true;
+            },
+        });
+    } catch {
+        // If extraction fails, fall back to no-arg elements().
+    }
+
+    if (selector) {
+        return ` filter elements(${selector})`;
+    }
+
+    return " filter elements()";
+}
+
+/**
+ * Check if a factory is a static sub-template interpolation. If so,
+ * evaluate it and return the inlined HTML.
+ */
+function tryInlineStaticTemplate(factory: Factory): string | null {
+    if (!factory?.dataBinding?.evaluate) {
+        return null;
+    }
+
+    const fnStr = factory.dataBinding.evaluate.toString();
+
+    if (/^\(\)\s*=>/.test(fnStr)) {
+        try {
+            const result = factory.dataBinding.evaluate({}, {});
+            if (result && typeof result === "object" && typeof result.html === "string") {
+                return result.html;
+            }
+            if (typeof result === "string") {
+                return result;
+            }
+        } catch {
+            // Fall through to normal binding handling.
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Convert a ViewTemplate's html string and factories into an
+ * f-template HTML string.
+ */
+export function convertTemplate(
+    viewTemplate: ViewTemplate,
+    componentName: string,
+): string | null {
+    const { factories } = viewTemplate;
+    const html =
+        typeof viewTemplate.html === "string"
+            ? viewTemplate.html
+            : viewTemplate.html.innerHTML;
+
+    const factoryEntries = Object.entries(factories);
+    if (factoryEntries.length === 0) {
+        // No factories — pure static template.
+        const content = html.replace(/<\/?template[^>]*>/g, "").trim();
+        return `<f-template name="${componentName}" shadowrootmode="open"><template>${stylesMarker}${content}</template></f-template>\n`;
+    }
+
+    // Derive the binding marker prefix from the first factory key.
+    // Factory IDs follow the pattern `${marker}-${counter}` (e.g. "fast-a1b2c3-1"),
+    // where `marker` is generated once per session in fast-element's markup.ts.
+    const prefix = factoryEntries[0][0].replace(/-\d+$/, "");
+
+    const factoryMap = new Map<string, Factory>();
+    for (const [id, factory] of factoryEntries) {
+        factoryMap.set(id, factory);
+    }
+
+    let fContent = html;
+
+    // Attribute-position markers → f-ref / f-slotted / f-children
+    const attrBindingRe = new RegExp(
+        `${prefix}-\\d+="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
+        "g",
+    );
+    fContent = fContent.replace(attrBindingRe, (match: string, factoryId: string) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+        if (factory.constructor.name === "RefDirective") {
+            const prop =
+                typeof factory.options === "string"
+                    ? factory.options
+                    : factory.options?.property;
+            return attributeDirective("ref", prop);
+        }
+        if (factory.constructor.name === "SlottedDirective") {
+            const prop =
+                typeof factory.options === "string"
+                    ? factory.options
+                    : factory.options?.property;
+            const filterStr = extractSlottedFilter(factory);
+            return attributeDirective("slotted", `${prop}${filterStr}`);
+        }
+        if (factory.constructor.name === "ChildrenDirective") {
+            const prop =
+                typeof factory.options === "string"
+                    ? factory.options
+                    : factory.options?.property;
+            const filterStr = extractSlottedFilter(factory);
+            return attributeDirective("children", `${prop}${filterStr}`);
+        }
+        return match;
+    });
+
+    // Event bindings → @event="{handler(e)}"
+    const eventBindingRe = new RegExp(
+        `(@[a-z]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
+        "g",
+    );
+    fContent = fContent.replace(
+        eventBindingRe,
+        (match: string, aspect: string, factoryId: string) => {
+            const factory = factoryMap.get(factoryId);
+            if (!factory) {
+                return match;
+            }
+            const evalStr = extractBindingExpression(factory);
+            return `${aspect}="${wrapClientExpression(evalStr)}"`;
+        },
+    );
+
+    // Boolean/property bindings → ?attr="{{expr}}"
+    const boolAttrBindingRe = new RegExp(
+        `([?:][a-zA-Z-]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`,
+        "g",
+    );
+    fContent = fContent.replace(
+        boolAttrBindingRe,
+        (match: string, aspect: string, factoryId: string) => {
+            const factory = factoryMap.get(factoryId);
+            if (!factory) {
+                return match;
+            }
+            const evalStr = extractBindingExpression(factory);
+            return `${aspect}="${wrapDefaultExpression(evalStr)}"`;
+        },
+    );
+
+    // Attribute-value and content bindings → attr="{{propName}}" or inline HTML
+    const valBindingRe = new RegExp(`${prefix}\\{(${prefix}-\\d+)\\}${prefix}`, "g");
+    fContent = fContent.replace(valBindingRe, (match: string, factoryId: string) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+
+        const inlined = tryInlineStaticTemplate(factory);
+        if (inlined !== null) {
+            return inlined;
+        }
+
+        const evalStr = extractBindingExpression(factory);
+        return wrapDefaultExpression(evalStr);
+    });
+
+    let fInner = fContent.trim();
+    if (!/<template[^>]*>/.test(fInner)) {
+        fInner = `<template>${fInner}</template>`;
+    }
+    // Inject the {{styles}} marker immediately after the opening <template> tag
+    // so the test harness can substitute it with a <link rel="stylesheet"> at
+    // render time. Harness fallback auto-injects if the marker is missing, but
+    // emitting it explicitly keeps generated output consistent with hand-authored
+    // f-templates (see MAI core components).
+    fInner = fInner.replace(/(<template[^>]*>)/, `$1${stylesMarker}`);
+    return `<f-template name="${componentName}" shadowrootmode="open">\n${fInner}\n</f-template>\n`;
+}
+
+export async function generateFTemplates(
+    options: GenerateFTemplatesOptions = {},
+): Promise<void> {
+    installDomShim();
+
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.template.js";
+    const tagPrefix = options.tagPrefix ?? "fast";
+
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const componentBaseName = path.basename(jsFile, ".template.js");
+        const componentName = `${tagPrefix}-${componentBaseName}`;
+
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const template: ViewTemplate | undefined = mod.template ?? mod.default;
+
+            if (!template?.html) {
+                continue;
+            }
+
+            const fTemplateHtml = convertTemplate(template, componentName);
+            if (!fTemplateHtml) {
+                continue;
+            }
+
+            let html = fTemplateHtml;
+
+            if (options.format) {
+                try {
+                    html = await options.format(html, jsFilePath);
+                } catch (formatError: any) {
+                    console.warn(
+                        styleText(["yellow", "bold"], "⚠"),
+                        `Format failed for ${componentName}:`,
+                        formatError.message,
+                    );
+                }
+            }
+
+            const fTemplatePath = outDir
+                ? path.resolve(outDir, `${componentBaseName}.template.html`)
+                : path.resolve(
+                      path.dirname(jsFilePath),
+                      `${componentBaseName}.template.html`,
+                  );
+
+            await mkdir(path.dirname(fTemplatePath), { recursive: true });
+            await writeFile(fTemplatePath, html, "utf8");
+
+            console.log(
+                styleText(["green", "bold"], "✔"),
+                "f-template:",
+                styleText("dim", path.relative(cwd, jsFilePath)),
+                "→",
+                styleText("bold", path.relative(cwd, fTemplatePath)),
+            );
+        } catch (error: any) {
+            console.error(
+                styleText(["red", "bold"], "✘"),
+                `Failed: ${path.relative(cwd, jsFilePath)}`,
+                error.message,
+            );
+        }
+    }
+}
diff --git a/packages/fast-test-harness/src/build/generate-webui-templates.test.ts b/packages/fast-test-harness/src/build/generate-webui-templates.test.ts
new file mode 100644
index 00000000000..6b662da7497
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-webui-templates.test.ts
@@ -0,0 +1,285 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
+
+test.describe("generateWebuiTemplates", () => {
+    let tempDir: string;
+
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-webui-templ-"));
+    });
+
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+
+    test("should generate a webui template without f-template wrapper", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "badge.template.js"),
+            `export const template = {
+                html: "<template><slot></slot></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
+
+        const html = await readFile(join(distDir, "badge.template-webui.html"), "utf8");
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+        assert.ok(html.includes("<slot></slot>"));
+        assert.ok(!html.includes("<f-template"), "should not have f-template wrapper");
+        assert.ok(!html.includes("{{styles}}"), "should not have styles marker");
+    });
+
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "card.template.js"),
+            `export const template = {
+                html: "<template><div>card</div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            outDir: "out",
+            tagPrefix: "fast",
+        });
+
+        const html = await readFile(
+            join(tempDir, "out", "card.template-webui.html"),
+            "utf8",
+        );
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+    });
+
+    test("should skip modules without a template export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "empty.template.js"),
+            `export const styles = ":host {}";`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        try {
+            await readFile(join(distDir, "empty.template-webui.html"), "utf8");
+            assert.fail("Should not have created an HTML file");
+        } catch (err: any) {
+            assert.strictEqual(err.code, "ENOENT");
+        }
+    });
+
+    test("should apply a format function", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "text.template.js"),
+            `export const template = {
+                html: "<template><span>text</span></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            tagPrefix: "fast",
+            format: html => `<!-- webui-formatted -->\n${html}`,
+        });
+
+        const html = await readFile(join(distDir, "text.template-webui.html"), "utf8");
+        assert.ok(html.startsWith("<!-- webui-formatted -->"));
+    });
+
+    test("should add shadowrootdelegatesfocus from definition-async", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "input.template.js"),
+            `export const template = {
+                html: "<template><input /></template>",
+                factories: {}
+            };`,
+        );
+
+        await writeFile(
+            join(distDir, "input.definition-async.js"),
+            `export const definition = {
+                name: "fast-input",
+                shadowOptions: { delegatesFocus: true },
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "input.template-webui.html"), "utf8");
+        assert.ok(
+            html.includes("shadowrootdelegatesfocus"),
+            `should include delegatesFocus, got: ${html}`,
+        );
+    });
+
+    test("should not add shadowrootdelegatesfocus when absent", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "div.template.js"),
+            `export const template = {
+                html: "<template><div>hello</div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "div.template-webui.html"), "utf8");
+        assert.ok(!html.includes("shadowrootdelegatesfocus"));
+    });
+
+    test("should strip the {{styles}} marker from output", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        // The template contains nested content that would produce a styles marker
+        // during f-template generation (convertTemplate injects it).
+        await writeFile(
+            join(distDir, "label.template.js"),
+            `export const template = {
+                html: "<template><label>Name</label></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
+
+        const html = await readFile(join(distDir, "label.template-webui.html"), "utf8");
+        assert.ok(
+            !html.includes("{{styles}}"),
+            `should not contain styles marker: ${html}`,
+        );
+        assert.ok(
+            !html.includes("{%styles%}"),
+            `should not contain alt styles marker: ${html}`,
+        );
+    });
+
+    test("should handle modules with a default export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "icon.template.js"),
+            `const template = {
+                html: "<template><svg></svg></template>",
+                factories: {}
+            };
+            export default template;`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+
+        const html = await readFile(join(distDir, "icon.template-webui.html"), "utf8");
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+        assert.ok(html.includes("<svg></svg>"));
+    });
+
+    test("should handle multiple template modules in one pass", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "button.template.js"),
+            `export const template = {
+                html: "<template><button><slot></slot></button></template>",
+                factories: {}
+            };`,
+        );
+
+        await writeFile(
+            join(distDir, "badge.template.js"),
+            `export const template = {
+                html: "<template><span><slot></slot></span></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
+
+        const buttonHtml = await readFile(
+            join(distDir, "button.template-webui.html"),
+            "utf8",
+        );
+        const badgeHtml = await readFile(
+            join(distDir, "badge.template-webui.html"),
+            "utf8",
+        );
+
+        assert.ok(buttonHtml.includes("<button>"));
+        assert.ok(badgeHtml.includes("<span>"));
+    });
+
+    test("should gracefully handle a format function that throws", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "broken.template.js"),
+            `export const template = {
+                html: "<template><div>ok</div></template>",
+                factories: {}
+            };`,
+        );
+
+        // Should not throw — just warn and skip formatting.
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            tagPrefix: "fast",
+            format: () => {
+                throw new Error("format boom");
+            },
+        });
+
+        const html = await readFile(join(distDir, "broken.template-webui.html"), "utf8");
+        // The file should still be written (unformatted).
+        assert.ok(html.includes("<div>ok</div>"));
+    });
+
+    test("should use a custom glob pattern", async () => {
+        const distDir = join(tempDir, "dist");
+        const sub = join(distDir, "components");
+        await mkdir(sub, { recursive: true });
+
+        // Use the standard .template.js suffix so basename extraction works
+        await writeFile(
+            join(sub, "alert.template.js"),
+            `export const template = {
+                html: "<template><div role='alert'></div></template>",
+                factories: {}
+            };`,
+        );
+
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            tagPrefix: "fast",
+            pattern: "components/*.template.js",
+        });
+
+        const html = await readFile(join(sub, "alert.template-webui.html"), "utf8");
+        assert.ok(html.includes("role="), `got: ${html}`);
+        assert.ok(html.includes("alert"), `got: ${html}`);
+    });
+});
diff --git a/packages/fast-test-harness/src/build/generate-webui-templates.ts b/packages/fast-test-harness/src/build/generate-webui-templates.ts
new file mode 100644
index 00000000000..1dbd4f9c307
--- /dev/null
+++ b/packages/fast-test-harness/src/build/generate-webui-templates.ts
@@ -0,0 +1,212 @@
+/**
+ * WebUI template generation — converts compiled FAST Element ViewTemplate
+ * JS modules into declarative shadow DOM `<template>` HTML files suitable
+ * for WebUI consumers.
+ *
+ * Webui templates preserve all bindings from the f-template but use a
+ * different wrapper:
+ * - `<template shadowrootmode="open">` instead of `<f-template name="...">`
+ * - No `{{styles}}` placeholder (styles are linked externally)
+ * - Shadow options (e.g. `shadowrootdelegatesfocus`) propagated from the
+ *   companion `*.definition-async.js` module
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
+ *
+ * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "mai" });
+ * ```
+ */
+
+import { glob, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { styleText } from "node:util";
+import { closeExpression, openExpression } from "@microsoft/fast-html/syntax.js";
+import { installDomShim } from "./dom-shim.js";
+import { convertTemplate, type ViewTemplate } from "./generate-templates.js";
+
+const stylesMarker = `${openExpression}styles${closeExpression}`;
+const escapedStylesMarker = new RegExp(
+    stylesMarker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+    "g",
+);
+
+export interface GenerateWebuiTemplatesOptions {
+    /**
+     * Root directory of the package. Defaults to `process.cwd()`.
+     */
+    cwd?: string;
+
+    /**
+     * Directory containing compiled JS template modules, relative to `cwd`.
+     * @default "dist"
+     */
+    distDir?: string;
+
+    /**
+     * Glob pattern for template modules, relative to `distDir`.
+     * @default "**\/*.template.js"
+     */
+    pattern?: string;
+
+    /**
+     * Output directory for generated HTML files, relative to `cwd`.
+     * When set, output files are written here instead of next to the
+     * source JS modules.
+     * @default distDir
+     */
+    outDir?: string;
+
+    /**
+     * Tag name prefix for generated component names.
+     * Combined with the component directory name: `${tagPrefix}-${componentName}`.
+     * @default "fast"
+     */
+    tagPrefix?: string;
+
+    /**
+     * Optional formatter function applied to generated HTML before writing.
+     */
+    format?: (html: string, filePath: string) => string | Promise<string>;
+}
+
+/**
+ * Try to load shadow options from a companion `*.definition-async.js`
+ * module next to the template module. Returns an object with template
+ * attribute strings to add (e.g. `shadowrootdelegatesfocus`).
+ */
+async function loadShadowAttributes(
+    templateJsPath: string,
+): Promise<Record<string, string>> {
+    const dir = path.dirname(templateJsPath);
+    const base = path.basename(templateJsPath, ".template.js");
+    const defAsyncPath = path.resolve(dir, `${base}.definition-async.js`);
+
+    const attrs: Record<string, string> = {};
+
+    try {
+        const mod = await import(pathToFileURL(defAsyncPath).href);
+        const definition = mod.definition ?? mod.default;
+        if (definition?.shadowOptions?.delegatesFocus) {
+            attrs.shadowrootdelegatesfocus = "";
+        }
+    } catch {
+        // No definition-async module or it failed to load — skip.
+    }
+
+    return attrs;
+}
+
+/**
+ * Transform an f-template string into a webui template by replacing the
+ * `<f-template>` wrapper with `<template shadowrootmode="open">` and
+ * removing the `{{styles}}` placeholder.
+ */
+function fTemplateToWebui(
+    fTemplateHtml: string,
+    shadowAttrs: Record<string, string>,
+): string {
+    // Extract the inner <template>...</template> from within <f-template>
+    // using string operations to avoid polynomial backtracking in regex.
+    const fOpenStart = fTemplateHtml.indexOf("<f-template");
+    const fCloseTag = "</f-template>";
+    const fCloseStart = fTemplateHtml.lastIndexOf(fCloseTag);
+
+    if (fOpenStart === -1 || fCloseStart === -1) {
+        return fTemplateHtml;
+    }
+
+    const fOpenEnd = fTemplateHtml.indexOf(">", fOpenStart);
+    if (fOpenEnd === -1) {
+        return fTemplateHtml;
+    }
+
+    let inner = fTemplateHtml.slice(fOpenEnd + 1, fCloseStart).trim();
+
+    // Remove {{styles}} placeholder.
+    inner = inner.replace(escapedStylesMarker, "");
+
+    // Replace the opening <template> tag with one that includes shadow attributes.
+    const extraAttrs = Object.entries(shadowAttrs)
+        .map(([k, v]) => (v ? ` ${k}="${v}"` : ` ${k}`))
+        .join("");
+
+    inner = inner.replace(
+        /^<template[^>]*>/,
+        `<template shadowrootmode="open"${extraAttrs}>`,
+    );
+
+    return inner;
+}
+
+export async function generateWebuiTemplates(
+    options: GenerateWebuiTemplatesOptions = {},
+): Promise<void> {
+    installDomShim();
+
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.template.js";
+    const tagPrefix = options.tagPrefix ?? "fast";
+
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const componentBaseName = path.basename(jsFile, ".template.js");
+        const componentName = `${tagPrefix}-${componentBaseName}`;
+
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const template: ViewTemplate | undefined = mod.template ?? mod.default;
+
+            if (!template?.html) {
+                continue;
+            }
+
+            const fTemplateHtml = convertTemplate(template, componentName);
+            if (!fTemplateHtml) {
+                continue;
+            }
+
+            const shadowAttrs = await loadShadowAttributes(jsFilePath);
+            let html = fTemplateToWebui(fTemplateHtml, shadowAttrs);
+
+            if (options.format) {
+                try {
+                    html = await options.format(html, jsFilePath);
+                } catch (formatError: any) {
+                    console.warn(
+                        styleText(["yellow", "bold"], "⚠"),
+                        `Format failed for ${componentName}:`,
+                        formatError.message,
+                    );
+                }
+            }
+
+            const webuiPath = outDir
+                ? path.resolve(outDir, `${componentBaseName}.template-webui.html`)
+                : path.resolve(
+                      path.dirname(jsFilePath),
+                      `${componentBaseName}.template-webui.html`,
+                  );
+
+            await mkdir(path.dirname(webuiPath), { recursive: true });
+            await writeFile(webuiPath, html, "utf8");
+
+            console.log(
+                styleText(["green", "bold"], "✔"),
+                "webui:",
+                styleText("dim", path.relative(cwd, jsFilePath)),
+                "→",
+                styleText("bold", path.relative(cwd, webuiPath)),
+            );
+        } catch (error: any) {
+            console.error(
+                styleText(["red", "bold"], "✘"),
+                `Failed: ${path.relative(cwd, jsFilePath)}`,
+                error.message,
+            );
+        }
+    }
+}
diff --git a/packages/fast-test-harness/src/fixtures/csr-fixture.pw.spec.ts b/packages/fast-test-harness/src/fixtures/csr-fixture.pw.spec.ts
new file mode 100644
index 00000000000..0c689043ec0
--- /dev/null
+++ b/packages/fast-test-harness/src/fixtures/csr-fixture.pw.spec.ts
@@ -0,0 +1,200 @@
+import { expect, test } from "@microsoft/fast-test-harness";
+
+test.describe("CSR: setTemplate", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should render the element with default options", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).toHaveCount(1);
+    });
+
+    test("should render with innerHTML", async ({ fastPage }) => {
+        await fastPage.setTemplate({ innerHTML: "<span>child</span>" });
+
+        await expect(fastPage.element).toHaveCount(1);
+        await expect(fastPage.element).toContainText("child");
+    });
+
+    test("should render with attributes", async ({ fastPage }) => {
+        await fastPage.setTemplate({
+            attributes: { label: "Hello", size: "large" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "Hello");
+        await expect(fastPage.element).toHaveAttribute("size", "large");
+    });
+
+    test("should render with boolean attribute", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+
+        await expect(fastPage.element).toHaveAttribute("disabled");
+    });
+
+    test("should render with a raw HTML string", async ({ fastPage }) => {
+        await fastPage.setTemplate(`<test-widget label="raw">raw content</test-widget>`);
+
+        await expect(fastPage.element).toHaveAttribute("label", "raw");
+        await expect(fastPage.element).toContainText("raw content");
+    });
+
+    test("should replace the previous template on subsequent calls", async ({
+        fastPage,
+    }) => {
+        await fastPage.setTemplate({ attributes: { label: "first" } });
+        await expect(fastPage.element).toHaveAttribute("label", "first");
+
+        await fastPage.setTemplate({ attributes: { label: "second" } });
+        await expect(fastPage.element).toHaveAttribute("label", "second");
+        await expect(fastPage.element).toHaveCount(1);
+    });
+});
+
+test.describe("CSR: updateTemplate", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should update attributes on an existing element", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { label: "before" } });
+        await expect(fastPage.element).toHaveAttribute("label", "before");
+
+        await fastPage.updateTemplate("test-widget", {
+            attributes: { label: "after" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "after");
+    });
+
+    test("should remove an attribute when set to false", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+        await expect(fastPage.element).toHaveAttribute("disabled");
+
+        await fastPage.updateTemplate("test-widget", {
+            attributes: { disabled: false },
+        });
+
+        await expect(fastPage.element).not.toHaveAttribute("disabled");
+    });
+
+    test("should update innerHTML", async ({ fastPage }) => {
+        await fastPage.setTemplate({ innerHTML: "original" });
+
+        await fastPage.updateTemplate("test-widget", {
+            innerHTML: "updated",
+        });
+
+        await expect(fastPage.element).toContainText("updated");
+    });
+
+    test("should accept a Locator", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { label: "loc" } });
+
+        await fastPage.updateTemplate(fastPage.element, {
+            attributes: { label: "via-locator" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "via-locator");
+    });
+});
+
+test.describe("CSR: applyTokens", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should set CSS custom properties on the body", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.applyTokens({
+            "color-primary": "#0078d4",
+            "spacing-m": "8px",
+        });
+
+        const value = await fastPage.page.evaluate(() =>
+            document.body.style.getPropertyValue("--color-primary"),
+        );
+
+        expect(value).toBe("#0078d4");
+    });
+});
+
+test.describe("CSR: waitForCustomElement", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should resolve for a registered element", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.waitForCustomElement("test-widget");
+    });
+});
+
+test.describe("CSR: toHaveCustomState", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should pass when element has the custom state", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+
+        await expect(fastPage.element).toHaveCustomState("disabled");
+    });
+
+    test("should fail (negated) when element does not have the state", async ({
+        fastPage,
+    }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).not.toHaveCustomState("disabled");
+    });
+});
+
+test.describe("CSR: element locator", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should locate the element by tag name", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).toHaveCount(1);
+    });
+});
+
+test.describe("CSR: addStyleTag", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should add a style tag with content", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.addStyleTag({
+            content: "test-widget { border: 1px solid red; }",
+        });
+
+        const hasBorder = await fastPage.page.evaluate(() => {
+            const styles = document.querySelectorAll("style");
+            return Array.from(styles).some(s =>
+                s.textContent?.includes("border: 1px solid red"),
+            );
+        });
+
+        expect(hasBorder).toBe(true);
+    });
+});
+
+test.describe("CSR: multiple elements", () => {
+    test.use({ tagName: "test-widget" });
+
+    test("should handle templates with multiple instances", async ({ fastPage }) => {
+        await fastPage.setTemplate(`
+            <test-widget label="first">one</test-widget>
+            <test-widget label="second">two</test-widget>
+        `);
+
+        await expect(fastPage.element).toHaveCount(2);
+    });
+});
+
+test.describe("CSR: waitFor", () => {
+    test.use({ tagName: "test-widget", waitFor: ["test-widget"] });
+
+    test("should wait for additional elements specified in waitFor", async ({
+        fastPage,
+    }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).toHaveCount(1);
+    });
+});
diff --git a/packages/fast-test-harness/src/fixtures/index.ts b/packages/fast-test-harness/src/fixtures/index.ts
index 36b959481b0..82c8af23071 100644
--- a/packages/fast-test-harness/src/fixtures/index.ts
+++ b/packages/fast-test-harness/src/fixtures/index.ts
@@ -27,7 +27,7 @@ type FixtureOptions = {
     waitFor: string[];
 };
 
-type Fixtures = {
+export type Fixtures = {
     fastPage: CSRFixture | SSRFixture;
 };
 
diff --git a/packages/fast-test-harness/src/fixtures/ssr-fixture.pw.spec.ts b/packages/fast-test-harness/src/fixtures/ssr-fixture.pw.spec.ts
new file mode 100644
index 00000000000..aa9e2b8edf7
--- /dev/null
+++ b/packages/fast-test-harness/src/fixtures/ssr-fixture.pw.spec.ts
@@ -0,0 +1,285 @@
+import { expect, test } from "@microsoft/fast-test-harness";
+
+test.describe("SSR: setTemplate", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should navigate to the SSR fixture page", async ({ fastPage, page }) => {
+        await fastPage.setTemplate();
+
+        const url = new URL(page.url());
+        expect(url.pathname).toMatch(/^\/ssr-.*\.html$/);
+        expect(url.pathname).toContain("should_navigate_to_the_ssr_fixture_page");
+    });
+
+    test("should render the element with default options", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).toHaveCount(1);
+    });
+
+    test("should render with innerHTML", async ({ fastPage }) => {
+        await fastPage.setTemplate({ innerHTML: "<span>child</span>" });
+
+        await expect(fastPage.element).toHaveCount(1);
+        await expect(fastPage.element).toContainText("child");
+    });
+
+    test("should render with attributes", async ({ fastPage }) => {
+        await fastPage.setTemplate({
+            attributes: { label: "Hello", size: "large" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "Hello");
+        await expect(fastPage.element).toHaveAttribute("size", "large");
+    });
+
+    test("should render with boolean attribute", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+
+        await expect(fastPage.element).toHaveAttribute("disabled");
+    });
+
+    test("should render with a raw HTML string", async ({ fastPage }) => {
+        await fastPage.setTemplate(`<test-widget label="raw">raw content</test-widget>`);
+
+        await expect(fastPage.element).toHaveAttribute("label", "raw");
+        await expect(fastPage.element).toContainText("raw content");
+    });
+
+    test("should replace the previous template on subsequent calls", async ({
+        fastPage,
+    }) => {
+        await fastPage.setTemplate({ attributes: { label: "first" } });
+        await expect(fastPage.element).toHaveAttribute("label", "first");
+
+        await fastPage.setTemplate({ attributes: { label: "second" } });
+        await expect(fastPage.element).toHaveAttribute("label", "second");
+        await expect(fastPage.element).toHaveCount(1);
+    });
+});
+
+test.describe("SSR: updateTemplate", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should update attributes on an existing element", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { label: "before" } });
+        await expect(fastPage.element).toHaveAttribute("label", "before");
+
+        await fastPage.updateTemplate("test-widget", {
+            attributes: { label: "after" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "after");
+    });
+
+    test("should remove an attribute when set to false", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+        await expect(fastPage.element).toHaveAttribute("disabled");
+
+        await fastPage.updateTemplate("test-widget", {
+            attributes: { disabled: false },
+        });
+
+        await expect(fastPage.element).not.toHaveAttribute("disabled");
+    });
+
+    test("should update innerHTML", async ({ fastPage }) => {
+        await fastPage.setTemplate({ innerHTML: "original" });
+
+        await fastPage.updateTemplate("test-widget", {
+            innerHTML: "updated",
+        });
+
+        await expect(fastPage.element).toContainText("updated");
+    });
+
+    test("should accept a Locator", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { label: "loc" } });
+
+        await fastPage.updateTemplate(fastPage.element, {
+            attributes: { label: "via-locator" },
+        });
+
+        await expect(fastPage.element).toHaveAttribute("label", "via-locator");
+    });
+});
+
+test.describe("SSR: applyTokens", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should set CSS custom properties on the body", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.applyTokens({
+            "color-primary": "#0078d4",
+            "spacing-m": "8px",
+        });
+
+        const value = await fastPage.page.evaluate(() =>
+            document.body.style.getPropertyValue("--color-primary"),
+        );
+
+        expect(value).toBe("#0078d4");
+    });
+});
+
+test.describe("SSR: waitForCustomElement", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should resolve for a registered element", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.waitForCustomElement("test-widget");
+    });
+});
+
+test.describe("SSR: toHaveCustomState", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should pass when element has the custom state", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { disabled: true } });
+
+        await expect(fastPage.element).toHaveCustomState("disabled");
+    });
+
+    test("should fail (negated) when element does not have the state", async ({
+        fastPage,
+    }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).not.toHaveCustomState("disabled");
+    });
+});
+
+test.describe("SSR: element locator", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should locate the element by tag name", async ({ fastPage }) => {
+        await fastPage.setTemplate();
+
+        await expect(fastPage.element).toHaveCount(1);
+    });
+});
+
+test.describe("SSR: declarative shadow DOM", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should have a shadow root after SSR render", async ({ fastPage }) => {
+        await fastPage.setTemplate({ attributes: { label: "DSD" } });
+
+        const hasShadow = await fastPage.element.evaluate(el => el.shadowRoot !== null);
+        expect(hasShadow).toBe(true);
+    });
+});
+
+test.describe("SSR: template placeholder replacement", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should replace the fixture placeholder with rendered component HTML", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate({ attributes: { label: "test" } });
+
+        const bodyHtml = await page.locator("body").innerHTML();
+        expect(bodyHtml).not.toContain("<!--fixture-->");
+        expect(bodyHtml).toContain("<test-widget");
+    });
+
+    test("should replace the title placeholder with the test title", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate();
+
+        const title = await page.title();
+        expect(title).not.toBe("<!--fixturetitle-->");
+        expect(title.length).toBeGreaterThan(0);
+    });
+
+    test("should replace the templates placeholder with template content", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate();
+
+        const bodyHtml = await page.locator("body").innerHTML();
+        expect(bodyHtml).not.toContain("<!--templates-->");
+    });
+
+    test("should replace the stylespreload placeholder with preload links", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate();
+
+        const headHtml = await page.locator("head").innerHTML();
+        expect(headHtml).not.toContain("<!--stylespreload-->");
+        expect(headHtml).toContain("/test-theme.css");
+    });
+
+    test("should not contain any unreplaced placeholder comments", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate();
+
+        const fullHtml = await page.content();
+        expect(fullHtml).not.toContain("<!--fixture-->");
+        expect(fullHtml).not.toContain("<!--fixturetitle-->");
+        expect(fullHtml).not.toContain("<!--templates-->");
+        expect(fullHtml).not.toContain("<!--stylespreload-->");
+    });
+});
+
+test.describe("SSR: addStyleTag buffering", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should include buffered styles in the SSR page", async ({ fastPage, page }) => {
+        await fastPage.addStyleTag({
+            content: "test-widget { outline: 3px solid blue; }",
+        });
+
+        await fastPage.setTemplate();
+
+        const hasStyle = await page.evaluate(() => {
+            const styles = document.querySelectorAll("style");
+            return Array.from(styles).some(s =>
+                s.textContent?.includes("outline: 3px solid blue"),
+            );
+        });
+
+        expect(hasStyle).toBe(true);
+    });
+
+    test("should pass through addStyleTag calls after setTemplate", async ({
+        fastPage,
+        page,
+    }) => {
+        await fastPage.setTemplate();
+
+        await fastPage.addStyleTag({
+            content: "test-widget { margin: 99px; }",
+        });
+
+        const hasStyle = await page.evaluate(() => {
+            const styles = document.querySelectorAll("style");
+            return Array.from(styles).some(s => s.textContent?.includes("margin: 99px"));
+        });
+
+        expect(hasStyle).toBe(true);
+    });
+});
+
+test.describe("SSR: multiple elements", () => {
+    test.use({ tagName: "test-widget", ssr: true });
+
+    test("should handle templates with multiple instances", async ({ fastPage }) => {
+        await fastPage.setTemplate(`
+            <test-widget label="first">one</test-widget>
+            <test-widget label="second">two</test-widget>
+        `);
+
+        await expect(fastPage.element).toHaveCount(2);
+    });
+});
diff --git a/packages/fast-test-harness/src/index.ts b/packages/fast-test-harness/src/index.ts
index 406decdd3a2..e6e49fb0276 100644
--- a/packages/fast-test-harness/src/index.ts
+++ b/packages/fast-test-harness/src/index.ts
@@ -1,5 +1,19 @@
-export { CSRFixture, type ThemeTokens } from "./fixtures/csr-fixture.js";
-export { expect, test } from "./fixtures/index.js";
+export { installDomShim } from "./build/dom-shim.js";
+export { toHaveCustomState } from "./fixtures/assertions.js";
+export {
+    CSRFixture,
+    type FixtureOptions,
+    type InitialTemplateAttributes,
+    type InitialTemplateOptions,
+    type TemplateAttributes,
+    type TemplateOrOptions,
+    type ThemeTokens,
+} from "./fixtures/csr-fixture.js";
+export { expect, type Fixtures, test } from "./fixtures/index.js";
 export { SSRFixture } from "./fixtures/ssr-fixture.js";
-export { readAsset, resolveAssetUrl } from "./ssr/assets.js";
-export { renderFixture, renderTemplate } from "./ssr/render.js";
+export {
+    type ComponentRegistration,
+    createSSRRenderer,
+    type RenderResult,
+    type SSRRendererOptions,
+} from "./ssr/render.js";
diff --git a/packages/fast-test-harness/src/ssr/assets.ts b/packages/fast-test-harness/src/ssr/assets.ts
deleted file mode 100644
index 5ff9a5eac9b..00000000000
--- a/packages/fast-test-harness/src/ssr/assets.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { readFileSync } from "node:fs";
-import { join, relative } from "node:path";
-import { fileURLToPath } from "node:url";
-
-/**
- * Reads a file as a UTF-8 string. Accepts bare package specifiers
- * (resolved through `package.json` exports) or filesystem paths
- * (relative to `process.cwd()`).
- *
- * @example
- * ```ts
- * import { readAsset } from "@microsoft/fast-test-harness/ssr/assets.js";
- *
- * const template = readAsset("@my-scope/button/template.html");
- * const local = readAsset("./dist/button/button.template.html");
- * ```
- *
- * @param specifier - A bare package specifier (e.g.,
- *   `"@my-scope/button/template.html"`) or a relative/absolute
- *   filesystem path.
- * @returns The file contents as a string.
- */
-export function readAsset(specifier: string): string {
-    return readFileSync(resolveSpecifier(specifier), "utf8");
-}
-
-/**
- * Resolves a specifier to a URL path relative to the server root.
- * The returned string starts with `/` and uses forward slashes,
- * making it suitable for `href` attributes in `<link>` or `<script>`
- * tags served by the test harness.
- *
- * @example
- * ```ts
- * import { resolveAssetUrl } from "@microsoft/fast-test-harness/ssr/assets.js";
- *
- * const styles = resolveAssetUrl("@my-scope/button/styles.css");
- * // => "/node_modules/@my-scope/button/dist/button.styles.css"
- * ```
- *
- * @param specifier - A bare package specifier or a filesystem path.
- * @param root - The directory the server serves static files from.
- *   The returned URL is relative to this directory. Defaults to
- *   `process.cwd()`.
- * @returns A root-relative URL path (e.g., `"/dist/button.styles.css"`).
- */
-export function resolveAssetUrl(specifier: string, root?: string): string {
-    const resolved = resolveSpecifier(specifier);
-    const rel = relative(root ?? process.cwd(), resolved);
-    return `/${rel.replace(/\\/g, "/")}`;
-}
-
-/**
- * Resolves a specifier to an absolute filesystem path. Relative and
- * absolute paths are joined with `process.cwd()`. Bare specifiers
- * (e.g., `"@my-scope/button/template.html"`) are resolved through
- * `import.meta.resolve`, which follows `package.json` exports maps.
- *
- * @param specifier - A bare package specifier or a filesystem path.
- * @returns An absolute filesystem path.
- */
-function resolveSpecifier(specifier: string): string {
-    if (specifier.startsWith(".") || specifier.startsWith("/")) {
-        return join(process.cwd(), specifier);
-    }
-    return fileURLToPath(import.meta.resolve(specifier));
-}
diff --git a/packages/fast-test-harness/src/ssr/render.test.ts b/packages/fast-test-harness/src/ssr/render.test.ts
new file mode 100644
index 00000000000..6e81755294a
--- /dev/null
+++ b/packages/fast-test-harness/src/ssr/render.test.ts
@@ -0,0 +1,333 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+    buildEntryHtml,
+    buildState,
+    createSSRRenderer,
+    parseDefaultValue,
+    renderTemplate,
+} from "@microsoft/fast-test-harness/ssr/render.js";
+
+test.describe("parseDefaultValue", () => {
+    test("should return empty string for empty input", () => {
+        assert.strictEqual(parseDefaultValue(""), "");
+    });
+
+    test("should return empty string for 'undefined'", () => {
+        assert.strictEqual(parseDefaultValue("undefined"), "");
+    });
+
+    test("should return empty string for 'null'", () => {
+        assert.strictEqual(parseDefaultValue("null"), "");
+    });
+
+    test("should return true for 'true'", () => {
+        assert.strictEqual(parseDefaultValue("true"), true);
+    });
+
+    test("should return false for 'false'", () => {
+        assert.strictEqual(parseDefaultValue("false"), false);
+    });
+
+    test("should strip single quotes from strings", () => {
+        assert.strictEqual(parseDefaultValue("'img'"), "img");
+    });
+
+    test("should strip double quotes from strings", () => {
+        assert.strictEqual(parseDefaultValue('"hello"'), "hello");
+    });
+
+    test("should parse integers", () => {
+        assert.strictEqual(parseDefaultValue("42"), 42);
+    });
+
+    test("should parse floats", () => {
+        assert.strictEqual(parseDefaultValue("3.14"), 3.14);
+    });
+
+    test("should parse zero", () => {
+        assert.strictEqual(parseDefaultValue("0"), 0);
+    });
+
+    test("should parse JSON arrays", () => {
+        assert.deepStrictEqual(parseDefaultValue("[1,2,3]"), [1, 2, 3]);
+    });
+
+    test("should parse JSON objects", () => {
+        assert.deepStrictEqual(parseDefaultValue('{"a":1}'), { a: 1 });
+    });
+
+    test("should return empty string for unparseable values", () => {
+        assert.strictEqual(parseDefaultValue("some random text"), "");
+    });
+
+    test("should trim whitespace", () => {
+        assert.strictEqual(parseDefaultValue("  true  "), true);
+    });
+});
+
+test.describe("renderTemplate", () => {
+    test("should replace {{styles}} with a link tag", () => {
+        const result = renderTemplate(
+            "<template>{{styles}}<div>hi</div></template>",
+            "/styles.css",
+        );
+
+        assert.ok(result.includes('<link rel="stylesheet" href="/styles.css">'));
+        assert.ok(!result.includes("{{styles}}"));
+    });
+
+    test("should inject link after <template> if {{styles}} is absent", () => {
+        const result = renderTemplate(
+            "<template><div>hi</div></template>",
+            "/styles.css",
+        );
+
+        assert.ok(result.includes('<link rel="stylesheet" href="/styles.css">'));
+        assert.ok(result.indexOf("<link") > result.indexOf("<template>"));
+    });
+
+    test("should remove {{styles}} marker when styles URL is empty", () => {
+        const input = "<template>{{styles}}<div>hi</div></template>";
+        const result = renderTemplate(input, "");
+
+        assert.strictEqual(result, "<template><div>hi</div></template>");
+        assert.ok(!result.includes('<link rel="stylesheet"'));
+    });
+});
+
+test.describe("buildEntryHtml", () => {
+    test("should return raw html when 'html' key is present", () => {
+        const result = buildEntryHtml({ html: "<div>raw</div>" });
+        assert.strictEqual(result, "<div>raw</div>");
+    });
+
+    test("should build a custom element tag from tagName", () => {
+        const result = buildEntryHtml({ tagName: "my-el" });
+        assert.strictEqual(result, "<my-el></my-el>");
+    });
+
+    test("should include innerHTML", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            innerHTML: "content",
+        });
+        assert.strictEqual(result, "<my-el>content</my-el>");
+    });
+
+    test("should serialize attributes", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            attributes: JSON.stringify({ role: "button", size: "large" }),
+        });
+
+        assert.ok(result.includes('role="button"'));
+        assert.ok(result.includes('size="large"'));
+    });
+
+    test("should handle boolean true attributes", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            attributes: JSON.stringify({ disabled: true }),
+        });
+
+        assert.ok(result.includes("disabled"));
+        assert.ok(!result.includes('disabled="'));
+    });
+
+    test("should return empty string when no tagName or html", () => {
+        assert.strictEqual(buildEntryHtml({}), "");
+    });
+
+    test("should handle invalid JSON in attributes gracefully", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            attributes: "not-json",
+        });
+
+        assert.strictEqual(result, "<my-el></my-el>");
+    });
+
+    test("should omit attributes with false, null, or undefined values", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            attributes: JSON.stringify({ disabled: false, hidden: null, role: "button" }),
+        });
+
+        assert.ok(!result.includes("disabled"), `should not include disabled: ${result}`);
+        assert.ok(!result.includes("hidden"), `should not include hidden: ${result}`);
+        assert.ok(result.includes('role="button"'), `should include role: ${result}`);
+    });
+
+    test("should escape special characters in attribute values", () => {
+        const result = buildEntryHtml({
+            tagName: "my-el",
+            attributes: JSON.stringify({ title: 'a&b<c>"d' }),
+        });
+
+        assert.ok(result.includes("a&amp;b&lt;c&gt;&quot;d"), `got: ${result}`);
+    });
+});
+
+test.describe("buildState", () => {
+    test("should extract attributes into state", () => {
+        const state = buildState({
+            attributes: JSON.stringify({ size: "large", active: true }),
+        });
+
+        assert.strictEqual(state.size, "large");
+        assert.strictEqual(state.active, true);
+    });
+
+    test("should add hyphen-stripped variants", () => {
+        const state = buildState({
+            attributes: JSON.stringify({ "aria-label": "Close" }),
+        });
+
+        assert.strictEqual(state["aria-label"], "Close");
+        assert.strictEqual(state["arialabel"], "Close");
+    });
+
+    test("should return empty state for missing attributes", () => {
+        const state = buildState({});
+        assert.deepStrictEqual(state, {});
+    });
+
+    test("should handle invalid JSON gracefully", () => {
+        const state = buildState({ attributes: "broken" });
+        assert.deepStrictEqual(state, {});
+    });
+});
+
+test.describe("createSSRRenderer", () => {
+    test("should return a render function when @microsoft/fast-build is installed", () => {
+        const renderer = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        assert.ok(typeof renderer.render === "function");
+    });
+
+    test("should return a RenderResult from render()", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({ tagName: "test-widget", innerHTML: "hello" });
+
+        assert.ok("template" in result, "result should have template");
+        assert.ok("fixture" in result, "result should have fixture");
+        assert.ok("preloadLinks" in result, "result should have preloadLinks");
+    });
+
+    test("should render a custom element tag in the fixture", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({ tagName: "test-widget", innerHTML: "content" });
+
+        assert.ok(
+            result.fixture.includes("<test-widget"),
+            `fixture should include element, got: ${result.fixture}`,
+        );
+        assert.ok(
+            result.fixture.includes("content"),
+            `fixture should include innerHTML, got: ${result.fixture}`,
+        );
+    });
+
+    test("should include attributes in the rendered fixture", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({
+            tagName: "test-widget",
+            attributes: JSON.stringify({ label: "Test", disabled: true }),
+        });
+
+        assert.ok(
+            result.fixture.includes("label="),
+            `fixture should include label attr, got: ${result.fixture}`,
+        );
+        assert.ok(
+            result.fixture.includes("disabled"),
+            `fixture should include disabled attr, got: ${result.fixture}`,
+        );
+    });
+
+    test("should include theme stylesheet in preloadLinks", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+            themeStylesheet: "/theme.css",
+        });
+
+        const result = render({ tagName: "test-widget" });
+
+        assert.ok(
+            result.preloadLinks.includes("/theme.css"),
+            `preloadLinks should include theme URL, got: ${result.preloadLinks}`,
+        );
+    });
+
+    test("should return empty preloadLinks without a theme", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({ tagName: "test-widget" });
+
+        assert.strictEqual(result.preloadLinks, "");
+    });
+
+    test("should handle raw HTML via the html key", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({
+            html: "<test-widget>raw html</test-widget>",
+        });
+
+        assert.ok(
+            result.fixture.includes("raw html"),
+            `fixture should contain raw html content, got: ${result.fixture}`,
+        );
+    });
+
+    test("should return empty fixture for empty query", () => {
+        const { render } = createSSRRenderer({
+            tagPrefix: "test",
+            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+        });
+
+        const result = render({});
+
+        assert.strictEqual(result.fixture, "");
+    });
+
+    test("should work with monolithic packageName mode", () => {
+        // The test harness itself doesn't have component subdirectories,
+        // so the template map will be empty — but the factory should not throw.
+        const { render } = createSSRRenderer({
+            tagPrefix: "fast",
+            packageName: "@microsoft/fast-test-harness",
+            distDir: "dist/esm",
+        });
+
+        assert.ok(typeof render === "function");
+
+        const result = render({ tagName: "fast-widget", innerHTML: "hello" });
+
+        // Without matching templates the WASM renderer should still produce output.
+        assert.ok("fixture" in result);
+    });
+});
diff --git a/packages/fast-test-harness/src/ssr/render.ts b/packages/fast-test-harness/src/ssr/render.ts
index 64fd25a64cd..fe7cfffa892 100644
--- a/packages/fast-test-harness/src/ssr/render.ts
+++ b/packages/fast-test-harness/src/ssr/render.ts
@@ -1,229 +1,518 @@
-export function renderTemplate(rawTemplate: string, styles: string): string {
-    const template = rawTemplate.replace(
-        "{{styles}}",
-        `<link rel="stylesheet" href="${styles}">`,
-    );
+/**
+ * SSR rendering powered by `@microsoft/fast-build`'s WASM renderer.
+ *
+ * Provides a high-level `createSSRRenderer()` factory that scans for
+ * component build artifacts (f-templates, stylesheets) and returns a
+ * `render()` function compatible with the test harness server's
+ * `entry-server.ts` contract.
+ *
+ * Supports two layout modes:
+ *
+ * **Multi-component package**: one package contains all
+ * components in subdirectories.
+ * ```ts
+ * const { render } = createSSRRenderer({
+ *     packageName: "@fluentui/web-components",
+ *     tagPrefix: "fluent",
+ * });
+ * ```
+ *
+ * **Per-component packages**: each component is a separate npm package with
+ * flat exports.
+ * ```ts
+ * const { render } = createSSRRenderer({
+ *     tagPrefix: "mai",
+ *     components: [
+ *         { name: "button", packageName: "@mai-ui/button" },
+ *         { name: "checkbox", packageName: "@mai-ui/checkbox" },
+ *     ],
+ * });
+ * ```
+ */
+
+import { globSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export interface ComponentRegistration {
+    /**
+     * Component name (e.g., "button"). Combined with `tagPrefix` to
+     * form the tag name.
+     */
+    name: string;
+
+    /**
+     * The npm package name for this component
+     * (e.g., "@mai-ui/button").
+     */
+    packageName: string;
+}
+
+export interface SSRRendererOptions {
+    /**
+     * Tag name prefix for custom elements (e.g., "fluent", "mai").
+     */
+    tagPrefix: string;
+
+    /**
+     * The npm package name used to resolve component build artifacts
+     * when all components live in subdirectories of a single package
+     * (Fluent-style). Mutually exclusive with `components`.
+     */
+    packageName?: string;
+
+    /**
+     * Explicit list of per-component packages (MAI-style). Each entry
+     * maps a component name to its npm package. Mutually exclusive
+     * with `packageName`.
+     */
+    components?: ComponentRegistration[];
+
+    /**
+     * Directory containing compiled build artifacts, relative to the
+     * package root. Only used with `packageName`.
+     * @default "dist/esm"
+     */
+    distDir?: string;
+
+    /**
+     * Stylesheet URL or server-relative path for a global theme
+     * stylesheet to include in every SSR fixture page.
+     *
+     * The value is used directly as the `<link>` tag's `href`.
+     * Callers should provide a fully qualified URL or a
+     * server-relative path.
+     */
+    themeStylesheet?: string;
+}
 
-    if (template === rawTemplate && styles) {
-        return template.replace(
-            /(<template[^>]*>)/i,
-            match => `${match}<link rel="stylesheet" href="${styles}">`,
+export interface RenderResult {
+    /** All f-template definitions concatenated, with styles injected. */
+    template: string;
+    /** The rendered fixture HTML with DSD injected. */
+    fixture: string;
+    /** Preload link tags (empty string when using fast-build). */
+    preloadLinks: string;
+}
+
+/**
+ * Try to load the `@microsoft/fast-build` WASM module. Returns `null`
+ * if the package is not installed.
+ */
+function loadWasm(): any | null {
+    try {
+        // The WASM module is CJS and must be loaded synchronously.
+        // Use a targeted createRequire anchored to this module so it
+        // resolves from the harness's own dependencies.
+        return createRequire(import.meta.url)(
+            "@microsoft/fast-build/wasm/microsoft_fast_build.js",
         );
+    } catch {
+        return null;
     }
+}
 
-    return template;
+/**
+ * Resolve a file from a package export. Returns the absolute path or null.
+ */
+function resolveSpecifier(specifier: string): string | null {
+    try {
+        return fileURLToPath(import.meta.resolve(specifier));
+    } catch {
+        return null;
+    }
 }
 
-function processDsdTemplate(
-    dsd: string,
-    templateValues: Record<string, unknown> = {},
-): string {
-    // Uses scanning instead of regex to avoid O(n²) backtracking on untrusted input
-    let result = "";
-    let lastIndex = 0;
+/**
+ * Resolve a package root directory from its package.json export.
+ */
+function resolvePackageRoot(packageName: string): string {
+    return dirname(fileURLToPath(import.meta.resolve(`${packageName}/package.json`)));
+}
 
-    for (;;) {
-        const open = dsd.indexOf("{{", lastIndex);
-        if (open === -1) {
-            break;
-        }
+/**
+ * Convert an absolute path to a server-relative URL.
+ */
+function toServerUrl(absolutePath: string, packageRoot: string): string {
+    return `/${relative(packageRoot, absolutePath).replace(/\\/g, "/")}`;
+}
 
-        const close = dsd.indexOf("}}", open + 2);
-        if (close === -1) {
-            break;
-        }
+/**
+ * Parse a JavaScript default value string from CEM into a JSON-safe value.
+ * @internal
+ */
+export function parseDefaultValue(raw: string): unknown {
+    const trimmed = raw.trim();
 
-        const varName = dsd.slice(open + 2, close);
-        const afterClose = close + 2;
+    if (trimmed === "" || trimmed === "undefined" || trimmed === "null") {
+        return "";
+    }
 
-        // Skip non-identifier placeholders.
-        if (!/^[a-zA-Z0-9]+$/.test(varName)) {
-            result += dsd.slice(lastIndex, afterClose);
-            lastIndex = afterClose;
-            continue;
-        }
+    if (trimmed === "true") {
+        return true;
+    }
 
-        const value = templateValues[varName];
+    if (trimmed === "false") {
+        return false;
+    }
 
-        // Detect attribute binding by scanning backwards for =['"]?
-        let pos = open;
-        let quote = "";
+    if (trimmed.startsWith("'") || trimmed.startsWith('"')) {
+        return trimmed.slice(1, -1);
+    }
 
-        // Optional opening quote before {{
-        if (pos > 0 && (dsd[pos - 1] === '"' || dsd[pos - 1] === "'")) {
-            quote = dsd[pos - 1];
-            pos--;
-        }
+    const num = Number(trimmed);
+    if (!Number.isNaN(num)) {
+        return num;
+    }
 
-        // Check for matching closing quote after }}
-        let endPos = afterClose;
-        if (quote) {
-            if (endPos < dsd.length && dsd[endPos] === quote) {
-                endPos++;
-            } else {
-                // No matching close quote — reset and treat as text.
-                quote = "";
-                pos = open;
-            }
-        }
+    try {
+        return JSON.parse(trimmed);
+    } catch {
+        return "";
+    }
+}
 
-        if (pos > 0 && dsd[pos - 1] === "=") {
-            pos--; // skip =
+/**
+ * Load a Custom Elements Manifest and extract default state for
+ * each custom element declaration. Returns a map of tag names to
+ * their default property values.
+ */
+function loadDefaultStateFromCEM(
+    packageName: string,
+    tagPrefix: string,
+): Map<string, Record<string, unknown>> {
+    const cemPath = resolveSpecifier(`${packageName}/custom-elements.json`);
+    if (!cemPath) {
+        return new Map();
+    }
 
-            // Scan backwards for the attribute name.
-            const nameEnd = pos;
-            while (pos > 0 && !/[\s>"'{}=?]/.test(dsd[pos - 1])) {
-                pos--;
-            }
-            const attrName = dsd.slice(pos, nameEnd);
-
-            if (attrName.length > 0) {
-                // Check for ? (boolean attribute) prefix.
-                let isBoolean = false;
-                if (pos > 0 && dsd[pos - 1] === "?") {
-                    isBoolean = true;
-                    pos--;
-                }
+    try {
+        const cem = JSON.parse(readFileSync(cemPath, "utf8"));
+        const result = new Map<string, Record<string, unknown>>();
 
-                // Capture one leading whitespace character.
-                let spaceChar = "";
-                if (pos > 0 && /\s/.test(dsd[pos - 1])) {
-                    pos--;
-                    spaceChar = dsd[pos];
+        for (const mod of cem.modules ?? []) {
+            for (const decl of mod.declarations ?? []) {
+                if (!decl.customElement) {
+                    continue;
                 }
-
-                // Emit everything before this attribute binding.
-                result += dsd.slice(lastIndex, pos);
-
-                if (value === undefined) {
-                    // Remove attribute entirely.
-                } else if (isBoolean) {
-                    if (value) {
-                        result += spaceChar + attrName;
+                const tagName =
+                    decl.tagName ?? `${tagPrefix}-${decl.name?.toLowerCase()}`;
+                const state: Record<string, unknown> = {};
+                for (const member of decl.members ?? []) {
+                    if (member.kind !== "field" || member.privacy !== "public") {
+                        continue;
                     }
-                } else {
-                    result += `${spaceChar}${attrName}=${quote}${value}${quote}`;
+                    state[member.name] =
+                        member.default != null
+                            ? parseDefaultValue(String(member.default))
+                            : "";
+                }
+                if (Object.keys(state).length > 0) {
+                    result.set(tagName, state);
                 }
-
-                lastIndex = endPos;
-                continue;
             }
         }
 
-        // Standalone {{varName}} in text content.
-        result += dsd.slice(lastIndex, open);
-        result += value !== undefined ? String(value) : "";
-        lastIndex = afterClose;
+        return result;
+    } catch {
+        return new Map();
     }
+}
 
-    result += dsd.slice(lastIndex);
-    return result;
+interface ComponentArtifacts {
+    componentName: string;
+    fTemplate: string | null;
+    stylesUrl: string;
 }
 
-export function renderFixture(
-    queryObj: Record<string, string> = {},
-    dsdTemplate?: string,
-    styles?: string,
-    templateData?: Record<string, unknown>,
-    childTemplates?: Record<string, string>,
-) {
-    let fixture = "";
+/**
+ * Load artifacts for a component from a monolithic package
+ * (e.g., `@fluentui/web-components/button/template.html`).
+ */
+function loadMonolithicComponent(
+    packageName: string,
+    componentDir: string,
+    packageRoot: string,
+): ComponentArtifacts {
+    const fTemplatePath = resolveSpecifier(
+        `${packageName}/${componentDir}/template.html`,
+    );
+    const stylesPath = resolveSpecifier(`${packageName}/${componentDir}/styles.css`);
+
+    return {
+        componentName: componentDir,
+        fTemplate: fTemplatePath ? readFileSync(fTemplatePath, "utf8") : null,
+        stylesUrl: stylesPath ? toServerUrl(stylesPath, packageRoot) : "",
+    };
+}
+
+/**
+ * Load artifacts for a component from a per-component package
+ * (e.g., `@mai-ui/button/template.html`).
+ */
+function loadPerPackageComponent(reg: ComponentRegistration): ComponentArtifacts {
+    const fTemplatePath = resolveSpecifier(`${reg.packageName}/template.html`);
+
+    return {
+        componentName: reg.name,
+        fTemplate: fTemplatePath ? readFileSync(fTemplatePath, "utf8") : null,
+        stylesUrl: `${reg.packageName}/styles.css`,
+    };
+}
+
+/**
+ * Replace the `{{styles}}` placeholder in an f-template with a
+ * stylesheet `<link>` tag. Falls back to injecting after the opening
+ * `<template>` tag if the placeholder is absent.
+ * @internal
+ */
+export function renderTemplate(rawTemplate: string, styles: string): string {
+    if (!styles) {
+        return rawTemplate.replace("{{styles}}", "");
+    }
+
+    const link = `<link rel="stylesheet" href="${styles}">`;
+    const template = rawTemplate.replace("{{styles}}", link);
+
+    if (template === rawTemplate) {
+        return template.replace(/(<template[^>]*>)/i, match => `${match}${link}`);
+    }
+
+    return template;
+}
+
+/**
+ * Build the entry HTML that the WASM renderer processes.
+ * Constructs either a raw HTML fixture or a single custom element
+ * from the query parameters.
+ * @internal
+ */
+export function buildEntryHtml(queryObj: Record<string, string>): string {
     if ("html" in queryObj) {
-        fixture = String(queryObj.html);
-    } else if (queryObj.tagName) {
-        const tagName = String(queryObj.tagName);
-        let attributes: Record<string, unknown> = {};
-        if (queryObj.attributes) {
-            try {
-                attributes =
-                    typeof queryObj.attributes === "string"
-                        ? JSON.parse(queryObj.attributes)
-                        : queryObj.attributes;
-            } catch {
-                // fallback: ignore attributes if not valid JSON
-            }
+        return String(queryObj.html);
+    }
+
+    const tagName = String(queryObj.tagName ?? "");
+    if (!tagName) {
+        return "";
+    }
+
+    let attributes: Record<string, unknown> = {};
+    if (queryObj.attributes) {
+        try {
+            attributes =
+                typeof queryObj.attributes === "string"
+                    ? JSON.parse(queryObj.attributes)
+                    : queryObj.attributes;
+        } catch {
+            // Ignore invalid JSON.
         }
-        const innerHTML = queryObj.innerHTML ? String(queryObj.innerHTML) : "";
-        const attributesString = Object.entries(attributes)
-            .map(([key, value]) =>
-                value === true ? key : `${key}="${String(value).replace(/"/g, "")}"`,
-            )
-            .join(" ");
-
-        let processedDsd = "";
-
-        if (dsdTemplate) {
-            const normalizedAttributes: Record<string, unknown> = {};
-            for (const [key, value] of Object.entries(attributes)) {
-                normalizedAttributes[key] = value;
-                const stripped = key.replace(/-/g, "");
-                if (stripped !== key) {
-                    normalizedAttributes[stripped] = value;
-                }
-            }
-            const templateValues = {
-                ...normalizedAttributes,
-                ...templateData,
-            };
+    }
 
-            processedDsd = processDsdTemplate(dsdTemplate, templateValues);
+    const innerHTML = queryObj.innerHTML ? String(queryObj.innerHTML) : "";
 
-            if (styles) {
-                processedDsd = renderTemplate(processedDsd, styles);
+    const attrs = Object.entries(attributes)
+        .filter(([, value]) => value !== false && value != null)
+        .map(([key, value]) => {
+            if (value === true) {
+                return key;
             }
-        }
+            const escaped = String(value)
+                .replace(/&/g, "&amp;")
+                .replace(/"/g, "&quot;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;");
+            return `${key}="${escaped}"`;
+        })
+        .join(" ");
+
+    return `<${tagName}${attrs ? ` ${attrs}` : ""}>${innerHTML}</${tagName}>`;
+}
 
-        // Inject DSD into child custom elements in the innerHTML
-        // before assembling the fixture, so the root element (which
-        // already has its own DSD from dsdTemplate) isn't matched.
-        let processedInnerHTML = innerHTML.trim();
-        if (childTemplates) {
-            processedInnerHTML = injectChildTemplates(processedInnerHTML, childTemplates);
+/**
+ * Build the state JSON for the WASM renderer from the query
+ * parameters. Includes attribute values and normalised (hyphen-
+ * stripped) variants so bindings like `{{arialabel}}` resolve for
+ * an `aria-label` HTML attribute.
+ * @internal
+ */
+export function buildState(queryObj: Record<string, string>): Record<string, unknown> {
+    let attributes: Record<string, unknown> = {};
+    if (queryObj.attributes) {
+        try {
+            attributes =
+                typeof queryObj.attributes === "string"
+                    ? JSON.parse(queryObj.attributes)
+                    : queryObj.attributes;
+        } catch {
+            // Ignore invalid JSON.
         }
-
-        fixture = `<${tagName}${
-            attributesString ? ` ${attributesString}` : ""
-        }>${processedDsd}${processedInnerHTML}</${tagName}>`;
     }
 
-    if (childTemplates && "html" in queryObj) {
-        fixture = injectChildTemplates(fixture, childTemplates);
+    const state: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(attributes)) {
+        state[key] = value;
+        const stripped = key.replace(/-/g, "");
+        if (stripped !== key) {
+            state[stripped] = value;
+        }
     }
-
-    return fixture;
+    return state;
 }
 
 /**
- * Inject DSD templates into custom elements found in an HTML string.
+ * Create an SSR renderer that uses `@microsoft/fast-build`'s WASM
+ * module to render f-templates into declarative shadow DOM on each
+ * request, with full expression evaluation and nested component
+ * support.
+ *
+ * Supports two modes:
+ * - **`packageName`**: Scans a monolithic package's dist directory for
+ *   components in subdirectories (Fluent-style).
+ * - **`components`**: Uses an explicit list of per-component packages
+ *   with flat exports (MAI-style).
  */
-function injectChildTemplates(
-    html: string,
-    childTemplates: Record<string, string>,
-): string {
-    for (const [childTagName, childDsd] of Object.entries(childTemplates)) {
-        // Use (?=[\s>/]) so hyphenated custom element names like
-        // "my-radio" don't match "my-radio-group".
-        html = html.replace(
-            new RegExp(`(<${childTagName}(?=[\\s>/])[^>]*>)`, "g"),
-            (match, openingTag: string) => {
-                const childAttrs: Record<string, unknown> = {};
-                const attrRegex = /([a-zA-Z0-9-]+)="([^"]*)"/g;
-                for (const attrMatch of openingTag.matchAll(attrRegex)) {
-                    childAttrs[attrMatch[1]] = attrMatch[2];
-                }
+export function createSSRRenderer(options: SSRRendererOptions): {
+    render: (queryObj: Record<string, string>) => RenderResult;
+} {
+    const { tagPrefix } = options;
+
+    if (options.components && options.packageName) {
+        throw new Error(
+            "createSSRRenderer: 'components' and 'packageName' are mutually exclusive. " +
+                "Provide one or the other, not both.",
+        );
+    }
+
+    const wasm = loadWasm();
 
-                return `${openingTag}${processDsdTemplate(childDsd, childAttrs)}`;
-            },
+    if (!wasm) {
+        throw new Error(
+            "@microsoft/fast-build is required for SSR rendering. " +
+                "Install it as a dependency to enable WASM-based template rendering.",
         );
     }
-    return html;
-}
 
-export function renderPreloadLinks(styles: string[], tokensThemeUrl?: string): string {
-    return [
-        tokensThemeUrl ? `<link rel="stylesheet" href="${tokensThemeUrl}">` : false,
-        ...styles.map(style => `<link rel="preload" href="${style}" as="style">`),
-    ]
-        .filter(Boolean)
-        .join("\n");
+    // Maps keyed by component name (e.g., "button").
+    const fTemplatesByName = new Map<string, string>();
+    const styleUrlsByName = new Map<string, string>();
+
+    // Collect component artifacts from either mode.
+    const artifacts: ComponentArtifacts[] = [];
+
+    if (options.components) {
+        // Per-component packages (MAI-style).
+        for (const reg of options.components) {
+            artifacts.push(loadPerPackageComponent(reg));
+        }
+    } else if (options.packageName) {
+        // Monolithic package (Fluent-style).
+        const packageRoot = resolvePackageRoot(options.packageName);
+        const distDir = join(packageRoot, options.distDir ?? "dist/esm");
+        const pattern = "**/*.template.html";
+
+        for (const templatePath of globSync(pattern, { cwd: distDir })) {
+            if (
+                templatePath.includes("template-dsd") ||
+                templatePath.includes("template-webui")
+            ) {
+                continue;
+            }
+            const componentDir = dirname(templatePath).replace(/\\/g, "/");
+            if (componentDir === ".") {
+                continue;
+            }
+            artifacts.push(
+                loadMonolithicComponent(options.packageName, componentDir, packageRoot),
+            );
+        }
+    }
+
+    // Populate maps and collect default state from CEM.
+    const defaultStateByTag = new Map<string, Record<string, unknown>>();
+    for (const art of artifacts) {
+        const tagName = `${tagPrefix}-${art.componentName}`;
+        if (art.fTemplate) {
+            fTemplatesByName.set(art.componentName, art.fTemplate);
+        }
+        styleUrlsByName.set(art.componentName, art.stylesUrl);
+    }
+
+    // Load CEM defaults per-package (each package may contain multiple elements).
+    if (options.components) {
+        for (const reg of options.components) {
+            const cemDefaults = loadDefaultStateFromCEM(reg.packageName, tagPrefix);
+            for (const [tag, state] of cemDefaults) {
+                defaultStateByTag.set(tag, state);
+            }
+        }
+    } else if (options.packageName) {
+        const cemDefaults = loadDefaultStateFromCEM(options.packageName, tagPrefix);
+        for (const [tag, state] of cemDefaults) {
+            defaultStateByTag.set(tag, state);
+        }
+    }
+
+    // Inject styles into f-templates, then parse into the WASM
+    // templates map (tag-name → inner template content).
+    const templatesMap: Record<string, string> = {};
+    for (const [name, fTemplate] of fTemplatesByName) {
+        const styled = renderTemplate(fTemplate, styleUrlsByName.get(name) ?? "");
+        fTemplatesByName.set(name, styled);
+
+        const parsed: Array<{ name: string | null; content: string }> = JSON.parse(
+            wasm.parse_f_templates(styled),
+        );
+        const entry = parsed.find((t: any) => t.name !== null);
+        if (entry) {
+            templatesMap[`${tagPrefix}-${name}`] = entry.content;
+        } else {
+            console.warn(`No named template found for ${tagPrefix}-${name}`);
+        }
+    }
+    const templatesJson = JSON.stringify(templatesMap);
+
+    // Concatenate all f-templates (with styles) for client hydration.
+    const allFTemplates = [...fTemplatesByName.values()].join("\n");
+
+    // Resolve theme stylesheet if provided.
+    let preloadLinks = "";
+    if (options.themeStylesheet) {
+        preloadLinks = `<link rel="stylesheet" href="${options.themeStylesheet}">`;
+    }
+
+    return {
+        render(queryObj: Record<string, string> = {}): RenderResult {
+            const entryHtml = buildEntryHtml(queryObj);
+            const requestState = buildState(queryObj);
+
+            // Merge CEM default state (base) with request state (overrides).
+            const tagName = String(queryObj.tagName ?? "");
+            const defaults = defaultStateByTag.get(tagName) ?? {};
+            const state = { ...defaults, ...requestState };
+
+            let fixture = "";
+            if (entryHtml) {
+                try {
+                    const rendered: string = wasm.render_entry_with_templates(
+                        `<html><body>${entryHtml}</body></html>`,
+                        templatesJson,
+                        JSON.stringify(state),
+                        "camelCase",
+                    );
+
+                    // Extract body content from the rendered document.
+                    const bodyMatch = rendered.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+                    fixture = bodyMatch?.[1] ?? entryHtml;
+                } catch (e) {
+                    // Fall back to the raw entry HTML if rendering fails.
+                    console.error("WASM render failed:", e);
+                    fixture = entryHtml;
+                }
+            }
+
+            return { template: allFTemplates, fixture, preloadLinks };
+        },
+    };
 }
diff --git a/packages/fast-test-harness/start.mjs b/packages/fast-test-harness/start.mjs
index ba0e7fe39ba..94bb8a0d397 100755
--- a/packages/fast-test-harness/start.mjs
+++ b/packages/fast-test-harness/start.mjs
@@ -1,4 +1,244 @@
 #!/usr/bin/env node
-import { startServer } from "./server.mjs";
+import { readFileSync } from "node:fs";
+import { parseArgs } from "node:util";
 
-await startServer();
+const subcommands = new Set([
+    "serve",
+    "generate-templates",
+    "generate-stylesheets",
+    "generate-webui-templates",
+]);
+const firstArg = process.argv[2];
+const subcommand = subcommands.has(firstArg) ? firstArg : null;
+const looksLikeSubcommand = firstArg && !firstArg.startsWith("-");
+const args = subcommand ? process.argv.slice(3) : process.argv.slice(2);
+
+function showVersion() {
+    const { version } = JSON.parse(
+        readFileSync(new URL("./package.json", import.meta.url), "utf-8"),
+    );
+    console.log(version);
+    process.exit(0);
+}
+
+function showHelp() {
+    console.log(`Usage: fast-test-harness [command] [options]
+
+Commands:
+  serve                    Start the test harness dev server (default)
+  generate-templates       Generate <f-template> HTML files from compiled templates
+  generate-stylesheets     Generate CSS files from compiled ElementStyles
+  generate-webui-templates Generate WebUI-compatible DSD templates from compiled templates
+
+Run fast-test-harness <command> --help for command-specific options.
+
+Options:
+  -v, --version            Show version number
+  -h, --help               Show this help message
+`);
+    process.exit(0);
+}
+
+// ── serve (default) ─────────────────────────────────────────────────────
+async function runServe() {
+    const { values } = parseArgs({
+        args,
+        options: {
+            port: { type: "string", short: "p" },
+            base: { type: "string", short: "b" },
+            root: { type: "string", short: "r" },
+            config: { type: "string", short: "c" },
+            debug: { type: "boolean", short: "d", default: false },
+            help: { type: "boolean", short: "h", default: false },
+            version: { type: "boolean", short: "v", default: false },
+        },
+    });
+
+    if (values.version) showVersion();
+    if (values.help) {
+        console.log(`Usage: fast-test-harness [serve] [options]
+
+Options:
+  -p, --port <number>  Server port (env: PORT, default: 3278)
+  -b, --base <path>    Base URL path (env: BASE, default: /)
+  -r, --root <path>    Vite root directory (default: <cwd>/test)
+  -c, --config <path>  Vite config file path (default: Vite auto-discovery)
+  -d, --debug          Write SSR fixtures to temp/ for inspection
+  -v, --version        Show version number
+  -h, --help           Show this help message
+`);
+        process.exit(0);
+    }
+
+    const { startServer } = await import("./server.mjs");
+
+    const port = values.port ? Number(values.port) : undefined;
+    if (port !== undefined && (!Number.isInteger(port) || port < 1 || port > 65535)) {
+        console.error(`Error: Invalid port number: ${values.port}`);
+        process.exit(1);
+    }
+
+    await startServer(process.cwd(), values.root, values.config, {
+        ...(port && { port }),
+        ...(values.base && { base: values.base }),
+        ...(values.debug && { debug: true }),
+    });
+}
+
+// ── generate-templates ──────────────────────────────────────────────────
+async function runGenerateTemplates() {
+    const { values } = parseArgs({
+        args,
+        options: {
+            cwd: { type: "string" },
+            "dist-dir": { type: "string" },
+            "out-dir": { type: "string" },
+            pattern: { type: "string" },
+            "tag-prefix": { type: "string" },
+            help: { type: "boolean", short: "h", default: false },
+            version: { type: "boolean", short: "v", default: false },
+        },
+    });
+
+    if (values.version) showVersion();
+    if (values.help) {
+        console.log(`Usage: fast-test-harness generate-templates [options]
+
+Generate <f-template> HTML files from compiled FAST Element template modules.
+
+Options:
+  --cwd <path>             Package root directory (default: cwd)
+  --dist-dir <path>        Compiled JS directory, relative to cwd (default: dist)
+  --out-dir <path>         Output directory for HTML files (default: same as dist-dir)
+  --pattern <glob>         Glob for template modules (default: **/*.template.js)
+  --tag-prefix <prefix>    Tag name prefix (default: fast)
+  -v, --version            Show version number
+  -h, --help               Show this help message
+`);
+        process.exit(0);
+    }
+
+    const { generateFTemplates } = await import("./dist/esm/build/generate-templates.js");
+    await generateFTemplates({
+        ...(values.cwd && { cwd: values.cwd }),
+        ...(values["dist-dir"] && { distDir: values["dist-dir"] }),
+        ...(values["out-dir"] && { outDir: values["out-dir"] }),
+        ...(values.pattern && { pattern: values.pattern }),
+        ...(values["tag-prefix"] && { tagPrefix: values["tag-prefix"] }),
+    });
+}
+
+// ── generate-stylesheets ────────────────────────────────────────────────
+async function runGenerateStylesheets() {
+    const { values } = parseArgs({
+        args,
+        options: {
+            cwd: { type: "string" },
+            "dist-dir": { type: "string" },
+            "out-dir": { type: "string" },
+            pattern: { type: "string" },
+            help: { type: "boolean", short: "h", default: false },
+            version: { type: "boolean", short: "v", default: false },
+        },
+    });
+
+    if (values.version) showVersion();
+    if (values.help) {
+        console.log(`Usage: fast-test-harness generate-stylesheets [options]
+
+Generate CSS files from compiled FAST Element style modules.
+
+Options:
+  --cwd <path>             Package root directory (default: cwd)
+  --dist-dir <path>        Compiled JS directory, relative to cwd (default: dist)
+  --out-dir <path>         Output directory for CSS files (default: same as dist-dir)
+  --pattern <glob>         Glob for style modules (default: **/*.styles.js)
+  -v, --version            Show version number
+  -h, --help               Show this help message
+`);
+        process.exit(0);
+    }
+
+    const { generateStylesheets } = await import(
+        "./dist/esm/build/generate-stylesheets.js"
+    );
+    await generateStylesheets({
+        ...(values.cwd && { cwd: values.cwd }),
+        ...(values["dist-dir"] && { distDir: values["dist-dir"] }),
+        ...(values["out-dir"] && { outDir: values["out-dir"] }),
+        ...(values.pattern && { pattern: values.pattern }),
+    });
+}
+
+// ── generate-webui-templates ─────────────────────────────────────────────
+async function runGenerateWebuiTemplates() {
+    const { values } = parseArgs({
+        args,
+        options: {
+            cwd: { type: "string" },
+            "dist-dir": { type: "string" },
+            "out-dir": { type: "string" },
+            pattern: { type: "string" },
+            "tag-prefix": { type: "string" },
+            help: { type: "boolean", short: "h", default: false },
+            version: { type: "boolean", short: "v", default: false },
+        },
+    });
+
+    if (values.version) showVersion();
+    if (values.help) {
+        console.log(`Usage: fast-test-harness generate-webui-templates [options]
+
+Generate WebUI-compatible DSD template files from compiled FAST Element template modules.
+Strips client-side bindings and the f-template wrapper, outputs <template shadowrootmode="open">.
+
+Options:
+  --cwd <path>             Package root directory (default: cwd)
+  --dist-dir <path>        Compiled JS directory, relative to cwd (default: dist)
+  --out-dir <path>         Output directory for HTML files (default: same as dist-dir)
+  --pattern <glob>         Glob for template modules (default: **/*.template.js)
+  --tag-prefix <prefix>    Tag name prefix (default: fast)
+  -v, --version            Show version number
+  -h, --help               Show this help message
+`);
+        process.exit(0);
+    }
+
+    const { generateWebuiTemplates } = await import(
+        "./dist/esm/build/generate-webui-templates.js"
+    );
+    await generateWebuiTemplates({
+        ...(values.cwd && { cwd: values.cwd }),
+        ...(values["dist-dir"] && { distDir: values["dist-dir"] }),
+        ...(values["out-dir"] && { outDir: values["out-dir"] }),
+        ...(values.pattern && { pattern: values.pattern }),
+        ...(values["tag-prefix"] && { tagPrefix: values["tag-prefix"] }),
+    });
+}
+
+// ── dispatch ────────────────────────────────────────────────────────────
+// Top-level --version / --help before subcommand dispatch
+if (args.includes("--version") && !subcommand) showVersion();
+if (args.includes("--help") && !subcommand) showHelp();
+
+if (looksLikeSubcommand && !subcommand) {
+    console.error(
+        `Unknown command: ${firstArg}\n\nAvailable commands: serve, generate-templates, generate-stylesheets, generate-webui-templates\nRun fast-test-harness --help for usage.\n`,
+    );
+    process.exit(1);
+}
+
+switch (subcommand) {
+    case "generate-templates":
+        await runGenerateTemplates();
+        break;
+    case "generate-stylesheets":
+        await runGenerateStylesheets();
+        break;
+    case "generate-webui-templates":
+        await runGenerateWebuiTemplates();
+        break;
+    default:
+        await runServe();
+        break;
+}
diff --git a/packages/fast-test-harness/test/index.html b/packages/fast-test-harness/test/index.html
new file mode 100644
index 00000000000..4c5246c6759
--- /dev/null
+++ b/packages/fast-test-harness/test/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Fast Test Harness — Self Test</title>
+        <link rel="stylesheet" href="/test-theme.css" />
+    </head>
+    <body>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-test-harness/test/public/test-theme.css b/packages/fast-test-harness/test/public/test-theme.css
new file mode 100644
index 00000000000..55159a9267d
--- /dev/null
+++ b/packages/fast-test-harness/test/public/test-theme.css
@@ -0,0 +1,7 @@
+:root {
+    --test-theme-color: orange;
+}
+
+* {
+    color: var(--test-theme-color);
+}
diff --git a/packages/fast-test-harness/test/src/entry-client.ts b/packages/fast-test-harness/test/src/entry-client.ts
new file mode 100644
index 00000000000..46e3d02177f
--- /dev/null
+++ b/packages/fast-test-harness/test/src/entry-client.ts
@@ -0,0 +1,9 @@
+import "@microsoft/fast-test-harness/ssr/entry-client.js";
+
+import { RenderableFASTElement } from "@microsoft/fast-html";
+import { definition, TestWidget } from "./test-widget/test-widget.js";
+
+RenderableFASTElement(TestWidget).defineAsync({
+    name: definition.name,
+    templateOptions: "defer-and-hydrate",
+});
diff --git a/packages/fast-test-harness/test/src/entry-server.ts b/packages/fast-test-harness/test/src/entry-server.ts
new file mode 100644
index 00000000000..99c94cc89d0
--- /dev/null
+++ b/packages/fast-test-harness/test/src/entry-server.ts
@@ -0,0 +1,9 @@
+import { createSSRRenderer } from "@microsoft/fast-test-harness/ssr/render.js";
+
+const { render } = createSSRRenderer({
+    tagPrefix: "test",
+    components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
+    themeStylesheet: "/test-theme.css",
+});
+
+export { render };
diff --git a/packages/fast-test-harness/test/src/main.ts b/packages/fast-test-harness/test/src/main.ts
new file mode 100644
index 00000000000..9693f03ffee
--- /dev/null
+++ b/packages/fast-test-harness/test/src/main.ts
@@ -0,0 +1,3 @@
+import { definition, TestWidget } from "./test-widget/test-widget.js";
+
+TestWidget.define(definition);
diff --git a/packages/fast-test-harness/test/src/test-widget/test-widget.styles.css b/packages/fast-test-harness/test/src/test-widget/test-widget.styles.css
new file mode 100644
index 00000000000..433df47dc9f
--- /dev/null
+++ b/packages/fast-test-harness/test/src/test-widget/test-widget.styles.css
@@ -0,0 +1,7 @@
+:host {
+    display: inline-block;
+
+    .label {
+        font-weight: bold;
+    }
+}
diff --git a/packages/fast-test-harness/test/src/test-widget/test-widget.template.html b/packages/fast-test-harness/test/src/test-widget/test-widget.template.html
new file mode 100644
index 00000000000..b2b9a16808d
--- /dev/null
+++ b/packages/fast-test-harness/test/src/test-widget/test-widget.template.html
@@ -0,0 +1,6 @@
+<f-template name="test-widget" shadowrootmode="open">
+    <template>
+        <span class="label">{{label}}</span>
+        <slot></slot>
+    </template>
+</f-template>
diff --git a/packages/fast-test-harness/test/src/test-widget/test-widget.ts b/packages/fast-test-harness/test/src/test-widget/test-widget.ts
new file mode 100644
index 00000000000..f96e7d3339f
--- /dev/null
+++ b/packages/fast-test-harness/test/src/test-widget/test-widget.ts
@@ -0,0 +1,38 @@
+import { attr, css, FASTElement, html } from "@microsoft/fast-element";
+
+export class TestWidget extends FASTElement {
+    @attr
+    label?: string;
+
+    @attr({ mode: "boolean" })
+    disabled: boolean = false;
+
+    disabledChanged(prev: boolean, next: boolean) {
+        if (this.disabled) {
+            this.#internals?.states.add("disabled");
+        } else {
+            this.#internals?.states.delete("disabled");
+        }
+    }
+
+    @attr
+    size?: string;
+
+    #internals: ElementInternals = this.attachInternals();
+}
+
+export const definition = {
+    name: "test-widget",
+    template: html<TestWidget>`
+        <span class="label">${x => x.label}</span>
+        <slot></slot>
+    `,
+    styles: css`
+        :host {
+            display: inline-block;
+        }
+        .label {
+            font-weight: bold;
+        }
+    `,
+};
diff --git a/packages/fast-test-harness/test/ssr.html b/packages/fast-test-harness/test/ssr.html
new file mode 100644
index 00000000000..803833826a1
--- /dev/null
+++ b/packages/fast-test-harness/test/ssr.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title><!--fixturetitle--></title>
+        <!--stylespreload-->
+    </head>
+    <body>
+        <!--fixture-->
+        <!--templates-->
+        <script type="module" src="/src/entry-client.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-test-harness/test/vite.config.mjs b/packages/fast-test-harness/test/vite.config.mjs
new file mode 100644
index 00000000000..289539e8e8c
--- /dev/null
+++ b/packages/fast-test-harness/test/vite.config.mjs
@@ -0,0 +1,3 @@
+import defaultConfig from "@microsoft/fast-test-harness/vite.config.mjs";
+
+export default defaultConfig;
diff --git a/packages/fast-test-harness/tsconfig.json b/packages/fast-test-harness/tsconfig.json
index 33abf82ce4b..ec1df9fd40f 100644
--- a/packages/fast-test-harness/tsconfig.json
+++ b/packages/fast-test-harness/tsconfig.json
@@ -2,6 +2,7 @@
     "compilerOptions": {
         "declaration": true,
         "esModuleInterop": true,
+        "experimentalDecorators": true,
         "isolatedModules": true,
         "module": "ESNext",
         "moduleResolution": "Bundler",
diff --git a/packages/fast-test-harness/vite.config.d.ts b/packages/fast-test-harness/vite.config.d.ts
new file mode 100644
index 00000000000..5ff0098a904
--- /dev/null
+++ b/packages/fast-test-harness/vite.config.d.ts
@@ -0,0 +1,4 @@
+declare module "@microsoft/fast-test-harness/vite.config.mjs" {
+    const config: import("vite").UserConfig;
+    export default config;
+}
diff --git a/packages/fast-test-harness/vite.config.mjs b/packages/fast-test-harness/vite.config.mjs
index 6be8d6eb0a8..4db51190b5e 100644
--- a/packages/fast-test-harness/vite.config.mjs
+++ b/packages/fast-test-harness/vite.config.mjs
@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 
-const PORT = process.env.PORT ? Number(process.env.PORT) : 5273;
+const PORT = process.env.PORT ? Number(process.env.PORT) : 3278;
 
 export default defineConfig({
     clearScreen: false,
@@ -12,11 +12,23 @@ export default defineConfig({
         strictPort: true,
         debug: true,
     },
+    esbuild: {
+        tsconfigRaw: {
+            compilerOptions: {
+                // Needed for FAST's observable system
+                useDefineForClassFields: false,
+                experimentalDecorators: true,
+            },
+        },
+    },
     build: {
         outDir: "./dist",
         minify: false,
         sourcemap: true,
     },
+    optimizeDeps: {
+        exclude: ["@microsoft/fast-element", "@microsoft/fast-html"],
+    },
     preview: {
         port: PORT,
     },

From 39adbcba4bacbd924007ac1d75e10956d78d92cc Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 30 Apr 2026 15:32:19 -0700
Subject: [PATCH 09/14] chore: adapt cherry-picked main changes for
 fast-element v3 architecture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit follows the cherry-picks of #7479, #7494, #7501, #7502, #7503,
#7504, #7505, and #7469 from main into the v3 release branch, applying
adaptations needed to integrate them with the fast-element v3 architecture
where `@microsoft/fast-html` was merged into `@microsoft/fast-element`.

Changes:

- packages/fast-element/package.json: Add `./declarative-syntax.js` subpath
  export so tooling consumers can access declarative HTML syntax constants
  (openExpression, closeExpression, attributeDirectivePrefix, etc.) from
  fast-element directly. Mirrors the existing `./declarative-utilities.js`
  subpath naming.

- packages/fast-element/test/tsconfig.json: Add path mapping for the new
  subpath export so tests resolve sources during type-check.

- packages/fast-element/tsconfig.json: Exclude `*.spec.ts` from build (in
  addition to the existing `*.pw.spec.ts` exclusion). The declarative spec
  files import `@playwright/test` which pulls in playwright type
  definitions that are incompatible with `tsgo`'s stricter parser. These
  spec files are still type-checked when run via the declarative
  Playwright config.

- packages/fast-test-harness/src/build/generate-templates.ts,
  generate-webui-templates.ts: Re-point imports from
  `@microsoft/fast-html/syntax.js` to the new
  `@microsoft/fast-element/declarative-syntax.js` subpath.

- packages/fast-test-harness/test/src/entry-client.ts: Replace the removed
  `RenderableFASTElement(...).defineAsync({ templateOptions: ... })`
  pattern with the v3 `define()` API. Hydration is enabled by the imported
  harness `ssr/entry-client.js` side effect.

- packages/fast-test-harness/vite.config.mjs: Drop `@microsoft/fast-html`
  from the optimizer exclude list — the package no longer exists on v3.

- packages/fast-test-harness/README.md: Replace remaining
  `RenderableFASTElement` example with the `.define()` form.

- Regenerated build artifacts: SIZES.md, hydration/styles api-report.api.md,
  and 3.x docs that are produced by the now-passing `npm run build`.

- change/: Add prerelease change file for fast-element (new subpath
  export) and a minor change file for fast-test-harness (build utilities
  migrated to fast-element).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...ement-7e4a9b21-3c8d-4f12-91e0-8a6f2d4cb09b.json |  7 +++++++
 ...rness-7e4a9b22-4d8c-4e12-92f0-9b6f3d4cb19c.json |  7 +++++++
 packages/fast-element/SIZES.md                     | 10 +++++-----
 .../fast-element/docs/hydration/api-report.api.md  |  2 +-
 .../fast-element/docs/styles/api-report.api.md     |  2 +-
 packages/fast-element/package.json                 |  5 +++++
 packages/fast-element/test/tsconfig.json           |  3 +++
 packages/fast-element/tsconfig.json                |  2 +-
 packages/fast-test-harness/README.md               |  6 +-----
 .../src/build/generate-templates.ts                |  2 +-
 .../src/build/generate-webui-templates.ts          |  5 ++++-
 .../fast-test-harness/test/src/entry-client.ts     |  6 +-----
 packages/fast-test-harness/vite.config.mjs         |  2 +-
 .../docs/3.x/api/fast-element.executioncontext.md  |  2 +-
 .../src/docs/3.x/api/fast-element.observable.md    |  4 ++--
 .../fast-element/context/fast-element.context.md   | 14 +++++++-------
 .../3.x/api/fast-element/di/fast-element.di.md     |  2 +-
 .../fast-element/di/fast-element.registration.md   | 10 +++++-----
 .../website/src/docs/3.x/resources/export-sizes.md | 10 +++++-----
 19 files changed, 59 insertions(+), 42 deletions(-)
 create mode 100644 change/@microsoft-fast-element-7e4a9b21-3c8d-4f12-91e0-8a6f2d4cb09b.json
 create mode 100644 change/@microsoft-fast-test-harness-7e4a9b22-4d8c-4e12-92f0-9b6f3d4cb19c.json

diff --git a/change/@microsoft-fast-element-7e4a9b21-3c8d-4f12-91e0-8a6f2d4cb09b.json b/change/@microsoft-fast-element-7e4a9b21-3c8d-4f12-91e0-8a6f2d4cb09b.json
new file mode 100644
index 00000000000..252cbbe998c
--- /dev/null
+++ b/change/@microsoft-fast-element-7e4a9b21-3c8d-4f12-91e0-8a6f2d4cb09b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add ./declarative-syntax.js subpath export exposing declarative HTML syntax constants",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-test-harness-7e4a9b22-4d8c-4e12-92f0-9b6f3d4cb19c.json b/change/@microsoft-fast-test-harness-7e4a9b22-4d8c-4e12-92f0-9b6f3d4cb19c.json
new file mode 100644
index 00000000000..9d3138a5993
--- /dev/null
+++ b/change/@microsoft-fast-test-harness-7e4a9b22-4d8c-4e12-92f0-9b6f3d4cb19c.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: migrate build utilities to consume declarative HTML syntax from @microsoft/fast-element",
+  "packageName": "@microsoft/fast-test-harness",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index 9c893874497..4696444035b 100644
--- a/packages/fast-element/SIZES.md
+++ b/packages/fast-element/SIZES.md
@@ -5,7 +5,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
 | CDN Rollup Bundle | 76.36 KB | 22.91 KB | 20.32 KB |
-| FASTElement (@microsoft/fast-element/fast-element.js) | 23.73 KB | 7.38 KB | 6.63 KB |
+| FASTElement (@microsoft/fast-element/fast-element.js) | 23.74 KB | 7.37 KB | 6.63 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 288 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.70 KB | 2.50 KB | 2.22 KB |
 | observable (@microsoft/fast-element/observable.js) | 6.74 KB | 2.51 KB | 2.23 KB |
@@ -16,10 +16,10 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | volatile (@microsoft/fast-element/volatile.js) | 6.79 KB | 2.53 KB | 2.25 KB |
 | when (@microsoft/fast-element/when.js) | 1.82 KB | 712 B | 565 B |
 | html (@microsoft/fast-element/html.js) | 25.92 KB | 8.50 KB | 7.61 KB |
-| repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.47 KB |
+| repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.48 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
-| enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.22 KB | 11.89 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.46 KB | 16.46 KB |
+| enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.21 KB | 11.89 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.45 KB | 16.46 KB |
 | ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
-| observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.26 KB | 6.52 KB |
+| observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.25 KB | 6.52 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.78 KB | 5.59 KB | 5.04 KB |
diff --git a/packages/fast-element/docs/hydration/api-report.api.md b/packages/fast-element/docs/hydration/api-report.api.md
index 5ebb43cdb17..890f9cc360d 100644
--- a/packages/fast-element/docs/hydration/api-report.api.md
+++ b/packages/fast-element/docs/hydration/api-report.api.md
@@ -107,7 +107,7 @@ export interface ExecutionContext<TParent = any> {
 
 // @public
 export const ExecutionContext: Readonly<{
-    default: ExecutionContext<any>;
+    default: ExecutionContext;
     getEvent(): Event | null;
     setEvent(event: Event | null): void;
 }>;
diff --git a/packages/fast-element/docs/styles/api-report.api.md b/packages/fast-element/docs/styles/api-report.api.md
index 67e11f762d0..a8c3dc8e9fb 100644
--- a/packages/fast-element/docs/styles/api-report.api.md
+++ b/packages/fast-element/docs/styles/api-report.api.md
@@ -73,7 +73,7 @@ export interface ExecutionContext<TParent = any> {
 
 // @public
 export const ExecutionContext: Readonly<{
-    default: ExecutionContext<any>;
+    default: ExecutionContext;
     getEvent(): Event | null;
     setEvent(event: Event | null): void;
 }>;
diff --git a/packages/fast-element/package.json b/packages/fast-element/package.json
index 78677dd6418..888b724c1df 100644
--- a/packages/fast-element/package.json
+++ b/packages/fast-element/package.json
@@ -45,6 +45,11 @@
       "test": "./src/declarative/utilities.ts",
       "default": "./dist/esm/declarative/utilities.js"
     },
+    "./declarative-syntax.js": {
+      "types": "./dist/dts/declarative/syntax.d.ts",
+      "test": "./src/declarative/syntax.ts",
+      "default": "./dist/esm/declarative/syntax.js"
+    },
     "./attribute-map.js": {
       "types": "./dist/dts/declarative/attribute-map.d.ts",
       "test": "./src/declarative/attribute-map.ts",
diff --git a/packages/fast-element/test/tsconfig.json b/packages/fast-element/test/tsconfig.json
index f6e7893c0ab..68749c7332d 100644
--- a/packages/fast-element/test/tsconfig.json
+++ b/packages/fast-element/test/tsconfig.json
@@ -12,6 +12,9 @@
             "@microsoft/fast-element/declarative-utilities.js": [
                 "../src/declarative/utilities.ts"
             ],
+            "@microsoft/fast-element/declarative-syntax.js": [
+                "../src/declarative/syntax.ts"
+            ],
             "@microsoft/fast-element/arrays.js": ["../src/arrays.ts"],
             "@microsoft/fast-element/hydration.js": ["../src/hydration.ts"],
             "@microsoft/fast-element/styles.js": ["../src/styles.ts"],
diff --git a/packages/fast-element/tsconfig.json b/packages/fast-element/tsconfig.json
index a4df7d6291f..cb409a64886 100644
--- a/packages/fast-element/tsconfig.json
+++ b/packages/fast-element/tsconfig.json
@@ -19,5 +19,5 @@
         "lib": ["DOM", "ES2015", "ES2016.Array.Include"]
     },
     "include": ["src"],
-    "exclude": ["src/**/*.pw.spec.ts"]
+    "exclude": ["src/**/*.pw.spec.ts", "src/**/*.spec.ts"]
 }
diff --git a/packages/fast-test-harness/README.md b/packages/fast-test-harness/README.md
index b8a71e90ec2..d96219a2cdf 100644
--- a/packages/fast-test-harness/README.md
+++ b/packages/fast-test-harness/README.md
@@ -133,13 +133,9 @@ import { enableHydration } from "@microsoft/fast-element/hydration.js";
 
 enableHydration();
 
-import { RenderableFASTElement } from "@microsoft/fast-html";
 import { MyButton, definition } from "../../src/button/index.js";
 
-RenderableFASTElement(MyButton).defineAsync({
-    name: definition.name,
-    templateOptions: "defer-and-hydrate",
-});
+MyButton.define(definition);
 ```
 
 **`entry-server.ts`** exports a `render()` function that the server calls for each `setTemplate()` request. It returns three strings that get injected into `ssr.html`:
diff --git a/packages/fast-test-harness/src/build/generate-templates.ts b/packages/fast-test-harness/src/build/generate-templates.ts
index ed50eb8a8e7..bc941c66c58 100644
--- a/packages/fast-test-harness/src/build/generate-templates.ts
+++ b/packages/fast-test-harness/src/build/generate-templates.ts
@@ -25,7 +25,7 @@ import {
     closeExpression,
     eventArgAccessor,
     openExpression,
-} from "@microsoft/fast-html/syntax.js";
+} from "@microsoft/fast-element/declarative-syntax.js";
 import { installDomShim } from "./dom-shim.js";
 
 const stylesMarker = `${openExpression}styles${closeExpression}`;
diff --git a/packages/fast-test-harness/src/build/generate-webui-templates.ts b/packages/fast-test-harness/src/build/generate-webui-templates.ts
index 1dbd4f9c307..a7a14e3cca1 100644
--- a/packages/fast-test-harness/src/build/generate-webui-templates.ts
+++ b/packages/fast-test-harness/src/build/generate-webui-templates.ts
@@ -22,7 +22,10 @@ import { glob, mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { styleText } from "node:util";
-import { closeExpression, openExpression } from "@microsoft/fast-html/syntax.js";
+import {
+    closeExpression,
+    openExpression,
+} from "@microsoft/fast-element/declarative-syntax.js";
 import { installDomShim } from "./dom-shim.js";
 import { convertTemplate, type ViewTemplate } from "./generate-templates.js";
 
diff --git a/packages/fast-test-harness/test/src/entry-client.ts b/packages/fast-test-harness/test/src/entry-client.ts
index 46e3d02177f..7dbdb4ac44c 100644
--- a/packages/fast-test-harness/test/src/entry-client.ts
+++ b/packages/fast-test-harness/test/src/entry-client.ts
@@ -1,9 +1,5 @@
 import "@microsoft/fast-test-harness/ssr/entry-client.js";
 
-import { RenderableFASTElement } from "@microsoft/fast-html";
 import { definition, TestWidget } from "./test-widget/test-widget.js";
 
-RenderableFASTElement(TestWidget).defineAsync({
-    name: definition.name,
-    templateOptions: "defer-and-hydrate",
-});
+TestWidget.define(definition);
diff --git a/packages/fast-test-harness/vite.config.mjs b/packages/fast-test-harness/vite.config.mjs
index 4db51190b5e..7b9a49226e9 100644
--- a/packages/fast-test-harness/vite.config.mjs
+++ b/packages/fast-test-harness/vite.config.mjs
@@ -27,7 +27,7 @@ export default defineConfig({
         sourcemap: true,
     },
     optimizeDeps: {
-        exclude: ["@microsoft/fast-element", "@microsoft/fast-html"],
+        exclude: ["@microsoft/fast-element"],
     },
     preview: {
         port: PORT,
diff --git a/sites/website/src/docs/3.x/api/fast-element.executioncontext.md b/sites/website/src/docs/3.x/api/fast-element.executioncontext.md
index c7903a15708..cfec423859f 100644
--- a/sites/website/src/docs/3.x/api/fast-element.executioncontext.md
+++ b/sites/website/src/docs/3.x/api/fast-element.executioncontext.md
@@ -21,7 +21,7 @@ Provides additional contextual information available to behaviors and expression
 
 ```typescript
 ExecutionContext: Readonly<{
-    default: ExecutionContext<any>;
+    default: ExecutionContext;
     getEvent(): Event | null;
     setEvent(event: Event | null): void;
 }>
diff --git a/sites/website/src/docs/3.x/api/fast-element.observable.md b/sites/website/src/docs/3.x/api/fast-element.observable.md
index 88ae387fed8..ec7f3813546 100644
--- a/sites/website/src/docs/3.x/api/fast-element.observable.md
+++ b/sites/website/src/docs/3.x/api/fast-element.observable.md
@@ -28,7 +28,7 @@ Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn, any>;
-    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(expression: Expression<TSource_1, TReturn_1, any>): boolean;
+    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn>;
+    isVolatileBinding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn>): boolean;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/context/fast-element.context.md b/sites/website/src/docs/3.x/api/fast-element/context/fast-element.context.md
index 8562af27e76..d337954b358 100644
--- a/sites/website/src/docs/3.x/api/fast-element/context/fast-element.context.md
+++ b/sites/website/src/docs/3.x/api/fast-element/context/fast-element.context.md
@@ -23,13 +23,13 @@ Enables using: [W3C Community Context protocol.](https://github.com/webcomponent
 Context: Readonly<{
     eventType: "context-request";
     for<T = unknown>(name: string): FASTContext<T>;
-    create<T_1 = unknown>(name: string, initialValue?: T_1 | undefined): FASTContext<T_1>;
+    create<T = unknown>(name: string, initialValue?: T): FASTContext<T>;
     setDefaultRequestStrategy(strategy: FASTContextRequestStrategy): void;
-    get<T_2 extends UnknownContext>(target: EventTarget, context: T_2): ContextType<T_2>;
-    request<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
-    dispatch<T_4 extends UnknownContext>(target: EventTarget, context: T_4, callback: ContextCallback<ContextType<T_4>>, multiple?: boolean): void;
-    provide<T_5 extends UnknownContext>(target: EventTarget, context: T_5, value: ContextType<T_5>): void;
-    handle<T_6 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_6>) => void, context?: T_6 | undefined): void;
-    defineProperty<T_7 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_7): void;
+    get<T extends UnknownContext>(target: EventTarget, context: T): ContextType<T>;
+    request<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    dispatch<T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean): void;
+    provide<T extends UnknownContext>(target: EventTarget, context: T, value: ContextType<T>): void;
+    handle<T extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T>) => void, context?: T): void;
+    defineProperty<T extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T): void;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/di/fast-element.di.md b/sites/website/src/docs/3.x/api/fast-element/di/fast-element.di.md
index 6b468ba7f9c..6146531a1c7 100644
--- a/sites/website/src/docs/3.x/api/fast-element/di/fast-element.di.md
+++ b/sites/website/src/docs/3.x/api/fast-element/di/fast-element.di.md
@@ -31,6 +31,6 @@ DI: Readonly<{
     createContext: typeof createContext;
     inject(...dependencies: Key[]): (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void;
     transient<T extends Constructable>(target: T & Partial<RegisterSelf<T>>): T & RegisterSelf<T>;
-    singleton<T_1 extends Constructable>(target: T_1 & Partial<RegisterSelf<T_1>>, options?: SingletonOptions): T_1 & RegisterSelf<T_1>;
+    singleton<T extends Constructable>(target: T & Partial<RegisterSelf<T>>, options?: SingletonOptions): T & RegisterSelf<T>;
 }>
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/di/fast-element.registration.md b/sites/website/src/docs/3.x/api/fast-element/di/fast-element.registration.md
index ad6a2a0bc61..8cd9792f4bb 100644
--- a/sites/website/src/docs/3.x/api/fast-element/di/fast-element.registration.md
+++ b/sites/website/src/docs/3.x/api/fast-element/di/fast-element.registration.md
@@ -22,11 +22,11 @@ You can use the resulting Registration of any of the factory methods to register
 ```typescript
 Registration: Readonly<{
     instance<T>(key: Key, value: T): Registration<T>;
-    singleton<T_1 extends Constructable>(key: Key, value: T_1): Registration<InstanceType<T_1>>;
-    transient<T_2 extends Constructable>(key: Key, value: T_2): Registration<InstanceType<T_2>>;
-    callback<T_3>(key: Key, callback: ResolveCallback<T_3>): Registration<Resolved<T_3>>;
-    cachedCallback<T_4>(key: Key, callback: ResolveCallback<T_4>): Registration<Resolved<T_4>>;
-    aliasTo<T_5>(originalKey: T_5, aliasKey: Key): Registration<Resolved<T_5>>;
+    singleton<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    transient<T extends Constructable>(key: Key, value: T): Registration<InstanceType<T>>;
+    callback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    cachedCallback<T>(key: Key, callback: ResolveCallback<T>): Registration<Resolved<T>>;
+    aliasTo<T>(originalKey: T, aliasKey: Key): Registration<Resolved<T>>;
 }>
 ```
 
diff --git a/sites/website/src/docs/3.x/resources/export-sizes.md b/sites/website/src/docs/3.x/resources/export-sizes.md
index fc3da411737..fd68e0cef72 100644
--- a/sites/website/src/docs/3.x/resources/export-sizes.md
+++ b/sites/website/src/docs/3.x/resources/export-sizes.md
@@ -20,7 +20,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
 | CDN Rollup Bundle | 76.36 KB | 22.91 KB | 20.32 KB |
-| FASTElement (@microsoft/fast-element/fast-element.js) | 23.73 KB | 7.38 KB | 6.63 KB |
+| FASTElement (@microsoft/fast-element/fast-element.js) | 23.74 KB | 7.37 KB | 6.63 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 288 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.70 KB | 2.50 KB | 2.22 KB |
 | observable (@microsoft/fast-element/observable.js) | 6.74 KB | 2.51 KB | 2.23 KB |
@@ -31,10 +31,10 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | volatile (@microsoft/fast-element/volatile.js) | 6.79 KB | 2.53 KB | 2.25 KB |
 | when (@microsoft/fast-element/when.js) | 1.82 KB | 712 B | 565 B |
 | html (@microsoft/fast-element/html.js) | 25.92 KB | 8.50 KB | 7.61 KB |
-| repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.47 KB |
+| repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.48 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
-| enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.22 KB | 11.89 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.46 KB | 16.46 KB |
+| enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.21 KB | 11.89 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.45 KB | 16.46 KB |
 | ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
-| observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.26 KB | 6.52 KB |
+| observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.25 KB | 6.52 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.78 KB | 5.59 KB | 5.04 KB |

From fd1f5efbbfadba8389b9876b80ccd933408889af Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Fri, 1 May 2026 10:40:45 -0700
Subject: [PATCH 10/14] chore: prepare fast-test-harness package for publishing
 (#7506)

Prepares `@microsoft/fast-test-harness` for npm publishing by cleaning
up the package layout and exports.

- Excluded test files (`.test.ts`, `.spec.ts`) from the build output via
  `tsconfig.build.json`
- Simplified the `files` array to use wildcards (`*.mjs`, `*.d.ts`)
  instead of enumerating each root-level file
- Added `./fixtures/*.js` to the package exports map so fixture classes
  can be imported directly
- Exported `setTemplate` and `updateTemplate` option types from
  `CSRFixture` and `SSRFixture`
- Updated `README` exports table to match the current public API surface
- Updated package scripts (`test:node`, `test:playwright`)

(cherry picked from commit 738316845b8ccae39b568ddd12da4738a1b88d4d)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...-87ac85bb-3986-4dbc-b9c8-16fecdf194b3.json |  7 ++++
 packages/fast-test-harness/README.md          | 42 +++++++++++--------
 packages/fast-test-harness/package.json       | 28 +++++++------
 .../src/build/generate-templates.test.ts      |  2 +-
 .../src/fixtures/csr-fixture.ts               | 28 +++++++++++++
 .../src/fixtures/ssr-fixture.ts               | 10 +++++
 .../fast-test-harness/src/ssr/render.test.ts  |  7 +++-
 packages/fast-test-harness/src/ssr/render.ts  | 41 ++++++++++++++++--
 .../fast-test-harness/tsconfig.build.json     |  3 +-
 9 files changed, 131 insertions(+), 37 deletions(-)
 create mode 100644 change/@microsoft-fast-test-harness-87ac85bb-3986-4dbc-b9c8-16fecdf194b3.json

diff --git a/change/@microsoft-fast-test-harness-87ac85bb-3986-4dbc-b9c8-16fecdf194b3.json b/change/@microsoft-fast-test-harness-87ac85bb-3986-4dbc-b9c8-16fecdf194b3.json
new file mode 100644
index 00000000000..63bbd6eda0a
--- /dev/null
+++ b/change/@microsoft-fast-test-harness-87ac85bb-3986-4dbc-b9c8-16fecdf194b3.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: prepare package for publish",
+  "packageName": "@microsoft/fast-test-harness",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-test-harness/README.md b/packages/fast-test-harness/README.md
index d96219a2cdf..7470b7dbe9d 100644
--- a/packages/fast-test-harness/README.md
+++ b/packages/fast-test-harness/README.md
@@ -4,6 +4,11 @@
 
 The `fast-test-harness` package is a Playwright testing harness for FAST Element web components with CSR and SSR support.
 
+## Requirements
+
+- Node.js 22.18 or later
+- Playwright 1.56 or later
+
 ## Installation
 
 To install `fast-test-harness` using `npm`:
@@ -12,6 +17,21 @@ To install `fast-test-harness` using `npm`:
 npm install --save-dev @microsoft/fast-test-harness
 ```
 
+## Test directory setup
+
+The harness serves a Vite dev server from a `test/` directory in your project. CSR and SSR modes use different entry points from the same directory.
+
+```
+test/
+├── index.html              # CSR: loads main.ts
+├── ssr.html                # SSR: template with comment placeholders
+├── vite.config.ts          # Vite config (shared by both modes)
+└── src/
+    ├── main.ts             # CSR: registers components, applies theme
+    ├── entry-client.ts     # SSR: registers components for hydration
+    └── entry-server.ts     # SSR: exports render() for fixture generation
+```
+
 ## Writing tests
 
 Import `test` and `expect` from the harness. Configure the component tag name with `test.use()`, then call `fastPage.setTemplate()` in each test to render it.
@@ -67,21 +87,6 @@ await expect(element).toHaveCustomState("checked");
 | `waitFor` | `string[]` | `[]` | Additional elements to wait for before testing |
 | `ssr` | `boolean` | `false` | Use SSR mode (or set `PLAYWRIGHT_TEST_SSR=true`) |
 
-## Test directory setup
-
-The harness serves a Vite dev server from a `test/` directory in your project. CSR and SSR modes use different entry points from the same directory.
-
-```
-test/
-├── index.html              # CSR: loads main.ts
-├── ssr.html                # SSR: template with comment placeholders
-├── vite.config.ts          # Vite config (shared by both modes)
-└── src/
-    ├── main.ts             # CSR: registers components, applies theme
-    ├── entry-client.ts     # SSR: registers components for hydration
-    └── entry-server.ts     # SSR: exports render() for fixture generation
-```
-
 ### CSR files
 
 **`index.html`** loads a script that registers your components:
@@ -259,10 +264,11 @@ CLI flags take precedence over environment variables.
 
 | Specifier | Contents |
 |-----------|----------|
-| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `createSSRRenderer`, build utilities |
-| `@microsoft/fast-test-harness/server.mjs` | `startServer` |
-| `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `ComponentRegistration`, `RenderResult`, `SSRRendererOptions` |
+| `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `toHaveCustomState`, `installDomShim`, `createSSRRenderer` |
 | `@microsoft/fast-test-harness/build/*.js` | `installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates` |
+| `@microsoft/fast-test-harness/fixtures/*.js` | `CSRFixture`, `SSRFixture`, `toHaveCustomState`, extended `test` and `expect` |
+| `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `renderTemplate`, `buildEntryHtml`, `buildState`, `parseDefaultValue` |
+| `@microsoft/fast-test-harness/server.mjs` | `startServer` |
 | `@microsoft/fast-test-harness/playwright.config.mjs` | Shared Playwright configuration |
 | `@microsoft/fast-test-harness/vite.config.mjs` | Shared Vite configuration |
 | `@microsoft/fast-test-harness/public/*` | Static assets (base CSS) |
diff --git a/packages/fast-test-harness/package.json b/packages/fast-test-harness/package.json
index 6c426c99b3b..d235d3bc729 100644
--- a/packages/fast-test-harness/package.json
+++ b/packages/fast-test-harness/package.json
@@ -28,6 +28,10 @@
       "types": "./dist/dts/build/*.d.ts",
       "default": "./dist/esm/build/*.js"
     },
+    "./fixtures/*.js": {
+      "types": "./dist/dts/fixtures/*.d.ts",
+      "default": "./dist/esm/fixtures/*.js"
+    },
     "./ssr/*.js": {
       "types": "./dist/dts/ssr/*.d.ts",
       "default": "./dist/esm/ssr/*.js"
@@ -48,30 +52,30 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "clean": "clean dist temp test-results",
+    "clean": "clean dist temp test-results test/temp",
     "build": "npm run build:tsc",
     "build:tsc": "tsgo -p tsconfig.build.json",
-    "test": "npm run test:node && npm run test:playwright",
+    "lint": "biome-changed",
+    "lint:fix": "biome-changed -- --fix",
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "npm run lint && npm run test:node && npm run test:playwright",
     "test:node": "node --test --experimental-test-isolation=none \"**/*.test.ts\"",
-    "test:playwright": "playwright test"
+    "test:playwright": "playwright test",
+    "test:chromium": "playwright test --project=chromium"
   },
   "files": [
     "dist",
-    "playwright.config.mjs",
-    "playwright.config.d.ts",
     "public",
-    "server.mjs",
-    "start.mjs",
-    "vite.config.mjs",
-    "vite.config.d.ts"
+    "*.mjs",
+    "*.d.ts"
   ],
-  "dependencies": {
-    "cheerio": "1.2.0"
-  },
   "devDependencies": {
     "@microsoft/fast-build": "*",
     "@microsoft/fast-element": "*"
   },
+  "dependencies": {
+    "cheerio": "1.2.0"
+  },
   "peerDependencies": {
     "@microsoft/fast-build": ">=0.5.0 <1.0.0",
     "@microsoft/fast-element": ">=2.10.4 <=3.0.0-rc.1",
diff --git a/packages/fast-test-harness/src/build/generate-templates.test.ts b/packages/fast-test-harness/src/build/generate-templates.test.ts
index 21d590f612d..095bc3d1150 100644
--- a/packages/fast-test-harness/src/build/generate-templates.test.ts
+++ b/packages/fast-test-harness/src/build/generate-templates.test.ts
@@ -11,7 +11,7 @@ import {
 import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
 
 test.describe("convertTemplate", async () => {
-    // Install the DOM shim before any tests — convertTemplate needs fast-html
+    // Install the DOM shim before any tests — convertTemplate needs declarative
     // syntax constants which require a DOM environment, and FAST Element needs
     // basic DOM globals to initialize.
     installDomShim();
diff --git a/packages/fast-test-harness/src/fixtures/csr-fixture.ts b/packages/fast-test-harness/src/fixtures/csr-fixture.ts
index 0ad0b62ae1d..4dea90b9057 100644
--- a/packages/fast-test-harness/src/fixtures/csr-fixture.ts
+++ b/packages/fast-test-harness/src/fixtures/csr-fixture.ts
@@ -2,8 +2,19 @@ import type { Locator, Page } from "@playwright/test";
 
 export type ThemeTokens = Record<string, string | number | boolean>;
 
+/**
+ * The initial attributes for the fixture's template, where boolean attributes are
+ * represented as `true` and omitted when `false`. This allows for a more intuitive
+ * configuration of boolean attributes in the template options.
+ */
 export type InitialTemplateAttributes = Record<string, string | true>;
 
+/**
+ * The attributes for the fixture's template, where boolean attributes can be represented as `true`
+ * or `false`. When `true`, the attribute will be included without a value (e.g., `disabled`), and
+ * when `false`, the attribute will be omitted entirely. This type is used for updating the
+ * template, allowing for both adding and removing boolean attributes.
+ */
 export type TemplateAttributes = Record<string, string | boolean>;
 
 /**
@@ -14,6 +25,10 @@ export type InitialTemplateOptions = {
     innerHTML?: string;
 };
 
+/**
+ * The options for updating the fixture's template, where `attributes` can include boolean values to
+ * add or remove attributes from the element.
+ */
 export type FixtureOptions = Omit<InitialTemplateOptions, "attributes"> & {
     attributes?: TemplateAttributes;
 };
@@ -45,6 +60,19 @@ export class CSRFixture {
 
     /**
      * Additional custom elements to wait for before running the test.
+     *
+     * @remarks
+     * This is useful for fixtures that depend on multiple custom elements being defined
+     * and stable before the test can run. By specifying additional tag names here, the
+     * fixture will wait for these elements to be defined before proceeding. Ensure that
+     * any elements specified here are included on the page and properly defined to
+     * prevent test timeouts.
+     *
+     * @example
+     * test.use({
+     *     tagName: "fast-dropdown",
+     *     waitFor: ["fast-listbox", "fast-option"],
+     * });
      */
     protected readonly waitFor: string[];
 
diff --git a/packages/fast-test-harness/src/fixtures/ssr-fixture.ts b/packages/fast-test-harness/src/fixtures/ssr-fixture.ts
index 251b269e915..5f3bf550b90 100644
--- a/packages/fast-test-harness/src/fixtures/ssr-fixture.ts
+++ b/packages/fast-test-harness/src/fixtures/ssr-fixture.ts
@@ -12,6 +12,16 @@ export class SSRFixture extends CSRFixture {
      */
     private templateRendered = false;
 
+    /**
+     * Creates an instance of the SSRFixture.
+     *
+     * @param page - The Playwright page object.
+     * @param tagName - The tag name of the custom element.
+     * @param innerHTML - The inner HTML of the custom element.
+     * @param waitFor - Additional custom elements to wait for.
+     * @param testId - The test ID for the SSR fixture.
+     * @param testTitle - The test title for the SSR fixture.
+     */
     constructor(
         page: Page,
         tagName: string,
diff --git a/packages/fast-test-harness/src/ssr/render.test.ts b/packages/fast-test-harness/src/ssr/render.test.ts
index 6e81755294a..4a42b1e68ff 100644
--- a/packages/fast-test-harness/src/ssr/render.test.ts
+++ b/packages/fast-test-harness/src/ssr/render.test.ts
@@ -276,7 +276,7 @@ test.describe("createSSRRenderer", () => {
         );
     });
 
-    test("should return empty preloadLinks without a theme", () => {
+    test("should not include theme link in preloadLinks when themeStylesheet is omitted", () => {
         const { render } = createSSRRenderer({
             tagPrefix: "test",
             components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
@@ -284,7 +284,10 @@ test.describe("createSSRRenderer", () => {
 
         const result = render({ tagName: "test-widget" });
 
-        assert.strictEqual(result.preloadLinks, "");
+        assert.ok(
+            !result.preloadLinks.includes('rel="stylesheet"'),
+            `should not have a stylesheet link, got: ${result.preloadLinks}`,
+        );
     });
 
     test("should handle raw HTML via the html key", () => {
diff --git a/packages/fast-test-harness/src/ssr/render.ts b/packages/fast-test-harness/src/ssr/render.ts
index fe7cfffa892..9939f994e1b 100644
--- a/packages/fast-test-harness/src/ssr/render.ts
+++ b/packages/fast-test-harness/src/ssr/render.ts
@@ -476,11 +476,17 @@ export function createSSRRenderer(options: SSRRendererOptions): {
     // Concatenate all f-templates (with styles) for client hydration.
     const allFTemplates = [...fTemplatesByName.values()].join("\n");
 
-    // Resolve theme stylesheet if provided.
-    let preloadLinks = "";
+    // Build preload links: theme stylesheet + component stylesheets.
+    const preloadParts: string[] = [];
     if (options.themeStylesheet) {
-        preloadLinks = `<link rel="stylesheet" href="${options.themeStylesheet}">`;
+        preloadParts.push(`<link rel="stylesheet" href="${options.themeStylesheet}">`);
     }
+    for (const stylesUrl of styleUrlsByName.values()) {
+        if (stylesUrl) {
+            preloadParts.push(`<link rel="preload" href="${stylesUrl}" as="style">`);
+        }
+    }
+    const preloadLinks = preloadParts.join("\n");
 
     return {
         render(queryObj: Record<string, string> = {}): RenderResult {
@@ -505,6 +511,35 @@ export function createSSRRenderer(options: SSRRendererOptions): {
                     // Extract body content from the rendered document.
                     const bodyMatch = rendered.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
                     fixture = bodyMatch?.[1] ?? entryHtml;
+
+                    // The WASM renderer only injects DSD for top-level
+                    // custom elements. Inject DSD for any nested custom
+                    // elements that have templates but weren't rendered.
+                    for (const nestedTag of Object.keys(templatesMap)) {
+                        // Match opening tags that don't already have a
+                        // DSD <template> as their first child.
+                        const openTagRe = new RegExp(
+                            `(<${nestedTag}(?=[\\s>/])[^>]*>)(?!\\s*<template[\\s>])`,
+                            "g",
+                        );
+
+                        fixture = fixture.replace(openTagRe, (_, open: string) => {
+                            // Render this element in isolation.
+                            const solo: string = wasm.render_with_templates(
+                                `${open}</${nestedTag}>`,
+                                templatesJson,
+                                JSON.stringify(defaultStateByTag.get(nestedTag) ?? {}),
+                                "camelCase",
+                            );
+                            // Extract the DSD that was injected.
+                            const dsdStart = solo.indexOf("<template shadowrootmode");
+                            const dsdEnd = solo.lastIndexOf("</template>");
+                            if (dsdStart !== -1 && dsdEnd > dsdStart) {
+                                return `${open}${solo.slice(dsdStart, dsdEnd + "</template>".length)}`;
+                            }
+                            return open;
+                        });
+                    }
                 } catch (e) {
                     // Fall back to the raw entry HTML if rendering fails.
                     console.error("WASM render failed:", e);
diff --git a/packages/fast-test-harness/tsconfig.build.json b/packages/fast-test-harness/tsconfig.build.json
index e7bba23dae1..3cef33657dc 100644
--- a/packages/fast-test-harness/tsconfig.build.json
+++ b/packages/fast-test-harness/tsconfig.build.json
@@ -11,5 +11,6 @@
         "sourceMap": false,
         "outDir": "dist/esm"
     },
-    "include": ["src/**/*.ts"]
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
 }

From 14d6c88e5abb5eacd9af06dc72ca0d9c0a020751 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Fri, 1 May 2026 13:32:56 -0700
Subject: [PATCH 11/14] chore: update changefiles in preparation for merging
 into main

---
 ...oft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3532.json | 4 ++--
 ...oft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json | 4 ++--
 ...oft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json | 4 ++--
 ...oft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json | 4 ++--
 ...oft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json | 4 ++--
 ...oft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json | 4 ++--
 ...oft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json | 4 ++--
 ...oft-fast-element-6ff0621c-8656-4b37-a6bf-4286c3f40c33.json | 4 ++--
 ...oft-fast-element-724d29c9-2cdc-4940-83c1-70ec5d64095e.json | 4 ++--
 ...oft-fast-element-748c99d5-48b4-4910-bb6c-e62520907383.json | 4 ++--
 ...oft-fast-element-8f565910-c32b-471f-8452-2b4d075c7bc7.json | 4 ++--
 ...oft-fast-element-9dd7b073-98cc-401b-a04d-0c02bee14306.json | 4 ++--
 ...oft-fast-element-a3210470-66d1-4f88-a4e9-009f116b41fc.json | 4 ++--
 ...oft-fast-element-bf6e1587-06a9-4834-b906-54a625d2b446.json | 4 ++--
 ...oft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json | 4 ++--
 ...oft-fast-element-cab755e9-4ef4-4aac-b19a-f507df049e6b.json | 4 ++--
 ...oft-fast-element-df226ab5-6e68-4362-b8ac-35046f0fc68b.json | 4 ++--
 ...oft-fast-element-e0df8ba4-3d6c-4d95-a987-c3fcf719d9f6.json | 4 ++--
 ...oft-fast-element-f5c8274a-52ea-4f04-90e2-f51ca033abc1.json | 4 ++--
 ...soft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json | 2 +-
 20 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3532.json b/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3532.json
index b2f21a220a4..1a9a1169513 100644
--- a/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3532.json
+++ b/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3532.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "remove FASTGlobal version tracking",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove FASTGlobal version tracking",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json b/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json
index 08f341524f3..eb1222a40d2 100644
--- a/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json
+++ b/change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove hydration view template side effect and unused export paths",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove hydration view template side effect and unused export paths",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json b/change/@microsoft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json
index f021be0f3b6..99420b67557 100644
--- a/change/@microsoft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json
+++ b/change/@microsoft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "Add schema-driven attributeMap and observerMap extension subpaths, optional definition schema, and observerMap schema configuration.",
+  "type": "prerelease",
+  "comment": "feat: add schema-driven attributeMap and observerMap extension subpaths, optional definition schema, and observerMap schema configuration.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json b/change/@microsoft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json
index 8d8888a762d..eb26750c8d9 100644
--- a/change/@microsoft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json
+++ b/change/@microsoft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Move optional helpers to dedicated flat fast-element subpath exports such as @microsoft/fast-element/children.js, @microsoft/fast-element/repeat.js, @microsoft/fast-element/two-way.js, @microsoft/fast-element/signal.js, @microsoft/fast-element/attribute-map.js, and @microsoft/fast-element/observer-map.js while keeping controller and definition internals on the root entrypoint.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: move optional helpers to dedicated flat fast-element subpath exports such as @microsoft/fast-element/children.js, @microsoft/fast-element/repeat.js, @microsoft/fast-element/two-way.js, @microsoft/fast-element/signal.js, @microsoft/fast-element/attribute-map.js, and @microsoft/fast-element/observer-map.js while keeping controller and definition internals on the root entrypoint.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json b/change/@microsoft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json
index 4acfbf098ef..238f041869a 100644
--- a/change/@microsoft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json
+++ b/change/@microsoft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove the public declarative TemplateElement configuration APIs and make declarative templates use an internal native f-template publisher with explicit hydration opt-in.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove the public declarative TemplateElement configuration APIs and make declarative templates use an internal native f-template publisher with explicit hydration opt-in.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json b/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json
index d76b41861ae..ba78574e349 100644
--- a/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json
+++ b/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Replace HydratableElementController with automatic prerendered content optimization. When a component connects with an existing shadow root, bindings skip attribute/booleanAttribute DOM updates during initial render while still setting up event listeners, observers, and dependency tracking. Added isPrerendered flag to ElementController and ViewController. Added template-pending guard for defineAsync flow.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: replace HydratableElementController with automatic prerendered content optimization. When a component connects with an existing shadow root, bindings skip attribute/booleanAttribute DOM updates during initial render while still setting up event listeners, observers, and dependency tracking. Added isPrerendered flag to ElementController and ViewController. Added template-pending guard for defineAsync flow.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "patch"
diff --git a/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json b/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json
index dbaec336601..2de2628e1bb 100644
--- a/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json
+++ b/change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Move declarative HTML APIs into @microsoft/fast-element/declarative.js, expose schema map helpers from extension subpaths, and remove the @microsoft/fast-html package.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: move declarative HTML APIs into @microsoft/fast-element/declarative.js, expose schema map helpers from extension subpaths, and remove the @microsoft/fast-html package.",
   "packageName": "@microsoft/fast-element",
   "dependentChangeType": "none",
   "email": "7559015+janechu@users.noreply.github.com"
diff --git a/change/@microsoft-fast-element-6ff0621c-8656-4b37-a6bf-4286c3f40c33.json b/change/@microsoft-fast-element-6ff0621c-8656-4b37-a6bf-4286c3f40c33.json
index 3eca6e41519..6a8b5aa24e8 100644
--- a/change/@microsoft-fast-element-6ff0621c-8656-4b37-a6bf-4286c3f40c33.json
+++ b/change/@microsoft-fast-element-6ff0621c-8656-4b37-a6bf-4286c3f40c33.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "add declarativeTemplate for auto-resolving <f-template> markup",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: add declarativeTemplate for auto-resolving <f-template> markup",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-724d29c9-2cdc-4940-83c1-70ec5d64095e.json b/change/@microsoft-fast-element-724d29c9-2cdc-4940-83c1-70ec5d64095e.json
index ae5d908d370..e2539b82121 100644
--- a/change/@microsoft-fast-element-724d29c9-2cdc-4940-83c1-70ec5d64095e.json
+++ b/change/@microsoft-fast-element-724d29c9-2cdc-4940-83c1-70ec5d64095e.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove ElementStyles.withBehaviors, CSS style behaviors, and CSS bindings in fast-element.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove ElementStyles.withBehaviors, CSS style behaviors, and CSS bindings in fast-element.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-748c99d5-48b4-4910-bb6c-e62520907383.json b/change/@microsoft-fast-element-748c99d5-48b4-4910-bb6c-e62520907383.json
index 4221b946161..9700fc4d085 100644
--- a/change/@microsoft-fast-element-748c99d5-48b4-4910-bb6c-e62520907383.json
+++ b/change/@microsoft-fast-element-748c99d5-48b4-4910-bb6c-e62520907383.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "Add extensions array argument to FASTElement.define() and FASTElementDefinition.define()",
+  "type": "prerelease",
+  "comment": "feat: add extensions array argument to FASTElement.define() and FASTElementDefinition.define()",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "patch"
diff --git a/change/@microsoft-fast-element-8f565910-c32b-471f-8452-2b4d075c7bc7.json b/change/@microsoft-fast-element-8f565910-c32b-471f-8452-2b4d075c7bc7.json
index 5a91ebdfadb..ba5ca885094 100644
--- a/change/@microsoft-fast-element-8f565910-c32b-471f-8452-2b4d075c7bc7.json
+++ b/change/@microsoft-fast-element-8f565910-c32b-471f-8452-2b4d075c7bc7.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove TemplateOptions from fast-element definitions and drop templateOptions-based connection/define waiting.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove TemplateOptions from fast-element definitions and drop templateOptions-based connection/define waiting.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-9dd7b073-98cc-401b-a04d-0c02bee14306.json b/change/@microsoft-fast-element-9dd7b073-98cc-401b-a04d-0c02bee14306.json
index 778fe226aeb..5a796040aaa 100644
--- a/change/@microsoft-fast-element-9dd7b073-98cc-401b-a04d-0c02bee14306.json
+++ b/change/@microsoft-fast-element-9dd7b073-98cc-401b-a04d-0c02bee14306.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Simplify hydration markers to data-free sequential format (fe:b, fe:/b, fe:r, fe:/r, fe:e, fe:/e). Replace regex parsing with string equality checks. Single data-fe attribute replaces three old formats. Breaking change: SSR output format changed.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: simplify hydration markers to data-free sequential format (fe:b, fe:/b, fe:r, fe:/r, fe:e, fe:/e). Replace regex parsing with string equality checks. Single data-fe attribute replaces three old formats. Breaking change: SSR output format changed.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-a3210470-66d1-4f88-a4e9-009f116b41fc.json b/change/@microsoft-fast-element-a3210470-66d1-4f88-a4e9-009f116b41fc.json
index 63171fafaa5..b8e87a97509 100644
--- a/change/@microsoft-fast-element-a3210470-66d1-4f88-a4e9-009f116b41fc.json
+++ b/change/@microsoft-fast-element-a3210470-66d1-4f88-a4e9-009f116b41fc.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "remove deprecated declarative event e support",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove deprecated declarative event e support",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-bf6e1587-06a9-4834-b906-54a625d2b446.json b/change/@microsoft-fast-element-bf6e1587-06a9-4834-b906-54a625d2b446.json
index 59017661d0c..1626e54a37b 100644
--- a/change/@microsoft-fast-element-bf6e1587-06a9-4834-b906-54a625d2b446.json
+++ b/change/@microsoft-fast-element-bf6e1587-06a9-4834-b906-54a625d2b446.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Make declarative runtime setup lazy and change @microsoft/fast-element/debug.js to require an explicit enableDebug() call.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: make declarative runtime setup lazy and change @microsoft/fast-element/debug.js to require an explicit enableDebug() call.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json b/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json
index e068df1b4c9..9ac1d602618 100644
--- a/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json
+++ b/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "feat: modularize hydration and expose lifecycle callbacks via enableHydration() and declarativeTemplate()",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: modularize hydration and expose lifecycle callbacks via enableHydration() and declarativeTemplate()",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-cab755e9-4ef4-4aac-b19a-f507df049e6b.json b/change/@microsoft-fast-element-cab755e9-4ef4-4aac-b19a-f507df049e6b.json
index e58ad2d00af..ddecdc48fd6 100644
--- a/change/@microsoft-fast-element-cab755e9-4ef4-4aac-b19a-f507df049e6b.json
+++ b/change/@microsoft-fast-element-cab755e9-4ef4-4aac-b19a-f507df049e6b.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove defineAsync and composeAsync — define() and compose() now return Promises",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove defineAsync and composeAsync — define() and compose() now return Promises",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "patch"
diff --git a/change/@microsoft-fast-element-df226ab5-6e68-4362-b8ac-35046f0fc68b.json b/change/@microsoft-fast-element-df226ab5-6e68-4362-b8ac-35046f0fc68b.json
index d0346bed7c2..92f3207100d 100644
--- a/change/@microsoft-fast-element-df226ab5-6e68-4362-b8ac-35046f0fc68b.json
+++ b/change/@microsoft-fast-element-df226ab5-6e68-4362-b8ac-35046f0fc68b.json
@@ -1,6 +1,6 @@
 {
-  "type": "minor",
-  "comment": "add function-based template resolver sequencing",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: add function-based template resolver sequencing",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-element-e0df8ba4-3d6c-4d95-a987-c3fcf719d9f6.json b/change/@microsoft-fast-element-e0df8ba4-3d6c-4d95-a987-c3fcf719d9f6.json
index 1321d55e579..2690b600117 100644
--- a/change/@microsoft-fast-element-e0df8ba4-3d6c-4d95-a987-c3fcf719d9f6.json
+++ b/change/@microsoft-fast-element-e0df8ba4-3d6c-4d95-a987-c3fcf719d9f6.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "Remove the built-in globalThis polyfill; fast-element v3 now requires native globalThis",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove the built-in globalThis polyfill; fast-element v3 now requires native globalThis",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "patch"
diff --git a/change/@microsoft-fast-element-f5c8274a-52ea-4f04-90e2-f51ca033abc1.json b/change/@microsoft-fast-element-f5c8274a-52ea-4f04-90e2-f51ca033abc1.json
index f7ca22af047..9c1372dfdc0 100644
--- a/change/@microsoft-fast-element-f5c8274a-52ea-4f04-90e2-f51ca033abc1.json
+++ b/change/@microsoft-fast-element-f5c8274a-52ea-4f04-90e2-f51ca033abc1.json
@@ -1,6 +1,6 @@
 {
-  "type": "major",
-  "comment": "fix: remove the fast-kernel multi-kernel modes. Breaking change: FAST no longer supports configuring isolated or version-scoped kernels via the script attribute.",
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: remove the fast-kernel multi-kernel modes. Breaking change: FAST no longer supports configuring isolated or version-scoped kernels via the script attribute.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json b/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json
index 3af1bd0477b..acbc5ac8595 100644
--- a/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json
+++ b/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "Update imports for styles.js subpath export",
+  "comment": "minor: update imports for styles.js subpath export",
   "packageName": "@microsoft/fast-router",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"

From e9c4e995068912777b4acf4ceffecbeaae8b08ba Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Fri, 1 May 2026 13:34:03 -0700
Subject: [PATCH 12/14] change fast-element beachball setup to use prerelease

---
 packages/fast-element/package.json | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/fast-element/package.json b/packages/fast-element/package.json
index 888b724c1df..e75048e0c7c 100644
--- a/packages/fast-element/package.json
+++ b/packages/fast-element/package.json
@@ -235,5 +235,14 @@
   "files": [
     "./dist",
     "CHANGELOG.md"
-  ]
+  ],
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ],
+    "tag": "rc",
+    "prereleasePrefix": "rc"
+  }
 }

From fccdde4ffbb8d90f51d03b6f70249af982269461 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Fri, 1 May 2026 14:11:54 -0700
Subject: [PATCH 13/14] update declarative docs locations

---
 packages/fast-build/README.md                      |  2 +-
 packages/fast-element/DESIGN.md                    |  4 ++--
 packages/fast-element/README.md                    |  2 +-
 .../declarative-design.md}                         | 14 +++++++-------
 .../declarative-html.md}                           |  4 ++--
 .../declarative-migration.md}                      |  0
 .../declarative-rendering-lifecycle.md}            |  0
 .../declarative-rendering.md}                      |  2 +-
 .../declarative-schema-observer-map.md}            |  0
 .../test/declarative/fixtures/WRITING_FIXTURES.md  |  2 +-
 10 files changed, 15 insertions(+), 15 deletions(-)
 rename packages/fast-element/{DECLARATIVE_DESIGN.md => docs/declarative-design.md} (98%)
 rename packages/fast-element/{DECLARATIVE_HTML.md => docs/declarative-html.md} (99%)
 rename packages/fast-element/{DECLARATIVE_MIGRATION.md => docs/declarative-migration.md} (100%)
 rename packages/fast-element/{DECLARATIVE_RENDERING_LIFECYCLE.md => docs/declarative-rendering-lifecycle.md} (100%)
 rename packages/fast-element/{DECLARATIVE_RENDERING.md => docs/declarative-rendering.md} (99%)
 rename packages/fast-element/{DECLARATIVE_SCHEMA_OBSERVER_MAP.md => docs/declarative-schema-observer-map.md} (100%)

diff --git a/packages/fast-build/README.md b/packages/fast-build/README.md
index 2ed8ff7e2b8..a6da1b9bf70 100644
--- a/packages/fast-build/README.md
+++ b/packages/fast-build/README.md
@@ -172,5 +172,5 @@ All keys are optional. Only the following keys are allowed: `entry`, `state`, `o
 ## Template syntax
 
 Template syntax follows the FAST declarative HTML format. See the
-[`@microsoft/fast-element` declarative documentation](../fast-element/DECLARATIVE_HTML.md)
+[`@microsoft/fast-element` declarative documentation](https://fast.design/docs/3.x/declarative-templates/overview/)
 for full documentation on bindings, conditionals, repeats, and directives.
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index 56a45c520e5..752c5f110e5 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -366,7 +366,7 @@ The `src/declarative/index.ts` entrypoint is pure at module evaluation time. Run
 declarative API lazily installs declarative debug messages only. Hydration hooks
 and hydratable `ViewTemplate` support are installed exclusively by
 `enableHydration()` from `@microsoft/fast-element/hydration.js`. See
-[`DECLARATIVE_DESIGN.md`](./DECLARATIVE_DESIGN.md) for the detailed
+[`declarative-design.md`](./docs/declarative-design.md) for the detailed
 architecture.
 
 ---
@@ -603,7 +603,7 @@ src/
 | [docs/architecture/fastelement.md](./docs/architecture/fastelement.md) | FASTElement & ElementController lifecycle in detail |
 | [docs/architecture/html-tagged-template-literal.md](./docs/architecture/html-tagged-template-literal.md) | `html` tag, directives, binding pre-processing |
 | [docs/architecture/updates.md](./docs/architecture/updates.md) | Updates queue, attribute and observable change batching |
-| [DECLARATIVE_DESIGN.md](./DECLARATIVE_DESIGN.md) | Declarative HTML runtime, parser, schema, maps, and fixture architecture |
+| [declarative-design.md](./docs/declarative-design.md) | Declarative HTML runtime, parser, schema, maps, and fixture architecture |
 | [docs/template-bindings.md](./docs/template-bindings.md) | Full template binding pipeline: authoring → compilation → binding → DOM updates |
 | [docs/fast-element-2-changes.md](./docs/fast-element-2-changes.md) | Breaking changes from v1 to v2 |
 
diff --git a/packages/fast-element/README.md b/packages/fast-element/README.md
index a3e906e7366..6d4a720f3ee 100644
--- a/packages/fast-element/README.md
+++ b/packages/fast-element/README.md
@@ -167,7 +167,7 @@ mapping runs before observer mapping.
 
 Declarative utilities such as `deepMerge` are available from
 `@microsoft/fast-element/declarative-utilities.js`. See
-[`DECLARATIVE_HTML.md`](./DECLARATIVE_HTML.md) for declarative implementation
+[`declarative-html.md`](./docs/declarative-html.md) for declarative implementation
 details and the
 [Declarative HTML docs](https://fast.design/docs/3.x/declarative-templates/overview/)
 for guides on writing f-templates, defining declarative elements, and
diff --git a/packages/fast-element/DECLARATIVE_DESIGN.md b/packages/fast-element/docs/declarative-design.md
similarity index 98%
rename from packages/fast-element/DECLARATIVE_DESIGN.md
rename to packages/fast-element/docs/declarative-design.md
index 2e63f628888..021e6d30591 100644
--- a/packages/fast-element/DECLARATIVE_DESIGN.md
+++ b/packages/fast-element/docs/declarative-design.md
@@ -557,7 +557,7 @@ flowchart LR
 
 For a deep dive into the schema structure, context tracking, and proxy system
 see
-[DECLARATIVE_SCHEMA_OBSERVER_MAP.md](./DECLARATIVE_SCHEMA_OBSERVER_MAP.md).
+[declarative-schema-observer-map.md](./declarative-schema-observer-map.md).
 
 ### `$observe` flag on schema nodes
 
@@ -654,7 +654,7 @@ sequenceDiagram
 | `hydrationComplete()` | `enableHydration(options)` | Once, after all prerendered elements have completed hydration. |
 
 For usage examples see
-[DECLARATIVE_RENDERING_LIFECYCLE.md](./DECLARATIVE_RENDERING_LIFECYCLE.md).
+[declarative-rendering-lifecycle.md](./declarative-rendering-lifecycle.md).
 
 ---
 
@@ -720,7 +720,7 @@ With `declarativeTemplate()`, connection gating happens before platform registra
 ```
 
 For detailed examples see
-[DECLARATIVE_RENDERING.md](./DECLARATIVE_RENDERING.md).
+[declarative-rendering.md](./declarative-rendering.md).
 
 ---
 
@@ -797,10 +797,10 @@ for an example of a complex multi-feature fixture.
 
 | Document | Topic |
 |---|---|
-| [DECLARATIVE_HTML.md](./DECLARATIVE_HTML.md) | Installation, syntax reference, lifecycle callbacks, usage examples |
-| [DECLARATIVE_RENDERING.md](./DECLARATIVE_RENDERING.md) | Hydratable HTML format: comment markers, dataset attributes, directive markers |
-| [DECLARATIVE_RENDERING_LIFECYCLE.md](./DECLARATIVE_RENDERING_LIFECYCLE.md) | Phase-by-phase rendering lifecycle, callback ordering, performance notes |
-| [DECLARATIVE_SCHEMA_OBSERVER_MAP.md](./DECLARATIVE_SCHEMA_OBSERVER_MAP.md) | Deep dive into Schema JSON structure, ObserverMap proxy system, debugging |
+| [declarative-html.md](./declarative-html.md) | Installation, syntax reference, lifecycle callbacks, usage examples |
+| [declarative-rendering.md](./declarative-rendering.md) | Hydratable HTML format: comment markers, dataset attributes, directive markers |
+| [declarative-rendering-lifecycle.md](./declarative-rendering-lifecycle.md) | Phase-by-phase rendering lifecycle, callback ordering, performance notes |
+| [declarative-schema-observer-map.md](./declarative-schema-observer-map.md) | Deep dive into Schema JSON structure, ObserverMap proxy system, debugging |
 | [test/declarative/fixtures/README.md](./test/declarative/fixtures/README.md) | Quick reference for fixture structure |
 | [test/declarative/fixtures/WRITING_FIXTURES.md](./test/declarative/fixtures/WRITING_FIXTURES.md) | Complete guide to writing new Playwright fixture tests |
 | [test/declarative/fixtures/extensions/observer-map-deep-merge/README.md](./test/declarative/fixtures/extensions/observer-map-deep-merge/README.md) | Complex deep-merge fixture: observable arrays, nested repeats, conditionals |
diff --git a/packages/fast-element/DECLARATIVE_HTML.md b/packages/fast-element/docs/declarative-html.md
similarity index 99%
rename from packages/fast-element/DECLARATIVE_HTML.md
rename to packages/fast-element/docs/declarative-html.md
index 6ab5930ea5d..254561718fe 100644
--- a/packages/fast-element/DECLARATIVE_HTML.md
+++ b/packages/fast-element/docs/declarative-html.md
@@ -60,7 +60,7 @@ be stack agnostic because JavaScript does not need to be interpreted to emit
 the initial HTML. The declarative runtime expects hydratable comment markers
 and datasets when prerendered content is generated. For the required marker
 format and initial-state application details, see
-[DECLARATIVE_RENDERING.md](./DECLARATIVE_RENDERING.md).
+[declarative-rendering.md](./declarative-rendering.md).
 
 ## Lifecycle Callbacks
 
@@ -467,4 +467,4 @@ rendering differences between `fast-build` and `webui`. The
 `playwright.declarative.webui.config.ts` file sets
 `FAST_WEBUI_INTEGRATION=true`, and affected tests use `test.skip()` with a
 descriptive reason. See the WebUI Integration Tests section in
-[DECLARATIVE_DESIGN.md](./DECLARATIVE_DESIGN.md) for the full list.
+[declarative-design.md](./declarative-design.md) for the full list.
diff --git a/packages/fast-element/DECLARATIVE_MIGRATION.md b/packages/fast-element/docs/declarative-migration.md
similarity index 100%
rename from packages/fast-element/DECLARATIVE_MIGRATION.md
rename to packages/fast-element/docs/declarative-migration.md
diff --git a/packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md b/packages/fast-element/docs/declarative-rendering-lifecycle.md
similarity index 100%
rename from packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md
rename to packages/fast-element/docs/declarative-rendering-lifecycle.md
diff --git a/packages/fast-element/DECLARATIVE_RENDERING.md b/packages/fast-element/docs/declarative-rendering.md
similarity index 99%
rename from packages/fast-element/DECLARATIVE_RENDERING.md
rename to packages/fast-element/docs/declarative-rendering.md
index ed580c27973..3add2534b3f 100644
--- a/packages/fast-element/DECLARATIVE_RENDERING.md
+++ b/packages/fast-element/docs/declarative-rendering.md
@@ -527,4 +527,4 @@ Should result in:
 
 For information about the declarative rendering lifecycle inside
 `@microsoft/fast-element`, see
-[DECLARATIVE_RENDERING_LIFECYCLE.md](./DECLARATIVE_RENDERING_LIFECYCLE.md).
+[declarative-rendering-lifecycle.md](./declarative-rendering-lifecycle.md).
diff --git a/packages/fast-element/DECLARATIVE_SCHEMA_OBSERVER_MAP.md b/packages/fast-element/docs/declarative-schema-observer-map.md
similarity index 100%
rename from packages/fast-element/DECLARATIVE_SCHEMA_OBSERVER_MAP.md
rename to packages/fast-element/docs/declarative-schema-observer-map.md
diff --git a/packages/fast-element/test/declarative/fixtures/WRITING_FIXTURES.md b/packages/fast-element/test/declarative/fixtures/WRITING_FIXTURES.md
index 98ee5e987f0..a216f943d1b 100644
--- a/packages/fast-element/test/declarative/fixtures/WRITING_FIXTURES.md
+++ b/packages/fast-element/test/declarative/fixtures/WRITING_FIXTURES.md
@@ -150,7 +150,7 @@ This file defines the declarative `<f-template>` elements that describe each cus
 
 For a full reference of binding syntax, event bindings, directives (`f-when`,
 `f-repeat`), and execution context access, see the [Syntax section of the
-declarative docs](../../../DECLARATIVE_HTML.md#syntax).
+declarative docs](../../../docs/declarative-html.md#syntax).
 
 Multiple `<f-template>` elements can be defined in a single `templates.html` — one per custom element used in the fixture.
 

From e38ec21ca5846abdf00d05a6b8cd3fa2501be0ec Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Fri, 1 May 2026 14:18:39 -0700
Subject: [PATCH 14/14] update missed Rust test

---
 crates/microsoft-fast-build/tests/custom_elements.rs | 2 +-
 crates/microsoft-fast-build/tests/edge_cases.rs      | 2 +-
 crates/microsoft-fast-build/tests/hydration.rs       | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/crates/microsoft-fast-build/tests/custom_elements.rs b/crates/microsoft-fast-build/tests/custom_elements.rs
index 98ae509adb1..4bfd4df0198 100644
--- a/crates/microsoft-fast-build/tests/custom_elements.rs
+++ b/crates/microsoft-fast-build/tests/custom_elements.rs
@@ -634,7 +634,7 @@ fn test_root_custom_element_missing_binding_attr_omitted() {
         None,
     ).unwrap();
     assert!(!result.contains("text="), "missing binding attr omitted: {result}");
-    assert!(result.contains("<!--fe-b$$start$$0$$text-0$$fe-b--><!--fe-b$$end$$0$$text-0$$fe-b-->"));
+    assert!(result.contains("<!--fe:b--><!--fe:/b-->"), "content binding marker: {result}");
 }
 
 #[test]
diff --git a/crates/microsoft-fast-build/tests/edge_cases.rs b/crates/microsoft-fast-build/tests/edge_cases.rs
index 3832ee71575..aab2806fad3 100644
--- a/crates/microsoft-fast-build/tests/edge_cases.rs
+++ b/crates/microsoft-fast-build/tests/edge_cases.rs
@@ -115,7 +115,7 @@ fn test_render_entry_with_locator_without_state_uses_empty_object() {
     let result = render_entry_with_locator_without_state("<my-el></my-el>", &locator, None)
         .expect("render entry without state");
     assert!(result.contains("<span>"), "shadow content rendered: {result}");
-    assert!(result.contains("<!--fe-b$$start$$0$$label-0$$fe-b--><!--fe-b$$end$$0$$label-0$$fe-b-->"));
+    assert!(result.contains("<!--fe:b--><!--fe:/b-->"), "content binding marker: {result}");
 }
 
 // ── deeply nested property access ─────────────────────────────────────────────
diff --git a/crates/microsoft-fast-build/tests/hydration.rs b/crates/microsoft-fast-build/tests/hydration.rs
index 4bbb3d8ef0c..283813b49f9 100644
--- a/crates/microsoft-fast-build/tests/hydration.rs
+++ b/crates/microsoft-fast-build/tests/hydration.rs
@@ -98,7 +98,7 @@ fn test_hydration_missing_attribute_binding_omits_attribute() {
     ).unwrap();
 
     let shadow = extract_shadow(&result);
-    assert!(shadow.contains("data-fe-c-0-2"), "compact marker: {result}");
+    assert!(shadow.contains(r#"data-fe="2""#), "compact marker: {result}");
     assert!(shadow.contains(r#"type="text""#), "resolved attr: {result}");
     assert!(shadow.contains(r#"class="static""#), "static attr: {result}");
     assert!(!shadow.contains("value="), "missing attr omitted: {result}");
@@ -616,9 +616,9 @@ fn test_hydration_nested_element_missing_attr_binding_omits_attribute() {
         None,
     ).unwrap();
 
-    assert!(result.contains("data-fe-c-0-1"), "attr binding marker remains: {result}");
+    assert!(result.contains(r#"data-fe="1""#), "attr binding marker remains: {result}");
     assert!(!result.contains("label="), "missing attr omitted: {result}");
-    assert!(result.contains("<!--fe-b$$start$$0$$label-0$$fe-b--><!--fe-b$$end$$0$$label-0$$fe-b-->"));
+    assert!(result.contains("<!--fe:b--><!--fe:/b-->"), "content binding marker: {result}");
 }
 
 // ── Unescaped triple-brace ────────────────────────────────────────────────────