diff --git a/packages/web-components/fast-foundation/api-extractor.json b/packages/web-components/fast-foundation/api-extractor.json
index 7a4ac10c7b8..45681e97365 100644
--- a/packages/web-components/fast-foundation/api-extractor.json
+++ b/packages/web-components/fast-foundation/api-extractor.json
@@ -16,5 +16,13 @@
 
   "dtsRollup": {
       "enabled": true
-  }
+  },
+  "messages": {
+      "extractorMessageReporting": {
+        "ae-different-release-tags": {
+            "logLevel": "none",
+            "addToApiReportFile": true 
+        }
+      }
+    }
 }
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 406ecb2ec85..2f75ae7824d 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -27,6 +27,7 @@ export enum AccordionExpandMode {
     single = "single"
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal
 //
 // @public
@@ -44,14 +45,12 @@ export class AccordionItem extends FASTElement {
 export interface AccordionItem extends StartEnd {
 }
 
-// @public (undocumented)
+// @public
 export const AccordionItemTemplate: import("@microsoft/fast-element").ViewTemplate<AccordionItem, any>;
 
-// @public (undocumented)
+// @public
 export const AccordionTemplate: import("@microsoft/fast-element").ViewTemplate<Accordion, any>;
 
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Anchor" because one of its declarations is marked as @internal
-//
 // @public
 export class Anchor extends FASTElement {
     appearance: AnchorAppearance;
@@ -65,74 +64,56 @@ export class Anchor extends FASTElement {
     type: string;
 }
 
-// @internal
+// @public (undocumented)
 export interface Anchor extends StartEnd {
 }
 
 // @public
 export type AnchorAppearance = ButtonAppearance | "hypertext";
 
-// @public (undocumented)
+// @public
 export const AnchorTemplate: import("@microsoft/fast-element").ViewTemplate<Anchor, any>;
 
 // @public
 export function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;
 
-// @public (undocumented)
+// @public
 export class Badge extends FASTElement {
-    // (undocumented)
     circular: boolean;
-    // (undocumented)
     color: string;
-    // (undocumented)
     fill: string;
 }
 
-// @public (undocumented)
+// @public
 export const BadgeTemplate: import("@microsoft/fast-element").ViewTemplate<Badge, any>;
 
-// @public (undocumented)
+// @public
 export class BaseProgress extends FASTElement {
-    // (undocumented)
     max: number;
-    // (undocumented)
     min: number;
-    // (undocumented)
     paused: any;
-    // (undocumented)
     value: number;
 }
 
 // Warning: (ae-forgotten-export) The symbol "FormAssociated" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export class Button extends FormAssociated<HTMLInputElement> {
     constructor();
-    // (undocumented)
     appearance: ButtonAppearance;
-    // (undocumented)
     autofocus: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
     formaction: string;
-    // (undocumented)
     formenctype: string;
-    // (undocumented)
     formId: string;
-    // (undocumented)
     formmethod: string;
-    // (undocumented)
     formnovalidate: boolean;
-    // (undocumented)
     formtarget: "_self" | "_blank" | "_parent" | "_top";
-    // (undocumented)
     name: string;
     // (undocumented)
     protected proxy: HTMLInputElement;
-    // (undocumented)
     type: "submit" | "reset" | "button";
-    // (undocumented)
     value: string;
     }
 
@@ -140,42 +121,41 @@ export class Button extends FormAssociated<HTMLInputElement> {
 export interface Button extends StartEnd {
 }
 
-// @public (undocumented)
+// @public
 export type ButtonAppearance = "accent" | "lightweight" | "neutral" | "outline" | "stealth";
 
-// @public (undocumented)
+// @public
 export const ButtonTemplate: import("@microsoft/fast-element").ViewTemplate<Button, any>;
 
-// @public (undocumented)
+// @public
 export class Card extends FASTElement {
 }
 
-// @public (undocumented)
+// @public
 export const CardTemplate: import("@microsoft/fast-element").ViewTemplate<Card, any>;
 
-// @public (undocumented)
+// @public
 export class Checkbox extends FormAssociated<HTMLInputElement> {
     constructor();
     checked: boolean;
     checkedAttribute: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     clickHandler: (e: MouseEvent) => void;
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
     defaultChecked: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     defaultSlottedNodes: Node[];
     indeterminate: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     // (undocumented)
     protected proxy: HTMLInputElement;
-    // (undocumented)
     readOnly: boolean;
     value: string;
     }
 
-// @public (undocumented)
+// @public
 export const CheckboxTemplate: import("@microsoft/fast-element").ViewTemplate<Checkbox, any>;
 
 // @public
@@ -183,10 +163,7 @@ export function composedParent<T extends HTMLElement>(element: T): HTMLElement |
 
 // @public
 export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDefinition {
-    constructor(
-    name: string,
-    value: CSSCustomPropertyDefinition["value"],
-    host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
+    constructor(name: string, value: CSSCustomPropertyDefinition["value"], host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
     // @internal
     bind(source: HTMLElement): void;
     readonly name: CSSCustomPropertyDefinition["name"];
@@ -200,13 +177,13 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
 // @public
 export function cssCustomPropertyBehaviorFactory(name: string, value: string | ((...arg: any[]) => string), host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null): CSSCustomPropertyBehavior;
 
-// @public (undocumented)
+// @public
 export interface CSSCustomPropertyDefinition {
     name: string;
     value: string | ((...args: any[]) => string);
 }
 
-// @public (undocumented)
+// @public
 export interface CSSCustomPropertyTarget {
     // (undocumented)
     disconnectedCSSCustomPropertyRegistry: CSSCustomPropertyDefinition[] | void;
@@ -219,17 +196,14 @@ export interface CSSCustomPropertyTarget {
 // @public
 export type CSSDisplayPropertyValue = "block" | "contents" | "flex" | "grid" | "inherit" | "initial" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "none" | "run-in" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group";
 
-// @public (undocumented)
+// @public
 export interface DecoratorDesignSystemPropertyConfiguration extends Omit<DecoratorAttributeConfiguration, "attribute"> {
-    // (undocumented)
     attribute?: string | false;
-    // (undocumented)
     cssCustomProperty?: string | false;
-    // (undocumented)
     default: any;
 }
 
-// @public (undocumented)
+// @public
 export interface DesignSystemConsumer {
     // (undocumented)
     provider: DesignSystemProvider | null;
@@ -241,12 +215,13 @@ export const designSystemConsumerBehavior: Behavior;
 // @public
 export function designSystemProperty<T extends DesignSystemProvider>(config: DecoratorDesignSystemPropertyConfiguration): (source: T, property: string) => void;
 
-// @public (undocumented)
+// @public
 export class DesignSystemProvider extends FASTElement implements CSSCustomPropertyTarget, DesignSystemConsumer {
     constructor();
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
     designSystem: {};
+    // @internal
     designSystemProperties: {
         [propertyName: string]: Required<Pick<DecoratorDesignSystemPropertyConfiguration, "cssCustomProperty" | "default">>;
     };
@@ -255,7 +230,6 @@ export class DesignSystemProvider extends FASTElement implements CSSCustomProper
     static findProvider(el: HTMLElement & Partial<DesignSystemConsumer>): DesignSystemProvider | null;
     static isDesignSystemProvider(el: HTMLElement | DesignSystemProvider): el is DesignSystemProvider;
     readonly isDesignSystemProvider = true;
-    // (undocumented)
     provider: DesignSystemProvider | null;
     registerCSSCustomProperty(behavior: CSSCustomPropertyDefinition): void;
     static registerTagName(tagName: string): void;
@@ -267,34 +241,28 @@ export class DesignSystemProvider extends FASTElement implements CSSCustomProper
 // @public
 export function designSystemProvider(nameOrDef: string | PartialFASTElementDefinition): <T extends typeof DesignSystemProvider>(providerCtor: T) => void;
 
-// @public (undocumented)
+// @public
 export const DesignSystemProviderTemplate: import("@microsoft/fast-element").ViewTemplate<DesignSystemProvider, any>;
 
-// @public (undocumented)
+// @public
 export class Dialog extends FASTElement {
-    // (undocumented)
     ariaDescribedby: string;
-    // (undocumented)
     ariaLabel: string;
-    // (undocumented)
     ariaLabelledby: string;
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
+    // @internal (undocumented)
     dialog: HTMLDivElement;
-    // (undocumented)
+    // @internal (undocumented)
     disconnectedCallback(): void;
-    // (undocumented)
+    // @internal (undocumented)
     dismiss(): void;
-    // (undocumented)
     hidden: boolean;
-    // (undocumented)
     modal: boolean;
-    // (undocumented)
     trapFocus: boolean;
     }
 
-// @public (undocumented)
+// @public
 export const DialogTemplate: import("@microsoft/fast-element").ViewTemplate<Dialog, any>;
 
 // @public
@@ -303,37 +271,31 @@ export const disabledCursor = "not-allowed";
 // @public
 export function display(displayValue: CSSDisplayPropertyValue): string;
 
-// @public (undocumented)
+// @public
 export class Divider extends FASTElement {
-    // (undocumented)
     role: DividerRole;
 }
 
-// @public (undocumented)
+// @public
 export enum DividerRole {
-    // (undocumented)
     presentation = "presentation",
-    // (undocumented)
     separator = "separator"
 }
 
-// @public (undocumented)
+// @public
 export const DividerTemplate: import("@microsoft/fast-element").ViewTemplate<Divider, any>;
 
-// @public (undocumented)
+// @public
 export const endTemplate: import("@microsoft/fast-element").ViewTemplate<StartEnd, any>;
 
-// @public (undocumented)
+// @public
 export class Flipper extends FASTElement {
-    // (undocumented)
     direction: FlipperDirection;
-    // (undocumented)
     disabled: boolean;
-    // (undocumented)
     hiddenFromAT: boolean;
 }
 
-// @public (undocumented)
+// @public
 export enum FlipperDirection {
     // (undocumented)
     next = "next",
@@ -341,7 +303,7 @@ export enum FlipperDirection {
     previous = "previous"
 }
 
-// @public (undocumented)
+// @public
 export const FlipperTemplate: import("@microsoft/fast-element").ViewTemplate<Flipper, any>;
 
 // @public
@@ -429,32 +391,28 @@ export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList): (she
     }): void;
 }>;
 
-// @public (undocumented)
+// @public
 export class Menu extends FASTElement {
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
     focus(): void;
+    // @internal
     handleFocusOut: (e: FocusEvent) => void;
-    // (undocumented)
+    // @internal (undocumented)
     handleMenuKeyDown(e: KeyboardEvent): void | boolean;
-    // (undocumented)
+    // @internal (undocumented)
     items: HTMLSlotElement;
     }
 
-// @public (undocumented)
+// @public
 export class MenuItem extends FASTElement {
-    // (undocumented)
     checked: boolean;
-    // (undocumented)
     disabled: boolean;
-    // (undocumented)
     expanded: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     handleMenuItemClick: (e: MouseEvent) => void;
-    // (undocumented)
+    // @internal (undocumented)
     handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
-    // (undocumented)
     role: MenuItemRole;
 }
 
@@ -462,7 +420,7 @@ export class MenuItem extends FASTElement {
 export interface MenuItem extends StartEnd {
 }
 
-// @public (undocumented)
+// @public
 export enum MenuItemRole {
     // (undocumented)
     menuitem = "menuitem",
@@ -472,102 +430,80 @@ export enum MenuItemRole {
     menuitemradio = "menuitemradio"
 }
 
-// @public (undocumented)
+// @public
 export const MenuItemTemplate: import("@microsoft/fast-element").ViewTemplate<MenuItem, any>;
 
-// @public (undocumented)
+// @public
 export const MenuTemplate: import("@microsoft/fast-element").ViewTemplate<Menu, any>;
 
-// @public (undocumented)
+// @public
 export const ProgressRingTemplate: import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
 
-// @public (undocumented)
+// @public
 export const ProgressTemplate: import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
 
-// @public (undocumented)
+// @public
 export class Radio extends FormAssociated<HTMLInputElement> implements RadioControl {
     constructor();
     checked: boolean;
     checkedAttribute: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     clickHandler: (e: MouseEvent) => void;
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
     defaultChecked: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     defaultSlottedNodes: Node[];
-    // (undocumented)
+    // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
-    // (undocumented)
     name: string;
     // (undocumented)
     protected nameChanged(): void;
     // (undocumented)
     protected proxy: HTMLInputElement;
-    // (undocumented)
     readOnly: boolean;
     value: string;
     }
 
-// @public (undocumented)
-export interface RadioControl {
-    // (undocumented)
-    checked: boolean;
-    // (undocumented)
-    disabled: boolean;
-    // (undocumented)
-    focus: () => void;
-    // (undocumented)
-    getAttribute: (name: string) => string | null;
-    // (undocumented)
-    readOnly: boolean;
-    // (undocumented)
-    setAttribute: (name: string, value: string) => void;
-}
+// @public
+export type RadioControl = Pick<HTMLInputElement, "checked" | "disabled" | "readOnly" | "focus" | "setAttribute" | "getAttribute">;
 
-// @public (undocumented)
+// @public
 export class RadioGroup extends FASTElement {
     constructor();
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
     disabled: boolean;
-    // (undocumented)
+    // @internal
     keydownHandler: (e: KeyboardEvent) => void;
-    // (undocumented)
     name: string;
     // (undocumented)
     protected nameChanged(): void;
-    // (undocumented)
     orientation: Orientation;
-    // (undocumented)
     readOnly: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     slottedRadioButtons: RadioControl[];
-    // (undocumented)
     value: string;
 }
 
-// @public (undocumented)
+// @public
 export const RadioGroupTemplate: import("@microsoft/fast-element").ViewTemplate<RadioGroup, any>;
 
-// @public (undocumented)
+// @public
 export const RadioTemplate: import("@microsoft/fast-element").ViewTemplate<Radio, any>;
 
-// @public (undocumented)
+// @public
 export class Slider extends FormAssociated<HTMLInputElement> implements SliderConfiguration {
     constructor();
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
     decrement: () => void;
-    // (undocumented)
+    // @internal (undocumented)
     direction: Direction;
-    // (undocumented)
+    // @internal (undocumented)
     disconnectedCallback(): void;
-    // (undocumented)
     increment: () => void;
-    // (undocumented)
+    // @internal (undocumented)
     isDragging: boolean;
     // (undocumented)
     protected keypressHandler: (e: KeyboardEvent) => void;
@@ -575,29 +511,28 @@ export class Slider extends FormAssociated<HTMLInputElement> implements SliderCo
     min: number;
     mode: SliderMode;
     orientation: Orientation;
-    // (undocumented)
+    // @internal (undocumented)
     position: string;
     // (undocumented)
     protected proxy: HTMLInputElement;
-    // (undocumented)
     readOnly: boolean;
     step: number;
-    // (undocumented)
+    // @internal (undocumented)
     thumb: HTMLDivElement;
-    // (undocumented)
+    // @internal (undocumented)
     track: HTMLDivElement;
-    // (undocumented)
+    // @internal (undocumented)
     trackHeight: number;
-    // (undocumented)
+    // @internal (undocumented)
     trackMinHeight: number;
-    // (undocumented)
+    // @internal (undocumented)
     trackMinWidth: number;
-    // (undocumented)
+    // @internal (undocumented)
     trackWidth: number;
     value: string;
     }
 
-// @public (undocumented)
+// @public
 export interface SliderConfiguration {
     // (undocumented)
     direction?: Direction;
@@ -611,47 +546,44 @@ export interface SliderConfiguration {
     orientation?: Orientation;
 }
 
-// @public (undocumented)
+// @public
 export class SliderLabel extends FASTElement {
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
     disabled: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     disconnectedCallback(): void;
-    // (undocumented)
+    // @internal (undocumented)
     handleChange(source: any, propertyName: string): void;
-    // (undocumented)
     hideMark: boolean;
-    // (undocumented)
     position: string;
-    // (undocumented)
+    // @internal (undocumented)
     positionStyle: string;
-    // (undocumented)
+    // @internal (undocumented)
     root: HTMLDivElement;
-    // (undocumented)
+    // @internal (undocumented)
     sliderDirection: Direction;
-    // (undocumented)
+    // @internal (undocumented)
     sliderMaxPosition: number;
-    // (undocumented)
+    // @internal (undocumented)
     sliderMinPosition: number;
-    // (undocumented)
+    // @internal (undocumented)
     sliderOrientation: Orientation;
 }
 
-// @public (undocumented)
+// @public
 export const SliderLabelTemplate: import("@microsoft/fast-element").ViewTemplate<SliderLabel, any>;
 
-// @public (undocumented)
+// @public
 export enum SliderMode {
     // (undocumented)
     singleValue = "single-value"
 }
 
-// @public (undocumented)
+// @public
 export const SliderTemplate: import("@microsoft/fast-element").ViewTemplate<Slider, any>;
 
-// @public (undocumented)
+// @public
 export class StartEnd {
     // (undocumented)
     end: HTMLSlotElement;
@@ -667,27 +599,25 @@ export class StartEnd {
     startContainer: HTMLSpanElement;
 }
 
-// @public (undocumented)
+// @public
 export const startTemplate: import("@microsoft/fast-element").ViewTemplate<StartEnd, any>;
 
-// @public (undocumented)
+// @public
 export class Switch extends FormAssociated<HTMLInputElement> {
     constructor();
     checked: boolean;
-    // (undocumented)
     checkedAttribute: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     clickHandler: (e: MouseEvent) => void;
-    // (undocumented)
+    // @internal (undocumented)
     connectedCallback(): void;
     defaultChecked: boolean;
-    // (undocumented)
+    // @internal (undocumented)
     defaultSlottedNodes: Node[];
-    // (undocumented)
+    // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     // (undocumented)
     protected proxy: HTMLInputElement;
-    // (undocumented)
     readOnly: boolean;
     value: string;
     }
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index 02521b3c3e2..c43931e7ee6 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -21,6 +21,7 @@
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
+    "doc:ci": "api-extractor run",
     "build": "tsc -p ./tsconfig.json && rollup -c && npm run doc",
     "dev": "tsc -p ./tsconfig.json -w",
     "tdd": "npm run dev & npm run test-chrome:watch",
@@ -29,7 +30,7 @@
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
-    "test": "npm run test-chrome:verbose",
+    "test": "npm run test-chrome:verbose && yarn doc:ci",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage",
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
index 0dc7da98646..c140563bf9b 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
@@ -2,6 +2,10 @@ import { html, ref } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../../patterns/start-end";
 import { AccordionItem } from "./accordion-item";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(AccordionItem:class)} component.
+ * @public
+ */
 export const AccordionItemTemplate = html<AccordionItem>`
     <template
         class="${x => (x.expanded ? "expanded" : "")}"
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts
index 0af9ea87dd5..7cfadf66475 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts
@@ -3,7 +3,7 @@ import { StartEnd } from "../../patterns/start-end";
 import { applyMixins } from "../../utilities/apply-mixins";
 
 /**
- * An individual item in an {@link @microsoft/fast-foundation#Accordion }.
+ * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
  * @public
  */
 export class AccordionItem extends FASTElement {
@@ -63,7 +63,8 @@ export class AccordionItem extends FASTElement {
 
 /**
  * Mark internal because exporting class and interface of the same name
- * confuses API extractor
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
  * @internal
  */
 /* eslint-disable-next-line */
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
index 5e36bd1f344..9a1fb0c0a46 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
@@ -1,6 +1,10 @@
 import { html, slotted } from "@microsoft/fast-element";
 import { Accordion } from "./accordion";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Accordion} component.
+ * @public
+ */
 export const AccordionTemplate = html<Accordion>`
     <template>
         <slot name="item" part="item" ${slotted("accordionItems")}></slot>
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts
index 01d8083b34a..5ec22a61583 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts
@@ -14,12 +14,12 @@ import { AccordionItem } from "./accordion-item";
  */
 export enum AccordionExpandMode {
     /**
-     * Designates only a single {@link @microsoft/fast-foundation#AccordionItem } can be open a time.
+     * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
      */
     single = "single",
 
     /**
-     * Designates multiple {@link @microsoft/fast-foundation#AccordionItem | AccordionItems} can be open simultaneously.
+     * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
      */
     multi = "multi",
 }
@@ -30,7 +30,7 @@ export enum AccordionExpandMode {
  * @public
  *
  * @remarks
- * Designed to be used with {@link @microsoft/fast-foundation#AccordionTemplate} and {@link @microsoft/fast-foundation#AccordionItem}.
+ * Designed to be used with {@link @microsoft/fast-foundation#AccordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.
  */
 export class Accordion extends FASTElement {
     /**
@@ -40,8 +40,6 @@ export class Accordion extends FASTElement {
      *
      * @remarks
      * HTML attribute: expand-mode
-     *
-     * @defaultValue {@link AccordionExpandMode.multi}
      */
     @attr({ attribute: "expand-mode" })
     public expandmode: AccordionExpandMode = AccordionExpandMode.multi;
diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.template.ts b/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
index d8f941a59f0..2ee90ceb65c 100644
--- a/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
+++ b/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
@@ -2,6 +2,10 @@ import { html } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../patterns/start-end";
 import { Anchor } from "./anchor";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Anchor:class)} component.
+ * @public
+ */
 export const AnchorTemplate = html<Anchor>`
     <template class="${x => x.appearance}">
         <a
diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.ts b/packages/web-components/fast-foundation/src/anchor/anchor.ts
index 2294ff6e10c..9f6c4164e27 100644
--- a/packages/web-components/fast-foundation/src/anchor/anchor.ts
+++ b/packages/web-components/fast-foundation/src/anchor/anchor.ts
@@ -101,7 +101,8 @@ export class Anchor extends FASTElement {
 
 /**
  * Mark internal because exporting class and interface of the same name
- * confuses API extractor
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
  * @internal
  */
 /* eslint-disable-next-line */
diff --git a/packages/web-components/fast-foundation/src/badge/badge.template.ts b/packages/web-components/fast-foundation/src/badge/badge.template.ts
index 9ed6744fc5d..e7d67b3f90c 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.template.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.template.ts
@@ -1,6 +1,10 @@
 import { html } from "@microsoft/fast-element";
 import { Badge } from "./badge";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Badge} component.
+ * @public
+ */
 export const BadgeTemplate = html<Badge>`
     <template class="${x => (x.circular ? "circular" : "")}">
         <div
diff --git a/packages/web-components/fast-foundation/src/badge/badge.ts b/packages/web-components/fast-foundation/src/badge/badge.ts
index d972fa34742..eab6ab6ae21 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.ts
@@ -1,15 +1,39 @@
 import { attr, FASTElement } from "@microsoft/fast-element";
 
+/**
+ * A Badge Custom HTML Element.
+ *
+ * @public
+ */
 export class Badge extends FASTElement {
+    /**
+     * Indicates the badge should have a filled style.
+     * @public
+     * @remarks
+     * HTML Attribute: fill
+     */
     @attr({ attribute: "fill" })
     public fill: string;
 
-    // Revisit this once we have a better
-    // story for ensuring proper contrast
-    // from author defined `fill`
+    /**
+     * Indicates the badge should have a filled style.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     * @privateRemarks
+     * Revisit this once we have a better story for ensuring proper contrast from author defined `fill`
+     */
     @attr({ attribute: "color" })
     public color: string;
 
+    /**
+     * Indicates the element should be circular
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: circular
+     */
     @attr({ mode: "boolean" })
     public circular: boolean;
 }
diff --git a/packages/web-components/fast-foundation/src/button/button.template.ts b/packages/web-components/fast-foundation/src/button/button.template.ts
index c945081d920..7379e058424 100644
--- a/packages/web-components/fast-foundation/src/button/button.template.ts
+++ b/packages/web-components/fast-foundation/src/button/button.template.ts
@@ -1,7 +1,10 @@
 import { html } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../patterns/start-end";
 import { Button } from "./button";
-
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ * @public
+ */
 export const ButtonTemplate = html<Button>`
     <template class="${x => x.appearance}">
         <button
diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts
index c9910ef6dd7..42de7829d38 100644
--- a/packages/web-components/fast-foundation/src/button/button.ts
+++ b/packages/web-components/fast-foundation/src/button/button.ts
@@ -3,6 +3,10 @@ import { FormAssociated } from "../form-associated/index";
 import { StartEnd } from "../patterns/start-end";
 import { applyMixins } from "../utilities/apply-mixins";
 
+/**
+ * Types of button appearance.
+ * @public
+ */
 export type ButtonAppearance =
     | "accent"
     | "lightweight"
@@ -10,16 +14,50 @@ export type ButtonAppearance =
     | "outline"
     | "stealth";
 
+/**
+ * An Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @public
+ */
 export class Button extends FormAssociated<HTMLInputElement> {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
     @attr
     public appearance: ButtonAppearance = "neutral";
 
+    /**
+     * Determines if the element should receive document focus on page load.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
     @attr({ mode: "boolean" })
     public autofocus: boolean;
 
+    /**
+     * The id of a form to associate the element to.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: form
+     */
     @attr({ attribute: "form" })
     public formId: string;
 
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formaction
+     */
     @attr
     public formaction: string;
     private formactionChanged(): void {
@@ -28,6 +66,13 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formenctype
+     */
     @attr
     public formenctype: string;
     private formenctypeChanged(): void {
@@ -36,6 +81,13 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formmethod
+     */
     @attr
     public formmethod: string;
     private formmethodChanged(): void {
@@ -44,6 +96,13 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formnovalidate
+     */
     @attr({ mode: "boolean" })
     public formnovalidate: boolean;
     private formnovalidateChanged(): void {
@@ -52,6 +111,13 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formtarget
+     */
     @attr
     public formtarget: "_self" | "_blank" | "_parent" | "_top";
     private formtargetChanged(): void {
@@ -60,9 +126,23 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * The name of the button
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
     @attr
     public name: string;
 
+    /**
+     * The button type.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
     @attr
     public type: "submit" | "reset" | "button";
     private typeChanged(): void {
@@ -71,6 +151,11 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * The value of the button.
+     *
+     * @public
+     */
     public value: string;
     private valueChanged(): void {
         if (this.proxy instanceof HTMLElement) {
@@ -86,6 +171,9 @@ export class Button extends FormAssociated<HTMLInputElement> {
         this.proxy.setAttribute("type", `${this.type}`);
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
 
@@ -93,6 +181,12 @@ export class Button extends FormAssociated<HTMLInputElement> {
     }
 }
 
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
+ * @internal
+ */
 /* eslint-disable-next-line */
 export interface Button extends StartEnd {}
 applyMixins(Button, StartEnd);
diff --git a/packages/web-components/fast-foundation/src/card/card.template.ts b/packages/web-components/fast-foundation/src/card/card.template.ts
index ada112a3774..feb8f4e2816 100644
--- a/packages/web-components/fast-foundation/src/card/card.template.ts
+++ b/packages/web-components/fast-foundation/src/card/card.template.ts
@@ -1,4 +1,7 @@
 import { html } from "@microsoft/fast-element";
 import { Card } from "./card";
-
+/**
+ * The template for the {@link @microsoft/fast-foundation#Card} component.
+ * @public
+ */
 export const CardTemplate = html<Card>`<slot></slot>`;
diff --git a/packages/web-components/fast-foundation/src/card/card.ts b/packages/web-components/fast-foundation/src/card/card.ts
index c88bcbfe192..84070815466 100644
--- a/packages/web-components/fast-foundation/src/card/card.ts
+++ b/packages/web-components/fast-foundation/src/card/card.ts
@@ -1,3 +1,8 @@
 import { FASTElement } from "@microsoft/fast-element";
 
+/**
+ * An Card Custom HTML Element.
+ *
+ * @public
+ */
 export class Card extends FASTElement {}
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
index 981c524e270..2bbfdb8acda 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
@@ -1,6 +1,10 @@
 import { html, slotted } from "@microsoft/fast-element";
 import { Checkbox } from "./checkbox";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Checkbox} component.
+ * @public
+ */
 export const CheckboxTemplate = html<Checkbox>`
     <template
         role="checkbox"
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
index 242f6dca9b3..b665d8d672f 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
@@ -2,7 +2,19 @@ import { attr, observable } from "@microsoft/fast-element";
 import { keyCodeSpace } from "@microsoft/fast-web-utilities";
 import { FormAssociated } from "../form-associated/index";
 
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @public
+ */
 export class Checkbox extends FormAssociated<HTMLInputElement> {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
     private readOnlyChanged(): void {
@@ -14,6 +26,8 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @public
      */
     public value: string = "on"; // Map to proxy element.
     private valueChanged(): void {
@@ -25,6 +39,10 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
     /**
      * Provides the default checkedness of the input element
      * Passed down to proxy
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
      */
     @attr({ attribute: "checked", mode: "boolean" })
     public checkedAttribute: boolean;
@@ -32,12 +50,17 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         this.defaultChecked = this.checkedAttribute;
     }
 
+    /**
+     * @internal
+     */
     @observable
     public defaultSlottedNodes: Node[];
 
     /**
      * Initialized to the value of the checked attribute. Can be changed independently of the "checked" attribute,
      * but changing the "checked" attribute always additionally sets this value.
+     *
+     * @public
      */
     @observable
     public defaultChecked: boolean = !!this.checkedAttribute;
@@ -52,7 +75,9 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
     }
 
     /**
-     * The checked state of the control
+     * The checked state of the control.
+     *
+     * @public
      */
     @observable
     public checked: boolean = this.defaultChecked;
@@ -99,6 +124,9 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         this.constructed = true;
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
 
@@ -110,6 +138,9 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         this.setFormValue(value, value);
     }
 
+    /**
+     * @internal
+     */
     public keypressHandler = (e: KeyboardEvent): void => {
         super.keypressHandler(e);
 
@@ -120,7 +151,9 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         }
     };
 
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    /**
+     * @internal
+     */
     public clickHandler = (e: MouseEvent): void => {
         if (!this.disabled && !this.readOnly) {
             this.checked = !this.checked;
diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index b36cf82370e..dfe3b33fe80 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -1,5 +1,9 @@
 import { Behavior, FASTElement } from "@microsoft/fast-element";
 
+/**
+ * A structure representing a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom property}.
+ * @public
+ */
 export interface CSSCustomPropertyDefinition {
     /**
      * The custom property name
@@ -12,6 +16,10 @@ export interface CSSCustomPropertyDefinition {
     value: string | ((...args: any[]) => string);
 }
 
+/**
+ * A structure that can register and unregister {@link CSSCustomPropertyDefinition | CSSCustomPropertyDefinitions}.
+ * @public
+ */
 export interface CSSCustomPropertyTarget {
     registerCSSCustomProperty(behavior: CSSCustomPropertyDefinition): void;
     unregisterCSSCustomProperty(behavior: CSSCustomPropertyDefinition): void;
@@ -19,57 +27,48 @@ export interface CSSCustomPropertyTarget {
 }
 
 /**
- * A Behavior that, when bound, will register itself with the nearest
- * CSSCustomPropertyTarget
+ * A Behavior that will register to a {@link CSSCustomPropertyTarget} when bound.
+ *
+ * @public
  */
 export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDefinition {
     /**
-     * The name of the CSS Custom Property behavior.
+     * The name of the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom property}.
+     * @public
      */
     public readonly name: CSSCustomPropertyDefinition["name"];
 
     /**
      * The value or function that will resolve the value of
-     * the CSS Custom Property.
+     * the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom property}.
+     * @public
      */
     public readonly value: CSSCustomPropertyDefinition["value"];
 
     /**
      * The name of the CSSCustomPropertyBehavior formatted
-     * as a CSS custom property.
+     * as a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom property}.
+     * @public
      */
     public readonly propertyName: string;
 
     /**
-     * Return the CSS Custom Property formatted
-     * as a CSS variable.
+     * Return the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom property} formatted
+     * as a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties | CSS variable}.
+     *
+     * @public
      */
     public readonly var: string;
 
+    /**
+     *
+     * @param name - The name of the custom property, without the prepended "--" required by {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--* | CSS custom properties}.
+     * @param value - The value of the custom property or a function that resolves the value.
+     * @param host - A function that resolves the host element that will register the behavior
+     */
     constructor(
-        /**
-         * The name of the custom property.
-         * @remarks
-         * When written as a custom property, the "--" required
-         * by CSS custom properties will be prepended to this value.
-         */
         name: string,
-
-        /**
-         * The value of the custom property or a function that
-         * resolves the value.
-         * @remarks
-         * When a resolver is provided, the resolver will be invoked
-         * by the element returned from the host argument.
-         */
         value: CSSCustomPropertyDefinition["value"],
-
-        /**
-         * The element that registers the behavior.
-         * @remarks
-         * This element should also be responsible for resolving
-         * and function value.
-         */
         host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null
     ) {
         this.name = name;
@@ -83,7 +82,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
 
     /**
      * Binds the behavior to a source element
-     * @param source The source element being bound
+     * @param source - The source element being bound
      * @internal
      */
     bind(source: HTMLElement): void {
@@ -108,7 +107,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
 
     /**
      * Unbinds the behavior from the source element.
-     * @param source The source element being unbound
+     * @param source - The source element being unbound
      * @internal
      */
     unbind(source: HTMLElement): void {
@@ -122,9 +121,10 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
 
 /**
  * Create a CSS Custom Property behavior.
- * @param name The name of the CSS custom property
- * @param value The value or value resolver of the custom property
- * @param host A function to resolve the element to host the CSS custom property
+ * @param name - The name of the CSS custom property
+ * @param value - The value or value resolver of the custom property
+ * @param host - A function to resolve the element to host the CSS custom property
+ * @public
  */
 export function cssCustomPropertyBehaviorFactory(
     name: string,
diff --git a/packages/web-components/fast-foundation/src/design-system-provider/design-system-property.ts b/packages/web-components/fast-foundation/src/design-system-provider/design-system-property.ts
index 594f99a7e06..5a9833c8b96 100644
--- a/packages/web-components/fast-foundation/src/design-system-provider/design-system-property.ts
+++ b/packages/web-components/fast-foundation/src/design-system-provider/design-system-property.ts
@@ -4,27 +4,37 @@ import {
     observable,
 } from "@microsoft/fast-element";
 import { DesignSystemProvider } from "./design-system-provider";
+
 /**
- * Decorator to declare a property as a design-system property.
- * Accepts a config object with the following:
- *
- * default:
- * The default value of the property. Will be assigned when the use-defaults attribute is used.
+ * Configuration object for defining a {@link @microsoft/fast-foundation#DesignSystemProvider} property
  *
- * attribute?:
- * The HTML attribute to map the property to - defaults to the property name.
- *
- * mode?:
- * The attr mode - see https://github.com/microsoft/fast-dna/blob/master/packages/web-components/fast-element/docs/guide/building-components.md#customizing-attributes
- * Defaults to "fromView"
- *
- * converter?:
- * The attr converter - see https://github.com/microsoft/fast-dna/blob/master/packages/web-components/fast-element/docs/guide/building-components.md#customizing-attributes
+ * @public
+ */
+export interface DecoratorDesignSystemPropertyConfiguration
+    extends Omit<DecoratorAttributeConfiguration, "attribute"> {
+    /**
+     * The HTML attribute name to map the property to - defaults to the property name.
+     */
+    attribute?: string | false;
+
+    /**
+     * An optional property to control the name of the css custom property being created.
+     * If omitted, the css custom property will share a name with attribute if specified, otherwise the property name being decorated.
+     * If assigned a false value, no css custom property will be created.
+     */
+    cssCustomProperty?: string | false;
+    /**
+     * The default value of the property. Will be assigned when the use-defaults attribute is used.
+     */
+    default: any;
+}
+
+/**
+ * Decorator to declare a property as a design-system property.
+ * Intended to be used with the {@link @microsoft/fast-foundation#DesignSystemProvider}
+ * @param config - {@link DecoratorDesignSystemPropertyConfiguration}
  *
- * cssCustomProperty?:
- * An optional property to control the name of the css custom property being created.
- * If omitted, the css custom property will share a name with attribute if specified, otherwise the property name being decorated.
- * If assigned a false value, no css custom property will be created.
+ * @public
  */
 export function designSystemProperty<T extends DesignSystemProvider>(
     config: DecoratorDesignSystemPropertyConfiguration
@@ -70,10 +80,3 @@ export function designSystemProperty<T extends DesignSystemProvider>(
         decorator(source, prop, config);
     };
 }
-
-export interface DecoratorDesignSystemPropertyConfiguration
-    extends Omit<DecoratorAttributeConfiguration, "attribute"> {
-    attribute?: string | false;
-    cssCustomProperty?: string | false;
-    default: any;
-}
diff --git a/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.template.ts b/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.template.ts
index cfc9a19fd55..77a43cdea5d 100644
--- a/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.template.ts
+++ b/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.template.ts
@@ -1,4 +1,8 @@
 import { html } from "@microsoft/fast-element";
 import { DesignSystemProvider } from "./design-system-provider";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#DesignSystemProvider} component.
+ * @public
+ */
 export const DesignSystemProviderTemplate = html<DesignSystemProvider>`<slot></slot>`;
diff --git a/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.ts b/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.ts
index 3fdc8f15ccb..d3575a1a186 100644
--- a/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.ts
+++ b/packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.ts
@@ -16,13 +16,18 @@ import { DecoratorDesignSystemPropertyConfiguration } from "./design-system-prop
 
 const supportsAdoptedStylesheets = "adoptedStyleSheets" in window.ShadowRoot.prototype;
 
+/**
+ * Defines a structure that consumes from a DesignSystemProvider
+ * @public
+ */
 export interface DesignSystemConsumer {
     provider: DesignSystemProvider | null;
 }
 
 /**
- * Determines if the element has a design-system-provider context
- * @param element
+ * Determines if the element is {@link DesignSystemConsumer}
+ * @param element - the element to test.
+ * @public
  */
 export function isDesignSystemConsumer(
     element: HTMLElement | DesignSystemConsumer
@@ -37,7 +42,8 @@ export function isDesignSystemConsumer(
 }
 
 /**
- * Behavior to connect an element to the nearest design-system provider
+ * Behavior to connect a {@link DesignSystemConsumer} to the nearest {@link DesignSystemProvider}
+ * @public
  */
 export const designSystemConsumerBehavior: Behavior = {
     bind<T extends DesignSystemConsumer & HTMLElement>(source: T) {
@@ -48,6 +54,12 @@ export const designSystemConsumerBehavior: Behavior = {
     unbind<T extends DesignSystemConsumer & HTMLElement>(source: T) {},
 };
 
+/**
+ * A element to provide Design System values to consumers via CSS custom properties
+ * and to resolve recipe values.
+ *
+ * @public
+ */
 export class DesignSystemProvider extends FASTElement
     implements CSSCustomPropertyTarget, DesignSystemConsumer {
     /**
@@ -59,13 +71,18 @@ export class DesignSystemProvider extends FASTElement
     /**
      * Read all tag-names that are associated to
      * design-system-providers
+     *
+     * @public
      */
     public static get tagNames() {
         return DesignSystemProvider._tagNames;
     }
+
     /**
      * Determines if an element is a DesignSystemProvider
-     * @param el The element to test
+     * @param el - The element to test
+     *
+     * @public
      */
     public static isDesignSystemProvider(
         el: HTMLElement | DesignSystemProvider
@@ -79,6 +96,9 @@ export class DesignSystemProvider extends FASTElement
     /**
      * Finds the closest design-system-provider
      * to an element.
+     *
+     * @param el - The element from which to begin searching.
+     * @public
      */
     public static findProvider(
         el: HTMLElement & Partial<DesignSystemConsumer>
@@ -106,7 +126,12 @@ export class DesignSystemProvider extends FASTElement
 
     /**
      * Registers a tag-name to be associated with
-     * the design-system-provider class
+     * the design-system-provider class. All tag-names for DesignSystemProvider elements
+     * must be registered for proper property resolution.
+     *
+     * @param tagName - the HTML Element tag name to register as a DesignSystemProvider.
+     *
+     * @public
      */
     public static registerTagName(tagName: string) {
         const tagNameUpper = tagName.toUpperCase();
@@ -118,6 +143,8 @@ export class DesignSystemProvider extends FASTElement
     /**
      * Allows other components to identify this as a provider.
      * Using instanceof DesignSystemProvider did not seem to work.
+     *
+     * @public
      */
     public readonly isDesignSystemProvider = true;
 
@@ -125,6 +152,8 @@ export class DesignSystemProvider extends FASTElement
      * The design-system object.
      * This is "observable" but will notify on object mutation
      * instead of object assignment
+     *
+     * @public
      */
     public designSystem = {};
 
@@ -132,6 +161,10 @@ export class DesignSystemProvider extends FASTElement
      * Applies the default design-system values to the instance where properties
      * are not explicitly assigned. This is generally used to set the root design
      * system context.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: use-defaults
      */
     @attr({ attribute: "use-defaults", mode: "boolean" })
     public useDefaults: boolean = false;
@@ -146,6 +179,10 @@ export class DesignSystemProvider extends FASTElement
         }
     }
 
+    /**
+     * The parent provider the the DesignSystemProvider instance.
+     * @public
+     */
     @observable
     public provider: DesignSystemProvider | null = null;
     private providerChanged(
@@ -188,6 +225,8 @@ export class DesignSystemProvider extends FASTElement
      * Track all design system property names so we can react to changes
      * in those properties. Do not initialize or it will clobber value stored
      * by the decorator.
+     *
+     * @internal
      */
     public designSystemProperties: {
         [propertyName: string]: Required<
@@ -202,8 +241,10 @@ export class DesignSystemProvider extends FASTElement
      * Allows CSSCustomPropertyDefinitions to register on this element *before* the constructor
      * has run and the registration APIs exist. This can manifest when the DOM
      * is parsed (and custom element tags exist in the DOM) before the script defining the custom elements
-     * and elements is parsed, and the elements using the CSSCustomPropertyBehaviors
+     * is parsed, and when the elements using the CSSCustomPropertyBehaviors
      * are defined before this DesignSystemProvider.
+     *
+     * @public
      */
     public disconnectedCSSCustomPropertyRegistry: CSSCustomPropertyDefinition[];
 
@@ -287,6 +328,9 @@ export class DesignSystemProvider extends FASTElement
         this.$fastController.addBehaviors([designSystemConsumerBehavior]);
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         const selfNotifier = Observable.getNotifier(this);
@@ -326,8 +370,11 @@ export class DesignSystemProvider extends FASTElement
     }
 
     /**
-     * Register a CSSCustomPropertyDefinition with the design system provider.
-     * Registering a CSSCustomPropertyDefinition will create the CSS custom property.
+     * Register a {@link @microsoft/fast-foundation#CSSCustomPropertyDefinition} with the DeignSystemProvider.
+     * Registering a {@link @microsoft/fast-foundation#CSSCustomPropertyDefinition} will create the CSS custom property.
+     *
+     * @param behavior - The {@link @microsoft/fast-foundation#CSSCustomPropertyDefinition} to register.
+     * @public
      */
     public registerCSSCustomProperty(behavior: CSSCustomPropertyDefinition) {
         const cached = this.cssCustomPropertyDefinitions.get(behavior.name);
@@ -344,8 +391,11 @@ export class DesignSystemProvider extends FASTElement
     }
 
     /**
-     * Unregister a CSSCustomPropertyDefinition. If all registrations of the definition
-     * are unregistered, the CSS custom property will be removed.
+     * Unregister a {@link @microsoft/fast-foundation#CSSCustomPropertyDefinition} from the DeignSystemProvider.
+     * If all registrations of the definition are unregistered, the CSS custom property will be removed.
+     *
+     * @param behavior - The {@link @microsoft/fast-foundation#CSSCustomPropertyDefinition} to register.
+     * @public
      */
     public unregisterCSSCustomProperty(behavior: CSSCustomPropertyDefinition) {
         const cached = this.cssCustomPropertyDefinitions.get(behavior.name);
@@ -387,6 +437,8 @@ export class DesignSystemProvider extends FASTElement
 
     /**
      * Evaluates a CSSCustomPropertyDefinition with the current design system.
+     *
+     * @public
      */
     public evaluate(definition: CSSCustomPropertyDefinition): string {
         return typeof definition.value === "function"
@@ -421,7 +473,10 @@ export class DesignSystemProvider extends FASTElement
 }
 
 /**
- * Defines a design-system-provider custom element
+ * Defines a design-system-provider custom element, registering the tag-name so that the element can be property resolved by {@link DesignSystemConsumer | DesignSystemConsumers}.
+ *
+ * @param nameOrDef - the name or {@link @microsoft/fast-element#PartialFASTElementDefinition | element definition}
+ * @public
  */
 export function designSystemProvider(nameOrDef: string | PartialFASTElementDefinition) {
     return <T extends typeof DesignSystemProvider>(providerCtor: T): void => {
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
index bd26766b794..5bf3617e54f 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
@@ -1,6 +1,10 @@
 import { html, ref, when } from "@microsoft/fast-element";
 import { Dialog } from "./dialog";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Dialog} component.
+ * @public
+ */
 export const DialogTemplate = html<Dialog>`
     <div class="positioning-region" part="positioning-region">
         ${when(
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index 4e4efc45db2..b682f6ddbd3 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -2,35 +2,92 @@ import { attr, DOM, FASTElement } from "@microsoft/fast-element";
 import { keyCodeEscape, keyCodeTab } from "@microsoft/fast-web-utilities";
 import tabbable from "tabbable";
 
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
+ *
+ * @public
+ */
 export class Dialog extends FASTElement {
+    /**
+     * Indicates the element is modal. When modal, user interaction will be limited to the contents of the element.
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: modal
+     */
     @attr({ mode: "boolean" })
     public modal: boolean = true;
 
+    /**
+     * The hidden state of the element.
+     *
+     * @public
+     * @defaultValue - false
+     * @remarks
+     * HTML Attribute: hidden
+     */
     @attr({ mode: "boolean" })
     public hidden: boolean = false;
 
+    /**
+     * Indicates that the dialog should trap focus.
+     *
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: trap-focus
+     */
     @attr({ attribute: "trap-focus", mode: "boolean" })
     public trapFocus: boolean = true;
 
+    /**
+     * The id of the element describing the dialog.
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
     @attr({ attribute: "aria-describedby" })
     public ariaDescribedby: string;
 
+    /**
+     * The id of the element labeling the dialog.
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
     @attr({ attribute: "aria-labelledby" })
     public ariaLabelledby: string;
 
+    /**
+     * The label surfaced to assistive technologies.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
     @attr({ attribute: "aria-label" })
     public ariaLabel: string;
 
+    /**
+     * @internal
+     */
     public dialog: HTMLDivElement;
 
     private tabbableElements: HTMLElement[];
 
     private observer: MutationObserver;
 
+    /**
+     * @internal
+     */
     public dismiss(): void {
         this.$emit("dismiss");
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
 
@@ -48,6 +105,9 @@ export class Dialog extends FASTElement {
         DOM.queueUpdate(this.trapFocusChanged);
     }
 
+    /**
+     * @internal
+     */
     public disconnectedCallback(): void {
         super.disconnectedCallback();
 
diff --git a/packages/web-components/fast-foundation/src/divider/divider.template.ts b/packages/web-components/fast-foundation/src/divider/divider.template.ts
index 49039b32703..05293ed50e2 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.template.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.template.ts
@@ -1,4 +1,8 @@
 import { html } from "@microsoft/fast-element";
 import { Divider } from "./divider";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Divider} component.
+ * @public
+ */
 export const DividerTemplate = html<Divider>`<template role=${x => x.role}></template>`;
diff --git a/packages/web-components/fast-foundation/src/divider/divider.ts b/packages/web-components/fast-foundation/src/divider/divider.ts
index 314374a9a00..4cf71ab26b7 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.ts
@@ -1,11 +1,35 @@
 import { attr, FASTElement } from "@microsoft/fast-element";
-
+/**
+ * Divider roles
+ * @public
+ */
 export enum DividerRole {
+    /**
+     * The divider semantically separates content
+     */
     separator = "separator",
+
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
     presentation = "presentation",
 }
 
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
 export class Divider extends FASTElement {
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @defaultValue - {@link DividerRole.separator}
+     * @remarks
+     * HTML Attribute: role
+     */
     @attr
     public role: DividerRole = DividerRole.separator;
 }
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
index 46328904969..449eca3f37b 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
@@ -1,6 +1,10 @@
 import { html, when } from "@microsoft/fast-element";
 import { Flipper, FlipperDirection } from "./flipper";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Flipper} component.
+ * @public
+ */
 export const FlipperTemplate = html<Flipper>`
     <template
         role="button"
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.ts b/packages/web-components/fast-foundation/src/flipper/flipper.ts
index 2fcdee76883..21386008f35 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.ts
@@ -1,17 +1,48 @@
 import { attr, booleanConverter, FASTElement } from "@microsoft/fast-element";
 
+/**
+ * The direction options for flipper.
+ * @public
+ */
 export enum FlipperDirection {
     next = "next",
     previous = "previous",
 }
 
+/**
+ * A Flipper Custom HTML Element.
+ * Flippers are a form of button that implies directional content navigation, such as in a carousel.
+ *
+ * @public
+ */
 export class Flipper extends FASTElement {
+    /**
+     * The disabled state of the flipper.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
     @attr({ mode: "boolean" })
     public disabled: boolean;
 
+    /**
+     * Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
+     *
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
     @attr({ attribute: "aria-hidden", mode: "fromView", converter: booleanConverter })
     public hiddenFromAT: boolean = true;
 
+    /**
+     * The direction that the flipper implies navigating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: direction
+     */
     @attr
     public direction: FlipperDirection = FlipperDirection.next;
 }
diff --git a/packages/web-components/fast-foundation/src/form-associated/index.ts b/packages/web-components/fast-foundation/src/form-associated/index.ts
index b6ce440fde8..f201cb94a5e 100644
--- a/packages/web-components/fast-foundation/src/form-associated/index.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/index.ts
@@ -290,9 +290,9 @@ export abstract class FormAssociated<
      * available (and the proxy element is used to report validity), this function will
      * do nothing unless a message is provided, at which point the setCustomValidity method
      * of the proxy element will be invoked with the provided message.
-     * @param flags Validity flags
-     * @param message Optional message to supply
-     * @param anchor Optional element used by UA to display an interactive validation UI
+     * @param flags - Validity flags
+     * @param message - Optional message to supply
+     * @param anchor - Optional element used by UA to display an interactive validation UI
      */
     public setValidity(
         flags: ValidityStateFlags,
@@ -309,7 +309,7 @@ export abstract class FormAssociated<
     /**
      * Invoked when a connected component's form or fieldset has it's disabled
      * state changed.
-     * @param disabled the disabled value of the form / fieldset
+     * @param disabled - the disabled value of the form / fieldset
      */
     public formDisabledCallback(disabled: boolean): void {
         this.disabled = disabled;
@@ -317,8 +317,8 @@ export abstract class FormAssociated<
 
     /**
      *
-     * @param value The value to set
-     * @param state The state object provided to during session restores and when autofilling.
+     * @param value - The value to set
+     * @param state - The state object provided to during session restores and when autofilling.
      */
     protected setFormValue(
         value: File | string | FormData | null,
@@ -343,7 +343,7 @@ export abstract class FormAssociated<
 
     /**
      * Used to stop propagation of proxy element events
-     * @param e Event object
+     * @param e - Event object
      */
     private stopPropagation(e: Event): void {
         e.stopPropagation();
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
index 4d7715f7630..ffb2eb52954 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -2,6 +2,10 @@ import { html } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../patterns/start-end";
 import { MenuItem, MenuItemRole } from "./menu-item";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(MenuItem:class)} component.
+ * @public
+ */
 export const MenuItemTemplate = html<MenuItem>`
     <template
         role=${x => x.role}
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
index 9a17813ca91..3747e8a5f06 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
@@ -2,31 +2,75 @@ import { attr, booleanConverter, FASTElement } from "@microsoft/fast-element";
 import { StartEnd } from "../patterns/start-end";
 import { applyMixins } from "../utilities/apply-mixins";
 
+/**
+ * Menu items roles.
+ * @public
+ */
 export enum MenuItemRole {
     menuitem = "menuitem",
     menuitemcheckbox = "menuitemcheckbox",
     menuitemradio = "menuitemradio",
 }
 
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @public
+ */
 export class MenuItem extends FASTElement {
+    /**
+     * The disabled state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
     @attr({ mode: "boolean" })
     public disabled: boolean;
 
+    /**
+     * The expanded state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
     @attr({ attribute: "aria-expanded", mode: "reflect", converter: booleanConverter })
     public expanded: boolean = false;
 
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     @attr
     public role: MenuItemRole = MenuItemRole.menuitem;
 
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
     @attr
     public checked: boolean;
 
+    /**
+     * @internal
+     */
     public handleMenuItemKeyDown = (e: KeyboardEvent): boolean => {
         this.change();
 
         return true;
     };
 
+    /**
+     * @internal
+     */
     public handleMenuItemClick = (e: MouseEvent): void => {
         this.change();
     };
@@ -36,6 +80,12 @@ export class MenuItem extends FASTElement {
     };
 }
 
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
+ * @internal
+ */
 /* eslint-disable-next-line */
 export interface MenuItem extends StartEnd {}
 applyMixins(MenuItem, StartEnd);
diff --git a/packages/web-components/fast-foundation/src/menu/menu.template.ts b/packages/web-components/fast-foundation/src/menu/menu.template.ts
index 8cc5366ada9..7764ea15891 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.template.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.template.ts
@@ -1,6 +1,10 @@
 import { html, slotted } from "@microsoft/fast-element";
 import { Menu } from "./menu";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Menu} component.
+ * @public
+ */
 export const MenuTemplate = html<Menu>`
     <template
         role="menu"
diff --git a/packages/web-components/fast-foundation/src/menu/menu.ts b/packages/web-components/fast-foundation/src/menu/menu.ts
index 7872322d03a..09418aeb840 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.ts
@@ -11,7 +11,16 @@ import {
 } from "@microsoft/fast-web-utilities";
 import { MenuItemRole } from "../menu-item/index";
 
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @public
+ */
 export class Menu extends FASTElement {
+    /**
+     * @internal
+     */
     @observable
     public items: HTMLSlotElement;
     private itemsChanged(oldValue, newValue): void {
@@ -34,16 +43,27 @@ export class Menu extends FASTElement {
         MenuItemRole
     );
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         this.menuItems = this.domChildren();
         this.setItems();
     }
 
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
     public focus(): void {
         this.setFocus(0, 1);
     }
 
+    /**
+     * @internal
+     */
     public handleMenuKeyDown(e: KeyboardEvent): void | boolean {
         switch (e.keyCode) {
             case keyCodeArrowDown:
@@ -76,6 +96,7 @@ export class Menu extends FASTElement {
 
     /**
      * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
      */
     public handleFocusOut = (e: FocusEvent) => {
         const isNestedEl = this.contains(e.relatedTarget as Element);
diff --git a/packages/web-components/fast-foundation/src/patterns/start-end.ts b/packages/web-components/fast-foundation/src/patterns/start-end.ts
index 7966e90a36f..78687488f73 100644
--- a/packages/web-components/fast-foundation/src/patterns/start-end.ts
+++ b/packages/web-components/fast-foundation/src/patterns/start-end.ts
@@ -1,5 +1,10 @@
 import { html, ref } from "@microsoft/fast-element";
 
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
 export class StartEnd {
     public start: HTMLSlotElement;
     public startContainer: HTMLSpanElement;
@@ -17,6 +22,12 @@ export class StartEnd {
     }
 }
 
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
 export const endTemplate = html<StartEnd>`
     <span part="end" ${ref("endContainer")}>
         <slot
@@ -27,6 +38,12 @@ export const endTemplate = html<StartEnd>`
     </span>
 `;
 
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
 export const startTemplate = html<StartEnd>`
     <span part="start" ${ref("startContainer")}>
         <slot
diff --git a/packages/web-components/fast-foundation/src/progress/base-progress.ts b/packages/web-components/fast-foundation/src/progress/base-progress.ts
index ffb60e1b496..afb3f7c964d 100644
--- a/packages/web-components/fast-foundation/src/progress/base-progress.ts
+++ b/packages/web-components/fast-foundation/src/progress/base-progress.ts
@@ -1,15 +1,44 @@
 import { attr, FASTElement, nullableNumberConverter } from "@microsoft/fast-element";
-
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
 export class BaseProgress extends FASTElement {
+    /**
+     * The value of the progress
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
     @attr({ converter: nullableNumberConverter })
     public value: number;
 
+    /**
+     * The minimum value
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
     @attr({ converter: nullableNumberConverter })
     public min: number;
 
+    /**
+     * The maximum value
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
     @attr({ converter: nullableNumberConverter })
     public max: number;
 
+    /**
+     * Indicates the progress is paused
+     * @public
+     * @remarks
+     * HTML Attribute: paused
+     */
     @attr({ mode: "boolean" })
     public paused;
 }
diff --git a/packages/web-components/fast-foundation/src/progress/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress/progress-ring/progress-ring.template.ts
index d9207e8065d..baf5ee1cd9d 100644
--- a/packages/web-components/fast-foundation/src/progress/progress-ring/progress-ring.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress-ring/progress-ring.template.ts
@@ -1,6 +1,9 @@
 import { html, when } from "@microsoft/fast-element";
 import { BaseProgress } from "../base-progress";
-
+/**
+ * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
+ * @public
+ */
 export const ProgressRingTemplate = html<BaseProgress>`
     <template
         role="progressbar"
diff --git a/packages/web-components/fast-foundation/src/progress/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress/progress.template.ts
index 93a99b0f615..9167c94731f 100644
--- a/packages/web-components/fast-foundation/src/progress/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress/progress.template.ts
@@ -1,6 +1,10 @@
 import { html, when } from "@microsoft/fast-element";
 import { BaseProgress } from "../base-progress";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
+ * @public
+ */
 export const ProgressTemplate = html<BaseProgress>`
     <template
         role="progressbar"
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
index 688d346204e..726f213cb0e 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
@@ -2,6 +2,10 @@ import { html, slotted } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 import { RadioGroup } from "./radio-group";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#RadioGroup} component.
+ * @public
+ */
 export const RadioGroupTemplate = html<RadioGroup>`
     <template
         role="radiogroup"
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
index 80d2ab6029a..a9c45860656 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
@@ -10,7 +10,19 @@ import {
 } from "@microsoft/fast-web-utilities";
 import { RadioControl } from "../radio/index";
 
+/**
+ * An Radio Group Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
+ *
+ * @public
+ */
 export class RadioGroup extends FASTElement {
+    /**
+     * When true, the child radios will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
     private readOnlyChanged(): void {
@@ -26,6 +38,13 @@ export class RadioGroup extends FASTElement {
         }
     }
 
+    /**
+     * Disables the radio group and child radios.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
     @attr({ attribute: "disabled", mode: "boolean" })
     public disabled: boolean;
     private disabledChanged(): void {
@@ -41,6 +60,14 @@ export class RadioGroup extends FASTElement {
         }
     }
 
+    /**
+     * The name of the radio group. Setting this value will set the name value
+     * for all child radio elements.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
     @attr
     public name: string;
     protected nameChanged(): void {
@@ -49,13 +76,31 @@ export class RadioGroup extends FASTElement {
         });
     }
 
+    /**
+     * The value of the checked radio
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
     @attr
     public value: string;
 
+    /**
+     * The orientation of the group
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
     @attr
     public orientation: Orientation = Orientation.horizontal;
 
-    @observable slottedRadioButtons: RadioControl[];
+    /**
+     * @internal
+     */
+    @observable
+    public slottedRadioButtons: RadioControl[];
     private selectedRadio: RadioControl | null;
     private focusedRadio: RadioControl | null;
     private parentToolbar: HTMLElement | null | undefined;
@@ -70,6 +115,9 @@ export class RadioGroup extends FASTElement {
         this.addEventListener("focusout", this.focusOutHandler);
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         const radioButtons: RadioControl[] = this.getFilteredRadioButtons();
@@ -248,8 +296,12 @@ export class RadioGroup extends FASTElement {
         }
     };
 
-    /* keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar */
-    /* navigation is different when there is an ancestor with role='toolbar' */
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
     public keydownHandler = (e: KeyboardEvent): void => {
         const group: RadioControl[] = this.getFilteredRadioButtons();
         let index: number = 0;
diff --git a/packages/web-components/fast-foundation/src/radio/radio.template.ts b/packages/web-components/fast-foundation/src/radio/radio.template.ts
index 5bae5198fd9..774a775a951 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.template.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.template.ts
@@ -1,6 +1,10 @@
 import { html, slotted } from "@microsoft/fast-element";
 import { Radio } from "./radio";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Radio} component.
+ * @public
+ */
 export const RadioTemplate = html<Radio>`
     <template
         role="radio"
diff --git a/packages/web-components/fast-foundation/src/radio/radio.ts b/packages/web-components/fast-foundation/src/radio/radio.ts
index d84bdd36003..70ca54a8a7a 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.ts
@@ -2,16 +2,28 @@ import { attr, observable } from "@microsoft/fast-element";
 import { keyCodeSpace } from "@microsoft/fast-web-utilities";
 import { FormAssociated } from "../form-associated/index";
 
-export interface RadioControl {
-    checked: boolean;
-    disabled: boolean;
-    readOnly: boolean;
-    focus: () => void;
-    setAttribute: (name: string, value: string) => void;
-    getAttribute: (name: string) => string | null;
-}
-
+/**
+ * A structure representing a Radio element
+ * @public
+ */
+export type RadioControl = Pick<
+    HTMLInputElement,
+    "checked" | "disabled" | "readOnly" | "focus" | "setAttribute" | "getAttribute"
+>;
+
+/**
+ * An Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @public
+ */
 export class Radio extends FormAssociated<HTMLInputElement> implements RadioControl {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
     private readOnlyChanged(): void {
@@ -20,6 +32,13 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
         }
     }
 
+    /**
+     * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/name | name attribute} for more info.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
     @attr
     public name: string; // Map to proxy element
     protected nameChanged(): void {
@@ -31,6 +50,8 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @public
      */
     public value: string = "on"; // Map to proxy element.
     private valueChanged(): void {
@@ -42,6 +63,10 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
     /**
      * Provides the default checkedness of the input element
      * Passed down to proxy
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
      */
     @attr({ attribute: "checked", mode: "boolean" })
     public checkedAttribute: boolean;
@@ -49,12 +74,17 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
         this.defaultChecked = this.checkedAttribute;
     }
 
+    /**
+     * @internal
+     */
     @observable
     public defaultSlottedNodes: Node[];
 
     /**
      * Initialized to the value of the checked attribute. Can be changed independently of the "checked" attribute,
      * but changing the "checked" attribute always additionally sets this value.
+     *
+     * @public
      */
     @observable
     public defaultChecked: boolean = !!this.checkedAttribute;
@@ -70,6 +100,8 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
 
     /**
      * The checked state of the control
+     *
+     * @public
      */
     @observable
     public checked: boolean = this.defaultChecked;
@@ -101,6 +133,9 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
         this.proxy.setAttribute("type", "radio");
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         if (
@@ -119,6 +154,9 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
         this.setFormValue(value, value);
     }
 
+    /**
+     * @internal
+     */
     public keypressHandler = (e: KeyboardEvent): void => {
         super.keypressHandler(e);
         switch (e.keyCode) {
@@ -130,7 +168,9 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
         }
     };
 
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    /**
+     * @internal
+     */
     public clickHandler = (e: MouseEvent): void => {
         if (!this.disabled && !this.readOnly) {
             this.checked = !this.checked;
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
index 8ae2cb95f1d..364dd6525d4 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
@@ -2,6 +2,10 @@ import { html, ref, when } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 import { SliderLabel } from "./slider-label";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#SliderLabel} component.
+ * @public
+ */
 export const SliderLabelTemplate = html<SliderLabel>`
     <template
         aria-disabled="${x => x.disabled}"
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
index 32d0d8d5e9e..ff92ce46c6e 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
@@ -17,35 +17,81 @@ const defaultConfig: SliderConfiguration = {
     disabled: false,
 };
 
+/**
+ * A label element intended to be used with the {@link @microsoft/fast-foundation#Slider} component.
+ *
+ * @public
+ */
 export class SliderLabel extends FASTElement {
+    /**
+     * @internal
+     */
     @observable
     public positionStyle: string;
 
+    /**
+     * @internal
+     */
     public root: HTMLDivElement;
 
+    /**
+     * The position of the label relative to the min and max value of the parent {@link @microsoft/fast-foundation#Slider}.
+     * @public
+     * HTML Attribute: position
+     */
     @attr
     public position: string;
     private positionChanged(): void {
         this.positionStyle = this.positionAsStyle();
     }
 
+    /**
+     * Hides the tick mark.
+     *
+     * @public
+     * HTML Attribute: hide-mark
+     */
     @attr({ attribute: "hide-mark", mode: "boolean" })
     public hideMark: boolean = false;
 
+    /**
+     * The disabled state of the label. This is generally controlled by the parent {@link @microsoft/fast-foundation#Slider}.
+     *
+     * @public
+     * HTML Attribute: disabled
+     */
     @attr({ attribute: "disabled", mode: "boolean" })
     public disabled: boolean; // Map to proxy element
 
+    /**
+     * @internal
+     */
     @observable
     public sliderOrientation: Orientation;
+
+    /**
+     * @internal
+     */
     @observable
     public sliderMinPosition: number;
+
+    /**
+     * @internal
+     */
     @observable
     public sliderMaxPosition: number;
+
+    /**
+     * @internal
+     */
     @observable
     public sliderDirection: Direction = Direction.ltr;
 
     private notifier: Notifier;
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         this.getSliderConfiguration();
@@ -57,6 +103,9 @@ export class SliderLabel extends FASTElement {
         this.notifier.subscribe(this, "min");
     }
 
+    /**
+     * @internal
+     */
     public disconnectedCallback(): void {
         super.disconnectedCallback();
         this.notifier.unsubscribe(this, "orientation");
@@ -65,6 +114,9 @@ export class SliderLabel extends FASTElement {
         this.notifier.unsubscribe(this, "min");
     }
 
+    /**
+     * @internal
+     */
     public handleChange(source: any, propertyName: string) {
         switch (propertyName) {
             case "direction":
diff --git a/packages/web-components/fast-foundation/src/slider/slider.template.ts b/packages/web-components/fast-foundation/src/slider/slider.template.ts
index a87c6f31fa3..f9983d812ae 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.template.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.template.ts
@@ -3,6 +3,10 @@ import { ref } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 import { Slider } from "./slider";
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#Slider} component.
+ * @public
+ */
 export const SliderTemplate = html<Slider>`
     <template
         role="slider"
diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
index 0e2ecf7d3f2..a54f33344a7 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -13,10 +13,18 @@ import {
 import { FormAssociated } from "../form-associated/index";
 import { convertPixelToPercent } from "./slider-utilities";
 
+/**
+ * The selection modes of a {@link Slider}
+ * @public
+ */
 export enum SliderMode {
     singleValue = "single-value",
 }
 
+/**
+ * The configuration structure of {@link Slider}.
+ * @public
+ */
 export interface SliderConfiguration {
     max: number;
     min: number;
@@ -25,8 +33,20 @@ export interface SliderConfiguration {
     disabled?: boolean;
 }
 
+/**
+ * An Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
+ *
+ * @public
+ */
 export class Slider extends FormAssociated<HTMLInputElement>
     implements SliderConfiguration {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
     private readOnlyChanged(): void {
@@ -35,28 +55,61 @@ export class Slider extends FormAssociated<HTMLInputElement>
         }
     }
 
+    /**
+     * @internal
+     */
     public track: HTMLDivElement;
+
+    /**
+     * @internal
+     */
     public thumb: HTMLDivElement;
 
+    /**
+     * @internal
+     */
     @observable
     public direction: Direction = Direction.ltr;
 
+    /**
+     * @internal
+     */
     @observable
     public isDragging: boolean = false;
 
+    /**
+     * @internal
+     */
     @observable
     public position: string;
+
+    /**
+     * @internal
+     */
     @observable
     public trackWidth: number = 0;
+
+    /**
+     * @internal
+     */
     @observable
     public trackMinWidth: number = 0;
+
+    /**
+     * @internal
+     */
     @observable
     public trackHeight: number = 0;
+
+    /**
+     * @internal
+     */
     @observable
     public trackMinHeight: number = 0;
 
     /**
      * The element's value to be included in form submission changed.
+     * @public
      */
     public value: string; // Map to proxy element.
     private valueChanged(): void {
@@ -72,7 +125,11 @@ export class Slider extends FormAssociated<HTMLInputElement>
     }
 
     /**
-     * Min allowed value default is 0
+     * The minimum allowed value
+     *
+     * @defaultValue - 0
+     * @public
+     * HTML Attribute: min
      */
     @attr({ converter: nullableNumberConverter })
     public min: number = 0; // Map to proxy element.
@@ -83,7 +140,11 @@ export class Slider extends FormAssociated<HTMLInputElement>
     }
 
     /**
-     * Max allowed value default is 10
+     * The maximum allowed value
+     *
+     * @defaultValue - 10
+     * @public
+     * HTML Attribute: max
      */
     @attr({ converter: nullableNumberConverter })
     public max: number = 10; // Map to proxy element.
@@ -95,6 +156,9 @@ export class Slider extends FormAssociated<HTMLInputElement>
 
     /**
      * Value to increment or decrement via arrow keys, mouse click or drag
+     *
+     * @public
+     * HTML Attribute: step
      */
     @attr({ converter: nullableNumberConverter })
     public step: number = 1; // Map to proxy element.
@@ -105,7 +169,10 @@ export class Slider extends FormAssociated<HTMLInputElement>
     }
 
     /**
-     * Orientation value, horizontal | vertical
+     * Orientation of the slider
+     *
+     * @public
+     * HTML Attribute: orientation
      */
     @attr
     public orientation: Orientation = Orientation.horizontal;
@@ -114,8 +181,12 @@ export class Slider extends FormAssociated<HTMLInputElement>
             this.setThumbPositionForOrientation(this.direction);
         }
     }
+
     /**
-     * mode value, default singleValue
+     * The selection mode
+     *
+     * @public
+     * HTML Attribute: mode
      */
     @attr
     public mode: SliderMode = SliderMode.singleValue;
@@ -127,6 +198,9 @@ export class Slider extends FormAssociated<HTMLInputElement>
         this.proxy.setAttribute("type", "range");
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
         this.direction = this.getDirection();
@@ -137,12 +211,20 @@ export class Slider extends FormAssociated<HTMLInputElement>
         this.setThumbPositionForOrientation(this.direction);
     }
 
+    /**
+     * @internal
+     */
     public disconnectedCallback(): void {
         this.removeEventListener("keydown", this.keypressHandler);
         this.removeEventListener("mousedown", this.clickHandler);
         this.thumb.removeEventListener("mousedown", this.handleThumbMouseDown);
     }
 
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
     public increment = (): void => {
         const newVal: number =
             this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
@@ -155,6 +237,11 @@ export class Slider extends FormAssociated<HTMLInputElement>
         this.updateForm();
     };
 
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
     public decrement = (): void => {
         const newVal =
             this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
diff --git a/packages/web-components/fast-foundation/src/switch/switch.ts b/packages/web-components/fast-foundation/src/switch/switch.ts
index 7f1c1b4ded2..08dd232ade1 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.ts
@@ -2,7 +2,19 @@ import { attr, observable } from "@microsoft/fast-element";
 import { keyCodeSpace } from "@microsoft/fast-web-utilities";
 import { FormAssociated } from "../form-associated/index";
 
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @public
+ */
 export class Switch extends FormAssociated<HTMLInputElement> {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
     private readOnlyChanged(): void {
@@ -18,6 +30,9 @@ export class Switch extends FormAssociated<HTMLInputElement> {
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @public
+     * HTML Attribute: value
      */
     @attr
     public value: string = "on"; // Map to proxy element.
@@ -27,18 +42,29 @@ export class Switch extends FormAssociated<HTMLInputElement> {
         }
     }
 
+    /**
+     * The checked attribute value. This sets the initial checked value.
+     *
+     * @public
+     * HTML Attribute: checked
+     */
     @attr({ attribute: "checked", mode: "boolean" })
     public checkedAttribute: boolean;
     private checkedAttributeChanged(): void {
         this.defaultChecked = this.checkedAttribute;
     }
 
+    /**
+     * @internal
+     */
     @observable
     public defaultSlottedNodes: Node[];
 
     /**
      * Initialized to the value of the checked attribute. Can be changed independently of the "checked" attribute,
      * but changing the "checked" attribute always additionally sets this value.
+     *
+     * @public
      */
     @observable
     public defaultChecked: boolean = !!this.checkedAttribute;
@@ -53,7 +79,9 @@ export class Switch extends FormAssociated<HTMLInputElement> {
     }
 
     /**
-     * The checked state of the control
+     * The checked state of the control.
+     *
+     * @public
      */
     @observable
     public checked: boolean = this.defaultChecked;
@@ -88,6 +116,9 @@ export class Switch extends FormAssociated<HTMLInputElement> {
         this.proxy.setAttribute("type", "checkbox");
     }
 
+    /**
+     * @internal
+     */
     public connectedCallback(): void {
         super.connectedCallback();
 
@@ -99,6 +130,9 @@ export class Switch extends FormAssociated<HTMLInputElement> {
         this.setFormValue(value, value);
     }
 
+    /**
+     * @internal
+     */
     public keypressHandler = (e: KeyboardEvent) => {
         super.keypressHandler(e);
 
@@ -109,7 +143,9 @@ export class Switch extends FormAssociated<HTMLInputElement> {
         }
     };
 
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    /**
+     * @internal
+     */
     public clickHandler = (e: MouseEvent) => {
         if (!this.disabled && !this.readOnly) {
             this.checked = !this.checked;
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 88f0e65db05..e353aa02d3c 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -327,7 +327,10 @@ export class Tabs extends FASTElement {
 }
 
 /**
- * @public
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
+ * @internal
  */
 /* eslint-disable-next-line */
 export interface Tabs extends StartEnd {}
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts
index 81d225cbd97..329cedb9065 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts
@@ -262,7 +262,10 @@ export class TextField extends FormAssociated<HTMLInputElement> {
 }
 
 /**
- * @public
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
+ * @internal
  */
 /* eslint-disable-next-line */
 export interface TextField extends StartEnd {}