diff --git a/packages/web-components/fast-foundation/src/anchor/README.md b/packages/web-components/fast-foundation/src/anchor/README.md
index 246c52f7353..fb374503121 100644
--- a/packages/web-components/fast-foundation/src/anchor/README.md
+++ b/packages/web-components/fast-foundation/src/anchor/README.md
@@ -5,6 +5,10 @@ sidebar_label: fast-anchor
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/anchor/README.md
---
+`fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The component supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
+
+*NOTE: This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.*
+
## Applying Custom Styles
```ts
@@ -21,4 +25,9 @@ import { MyAnchorStyles as styles } from "./anchor.styles";
},
})
export class FASTAnchor extends Anchor {}
+```
+
+## Usage
+```html
+FAST-DNA
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md
index fc3c6d053ac..2504545d68e 100644
--- a/packages/web-components/fast-foundation/src/badge/README.md
+++ b/packages/web-components/fast-foundation/src/badge/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-badge
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/badge/README.md
---
+The `fast-badge` component is used to highlight an item and attract attention or flag status.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,24 @@ import { BadgeStyles as styles } from "./badge.styles";
styles,
})
export class FASTBadge extends Badge {}
-```
\ No newline at end of file
+```
+
+## Usage
+The `fill` and `color` attributes of the *badge* create CSS custom properties which can be used to style the control.
+
+__Example custom property map__
+```css
+fast-badge {
+ --badge-fill-primary: #00FF00;
+ --badge-fill-danger: #FF0000;
+ --badge-color-light: #FFFFFF;
+ --badge-color-dark: #000000;
+}
+```
+
+
+```html
+Danger
+```
+
+*NOTE: In addition to the color map support detailed above, the `fast-badge` from the Microsoft component implementation (`@microsoft/fast-components-msft`) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.*
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
index ff8c000f69c..8f01db4ebcb 100644
--- a/packages/web-components/fast-foundation/src/button/README.md
+++ b/packages/web-components/fast-foundation/src/button/README.md
@@ -5,6 +5,10 @@ sidebar_label: fast-button
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/button/README.md
---
+`fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The component supports several visual apperances (accent, lightweight, neutral, outline, stealth).
+
+*NOTE: This component is built with the expectation that focus is delegated to the button element rendered into the shadow DOM.*
+
## Applying Custom Styles
```ts
@@ -22,4 +26,9 @@ import { ButtonStyles as styles } from "./button.styles";
},
})
export class FASTButton extends Button {}
+```
+
+## Usage
+```html
+Submit
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/card/README.md b/packages/web-components/fast-foundation/src/card/README.md
index 53b762b2218..35ab5f13048 100644
--- a/packages/web-components/fast-foundation/src/card/README.md
+++ b/packages/web-components/fast-foundation/src/card/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-card
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/card/README.md
---
+The `fast-card` component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,15 @@ import { CardStyles as styles } from "./card.styles";
styles,
})
export class FASTCard extends Card {}
+```
+
+## Usage
+
+```html
+
+
+
Card title
+
At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.
+ Learn more
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
index ded52c8fe64..8ead1438fd3 100644
--- a/packages/web-components/fast-foundation/src/checkbox/README.md
+++ b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-checkbox
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/checkbox/README.md
---
+An implementation of a [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox) as a form-connected web-component.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,15 @@ import { CheckboxStyles as styles } from "./checkbox.styles";
styles,
})
export class FASTCheckbox extends Checkbox {}
+```
+
+## Usage
+```html
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
index b50c41de7f0..f249af75d5d 100644
--- a/packages/web-components/fast-foundation/src/dialog/README.md
+++ b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -4,6 +4,7 @@ title: fast-dialog
sidebar_label: fast-dialog
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/dialog/README.md
---
+A web component implementation of a [dialog](https://w3c.github.io/aria-practices/#dialog_modal) which can either be modal or non-modal.
## Applying Custom Styles
@@ -18,4 +19,14 @@ import { DialogStyles as styles } from "./dialog.styles";
styles,
})
export class FASTDialog extends Dialog {}
+```
+
+## Usage
+
+```html
+
+
Dialog with text and button.
+ Button A
+ Should autofocus
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/divider/README.md b/packages/web-components/fast-foundation/src/divider/README.md
index 8d7d9ccef31..43b51542ebb 100644
--- a/packages/web-components/fast-foundation/src/divider/README.md
+++ b/packages/web-components/fast-foundation/src/divider/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-divider
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/divider/README.md
---
+A web component implementation of a [horizontal rule](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr).
+
## Applying Custom Styles
```ts
@@ -18,4 +20,9 @@ import { DividerStyles as styles } from "./divider.styles";
styles,
})
export class FASTDivider extends Divider {}
+```
+
+## Usage
+```html
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/flipper/README.md b/packages/web-components/fast-foundation/src/flipper/README.md
index 9eb4e8d4caa..a08a1c7b0ab 100644
--- a/packages/web-components/fast-foundation/src/flipper/README.md
+++ b/packages/web-components/fast-foundation/src/flipper/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-flipper
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/flipper/README.md
---
+The flipper component is most often used to page through blocks of content or collections of ui elements. As flippers are often a supplemental form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of `aria-hidden="false"` will expose the flippers to assistive technology.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,9 @@ import { FlipperStyles as styles } from "./flipper.styles";
styles,
})
export class FASTFlipper extends Flipper {}
+```
+
+## Usage
+```html
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/menu-item/README.md b/packages/web-components/fast-foundation/src/menu-item/README.md
index 83cbfeb96af..2508e7c2f5f 100644
--- a/packages/web-components/fast-foundation/src/menu-item/README.md
+++ b/packages/web-components/fast-foundation/src/menu-item/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-menu-item
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/menu-item/README.md
---
+The `fast-menu-item` is a custom element meant to be used with `fast-menu` and supports roles of `menuitem`, `menuitemcheckbox`, and `menuitemradio`.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,10 @@ import { MenuItemStyles as styles } from "./menu-item.styles";
styles,
})
export class FASTMenuItem extends MenuItem {}
+```
+
+## Usage
+
+```html
+Open in new window
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md
index 2835405b413..4801534a429 100644
--- a/packages/web-components/fast-foundation/src/menu/README.md
+++ b/packages/web-components/fast-foundation/src/menu/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-menu
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/menu/README.md
---
+The menu is a widget that offers a list of choices to the user, such as a set of actions or functions. While any DOM content is permissible as a child of the menu, only `fast-menu-item`'s and slotted content with a role of `menuitem`, `menuitemcheckbox`, or `menuitemradio` will recieve keyboard support.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,25 @@ import { MenuStyles as styles } from "./menu.styles";
styles,
})
export class FASTMenu extends Menu {}
+```
+
+## Usage
+```html
+
+ Menu item 1
+ Menu item 2
+ Menu item 3
+
+ Menu item 4
+ Menu item 5
+
+```
+
+__Custom menu items__
+```html
+
+
Menu item 1
+
Menu item 2
+
Menu item 3
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
index 698b2cc9007..e49140bb68b 100644
--- a/packages/web-components/fast-foundation/src/progress/README.md
+++ b/packages/web-components/fast-foundation/src/progress/README.md
@@ -4,6 +4,7 @@ title: fast-progress
sidebar_label: fast-progress
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/progress/README.md
---
+Progress components are used to indicate the length of time a process will take. This may either be as a determinate state in which the progress is a percentage of the total time needed to complete the task, or as an indeterminate state where the wait time is unspecified. For progress components which have a linear visual appearance, use `fast-progress`. For progress implementations which are circular, use `fast-progress-ring`.
## Applying Custom Styles
@@ -35,4 +36,18 @@ import { ProgressStyles as styles } from "./progress-ring.styles";
styles,
})
export class FASTProgressRing extends BaseProgressRing {}
+```
+
+## Usage
+
+### fast-progress
+
+```html
+
+```
+
+### fast-progress-ring
+
+```html
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md
index 0a8c0f5cf62..43c5d2623ec 100644
--- a/packages/web-components/fast-foundation/src/radio-group/README.md
+++ b/packages/web-components/fast-foundation/src/radio-group/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-radio-group
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/radio-group/README.md
---
+An implementation of a [radio-group](https://w3c.github.io/aria-practices/#radiobutton). While any DOM content is permissible as a child of the radiogroup, only `fast-radio`'s and slotted content with a role of `radio` will recieve keyboard support.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,16 @@ import { RadioGroupStyles as styles } from "./radio-group.styles";
styles,
})
export class FASTRadioGroup extends RadioGroup {}
+```
+
+## Usage
+
+```html
+
+
+ Ice Man
+ Maverick
+ Viper
+ Jester
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md
index e0a962eabf1..3e6d9baeced 100644
--- a/packages/web-components/fast-foundation/src/radio/README.md
+++ b/packages/web-components/fast-foundation/src/radio/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-radio
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/radio/README.md
---
+An implementation of a [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) as a form-connected web-component.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,10 @@ import { RadioStyles as styles } from "./radio.styles";
styles,
})
export class FASTRadio extends Radio {}
-```
\ No newline at end of file
+```
+
+## Usage
+
+```html
+Mango
+ ```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/slider-label/README.md b/packages/web-components/fast-foundation/src/slider-label/README.md
index 008044069c7..170cffd6ead 100644
--- a/packages/web-components/fast-foundation/src/slider-label/README.md
+++ b/packages/web-components/fast-foundation/src/slider-label/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-slider-label
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/slider-label/README.md
---
+The `fast-slider-label` component provides a default styled label to be placed inside a `fast-slider`. Users can choose to hide the mark as well as provide custom label content.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,10 @@ import { SliderLabelStyles as styles } from "./slider-label.styles";
styles,
})
export class FASTSliderLabel extends SliderLabel {}
+```
+
+## Usage
+
+```html
+Fast
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
index 3ffb03df237..7d61b9aa870 100644
--- a/packages/web-components/fast-foundation/src/slider/README.md
+++ b/packages/web-components/fast-foundation/src/slider/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-slider
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/slider/README.md
---
+An implementation of a [range slider](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/range) as a form-connected web-component.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,31 @@ import { SliderStyles as styles } from "./slider.styles";
styles,
})
export class FASTSlider extends Slider {}
+```
+
+## Usage
+
+```html
+
+
+ 0
+
+
+ 10
+
+
+ 90
+
+
+ 100
+
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md
index 6b05149f9fe..2eb7afb1e8f 100644
--- a/packages/web-components/fast-foundation/src/switch/README.md
+++ b/packages/web-components/fast-foundation/src/switch/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-switch
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/switch/README.md
---
+An implementation of a [switch](https://w3c.github.io/aria/#switch) as a form-connected web-component.
+
## Applying Custom Styles
```ts
@@ -18,4 +20,14 @@ import { SwitchStyles as styles } from "./switch.styles";
styles,
})
export class FASTSwitch extends Switch {}
+```
+
+## Usage
+
+```html
+
+ Theme
+ Dark
+ Light
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
index 6f22a26c529..812de0667aa 100644
--- a/packages/web-components/fast-foundation/src/tabs/README.md
+++ b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -49,4 +49,33 @@ import { TabPanelStyles as styles } from "./tab-panel.styles";
styles,
})
export class FASTTabPanel extends TabPanel {}
+```
+
+## Usage
+
+```html
+
+ Appetizers
+ Entrees
+ Desserts
+
+ Stuffed artichokes
+ Bruschetta
+ Oven-baked polenta
+ Salami and Fig Crostini with Ricotta
+ Rosemary-Potato Focaccia with Goat Cheese
+
+
+ Mushroom-Sausage Ragù
+ Tomato Bread Soup with Steamed Mussels
+ Grilled Fish with Artichoke Caponata
+ Celery Root and Mushroom Lasagna
+ Osso Buco with Citrus Gremolata
+
+
+ Tiramisu
+ Spumoni
+ Limoncello and Ice Cream with Biscotti
+
+
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md
index 8b855315dc3..efbaab91d1f 100644
--- a/packages/web-components/fast-foundation/src/text-area/README.md
+++ b/packages/web-components/fast-foundation/src/text-area/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-text-area
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/text-area/README.md
---
+An implementation of an [HTML textarea element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) as a form-connected web-component. The `fast-text-area` supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.
+
## Applying Custom Styles
```ts
@@ -21,4 +23,10 @@ import { TextAreaStyles as styles } from "./text-area.styles";
},
})
export class FASTTextArea extends TextArea {}
+```
+
+## Usage
+
+```html
+How was your stay?
```
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md
index b3385bd0f05..facf5cbc4d1 100644
--- a/packages/web-components/fast-foundation/src/text-field/README.md
+++ b/packages/web-components/fast-foundation/src/text-field/README.md
@@ -5,6 +5,8 @@ sidebar_label: fast-text-field
custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/text-field/README.md
---
+An implementation of a [text field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/text) as a form-connected web-component. The `fast-text-field` supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.
+
## Applying Custom Styles
```ts
@@ -21,4 +23,10 @@ import { TextFieldStyles as styles } from "./text-field.styles";
},
})
export class FASTTextField extends TextField {}
+```
+
+## Usage
+
+```html
+Email
```
\ No newline at end of file