From 7f9af9e7d13c4aadc6a8b6a1f48d46c7bd64c745 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 10:45:00 -0800
Subject: [PATCH 01/21] radio init

---
 .../web-components/src/radio-group/define.ts  |   4 +
 .../web-components/src/radio-group/index.ts   |   4 +
 .../src/radio-group/radio-group.definition.ts |  18 +++
 .../src/radio-group/radio-group.styles.ts     |  31 +++++
 .../src/radio-group/radio-group.template.ts   |   5 +
 .../src/radio-group/radio-group.ts            |   8 ++
 packages/web-components/src/radio/define.ts   |   4 +
 packages/web-components/src/radio/index.ts    |   5 +
 .../src/radio/radio.definition.ts             |  18 +++
 .../web-components/src/radio/radio.stories.ts |  24 ++++
 .../web-components/src/radio/radio.styles.ts  | 118 ++++++++++++++++++
 .../src/radio/radio.template.ts               |   7 ++
 packages/web-components/src/radio/radio.ts    |   8 ++
 13 files changed, 254 insertions(+)
 create mode 100644 packages/web-components/src/radio-group/define.ts
 create mode 100644 packages/web-components/src/radio-group/index.ts
 create mode 100644 packages/web-components/src/radio-group/radio-group.definition.ts
 create mode 100644 packages/web-components/src/radio-group/radio-group.styles.ts
 create mode 100644 packages/web-components/src/radio-group/radio-group.template.ts
 create mode 100644 packages/web-components/src/radio-group/radio-group.ts
 create mode 100644 packages/web-components/src/radio/define.ts
 create mode 100644 packages/web-components/src/radio/index.ts
 create mode 100644 packages/web-components/src/radio/radio.definition.ts
 create mode 100644 packages/web-components/src/radio/radio.stories.ts
 create mode 100644 packages/web-components/src/radio/radio.styles.ts
 create mode 100644 packages/web-components/src/radio/radio.template.ts
 create mode 100644 packages/web-components/src/radio/radio.ts

diff --git a/packages/web-components/src/radio-group/define.ts b/packages/web-components/src/radio-group/define.ts
new file mode 100644
index 0000000000000..2da64783f8341
--- /dev/null
+++ b/packages/web-components/src/radio-group/define.ts
@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './radio-group.definition.js';
+
+definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
new file mode 100644
index 0000000000000..967f498a393fb
--- /dev/null
+++ b/packages/web-components/src/radio-group/index.ts
@@ -0,0 +1,4 @@
+export * from './radio-group.js';
+export { definition as RadioGroupDefinition } from './radio-group.definition.js';
+export { styles as RadioGroupStyles } from './radio-group.styles.js';
+export { template as RadioGroupTemplate } from './radio-group.template.js';
diff --git a/packages/web-components/src/radio-group/radio-group.definition.ts b/packages/web-components/src/radio-group/radio-group.definition.ts
new file mode 100644
index 0000000000000..0e3f17541c84b
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.definition.ts
@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { RadioGroup } from './radio-group.js';
+import { styles } from './radio-group.styles.js';
+import { template } from './radio-group.template.js';
+
+/**
+ * The Fluent RadioGroup Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio-group\>
+ */
+export const definition = RadioGroup.compose({
+  name: `${FluentDesignSystem.prefix}-radio-group`,
+  template,
+  styles,
+});
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
new file mode 100644
index 0000000000000..d15d9061179e6
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {} from '../theme/design-tokens.js';
+
+/** Radio styles
+ * @public
+ */
+export const styles = css`
+  :host([hidden]) {
+    display: none;
+  }
+  :host {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    margin: 2px 0;
+  }
+  .positioning-region {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  :host([orientation='vertical']) .positioning-region {
+    flex-direction: column;
+  }
+  :host([orientation='horizontal']) .positioning-region {
+    flex-direction: row;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+`;
diff --git a/packages/web-components/src/radio-group/radio-group.template.ts b/packages/web-components/src/radio-group/radio-group.template.ts
new file mode 100644
index 0000000000000..d13afcb79a5c0
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.template.ts
@@ -0,0 +1,5 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { radioGroupTemplate } from '@microsoft/fast-foundation';
+import type { Radio } from './radio-group.js';
+
+export const template: ElementViewTemplate<Radio> = radioGroupTemplate();
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
new file mode 100644
index 0000000000000..d21a5ad81f0e6
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -0,0 +1,8 @@
+import { attr } from '@microsoft/fast-element';
+import { FASTRadioGroup } from '@microsoft/fast-foundation';
+
+/**
+ * The base class used for constructing a fluent-radio-group custom element
+ * @public
+ */
+export class RadioGroup extends FASTRadioGroup {}
diff --git a/packages/web-components/src/radio/define.ts b/packages/web-components/src/radio/define.ts
new file mode 100644
index 0000000000000..66ca2a55ac25b
--- /dev/null
+++ b/packages/web-components/src/radio/define.ts
@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './radio.definition.js';
+
+definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
new file mode 100644
index 0000000000000..dc9ccc345f688
--- /dev/null
+++ b/packages/web-components/src/radio/index.ts
@@ -0,0 +1,5 @@
+export * from './radio.js';
+export * from './radio.options.js';
+export { definition as RadioDefinition } from './radio.definition.js';
+export { styles as RadioStyles } from './radio.styles.js';
+export { template as RadioTemplate } from './radio.template.js';
diff --git a/packages/web-components/src/radio/radio.definition.ts b/packages/web-components/src/radio/radio.definition.ts
new file mode 100644
index 0000000000000..479c8c1bb37c0
--- /dev/null
+++ b/packages/web-components/src/radio/radio.definition.ts
@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Radio } from './radio.js';
+import { styles } from './radio.styles.js';
+import { template } from './radio.template.js';
+
+/**
+ * The Fluent Radio Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio\>
+ */
+export const definition = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
+  template,
+  styles,
+});
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
new file mode 100644
index 0000000000000..7a12c218197ce
--- /dev/null
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -0,0 +1,24 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import type { Radio as FluentRadio } from './radio.js';
+import './define.js';
+import '../radio-group/define.js';
+
+type RadioStoryArgs = Args & FluentRadio;
+type RadioStoryMeta = Meta<RadioStoryArgs>;
+
+const storyTemplate = html<RadioStoryArgs>`
+  <fluent-radio-group role="radiogroup" name="radio-story">
+    <fluent-radio value="option1">Label</fluent-radio>
+    <fluent-radio value="option2">Label 2</fluent-radio>
+  </fluent-radio-group>
+`;
+
+export default {
+  title: 'Components/Radio',
+  args: {},
+  argTypes: {},
+} as RadioStoryMeta;
+
+export const Radio = renderComponent(storyTemplate).bind({});
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
new file mode 100644
index 0000000000000..750fae32d4f4d
--- /dev/null
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -0,0 +1,118 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+  colorNeutralForeground3,
+  colorNeutralStrokeAccessible,
+  fontFamilyBase,
+  fontSizeBase300,
+  fontWeightRegular,
+  lineHeightBase300,
+  spacingHorizontalS,
+  spacingHorizontalXS,
+  spacingVerticalS,
+} from '../theme/design-tokens.js';
+
+/** Radio styles
+ * @public
+ */
+export const styles = css`
+  ${display('inline-flex')}
+
+  :host {
+    align-items: center;
+    flex-direction: row;
+    margin: 4px;
+    outline: none;
+    position: relative;
+    user-select: none;
+  }
+  .label {
+    color: ${colorNeutralForeground3};
+    cursor: pointer;
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+  }
+  .label__hidden {
+    display: none;
+    visibility: hidden;
+  }
+  .control,
+  .checked-indicator {
+    flex-shrink: 0;
+  }
+  .control {
+    position: relative;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    top: 0;
+    left: 0;
+  }
+  .checked-indicator {
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #ccc;
+  }
+  :host(:not([disabled])) .control:hover {
+    background: darkblue;
+    border-color: lightblue;
+  }
+  :host(:not([disabled])) .control:active {
+    background: gray;
+    border-color: darkgray;
+  }
+  :host(:focus-visible) .control {
+    box-shadow: 0 0 0 2px green, 0 0 0 4px green;
+  }
+  :host([aria-checked='true']) .control {
+    background: purple;
+    border: 1px solid yellow;
+  }
+  :host([aria-checked='true']) .checked-indicator {
+    opacity: 1;
+  }
+  :host([aria-checked='true']:not([disabled])) .control:hover {
+    background: darkpurple;
+    border: 1px solid darkyellow;
+  }
+  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
+    background: green;
+    fill: lightgreen;
+  }
+  :host([aria-checked='true']:not([disabled])) .control:active {
+    background: orange;
+    border: 1px solid cyan;
+  }
+  :host([aria-checked='true']:not([disabled])) .control:active .checked-indicator {
+    background: magenta;
+    fill: pink;
+  }
+  :host([aria-checked='true']:focus-visible:not([disabled])) .control {
+    box-shadow: 0 0 0 2px red, 0 0 0 4px red;
+  }
+  :host([disabled]) .label,
+  :host([readonly]) .label,
+  :host([readonly]) .control,
+  :host([disabled]) .control {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  :host([aria-checked='true']) .checked-indicator {
+    display: block;
+  }
+`;
diff --git a/packages/web-components/src/radio/radio.template.ts b/packages/web-components/src/radio/radio.template.ts
new file mode 100644
index 0000000000000..ceb729eb8e442
--- /dev/null
+++ b/packages/web-components/src/radio/radio.template.ts
@@ -0,0 +1,7 @@
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
+import { radioTemplate } from '@microsoft/fast-foundation';
+import type { Radio } from './radio.js';
+
+export const template: ElementViewTemplate<Radio> = radioTemplate({
+  checkedIndicator: html` <div part="checked-indicator" class="checked-indicator"></div> `,
+});
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
new file mode 100644
index 0000000000000..de75e9633e6e1
--- /dev/null
+++ b/packages/web-components/src/radio/radio.ts
@@ -0,0 +1,8 @@
+import { attr } from '@microsoft/fast-element';
+import { FASTRadio } from '@microsoft/fast-foundation';
+
+/**
+ * The base class used for constructing a fluent-radio custom element
+ * @public
+ */
+export class Radio extends FASTRadio {}

From 70c55e0bbd66fb05df7d79b89fe13b13dcbebc37 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 12:34:59 -0800
Subject: [PATCH 02/21] styles radio

---
 packages/web-components/src/radio/index.ts        | 1 -
 packages/web-components/src/radio/radio.styles.ts | 8 ++++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index dc9ccc345f688..e1af0f69389a1 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -1,5 +1,4 @@
 export * from './radio.js';
-export * from './radio.options.js';
 export { definition as RadioDefinition } from './radio.definition.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 750fae32d4f4d..7f45a5d3136a4 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,8 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  colorNeutralForeground2,
   colorNeutralForeground3,
   colorNeutralStrokeAccessible,
