microsoft · hawkticehurst · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021
diff --git a/docs/api-report.md b/docs/api-report.md
@@ -7,11 +7,8 @@
 import { Anchor } from '@microsoft/fast-foundation';
 import { Badge } from '@microsoft/fast-foundation';
 import { BaseProgress } from '@microsoft/fast-foundation';
-import { Breadcrumb } from '@microsoft/fast-foundation';
-import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { Button } from '@microsoft/fast-foundation';
 import { Checkbox } from '@microsoft/fast-foundation';
-import { Combobox } from '@microsoft/fast-foundation';
 import { DataGrid } from '@microsoft/fast-foundation';
 import { DataGridCell } from '@microsoft/fast-foundation';
 import { DataGridRow } from '@microsoft/fast-foundation';
@@ -27,27 +24,15 @@ import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea } from '@microsoft/fast-foundation';
 import { TextField } from '@microsoft/fast-foundation';
 
-// @public
-export type BadgeAppearance = 'primary' | 'secondary';
-
 // @public
 export type ButtonAppearance = 'primary' | 'secondary' | 'icon';
 
 // @public
 export class VSCodeBadge extends Badge {
-    appearance: BadgeAppearance;
     // @internal
     connectedCallback(): void;
 }
 
-// @public
-export class VSCodeBreadcrumb extends Breadcrumb {
-}
-
-// @public
-export class VSCodeBreadcrumbItem extends BreadcrumbItem {
-}
-
 // @public
 export class VSCodeButton extends Button {
     appearance: ButtonAppearance;
@@ -59,10 +44,6 @@ export class VSCodeButton extends Button {
 export class VSCodeCheckbox extends Checkbox {
 }
 
-// @public
-export class VSCodeCombobox extends Combobox {
-}
-
 // @public
 export class VSCodeDataGrid extends DataGrid {
 }
@@ -109,12 +90,6 @@ export class VSCodePanelTab extends Tab {
 export class VSCodePanelView extends TabPanel {
 }
 
-// @public
-export class VSCodeProgressBar extends BaseProgress {
-    // @internal
-    connectedCallback(): void;
-}
-
 // @public
 export class VSCodeProgressRing extends BaseProgress {
     // @internal

diff --git a/docs/components.md b/docs/components.md
@@ -2,25 +2,21 @@
 
 Here you can find a list of all the components currently available in the toolkit with links to documentation for each component.
 
-| Component         | Doc Link                                                          |
-| ----------------- | ----------------------------------------------------------------- |
-| `badge`           | [Badge Documentation](../src/badge/README.md)                     |
-| `breadcrumb`      | [Breadcrumb Documentation](../src/breadcrumb/README.md)           |
-| `breadcrumb-item` | [Breadcrumb Item Documentation](../src/breadcrumb-item/README.md) |
-| `button`          | [Button Documentation](../src/button/README.md)                   |
-| `checkbox`        | [Checkbox Documentation](../src/checkbox/README.md)               |
-| `combobox`        | [Combobox Documentation](../src/combobox/README.md)               |
-| `data-grid`       | [Data Grid Documentation](../src/data-grid/README.md)             |
-| `divider`         | [Divider Documentation](../src/divider/README.md)                 |
-| `dropdown`        | [Dropdown Documentation](../src/dropdown/README.md)               |
-| `link`            | [Link Documentation](../src/link/README.md)                       |
-| `number-field`    | [Number Field Documentation](../src/number-field/README.md)       |
-| `option`          | [Option Documentation](../src/option/README.md)                   |
-| `panels`          | [Panels Documentation](../src/panels/README.md)                   |
-| `progress-bar`    | [Progress Bar Documentation](../src/progress-bar/README.md)       |
-| `progress-ring`   | [Progress Ring Documentation](../src/progress-ring/README.md)     |
-| `radio`           | [Radio Documentation](../src/radio/README.md)                     |
-| `radio-group`     | [Radio Group Documentation](../src/radio-group/README.md)         |
-| `tag`             | [Tag Documentation](../src/tag/README.md)                         |
-| `text-area`       | [Text Area Documentation](../src/text-area/README.md)             |
-| `text-field`      | [Text Field Documentation](../src/text-field/README.md)           |
+| Component       | Doc Link                                                      |
+| --------------- | ------------------------------------------------------------- |
+| `badge`         | [Badge Documentation](../src/badge/README.md)                 |
+| `button`        | [Button Documentation](../src/button/README.md)               |
+| `checkbox`      | [Checkbox Documentation](../src/checkbox/README.md)           |
+| `data-grid`     | [Data Grid Documentation](../src/data-grid/README.md)         |
+| `divider`       | [Divider Documentation](../src/divider/README.md)             |
+| `dropdown`      | [Dropdown Documentation](../src/dropdown/README.md)           |
+| `link`          | [Link Documentation](../src/link/README.md)                   |
+| `number-field`  | [Number Field Documentation](../src/number-field/README.md)   |
+| `option`        | [Option Documentation](../src/option/README.md)               |
+| `panels`        | [Panels Documentation](../src/panels/README.md)               |
+| `progress-ring` | [Progress Ring Documentation](../src/progress-ring/README.md) |
+| `radio`         | [Radio Documentation](../src/radio/README.md)                 |
+| `radio-group`   | [Radio Group Documentation](../src/radio-group/README.md)     |
+| `tag`           | [Tag Documentation](../src/tag/README.md)                     |
+| `text-area`     | [Text Area Documentation](../src/text-area/README.md)         |
+| `text-field`    | [Text Field Documentation](../src/text-field/README.md)       |
diff --git a/src/badge/README.md b/src/badge/README.md
@@ -4,9 +4,7 @@ The `vscode-badge` component is used to highlight an item, attract attention, an
 
 ## Attributes
 
-| Attribute    | Type   | Description                                                                    |
-| ------------ | ------ | ------------------------------------------------------------------------------ |
-| `appearance` | string | Determines the visual appearance of the badge. Options: `primary`, `secondary` |
+None
 
 ## Usage
 
@@ -21,14 +19,3 @@ If a component that labels an item with a string is desired, see the `vscode-tag
 ```html
 <vscode-badge>1</vscode-badge>
 ```
-
-### Appearance Attribute
-
-There are a number of visual appearances that the `vscode-badge` can have. The default appearance is `primary`.
-
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--secondary)
-
-```html
-<vscode-badge appearance="primary">1</vscode-badge>
-<vscode-badge appearance="secondary">1</vscode-badge>
-```
diff --git a/src/badge/badge.stories.ts b/src/badge/badge.stories.ts
@@ -7,12 +7,6 @@ export default {
 	title: 'Library/Badge',
 	argTypes: {
 		label: {control: 'number'},
-		appearance: {
-			control: {
-				type: 'select',
-				options: ['Primary', 'Secondary'],
-			},
-		},
 	},
 	parameters: {
 		actions: {
@@ -28,7 +22,6 @@ const Template = ({...args}: BadgeArgs) => {
 export const Default: any = Template.bind({});
 Default.args = {
 	label: '1',
-	appearance: 'Primary',
 };
 Default.parameters = {
 	docs: {
@@ -37,16 +30,3 @@ Default.parameters = {
 		},
 	},
 };
-
-export const Secondary: any = Template.bind({});
-Secondary.args = {
-	...Default.args,
-	appearance: 'Secondary',
-};
-Secondary.parameters = {
-	docs: {
-		source: {
-			code: `<vscode-badge appearance="secondary">1</vscode-badge>`,
-		},
-	},
-};
diff --git a/src/badge/badge.styles.ts b/src/badge/badge.styles.ts
@@ -4,17 +4,15 @@
 import {css} from '@microsoft/fast-element';
 import {display} from '@microsoft/fast-foundation';
 import {
-	badgePrimaryBackground,
-	badgePrimaryForeground,
-	badgeSecondaryBackground,
-	badgeSecondaryForeground,
+	badgeBackground,
+	badgeForeground,
 	designUnit,
 	fontFamily,
 	typeRampMinus1FontSize,
 	typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-const BaseBadgeStyles = css`
+export const BadgeStyles = css`
 	${display('inline-block')} :host {
 		box-sizing: border-box;
 		font-family: ${fontFamily};
@@ -23,34 +21,14 @@ const BaseBadgeStyles = css`
 	}
 	.control {
 		align-items: center;
-		background-color: ${badgePrimaryBackground};
+		background-color: ${badgeBackground};
 		border-radius: 100px;
 		box-sizing: border-box;
-		color: ${badgePrimaryForeground};
+		color: ${badgeForeground};
 		display: flex;
 		height: calc(${designUnit} * 4px);
 		justify-content: center;
 		min-width: calc(${designUnit} * 4px);
 		padding: 0 calc(${designUnit} * 1px);
 	}
 `;
-
-const PrimaryBadgeStyles = css`
-	:host([appearance='primary']) .control {
-		background: ${badgePrimaryBackground};
-		color: ${badgePrimaryForeground};
-	}
-`;
-
-const SecondaryBadgeStyles = css`
-	:host([appearance='secondary']) .control {
-		background: ${badgeSecondaryBackground};
-		color: ${badgeSecondaryForeground};
-	}
-`;
-
-export const BadgeStyles = css`
-	${BaseBadgeStyles}
-	${PrimaryBadgeStyles}
-	${SecondaryBadgeStyles}
-`;
diff --git a/src/badge/fixtures/createBadge.ts b/src/badge/fixtures/createBadge.ts
@@ -1,22 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {BadgeAppearance, VSCodeBadge} from '../index';
+import {VSCodeBadge} from '../index';
 
 export type BadgeArgs = {
 	label: string;
-	appearance?: BadgeAppearance;
 };
 
-export function createBadge({label, appearance}: BadgeArgs) {
+export function createBadge({label}: BadgeArgs) {
 	const badge = new VSCodeBadge();
 
 	if (label) {
 		badge.textContent = label;
 	}
-	if (appearance) {
-		badge.setAttribute('appearance', appearance.toLowerCase());
-	}
 
 	return badge;
 }
diff --git a/src/badge/index.ts b/src/badge/index.ts
@@ -1,16 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {attr, customElement} from '@microsoft/fast-element';
+import {customElement} from '@microsoft/fast-element';
 import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation';
 import {BadgeStyles as styles} from './badge.styles';
 
-/**
- * Types of badge appearance.
- * @public
- */
-export type BadgeAppearance = 'primary' | 'secondary';
-
 /**
  * The VS Code Badge element. Extends
  * {@link https://www.fast.design/docs/api/fast-foundation.badge/ | Badge} and
@@ -27,16 +21,6 @@ export type BadgeAppearance = 'primary' | 'secondary';
 	styles,
 })
 export class VSCodeBadge extends Badge {
-	/**
-	 * The appearance the badge should have.
-	 *
-	 * @remarks
-	 * HTML Attribute: appearance
-	 *
-	 * @public
-	 */
-	@attr public appearance: BadgeAppearance;
-
 	/**
 	 * Component lifecycle method that runs when the element is inserted
 	 * into the DOM.
@@ -45,9 +29,6 @@ export class VSCodeBadge extends Badge {
 	 */
 	public connectedCallback() {
 		super.connectedCallback();
-		if (!this.appearance) {
-			this.appearance = 'primary';
-		}
 
 		// This will override any usage of the circular attribute
 		// provided by the FAST Foundation Badge component so that

diff --git a/src/breadcrumb-item/README.md b/src/breadcrumb-item/README.md