docs: add declarative template documentation to 3.x docs site

packages/fast-element/DECLARATIVE_HTML.md

@@ -14,6 +14,9 @@ For package installation, importing `TemplateElement`, basic registration, and
 the package-level hydration overview, see the
 [FAST Element README](./README.md#declarative-html) and
 [Prerendered Content Optimization](./README.md#prerendered-content-optimization).
+For user-facing guides covering f-template syntax, element definition, and
+server-side rendering, see the
+[Declarative HTML docs](https://fast.design/docs/3.x/declarative-templates/overview/).
 
 ## Template Structure
 

packages/fast-element/README.md

@@ -101,9 +101,12 @@ TemplateElement.define({ name: "f-template" });
 
 Declarative utilities such as `deepMerge` are available from
 `@microsoft/fast-element/declarative/utilities.js`. See
-[`DECLARATIVE_HTML.md`](./DECLARATIVE_HTML.md) for declarative usage details.
-Declarative event bindings use `$e` for the DOM event object and `$c` for the
-execution context.
+[`DECLARATIVE_HTML.md`](./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
+server-side rendering. Declarative event bindings use `$e` for the DOM event
+object and `$c` for the execution context.
 
 ## Prerendered Content Optimization
 

packages/fast-element/src/declarative/attribute-map.ts

@@ -18,14 +18,14 @@ export interface AttributeMapConfig {
     /**
      * Strategy for mapping template binding keys to HTML attribute names.
      *
-     * - `"none"` (default): the binding key is used as-is for both the
-     *   property name and the attribute name (e.g. `{{foo-bar}}` →
-     *   property `foo-bar`, attribute `foo-bar`).
-     * - `"camelCase"`: the binding key is treated as a camelCase property
+     * - `"camelCase"` (default): the binding key is treated as a camelCase property
      *   name and the attribute name is derived by converting it to
      *   kebab-case (e.g. `{{fooBar}}` → property `fooBar`, attribute
      *   `foo-bar`). This matches the build-time `attribute-name-strategy`
      *   option in `@microsoft/fast-build`.
+     * - `"none"`: the binding key is used as-is for both the
+     *   property name and the attribute name (e.g. `{{foo-bar}}` →
+     *   property `foo-bar`, attribute `foo-bar`).
      */
     "attribute-name-strategy"?: "none" | "camelCase";
 }
@@ -56,14 +56,14 @@ function camelToKebab(str: string): string {
  * A property is a candidate for @attr when its schema entry has no nested `properties`,
  * no `type`, and no `anyOf` — i.e. it is a plain binding like {{foo}} or id="{{foo-bar}}".
  *
- * When `attribute-name-strategy` is `"none"` (the default), the binding key is used
- * as both the attribute name and property name — no normalization is applied.
- *
- * When `attribute-name-strategy` is `"camelCase"`, the binding key is treated as a
+ * When `attribute-name-strategy` is `"camelCase"` (the default), the binding key is treated as a
  * camelCase property name and the HTML attribute name is derived by converting it to
  * kebab-case (e.g. property `fooBar` → attribute `foo-bar`). This matches the
  * build-time `attribute-name-strategy` option in `@microsoft/fast-build`.
  *
+ * When `attribute-name-strategy` is `"none"`, the binding key is used
+ * as both the attribute name and property name — no normalization is applied.
+ *
  * Properties already decorated with `@attr` or `@observable` on the class are left
  * untouched.
  */
@@ -90,7 +90,7 @@ export class AttributeMap {
         const existingAccessorNames = new Set(
             Observable.getAccessors(this.classPrototype).map(a => a.name),
         );
-        const strategy = this.config?.["attribute-name-strategy"] ?? "none";
+        const strategy = this.config?.["attribute-name-strategy"] ?? "camelCase";
 
         for (const propertyName of propertyNames) {
             const propertySchema = this.schema.getSchema(propertyName);

sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.attributemap.md

@@ -19,9 +19,9 @@ AttributeMap provides functionality for detecting simple (leaf) properties in a
 
 A property is a candidate for  when its schema entry has no nested `properties`<!-- -->, no `type`<!-- -->, and no `anyOf` — i.e. it is a plain binding like {<!-- -->{<!-- -->foo<!-- -->}<!-- -->} or id="<!-- -->{<!-- -->{<!-- -->foo-bar<!-- -->}<!-- -->}<!-- -->".
 
-When `attribute-name-strategy` is `"none"` (the default), the binding key is used as both the attribute name and property name — no normalization is applied.
+When `attribute-name-strategy` is `"camelCase"` (the default), the binding key is treated as a camelCase property name and the HTML attribute name is derived by converting it to kebab-case (e.g. property `fooBar` → attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
 
-When `attribute-name-strategy` is `"camelCase"`<!-- -->, the binding key is treated as a camelCase property name and the HTML attribute name is derived by converting it to kebab-case (e.g. property `fooBar` → attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
+When `attribute-name-strategy` is `"none"`<!-- -->, the binding key is used as both the attribute name and property name — no normalization is applied.
 
 Properties already decorated with `@attr` or `@observable` on the class are left untouched.
 

sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.attributemapconfig._attribute-name-strategy_.md

@@ -17,7 +17,7 @@ navigationOptions:
 
 Strategy for mapping template binding keys to HTML attribute names.
 
-- `"none"` (default): the binding key is used as-is for both the property name and the attribute name (e.g. `{{foo-bar}}` → property `foo-bar`<!-- -->, attribute `foo-bar`<!-- -->). - `"camelCase"`<!-- -->: the binding key is treated as a camelCase property name and the attribute name is derived by converting it to kebab-case (e.g. `{{fooBar}}` → property `fooBar`<!-- -->, attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
+- `"camelCase"` (default): the binding key is treated as a camelCase property name and the attribute name is derived by converting it to kebab-case (e.g. `{{fooBar}}` → property `fooBar`<!-- -->, attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->. - `"none"`<!-- -->: the binding key is used as-is for both the property name and the attribute name (e.g. `{{foo-bar}}` → property `foo-bar`<!-- -->, attribute `foo-bar`<!-- -->).
 
 **Signature:**
 

sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.attributemapconfig.md

@@ -63,7 +63,7 @@ Description
 
 _(Optional)_ Strategy for mapping template binding keys to HTML attribute names.
 
-- `"none"` (default): the binding key is used as-is for both the property name and the attribute name (e.g. `{{foo-bar}}` → property `foo-bar`<!-- -->, attribute `foo-bar`<!-- -->). - `"camelCase"`<!-- -->: the binding key is treated as a camelCase property name and the attribute name is derived by converting it to kebab-case (e.g. `{{fooBar}}` → property `fooBar`<!-- -->, attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
+- `"camelCase"` (default): the binding key is treated as a camelCase property name and the attribute name is derived by converting it to kebab-case (e.g. `{{fooBar}}` → property `fooBar`<!-- -->, attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->. - `"none"`<!-- -->: the binding key is used as-is for both the property name and the attribute name (e.g. `{{foo-bar}}` → property `foo-bar`<!-- -->, attribute `foo-bar`<!-- -->).
 
 
 </td></tr>

sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.md

@@ -38,9 +38,9 @@ AttributeMap provides functionality for detecting simple (leaf) properties in a
 
 A property is a candidate for  when its schema entry has no nested `properties`<!-- -->, no `type`<!-- -->, and no `anyOf` — i.e. it is a plain binding like {<!-- -->{<!-- -->foo<!-- -->}<!-- -->} or id="<!-- -->{<!-- -->{<!-- -->foo-bar<!-- -->}<!-- -->}<!-- -->".
 
-When `attribute-name-strategy` is `"none"` (the default), the binding key is used as both the attribute name and property name — no normalization is applied.
+When `attribute-name-strategy` is `"camelCase"` (the default), the binding key is treated as a camelCase property name and the HTML attribute name is derived by converting it to kebab-case (e.g. property `fooBar` → attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
 
-When `attribute-name-strategy` is `"camelCase"`<!-- -->, the binding key is treated as a camelCase property name and the HTML attribute name is derived by converting it to kebab-case (e.g. property `fooBar` → attribute `foo-bar`<!-- -->). This matches the build-time `attribute-name-strategy` option in `@microsoft/fast-build`<!-- -->.
+When `attribute-name-strategy` is `"none"`<!-- -->, the binding key is used as both the attribute name and property name — no normalization is applied.
 
 Properties already decorated with `@attr` or `@observable` on the class are left untouched.
 

sites/website/src/docs/3.x/declarative-templates.md

@@ -0,0 +1,10 @@
+---
+layout: 3x
+eleventyNavigation:
+  key: declarative-templates3x
+  title: Declarative HTML
+  order: 3
+navigationOptions:
+  activeKey: declarative-templates3x
+permalink: false
+---