+  colorNeutralStrokeAccessibleHover,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -35,6 +37,9 @@ export const styles = css`
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
   }
+  :host(:hover) .label {
+    color: ${colorNeutralForeground2};
+  }
   .label__hidden {
     display: none;
     visibility: hidden;
@@ -53,6 +58,9 @@ export const styles = css`
     top: 0;
     left: 0;
   }
+  :host(:hover) .control {
+    border-color: ${colorNeutralStrokeAccessibleHover};
+  }
   .checked-indicator {
     opacity: 0;
     position: absolute;

From a72d10fee8de396c3d2c841813ee494cd08a89d0 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 15:26:46 -0800
Subject: [PATCH 03/21] reverts branch

---
 .../web-components/src/radio-group/define.ts  |   4 -
 .../web-components/src/radio-group/index.ts   |   4 -
 .../src/radio-group/radio-group.definition.ts |  18 ---
 .../src/radio-group/radio-group.styles.ts     |  31 -----
 .../src/radio-group/radio-group.template.ts   |   5 -
 .../src/radio-group/radio-group.ts            |   8 --
 packages/web-components/src/radio/define.ts   |   4 -
 packages/web-components/src/radio/index.ts    |   4 -
 .../src/radio/radio.definition.ts             |  18 ---
 .../web-components/src/radio/radio.stories.ts |  24 ----
 .../web-components/src/radio/radio.styles.ts  | 126 ------------------
 .../src/radio/radio.template.ts               |   7 -
 packages/web-components/src/radio/radio.ts    |   8 --
 13 files changed, 261 deletions(-)
 delete mode 100644 packages/web-components/src/radio-group/define.ts
 delete mode 100644 packages/web-components/src/radio-group/index.ts
 delete mode 100644 packages/web-components/src/radio-group/radio-group.definition.ts
 delete mode 100644 packages/web-components/src/radio-group/radio-group.styles.ts
 delete mode 100644 packages/web-components/src/radio-group/radio-group.template.ts
 delete mode 100644 packages/web-components/src/radio-group/radio-group.ts
 delete mode 100644 packages/web-components/src/radio/define.ts
 delete mode 100644 packages/web-components/src/radio/index.ts
 delete mode 100644 packages/web-components/src/radio/radio.definition.ts
 delete mode 100644 packages/web-components/src/radio/radio.stories.ts
 delete mode 100644 packages/web-components/src/radio/radio.styles.ts
 delete mode 100644 packages/web-components/src/radio/radio.template.ts
 delete mode 100644 packages/web-components/src/radio/radio.ts

diff --git a/packages/web-components/src/radio-group/define.ts b/packages/web-components/src/radio-group/define.ts
deleted file mode 100644
index 2da64783f8341..0000000000000
--- a/packages/web-components/src/radio-group/define.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './radio-group.definition.js';
-
-definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
deleted file mode 100644
index 967f498a393fb..0000000000000
--- a/packages/web-components/src/radio-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './radio-group.js';
-export { definition as RadioGroupDefinition } from './radio-group.definition.js';
-export { styles as RadioGroupStyles } from './radio-group.styles.js';
-export { template as RadioGroupTemplate } from './radio-group.template.js';
diff --git a/packages/web-components/src/radio-group/radio-group.definition.ts b/packages/web-components/src/radio-group/radio-group.definition.ts
deleted file mode 100644
index 0e3f17541c84b..0000000000000
--- a/packages/web-components/src/radio-group/radio-group.definition.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { RadioGroup } from './radio-group.js';
-import { styles } from './radio-group.styles.js';
-import { template } from './radio-group.template.js';
-
-/**
- * The Fluent RadioGroup Element.
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
- */
-export const definition = RadioGroup.compose({
-  name: `${FluentDesignSystem.prefix}-radio-group`,
-  template,
-  styles,
-});
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
deleted file mode 100644
index d15d9061179e6..0000000000000
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import {} from '../theme/design-tokens.js';
-
-/** Radio styles
- * @public
- */
-export const styles = css`
-  :host([hidden]) {
-    display: none;
-  }
-  :host {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    margin: 2px 0;
-  }
-  .positioning-region {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  :host([orientation='vertical']) .positioning-region {
-    flex-direction: column;
-  }
-  :host([orientation='horizontal']) .positioning-region {
-    flex-direction: row;
-  }
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-`;
diff --git a/packages/web-components/src/radio-group/radio-group.template.ts b/packages/web-components/src/radio-group/radio-group.template.ts
deleted file mode 100644
index d13afcb79a5c0..0000000000000
--- a/packages/web-components/src/radio-group/radio-group.template.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { radioGroupTemplate } from '@microsoft/fast-foundation';
-import type { Radio } from './radio-group.js';
-
-export const template: ElementViewTemplate<Radio> = radioGroupTemplate();
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
deleted file mode 100644
index d21a5ad81f0e6..0000000000000
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTRadioGroup } from '@microsoft/fast-foundation';
-
-/**
- * The base class used for constructing a fluent-radio-group custom element
- * @public
- */
-export class RadioGroup extends FASTRadioGroup {}
diff --git a/packages/web-components/src/radio/define.ts b/packages/web-components/src/radio/define.ts
deleted file mode 100644
index 66ca2a55ac25b..0000000000000
--- a/packages/web-components/src/radio/define.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './radio.definition.js';
-
-definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
deleted file mode 100644
index e1af0f69389a1..0000000000000
--- a/packages/web-components/src/radio/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './radio.js';
-export { definition as RadioDefinition } from './radio.definition.js';
-export { styles as RadioStyles } from './radio.styles.js';
-export { template as RadioTemplate } from './radio.template.js';
diff --git a/packages/web-components/src/radio/radio.definition.ts b/packages/web-components/src/radio/radio.definition.ts
deleted file mode 100644
index 479c8c1bb37c0..0000000000000
--- a/packages/web-components/src/radio/radio.definition.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Radio } from './radio.js';
-import { styles } from './radio.styles.js';
-import { template } from './radio.template.js';
-
-/**
- * The Fluent Radio Element.
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio\>
- */
-export const definition = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
-  template,
-  styles,
-});
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
deleted file mode 100644
index 7a12c218197ce..0000000000000
--- a/packages/web-components/src/radio/radio.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
-import type { Radio as FluentRadio } from './radio.js';
-import './define.js';
-import '../radio-group/define.js';
-
-type RadioStoryArgs = Args & FluentRadio;
-type RadioStoryMeta = Meta<RadioStoryArgs>;
-
-const storyTemplate = html<RadioStoryArgs>`
-  <fluent-radio-group role="radiogroup" name="radio-story">
-    <fluent-radio value="option1">Label</fluent-radio>
-    <fluent-radio value="option2">Label 2</fluent-radio>
-  </fluent-radio-group>
-`;
-
-export default {
-  title: 'Components/Radio',
-  args: {},
-  argTypes: {},
-} as RadioStoryMeta;
-
-export const Radio = renderComponent(storyTemplate).bind({});
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
deleted file mode 100644
index 7f45a5d3136a4..0000000000000
--- a/packages/web-components/src/radio/radio.styles.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import {
-  colorNeutralForeground2,
-  colorNeutralForeground3,
-  colorNeutralStrokeAccessible,
-  colorNeutralStrokeAccessibleHover,
-  fontFamilyBase,
-  fontSizeBase300,
-  fontWeightRegular,
-  lineHeightBase300,
-  spacingHorizontalS,
-  spacingHorizontalXS,
-  spacingVerticalS,
-} from '../theme/design-tokens.js';
-
-/** Radio styles
- * @public
- */
-export const styles = css`
-  ${display('inline-flex')}
-
-  :host {
-    align-items: center;
-    flex-direction: row;
-    margin: 4px;
-    outline: none;
-    position: relative;
-    user-select: none;
-  }
-  .label {
-    color: ${colorNeutralForeground3};
-    cursor: pointer;
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
-  }
-  :host(:hover) .label {
-    color: ${colorNeutralForeground2};
-  }
-  .label__hidden {
-    display: none;
-    visibility: hidden;
-  }
-  .control,
-  .checked-indicator {
-    flex-shrink: 0;
-  }
-  .control {
-    position: relative;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 1px solid ${colorNeutralStrokeAccessible};
-    top: 0;
-    left: 0;
-  }
-  :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
-  }
-  .checked-indicator {
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: #ccc;
-  }
-  :host(:not([disabled])) .control:hover {
-    background: darkblue;
-    border-color: lightblue;
-  }
-  :host(:not([disabled])) .control:active {
-    background: gray;
-    border-color: darkgray;
-  }
-  :host(:focus-visible) .control {
-    box-shadow: 0 0 0 2px green, 0 0 0 4px green;
-  }
-  :host([aria-checked='true']) .control {
-    background: purple;
-    border: 1px solid yellow;
-  }
-  :host([aria-checked='true']) .checked-indicator {
-    opacity: 1;
-  }
-  :host([aria-checked='true']:not([disabled])) .control:hover {
-    background: darkpurple;
-    border: 1px solid darkyellow;
-  }
-  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
-    background: green;
-    fill: lightgreen;
-  }
-  :host([aria-checked='true']:not([disabled])) .control:active {
-    background: orange;
-    border: 1px solid cyan;
-  }
-  :host([aria-checked='true']:not([disabled])) .control:active .checked-indicator {
-    background: magenta;
-    fill: pink;
-  }
-  :host([aria-checked='true']:focus-visible:not([disabled])) .control {
-    box-shadow: 0 0 0 2px red, 0 0 0 4px red;
-  }
-  :host([disabled]) .label,
-  :host([readonly]) .label,
-  :host([readonly]) .control,
-  :host([disabled]) .control {
-    cursor: not-allowed;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  :host([aria-checked='true']) .checked-indicator {
-    display: block;
-  }
-`;
diff --git a/packages/web-components/src/radio/radio.template.ts b/packages/web-components/src/radio/radio.template.ts
deleted file mode 100644
index ceb729eb8e442..0000000000000
--- a/packages/web-components/src/radio/radio.template.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { radioTemplate } from '@microsoft/fast-foundation';
-import type { Radio } from './radio.js';
-
-export const template: ElementViewTemplate<Radio> = radioTemplate({
-  checkedIndicator: html` <div part="checked-indicator" class="checked-indicator"></div> `,
-});
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
deleted file mode 100644
index de75e9633e6e1..0000000000000
--- a/packages/web-components/src/radio/radio.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTRadio } from '@microsoft/fast-foundation';
-
-/**
- * The base class used for constructing a fluent-radio custom element
- * @public
- */
-export class Radio extends FASTRadio {}

From 2cf59cec2397391c19329246ba4bff40d47db385 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 20 Mar 2023 12:35:35 -0700
Subject: [PATCH 04/21] input spec init

