fix: ensure fast foundation templates support extended classes (micro…

…soft#6352)

* update accordion template

* update accordion item

* update anchor template

* update anchored region

* update avatar template

* update badge

* update breadcrumb

* update breadcrumb item

* update button

* update calendar

* update card - no more individual commits...

* update everything else because ammending commits

* add flipper

* Change files

* Update change/@microsoft-fast-foundation-a9bb978a-8674-4ba4-878d-bf561b5add75.json

change/@microsoft-fast-foundation-a9bb978a-8674-4ba4-878d-bf561b5add75.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update templates to ensure component classes can be extended",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts

@@ -6,10 +6,10 @@ import type { AccordionItemOptions, FASTAccordionItem } from "./accordion-item.j
  * The template for the {@link @microsoft/fast-foundation#(FASTAccordionItem:class)} component.
  * @public
  */
-export function accordionItemTemplate(
+export function accordionItemTemplate<T extends FASTAccordionItem>(
     options: AccordionItemOptions = {}
-): ElementViewTemplate<FASTAccordionItem> {
-    return html<FASTAccordionItem>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <template class="${x => (x.expanded ? "expanded" : "")}">
             <div
                 class="heading"

packages/web-components/fast-foundation/src/accordion/accordion.template.ts

@@ -5,8 +5,8 @@ import type { FASTAccordion } from "./accordion.js";
  * Creates a template for the {@link @microsoft/fast-foundation#FASTAccordion} component.
  * @public
  */
-export function accordionTemplate(): ElementViewTemplate<FASTAccordion> {
-    return html<FASTAccordion>`
+export function accordionTemplate<T extends FASTAccordion>(): ElementViewTemplate<T> {
+    return html<T>`
         <template>
             <slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
         </template>

packages/web-components/fast-foundation/src/anchor/anchor.template.ts

@@ -6,10 +6,10 @@ import type { AnchorOptions, FASTAnchor } from "./anchor.js";
  * The template for the {@link @microsoft/fast-foundation#(FASTAnchor:class)} component.
  * @public
  */
-export function anchorTemplate(
+export function anchorTemplate<T extends FASTAnchor>(
     options: AnchorOptions = {}
-): ElementViewTemplate<FASTAnchor> {
-    return html<FASTAnchor>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <a
             class="control"
             part="control"

packages/web-components/fast-foundation/src/anchored-region/anchored-region.template.ts

@@ -5,12 +5,14 @@ import type { FASTAnchoredRegion } from "./anchored-region.js";
  * The template for the {@link @microsoft/fast-foundation#(FASTAnchoredRegion:class)} component.
  * @public
  */
-export function anchoredRegionTemplate(): ElementViewTemplate<FASTAnchoredRegion> {
-    return html<FASTAnchoredRegion>`
+export function anchoredRegionTemplate<
+    T extends FASTAnchoredRegion
+>(): ElementViewTemplate<T> {
+    return html<T>`
         <template class="${x => (x.initialLayoutComplete ? "loaded" : "")}">
             ${when(
                 x => x.initialLayoutComplete,
-                html<FASTAnchoredRegion>`
+                html<T>`
                     <slot></slot>
                 `
             )}

packages/web-components/fast-foundation/src/avatar/avatar.template.ts

@@ -5,10 +5,10 @@ import type { AvatarOptions, FASTAvatar } from "./avatar.js";
  * The template for {@link @microsoft/fast-foundation#FASTAvatar} component.
  * @public
  */
-export function avatarTemplate(
+export function avatarTemplate<T extends FASTAvatar>(
     options: AvatarOptions = {}
-): ElementViewTemplate<FASTAvatar> {
-    return html<FASTAvatar>`
+): ElementViewTemplate<T> {
+    return html<T>`
     <div
         class="backplate"
         part="backplate"

packages/web-components/fast-foundation/src/badge/badge.template.ts

@@ -5,8 +5,8 @@ import type { FASTBadge } from "./badge.js";
  * The template for the {@link @microsoft/fast-foundation#FASTBadge} component.
  * @public
  */
-export function badgeTemplate(): ElementViewTemplate<FASTBadge> {
-    return html<FASTBadge>`
+export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T> {
+    return html<T>`
         <div class="control" part="control">
             <slot></slot>
         </div>

packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts

@@ -6,15 +6,15 @@ import type { BreadcrumbItemOptions, FASTBreadcrumbItem } from "./breadcrumb-ite
  * The template for the {@link @microsoft/fast-foundation#(FASTBreadcrumbItem:class)} component.
  * @public
  */
-export function breadcrumbItemTemplate(
+export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
     options: BreadcrumbItemOptions = {}
-): ElementViewTemplate<FASTBreadcrumbItem> {
-    return html<FASTBreadcrumbItem>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <div role="listitem" class="listitem" part="listitem">
             ${anchorTemplate(options)}
             ${when(
                 x => x.separator,
-                html<FASTBreadcrumbItem>`
+                html<T>`
                     <span class="separator" part="separator" aria-hidden="true">
                         <slot name="separator">${options.separator || ""}</slot>
                     </span>

packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts

@@ -5,8 +5,8 @@ import type { FASTBreadcrumb } from "./breadcrumb.js";
  * The template for the {@link @microsoft/fast-foundation#FASTBreadcrumb} component.
  * @public
  */
-export function breadcrumbTemplate(): ElementViewTemplate<FASTBreadcrumb> {
-    return html<FASTBreadcrumb>`
+export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T> {
+    return html<T>`
         <template role="navigation">
             <div role="list" class="list" part="list">
                 <slot

packages/web-components/fast-foundation/src/button/button.template.ts

@@ -6,10 +6,10 @@ import type { ButtonOptions, FASTButton } from "./button.js";
  * The template for the {@link @microsoft/fast-foundation#(FASTButton:class)} component.
  * @public
  */
-export function buttonTemplate(
+export function buttonTemplate<T extends FASTButton>(
     options: ButtonOptions = {}
-): ElementViewTemplate<FASTButton> {
-    return html<FASTButton>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <button
             class="control"
             part="control"

packages/web-components/fast-foundation/src/calendar/calendar.template.ts

@@ -13,22 +13,22 @@ import type {
  * @returns - A calendar title template
  * @public
  */
-export function calendarTitleTemplate(): ViewTemplate<FASTCalendar> {
+export function calendarTitleTemplate<T extends FASTCalendar>(): ViewTemplate<T> {
     return html`
         <div
             class="title"
             part="title"
-            aria-label="${(x: FASTCalendar) =>
+            aria-label="${(x: T) =>
                 x.dateFormatter.getDate(`${x.month}-2-${x.year}`, {
                     month: "long",
                     year: "numeric",
                 })}"
         >
             <span part="month">
-                ${(x: FASTCalendar) => x.dateFormatter.getMonth(x.month)}
+                ${(x: T) => x.dateFormatter.getMonth(x.month)}
             </span>
             <span part="year">
-                ${(x: FASTCalendar) => x.dateFormatter.getYear(x.year)}
+                ${(x: T) => x.dateFormatter.getYear(x.year)}
             </span>
         </div>
     `;
@@ -130,14 +130,14 @@ export function calendarRowTemplate(
  *
  * @internal
  */
-export function interactiveCalendarGridTemplate(
+export function interactiveCalendarGridTemplate<T extends FASTCalendar>(
     options: CalendarOptions,
     todayString: string
-): ViewTemplate<FASTCalendar> {
+): ViewTemplate<T> {
     const gridTag: string = tagFor(options.dataGrid);
     const rowTag: string = tagFor(options.dataGridRow);
 
-    return html<FASTCalendar>`
+    return html<T>`
     <${gridTag} class="days interact" part="days" generate-header="none">
         <${rowTag}
             class="week-days"
@@ -162,11 +162,11 @@ export function interactiveCalendarGridTemplate(
  *
  * @internal
  */
-export function noninteractiveCalendarTemplate(
+export function noninteractiveCalendarTemplate<T extends FASTCalendar>(
     options: CalendarOptions,
     todayString: string
-): ViewTemplate<FASTCalendar> {
-    return html<FASTCalendar>`
+): ViewTemplate<T> {
+    return html<T>`
         <div class="days" part="days">
             <div class="week-days" part="week-days">
                 ${repeat(
@@ -178,7 +178,7 @@ export function noninteractiveCalendarTemplate(
                     `
                 )}
             </div>
-            ${repeat<FASTCalendar>(
+            ${repeat<T>(
                 x => x.getDays(),
                 html<CalendarDateInfo[]>`
                     <div class="week">
@@ -233,14 +233,14 @@ export function noninteractiveCalendarTemplate(
  * @returns - a template for a calendar month
  * @public
  */
-export function calendarTemplate(
+export function calendarTemplate<T extends FASTCalendar>(
     options: CalendarOptions
-): ElementViewTemplate<FASTCalendar> {
+): ElementViewTemplate<T> {
     const today: Date = new Date();
     const todayString: string = `${
         today.getMonth() + 1
     }-${today.getDate()}-${today.getFullYear()}`;
-    return html<FASTCalendar>`
+    return html<T>`
         <template>
             ${startSlotTemplate(options)} ${options.title ?? ""}
             <slot></slot>

packages/web-components/fast-foundation/src/card/card.template.ts

@@ -5,7 +5,7 @@ import type { FASTCard } from "./card.js";
  * The template for the {@link @microsoft/fast-foundation#FASTCard} component.
  * @public
  */
-export function cardTemplate(): ElementViewTemplate<FASTCard> {
+export function cardTemplate<T extends FASTCard>(): ElementViewTemplate<T> {
     return html`
         <slot></slot>
     `;

packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts

@@ -5,10 +5,10 @@ import type { CheckboxOptions, FASTCheckbox } from "./checkbox.js";
  * The template for the {@link @microsoft/fast-foundation#(FASTCheckbox:class)} component.
  * @public
  */
-export function checkboxTemplate(
+export function checkboxTemplate<T extends FASTCheckbox>(
     options: CheckboxOptions = {}
-): ElementViewTemplate<FASTCheckbox> {
-    return html<FASTCheckbox>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <template
             role="checkbox"
             aria-checked="${x => x.checked}"

packages/web-components/fast-foundation/src/combobox/combobox.template.ts

@@ -7,9 +7,9 @@ import type { ComboboxOptions, FASTCombobox } from "./combobox.js";
  * The template for the {@link @microsoft/fast-foundation#(FASTCombobox:class)} component.
  * @public
  */
-export function comboboxTemplate(
+export function comboboxTemplate<T extends FASTCombobox>(
     options: ComboboxOptions = {}
-): ElementViewTemplate<FASTCombobox> {
+): ElementViewTemplate<T> {
     return html`
         <template
             aria-disabled="${x => x.ariaDisabled}"

packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts

@@ -6,8 +6,10 @@ import type { FASTDataGridCell } from "./data-grid-cell.js";
  * the provided prefix.
  * @public
  */
-export function dataGridCellTemplate(): ElementViewTemplate<FASTDataGridCell> {
-    return html<FASTDataGridCell>`
+export function dataGridCellTemplate<T extends FASTDataGridCell>(): ElementViewTemplate<
+    T
+> {
+    return html<T>`
         <template
             tabindex="-1"
             role="${x =>

packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts

@@ -18,11 +18,11 @@ export type CellItemTemplateOptions = {
     dataGridCell: TemplateElementDependency;
 };
 
-function cellItemTemplate(
+function cellItemTemplate<T extends FASTDataGridRow>(
     options: CellItemTemplateOptions
-): ViewTemplate<ColumnDefinition, FASTDataGridRow> {
+): ViewTemplate<ColumnDefinition, T> {
     const cellTag = tagFor(options.dataGridCell);
-    return html<ColumnDefinition, FASTDataGridRow>`
+    return html<ColumnDefinition, T>`
     <${cellTag}
         cell-type="${x => (x.isRowHeader ? "rowheader" : undefined)}"
         grid-column="${(x, c) => c.index + 1}"
@@ -32,11 +32,11 @@ function cellItemTemplate(
 `;
 }
 
-function headerCellItemTemplate(
+function headerCellItemTemplate<T extends FASTDataGridRow>(
     options: CellItemTemplateOptions
-): ViewTemplate<ColumnDefinition, FASTDataGridRow> {
+): ViewTemplate<ColumnDefinition, T> {
     const cellTag = tagFor(options.dataGridCell);
-    return html<ColumnDefinition, FASTDataGridRow>`
+    return html<ColumnDefinition, T>`
     <${cellTag}
         cell-type="columnheader"
         grid-column="${(x, c) => c.index + 1}"
@@ -51,10 +51,10 @@ function headerCellItemTemplate(
  *
  * @public
  */
-export function dataGridRowTemplate(
+export function dataGridRowTemplate<T extends FASTDataGridRow>(
     options: CellItemTemplateOptions
-): ElementViewTemplate<FASTDataGridRow> {
-    return html<FASTDataGridRow>`
+): ElementViewTemplate<T> {
+    return html<T>`
         <template
             role="row"
             :classList="${x => (x.rowType !== "default" ? x.rowType : "")}"

packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts

@@ -11,9 +11,11 @@ export type DataGridOptions = {
     dataGridRow: TemplateElementDependency;
 };
 
-function rowItemTemplate(options: DataGridOptions): ViewTemplate<any, FASTDataGrid> {
+function rowItemTemplate<T extends FASTDataGrid>(
+    options: DataGridOptions
+): ViewTemplate<any, T> {
     const rowTag = tagFor(options.dataGridRow);
-    return html<any, FASTDataGrid>`
+    return html<any, T>`
     <${rowTag}
         :rowData="${x => x}"
         :cellItemTemplate="${(x, c) => c.parent.cellItemTemplate}"
@@ -28,11 +30,11 @@ function rowItemTemplate(options: DataGridOptions): ViewTemplate<any, FASTDataGr
  *
  * @public
  */
-export function dataGridTemplate(
+export function dataGridTemplate<T extends FASTDataGrid>(
     options: DataGridOptions
-): ElementViewTemplate<FASTDataGrid> {
+): ElementViewTemplate<T> {
     const rowTag = tagFor(options.dataGridRow);
-    return html<FASTDataGrid>`
+    return html<T>`
         <template
             role="grid"
             tabindex="0"

packages/web-components/fast-foundation/src/dialog/dialog.template.ts

@@ -5,12 +5,12 @@ import type { FASTDialog } from "./dialog.js";
  * The template for the {@link @microsoft/fast-foundation#FASTDialog} component.
  * @public
  */
-export function dialogTemplate(): ElementViewTemplate<FASTDialog> {
-    return html<FASTDialog>`
+export function dialogTemplate<T extends FASTDialog>(): ElementViewTemplate<T> {
+    return html<T>`
         <div class="positioning-region" part="positioning-region">
             ${when(
                 x => x.modal,
-                html<FASTDialog>`
+                html<T>`
                     <div
                         class="overlay"
                         part="overlay"

packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts

@@ -5,8 +5,8 @@ import type { FASTDisclosure } from "./disclosure.js";
  * The template for the {@link @microsoft/fast-foundation#FASTDisclosure} component.
  * @public
  */
-export function disclosureTemplate(): ElementViewTemplate<FASTDisclosure> {
-    return html<FASTDisclosure>`
+export function disclosureTemplate<T extends FASTDisclosure>(): ElementViewTemplate<T> {
+    return html<T>`
         <details class="disclosure" ${ref("details")}>
             <summary
                 class="invoker"

packages/web-components/fast-foundation/src/divider/divider.template.ts

@@ -5,8 +5,8 @@ import type { FASTDivider } from "./divider.js";
  * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.
  * @public
  */
-export function dividerTemplate(): ElementViewTemplate<FASTDivider> {
-    return html<FASTDivider>`
+export function dividerTemplate<T extends FASTDivider>(): ElementViewTemplate<T> {
+    return html<T>`
         <template
             role="${x => x.role}"
             aria-orientation="${x => x.orientation}"

packages/web-components/fast-foundation/src/flipper/flipper.template.ts

@@ -6,9 +6,9 @@ import { FlipperDirection } from "./flipper.options.js";
  * The template for the {@link @microsoft/fast-foundation#FASTFlipper} component.
  * @public
  */
-export function flipperTemplate(
+export function flipperTemplate<T extends FASTFlipper>(
     options: FlipperOptions = {}
-): ElementViewTemplate<FASTFlipper> {
+): ElementViewTemplate<T> {
     return html`
         <template
             role="button"