---
 packages/web-components/src/input/README.md | 177 ++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 packages/web-components/src/input/README.md

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
new file mode 100644
index 0000000000000..1ae4c1b1765c1
--- /dev/null
+++ b/packages/web-components/src/input/README.md
@@ -0,0 +1,177 @@
+# Input
+
+> An implementation of an [input](https://w3c.github.io/html-reference/input.text.html) as a form-connected web-component.
+
+<br />
+
+## **Design Spec**
+
+[Link to Input Design Spec in Figma](https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2366-657&t=UNSOfCD3St9ffppx-0)
+
+<br />
+
+## **Engineering Spec**
+
+Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/components/fast-text-field) and is intended to be as close to the Fluent UI React 9 Input implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
+
+<br />
+
+## Class: `Input`
+
+<br />
+
+### **Component Name**
+
+`<fluent-input>`
+
+<br />
+
+### **Variables**
+
+| Name              | Description                     | Type                                                                                                             |
+| ----------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `InputSize`       | Size variations for input       | `{ small: "small", medium: "medium", large: "large" }`                                                           |
+| `InputAppearance` | Appearance variations for input | `{ outline: "outline", underline: "underline", filledLighter: "filled-lighter", filledDarker: "filled-darker" }` |
+| `TextFieldType`   | Input types                     | `{ email: "email", password: "password", tel: "tel", text: "text", url: "url" }`                                 |
+| `InputLayout`     | Layout variations for input     | `{ block: "block", inline: "inline"`                                                                             |
+
+<br />
+
+### **Fields**
+
+| Name          | Privacy | Type              | Default              | Description                                                                                                                         |
+| ------------- | ------- | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `appearance`  | public  | `InputAppearance` | `outline`            | Sets appearance of input.                                                                                                           |
+| `autofocus`   | public  | `boolean`         | `false`              | Indicates element should get focus after the page finishes loading..                                                                |
+| `disabled`    | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
+| `layout`      | public  | `InputLayout`     | `InputLayout.block`  | Sets layout display property on input                                                                                               |
+| `list`        | public  | `string`          |                      | Allows associating a `datalist` to an element by `id`                                                                               |
+| `maxlength`   | public  | `number`          |                      | The maximum number of characters a user can enter                                                                                   |
+| `minlength`   | public  | `number`          |                      | The minimum number of characters a user can enter                                                                                   |
+| `name`        | public  | `number`          |                      | The name of the control                                                                                                             |
+| `pattern`     | public  | `string`          |                      | A regular expression the input's contents must match in order to be valid                                                           |
+| `placeholder` | public  | `string`          |                      | An exemplar value to display in the input field whenever it is empty                                                                |
+| `readonly`    | public  | `boolean`         | `false`              | The text field should be submitted with the form but should not be editable                                                         |
+| `required`    | public  | `boolean`         | `false`              | Sets the field as required                                                                                                          |
+| `size`        | public  | `InputSize`       | `medium`             | Sets the size of the text input                                                                                                     |
+| `spellcheck`  | public  | `boolean`         | `false`              | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used |
+| `type`        | public  | `TextFieldType`   | `TextFieldType.text` | Sets the size of the text input                                                                                                     |
+| `value`       | public  | `string`          |                      | String value of the text field, can be an empty string                                                                              |
+
+<br />
+
+### **Events**
+
+| Name     | Type | Description                        | Inherited From |
+| -------- | ---- | ---------------------------------- | -------------- |
+| `change` |      | Fires a custom change event        |                |
+| `input`  |      | Fires a custom input changed event |                |
+
+<br />
+
+### **Attributes**
+
+| Name          | Field       |
+| ------------- | ----------- |
+| `appearance`  | appearance  |
+| `autofocus`   | autofocus   |
+| `disabled`    | disabled    |
+| `list`        | list        |
+| `maxlength`   | maxlength   |
+| `minlength`   | minlength   |
+| `name`        | name        |
+| `pattern`     | pattern     |
+| `placeholder` | placeholder |
+| `readonly `   | readonly    |
+| `required `   | required    |
+| `size`        | size        |
+| `spellcheck`  | spellcheck  |
+| `type`        | type        |
+| `value `      | value       |
+
+<br />
+
+### **Slots**
+
+| Name    | Description                                                             |
+| ------- | ----------------------------------------------------------------------- |
+| `start` | used to place content at the start of the input within the input border |
+| `end`   | used to place content at the end of the input within the input border   |
+|         | The default slot for accordion item content                             |
+
+<br />
+<hr />
+<br />
+
+## **Accessibility**
+
+[W3C Text Input Spec](https://w3c.github.io/html-reference/input.text.html)
+
+<br />
+
+### **WAI-ARIA Roles, States, and Properties**
+
+- `aria-atomic`
+  - In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
+- `aria-busy`
+  - Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+- `aria-controls`
+  - Identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
+- `aria-current`
+  - A non-null `aria-current` state on an element indicates that this element represents the current item within a container or set of related elements.
+- `aria-describedby`
+  - Identifies the element (or elements) that describes the element on which the attribute is set.
+- `aria-details`
+  - The global `aria-details` attribute identifies the element (or elements) that provide additional information related to the object.
+- `aria-disabled`
+  - Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+- `aria-errormessage`
+  - Identifies the element that provides an error message for that object.
+- `aria-flowto`
+  - Identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user's discretion.
+- `aria-haspopup`
+  - Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
+- `aria-hidden`
+  - Indicates whether the element is exposed to an accessibility API.
+- `aria-invalid`
+  - Indicates the entered value does not conform to the format expected by the application.
+- `aria-keyshortcuts`
+  - Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+- `aria-label`
+  - Defines a string value that labels an interactive element.
+- `aria-labelledby`
+  - Identifies the element (or elements) that labels the element it is applied to.
+- `aria-live`
+  - Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+- `aria-owns`
+  - Identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.
+- `aria-relevant`
+  - Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+- `aria-roledescription`
+  - Defines a human-readable, author-localized description for the role of an element.
+
+<br />
+<hr />
+<br />
+
+## **Preparation**
+
+<br />
+
+### **Fluent Web Component v3 v.s Fluent React 9**
+
+<br />
+
+**Component and Slot Mapping**
+
+| Fluent UI React 9 | Fluent Web Components 3 |
+| ----------------- | ----------------------- |
+| `<Input>`         | `<fluent-input>`        |
+| `contentBefore`   | `start`                 |
+| `contentAfter`    | `end`                   |
+
+<br />
+
+**Property Mapping**
+| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
+| ------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |

From 79b6bffb115a9b3f0c6fe2f207491ea508d6655e Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 20 Mar 2023 12:52:39 -0700
Subject: [PATCH 05/21] cleans up spec

---
 packages/web-components/src/input/README.md | 87 +++++++++++----------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
index 1ae4c1b1765c1..bd6e7aaac17c8 100644
--- a/packages/web-components/src/input/README.md
+++ b/packages/web-components/src/input/README.md
@@ -39,55 +39,58 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 
 ### **Fields**
 
-| Name          | Privacy | Type              | Default              | Description                                                                                                                         |
-| ------------- | ------- | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| `appearance`  | public  | `InputAppearance` | `outline`            | Sets appearance of input.                                                                                                           |
-| `autofocus`   | public  | `boolean`         | `false`              | Indicates element should get focus after the page finishes loading..                                                                |
-| `disabled`    | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
-| `layout`      | public  | `InputLayout`     | `InputLayout.block`  | Sets layout display property on input                                                                                               |
-| `list`        | public  | `string`          |                      | Allows associating a `datalist` to an element by `id`                                                                               |
-| `maxlength`   | public  | `number`          |                      | The maximum number of characters a user can enter                                                                                   |
-| `minlength`   | public  | `number`          |                      | The minimum number of characters a user can enter                                                                                   |
-| `name`        | public  | `number`          |                      | The name of the control                                                                                                             |
-| `pattern`     | public  | `string`          |                      | A regular expression the input's contents must match in order to be valid                                                           |
-| `placeholder` | public  | `string`          |                      | An exemplar value to display in the input field whenever it is empty                                                                |
-| `readonly`    | public  | `boolean`         | `false`              | The text field should be submitted with the form but should not be editable                                                         |
-| `required`    | public  | `boolean`         | `false`              | Sets the field as required                                                                                                          |
-| `size`        | public  | `InputSize`       | `medium`             | Sets the size of the text input                                                                                                     |
-| `spellcheck`  | public  | `boolean`         | `false`              | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used |
-| `type`        | public  | `TextFieldType`   | `TextFieldType.text` | Sets the size of the text input                                                                                                     |
-| `value`       | public  | `string`          |                      | String value of the text field, can be an empty string                                                                              |
-
-<br />
+| Name            | Privacy | Type              | Default              | Description                                                                                                                         |
+| --------------- | ------- | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `appearance`    | public  | `InputAppearance` | `outline`            | Sets appearance of input.                                                                                                           |
+| `autofocus`     | public  | `boolean`         | `false`              | Indicates element should get focus after the page finishes loading..                                                                |
+| `disabled`      | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
+| `labelPosition` | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
+| `layout`        | public  | `InputLayout`     | `InputLayout.block`  | Sets layout display property on input                                                                                               |
+| `list`          | public  | `string`          |                      | Allows associating a `datalist` to an element by `id`                                                                               |
+| `maxlength`     | public  | `number`          |                      | The maximum number of characters a user can enter                                                                                   |
+| `minlength`     | public  | `number`          |                      | The minimum number of characters a user can enter                                                                                   |
+| `name`          | public  | `number`          |                      | The name of the control                                                                                                             |
+| `pattern`       | public  | `string`          |                      | A regular expression the input's contents must match in order to be valid                                                           |
+| `placeholder`   | public  | `string`          |                      | An exemplar value to display in the input field whenever it is empty                                                                |
+| `readonly`      | public  | `boolean`         | `false`              | The text field should be submitted with the form but should not be editable                                                         |
+| `required`      | public  | `boolean`         | `false`              | Sets the field as required                                                                                                          |
+| `size`          | public  | `InputSize`       | `medium`             | Sets the size of the text input                                                                                                     |
+| `spellcheck`    | public  | `boolean`         | `false`              | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used |
+| `type`          | public  | `TextFieldType`   | `TextFieldType.text` | Sets the size of the text input                                                                                                     |
+
+<br />
+
+### **Methods**
+
+| Name       | Privacy | Description                                       |
+| ---------- | ------- | ------------------------------------------------- |
+| `select`   | public  | Selects all the text in the text field            |
+| `validate` | public  | {@inheritDoc (FormAssociated:interface).validate} |
 
 ### **Events**
 
-| Name     | Type | Description                        | Inherited From |
-| -------- | ---- | ---------------------------------- | -------------- |
-| `change` |      | Fires a custom change event        |                |
-| `input`  |      | Fires a custom input changed event |                |
+| Name     | Type | Description                 | Inherited From |
+| -------- | ---- | --------------------------- | -------------- |
+| `change` |      | Fires a custom change event |                |
 
 <br />
 
 ### **Attributes**
 
-| Name          | Field       |
-| ------------- | ----------- |
-| `appearance`  | appearance  |
-| `autofocus`   | autofocus   |
-| `disabled`    | disabled    |
-| `list`        | list        |
-| `maxlength`   | maxlength   |
-| `minlength`   | minlength   |
-| `name`        | name        |
-| `pattern`     | pattern     |
-| `placeholder` | placeholder |
-| `readonly `   | readonly    |
-| `required `   | required    |
-| `size`        | size        |
-| `spellcheck`  | spellcheck  |
-| `type`        | type        |
-| `value `      | value       |
+| Name             | Field          |
+| ---------------- | -------------- |
+| `appearance`     | appearance     |
+| `autofocus`      | autofocus      |
+| `label-position` | label-position |
+| `list`           | list           |
+| `maxlength`      | maxlength      |
+| `minlength`      | minlength      |
+| `pattern`        | pattern        |
+| `placeholder`    | placeholder    |
+| `readonly `      | readonly       |
+| `size`           | size           |
+| `spellcheck`     | spellcheck     |
+| `type`           | type           |
 
 <br />
 
@@ -156,8 +159,6 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 
 ## **Preparation**
 
-<br />
-
 ### **Fluent Web Component v3 v.s Fluent React 9**
 
 <br />

From 5558b9324da0bdc5ae9604c911e352382f5f3fc8 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 20 Mar 2023 12:55:29 -0700
Subject: [PATCH 06/21] formatting

---
 packages/web-components/src/input/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
index bd6e7aaac17c8..84a237905b910 100644
--- a/packages/web-components/src/input/README.md
+++ b/packages/web-components/src/input/README.md
@@ -175,4 +175,4 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 
 **Property Mapping**
 | Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
-| ------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| ----------------- | ----------------------- | ------------------------- |

From 3c045c3b13f0199bb16450044c0d48a4623b1746 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 20 Mar 2023 13:25:49 -0700
Subject: [PATCH 07/21] updates component name to text input

---
 packages/web-components/src/input/README.md | 115 ++++++--------------
 1 file changed, 36 insertions(+), 79 deletions(-)

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
index 84a237905b910..45cb8e0784083 100644
--- a/packages/web-components/src/input/README.md
+++ b/packages/web-components/src/input/README.md
@@ -1,62 +1,62 @@
-# Input
+# TextInput
 
-> An implementation of an [input](https://w3c.github.io/html-reference/input.text.html) as a form-connected web-component.
+> An implementation of a [text input](https://w3c.github.io/html-reference/input.text.html) as a form-connected web-component.
 
 <br />
 
 ## **Design Spec**
 
-[Link to Input Design Spec in Figma](https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2366-657&t=UNSOfCD3St9ffppx-0)
+[Link to Text Input Design Spec in Figma](https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2366-657&t=UNSOfCD3St9ffppx-0)
 
 <br />
 
 ## **Engineering Spec**
 
-Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/components/fast-text-field) and is intended to be as close to the Fluent UI React 9 Input implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
+Fluent WC3 Text Input extends from the [FAST Text Field](https://explore.fast.design/components/fast-text-field) and is intended to be as close to the Fluent UI React 9 Input implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
 
 <br />
 
-## Class: `Input`
+## Class: `TextInput`
 
 <br />
 
 ### **Component Name**
 
-`<fluent-input>`
+`<fluent-text-input>`
 
 <br />
 
 ### **Variables**
 
-| Name              | Description                     | Type                                                                                                             |
-| ----------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `InputSize`       | Size variations for input       | `{ small: "small", medium: "medium", large: "large" }`                                                           |
-| `InputAppearance` | Appearance variations for input | `{ outline: "outline", underline: "underline", filledLighter: "filled-lighter", filledDarker: "filled-darker" }` |
-| `TextFieldType`   | Input types                     | `{ email: "email", password: "password", tel: "tel", text: "text", url: "url" }`                                 |
-| `InputLayout`     | Layout variations for input     | `{ block: "block", inline: "inline"`                                                                             |
+| Name         | Description                          | Type                                                                                                             |
+| ------------ | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `size`       | Size variations for text input       | `{ small: "small", medium: "medium", large: "large" }`                                                           |
+| `appearance` | Appearance variations for text input | `{ outline: "outline", underline: "underline", filledLighter: "filled-lighter", filledDarker: "filled-darker" }` |
+| `type`       | Text input types                     | `{ email: "email", password: "password", tel: "tel", text: "text", url: "url" }`                                 |
+| `layout`     | Layout variations for text input     | `{ block: "block", inline: "inline"`                                                                             |
 
 <br />
 
 ### **Fields**
 
-| Name            | Privacy | Type              | Default              | Description                                                                                                                         |
-| --------------- | ------- | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| `appearance`    | public  | `InputAppearance` | `outline`            | Sets appearance of input.                                                                                                           |
-| `autofocus`     | public  | `boolean`         | `false`              | Indicates element should get focus after the page finishes loading..                                                                |
-| `disabled`      | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
-| `labelPosition` | public  | `boolean`         | `false`              | Disables input                                                                                                                      |
-| `layout`        | public  | `InputLayout`     | `InputLayout.block`  | Sets layout display property on input                                                                                               |
-| `list`          | public  | `string`          |                      | Allows associating a `datalist` to an element by `id`                                                                               |
-| `maxlength`     | public  | `number`          |                      | The maximum number of characters a user can enter                                                                                   |
-| `minlength`     | public  | `number`          |                      | The minimum number of characters a user can enter                                                                                   |
-| `name`          | public  | `number`          |                      | The name of the control                                                                                                             |
-| `pattern`       | public  | `string`          |                      | A regular expression the input's contents must match in order to be valid                                                           |
-| `placeholder`   | public  | `string`          |                      | An exemplar value to display in the input field whenever it is empty                                                                |
-| `readonly`      | public  | `boolean`         | `false`              | The text field should be submitted with the form but should not be editable                                                         |
-| `required`      | public  | `boolean`         | `false`              | Sets the field as required                                                                                                          |
-| `size`          | public  | `InputSize`       | `medium`             | Sets the size of the text input                                                                                                     |
-| `spellcheck`    | public  | `boolean`         | `false`              | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used |
-| `type`          | public  | `TextFieldType`   | `TextFieldType.text` | Sets the size of the text input                                                                                                     |
+| Name            | Privacy | Type              | Default                 | Description                                                                                                                        |
+| --------------- | ------- | ----------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `appearance`    | public  | `InputAppearance` | `outline`               | Sets appearance of text input.                                                                                                     |
+| `autofocus`     | public  | `boolean`         | `false`                 | Indicates element should get focus after the page finishes loading..                                                               |
+| `disabled`      | public  | `boolean`         | `false`                 | Disables text input                                                                                                                |
+| `labelPosition` | public  | `boolean`         | `false`                 | Disables text input                                                                                                                |
+| `layout`        | public  | `InputLayout`     | `TextInputLayout.block` | Sets layout display property on text input                                                                                         |
+| `list`          | public  | `string`          |                         | Allows associating a `datalist` to an element by `id`                                                                              |
+| `maxlength`     | public  | `number`          |                         | The maximum number of characters a user can enter                                                                                  |
+| `minlength`     | public  | `number`          |                         | The minimum number of characters a user can enter                                                                                  |
+| `name`          | public  | `number`          |                         | The name of the control                                                                                                            |
+| `pattern`       | public  | `string`          |                         | A regular expression the text input's contents must match in order to be valid                                                     |
+| `placeholder`   | public  | `string`          |                         | An exemplar value to display in the text input field whenever it is empty                                                          |
+| `readonly`      | public  | `boolean`         | `false`                 | The text input should be submitted with the form but should not be editable                                                        |
+| `required`      | public  | `boolean`         | `false`                 | Sets the text input as required                                                                                                    |
+| `size`          | public  | `InputSize`       | `medium`                | Sets the size of the text input                                                                                                    |
+| `spellcheck`    | public  | `boolean`         | `false`                 | Controls whether or not to enable spell checking for the text input, or if the default spell checking configuration should be used |
+| `type`          | public  | `TextInputType`   | `TextInputType.text`    | Sets the size of the text input                                                                                                    |
 
 <br />
 
@@ -96,11 +96,11 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 
 ### **Slots**
 
-| Name    | Description                                                             |
-| ------- | ----------------------------------------------------------------------- |
-| `start` | used to place content at the start of the input within the input border |
-| `end`   | used to place content at the end of the input within the input border   |
-|         | The default slot for accordion item content                             |
+| Name    | Description                                                                  |
+| ------- | ---------------------------------------------------------------------------- |
+| `start` | used to place content at the start of the text input within the input border |
+| `end`   | used to place content at the end of the text input within the input border   |
+|         | The default slot for text input content                                      |
 
 <br />
 <hr />
@@ -114,44 +114,7 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 
 ### **WAI-ARIA Roles, States, and Properties**
 
-- `aria-atomic`
-  - In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
-- `aria-busy`
-  - Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-- `aria-controls`
-  - Identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
-- `aria-current`
-  - A non-null `aria-current` state on an element indicates that this element represents the current item within a container or set of related elements.
-- `aria-describedby`
-  - Identifies the element (or elements) that describes the element on which the attribute is set.
-- `aria-details`
-  - The global `aria-details` attribute identifies the element (or elements) that provide additional information related to the object.
-- `aria-disabled`
-  - Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-- `aria-errormessage`
-  - Identifies the element that provides an error message for that object.
-- `aria-flowto`
-  - Identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user's discretion.
-- `aria-haspopup`
-  - Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
-- `aria-hidden`
-  - Indicates whether the element is exposed to an accessibility API.
-- `aria-invalid`
-  - Indicates the entered value does not conform to the format expected by the application.
-- `aria-keyshortcuts`
-  - Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
-- `aria-label`
-  - Defines a string value that labels an interactive element.
-- `aria-labelledby`
-  - Identifies the element (or elements) that labels the element it is applied to.
-- `aria-live`
-  - Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-- `aria-owns`
-  - Identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.
-- `aria-relevant`
-  - Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
-- `aria-roledescription`
-  - Defines a human-readable, author-localized description for the role of an element.
+This component supports ARIA attributes that inherit from the [ARIA Global States and Properties](https://www.w3.org/TR/wai-aria-1.2/#global_states).
 
 <br />
 <hr />
@@ -170,9 +133,3 @@ Fluent WC3 Input extends from the [FAST Text Field](https://explore.fast.design/
 | `<Input>`         | `<fluent-input>`        |
 | `contentBefore`   | `start`                 |
 | `contentAfter`    | `end`                   |
-
-<br />
-
-**Property Mapping**
-| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
-| ----------------- | ----------------------- | ------------------------- |

From 237096724298e6e09218b2f2e25caf2bebad0e2c Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 20 Mar 2023 13:39:31 -0700
Subject: [PATCH 08/21] updates component name in spec

---
 packages/web-components/src/input/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
index 45cb8e0784083..1461fca61850b 100644
--- a/packages/web-components/src/input/README.md
+++ b/packages/web-components/src/input/README.md
@@ -130,6 +130,6 @@ This component supports ARIA attributes that inherit from the [ARIA Global State
 
 | Fluent UI React 9 | Fluent Web Components 3 |
 | ----------------- | ----------------------- |
-| `<Input>`         | `<fluent-input>`        |
+| `<Input>`         | `<fluent-text-input>`   |
 | `contentBefore`   | `start`                 |
 | `contentAfter`    | `end`                   |

From dfe13114a080d43851833eb334c2523f5cdc6b51 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Wed, 2 Aug 2023 18:14:24 -0700
Subject: [PATCH 09/21] high contrast mode color fixes

---
 .../accordion-item/accordion-item.template.ts |  4 +-
 .../src/accordion/accordion.stories.ts        |  8 +--
 .../src/divider/divider.styles.ts             | 14 +++++
 .../src/progress-bar/progress-bar.styles.ts   | 20 +++++++
 .../src/slider/slider.styles.ts               | 19 +++++++
 .../src/switch/switch.styles.ts               | 55 +++++++++++++++++++
 packages/web-components/src/tab/tab.styles.ts |  6 ++
 .../src/toggle-button/toggle-button.styles.ts | 19 +++++++
 8 files changed, 139 insertions(+), 6 deletions(-)

diff --git a/packages/web-components/src/accordion-item/accordion-item.template.ts b/packages/web-components/src/accordion-item/accordion-item.template.ts
index af59509d7ff2d..512788c6d94b1 100644
--- a/packages/web-components/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.template.ts
@@ -12,7 +12,7 @@ const chevronRight20Filled = html.partial(`<svg
 >
   <path
     d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 
@@ -26,7 +26,7 @@ const chevronDown20Filled = html.partial(`<svg
 >
   <path
     d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 
diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts
index 38cdd5ceb2906..967c20fb50d2d 100644
--- a/packages/web-components/src/accordion/accordion.stories.ts
+++ b/packages/web-components/src/accordion/accordion.stories.ts
@@ -12,7 +12,7 @@ type AccordionStoryMeta = Meta<AccordionStoryArgs>;
 const add20Filled = html`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M10.5 2.75C10.5 2.33579 10.1642 2 9.75 2C9.33579 2 9 2.33579 9 2.75V9H2.75C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5H9V16.75C9 17.1642 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.1642 10.5 16.75V10.5H16.75C17.1642 10.5 17.5 10.1642 17.5 9.75C17.5 9.33579 17.1642 9 16.75 9H10.5V2.75Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 const subtract20Filled = html`<svg
@@ -22,7 +22,7 @@ const subtract20Filled = html`<svg
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="#212121" />
+  <rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="currentColor" />
 </svg>`;
 
 const eye20Regular = html`<svg
@@ -34,7 +34,7 @@ const eye20Regular = html`<svg
 >
   <path
     d="M3.25909 11.6021C3.94254 8.32689 6.79437 6 10 6C13.2057 6 16.0574 8.32688 16.7409 11.6021C16.7974 11.8725 17.0622 12.0459 17.3325 11.9895C17.6029 11.933 17.7763 11.6682 17.7199 11.3979C16.9425 7.67312 13.6934 5 10 5C6.3066 5 3.05742 7.67311 2.28017 11.3979C2.22377 11.6682 2.39718 11.933 2.6675 11.9895C2.93782 12.0459 3.20268 11.8725 3.25909 11.6021ZM10 8C8.067 8 6.5 9.567 6.5 11.5C6.5 13.433 8.067 15 10 15C11.933 15 13.5 13.433 13.5 11.5C13.5 9.567 11.933 8 10 8ZM7.5 11.5C7.5 10.1193 8.61929 9 10 9C11.3807 9 12.5 10.1193 12.5 11.5C12.5 12.8807 11.3807 14 10 14C8.61929 14 7.5 12.8807 7.5 11.5Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 const eyeOff20Regular = html`<svg
@@ -46,7 +46,7 @@ const eyeOff20Regular = html`<svg
 >
   <path
     d="M2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L5.6453 6.35239C3.97044 7.49179 2.7234 9.27384 2.28017 11.3979C2.22377 11.6682 2.39718 11.9331 2.6675 11.9895C2.93782 12.0459 3.20268 11.8725 3.25909 11.6021C3.6629 9.66699 4.82367 8.06291 6.36714 7.07422L7.95336 8.66045C7.07297 9.29611 6.5 10.3311 6.5 11.5C6.5 13.433 8.067 15 10 15C11.1689 15 12.2039 14.427 12.8396 13.5466L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1464L2.85355 2.14645ZM12.1194 12.8265C11.6773 13.5314 10.8934 14 10 14C8.61929 14 7.5 12.8807 7.5 11.5C7.5 10.6066 7.96863 9.82265 8.67348 9.38057L12.1194 12.8265ZM10.1235 8.00214L13.4979 11.3765C13.4342 9.54169 11.9583 8.06576 10.1235 8.00214ZM10 6C9.43016 6 8.87149 6.07353 8.33419 6.21285L7.53113 5.40979C8.31349 5.14331 9.14485 5 10 5C13.6934 5 16.9425 7.67312 17.7199 11.3979C17.7763 11.6682 17.6029 11.933 17.3325 11.9895C17.0622 12.0459 16.7974 11.8725 16.7409 11.6021C16.0574 8.32688 13.2057 6 10 6Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index f65b9d326334f..a4681207696be 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -125,4 +125,18 @@ export const styles = css`
   :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
+
+  @media (forced-colors: active) {
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
+    :host::after,
+    :host::before {
+      background: WindowText;
+      color: WindowText;
+    }
+  }
 `;
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index ef11790da2d58..4209aa7266dcf 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -165,4 +165,24 @@ export const styles = css`
       opacity: 1;
     }
   }
+
+  @media (forced-colors: active) {
+    .progress {
+      background-color: HighlightText;
+    }
+    .determinate {
+      background-color: Highlight;
+    }
+    :host([validation-state='success']) .determinate,
+    :host([validation-state='warning']) .determinate,
+    :host([validation-state='error']) .determinate,
+    :host([validation-state='success']) ..indeterminate-indicator-1,
+    :host([validation-state='success']) ..indeterminate-indicator-2,
+    :host([validation-state='warning']) .indeterminate-indicator-1,
+    :host([validation-state='warning']) .indeterminate-indicator-2,
+    :host([validation-state='error']) .indeterminate-indicator-1,
+    :host([validation-state='error']) .indeterminate-indicator-2 {
+      background-color: Highlight;
+    }
+  }
 `;
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 39017185dad5e..8e830d153165c 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -199,4 +199,23 @@ export const styles = css`
     width: 100%;
     bottom: 0;
   }
+
+  @media (forced-colors: active) {
+    .track:hover,
+    .track:active,
+    .track {
+      background: WindowText;
+    }
+    .thumb-cursor:hover,
+    .thumb-cursor:active,
+    .thumb-cursor {
+      background: ButtonText;
+    }
+
+    :host(:hover) .track-start,
+    .track-start:active,
+    .track-start {
+      background: Highlight;
+    }
+  }
 `;
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 4d7bee90954f4..9f716ff86848d 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -18,18 +18,22 @@ import {
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,
   colorNeutralStrokeDisabled,
+  colorStrokeFocus2,
   colorTransparentBackground,
+  colorTransparentStroke,
   curveEasyEase,
   durationNormal,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
   lineHeightBase300,
+  shadow4,
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingHorizontalXXS,
   spacingVerticalS,
   spacingVerticalXS,
+  strokeWidthThick,
 } from '../theme/design-tokens.js';
 
 export const styles = css`
@@ -142,4 +146,55 @@ export const styles = css`
   :host([aria-checked='true'][disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};
   }
+
+  :host(:focus-visible) {
+    border-color: ${colorTransparentStroke};
+    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  /* High contrast styles */
+  @media (forced-colors: active) {
+    .switch {
+      border-color: InactiveBorder;
+    }
+    :host(:hover) .switch {
+      border-color: InactiveBorder;
+    }
+    :host(:active) .switch {
+      border-color: ActiveBorder;
+    }
+    :host([aria-checked='true']) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :host([aria-checked='true']:hover) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :host([aria-checked='true']:active) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+
+    .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host(:hover) .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host(:active) .checked-indicator {
+      background-color: ActiveCaption;
+    }
+
+    :host([aria-checked='true']) .checked-indicator {
+      background-color: ButtonFace;
+    }
+    :host([aria-checked='true']:hover) .checked-indicator {
+      background-color: ButtonFace;
+    }
+    :host([aria-checked='true']:active) .checked-indicator {
+      background-color: ButtonFace;
+    }
+  }
 `;
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index e5fcaeae516b2..a8706455f24e2 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -108,4 +108,10 @@ export const styles = css`
     box-shadow: 0 0 0 3px ${colorStrokeFocus2};
     outline: 1px solid ${colorStrokeFocus1};
   }
+
+  @media (forced-colors: active) {
+    :host([aria-selected='true'])::after {
+      background-color: Highlight;
+    }
+  }
 `;
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index ff067f5fb99ba..303fce370ac56 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -105,4 +105,23 @@ export const styles = css`
   :host([aria-pressed='true'][appearance='transparent']:active) .control {
     color: ${colorNeutralForeground2BrandPressed};
   }
+
+  @media (forced-colors: active) {
+    :host([aria-pressed='true']) .control,
+    :host([aria-pressed='true'][appearance='primary']) .control,
+    :host([aria-pressed='true'][appearance='subtle']) .control,
+    :host([aria-pressed='true'][appearance='outline']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control {
+      border-color: Highlight;
+    }
+    :host([aria-pressed='false']) .control,
+    :host([aria-pressed='false'][appearance='primary']) .control,
+    :host([aria-pressed='false'][appearance='subtle']) .control,
+    :host([aria-pressed='false'][appearance='outline']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control {
+      border-color: ActiveBorder;
+    }
+  }
 `;

From dd472a4c60887d2a1aa055280596803089b9d308 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Wed, 2 Aug 2023 18:28:31 -0700
Subject: [PATCH 10/21] removes file

---
 packages/web-components/src/input/README.md | 135 --------------------
 1 file changed, 135 deletions(-)
 delete mode 100644 packages/web-components/src/input/README.md

diff --git a/packages/web-components/src/input/README.md b/packages/web-components/src/input/README.md
deleted file mode 100644
index 1461fca61850b..0000000000000
--- a/packages/web-components/src/input/README.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# TextInput
-
-> An implementation of a [text input](https://w3c.github.io/html-reference/input.text.html) as a form-connected web-component.
-
-<br />
-
-## **Design Spec**
-
-[Link to Text Input Design Spec in Figma](https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2366-657&t=UNSOfCD3St9ffppx-0)
-
-<br />
-
-## **Engineering Spec**
-
-Fluent WC3 Text Input extends from the [FAST Text Field](https://explore.fast.design/components/fast-text-field) and is intended to be as close to the Fluent UI React 9 Input implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
-
-<br />
-
-## Class: `TextInput`
-
-<br />
-
-### **Component Name**
-
-`<fluent-text-input>`
-
-<br />
-
-### **Variables**
-
-| Name         | Description                          | Type                                                                                                             |
-| ------------ | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| `size`       | Size variations for text input       | `{ small: "small", medium: "medium", large: "large" }`                                                           |
-| `appearance` | Appearance variations for text input | `{ outline: "outline", underline: "underline", filledLighter: "filled-lighter", filledDarker: "filled-darker" }` |
-| `type`       | Text input types                     | `{ email: "email", password: "password", tel: "tel", text: "text", url: "url" }`                                 |
-| `layout`     | Layout variations for text input     | `{ block: "block", inline: "inline"`                                                                             |
-
-<br />
-
-### **Fields**
-
-| Name            | Privacy | Type              | Default                 | Description                                                                                                                        |
-| --------------- | ------- | ----------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `appearance`    | public  | `InputAppearance` | `outline`               | Sets appearance of text input.                                                                                                     |
-| `autofocus`     | public  | `boolean`         | `false`                 | Indicates element should get focus after the page finishes loading..                                                               |
-| `disabled`      | public  | `boolean`         | `false`                 | Disables text input                                                                                                                |
-| `labelPosition` | public  | `boolean`         | `false`                 | Disables text input                                                                                                                |
-| `layout`        | public  | `InputLayout`     | `TextInputLayout.block` | Sets layout display property on text input                                                                                         |
-| `list`          | public  | `string`          |                         | Allows associating a `datalist` to an element by `id`                                                                              |
-| `maxlength`     | public  | `number`          |                         | The maximum number of characters a user can enter                                                                                  |
-| `minlength`     | public  | `number`          |                         | The minimum number of characters a user can enter                                                                                  |
-| `name`          | public  | `number`          |                         | The name of the control                                                                                                            |
-| `pattern`       | public  | `string`          |                         | A regular expression the text input's contents must match in order to be valid                                                     |
-| `placeholder`   | public  | `string`          |                         | An exemplar value to display in the text input field whenever it is empty                                                          |
-| `readonly`      | public  | `boolean`         | `false`                 | The text input should be submitted with the form but should not be editable                                                        |
-| `required`      | public  | `boolean`         | `false`                 | Sets the text input as required                                                                                                    |
-| `size`          | public  | `InputSize`       | `medium`                | Sets the size of the text input                                                                                                    |
-| `spellcheck`    | public  | `boolean`         | `false`                 | Controls whether or not to enable spell checking for the text input, or if the default spell checking configuration should be used |
-| `type`          | public  | `TextInputType`   | `TextInputType.text`    | Sets the size of the text input                                                                                                    |
-
-<br />
-
-### **Methods**
-
-| Name       | Privacy | Description                                       |
-| ---------- | ------- | ------------------------------------------------- |
-| `select`   | public  | Selects all the text in the text field            |
-| `validate` | public  | {@inheritDoc (FormAssociated:interface).validate} |
-
-### **Events**
-
-| Name     | Type | Description                 | Inherited From |
-| -------- | ---- | --------------------------- | -------------- |
-| `change` |      | Fires a custom change event |                |
-
-<br />
-
-### **Attributes**
-
-| Name             | Field          |
-| ---------------- | -------------- |
-| `appearance`     | appearance     |
-| `autofocus`      | autofocus      |
-| `label-position` | label-position |
-| `list`           | list           |
-| `maxlength`      | maxlength      |
-| `minlength`      | minlength      |
-| `pattern`        | pattern        |
-| `placeholder`    | placeholder    |
-| `readonly `      | readonly       |
-| `size`           | size           |
-| `spellcheck`     | spellcheck     |
-| `type`           | type           |
-
-<br />
-
-### **Slots**
-
-| Name    | Description                                                                  |
-| ------- | ---------------------------------------------------------------------------- |
-| `start` | used to place content at the start of the text input within the input border |
-| `end`   | used to place content at the end of the text input within the input border   |
-|         | The default slot for text input content                                      |
-
-<br />
-<hr />
-<br />
-
-## **Accessibility**
-
-[W3C Text Input Spec](https://w3c.github.io/html-reference/input.text.html)
-
-<br />
-
-### **WAI-ARIA Roles, States, and Properties**
-
-This component supports ARIA attributes that inherit from the [ARIA Global States and Properties](https://www.w3.org/TR/wai-aria-1.2/#global_states).
-
-<br />
-<hr />
-<br />
-
-## **Preparation**
-
-### **Fluent Web Component v3 v.s Fluent React 9**
-
-<br />
-
-**Component and Slot Mapping**
-
-| Fluent UI React 9 | Fluent Web Components 3 |
-| ----------------- | ----------------------- |
-| `<Input>`         | `<fluent-text-input>`   |
-| `contentBefore`   | `start`                 |
-| `contentAfter`    | `end`                   |

From d1b6af59065fad66af9ea886eb59fcc5abc96eec Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Wed, 2 Aug 2023 19:08:01 -0700
Subject: [PATCH 11/21] yarn change

---
 ...eb-components-724db53b-8216-4544-99e5-0c2d440e4817.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json

diff --git a/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json b/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json
new file mode 100644
index 0000000000000..1bc15ea8476f4
--- /dev/null
+++ b/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "(accessibility): high contrast fixes",
+  "packageName": "@fluentui/web-components",
+  "email": "brian.christopher.brady@gmail.com",
+  "dependentChangeType": "patch"
+}

From 4af29570b3b1a186f074f17c5a7d0f07a940f684 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Thu, 3 Aug 2023 11:30:31 -0700
Subject: [PATCH 12/21] high contrast visual fixes

---
 .../web-components/src/button/button.styles.ts     |  7 +++++++
 packages/web-components/src/radio/radio.styles.ts  | 14 ++++++++++++++
 .../src/toggle-button/toggle-button.styles.ts      |  4 ++++
 3 files changed, 25 insertions(+)

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index cee6f0935ad93..71b0bcbd4bb6b 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -308,4 +308,11 @@ export const styles = css`
     color: ${colorNeutralForegroundDisabled};
     cursor: not-allowed;
   }
+
+  @media (forced-colors: active) {
+    :host(:hover) .control,
+    :host([appearance='transparent']:hover) .control {
+      border-color: Highlight;
+    }
+  }
 `;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index d80095a189410..72a14bf44cf15 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -127,4 +127,18 @@ export const styles = css`
   :host([disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};
   }
+  @media (forced-colors: active) {
+    :host([aria-checked='true']) .checked-indicator,
+    :host([aria-checked='true']:active) .checked-indicator,
+    :host([aria-checked='true']:hover) .checked-indicator {
+      background-color: Highlight;
+    }
+    :host .control {
+      border-color: InactiveBorder;
+    }
+    :host([aria-checked='false']:active) .control,
+    :host([aria-checked='false']:hover) .control {
+      border-color: ActiveBorder;
+    }
+  }
 `;
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index 303fce370ac56..d4f3d89a1842d 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -123,5 +123,9 @@ export const styles = css`
     :host([aria-pressed='false'][appearance='transparent']) .control {
       border-color: ActiveBorder;
     }
+
+    :host(:hover) .control {
+      border-color: Highlight;
+    }
   }
 `;

From 3d50372761cf39fb383d01d59a51e74b5c7f1ea9 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 13:26:04 -0700
Subject: [PATCH 13/21] high contrast a11y fixes: optimizes high contrast
 styles using forcedColorsStylesheetBehavior

---
 .../src/divider/divider.styles.ts             | 32 ++++---
 .../src/progress-bar/progress-bar.styles.ts   | 45 +++++-----
 .../src/slider/slider.styles.ts               | 43 ++++-----
 .../src/switch/switch.styles.ts               | 90 ++++++++++---------
 packages/web-components/src/tab/tab.styles.ts | 17 ++--
 .../src/toggle-button/toggle-button.styles.ts | 49 +++++-----
 6 files changed, 147 insertions(+), 129 deletions(-)

diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index a4681207696be..bd6fd74c787ea 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   colorBrandForeground1,
   colorBrandStroke1,
@@ -125,18 +125,22 @@ export const styles = css`
   :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* high contrast styles */
 
-  @media (forced-colors: active) {
-    :host([appearance='strong'])::before,
-    :host([appearance='strong'])::after,
-    :host([appearance='brand'])::before,
-    :host([appearance='brand'])::after,
-    :host([appearance='subtle'])::before,
-    :host([appearance='subtle'])::after,
-    :host::after,
-    :host::before {
-      background: WindowText;
-      color: WindowText;
+    @media (forced-colors: active) {
+      :host([appearance='strong'])::before,
+      :host([appearance='strong'])::after,
+      :host([appearance='brand'])::before,
+      :host([appearance='brand'])::after,
+      :host([appearance='subtle'])::before,
+      :host([appearance='subtle'])::after,
+      :host::after,
+      :host::before {
+        background: WindowText;
+        color: WindowText;
+      }
     }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index 4209aa7266dcf..50379c759e832 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusMedium,
   colorBrandBackground2,
@@ -165,24 +165,27 @@ export const styles = css`
       opacity: 1;
     }
   }
-
-  @media (forced-colors: active) {
-    .progress {
-      background-color: HighlightText;
-    }
-    .determinate {
-      background-color: Highlight;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* high contrast styles */
+    @media (forced-colors: active) {
+      .progress {
+        background-color: HighlightText;
+      }
+      .determinate {
+        background-color: Highlight;
+      }
+      :host([validation-state='success']) .determinate,
+      :host([validation-state='warning']) .determinate,
+      :host([validation-state='error']) .determinate,
+      :host([validation-state='success']) ..indeterminate-indicator-1,
+      :host([validation-state='success']) ..indeterminate-indicator-2,
+      :host([validation-state='warning']) .indeterminate-indicator-1,
+      :host([validation-state='warning']) .indeterminate-indicator-2,
+      :host([validation-state='error']) .indeterminate-indicator-1,
+      :host([validation-state='error']) .indeterminate-indicator-2 {
+        background-color: Highlight;
+      }
     }
-    :host([validation-state='success']) .determinate,
-    :host([validation-state='warning']) .determinate,
-    :host([validation-state='error']) .determinate,
-    :host([validation-state='success']) ..indeterminate-indicator-1,
-    :host([validation-state='success']) ..indeterminate-indicator-2,
-    :host([validation-state='warning']) .indeterminate-indicator-1,
-    :host([validation-state='warning']) .indeterminate-indicator-2,
-    :host([validation-state='error']) .indeterminate-indicator-1,
-    :host([validation-state='error']) .indeterminate-indicator-2 {
-      background-color: Highlight;
-    }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 8e830d153165c..1e6cef9a21c7c 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
@@ -199,23 +199,26 @@ export const styles = css`
     width: 100%;
     bottom: 0;
   }
-
-  @media (forced-colors: active) {
-    .track:hover,
-    .track:active,
-    .track {
-      background: WindowText;
-    }
-    .thumb-cursor:hover,
-    .thumb-cursor:active,
-    .thumb-cursor {
-      background: ButtonText;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* high contrast styles */
+    @media (forced-colors: active) {
+      .track:hover,
+      .track:active,
+      .track {
+        background: WindowText;
+      }
+      .thumb-cursor:hover,
+      .thumb-cursor:active,
+      .thumb-cursor {
+        background: ButtonText;
+      }
+
+      :host(:hover) .track-start,
+      .track-start:active,
+      .track-start {
+        background: Highlight;
+      }
     }
-
-    :host(:hover) .track-start,
-    .track-start:active,
-    .track-start {
-      background: Highlight;
-    }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 9f716ff86848d..050f7fc25867f 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   colorCompoundBrandBackground,
@@ -152,49 +152,51 @@ export const styles = css`
     outline: ${strokeWidthThick} solid ${colorTransparentStroke};
     box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
   }
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* High contrast styles */
+    @media (forced-colors: active) {
+      .switch {
+        border-color: InactiveBorder;
+      }
+      :host(:hover) .switch {
+        border-color: InactiveBorder;
+      }
+      :host(:active) .switch {
+        border-color: ActiveBorder;
+      }
+      :host([aria-checked='true']) .switch {
+        background: Highlight;
+        border-color: Highlight;
+      }
+      :host([aria-checked='true']:hover) .switch {
+        background: Highlight;
+        border-color: Highlight;
+      }
+      :host([aria-checked='true']:active) .switch {
+        background: Highlight;
+        border-color: Highlight;
+      }
 
-  /* High contrast styles */
-  @media (forced-colors: active) {
-    .switch {
-      border-color: InactiveBorder;
-    }
-    :host(:hover) .switch {
-      border-color: InactiveBorder;
-    }
-    :host(:active) .switch {
-      border-color: ActiveBorder;
-    }
-    :host([aria-checked='true']) .switch {
-      background: Highlight;
-      border-color: Highlight;
-    }
-    :host([aria-checked='true']:hover) .switch {
-      background: Highlight;
-      border-color: Highlight;
-    }
-    :host([aria-checked='true']:active) .switch {
-      background: Highlight;
-      border-color: Highlight;
-    }
+      .checked-indicator {
+        background-color: ActiveCaption;
+      }
+      :host(:hover) .checked-indicator {
+        background-color: ActiveCaption;
+      }
+      :host(:active) .checked-indicator {
+        background-color: ActiveCaption;
+      }
 
-    .checked-indicator {
-      background-color: ActiveCaption;
-    }
-    :host(:hover) .checked-indicator {
-      background-color: ActiveCaption;
+      :host([aria-checked='true']) .checked-indicator {
+        background-color: ButtonFace;
+      }
+      :host([aria-checked='true']:hover) .checked-indicator {
+        background-color: ButtonFace;
+      }
+      :host([aria-checked='true']:active) .checked-indicator {
+        background-color: ButtonFace;
+      }
     }
-    :host(:active) .checked-indicator {
-      background-color: ActiveCaption;
-    }
-
-    :host([aria-checked='true']) .checked-indicator {
-      background-color: ButtonFace;
-    }
-    :host([aria-checked='true']:hover) .checked-indicator {
-      background-color: ButtonFace;
-    }
-    :host([aria-checked='true']:active) .checked-indicator {
-      background-color: ButtonFace;
-    }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index a8706455f24e2..9dc482f5c247f 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
@@ -108,10 +108,13 @@ export const styles = css`
     box-shadow: 0 0 0 3px ${colorStrokeFocus2};
     outline: 1px solid ${colorStrokeFocus1};
   }
-
-  @media (forced-colors: active) {
-    :host([aria-selected='true'])::after {
-      background-color: Highlight;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* High contrast styles */
+    @media (forced-colors: active) {
+      :host([aria-selected='true'])::after {
+        background-color: Highlight;
+      }
     }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index d4f3d89a1842d..9228f1f3c99bb 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import {
   colorBrandBackgroundHover,
@@ -105,27 +106,29 @@ export const styles = css`
   :host([aria-pressed='true'][appearance='transparent']:active) .control {
     color: ${colorNeutralForeground2BrandPressed};
   }
-
-  @media (forced-colors: active) {
-    :host([aria-pressed='true']) .control,
-    :host([aria-pressed='true'][appearance='primary']) .control,
-    :host([aria-pressed='true'][appearance='subtle']) .control,
-    :host([aria-pressed='true'][appearance='outline']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control {
-      border-color: Highlight;
-    }
-    :host([aria-pressed='false']) .control,
-    :host([aria-pressed='false'][appearance='primary']) .control,
-    :host([aria-pressed='false'][appearance='subtle']) .control,
-    :host([aria-pressed='false'][appearance='outline']) .control,
-    :host([aria-pressed='false'][appearance='transparent']) .control,
-    :host([aria-pressed='false'][appearance='transparent']) .control {
-      border-color: ActiveBorder;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    /* High contrast styles */
+    @media (forced-colors: active) {
+      :host([aria-pressed='true']) .control,
+      :host([aria-pressed='true'][appearance='primary']) .control,
+      :host([aria-pressed='true'][appearance='subtle']) .control,
+      :host([aria-pressed='true'][appearance='outline']) .control,
+      :host([aria-pressed='true'][appearance='transparent']) .control,
+      :host([aria-pressed='true'][appearance='transparent']) .control {
+        border-color: Highlight;
+      }
+      :host([aria-pressed='false']) .control,
+      :host([aria-pressed='false'][appearance='primary']) .control,
+      :host([aria-pressed='false'][appearance='subtle']) .control,
+      :host([aria-pressed='false'][appearance='outline']) .control,
+      :host([aria-pressed='false'][appearance='transparent']) .control,
+      :host([aria-pressed='false'][appearance='transparent']) .control {
+        border-color: InactiveBorder;
+      }
+      :host(:hover) .control {
+        border-color: Highlight;
+      }
     }
-
-    :host(:hover) .control {
-      border-color: Highlight;
-    }
-  }
-`;
+  `),
+);

From 7bc38240e2678b05f89253f107d5adb9e16e9934 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 14:22:25 -0700
Subject: [PATCH 14/21] hc a11y: addresses feedback

---
 .../src/button/button.styles.ts               | 10 +--
 .../src/divider/divider.styles.ts             | 24 +++---
 .../src/progress-bar/progress-bar.styles.ts   | 35 ++++----
 .../web-components/src/radio/radio.styles.ts  |  9 ++-
 .../src/slider/slider.styles.ts               | 33 ++++----
 .../src/switch/switch.styles.ts               | 79 +++++++++----------
 packages/web-components/src/tab/tab.styles.ts |  7 +-
 .../src/toggle-button/toggle-button.styles.ts | 39 +++++----
 8 files changed, 109 insertions(+), 127 deletions(-)

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index 71b0bcbd4bb6b..4752e885d920c 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
@@ -308,11 +308,11 @@ export const styles = css`
     color: ${colorNeutralForegroundDisabled};
     cursor: not-allowed;
   }
-
-  @media (forced-colors: active) {
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
     :host(:hover) .control,
     :host([appearance='transparent']:hover) .control {
       border-color: Highlight;
     }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index bd6fd74c787ea..4c6a2c1c47722 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -127,20 +127,16 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* high contrast styles */
-
-    @media (forced-colors: active) {
-      :host([appearance='strong'])::before,
-      :host([appearance='strong'])::after,
-      :host([appearance='brand'])::before,
-      :host([appearance='brand'])::after,
-      :host([appearance='subtle'])::before,
-      :host([appearance='subtle'])::after,
-      :host::after,
-      :host::before {
-        background: WindowText;
-        color: WindowText;
-      }
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
+    :host::after,
+    :host::before {
+      background: WindowText;
+      color: WindowText;
     }
   `),
 );
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index 50379c759e832..48156f049a060 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -167,25 +167,22 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* high contrast styles */
-    @media (forced-colors: active) {
-      .progress {
-        background-color: HighlightText;
-      }
-      .determinate {
-        background-color: Highlight;
-      }
-      :host([validation-state='success']) .determinate,
-      :host([validation-state='warning']) .determinate,
-      :host([validation-state='error']) .determinate,
-      :host([validation-state='success']) ..indeterminate-indicator-1,
-      :host([validation-state='success']) ..indeterminate-indicator-2,
-      :host([validation-state='warning']) .indeterminate-indicator-1,
-      :host([validation-state='warning']) .indeterminate-indicator-2,
-      :host([validation-state='error']) .indeterminate-indicator-1,
-      :host([validation-state='error']) .indeterminate-indicator-2 {
-        background-color: Highlight;
-      }
+    .progress {
+      background-color: HighlightText;
+    }
+    .determinate {
+      background-color: Highlight;
+    }
+    :host([validation-state='success']) .determinate,
+    :host([validation-state='warning']) .determinate,
+    :host([validation-state='error']) .determinate,
+    :host([validation-state='success']) ..indeterminate-indicator-1,
+    :host([validation-state='success']) ..indeterminate-indicator-2,
+    :host([validation-state='warning']) .indeterminate-indicator-1,
+    :host([validation-state='warning']) .indeterminate-indicator-2,
+    :host([validation-state='error']) .indeterminate-indicator-1,
+    :host([validation-state='error']) .indeterminate-indicator-2 {
+      background-color: Highlight;
     }
   `),
 );
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 72a14bf44cf15..fedabe85d1b60 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusSmall,
@@ -127,7 +127,8 @@ export const styles = css`
   :host([disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};
   }
-  @media (forced-colors: active) {
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
     :host([aria-checked='true']) .checked-indicator,
     :host([aria-checked='true']:active) .checked-indicator,
     :host([aria-checked='true']:hover) .checked-indicator {
@@ -140,5 +141,5 @@ export const styles = css`
     :host([aria-checked='false']:hover) .control {
       border-color: ActiveBorder;
     }
-  }
-`;
+  `),
+);
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 1e6cef9a21c7c..e0e375c94c1fc 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -201,24 +201,21 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* high contrast styles */
-    @media (forced-colors: active) {
-      .track:hover,
-      .track:active,
-      .track {
-        background: WindowText;
-      }
-      .thumb-cursor:hover,
-      .thumb-cursor:active,
-      .thumb-cursor {
-        background: ButtonText;
-      }
-
-      :host(:hover) .track-start,
-      .track-start:active,
-      .track-start {
-        background: Highlight;
-      }
+    .track:hover,
+    .track:active,
+    .track {
+      background: WindowText;
+    }
+    .thumb-cursor:hover,
+    .thumb-cursor:active,
+    .thumb-cursor {
+      background: ButtonText;
+    }
+
+    :host(:hover) .track-start,
+    .track-start:active,
+    .track-start {
+      background: Highlight;
     }
   `),
 );
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 050f7fc25867f..dd2ef42ebb887 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -154,49 +154,46 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* High contrast styles */
-    @media (forced-colors: active) {
-      .switch {
-        border-color: InactiveBorder;
-      }
-      :host(:hover) .switch {
-        border-color: InactiveBorder;
-      }
-      :host(:active) .switch {
-        border-color: ActiveBorder;
-      }
-      :host([aria-checked='true']) .switch {
-        background: Highlight;
-        border-color: Highlight;
-      }
-      :host([aria-checked='true']:hover) .switch {
-        background: Highlight;
-        border-color: Highlight;
-      }
-      :host([aria-checked='true']:active) .switch {
-        background: Highlight;
-        border-color: Highlight;
-      }
+    .switch {
+      border-color: InactiveBorder;
+    }
+    :host(:hover) .switch {
+      border-color: InactiveBorder;
+    }
+    :host(:active) .switch {
+      border-color: ActiveBorder;
+    }
+    :host([aria-checked='true']) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :host([aria-checked='true']:hover) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :host([aria-checked='true']:active) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
 
-      .checked-indicator {
-        background-color: ActiveCaption;
-      }
-      :host(:hover) .checked-indicator {
-        background-color: ActiveCaption;
-      }
-      :host(:active) .checked-indicator {
-        background-color: ActiveCaption;
-      }
+    .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host(:hover) .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host(:active) .checked-indicator {
+      background-color: ActiveCaption;
+    }
 
-      :host([aria-checked='true']) .checked-indicator {
-        background-color: ButtonFace;
-      }
-      :host([aria-checked='true']:hover) .checked-indicator {
-        background-color: ButtonFace;
-      }
-      :host([aria-checked='true']:active) .checked-indicator {
-        background-color: ButtonFace;
-      }
+    :host([aria-checked='true']) .checked-indicator {
+      background-color: ButtonFace;
+    }
+    :host([aria-checked='true']:hover) .checked-indicator {
+      background-color: ButtonFace;
+    }
+    :host([aria-checked='true']:active) .checked-indicator {
+      background-color: ButtonFace;
     }
   `),
 );
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index 9dc482f5c247f..694abef78402e 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -110,11 +110,8 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* High contrast styles */
-    @media (forced-colors: active) {
-      :host([aria-selected='true'])::after {
-        background-color: Highlight;
-      }
+    :host([aria-selected='true'])::after {
+      background-color: Highlight;
     }
   `),
 );
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index 9228f1f3c99bb..f8353b21df03f 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -108,27 +108,24 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    /* High contrast styles */
-    @media (forced-colors: active) {
-      :host([aria-pressed='true']) .control,
-      :host([aria-pressed='true'][appearance='primary']) .control,
-      :host([aria-pressed='true'][appearance='subtle']) .control,
-      :host([aria-pressed='true'][appearance='outline']) .control,
-      :host([aria-pressed='true'][appearance='transparent']) .control,
-      :host([aria-pressed='true'][appearance='transparent']) .control {
-        border-color: Highlight;
-      }
-      :host([aria-pressed='false']) .control,
-      :host([aria-pressed='false'][appearance='primary']) .control,
-      :host([aria-pressed='false'][appearance='subtle']) .control,
-      :host([aria-pressed='false'][appearance='outline']) .control,
-      :host([aria-pressed='false'][appearance='transparent']) .control,
-      :host([aria-pressed='false'][appearance='transparent']) .control {
-        border-color: InactiveBorder;
-      }
-      :host(:hover) .control {
-        border-color: Highlight;
-      }
+    :host([aria-pressed='true']) .control,
+    :host([aria-pressed='true'][appearance='primary']) .control,
+    :host([aria-pressed='true'][appearance='subtle']) .control,
+    :host([aria-pressed='true'][appearance='outline']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control {
+      border-color: Highlight;
+    }
+    :host([aria-pressed='false']) .control,
+    :host([aria-pressed='false'][appearance='primary']) .control,
+    :host([aria-pressed='false'][appearance='subtle']) .control,
+    :host([aria-pressed='false'][appearance='outline']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control {
+      border-color: InactiveBorder;
+    }
+    :host(:hover) .control {
+      border-color: Highlight;
     }
   `),
 );

From 27a2c1ef2b08a675f1b0376c36699c98d169ac42 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 14:39:18 -0700
Subject: [PATCH 15/21] hc a11y: removes dead code

---
 packages/web-components/src/button/button.styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index 4752e885d920c..67100b16bf68f 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -310,7 +310,6 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
-    :host(:hover) .control,
     :host([appearance='transparent']:hover) .control {
       border-color: Highlight;
     }

From d9cf80eb5978298a4fd6c9359f78d0a1fbeaf5ad Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 14:46:25 -0700
Subject: [PATCH 16/21] hc a11y: fixes radio colors

---
 packages/web-components/src/radio/radio.styles.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index fedabe85d1b60..2bccb0a4544a2 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -129,16 +129,13 @@ export const styles = css`
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
+    :host .control {
+      border-color: InactiveBorder;
+    }
     :host([aria-checked='true']) .checked-indicator,
     :host([aria-checked='true']:active) .checked-indicator,
     :host([aria-checked='true']:hover) .checked-indicator {
       background-color: Highlight;
-    }
-    :host .control {
-      border-color: InactiveBorder;
-    }
-    :host([aria-checked='false']:active) .control,
-    :host([aria-checked='false']:hover) .control {
       border-color: ActiveBorder;
     }
   `),

From 48220af36c9461709bde790f10fc464db45e2abc Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 14:51:30 -0700
Subject: [PATCH 17/21] hc a11y: fixes switch, togglebutton styles

---
 .../src/switch/switch.styles.ts               | 34 ++++---------------
 .../src/toggle-button/toggle-button.styles.ts |  6 ++--
 2 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index dd2ef42ebb887..b35c08869b72d 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -157,41 +157,19 @@ export const styles = css`
     .switch {
       border-color: InactiveBorder;
     }
-    :host(:hover) .switch {
-      border-color: InactiveBorder;
-    }
-    :host(:active) .switch {
-      border-color: ActiveBorder;
-    }
-    :host([aria-checked='true']) .switch {
-      background: Highlight;
-      border-color: Highlight;
-    }
+    :host([aria-checked='true']) .switch,
+    :host([aria-checked='true']:active) .switch,
     :host([aria-checked='true']:hover) .switch {
       background: Highlight;
       border-color: Highlight;
     }
-    :host([aria-checked='true']:active) .switch {
-      background: Highlight;
-      border-color: Highlight;
-    }
-
-    .checked-indicator {
-      background-color: ActiveCaption;
-    }
-    :host(:hover) .checked-indicator {
-      background-color: ActiveCaption;
-    }
+    .checked-indicator,
+    :host(:hover) .checked-indicator,
     :host(:active) .checked-indicator {
       background-color: ActiveCaption;
     }
-
-    :host([aria-checked='true']) .checked-indicator {
-      background-color: ButtonFace;
-    }
-    :host([aria-checked='true']:hover) .checked-indicator {
-      background-color: ButtonFace;
-    }
+    :host([aria-checked='true']) .checked-indicator,
+    :host([aria-checked='true']:hover) .checked-indicator,
     :host([aria-checked='true']:active) .checked-indicator {
       background-color: ButtonFace;
     }
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index f8353b21df03f..a4cc18993b70c 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -113,7 +113,8 @@ export const styles = css`
     :host([aria-pressed='true'][appearance='subtle']) .control,
     :host([aria-pressed='true'][appearance='outline']) .control,
     :host([aria-pressed='true'][appearance='transparent']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control {
+    :host([aria-pressed='true'][appearance='transparent']) .control,
+    :host(:hover) .control {
       border-color: Highlight;
     }
     :host([aria-pressed='false']) .control,
@@ -124,8 +125,5 @@ export const styles = css`
     :host([aria-pressed='false'][appearance='transparent']) .control {
       border-color: InactiveBorder;
     }
-    :host(:hover) .control {
-      border-color: Highlight;
-    }
   `),
 );

From 26f8be1a70a3d0bedff74947244212e318da707b Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 14:54:23 -0700
Subject: [PATCH 18/21] hc a11y: combines css selectors

---
 .../web-components/src/progress-bar/progress-bar.styles.ts    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index 48156f049a060..7e4b457f59055 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -170,9 +170,7 @@ export const styles = css`
     .progress {
       background-color: HighlightText;
     }
-    .determinate {
-      background-color: Highlight;
-    }
+    .determinate,
     :host([validation-state='success']) .determinate,
     :host([validation-state='warning']) .determinate,
     :host([validation-state='error']) .determinate,

From b9d268d51311b54e76461685b8230c82be58357a Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 15:33:16 -0700
Subject: [PATCH 19/21] hc a11y: updates button styles

---
 .../web-components/src/toggle-button/toggle-button.styles.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index a4cc18993b70c..1cabbe5b6dc71 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -123,7 +123,7 @@ export const styles = css`
     :host([aria-pressed='false'][appearance='outline']) .control,
     :host([aria-pressed='false'][appearance='transparent']) .control,
     :host([aria-pressed='false'][appearance='transparent']) .control {
-      border-color: InactiveBorder;
+      border-color: ButtonBorder;
     }
   `),
 );

From 2fb2cfa2efc7c03c47d7677ccc3cdf1e0700ef19 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 15:43:12 -0700
Subject: [PATCH 20/21] hc a11y: updates toggle button styles

---
 .../src/toggle-button/toggle-button.styles.ts             | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index 1cabbe5b6dc71..c979cdb3b6626 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -117,13 +117,5 @@ export const styles = css`
     :host(:hover) .control {
       border-color: Highlight;
     }
-    :host([aria-pressed='false']) .control,
-    :host([aria-pressed='false'][appearance='primary']) .control,
-    :host([aria-pressed='false'][appearance='subtle']) .control,
-    :host([aria-pressed='false'][appearance='outline']) .control,
-    :host([aria-pressed='false'][appearance='transparent']) .control,
-    :host([aria-pressed='false'][appearance='transparent']) .control {
-      border-color: ButtonBorder;
-    }
   `),
 );

From 22323ce450ab06a8d8b42f99a84075e4ed0f5497 Mon Sep 17 00:00:00 2001
From: brianchristopherbrady <brian.christopher.brady@gmail.com>
Date: Mon, 7 Aug 2023 16:12:39 -0700
Subject: [PATCH 21/21] hc a11y: fixes button styles

---
 .../src/toggle-button/toggle-button.styles.ts               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index c979cdb3b6626..52abe28c8c72f 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -113,9 +113,9 @@ export const styles = css`
     :host([aria-pressed='true'][appearance='subtle']) .control,
     :host([aria-pressed='true'][appearance='outline']) .control,
     :host([aria-pressed='true'][appearance='transparent']) .control,
-    :host([aria-pressed='true'][appearance='transparent']) .control,
-    :host(:hover) .control {
-      border-color: Highlight;
+    :host([aria-pressed='true'][appearance='transparent']) .control {
+      background: SelectedItem;
+      color: SelectedItemText;
     }
   `),
 );