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 001/122] 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 00000000000000..2da64783f83419
--- /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 00000000000000..967f498a393fbf
--- /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 00000000000000..0e3f17541c84b8
--- /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 00000000000000..d15d9061179e6d
--- /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 00000000000000..d13afcb79a5c00
--- /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 00000000000000..d21a5ad81f0e6f
--- /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 00000000000000..66ca2a55ac25be
--- /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 00000000000000..dc9ccc345f6885
--- /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 00000000000000..479c8c1bb37c05
--- /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 00000000000000..7a12c218197cea
--- /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 00000000000000..750fae32d4f4dc
--- /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 00000000000000..ceb729eb8e4426
--- /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 00000000000000..de75e9633e6e12
--- /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 002/122] 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 dc9ccc345f6885..e1af0f69389a11 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 750fae32d4f4dc..7f45a5d3136a48 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 003/122] 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 2da64783f83419..00000000000000
--- 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 967f498a393fbf..00000000000000
--- 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 0e3f17541c84b8..00000000000000
--- 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 d15d9061179e6d..00000000000000
--- 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 d13afcb79a5c00..00000000000000
--- 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 d21a5ad81f0e6f..00000000000000
--- 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 66ca2a55ac25be..00000000000000
--- 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 e1af0f69389a11..00000000000000
--- 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 479c8c1bb37c05..00000000000000
--- 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 7a12c218197cea..00000000000000
--- 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 7f45a5d3136a48..00000000000000
--- 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 ceb729eb8e4426..00000000000000
--- 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 de75e9633e6e12..00000000000000
--- 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 004/122] 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 00000000000000..1ae4c1b1765c1b
--- /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 005/122] 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 1ae4c1b1765c1b..bd6e7aaac17c8d 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 006/122] 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 bd6e7aaac17c8d..84a237905b9107 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 007/122] 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 84a237905b9107..45cb8e0784083f 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 008/122] 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 45cb8e0784083f..1461fca61850bc 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 c3d414b848861ac0025cbb23cd5024894c16fff3 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 10:45:00 -0800
Subject: [PATCH 009/122] 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 00000000000000..2da64783f83419
--- /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 00000000000000..967f498a393fbf
--- /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 00000000000000..0e3f17541c84b8
--- /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 00000000000000..d15d9061179e6d
--- /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 00000000000000..d13afcb79a5c00
--- /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 00000000000000..d21a5ad81f0e6f
--- /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 00000000000000..66ca2a55ac25be
--- /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 00000000000000..dc9ccc345f6885
--- /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 00000000000000..479c8c1bb37c05
--- /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 00000000000000..7a12c218197cea
--- /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 00000000000000..750fae32d4f4dc
--- /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 00000000000000..ceb729eb8e4426
--- /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 00000000000000..de75e9633e6e12
--- /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 f9d2722e214a339a9a0fb06388c3fa33c17817e8 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 12:34:59 -0800
Subject: [PATCH 010/122] 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 dc9ccc345f6885..e1af0f69389a11 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 750fae32d4f4dc..7f45a5d3136a48 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 9cdce0ab1e368f08e084af8f68bd0ad149eecb21 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 15:57:37 -0800
Subject: [PATCH 011/122] adds radio and radio group to index rollup

---
 packages/web-components/src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 041cf1b6983643..6f920eca578ab6 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -6,6 +6,8 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './progress-bar/index.js';
+export * from './radio/index.js';
+export * from './radio-group/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './text/index.js';

From 69191b84b70e5ff3e8661e810965c9b849960426 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:00:59 -0800
Subject: [PATCH 012/122] merge

---
 .../web-components/src/radio/radio.styles.ts    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7f45a5d3136a48..9306ba8f6f463e 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -12,6 +12,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** Radio styles
@@ -55,6 +56,7 @@ export const styles = css`
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
+    margin: ${spacingVerticalXS} ${spacingHorizontalXS};
     top: 0;
     left: 0;
   }
@@ -75,6 +77,21 @@ export const styles = css`
   :host(:not([disabled])) .control:hover {
     background: darkblue;
     border-color: lightblue;
+
+  :host([stack]) {
+    flex-direction: column;
+    justify-content: center;
+  }
+  :host([stack]) .label {
+    padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
+  }
+
+  :host([stack]) .control {
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
+  }
+
+  :host(:not([disabled]):hover) .label {
+    color: ${colorNeutralForeground2};
   }
   :host(:not([disabled])) .control:active {
     background: gray;

From 92621d4999f8083a48a3e01f9e8f240517a51781 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:01:34 -0800
Subject: [PATCH 013/122] cherry-pick

---
 .../src/radio-group/radio-group.stories.ts    | 71 +++++++++++++++++++
 .../src/radio-group/radio-group.ts            | 32 ++++++++-
 packages/web-components/src/radio/radio.ts    | 12 +++-
 3 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-components/src/radio-group/radio-group.stories.ts

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
new file mode 100644
index 00000000000000..645f324fd40341
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -0,0 +1,71 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import { RadioGroup as FluentRadioGroup } from './radio-group.js';
+import './define.js';
+import '../radio/define.js';
+
+type RadioGroupStoryArgs = Args & FluentRadioGroup;
+type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
+
+const storyTemplate = html<RadioGroupStoryArgs>`
+  <fluent-radio-group orientation=${x => x.orientation} stacked=${x => x.stacked} role="radiogroup" name="radio-story">
+    <span slot="label">Radio Group Label</span>
+    <fluent-radio ?disabled=${x => x.disabled} value="apple"> Apple </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`;
+
+export default {
+  title: 'Components/RadioGroup',
+  args: {
+    disabled: false,
+    orientation: 'horizontal',
+  },
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets default state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    stacked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets layout of radio buttons',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    orientation: {
+      control: {
+        type: 'select',
+        options: ['horizontal', 'vertical'],
+      },
+      table: {
+        type: {
+          summary: 'Sets orientation of radio group',
+        },
+        defaultValue: {
+          summary: 'horizontal',
+        },
+      },
+    },
+  },
+} as RadioGroupStoryMeta;
+
+export const RadioGroup = renderComponent(storyTemplate).bind({});
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index d21a5ad81f0e6f..a3648424fb69e7 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -5,4 +5,34 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio-group custom element
  * @public
  */
-export class RadioGroup extends FASTRadioGroup {}
+export class RadioGroup extends FASTRadioGroup {
+  /**
+   * sets radio layout styles
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: stacked
+   */
+
+  @attr({ attribute: 'stacked', mode: 'boolean' })
+  public stacked: boolean = false;
+
+  protected layoutChanged(): void {
+    if (this.$fastController.isConnected && this.slottedRadioButtons !== undefined) {
+      this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
+        if (this.stacked && this.orientation === 'horizontal') {
+          item.setAttribute('stack', '');
+        } else {
+          item.removeAttribute('stack');
+        }
+      });
+    }
+  }
+
+  protected slottedRadioButtonsChanged(): void {
+    super.slottedRadioButtonsChanged(this.slottedRadioButtons, this.slottedRadioButtons);
+    if (this.stacked) {
+      this.layoutChanged();
+    }
+  }
+}
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index de75e9633e6e12..d5da495b43044c 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -5,4 +5,14 @@ import { FASTRadio } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export class Radio extends FASTRadio {}
+export class Radio extends FASTRadio {
+  /**
+   * sets radio layout styles
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: stack
+   */
+  @attr({ mode: 'boolean' })
+  public stack: boolean = false;
+}

From b8194084e3dde5fce8d4cfe19e67cc00e154e2fc Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:24:57 -0800
Subject: [PATCH 014/122] fixes arguments passed to slottedRadioButtonsChanged

---
 packages/web-components/src/radio-group/radio-group.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index a3648424fb69e7..7fd6ddbe276fc5 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -29,8 +29,8 @@ export class RadioGroup extends FASTRadioGroup {
     }
   }
 
-  protected slottedRadioButtonsChanged(): void {
-    super.slottedRadioButtonsChanged(this.slottedRadioButtons, this.slottedRadioButtons);
+  protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
+    super.slottedRadioButtonsChanged(oldValue, newValue);
     if (this.stacked) {
       this.layoutChanged();
     }

From 9eac6e8991feddca0538672b8f11151275594daf Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 09:33:48 -0800
Subject: [PATCH 015/122] yarn changew

---
 ...eb-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json

diff --git a/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
new file mode 100644
index 00000000000000..2f8ce2af12cee1
--- /dev/null
+++ b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "adds radio and radio group web component",
+  "packageName": "@fluentui/web-components",
+  "email": "brianbrady@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 9948aa46ce68b760bcfa5c419c4f3c5f331062bd Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:05:26 -0800
Subject: [PATCH 016/122] updates radio group logic

---
 packages/web-components/src/radio-group/radio-group.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 7fd6ddbe276fc5..b06d47622b2f17 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -18,7 +18,10 @@ export class RadioGroup extends FASTRadioGroup {
   public stacked: boolean = false;
 
   protected layoutChanged(): void {
-    if (this.$fastController.isConnected && this.slottedRadioButtons !== undefined) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    if (this.slottedRadioButtons !== undefined) {
       this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
         if (this.stacked && this.orientation === 'horizontal') {
           item.setAttribute('stack', '');

From ee1afd408ada620ce03a3cb02faaac1b0e84aa3f Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:49:24 -0800
Subject: [PATCH 017/122] cherry-pick

---
 .../web-components/src/radio-group/radio-group.styles.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index d15d9061179e6d..ad9e687c622123 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -15,6 +15,15 @@ export const styles = css`
     flex-direction: column;
     margin: 2px 0;
   }
+  ::slotted([slot='label']) {
+    color: ${colorNeutralForeground3};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    cursor: default;
+  }
   .positioning-region {
     display: flex;
     flex-wrap: wrap;

From 7fb992dfe9b5745abe4adbc6ed170c54ed690c85 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:05:26 -0800
Subject: [PATCH 018/122] updates styles

---
 .../src/radio-group/radio-group.styles.ts             | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index ad9e687c622123..368e6c88d011a9 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,6 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import {} from '../theme/design-tokens.js';
+import {
+  colorNeutralForeground3,
+  fontFamilyBase,
+  fontSizeBase300,
+  fontWeightRegular,
+  lineHeightBase300,
+  spacingHorizontalS,
+  spacingHorizontalXS,
+  spacingVerticalS,
+} from '../theme/design-tokens.js';
 
 /** Radio styles
  * @public

From 80de0f18f23aece56918cea68cc203588de45aa4 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:40:01 -0800
Subject: [PATCH 019/122] cherry-pick

---
 .../accordion-item/accordion-item.styles.ts   |   2 +-
 .../src/radio-group/radio-group.styles.ts     |   3 -
 .../web-components/src/radio/radio.styles.ts  | 105 ++++++++++++------
 3 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index 85ade10ee7ee6c..b7e7ab1a4b0648 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -108,7 +108,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: ${borderRadiusMedium};
     outline: none;
     border: 2px solid ${colorStrokeFocus1};
     box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 368e6c88d011a9..84d04d25db1b6f 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -43,7 +43,4 @@ export const styles = css`
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
-  :host([disabled]) {
-    opacity: 0.5;
-  }
 `;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 9306ba8f6f463e..e7bcfb1ecdcfd3 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,10 +1,20 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  borderRadiusMedium,
+  colorCompoundBrandForeground1,
+  colorCompoundBrandForeground1Pressed,
+  colorCompoundBrandStroke,
+  colorCompoundBrandStrokeHover,
+  colorCompoundBrandStrokePressed,
+  colorNeutralForeground1,
   colorNeutralForeground2,
   colorNeutralForeground3,
   colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
+  colorNeutralStrokeAccessiblePressed,
+  colorStrokeFocus1,
+  colorStrokeFocus2,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -24,7 +34,6 @@ export const styles = css`
   :host {
     align-items: center;
     flex-direction: row;
-    margin: 4px;
     outline: none;
     position: relative;
     user-select: none;
@@ -56,7 +65,7 @@ export const styles = css`
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
-    margin: ${spacingVerticalXS} ${spacingHorizontalXS};
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
     top: 0;
     left: 0;
   }
@@ -74,9 +83,17 @@ export const styles = css`
     border-radius: 5px;
     background-color: #ccc;
   }
-  :host(:not([disabled])) .control:hover {
-    background: darkblue;
-    border-color: lightblue;
+
+  :host(:focus-visible)::after {
+    content: '';
+    position: absolute;
+    inset: 0px;
+    cursor: pointer;
+    border-radius: ${borderRadiusMedium};
+    outline: none;
+    border: 2px solid ${colorStrokeFocus1};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+  }
 
   :host([stack]) {
     flex-direction: column;
@@ -97,47 +114,69 @@ export const styles = css`
     background: gray;
     border-color: darkgray;
   }
-  :host(:focus-visible) .control {
-    box-shadow: 0 0 0 2px green, 0 0 0 4px green;
+  :host(:not([disabled]):hover) .control {
+    border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host([aria-checked='true']) .control {
-    background: purple;
-    border: 1px solid yellow;
+  :host(:not([disabled]):active) .control {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
+
   :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])) .label {
+    color: ${colorNeutralForeground1};
   }
-  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
-    background: green;
-    fill: lightgreen;
+  :host([aria-checked='true']:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:not([disabled])) .control:active {
-    background: orange;
-    border: 1px solid cyan;
+  :host([aria-checked='true']:not([disabled])) .checked-indicator {
+    display: block;
+    background-color: ${colorCompoundBrandForeground1};
   }
-  :host([aria-checked='true']:not([disabled])) .control:active .checked-indicator {
-    background: magenta;
-    fill: pink;
+
+  :host([aria-checked='true']:hover:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:focus-visible:not([disabled])) .control {
-    box-shadow: 0 0 0 2px red, 0 0 0 4px red;
+  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
+    border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([disabled]) .label,
-  :host([readonly]) .label,
-  :host([readonly]) .control,
-  :host([disabled]) .control {
-    cursor: not-allowed;
+  :host([aria-checked='true']:hover:not([disabled])) .label {
+    border-color: ${colorNeutralForeground1};
   }
 
-  :host([disabled]) {
-    opacity: 0.5;
+  :host([aria-checked='true']:active:not([disabled])) .label {
+    color: ${colorNeutralForeground1};
+  }
+  :host([aria-checked='true']:active:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStrokePressed};
+  }
+  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
+    background: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([aria-checked='true']) .checked-indicator {
-    display: block;
+  :host([disabled][aria-checked='true']) .control {
+    border-color: ${colorNeutralForegroundDisabled};
+  }
+  :host([disabled][aria-checked='true']) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]),
+  :host([readonly]) {
+    pointer-events: none;
+  }
+  :host([disabled]) .label,
+  :host([readonly]) .label {
+    color: ${colorNeutralForegroundDisabled};
+  }
+  :host([readonly]) .control,
+  :host([disabled]) .control {
+    border-color: ${colorNeutralForegroundDisabled};
+  }
+  :host([disabled]) .checked-indicator,
+  :host([readonly]) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
   }
 `;

From 9bed7122b1ef1d1e406cabae1391159fe1d6bc77 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:41:19 -0800
Subject: [PATCH 020/122] merge

---
 .../src/radio-group/radio-group.stories.ts    | 102 ++++++++++++++++--
 .../web-components/src/radio/radio.stories.ts |   8 +-
 2 files changed, 101 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 645f324fd40341..f74995fc928c12 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -9,12 +9,19 @@ type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
 
 const storyTemplate = html<RadioGroupStoryArgs>`
-  <fluent-radio-group orientation=${x => x.orientation} stacked=${x => x.stacked} role="radiogroup" name="radio-story">
-    <span slot="label">Radio Group Label</span>
-    <fluent-radio ?disabled=${x => x.disabled} value="apple"> Apple </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="orange"> Orange </fluent-radio>
+  <fluent-radio-group
+    labelledby="label-1"
+    ?disabled=${x => x.disabled}
+    orientation=${x => x.orientation}
+    stacked=${x => x.stacked}
+    role="radiogroup"
+    name="radio-story"
+  >
+    <span id="label-1" slot="label">Favorite Fruit</span>
+    <fluent-radio checked=${x => x.checked} value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -25,6 +32,19 @@ export default {
     orientation: 'horizontal',
   },
   argTypes: {
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets checked state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
     disabled: {
       control: {
         type: 'boolean',
@@ -69,3 +89,73 @@ export default {
 } as RadioGroupStoryMeta;
 
 export const RadioGroup = renderComponent(storyTemplate).bind({});
+
+export const RadioGroupLabeled = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
+    <span id="label-2" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" role="radiogroup" name="radio-story">
+    <span id="label-3" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-4" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-5" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-6" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio checked value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group disabled aria-labelledby="label-7" role="radiogroup" name="radio-story">
+    <span id="label-7" slot="label">Favorite Fruit</span>
+    <fluent-radio checked value="apple"> Apple </fluent-radio>
+    <fluent-radio checked value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-8" role="radiogroup" name="radio-story">
+    <span id="label-8" slot="label">Favorite Fruit</span>
+    <fluent-radio checked value="apple"> Apple </fluent-radio>
+    <fluent-radio disabled value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 7a12c218197cea..26b931bafc2ad3 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -9,9 +9,11 @@ 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 orientation="vertical" role="radiogroup" name="radio-story">
+    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Apple </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 

From 5eb76ea929115cd94535f6536ebb0a39e0099755 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:41:42 -0800
Subject: [PATCH 021/122] adds radio group attributes

---
 .../src/radio-group/radio-group.ts            | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index b06d47622b2f17..85572bd81a436e 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -6,6 +6,16 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * @public
  */
 export class RadioGroup extends FASTRadioGroup {
+  /**
+   * Describes the ID of the element that labels the current element, as used for accessibility with screen readers.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: aria-labelledby
+   */
+  @attr({ attribute: 'aria-labelledby' })
+  public ariaLabelledby: string = '';
+
   /**
    * sets radio layout styles
    *
@@ -13,7 +23,6 @@ export class RadioGroup extends FASTRadioGroup {
    * @remarks
    * HTML Attribute: stacked
    */
-
   @attr({ attribute: 'stacked', mode: 'boolean' })
   public stacked: boolean = false;
 
@@ -32,9 +41,28 @@ export class RadioGroup extends FASTRadioGroup {
     }
   }
 
+  protected disableChanged(): void {
+    console.log('disableChanged');
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
+      if (this.disabled) {
+        item.setAttribute('disabled', '');
+      }
+    });
+  }
+
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
+    console.log('slottedRadioButtonsChanged');
+    if (this.disabled) {
+      console.log('slottedRadioButtonsChanged: disabled');
+      this.disableChanged();
+    }
     if (this.stacked) {
+      console.log('slottedRadioButtonsChanged: layoutChanged');
+
       this.layoutChanged();
     }
   }

From 6a03c6d340e9b70ce0bd5a2371bc2e2bd7bf8f7d Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:46:56 -0800
Subject: [PATCH 022/122] removes console logs

---
 packages/web-components/src/radio-group/radio-group.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 85572bd81a436e..f825dabf87eb08 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -42,7 +42,6 @@ export class RadioGroup extends FASTRadioGroup {
   }
 
   protected disableChanged(): void {
-    console.log('disableChanged');
     if (!this.$fastController.isConnected) {
       return;
     }
@@ -55,14 +54,10 @@ export class RadioGroup extends FASTRadioGroup {
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
-    console.log('slottedRadioButtonsChanged');
     if (this.disabled) {
-      console.log('slottedRadioButtonsChanged: disabled');
       this.disableChanged();
     }
     if (this.stacked) {
-      console.log('slottedRadioButtonsChanged: layoutChanged');
-
       this.layoutChanged();
     }
   }

From de938a4b65f00fc2b62c43c51341e18bf0a0d6a1 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:49:16 -0800
Subject: [PATCH 023/122] updates styles

---
 .../web-components/src/radio-group/radio-group.stories.ts   | 2 +-
 .../web-components/src/radio-group/radio-group.styles.ts    | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index f74995fc928c12..b3f01a292a6ec2 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -90,7 +90,7 @@ export default {
 
 export const RadioGroup = renderComponent(storyTemplate).bind({});
 
-export const RadioGroupLabeled = renderComponent(html<RadioGroupStoryArgs>`
+export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
     <span id="label-2" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 84d04d25db1b6f..fa6f5ac18400ee 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -15,12 +15,10 @@ import {
  * @public
  */
 export const styles = css`
-  :host([hidden]) {
-    display: none;
-  }
+  ${display('flex')}
+
   :host {
     align-items: flex-start;
-    display: flex;
     flex-direction: column;
     margin: 2px 0;
   }

From 4ee0e0b435ded20660326dc030f1f4f9955f40c1 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:56:42 -0800
Subject: [PATCH 024/122] updates RadioGroup readme

---
 .../web-components/src/radio-group/README.md     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index d80d1ab434f637..0353fbac9b786c 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -1,6 +1,6 @@
 # Radio Group
 
-> RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space..
+> RadioGroup lets users select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space..
 
 <br />
 
@@ -42,6 +42,7 @@ Used anywhere an author might group a list of radio options.
 | `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements. |
 | `value`       | public  | `string`                 |              | The value of the checked radio.                                                                       |
 | `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                          |
+| `stacked`     | public  | `boolean`                | `false`      | places each radio item in a row, with labels below the radio indicator.                               |
 | default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items                                                                |
 
 <br />
@@ -97,9 +98,10 @@ Used anywhere an author might group a list of radio options.
 
 ### **WAI-ARIA Roles, States, and Properties**
 
-| Attributes        | value | Description                              |
-| ----------------- | ----- | ---------------------------------------- |
-| `aria-labelledby` |       | used to associate a label with the group |
+| Attributes        | value          | Description                              |
+| ----------------- | -------------- | ---------------------------------------- |
+| `aria-labelledby` |                | used to associate a label with the group |
+| `role`            | `"radiogroup"` | used to define a group of radio buttons  |
 
 <br />
 <hr />
@@ -122,6 +124,6 @@ Used anywhere an author might group a list of radio options.
 <br />
 
 **Property Mapping**
-| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
-|-------------------|------------------------ |---------------------------|
-| `layout` | `orientation` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute.
+| Fluent UI React 9 | Fluent Web Components | Description of difference |
+|-------------------|-------------------------- |---------------------------|
+| `layout` | `orientation` + `stacked` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute. Additionally, adding the `boolean` attribute `stacked` when the orientation is set to `horizontal` will create the `horizontal-stacked` layout available in FUIR9.

From 48c4d8a086833590f590e7365d649eb8c51dfece Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 12:10:08 -0800
Subject: [PATCH 025/122] fixes jsdoc

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index fa6f5ac18400ee..39c58d39b775c2 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -11,7 +11,7 @@ import {
   spacingVerticalS,
 } from '../theme/design-tokens.js';
 
-/** Radio styles
+/** RadioGroup styles
  * @public
  */
 export const styles = css`

From 923a696a5c0f2ce60f393852a46d2a80e8315d3a Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 026/122] updats radio and radio group stories

---
 .../src/radio-group/radio-group.stories.ts         | 11 +++++------
 packages/web-components/src/radio/radio.stories.ts | 14 ++++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index b3f01a292a6ec2..f96a1fe04835e3 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -10,15 +10,14 @@ type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
 
 const storyTemplate = html<RadioGroupStoryArgs>`
   <fluent-radio-group
-    labelledby="label-1"
-    ?disabled=${x => x.disabled}
-    orientation=${x => x.orientation}
-    stacked=${x => x.stacked}
-    role="radiogroup"
+    aria-labelledby="label-1"
+    ?disabled=${(x: { disabled: boolean }) => x.disabled}
+    ?stacked=${(x: { stacked: boolean }) => x.stacked}
+    orientation=${(x: { orientation: 'vertical' | 'horizontal' }) => x.orientation}
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio checked=${x => x.checked} value="apple"> Apple </fluent-radio>
+    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 26b931bafc2ad3..1f869360e9d51b 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -10,10 +10,16 @@ type RadioStoryMeta = Meta<RadioStoryArgs>;
 
 const storyTemplate = html<RadioStoryArgs>`
   <fluent-radio-group orientation="vertical" role="radiogroup" name="radio-story">
-    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Apple </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Orange"> Orange </fluent-radio>
+    <fluent-radio
+      ?disabled=${(x: { disabled: boolean }) => x.disabled}
+      ?checked=${(x: { checked: boolean }) => x.checked}
+      value="Apple"
+    >
+      Apple
+    </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 

From 22f2a8251e5d7dc9d3ca69b709b9560097e7d242 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:15:13 -0800
Subject: [PATCH 027/122] formats radio group story markup

---
 packages/web-components/src/radio-group/radio-group.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index f96a1fe04835e3..fa7d6dd01172d7 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -17,7 +17,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
+    <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>

From 6729fadc0d874c30dd4f6e27b472c0e7c9ad9ba8 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:55:17 -0800
Subject: [PATCH 028/122] removes redundant attribute on RadioGroup story

---
 .../src/radio-group/radio-group.stories.ts    | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index fa7d6dd01172d7..e5f656b262470d 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -90,7 +90,7 @@ export default {
 export const RadioGroup = renderComponent(storyTemplate).bind({});
 
 export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
     <span id="label-2" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -100,7 +100,7 @@ export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
 `);
 
 export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" name="radio-story">
     <span id="label-3" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -110,7 +110,7 @@ export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs
 `);
 
 export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" name="radio-story">
     <span id="label-4" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -120,7 +120,7 @@ export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryAr
 `);
 
 export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" name="radio-story">
     <span id="label-5" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -129,8 +129,18 @@ export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroup
   </fluent-radio-group>
 `);
 
+export const RadioGroupOnChange = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
+    <span id="label-2" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
 export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story">
     <span id="label-6" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio checked value="pear"> Pear </fluent-radio>
@@ -140,7 +150,7 @@ export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs
 `);
 
 export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group disabled aria-labelledby="label-7" role="radiogroup" name="radio-story">
+  <fluent-radio-group disabled aria-labelledby="label-7" name="radio-story">
     <span id="label-7" slot="label">Favorite Fruit</span>
     <fluent-radio checked value="apple"> Apple </fluent-radio>
     <fluent-radio checked value="pear"> Pear </fluent-radio>
@@ -150,7 +160,7 @@ export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
 `);
 
 export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-8" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-8" name="radio-story">
     <span id="label-8" slot="label">Favorite Fruit</span>
     <fluent-radio checked value="apple"> Apple </fluent-radio>
     <fluent-radio disabled value="pear"> Pear </fluent-radio>

From 88f874f399cf7573914fa7c6aab0dbb7d58a9c9e Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 8 Mar 2023 10:46:28 -0800
Subject: [PATCH 029/122] removes dead code

---
 .../src/radio-group/radio-group.stories.ts             | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index e5f656b262470d..a562febd7316f6 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -129,16 +129,6 @@ export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroup
   </fluent-radio-group>
 `);
 
-export const RadioGroupOnChange = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
-    <span id="label-2" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
-  </fluent-radio-group>
-`);
-
 export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story">
     <span id="label-6" slot="label">Favorite Fruit</span>

From 62649a1e014f9fe911fb95210ba82d42e3822424 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:07 -0800
Subject: [PATCH 030/122] updates radio styles

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index e7bcfb1ecdcfd3..071a99bf82fc73 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -59,25 +59,21 @@ export const styles = css`
     flex-shrink: 0;
   }
   .control {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
-    display: inline-block;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
     margin: ${spacingVerticalS} ${spacingHorizontalS};
-    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;

From 2de1087ab6c405402fb268651d3b5bf4c66d2888 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:29 -0800
Subject: [PATCH 031/122] updates radio group styles

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 39c58d39b775c2..44eb24e64fd198 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -9,6 +9,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -21,10 +22,11 @@ export const styles = css`
     align-items: flex-start;
     flex-direction: column;
     margin: 2px 0;
+    row-gap: ${spacingVerticalS};
   }
   ::slotted([slot='label']) {
     color: ${colorNeutralForeground3};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    padding-inline: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};

From 40843d751a8708d8b8b1ef94b65ca6b5fcd166b5 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:50 -0800
Subject: [PATCH 032/122] removes redundant attribute on radio group

---
 packages/web-components/src/radio-group/radio-group.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index f825dabf87eb08..89deb1d0eb88d7 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -6,16 +6,6 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * @public
  */
 export class RadioGroup extends FASTRadioGroup {
-  /**
-   * Describes the ID of the element that labels the current element, as used for accessibility with screen readers.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: aria-labelledby
-   */
-  @attr({ attribute: 'aria-labelledby' })
-  public ariaLabelledby: string = '';
-
   /**
    * sets radio layout styles
    *

From be9d76ab6300df59ed4dbf2859dd5ee06f737603 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 16:38:15 -0800
Subject: [PATCH 033/122] merge

---
 .../web-components/src/radio/radio.styles.ts  | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 071a99bf82fc73..0e863a5cd54d04 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -33,6 +33,8 @@ export const styles = css`
 
   :host {
     align-items: center;
+    cursor: pointer;
+    display: flex;
     flex-direction: row;
     outline: none;
     position: relative;
@@ -41,60 +43,51 @@ export const styles = css`
   .label {
     color: ${colorNeutralForeground3};
     cursor: pointer;
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
   }
-  :host(:hover) .label {
-    color: ${colorNeutralForeground2};
-  }
+
   .label__hidden {
     display: none;
     visibility: hidden;
   }
-  .control,
-  .checked-indicator {
-    flex-shrink: 0;
-  }
   .control {
+    align-items: center;
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    border-radius: 50%;
     display: flex;
+    height: 16px;
     justify-content: center;
-    align-items: center;
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
     position: relative;
     width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 1px solid ${colorNeutralStrokeAccessible};
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
-  }
-  :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
   }
   .checked-indicator {
+    border-radius: 5px;
+    height: 10px;
     opacity: 0;
     width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: #ccc;
   }
 
   :host(:focus-visible)::after {
+    border: 2px solid ${colorStrokeFocus1};
+    border-radius: ${borderRadiusMedium};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
     content: '';
-    position: absolute;
-    inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    inset: 0px;
     outline: none;
-    border: 2px solid ${colorStrokeFocus1};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    position: absolute;
   }
 
   :host([stack]) {
     flex-direction: column;
     justify-content: center;
   }
+
   :host([stack]) .label {
     padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
   }
@@ -106,13 +99,15 @@ export const styles = css`
   :host(:not([disabled]):hover) .label {
     color: ${colorNeutralForeground2};
   }
-  :host(:not([disabled])) .control:active {
-    background: gray;
-    border-color: darkgray;
+
+  :host(:not([disabled]):active) .label {
+    color: ${colorNeutralForeground1};
   }
+
   :host(:not([disabled]):hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
+
   :host(:not([disabled]):active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
@@ -124,20 +119,24 @@ export const styles = css`
   :host([aria-checked='true']:not([disabled])) .label {
     color: ${colorNeutralForeground1};
   }
+
   :host([aria-checked='true']:not([disabled])) .control {
     border-color: ${colorCompoundBrandStroke};
   }
+
   :host([aria-checked='true']:not([disabled])) .checked-indicator {
-    display: block;
     background-color: ${colorCompoundBrandForeground1};
+    display: block;
   }
 
   :host([aria-checked='true']:hover:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
+
   :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
     border-color: ${colorCompoundBrandStrokeHover};
   }
+
   :host([aria-checked='true']:hover:not([disabled])) .label {
     border-color: ${colorNeutralForeground1};
   }
@@ -145,9 +144,11 @@ export const styles = css`
   :host([aria-checked='true']:active:not([disabled])) .label {
     color: ${colorNeutralForeground1};
   }
+
   :host([aria-checked='true']:active:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
+
   :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
@@ -155,6 +156,7 @@ export const styles = css`
   :host([disabled][aria-checked='true']) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
+
   :host([disabled][aria-checked='true']) .checked-indicator {
     background-color: ${colorNeutralForegroundDisabled};
   }
@@ -163,14 +165,17 @@ export const styles = css`
   :host([readonly]) {
     pointer-events: none;
   }
+
   :host([disabled]) .label,
   :host([readonly]) .label {
     color: ${colorNeutralForegroundDisabled};
   }
+
   :host([readonly]) .control,
   :host([disabled]) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
+
   :host([disabled]) .checked-indicator,
   :host([readonly]) .checked-indicator {
     background-color: ${colorNeutralForegroundDisabled};

From da178869a234028cc472dff727cc61a8dea1f111 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 13 Mar 2023 11:59:54 -0700
Subject: [PATCH 034/122] styles radio and radio group

---
 .../src/radio-group/radio-group.styles.ts     | 20 ++++++++++++++-----
 .../src/radio-group/radio-group.ts            | 20 +------------------
 .../web-components/src/radio/radio.styles.ts  |  5 -----
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 44eb24e64fd198..f5b9450908d3e1 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
   colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -26,21 +27,30 @@ export const styles = css`
   }
   ::slotted([slot='label']) {
     color: ${colorNeutralForeground3};
-    padding-inline: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     cursor: default;
   }
+
   .positioning-region {
     display: flex;
     flex-wrap: wrap;
   }
+
   :host([orientation='vertical']) .positioning-region {
     flex-direction: column;
   }
+
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
+
+  :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  :host([disabled]) ::slotted([role='radio'] ::slotted(.label)) {
+    color: ${colorNeutralForegroundDisabled};
+  }
 `;
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 89deb1d0eb88d7..5302f38317318e 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -13,24 +13,9 @@ export class RadioGroup extends FASTRadioGroup {
    * @remarks
    * HTML Attribute: stacked
    */
-  @attr({ attribute: 'stacked', mode: 'boolean' })
+  @attr({ mode: 'boolean' })
   public stacked: boolean = false;
 
-  protected layoutChanged(): void {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    if (this.slottedRadioButtons !== undefined) {
-      this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
-        if (this.stacked && this.orientation === 'horizontal') {
-          item.setAttribute('stack', '');
-        } else {
-          item.removeAttribute('stack');
-        }
-      });
-    }
-  }
-
   protected disableChanged(): void {
     if (!this.$fastController.isConnected) {
       return;
@@ -47,8 +32,5 @@ export class RadioGroup extends FASTRadioGroup {
     if (this.disabled) {
       this.disableChanged();
     }
-    if (this.stacked) {
-      this.layoutChanged();
-    }
   }
 }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 0e863a5cd54d04..636f81e29d7903 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -175,9 +175,4 @@ export const styles = css`
   :host([disabled]) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
-
-  :host([disabled]) .checked-indicator,
-  :host([readonly]) .checked-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
 `;

From cad6469d27c0c7f39aa9cfd79421bdd8a86d22df Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 16:53:47 -0700
Subject: [PATCH 035/122] removes dead code

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index f5b9450908d3e1..ff19731febad05 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -49,8 +49,4 @@ export const styles = css`
     flex-direction: column;
     justify-content: center;
   }
-
-  :host([disabled]) ::slotted([role='radio'] ::slotted(.label)) {
-    color: ${colorNeutralForegroundDisabled};
-  }
 `;

From daa81a889fc213216adb9aff58e571e353df3d59 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 17:04:14 -0700
Subject: [PATCH 036/122] updates css value to token

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 636f81e29d7903..7f07c4af508e05 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  borderRadiusCircular,
   borderRadiusMedium,
   colorCompoundBrandForeground1,
   colorCompoundBrandForeground1Pressed,
@@ -57,7 +58,7 @@ export const styles = css`
   .control {
     align-items: center;
     border: 1px solid ${colorNeutralStrokeAccessible};
-    border-radius: 50%;
+    border-radius: ${borderRadiusCircular};
     display: flex;
     height: 16px;
     justify-content: center;
@@ -66,7 +67,7 @@ export const styles = css`
     width: 16px;
   }
   .checked-indicator {
-    border-radius: 5px;
+    border-radius: ${borderRadiusCircular};
     height: 10px;
     opacity: 0;
     width: 10px;

From af2f4ab887e7b83d0ea0159ff97672593ab0c259 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 17:14:59 -0700
Subject: [PATCH 037/122] exports RadioGroupOrientation namespaced type

---
 packages/web-components/src/radio-group/index.ts |  1 +
 .../src/radio-group/radio-group.options.ts       | 16 ++++++++++++++++
 .../src/radio-group/radio-group.stories.ts       |  4 +++-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-components/src/radio-group/radio-group.options.ts

diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 967f498a393fbf..86b1c01ae162b9 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -1,4 +1,5 @@
 export * from './radio-group.js';
+export * from './radio-group.options.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.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
new file mode 100644
index 00000000000000..d962c11fa68d51
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.options.ts
@@ -0,0 +1,16 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+
+/**
+ * RadioGroupOrientation constants
+ * @public
+ */
+export const RadioGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+} as const;
+
+/**
+ * A RadioGroup's orientation can be either horizontal or vertical
+ * @public
+ */
+export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index a562febd7316f6..bf23d0a714a07d 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -4,6 +4,7 @@ import { renderComponent } from '../helpers.stories.js';
 import { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import './define.js';
 import '../radio/define.js';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 
 type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
@@ -73,8 +74,9 @@ export default {
     orientation: {
       control: {
         type: 'select',
-        options: ['horizontal', 'vertical'],
+        options: Object.values(RadioGroupOrientation),
       },
+      defaultValue: 'primary',
       table: {
         type: {
           summary: 'Sets orientation of radio group',

From fea6a0dca31d5fc9191450d21596f8435986e278 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 15 Mar 2023 14:41:27 -0700
Subject: [PATCH 038/122] updates styles per design review

---
 .../web-components/src/radio-group/radio-group.styles.ts   | 7 +++----
 packages/web-components/src/radio/radio.styles.ts          | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index ff19731febad05..0f379c05793bd1 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,8 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
-  colorNeutralForeground3,
-  colorNeutralForegroundDisabled,
+  colorNeutralForeground1,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -10,7 +9,6 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
-  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -26,7 +24,7 @@ export const styles = css`
     row-gap: ${spacingVerticalS};
   }
   ::slotted([slot='label']) {
-    color: ${colorNeutralForeground3};
+    color: ${colorNeutralForeground1};
     padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     cursor: default;
@@ -48,5 +46,6 @@ export const styles = css`
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
     flex-direction: column;
     justify-content: center;
+    height: auto;
   }
 `;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7f07c4af508e05..9764c7efd2d177 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -23,6 +23,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalSNudge,
   spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
@@ -33,6 +34,7 @@ export const styles = css`
   ${display('inline-flex')}
 
   :host {
+    height: 32px;
     align-items: center;
     cursor: pointer;
     display: flex;
@@ -48,7 +50,7 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
   }
 
   .label__hidden {
@@ -56,6 +58,7 @@ export const styles = css`
     visibility: hidden;
   }
   .control {
+    box-sizing: border-box;
     align-items: center;
     border: 1px solid ${colorNeutralStrokeAccessible};
     border-radius: ${borderRadiusCircular};

From 7e680293b4034b55e11aa4a08441f2459c7c8978 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 15 Mar 2023 14:51:52 -0700
Subject: [PATCH 039/122] updates focus styles

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 9764c7efd2d177..3b18a56e7ce06c 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -79,7 +79,7 @@ export const styles = css`
   :host(:focus-visible)::after {
     border: 2px solid ${colorStrokeFocus1};
     border-radius: ${borderRadiusMedium};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    box-shadow: inset 0 0 0 2px ${colorStrokeFocus2};
     content: '';
     cursor: pointer;
     inset: 0px;

From 48e4acc6ac055e1e52fa4893a330061a3d443504 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 21 Mar 2023 15:48:02 -0700
Subject: [PATCH 040/122] reverts file

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

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index b7e7ab1a4b0648..85ade10ee7ee6c 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -108,7 +108,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    border-radius: ${borderRadiusSmall};
     outline: none;
     border: 2px solid ${colorStrokeFocus1};
     box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};

From 7ef442af20957d2c3f75460874c767c74b0dd6a8 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 21 Mar 2023 15:48:49 -0700
Subject: [PATCH 041/122] reverts 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 1461fca61850bc..00000000000000
--- 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 ca1f96656d224488078f9ed02be56f191a403e28 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 042/122] mege

---
 .../web-components/src/radio-group/radio-group.stories.ts     | 4 ++++
 packages/web-components/src/radio/radio.styles.ts             | 1 +
 2 files changed, 5 insertions(+)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index bf23d0a714a07d..4daa3fc4a72639 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,7 +18,11 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
+    <<<<<<< HEAD
     <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
+    =======
+    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
+    >>>>>>> 50c03a853f (updats radio and radio group stories)
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 3b18a56e7ce06c..b0bf63e2693757 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -11,6 +11,7 @@ import {
   colorNeutralForeground1,
   colorNeutralForeground2,
   colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
   colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,

From 0e7de1af234bda8b8b3efece8c767177becae1a7 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 043/122] adds back story args

---
 .../src/radio-group/radio-group.stories.ts    |  4 ---
 .../web-components/src/radio/radio.stories.ts | 33 +++++++++++++++++--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 4daa3fc4a72639..b2b7367b358c58 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,11 +18,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <<<<<<< HEAD
-    <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
-    =======
     <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
-    >>>>>>> 50c03a853f (updats radio and radio group stories)
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 1f869360e9d51b..4fc59649513fc6 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -25,8 +25,37 @@ const storyTemplate = html<RadioStoryArgs>`
 
 export default {
   title: 'Components/Radio',
-  args: {},
-  argTypes: {},
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets checked state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets default state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
 } as RadioStoryMeta;
 
 export const Radio = renderComponent(storyTemplate).bind({});

From d1cc79d8b58736cc7a408112452094e603d4b15b Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 22 Mar 2023 12:27:17 -0700
Subject: [PATCH 044/122] re exports RadioGroupOrientation from FAST

---
 packages/web-components/src/radio-group/index.ts |  2 +-
 .../src/radio-group/radio-group.options.ts       | 16 ----------------
 2 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 packages/web-components/src/radio-group/radio-group.options.ts

diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 86b1c01ae162b9..cfc435af8a7537 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -1,5 +1,5 @@
 export * from './radio-group.js';
-export * from './radio-group.options.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';
+export { RadioGroupOrientation } from '@microsoft/fast-foundation';
diff --git a/packages/web-components/src/radio-group/radio-group.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
deleted file mode 100644
index d962c11fa68d51..00000000000000
--- a/packages/web-components/src/radio-group/radio-group.options.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
-
-/**
- * RadioGroupOrientation constants
- * @public
- */
-export const RadioGroupOrientation = {
-  horizontal: 'horizontal',
-  vertical: 'vertical',
-} as const;
-
-/**
- * A RadioGroup's orientation can be either horizontal or vertical
- * @public
- */
-export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;

From 58a9094349606d5df602efd8ba93f6ac1d79135d Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 23 Mar 2023 14:42:58 -0700
Subject: [PATCH 045/122] removes redundant stack attribute

---
 packages/web-components/src/radio/radio.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index d5da495b43044c..de75e9633e6e12 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -5,14 +5,4 @@ import { FASTRadio } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export class Radio extends FASTRadio {
-  /**
-   * sets radio layout styles
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: stack
-   */
-  @attr({ mode: 'boolean' })
-  public stack: boolean = false;
-}
+export class Radio extends FASTRadio {}

From 805737699c6f638bfd1a15a93d95f310fdf14e4e Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 23 Mar 2023 15:23:09 -0700
Subject: [PATCH 046/122] testing local tokens for disabled styling

---
 .../src/radio-group/radio-group.styles.ts     |  4 ++
 .../src/radio-group/radio-group.ts            | 28 ++++++---
 .../web-components/src/radio/radio.styles.ts  | 60 ++++++++-----------
 3 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 0f379c05793bd1..34ee00efca14bd 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -48,4 +48,8 @@ export const styles = css`
     justify-content: center;
     height: auto;
   }
+
+  :host([disabled]) ::slotted([role='radio']) {
+    pointer-events: none;
+  }
 `;
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 5302f38317318e..edd22e559e7546 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,3 +1,10 @@
+import {
+  colorCompoundBrandForeground1,
+  colorCompoundBrandStroke,
+  colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
+  colorNeutralStrokeAccessible,
+} from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
 
@@ -16,21 +23,28 @@ export class RadioGroup extends FASTRadioGroup {
   @attr({ mode: 'boolean' })
   public stacked: boolean = false;
 
-  protected disableChanged(): void {
+  protected createLocalTokens(): void {
     if (!this.$fastController.isConnected) {
       return;
     }
-    this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
-      if (this.disabled) {
-        item.setAttribute('disabled', '');
-      }
-    });
+
+    if (this.disabled) {
+      this.style.setProperty('--control-border-color-checked', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
+    }
   }
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
+    this.style.setProperty('--control-border-color-checked', `${colorCompoundBrandStroke.$value}`);
+    this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
+    this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
+    this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+
     if (this.disabled) {
-      this.disableChanged();
+      this.createLocalTokens();
     }
   }
 }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index b0bf63e2693757..d2d86cead37eed 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -45,7 +45,7 @@ export const styles = css`
     user-select: none;
   }
   .label {
-    color: ${colorNeutralForeground3};
+    color: var(--label-color);
     cursor: pointer;
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
@@ -61,7 +61,7 @@ export const styles = css`
   .control {
     box-sizing: border-box;
     align-items: center;
-    border: 1px solid ${colorNeutralStrokeAccessible};
+    border: 1px solid var(--control-border-color);
     border-radius: ${borderRadiusCircular};
     display: flex;
     height: 16px;
@@ -101,19 +101,19 @@ export const styles = css`
     margin: ${spacingVerticalS} ${spacingHorizontalS};
   }
 
-  :host(:not([disabled]):hover) .label {
+  :host(:hover) .label {
     color: ${colorNeutralForeground2};
   }
 
-  :host(:not([disabled]):active) .label {
+  :host(:active) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host(:not([disabled]):hover) .control {
+  :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
 
-  :host(:not([disabled]):active) .control {
+  :host(:active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
 
@@ -121,63 +121,51 @@ export const styles = css`
     opacity: 1;
   }
 
-  :host([aria-checked='true']:not([disabled])) .label {
+  :host([aria-checked='true']) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:not([disabled])) .control {
-    border-color: ${colorCompoundBrandStroke};
+  :host([aria-checked='true']) .control {
+    border-color: var(--control-border-color);
   }
 
-  :host([aria-checked='true']:not([disabled])) .checked-indicator {
-    background-color: ${colorCompoundBrandForeground1};
+  :host([aria-checked='true']) .checked-indicator {
+    background-color: var(--checked-indicator-background-color);
     display: block;
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+  :host([readonly]) .control,
+  :host([disabled]) .control {
+    pointer-events; None;
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .label {
+  :host([aria-checked='true']:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandStrokeHover};
+  }
+
+  :host([aria-checked='true']:hover) .label {
     border-color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .label {
+  :host([aria-checked='true']:active) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .control {
+  :host([aria-checked='true']:active) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([disabled][aria-checked='true']) .control {
-    border-color: ${colorNeutralForegroundDisabled};
-  }
-
-  :host([disabled][aria-checked='true']) .checked-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-
-  :host([disabled]),
-  :host([readonly]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .label,
-  :host([readonly]) .label {
-    color: ${colorNeutralForegroundDisabled};
-  }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
+    pointer-events; None;
     border-color: ${colorNeutralForegroundDisabled};
   }
 `;

From 522147ee8c8845fe2f9fa0ad22021f788d071abe Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:05:19 -0700
Subject: [PATCH 047/122] radio: updates styles per review

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index d2d86cead37eed..27f057b815a04d 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -38,14 +38,13 @@ export const styles = css`
     height: 32px;
     align-items: center;
     cursor: pointer;
-    display: flex;
     flex-direction: row;
     outline: none;
     position: relative;
     user-select: none;
+    color: ${colorNeutralForeground1};
   }
   .label {
-    color: var(--label-color);
     cursor: pointer;
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
@@ -53,7 +52,6 @@ export const styles = css`
     line-height: ${lineHeightBase300};
     padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
   }
-
   .label__hidden {
     display: none;
     visibility: hidden;
@@ -76,7 +74,9 @@ export const styles = css`
     opacity: 0;
     width: 10px;
   }
-
+  :host([aria-checked='false']:hover) {
+    color: ${colorNeutralForeground2};
+  }
   :host(:focus-visible)::after {
     border: 2px solid ${colorStrokeFocus1};
     border-radius: ${borderRadiusMedium};
@@ -87,85 +87,51 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-
   :host([stack]) {
     flex-direction: column;
     justify-content: center;
   }
-
   :host([stack]) .label {
     padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
   }
-
   :host([stack]) .control {
     margin: ${spacingVerticalS} ${spacingHorizontalS};
   }
-
-  :host(:hover) .label {
-    color: ${colorNeutralForeground2};
-  }
-
-  :host(:active) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-
   :host(:active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-
   :host([aria-checked='true']) .checked-indicator {
     opacity: 1;
   }
-
-  :host([aria-checked='true']) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host([aria-checked='true']) .control {
     border-color: var(--control-border-color);
   }
-
   :host([aria-checked='true']) .checked-indicator {
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
-    pointer-events; None;
+    pointer-events: none;
   }
-
   :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
-
   :host([aria-checked='true']:hover) .checked-indicator {
     background-color: ${colorCompoundBrandStrokeHover};
   }
-
-  :host([aria-checked='true']:hover) .label {
-    border-color: ${colorNeutralForeground1};
-  }
-
-  :host([aria-checked='true']:active) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host([aria-checked='true']:active) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
-
   :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
-    pointer-events; None;
+    pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
   }
 `;

From d132f2e6a2d1ed6091275cc6fa5d51baf87c3ad9 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:19:29 -0700
Subject: [PATCH 048/122] radio: updates design tokens & styles

---
 .../src/radio-group/radio-group.ts              | 17 ++++++++++++++++-
 .../web-components/src/radio/radio.styles.ts    | 12 +-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index edd22e559e7546..791b9290390e84 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -4,6 +4,11 @@ import {
   colorNeutralForeground3,
   colorNeutralForegroundDisabled,
   colorNeutralStrokeAccessible,
+  spacingHorizontalS,
+  spacingHorizontalXS,
+  spacingVerticalS,
+  spacingVerticalSNudge,
+  spacingVerticalXS,
 } from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
@@ -34,6 +39,12 @@ export class RadioGroup extends FASTRadioGroup {
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
     }
+    if (this.stacked) {
+      this.style.setProperty(
+        '--stacked-padding',
+        `${spacingVerticalXS.$value} ${spacingHorizontalS.$value} ${spacingVerticalS.$value} ${spacingHorizontalS.$value}`,
+      );
+    }
   }
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
@@ -42,8 +53,12 @@ export class RadioGroup extends FASTRadioGroup {
     this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
     this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
     this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+    this.style.setProperty(
+      '--stacked-padding',
+      `${spacingVerticalSNudge.$value} ${spacingHorizontalS.$value} ${spacingVerticalSNudge.$value} ${spacingHorizontalXS.$value}`,
+    );
 
-    if (this.disabled) {
+    if (this.disabled || this.stacked) {
       this.createLocalTokens();
     }
   }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 27f057b815a04d..7222f58f94a4db 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -50,7 +50,7 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
+    padding: var(--stacked-padding);
   }
   .label__hidden {
     display: none;
@@ -87,16 +87,6 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-  :host([stack]) {
-    flex-direction: column;
-    justify-content: center;
-  }
-  :host([stack]) .label {
-    padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
-  }
-  :host([stack]) .control {
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
-  }
   :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }

From 611c3c9581a9201531007b0a27cc6d89521e2db0 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:38:19 -0700
Subject: [PATCH 049/122] radio: adds storybook content

---
 .../src/radio-group/radio-group.ts              |  4 ++--
 .../web-components/src/radio/radio.stories.ts   | 17 +++++++++++++----
 .../web-components/src/radio/radio.styles.ts    | 11 ++++++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 791b9290390e84..3e70c08dfd1a4d 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -37,7 +37,7 @@ export class RadioGroup extends FASTRadioGroup {
       this.style.setProperty('--control-border-color-checked', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
-      this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--state-color', `${colorNeutralForegroundDisabled.$value}`);
     }
     if (this.stacked) {
       this.style.setProperty(
@@ -52,7 +52,7 @@ export class RadioGroup extends FASTRadioGroup {
     this.style.setProperty('--control-border-color-checked', `${colorCompoundBrandStroke.$value}`);
     this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
     this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
-    this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+    this.style.setProperty('--state-color', `${colorNeutralForeground3.$value}`);
     this.style.setProperty(
       '--stacked-padding',
       `${spacingVerticalSNudge.$value} ${spacingHorizontalS.$value} ${spacingVerticalSNudge.$value} ${spacingHorizontalXS.$value}`,
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 4fc59649513fc6..12dc348d96b335 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -15,11 +15,8 @@ const storyTemplate = html<RadioStoryArgs>`
       ?checked=${(x: { checked: boolean }) => x.checked}
       value="Apple"
     >
-      Apple
+      Option 1
     </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -59,3 +56,15 @@ export default {
 } as RadioStoryMeta;
 
 export const Radio = renderComponent(storyTemplate).bind({});
+
+export const Checked = renderComponent(html<RadioStoryArgs>`
+  <fluent-radio-group nname="radio-story">
+    <fluent-radio checked="true" value="Apple"> Option 1 </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const Disabled = renderComponent(html<RadioStoryArgs>`
+  <fluent-radio-group nname="radio-story">
+    <fluent-radio disabled="true" value="Apple"> Option 1 </fluent-radio>
+  </fluent-radio-group>
+`);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7222f58f94a4db..b2c18b75cf3807 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -42,7 +42,11 @@ export const styles = css`
     outline: none;
     position: relative;
     user-select: none;
-    color: ${colorNeutralForeground1};
+    color: var(--state-color);
+  }
+  :host([disabled]),
+  :host([required]) {
+    color: ${colorNeutralForegroundDisabled};
   }
   .label {
     cursor: pointer;
@@ -103,7 +107,6 @@ export const styles = css`
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
-  :host([readonly]) .control,
   :host([disabled]) .control {
     pointer-events: none;
   }
@@ -119,9 +122,11 @@ export const styles = css`
   :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
-  :host([readonly]) .control,
   :host([disabled]) .control {
     pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
   }
+  :host([required]) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
 `;

From 267e655156de07ae8093693ac874b025d4ee3cc5 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 10:45:00 -0800
Subject: [PATCH 050/122] 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 00000000000000..2da64783f83419
--- /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 00000000000000..967f498a393fbf
--- /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 00000000000000..0e3f17541c84b8
--- /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 00000000000000..d15d9061179e6d
--- /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 00000000000000..d13afcb79a5c00
--- /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 00000000000000..d21a5ad81f0e6f
--- /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 00000000000000..66ca2a55ac25be
--- /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 00000000000000..dc9ccc345f6885
--- /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 00000000000000..479c8c1bb37c05
--- /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 00000000000000..7a12c218197cea
--- /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 00000000000000..750fae32d4f4dc
--- /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 00000000000000..ceb729eb8e4426
--- /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 00000000000000..de75e9633e6e12
--- /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 3c39bfe839e61c27048d5cf2be1d8be499a0fe4c Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 3 Mar 2023 12:34:59 -0800
Subject: [PATCH 051/122] 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 dc9ccc345f6885..e1af0f69389a11 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 750fae32d4f4dc..7f45a5d3136a48 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 bd3d0c4e31a38088d8611b1061aedf2e3ec74f4d Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 13:04:39 -0700
Subject: [PATCH 052/122] radio: merge

---
 packages/web-components/src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 8faecf80599796..b7ba528979da30 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -6,6 +6,8 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './progress-bar/index.js';
+export * from './radio/index.js';
+export * from './radio-group/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';

From 15c2d3a13af87f1e4b82a725d23dc9b070ed1105 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:00:59 -0800
Subject: [PATCH 053/122] merge

---
 .../web-components/src/radio/radio.styles.ts    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7f45a5d3136a48..9306ba8f6f463e 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -12,6 +12,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** Radio styles
@@ -55,6 +56,7 @@ export const styles = css`
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
+    margin: ${spacingVerticalXS} ${spacingHorizontalXS};
     top: 0;
     left: 0;
   }
@@ -75,6 +77,21 @@ export const styles = css`
   :host(:not([disabled])) .control:hover {
     background: darkblue;
     border-color: lightblue;
+
+  :host([stack]) {
+    flex-direction: column;
+    justify-content: center;
+  }
+  :host([stack]) .label {
+    padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
+  }
+
+  :host([stack]) .control {
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
+  }
+
+  :host(:not([disabled]):hover) .label {
+    color: ${colorNeutralForeground2};
   }
   :host(:not([disabled])) .control:active {
     background: gray;

From f8188003faa95758201d2bfc02f29c32de65b8b1 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:01:34 -0800
Subject: [PATCH 054/122] cherry-pick

---
 .../src/radio-group/radio-group.stories.ts    | 71 +++++++++++++++++++
 .../src/radio-group/radio-group.ts            | 32 ++++++++-
 packages/web-components/src/radio/radio.ts    | 12 +++-
 3 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-components/src/radio-group/radio-group.stories.ts

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
new file mode 100644
index 00000000000000..645f324fd40341
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -0,0 +1,71 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import { RadioGroup as FluentRadioGroup } from './radio-group.js';
+import './define.js';
+import '../radio/define.js';
+
+type RadioGroupStoryArgs = Args & FluentRadioGroup;
+type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
+
+const storyTemplate = html<RadioGroupStoryArgs>`
+  <fluent-radio-group orientation=${x => x.orientation} stacked=${x => x.stacked} role="radiogroup" name="radio-story">
+    <span slot="label">Radio Group Label</span>
+    <fluent-radio ?disabled=${x => x.disabled} value="apple"> Apple </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`;
+
+export default {
+  title: 'Components/RadioGroup',
+  args: {
+    disabled: false,
+    orientation: 'horizontal',
+  },
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets default state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    stacked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets layout of radio buttons',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    orientation: {
+      control: {
+        type: 'select',
+        options: ['horizontal', 'vertical'],
+      },
+      table: {
+        type: {
+          summary: 'Sets orientation of radio group',
+        },
+        defaultValue: {
+          summary: 'horizontal',
+        },
+      },
+    },
+  },
+} as RadioGroupStoryMeta;
+
+export const RadioGroup = renderComponent(storyTemplate).bind({});
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index d21a5ad81f0e6f..a3648424fb69e7 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -5,4 +5,34 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio-group custom element
  * @public
  */
-export class RadioGroup extends FASTRadioGroup {}
+export class RadioGroup extends FASTRadioGroup {
+  /**
+   * sets radio layout styles
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: stacked
+   */
+
+  @attr({ attribute: 'stacked', mode: 'boolean' })
+  public stacked: boolean = false;
+
+  protected layoutChanged(): void {
+    if (this.$fastController.isConnected && this.slottedRadioButtons !== undefined) {
+      this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
+        if (this.stacked && this.orientation === 'horizontal') {
+          item.setAttribute('stack', '');
+        } else {
+          item.removeAttribute('stack');
+        }
+      });
+    }
+  }
+
+  protected slottedRadioButtonsChanged(): void {
+    super.slottedRadioButtonsChanged(this.slottedRadioButtons, this.slottedRadioButtons);
+    if (this.stacked) {
+      this.layoutChanged();
+    }
+  }
+}
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index de75e9633e6e12..d5da495b43044c 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -5,4 +5,14 @@ import { FASTRadio } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export class Radio extends FASTRadio {}
+export class Radio extends FASTRadio {
+  /**
+   * sets radio layout styles
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: stack
+   */
+  @attr({ mode: 'boolean' })
+  public stack: boolean = false;
+}

From 023482249f71c19a0b6148040917c868f8a284e5 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 6 Mar 2023 16:24:57 -0800
Subject: [PATCH 055/122] fixes arguments passed to slottedRadioButtonsChanged

---
 packages/web-components/src/radio-group/radio-group.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index a3648424fb69e7..7fd6ddbe276fc5 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -29,8 +29,8 @@ export class RadioGroup extends FASTRadioGroup {
     }
   }
 
-  protected slottedRadioButtonsChanged(): void {
-    super.slottedRadioButtonsChanged(this.slottedRadioButtons, this.slottedRadioButtons);
+  protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
+    super.slottedRadioButtonsChanged(oldValue, newValue);
     if (this.stacked) {
       this.layoutChanged();
     }

From 7cb1d5b922f48c08658a0739a5a8d20a47ec400a Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 09:33:48 -0800
Subject: [PATCH 056/122] yarn changew

---
 ...eb-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json

diff --git a/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
new file mode 100644
index 00000000000000..2f8ce2af12cee1
--- /dev/null
+++ b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "adds radio and radio group web component",
+  "packageName": "@fluentui/web-components",
+  "email": "brianbrady@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 87f36b207346843d367b0366ae741ebd64c0f529 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:05:26 -0800
Subject: [PATCH 057/122] updates radio group logic

---
 packages/web-components/src/radio-group/radio-group.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 7fd6ddbe276fc5..b06d47622b2f17 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -18,7 +18,10 @@ export class RadioGroup extends FASTRadioGroup {
   public stacked: boolean = false;
 
   protected layoutChanged(): void {
-    if (this.$fastController.isConnected && this.slottedRadioButtons !== undefined) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    if (this.slottedRadioButtons !== undefined) {
       this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
         if (this.stacked && this.orientation === 'horizontal') {
           item.setAttribute('stack', '');

From added85a0cdc9fd836c0bfdcd56b0e6eaf74bb93 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:49:24 -0800
Subject: [PATCH 058/122] cherry-pick

---
 .../web-components/src/radio-group/radio-group.styles.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index d15d9061179e6d..ad9e687c622123 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -15,6 +15,15 @@ export const styles = css`
     flex-direction: column;
     margin: 2px 0;
   }
+  ::slotted([slot='label']) {
+    color: ${colorNeutralForeground3};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    cursor: default;
+  }
   .positioning-region {
     display: flex;
     flex-wrap: wrap;

From 3ae6f816bc0627cb6fc9cc9a1ff4206310901033 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 10:05:26 -0800
Subject: [PATCH 059/122] updates styles

---
 .../src/radio-group/radio-group.styles.ts             | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index ad9e687c622123..368e6c88d011a9 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,6 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import {} from '../theme/design-tokens.js';
+import {
+  colorNeutralForeground3,
+  fontFamilyBase,
+  fontSizeBase300,
+  fontWeightRegular,
+  lineHeightBase300,
+  spacingHorizontalS,
+  spacingHorizontalXS,
+  spacingVerticalS,
+} from '../theme/design-tokens.js';
 
 /** Radio styles
  * @public

From 127eb1363db846ce3c1e935dbc70c8c5e56514af Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:40:01 -0800
Subject: [PATCH 060/122] cherry-pick

---
 .../accordion-item/accordion-item.styles.ts   |   2 +-
 .../src/radio-group/radio-group.styles.ts     |   3 -
 .../web-components/src/radio/radio.styles.ts  | 105 ++++++++++++------
 3 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index 85ade10ee7ee6c..b7e7ab1a4b0648 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -108,7 +108,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: ${borderRadiusMedium};
     outline: none;
     border: 2px solid ${colorStrokeFocus1};
     box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 368e6c88d011a9..84d04d25db1b6f 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -43,7 +43,4 @@ export const styles = css`
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
-  :host([disabled]) {
-    opacity: 0.5;
-  }
 `;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 9306ba8f6f463e..e7bcfb1ecdcfd3 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,10 +1,20 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  borderRadiusMedium,
+  colorCompoundBrandForeground1,
+  colorCompoundBrandForeground1Pressed,
+  colorCompoundBrandStroke,
+  colorCompoundBrandStrokeHover,
+  colorCompoundBrandStrokePressed,
+  colorNeutralForeground1,
   colorNeutralForeground2,
   colorNeutralForeground3,
   colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
+  colorNeutralStrokeAccessiblePressed,
+  colorStrokeFocus1,
+  colorStrokeFocus2,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -24,7 +34,6 @@ export const styles = css`
   :host {
     align-items: center;
     flex-direction: row;
-    margin: 4px;
     outline: none;
     position: relative;
     user-select: none;
@@ -56,7 +65,7 @@ export const styles = css`
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
-    margin: ${spacingVerticalXS} ${spacingHorizontalXS};
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
     top: 0;
     left: 0;
   }
@@ -74,9 +83,17 @@ export const styles = css`
     border-radius: 5px;
     background-color: #ccc;
   }
-  :host(:not([disabled])) .control:hover {
-    background: darkblue;
-    border-color: lightblue;
+
+  :host(:focus-visible)::after {
+    content: '';
+    position: absolute;
+    inset: 0px;
+    cursor: pointer;
+    border-radius: ${borderRadiusMedium};
+    outline: none;
+    border: 2px solid ${colorStrokeFocus1};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+  }
 
   :host([stack]) {
     flex-direction: column;
@@ -97,47 +114,69 @@ export const styles = css`
     background: gray;
     border-color: darkgray;
   }
-  :host(:focus-visible) .control {
-    box-shadow: 0 0 0 2px green, 0 0 0 4px green;
+  :host(:not([disabled]):hover) .control {
+    border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host([aria-checked='true']) .control {
-    background: purple;
-    border: 1px solid yellow;
+  :host(:not([disabled]):active) .control {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
+
   :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])) .label {
+    color: ${colorNeutralForeground1};
   }
-  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
-    background: green;
-    fill: lightgreen;
+  :host([aria-checked='true']:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:not([disabled])) .control:active {
-    background: orange;
-    border: 1px solid cyan;
+  :host([aria-checked='true']:not([disabled])) .checked-indicator {
+    display: block;
+    background-color: ${colorCompoundBrandForeground1};
   }
-  :host([aria-checked='true']:not([disabled])) .control:active .checked-indicator {
-    background: magenta;
-    fill: pink;
+
+  :host([aria-checked='true']:hover:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:focus-visible:not([disabled])) .control {
-    box-shadow: 0 0 0 2px red, 0 0 0 4px red;
+  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
+    border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([disabled]) .label,
-  :host([readonly]) .label,
-  :host([readonly]) .control,
-  :host([disabled]) .control {
-    cursor: not-allowed;
+  :host([aria-checked='true']:hover:not([disabled])) .label {
+    border-color: ${colorNeutralForeground1};
   }
 
-  :host([disabled]) {
-    opacity: 0.5;
+  :host([aria-checked='true']:active:not([disabled])) .label {
+    color: ${colorNeutralForeground1};
+  }
+  :host([aria-checked='true']:active:not([disabled])) .control {
+    border-color: ${colorCompoundBrandStrokePressed};
+  }
+  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
+    background: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([aria-checked='true']) .checked-indicator {
-    display: block;
+  :host([disabled][aria-checked='true']) .control {
+    border-color: ${colorNeutralForegroundDisabled};
+  }
+  :host([disabled][aria-checked='true']) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]),
+  :host([readonly]) {
+    pointer-events: none;
+  }
+  :host([disabled]) .label,
+  :host([readonly]) .label {
+    color: ${colorNeutralForegroundDisabled};
+  }
+  :host([readonly]) .control,
+  :host([disabled]) .control {
+    border-color: ${colorNeutralForegroundDisabled};
+  }
+  :host([disabled]) .checked-indicator,
+  :host([readonly]) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
   }
 `;

From cd063a2a1353f3c7fc259eb5cee68e18f9d78637 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:41:19 -0800
Subject: [PATCH 061/122] merge

---
 .../src/radio-group/radio-group.stories.ts    | 102 ++++++++++++++++--
 .../web-components/src/radio/radio.stories.ts |   8 +-
 2 files changed, 101 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 645f324fd40341..f74995fc928c12 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -9,12 +9,19 @@ type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
 
 const storyTemplate = html<RadioGroupStoryArgs>`
-  <fluent-radio-group orientation=${x => x.orientation} stacked=${x => x.stacked} role="radiogroup" name="radio-story">
-    <span slot="label">Radio Group Label</span>
-    <fluent-radio ?disabled=${x => x.disabled} value="apple"> Apple </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="orange"> Orange </fluent-radio>
+  <fluent-radio-group
+    labelledby="label-1"
+    ?disabled=${x => x.disabled}
+    orientation=${x => x.orientation}
+    stacked=${x => x.stacked}
+    role="radiogroup"
+    name="radio-story"
+  >
+    <span id="label-1" slot="label">Favorite Fruit</span>
+    <fluent-radio checked=${x => x.checked} value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -25,6 +32,19 @@ export default {
     orientation: 'horizontal',
   },
   argTypes: {
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets checked state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
     disabled: {
       control: {
         type: 'boolean',
@@ -69,3 +89,73 @@ export default {
 } as RadioGroupStoryMeta;
 
 export const RadioGroup = renderComponent(storyTemplate).bind({});
+
+export const RadioGroupLabeled = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
+    <span id="label-2" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" role="radiogroup" name="radio-story">
+    <span id="label-3" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-4" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-5" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" role="radiogroup" name="radio-story">
+    <span id="label-6" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio checked value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group disabled aria-labelledby="label-7" role="radiogroup" name="radio-story">
+    <span id="label-7" slot="label">Favorite Fruit</span>
+    <fluent-radio checked value="apple"> Apple </fluent-radio>
+    <fluent-radio checked value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-8" role="radiogroup" name="radio-story">
+    <span id="label-8" slot="label">Favorite Fruit</span>
+    <fluent-radio checked value="apple"> Apple </fluent-radio>
+    <fluent-radio disabled value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 7a12c218197cea..26b931bafc2ad3 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -9,9 +9,11 @@ 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 orientation="vertical" role="radiogroup" name="radio-story">
+    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Apple </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 

From c9b9249ba984bb69977ba72097533a647e2d7c18 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:41:42 -0800
Subject: [PATCH 062/122] adds radio group attributes

---
 .../src/radio-group/radio-group.ts            | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index b06d47622b2f17..85572bd81a436e 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -6,6 +6,16 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * @public
  */
 export class RadioGroup extends FASTRadioGroup {
+  /**
+   * Describes the ID of the element that labels the current element, as used for accessibility with screen readers.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: aria-labelledby
+   */
+  @attr({ attribute: 'aria-labelledby' })
+  public ariaLabelledby: string = '';
+
   /**
    * sets radio layout styles
    *
@@ -13,7 +23,6 @@ export class RadioGroup extends FASTRadioGroup {
    * @remarks
    * HTML Attribute: stacked
    */
-
   @attr({ attribute: 'stacked', mode: 'boolean' })
   public stacked: boolean = false;
 
@@ -32,9 +41,28 @@ export class RadioGroup extends FASTRadioGroup {
     }
   }
 
+  protected disableChanged(): void {
+    console.log('disableChanged');
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
+      if (this.disabled) {
+        item.setAttribute('disabled', '');
+      }
+    });
+  }
+
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
+    console.log('slottedRadioButtonsChanged');
+    if (this.disabled) {
+      console.log('slottedRadioButtonsChanged: disabled');
+      this.disableChanged();
+    }
     if (this.stacked) {
+      console.log('slottedRadioButtonsChanged: layoutChanged');
+
       this.layoutChanged();
     }
   }

From 97a5a5eed287f6437e7432d88ae7e2b6acfc14f4 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:46:56 -0800
Subject: [PATCH 063/122] removes console logs

---
 packages/web-components/src/radio-group/radio-group.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 85572bd81a436e..f825dabf87eb08 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -42,7 +42,6 @@ export class RadioGroup extends FASTRadioGroup {
   }
 
   protected disableChanged(): void {
-    console.log('disableChanged');
     if (!this.$fastController.isConnected) {
       return;
     }
@@ -55,14 +54,10 @@ export class RadioGroup extends FASTRadioGroup {
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
-    console.log('slottedRadioButtonsChanged');
     if (this.disabled) {
-      console.log('slottedRadioButtonsChanged: disabled');
       this.disableChanged();
     }
     if (this.stacked) {
-      console.log('slottedRadioButtonsChanged: layoutChanged');
-
       this.layoutChanged();
     }
   }

From 86fb9c5ae34f51518902708c0278d472df7ddd6e Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:49:16 -0800
Subject: [PATCH 064/122] updates styles

---
 .../web-components/src/radio-group/radio-group.stories.ts   | 2 +-
 .../web-components/src/radio-group/radio-group.styles.ts    | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index f74995fc928c12..b3f01a292a6ec2 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -90,7 +90,7 @@ export default {
 
 export const RadioGroup = renderComponent(storyTemplate).bind({});
 
-export const RadioGroupLabeled = renderComponent(html<RadioGroupStoryArgs>`
+export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
     <span id="label-2" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 84d04d25db1b6f..fa6f5ac18400ee 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -15,12 +15,10 @@ import {
  * @public
  */
 export const styles = css`
-  :host([hidden]) {
-    display: none;
-  }
+  ${display('flex')}
+
   :host {
     align-items: flex-start;
-    display: flex;
     flex-direction: column;
     margin: 2px 0;
   }

From 790f1a8befa365a2c8471b188c5d95d49b2b74e4 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 11:56:42 -0800
Subject: [PATCH 065/122] updates RadioGroup readme

---
 .../web-components/src/radio-group/README.md     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index d80d1ab434f637..0353fbac9b786c 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -1,6 +1,6 @@
 # Radio Group
 
-> RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space..
+> RadioGroup lets users select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space..
 
 <br />
 
@@ -42,6 +42,7 @@ Used anywhere an author might group a list of radio options.
 | `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements. |
 | `value`       | public  | `string`                 |              | The value of the checked radio.                                                                       |
 | `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                          |
+| `stacked`     | public  | `boolean`                | `false`      | places each radio item in a row, with labels below the radio indicator.                               |
 | default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items                                                                |
 
 <br />
@@ -97,9 +98,10 @@ Used anywhere an author might group a list of radio options.
 
 ### **WAI-ARIA Roles, States, and Properties**
 
-| Attributes        | value | Description                              |
-| ----------------- | ----- | ---------------------------------------- |
-| `aria-labelledby` |       | used to associate a label with the group |
+| Attributes        | value          | Description                              |
+| ----------------- | -------------- | ---------------------------------------- |
+| `aria-labelledby` |                | used to associate a label with the group |
+| `role`            | `"radiogroup"` | used to define a group of radio buttons  |
 
 <br />
 <hr />
@@ -122,6 +124,6 @@ Used anywhere an author might group a list of radio options.
 <br />
 
 **Property Mapping**
-| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
-|-------------------|------------------------ |---------------------------|
-| `layout` | `orientation` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute.
+| Fluent UI React 9 | Fluent Web Components | Description of difference |
+|-------------------|-------------------------- |---------------------------|
+| `layout` | `orientation` + `stacked` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute. Additionally, adding the `boolean` attribute `stacked` when the orientation is set to `horizontal` will create the `horizontal-stacked` layout available in FUIR9.

From d947e13a97e137610b5934f4d431b45e0d460c36 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 12:10:08 -0800
Subject: [PATCH 066/122] fixes jsdoc

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index fa6f5ac18400ee..39c58d39b775c2 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -11,7 +11,7 @@ import {
   spacingVerticalS,
 } from '../theme/design-tokens.js';
 
-/** Radio styles
+/** RadioGroup styles
  * @public
  */
 export const styles = css`

From 3c0f6928d725282719a80bb493f90201feb1c204 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 067/122] updats radio and radio group stories

---
 .../src/radio-group/radio-group.stories.ts         | 11 +++++------
 packages/web-components/src/radio/radio.stories.ts | 14 ++++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index b3f01a292a6ec2..f96a1fe04835e3 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -10,15 +10,14 @@ type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
 
 const storyTemplate = html<RadioGroupStoryArgs>`
   <fluent-radio-group
-    labelledby="label-1"
-    ?disabled=${x => x.disabled}
-    orientation=${x => x.orientation}
-    stacked=${x => x.stacked}
-    role="radiogroup"
+    aria-labelledby="label-1"
+    ?disabled=${(x: { disabled: boolean }) => x.disabled}
+    ?stacked=${(x: { stacked: boolean }) => x.stacked}
+    orientation=${(x: { orientation: 'vertical' | 'horizontal' }) => x.orientation}
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio checked=${x => x.checked} value="apple"> Apple </fluent-radio>
+    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 26b931bafc2ad3..1f869360e9d51b 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -10,10 +10,16 @@ type RadioStoryMeta = Meta<RadioStoryArgs>;
 
 const storyTemplate = html<RadioStoryArgs>`
   <fluent-radio-group orientation="vertical" role="radiogroup" name="radio-story">
-    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Apple </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${x => x.disabled} value="Orange"> Orange </fluent-radio>
+    <fluent-radio
+      ?disabled=${(x: { disabled: boolean }) => x.disabled}
+      ?checked=${(x: { checked: boolean }) => x.checked}
+      value="Apple"
+    >
+      Apple
+    </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Pear"> Pear </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Banana"> Banana </fluent-radio>
+    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 

From bca6addeaec702d29644f580a6dc1fb7d07c227c Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:15:13 -0800
Subject: [PATCH 068/122] formats radio group story markup

---
 packages/web-components/src/radio-group/radio-group.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index f96a1fe04835e3..fa7d6dd01172d7 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -17,7 +17,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
+    <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>

From bf7bee38258953ceda94006b513bb8908e1ce47e Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:55:17 -0800
Subject: [PATCH 069/122] removes redundant attribute on RadioGroup story

---
 .../src/radio-group/radio-group.stories.ts    | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index fa7d6dd01172d7..e5f656b262470d 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -90,7 +90,7 @@ export default {
 export const RadioGroup = renderComponent(storyTemplate).bind({});
 
 export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-2" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
     <span id="label-2" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -100,7 +100,7 @@ export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
 `);
 
 export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-3" orientation="vertical" name="radio-story">
     <span id="label-3" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -110,7 +110,7 @@ export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs
 `);
 
 export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" name="radio-story">
     <span id="label-4" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -120,7 +120,7 @@ export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryAr
 `);
 
 export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" name="radio-story">
     <span id="label-5" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio value="pear"> Pear </fluent-radio>
@@ -129,8 +129,18 @@ export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroup
   </fluent-radio-group>
 `);
 
+export const RadioGroupOnChange = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
+    <span id="label-2" slot="label">Favorite Fruit</span>
+    <fluent-radio value="apple"> Apple </fluent-radio>
+    <fluent-radio value="pear"> Pear </fluent-radio>
+    <fluent-radio value="banana"> Banana </fluent-radio>
+    <fluent-radio value="orange"> Orange </fluent-radio>
+  </fluent-radio-group>
+`);
+
 export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story">
     <span id="label-6" slot="label">Favorite Fruit</span>
     <fluent-radio value="apple"> Apple </fluent-radio>
     <fluent-radio checked value="pear"> Pear </fluent-radio>
@@ -140,7 +150,7 @@ export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs
 `);
 
 export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group disabled aria-labelledby="label-7" role="radiogroup" name="radio-story">
+  <fluent-radio-group disabled aria-labelledby="label-7" name="radio-story">
     <span id="label-7" slot="label">Favorite Fruit</span>
     <fluent-radio checked value="apple"> Apple </fluent-radio>
     <fluent-radio checked value="pear"> Pear </fluent-radio>
@@ -150,7 +160,7 @@ export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
 `);
 
 export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-8" role="radiogroup" name="radio-story">
+  <fluent-radio-group aria-labelledby="label-8" name="radio-story">
     <span id="label-8" slot="label">Favorite Fruit</span>
     <fluent-radio checked value="apple"> Apple </fluent-radio>
     <fluent-radio disabled value="pear"> Pear </fluent-radio>

From 1230bc01856c22d3dcf67204c91326f824c2cbc7 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 8 Mar 2023 10:46:28 -0800
Subject: [PATCH 070/122] removes dead code

---
 .../src/radio-group/radio-group.stories.ts             | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index e5f656b262470d..a562febd7316f6 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -129,16 +129,6 @@ export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroup
   </fluent-radio-group>
 `);
 
-export const RadioGroupOnChange = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group aria-labelledby="label-2" name="radio-story">
-    <span id="label-2" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
-  </fluent-radio-group>
-`);
-
 export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story">
     <span id="label-6" slot="label">Favorite Fruit</span>

From 19002da486702f26b6f1a6cb2c1aabcf838ad76a Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:07 -0800
Subject: [PATCH 071/122] updates radio styles

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index e7bcfb1ecdcfd3..071a99bf82fc73 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -59,25 +59,21 @@ export const styles = css`
     flex-shrink: 0;
   }
   .control {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
-    display: inline-block;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     border: 1px solid ${colorNeutralStrokeAccessible};
     margin: ${spacingVerticalS} ${spacingHorizontalS};
-    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;

From f09a49f9a24839b8a2cb1841a3ac30cd8f5ba9c7 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:29 -0800
Subject: [PATCH 072/122] updates radio group styles

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 39c58d39b775c2..44eb24e64fd198 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -9,6 +9,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -21,10 +22,11 @@ export const styles = css`
     align-items: flex-start;
     flex-direction: column;
     margin: 2px 0;
+    row-gap: ${spacingVerticalS};
   }
   ::slotted([slot='label']) {
     color: ${colorNeutralForeground3};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    padding-inline: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};

From e1f6473f8413f297d8bb9326ef46a6495db4053f Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 15:33:50 -0800
Subject: [PATCH 073/122] removes redundant attribute on radio group

---
 packages/web-components/src/radio-group/radio-group.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index f825dabf87eb08..89deb1d0eb88d7 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -6,16 +6,6 @@ import { FASTRadioGroup } from '@microsoft/fast-foundation';
  * @public
  */
 export class RadioGroup extends FASTRadioGroup {
-  /**
-   * Describes the ID of the element that labels the current element, as used for accessibility with screen readers.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: aria-labelledby
-   */
-  @attr({ attribute: 'aria-labelledby' })
-  public ariaLabelledby: string = '';
-
   /**
    * sets radio layout styles
    *

From f273e93e14f3cf2097e0a3901688310e35932f79 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 9 Mar 2023 16:38:15 -0800
Subject: [PATCH 074/122] merge

---
 .../web-components/src/radio/radio.styles.ts  | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 071a99bf82fc73..0e863a5cd54d04 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -33,6 +33,8 @@ export const styles = css`
 
   :host {
     align-items: center;
+    cursor: pointer;
+    display: flex;
     flex-direction: row;
     outline: none;
     position: relative;
@@ -41,60 +43,51 @@ export const styles = css`
   .label {
     color: ${colorNeutralForeground3};
     cursor: pointer;
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
   }
-  :host(:hover) .label {
-    color: ${colorNeutralForeground2};
-  }
+
   .label__hidden {
     display: none;
     visibility: hidden;
   }
-  .control,
-  .checked-indicator {
-    flex-shrink: 0;
-  }
   .control {
+    align-items: center;
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    border-radius: 50%;
     display: flex;
+    height: 16px;
     justify-content: center;
-    align-items: center;
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
     position: relative;
     width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 1px solid ${colorNeutralStrokeAccessible};
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
-  }
-  :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
   }
   .checked-indicator {
+    border-radius: 5px;
+    height: 10px;
     opacity: 0;
     width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: #ccc;
   }
 
   :host(:focus-visible)::after {
+    border: 2px solid ${colorStrokeFocus1};
+    border-radius: ${borderRadiusMedium};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
     content: '';
-    position: absolute;
-    inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    inset: 0px;
     outline: none;
-    border: 2px solid ${colorStrokeFocus1};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    position: absolute;
   }
 
   :host([stack]) {
     flex-direction: column;
     justify-content: center;
   }
+
   :host([stack]) .label {
     padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
   }
@@ -106,13 +99,15 @@ export const styles = css`
   :host(:not([disabled]):hover) .label {
     color: ${colorNeutralForeground2};
   }
-  :host(:not([disabled])) .control:active {
-    background: gray;
-    border-color: darkgray;
+
+  :host(:not([disabled]):active) .label {
+    color: ${colorNeutralForeground1};
   }
+
   :host(:not([disabled]):hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
+
   :host(:not([disabled]):active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
@@ -124,20 +119,24 @@ export const styles = css`
   :host([aria-checked='true']:not([disabled])) .label {
     color: ${colorNeutralForeground1};
   }
+
   :host([aria-checked='true']:not([disabled])) .control {
     border-color: ${colorCompoundBrandStroke};
   }
+
   :host([aria-checked='true']:not([disabled])) .checked-indicator {
-    display: block;
     background-color: ${colorCompoundBrandForeground1};
+    display: block;
   }
 
   :host([aria-checked='true']:hover:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
+
   :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
     border-color: ${colorCompoundBrandStrokeHover};
   }
+
   :host([aria-checked='true']:hover:not([disabled])) .label {
     border-color: ${colorNeutralForeground1};
   }
@@ -145,9 +144,11 @@ export const styles = css`
   :host([aria-checked='true']:active:not([disabled])) .label {
     color: ${colorNeutralForeground1};
   }
+
   :host([aria-checked='true']:active:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
+
   :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
@@ -155,6 +156,7 @@ export const styles = css`
   :host([disabled][aria-checked='true']) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
+
   :host([disabled][aria-checked='true']) .checked-indicator {
     background-color: ${colorNeutralForegroundDisabled};
   }
@@ -163,14 +165,17 @@ export const styles = css`
   :host([readonly]) {
     pointer-events: none;
   }
+
   :host([disabled]) .label,
   :host([readonly]) .label {
     color: ${colorNeutralForegroundDisabled};
   }
+
   :host([readonly]) .control,
   :host([disabled]) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
+
   :host([disabled]) .checked-indicator,
   :host([readonly]) .checked-indicator {
     background-color: ${colorNeutralForegroundDisabled};

From 8c0eae2d70490efad4f065b1129801472872b101 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 13 Mar 2023 11:59:54 -0700
Subject: [PATCH 075/122] styles radio and radio group

---
 .../src/radio-group/radio-group.styles.ts     | 20 ++++++++++++++-----
 .../src/radio-group/radio-group.ts            | 20 +------------------
 .../web-components/src/radio/radio.styles.ts  |  5 -----
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 44eb24e64fd198..f5b9450908d3e1 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
   colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -26,21 +27,30 @@ export const styles = css`
   }
   ::slotted([slot='label']) {
     color: ${colorNeutralForeground3};
-    padding-inline: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     cursor: default;
   }
+
   .positioning-region {
     display: flex;
     flex-wrap: wrap;
   }
+
   :host([orientation='vertical']) .positioning-region {
     flex-direction: column;
   }
+
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
+
+  :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  :host([disabled]) ::slotted([role='radio'] ::slotted(.label)) {
+    color: ${colorNeutralForegroundDisabled};
+  }
 `;
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 89deb1d0eb88d7..5302f38317318e 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -13,24 +13,9 @@ export class RadioGroup extends FASTRadioGroup {
    * @remarks
    * HTML Attribute: stacked
    */
-  @attr({ attribute: 'stacked', mode: 'boolean' })
+  @attr({ mode: 'boolean' })
   public stacked: boolean = false;
 
-  protected layoutChanged(): void {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    if (this.slottedRadioButtons !== undefined) {
-      this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
-        if (this.stacked && this.orientation === 'horizontal') {
-          item.setAttribute('stack', '');
-        } else {
-          item.removeAttribute('stack');
-        }
-      });
-    }
-  }
-
   protected disableChanged(): void {
     if (!this.$fastController.isConnected) {
       return;
@@ -47,8 +32,5 @@ export class RadioGroup extends FASTRadioGroup {
     if (this.disabled) {
       this.disableChanged();
     }
-    if (this.stacked) {
-      this.layoutChanged();
-    }
   }
 }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 0e863a5cd54d04..636f81e29d7903 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -175,9 +175,4 @@ export const styles = css`
   :host([disabled]) .control {
     border-color: ${colorNeutralForegroundDisabled};
   }
-
-  :host([disabled]) .checked-indicator,
-  :host([readonly]) .checked-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
 `;

From 8fd62c0604c37dd2ad5ac3cb1a04fd97acf29dcc Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 16:53:47 -0700
Subject: [PATCH 076/122] removes dead code

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index f5b9450908d3e1..ff19731febad05 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -49,8 +49,4 @@ export const styles = css`
     flex-direction: column;
     justify-content: center;
   }
-
-  :host([disabled]) ::slotted([role='radio'] ::slotted(.label)) {
-    color: ${colorNeutralForegroundDisabled};
-  }
 `;

From 6d32614dfcd1d31851c7a7ce44726c7b82cb81d5 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 17:04:14 -0700
Subject: [PATCH 077/122] updates css value to token

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 636f81e29d7903..7f07c4af508e05 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  borderRadiusCircular,
   borderRadiusMedium,
   colorCompoundBrandForeground1,
   colorCompoundBrandForeground1Pressed,
@@ -57,7 +58,7 @@ export const styles = css`
   .control {
     align-items: center;
     border: 1px solid ${colorNeutralStrokeAccessible};
-    border-radius: 50%;
+    border-radius: ${borderRadiusCircular};
     display: flex;
     height: 16px;
     justify-content: center;
@@ -66,7 +67,7 @@ export const styles = css`
     width: 16px;
   }
   .checked-indicator {
-    border-radius: 5px;
+    border-radius: ${borderRadiusCircular};
     height: 10px;
     opacity: 0;
     width: 10px;

From b4646b7e1082fdc0e4f00f9851f9813663d317d6 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 14 Mar 2023 17:14:59 -0700
Subject: [PATCH 078/122] exports RadioGroupOrientation namespaced type

---
 packages/web-components/src/radio-group/index.ts |  1 +
 .../src/radio-group/radio-group.options.ts       | 16 ++++++++++++++++
 .../src/radio-group/radio-group.stories.ts       |  4 +++-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-components/src/radio-group/radio-group.options.ts

diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 967f498a393fbf..86b1c01ae162b9 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -1,4 +1,5 @@
 export * from './radio-group.js';
+export * from './radio-group.options.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.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
new file mode 100644
index 00000000000000..d962c11fa68d51
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.options.ts
@@ -0,0 +1,16 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+
+/**
+ * RadioGroupOrientation constants
+ * @public
+ */
+export const RadioGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+} as const;
+
+/**
+ * A RadioGroup's orientation can be either horizontal or vertical
+ * @public
+ */
+export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index a562febd7316f6..bf23d0a714a07d 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -4,6 +4,7 @@ import { renderComponent } from '../helpers.stories.js';
 import { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import './define.js';
 import '../radio/define.js';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 
 type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
@@ -73,8 +74,9 @@ export default {
     orientation: {
       control: {
         type: 'select',
-        options: ['horizontal', 'vertical'],
+        options: Object.values(RadioGroupOrientation),
       },
+      defaultValue: 'primary',
       table: {
         type: {
           summary: 'Sets orientation of radio group',

From 09d8c95132f13b7a253368204228ddc436201a16 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 15 Mar 2023 14:41:27 -0700
Subject: [PATCH 079/122] updates styles per design review

---
 .../web-components/src/radio-group/radio-group.styles.ts   | 7 +++----
 packages/web-components/src/radio/radio.styles.ts          | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index ff19731febad05..0f379c05793bd1 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,8 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
-  colorNeutralForeground3,
-  colorNeutralForegroundDisabled,
+  colorNeutralForeground1,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -10,7 +9,6 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
-  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -26,7 +24,7 @@ export const styles = css`
     row-gap: ${spacingVerticalS};
   }
   ::slotted([slot='label']) {
-    color: ${colorNeutralForeground3};
+    color: ${colorNeutralForeground1};
     padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
     font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     cursor: default;
@@ -48,5 +46,6 @@ export const styles = css`
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
     flex-direction: column;
     justify-content: center;
+    height: auto;
   }
 `;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7f07c4af508e05..9764c7efd2d177 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -23,6 +23,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalSNudge,
   spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
@@ -33,6 +34,7 @@ export const styles = css`
   ${display('inline-flex')}
 
   :host {
+    height: 32px;
     align-items: center;
     cursor: pointer;
     display: flex;
@@ -48,7 +50,7 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
+    padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
   }
 
   .label__hidden {
@@ -56,6 +58,7 @@ export const styles = css`
     visibility: hidden;
   }
   .control {
+    box-sizing: border-box;
     align-items: center;
     border: 1px solid ${colorNeutralStrokeAccessible};
     border-radius: ${borderRadiusCircular};

From 74bb90a836a9a3fa2d307b943593787ea4076711 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 15 Mar 2023 14:51:52 -0700
Subject: [PATCH 080/122] updates focus styles

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 9764c7efd2d177..3b18a56e7ce06c 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -79,7 +79,7 @@ export const styles = css`
   :host(:focus-visible)::after {
     border: 2px solid ${colorStrokeFocus1};
     border-radius: ${borderRadiusMedium};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    box-shadow: inset 0 0 0 2px ${colorStrokeFocus2};
     content: '';
     cursor: pointer;
     inset: 0px;

From b4fec61a69800d867410c57d4685bc3f279d1bc0 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 21 Mar 2023 15:48:02 -0700
Subject: [PATCH 081/122] reverts file

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

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index b7e7ab1a4b0648..85ade10ee7ee6c 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -108,7 +108,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    border-radius: ${borderRadiusSmall};
     outline: none;
     border: 2px solid ${colorStrokeFocus1};
     box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};

From 6518c800752ac219611aed1b4f43e22a5fac8968 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 21 Mar 2023 15:48:49 -0700
Subject: [PATCH 082/122] reverts 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 1461fca61850bc..00000000000000
--- 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 1dda4d5582966a3eeec67abf9456e3f72ee600bd Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 083/122] mege

---
 .../web-components/src/radio-group/radio-group.stories.ts     | 4 ++++
 packages/web-components/src/radio/radio.styles.ts             | 1 +
 2 files changed, 5 insertions(+)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index bf23d0a714a07d..4daa3fc4a72639 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,7 +18,11 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
+    <<<<<<< HEAD
     <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
+    =======
+    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
+    >>>>>>> 50c03a853f (updats radio and radio group stories)
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 3b18a56e7ce06c..b0bf63e2693757 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -11,6 +11,7 @@ import {
   colorNeutralForeground1,
   colorNeutralForeground2,
   colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
   colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,

From 4495bf7c87d9983604c10c5d142d35866172aa3b Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 7 Mar 2023 15:05:17 -0800
Subject: [PATCH 084/122] adds back story args

---
 .../src/radio-group/radio-group.stories.ts    |  4 ---
 .../web-components/src/radio/radio.stories.ts | 33 +++++++++++++++++--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 4daa3fc4a72639..b2b7367b358c58 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,11 +18,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <<<<<<< HEAD
-    <fluent-radio ?checked=${(x: { checked: any }) => x.checked} value="apple">Apple</fluent-radio>
-    =======
     <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
-    >>>>>>> 50c03a853f (updats radio and radio group stories)
     <fluent-radio value="pear"> Pear </fluent-radio>
     <fluent-radio value="banana"> Banana </fluent-radio>
     <fluent-radio value="orange"> Orange </fluent-radio>
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 1f869360e9d51b..4fc59649513fc6 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -25,8 +25,37 @@ const storyTemplate = html<RadioStoryArgs>`
 
 export default {
   title: 'Components/Radio',
-  args: {},
-  argTypes: {},
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets checked state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets default state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
 } as RadioStoryMeta;
 
 export const Radio = renderComponent(storyTemplate).bind({});

From 831e7207f42de194bf9d41b9ae19d61eae53761c Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 22 Mar 2023 12:27:17 -0700
Subject: [PATCH 085/122] re exports RadioGroupOrientation from FAST

---
 packages/web-components/src/radio-group/index.ts |  2 +-
 .../src/radio-group/radio-group.options.ts       | 16 ----------------
 2 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 packages/web-components/src/radio-group/radio-group.options.ts

diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 86b1c01ae162b9..cfc435af8a7537 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -1,5 +1,5 @@
 export * from './radio-group.js';
-export * from './radio-group.options.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';
+export { RadioGroupOrientation } from '@microsoft/fast-foundation';
diff --git a/packages/web-components/src/radio-group/radio-group.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
deleted file mode 100644
index d962c11fa68d51..00000000000000
--- a/packages/web-components/src/radio-group/radio-group.options.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ValuesOf } from '@microsoft/fast-foundation';
-
-/**
- * RadioGroupOrientation constants
- * @public
- */
-export const RadioGroupOrientation = {
-  horizontal: 'horizontal',
-  vertical: 'vertical',
-} as const;
-
-/**
- * A RadioGroup's orientation can be either horizontal or vertical
- * @public
- */
-export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;

From c058a2e2c14fb15a08d3c294f65810d4e3cad746 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 23 Mar 2023 14:42:58 -0700
Subject: [PATCH 086/122] removes redundant stack attribute

---
 packages/web-components/src/radio/radio.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index d5da495b43044c..de75e9633e6e12 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -5,14 +5,4 @@ import { FASTRadio } from '@microsoft/fast-foundation';
  * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export class Radio extends FASTRadio {
-  /**
-   * sets radio layout styles
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: stack
-   */
-  @attr({ mode: 'boolean' })
-  public stack: boolean = false;
-}
+export class Radio extends FASTRadio {}

From 0f0d7ec8cf731cec0eb4c540fddeaa67dbacbb67 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 23 Mar 2023 15:23:09 -0700
Subject: [PATCH 087/122] testing local tokens for disabled styling

---
 .../src/radio-group/radio-group.styles.ts     |  4 ++
 .../src/radio-group/radio-group.ts            | 28 ++++++---
 .../web-components/src/radio/radio.styles.ts  | 60 ++++++++-----------
 3 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 0f379c05793bd1..34ee00efca14bd 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -48,4 +48,8 @@ export const styles = css`
     justify-content: center;
     height: auto;
   }
+
+  :host([disabled]) ::slotted([role='radio']) {
+    pointer-events: none;
+  }
 `;
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 5302f38317318e..edd22e559e7546 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,3 +1,10 @@
+import {
+  colorCompoundBrandForeground1,
+  colorCompoundBrandStroke,
+  colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
+  colorNeutralStrokeAccessible,
+} from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
 
@@ -16,21 +23,28 @@ export class RadioGroup extends FASTRadioGroup {
   @attr({ mode: 'boolean' })
   public stacked: boolean = false;
 
-  protected disableChanged(): void {
+  protected createLocalTokens(): void {
     if (!this.$fastController.isConnected) {
       return;
     }
-    this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
-      if (this.disabled) {
-        item.setAttribute('disabled', '');
-      }
-    });
+
+    if (this.disabled) {
+      this.style.setProperty('--control-border-color-checked', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
+    }
   }
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
+    this.style.setProperty('--control-border-color-checked', `${colorCompoundBrandStroke.$value}`);
+    this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
+    this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
+    this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+
     if (this.disabled) {
-      this.disableChanged();
+      this.createLocalTokens();
     }
   }
 }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index b0bf63e2693757..d2d86cead37eed 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -45,7 +45,7 @@ export const styles = css`
     user-select: none;
   }
   .label {
-    color: ${colorNeutralForeground3};
+    color: var(--label-color);
     cursor: pointer;
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
@@ -61,7 +61,7 @@ export const styles = css`
   .control {
     box-sizing: border-box;
     align-items: center;
-    border: 1px solid ${colorNeutralStrokeAccessible};
+    border: 1px solid var(--control-border-color);
     border-radius: ${borderRadiusCircular};
     display: flex;
     height: 16px;
@@ -101,19 +101,19 @@ export const styles = css`
     margin: ${spacingVerticalS} ${spacingHorizontalS};
   }
 
-  :host(:not([disabled]):hover) .label {
+  :host(:hover) .label {
     color: ${colorNeutralForeground2};
   }
 
-  :host(:not([disabled]):active) .label {
+  :host(:active) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host(:not([disabled]):hover) .control {
+  :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
 
-  :host(:not([disabled]):active) .control {
+  :host(:active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
 
@@ -121,63 +121,51 @@ export const styles = css`
     opacity: 1;
   }
 
-  :host([aria-checked='true']:not([disabled])) .label {
+  :host([aria-checked='true']) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:not([disabled])) .control {
-    border-color: ${colorCompoundBrandStroke};
+  :host([aria-checked='true']) .control {
+    border-color: var(--control-border-color);
   }
 
-  :host([aria-checked='true']:not([disabled])) .checked-indicator {
-    background-color: ${colorCompoundBrandForeground1};
+  :host([aria-checked='true']) .checked-indicator {
+    background-color: var(--checked-indicator-background-color);
     display: block;
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+  :host([readonly]) .control,
+  :host([disabled]) .control {
+    pointer-events; None;
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
 
-  :host([aria-checked='true']:hover:not([disabled])) .label {
+  :host([aria-checked='true']:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandStrokeHover};
+  }
+
+  :host([aria-checked='true']:hover) .label {
     border-color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .label {
+  :host([aria-checked='true']:active) .label {
     color: ${colorNeutralForeground1};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .control {
+  :host([aria-checked='true']:active) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
 
-  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([disabled][aria-checked='true']) .control {
-    border-color: ${colorNeutralForegroundDisabled};
-  }
-
-  :host([disabled][aria-checked='true']) .checked-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-
-  :host([disabled]),
-  :host([readonly]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .label,
-  :host([readonly]) .label {
-    color: ${colorNeutralForegroundDisabled};
-  }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
+    pointer-events; None;
     border-color: ${colorNeutralForegroundDisabled};
   }
 `;

From 9984b79e1eda2b92e00b38303b03c1f2ece7e04c Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:05:19 -0700
Subject: [PATCH 088/122] radio: updates styles per review

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index d2d86cead37eed..27f057b815a04d 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -38,14 +38,13 @@ export const styles = css`
     height: 32px;
     align-items: center;
     cursor: pointer;
-    display: flex;
     flex-direction: row;
     outline: none;
     position: relative;
     user-select: none;
+    color: ${colorNeutralForeground1};
   }
   .label {
-    color: var(--label-color);
     cursor: pointer;
     font-family: ${fontFamilyBase};
     font-size: ${fontSizeBase300};
@@ -53,7 +52,6 @@ export const styles = css`
     line-height: ${lineHeightBase300};
     padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
   }
-
   .label__hidden {
     display: none;
     visibility: hidden;
@@ -76,7 +74,9 @@ export const styles = css`
     opacity: 0;
     width: 10px;
   }
-
+  :host([aria-checked='false']:hover) {
+    color: ${colorNeutralForeground2};
+  }
   :host(:focus-visible)::after {
     border: 2px solid ${colorStrokeFocus1};
     border-radius: ${borderRadiusMedium};
@@ -87,85 +87,51 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-
   :host([stack]) {
     flex-direction: column;
     justify-content: center;
   }
-
   :host([stack]) .label {
     padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
   }
-
   :host([stack]) .control {
     margin: ${spacingVerticalS} ${spacingHorizontalS};
   }
-
-  :host(:hover) .label {
-    color: ${colorNeutralForeground2};
-  }
-
-  :host(:active) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-
   :host(:active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-
   :host([aria-checked='true']) .checked-indicator {
     opacity: 1;
   }
-
-  :host([aria-checked='true']) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host([aria-checked='true']) .control {
     border-color: var(--control-border-color);
   }
-
   :host([aria-checked='true']) .checked-indicator {
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
-    pointer-events; None;
+    pointer-events: none;
   }
-
   :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
-
   :host([aria-checked='true']:hover) .checked-indicator {
     background-color: ${colorCompoundBrandStrokeHover};
   }
-
-  :host([aria-checked='true']:hover) .label {
-    border-color: ${colorNeutralForeground1};
-  }
-
-  :host([aria-checked='true']:active) .label {
-    color: ${colorNeutralForeground1};
-  }
-
   :host([aria-checked='true']:active) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
-
   :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
-
   :host([readonly]) .control,
   :host([disabled]) .control {
-    pointer-events; None;
+    pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
   }
 `;

From 8e9a8bd8ab5d416493ca8195e8bb3c85f82794f4 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:19:29 -0700
Subject: [PATCH 089/122] radio: updates design tokens & styles

---
 .../src/radio-group/radio-group.ts              | 17 ++++++++++++++++-
 .../web-components/src/radio/radio.styles.ts    | 12 +-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index edd22e559e7546..791b9290390e84 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -4,6 +4,11 @@ import {
   colorNeutralForeground3,
   colorNeutralForegroundDisabled,
   colorNeutralStrokeAccessible,
+  spacingHorizontalS,
+  spacingHorizontalXS,
+  spacingVerticalS,
+  spacingVerticalSNudge,
+  spacingVerticalXS,
 } from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
@@ -34,6 +39,12 @@ export class RadioGroup extends FASTRadioGroup {
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
     }
+    if (this.stacked) {
+      this.style.setProperty(
+        '--stacked-padding',
+        `${spacingVerticalXS.$value} ${spacingHorizontalS.$value} ${spacingVerticalS.$value} ${spacingHorizontalS.$value}`,
+      );
+    }
   }
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
@@ -42,8 +53,12 @@ export class RadioGroup extends FASTRadioGroup {
     this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
     this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
     this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+    this.style.setProperty(
+      '--stacked-padding',
+      `${spacingVerticalSNudge.$value} ${spacingHorizontalS.$value} ${spacingVerticalSNudge.$value} ${spacingHorizontalXS.$value}`,
+    );
 
-    if (this.disabled) {
+    if (this.disabled || this.stacked) {
       this.createLocalTokens();
     }
   }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 27f057b815a04d..7222f58f94a4db 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -50,7 +50,7 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
+    padding: var(--stacked-padding);
   }
   .label__hidden {
     display: none;
@@ -87,16 +87,6 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-  :host([stack]) {
-    flex-direction: column;
-    justify-content: center;
-  }
-  :host([stack]) .label {
-    padding: ${spacingVerticalXS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalS};
-  }
-  :host([stack]) .control {
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
-  }
   :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }

From 197010c332deea32c52b43077218a0f3c2332444 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 27 Mar 2023 12:38:19 -0700
Subject: [PATCH 090/122] radio: adds storybook content

---
 .../src/radio-group/radio-group.ts              |  4 ++--
 .../web-components/src/radio/radio.stories.ts   | 17 +++++++++++++----
 .../web-components/src/radio/radio.styles.ts    | 11 ++++++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 791b9290390e84..3e70c08dfd1a4d 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -37,7 +37,7 @@ export class RadioGroup extends FASTRadioGroup {
       this.style.setProperty('--control-border-color-checked', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
-      this.style.setProperty('--label-color', `${colorNeutralForegroundDisabled.$value}`);
+      this.style.setProperty('--state-color', `${colorNeutralForegroundDisabled.$value}`);
     }
     if (this.stacked) {
       this.style.setProperty(
@@ -52,7 +52,7 @@ export class RadioGroup extends FASTRadioGroup {
     this.style.setProperty('--control-border-color-checked', `${colorCompoundBrandStroke.$value}`);
     this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
     this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
-    this.style.setProperty('--label-color', `${colorNeutralForeground3.$value}`);
+    this.style.setProperty('--state-color', `${colorNeutralForeground3.$value}`);
     this.style.setProperty(
       '--stacked-padding',
       `${spacingVerticalSNudge.$value} ${spacingHorizontalS.$value} ${spacingVerticalSNudge.$value} ${spacingHorizontalXS.$value}`,
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 4fc59649513fc6..12dc348d96b335 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -15,11 +15,8 @@ const storyTemplate = html<RadioStoryArgs>`
       ?checked=${(x: { checked: boolean }) => x.checked}
       value="Apple"
     >
-      Apple
+      Option 1
     </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Pear"> Pear </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Banana"> Banana </fluent-radio>
-    <fluent-radio ?disabled=${(x: { disabled: boolean }) => x.disabled} value="Orange"> Orange </fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -59,3 +56,15 @@ export default {
 } as RadioStoryMeta;
 
 export const Radio = renderComponent(storyTemplate).bind({});
+
+export const Checked = renderComponent(html<RadioStoryArgs>`
+  <fluent-radio-group nname="radio-story">
+    <fluent-radio checked="true" value="Apple"> Option 1 </fluent-radio>
+  </fluent-radio-group>
+`);
+
+export const Disabled = renderComponent(html<RadioStoryArgs>`
+  <fluent-radio-group nname="radio-story">
+    <fluent-radio disabled="true" value="Apple"> Option 1 </fluent-radio>
+  </fluent-radio-group>
+`);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 7222f58f94a4db..b2c18b75cf3807 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -42,7 +42,11 @@ export const styles = css`
     outline: none;
     position: relative;
     user-select: none;
-    color: ${colorNeutralForeground1};
+    color: var(--state-color);
+  }
+  :host([disabled]),
+  :host([required]) {
+    color: ${colorNeutralForegroundDisabled};
   }
   .label {
     cursor: pointer;
@@ -103,7 +107,6 @@ export const styles = css`
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
-  :host([readonly]) .control,
   :host([disabled]) .control {
     pointer-events: none;
   }
@@ -119,9 +122,11 @@ export const styles = css`
   :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
-  :host([readonly]) .control,
   :host([disabled]) .control {
     pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
   }
+  :host([required]) .checked-indicator {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
 `;

From e4601a08d7b96afeb1ed8cd4aaffd15954212a93 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 11:23:21 -0700
Subject: [PATCH 091/122] radio: initiates css variables in css

---
 .../src/radio-group/radio-group.styles.ts              |  8 ++++++++
 packages/web-components/src/radio-group/radio-group.ts | 10 ----------
 packages/web-components/src/radio/radio.styles.ts      |  8 --------
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 34ee00efca14bd..3f7becef178a3a 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,7 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+  colorCompoundBrandForeground1,
   colorNeutralForeground1,
+  colorNeutralForeground3,
+  colorNeutralStrokeAccessible,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -9,6 +12,7 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
+  spacingVerticalSNudge,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -18,6 +22,10 @@ export const styles = css`
   ${display('flex')}
 
   :host {
+    --control-border-color: ${colorNeutralStrokeAccessible};
+    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
+    --state-color: ${colorNeutralForeground3};
+    --stacked-padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
     align-items: flex-start;
     flex-direction: column;
     margin: 2px 0;
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 3e70c08dfd1a4d..932cbe81e466ad 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -34,7 +34,6 @@ export class RadioGroup extends FASTRadioGroup {
     }
 
     if (this.disabled) {
-      this.style.setProperty('--control-border-color-checked', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--state-color', `${colorNeutralForegroundDisabled.$value}`);
@@ -49,15 +48,6 @@ export class RadioGroup extends FASTRadioGroup {
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
-    this.style.setProperty('--control-border-color-checked', `${colorCompoundBrandStroke.$value}`);
-    this.style.setProperty('--control-border-color', `${colorNeutralStrokeAccessible.$value}`);
-    this.style.setProperty('--checked-indicator-background-color', `${colorCompoundBrandForeground1.$value}`);
-    this.style.setProperty('--state-color', `${colorNeutralForeground3.$value}`);
-    this.style.setProperty(
-      '--stacked-padding',
-      `${spacingVerticalSNudge.$value} ${spacingHorizontalS.$value} ${spacingVerticalSNudge.$value} ${spacingHorizontalXS.$value}`,
-    );
-
     if (this.disabled || this.stacked) {
       this.createLocalTokens();
     }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index b2c18b75cf3807..65e309c8a0338d 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -3,16 +3,11 @@ import { display } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
-  colorCompoundBrandForeground1,
   colorCompoundBrandForeground1Pressed,
-  colorCompoundBrandStroke,
   colorCompoundBrandStrokeHover,
   colorCompoundBrandStrokePressed,
-  colorNeutralForeground1,
   colorNeutralForeground2,
-  colorNeutralForeground3,
   colorNeutralForegroundDisabled,
-  colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,
   colorStrokeFocus1,
@@ -22,10 +17,7 @@ import {
   fontWeightRegular,
   lineHeightBase300,
   spacingHorizontalS,
-  spacingHorizontalXS,
   spacingVerticalS,
-  spacingVerticalSNudge,
-  spacingVerticalXS,
 } from '../theme/design-tokens.js';
 
 /** Radio styles

From 52901ab7780cf30c5ebb3c789c7e75d4356b7002 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 28 Mar 2023 13:42:03 -0700
Subject: [PATCH 092/122] leverage css grid for spacing and remove js
 application for padding

---
 .../src/radio-group/radio-group.styles.ts     |  6 ++----
 .../src/radio-group/radio-group.ts            | 21 ++-----------------
 .../web-components/src/radio/radio.styles.ts  | 11 ++++++----
 3 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 3f7becef178a3a..dd0bdfa18d7f4b 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -12,7 +12,6 @@ import {
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingVerticalS,
-  spacingVerticalSNudge,
 } from '../theme/design-tokens.js';
 
 /** RadioGroup styles
@@ -25,7 +24,6 @@ export const styles = css`
     --control-border-color: ${colorNeutralStrokeAccessible};
     --checked-indicator-background-color: ${colorCompoundBrandForeground1};
     --state-color: ${colorNeutralForeground3};
-    --stacked-padding: ${spacingVerticalSNudge} ${spacingHorizontalS} ${spacingVerticalSNudge} ${spacingHorizontalXS};
     align-items: flex-start;
     flex-direction: column;
     margin: 2px 0;
@@ -52,8 +50,8 @@ export const styles = css`
   }
 
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
-    flex-direction: column;
-    justify-content: center;
+    grid-auto-flow: row;
+    padding-inline-start: ${spacingHorizontalS};
     height: auto;
   }
 
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 932cbe81e466ad..8946eb7174a8e7 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,15 +1,4 @@
-import {
-  colorCompoundBrandForeground1,
-  colorCompoundBrandStroke,
-  colorNeutralForeground3,
-  colorNeutralForegroundDisabled,
-  colorNeutralStrokeAccessible,
-  spacingHorizontalS,
-  spacingHorizontalXS,
-  spacingVerticalS,
-  spacingVerticalSNudge,
-  spacingVerticalXS,
-} from '@fluentui/web-components';
+import { colorNeutralForegroundDisabled } from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
 
@@ -38,17 +27,11 @@ export class RadioGroup extends FASTRadioGroup {
       this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
       this.style.setProperty('--state-color', `${colorNeutralForegroundDisabled.$value}`);
     }
-    if (this.stacked) {
-      this.style.setProperty(
-        '--stacked-padding',
-        `${spacingVerticalXS.$value} ${spacingHorizontalS.$value} ${spacingVerticalS.$value} ${spacingHorizontalS.$value}`,
-      );
-    }
   }
 
   protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
     super.slottedRadioButtonsChanged(oldValue, newValue);
-    if (this.disabled || this.stacked) {
+    if (this.disabled) {
       this.createLocalTokens();
     }
   }
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 65e309c8a0338d..030cd7b9da903d 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -17,6 +17,7 @@ import {
   fontWeightRegular,
   lineHeightBase300,
   spacingHorizontalS,
+  spacingHorizontalXS,
   spacingVerticalS,
 } from '../theme/design-tokens.js';
 
@@ -24,13 +25,15 @@ import {
  * @public
  */
 export const styles = css`
-  ${display('inline-flex')}
+  ${display('inline-grid')}
 
   :host {
-    height: 32px;
+    grid-auto-flow: column;
+    grid-template-columns: max-content;
+    gap: ${spacingHorizontalXS};
     align-items: center;
+    height: 32px;
     cursor: pointer;
-    flex-direction: row;
     outline: none;
     position: relative;
     user-select: none;
@@ -46,7 +49,7 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    padding: var(--stacked-padding);
+    margin-inline-end: ${spacingHorizontalS};
   }
   .label__hidden {
     display: none;

From d4ffc456ccb5e359e9cdd6bcdc65fe8c6b30b282 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 14:13:33 -0700
Subject: [PATCH 093/122] radio: adds export to root json

---
 packages/web-components/package.json          |  8 ++++++++
 .../web-components/src/radio/radio.styles.ts  | 20 +++++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 9682bc4e171ac4..237a02dcbc9797 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -60,6 +60,14 @@
       "types": "./dist/esm/progress-bar/define.d.ts",
       "default": "./dist/esm/progress-bar/define.js"
     },
+    "./radio": {
+      "types": "./dist/esm/radio/define.d.ts",
+      "default": "./dist/esm/radio/define.js"
+    },
+    "./radio-group": {
+      "types": "./dist/esm/radio-group/define.d.ts",
+      "default": "./dist/esm/radio-group/define.js"
+    },
     "./slider": {
       "types": "./dist/esm/slider/define.d.ts",
       "default": "./dist/esm/slider/define.js"
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 030cd7b9da903d..68fd1248bcf2ef 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -73,7 +73,7 @@ export const styles = css`
     opacity: 0;
     width: 10px;
   }
-  :host([aria-checked='false']:hover) {
+  :host([aria-checked='false']:hover:not([disabled])) .control {
     color: ${colorNeutralForeground2};
   }
   :host(:focus-visible)::after {
@@ -86,35 +86,35 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-  :host(:hover) .control {
+  :host(:hover:not([disabled])) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host(:active) .control {
+  :host(:active:not([disabled])) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']) .checked-indicator {
+  :host([aria-checked='true']:not([disabled])) .checked-indicator {
     opacity: 1;
   }
-  :host([aria-checked='true']) .control {
+  :host([aria-checked='true']:not([disabled])) .control {
     border-color: var(--control-border-color);
   }
-  :host([aria-checked='true']) .checked-indicator {
+  :host([aria-checked='true']:not([disabled])) .checked-indicator {
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
   :host([disabled]) .control {
     pointer-events: none;
   }
-  :host([aria-checked='true']:hover) .control {
+  :host([aria-checked='true']:hover:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:hover) .checked-indicator {
+  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
     background-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:active) .control {
+  :host([aria-checked='true']:active:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
-  :host([aria-checked='true']:active) .checked-indicator {
+  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
   :host([disabled]) .control {

From 12de504851f538d9c95be60a9f966b8b3dac0a5a Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 14:37:01 -0700
Subject: [PATCH 094/122] radio: changes per review

---
 packages/web-components/src/radio/radio.stories.ts |  4 ++--
 packages/web-components/src/radio/radio.styles.ts  | 10 ++--------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 12dc348d96b335..82fad963da3855 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -58,13 +58,13 @@ export default {
 export const Radio = renderComponent(storyTemplate).bind({});
 
 export const Checked = renderComponent(html<RadioStoryArgs>`
-  <fluent-radio-group nname="radio-story">
+  <fluent-radio-group name="radio-story">
     <fluent-radio checked="true" value="Apple"> Option 1 </fluent-radio>
   </fluent-radio-group>
 `);
 
 export const Disabled = renderComponent(html<RadioStoryArgs>`
-  <fluent-radio-group nname="radio-story">
+  <fluent-radio-group name="radio-story">
     <fluent-radio disabled="true" value="Apple"> Option 1 </fluent-radio>
   </fluent-radio-group>
 `);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 68fd1248bcf2ef..d9d2de5d1ad7dd 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -39,8 +39,7 @@ export const styles = css`
     user-select: none;
     color: var(--state-color);
   }
-  :host([disabled]),
-  :host([required]) {
+  :host([disabled]) {
     color: ${colorNeutralForegroundDisabled};
   }
   .label {
@@ -102,9 +101,6 @@ export const styles = css`
     background-color: var(--checked-indicator-background-color);
     display: block;
   }
-  :host([disabled]) .control {
-    pointer-events: none;
-  }
   :host([aria-checked='true']:hover:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
@@ -120,8 +116,6 @@ export const styles = css`
   :host([disabled]) .control {
     pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
-  }
-  :host([required]) .checked-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
   }
 `;

From 612877b3c9a4ba5cde5ec99c0b62d9a38b6ad4dd Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 14:39:05 -0700
Subject: [PATCH 095/122] radio: removes pointer events from disabled radio
 item

---
 packages/web-components/src/radio/radio.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index d9d2de5d1ad7dd..5c399d82873188 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -41,6 +41,7 @@ export const styles = css`
   }
   :host([disabled]) {
     color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
   }
   .label {
     cursor: pointer;

From 664a6981f45d8898e689a34ec2d3fd8c140cceb2 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 14:42:41 -0700
Subject: [PATCH 096/122] radio: updates styling

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

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index dd0bdfa18d7f4b..bf813de8db6c9f 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -26,7 +26,6 @@ export const styles = css`
     --state-color: ${colorNeutralForeground3};
     align-items: flex-start;
     flex-direction: column;
-    margin: 2px 0;
     row-gap: ${spacingVerticalS};
   }
   ::slotted([slot='label']) {

From 4087145f314a1148ed3c95919e5e67f1cd41d7ce Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 14:43:26 -0700
Subject: [PATCH 097/122] radio: styles formatting

---
 .../web-components/src/radio-group/radio-group.styles.ts     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index bf813de8db6c9f..505abab64fe637 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -34,26 +34,21 @@ export const styles = css`
     font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     cursor: default;
   }
-
   .positioning-region {
     display: flex;
     flex-wrap: wrap;
   }
-
   :host([orientation='vertical']) .positioning-region {
     flex-direction: column;
   }
-
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
-
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
     grid-auto-flow: row;
     padding-inline-start: ${spacingHorizontalS};
     height: auto;
   }
-
   :host([disabled]) ::slotted([role='radio']) {
     pointer-events: none;
   }

From e46a081c7c39701f49105b1dcfa4e0b47115757d Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 28 Mar 2023 15:30:31 -0700
Subject: [PATCH 098/122] radio: updates styles

---
 .../src/radio-group/radio-group.styles.ts             | 11 +++++++++--
 packages/web-components/src/radio/radio.styles.ts     |  3 +--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 505abab64fe637..42a532f10e6e75 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -40,14 +40,21 @@ export const styles = css`
   }
   :host([orientation='vertical']) .positioning-region {
     flex-direction: column;
+    justify-content: flex-start;
   }
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
+  :host([orientation='horizontal']:not([stacked])) ::slotted([role='radio']) {
+    padding-inline-end: ${spacingHorizontalS};
+  }
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
-    grid-auto-flow: row;
-    padding-inline-start: ${spacingHorizontalS};
+    display: flex;
+    flex-direction: column;
+    padding-inline: ${spacingHorizontalS};
     height: auto;
+    align-items: center;
+    justify-content: center;
   }
   :host([disabled]) ::slotted([role='radio']) {
     pointer-events: none;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 5c399d82873188..332edf394ed242 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -49,7 +49,6 @@ export const styles = css`
     font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
     line-height: ${lineHeightBase300};
-    margin-inline-end: ${spacingHorizontalS};
   }
   .label__hidden {
     display: none;
@@ -66,6 +65,7 @@ export const styles = css`
     margin: ${spacingVerticalS} ${spacingHorizontalS};
     position: relative;
     width: 16px;
+    justify-self: center;
   }
   .checked-indicator {
     border-radius: ${borderRadiusCircular};
@@ -100,7 +100,6 @@ export const styles = css`
   }
   :host([aria-checked='true']:not([disabled])) .checked-indicator {
     background-color: var(--checked-indicator-background-color);
-    display: block;
   }
   :host([aria-checked='true']:hover:not([disabled])) .control {
     border-color: ${colorCompoundBrandStrokeHover};

From 2778e3a9881e8e4c11142b09cedcefdf159f6496 Mon Sep 17 00:00:00 2001
From: BrdyBrn <brian.christopher.brady@gmail.com>
Date: Tue, 28 Mar 2023 16:29:12 -0700
Subject: [PATCH 099/122] Update
 change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
---
 ...tui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
index 2f8ce2af12cee1..35fa050bf1d102 100644
--- a/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
+++ b/change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "adds radio and radio group web component",
+  "comment": "feat(radio): add radio and radio-group web components",
   "packageName": "@fluentui/web-components",
   "email": "brianbrady@microsoft.com",
   "dependentChangeType": "patch"

From b059373870b690cff294c1723e2d06ed320467c5 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 29 Mar 2023 15:38:16 -0700
Subject: [PATCH 100/122] removes redundant style

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 332edf394ed242..ddb7f6a15fa312 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -52,7 +52,6 @@ export const styles = css`
   }
   .label__hidden {
     display: none;
-    visibility: hidden;
   }
   .control {
     box-sizing: border-box;

From 82c2a854f919039b2e5a385590026f43c30ad097 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 31 Mar 2023 14:27:10 -0700
Subject: [PATCH 101/122] radio: addresses pr feedback

---
 .../src/radio-group/radio-group.stories.ts    | 76 +++++++++----------
 .../web-components/src/radio/radio.stories.ts | 12 +--
 .../web-components/src/radio/radio.styles.ts  | 28 +++----
 3 files changed, 55 insertions(+), 61 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index b2b7367b358c58..fca52aef252fa0 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -12,16 +12,16 @@ type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
 const storyTemplate = html<RadioGroupStoryArgs>`
   <fluent-radio-group
     aria-labelledby="label-1"
-    ?disabled=${(x: { disabled: boolean }) => x.disabled}
-    ?stacked=${(x: { stacked: boolean }) => x.stacked}
-    orientation=${(x: { orientation: 'vertical' | 'horizontal' }) => x.orientation}
+    ?disabled=${x => x.disabled}
+    ?stacked=${x => x.stacked}
+    orientation=${x => x.orientation}
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple" ?checked=${(x: { checked: boolean }) => x.checked}> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple" ?checked=${x => x.checked}>Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -29,7 +29,7 @@ export default {
   title: 'Components/RadioGroup',
   args: {
     disabled: false,
-    orientation: 'horizontal',
+    orientation: RadioGroupOrientation.horizontal,
   },
   argTypes: {
     checked: {
@@ -51,7 +51,7 @@ export default {
       },
       table: {
         type: {
-          summary: 'Sets default state on radio',
+          summary: 'Sets disabled state on radio',
         },
         defaultValue: {
           summary: 'false',
@@ -64,7 +64,7 @@ export default {
       },
       table: {
         type: {
-          summary: 'Sets layout of radio buttons',
+          summary: 'Creates a stacked layout for horizontal radio buttons',
         },
         defaultValue: {
           summary: 'false',
@@ -94,69 +94,69 @@ export const RadioGroup = renderComponent(storyTemplate).bind({});
 export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-2" name="radio-story">
     <span id="label-2" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-3" orientation="vertical" name="radio-story">
     <span id="label-3" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" name="radio-story">
     <span id="label-4" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" name="radio-story">
     <span id="label-5" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story">
     <span id="label-6" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple"> Apple </fluent-radio>
-    <fluent-radio checked value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio checked value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group disabled aria-labelledby="label-7" name="radio-story">
     <span id="label-7" slot="label">Favorite Fruit</span>
-    <fluent-radio checked value="apple"> Apple </fluent-radio>
-    <fluent-radio checked value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio checked value="apple">Apple</fluent-radio>
+    <fluent-radio checked value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-8" name="radio-story">
     <span id="label-8" slot="label">Favorite Fruit</span>
-    <fluent-radio checked value="apple"> Apple </fluent-radio>
-    <fluent-radio disabled value="pear"> Pear </fluent-radio>
-    <fluent-radio value="banana"> Banana </fluent-radio>
-    <fluent-radio value="orange"> Orange </fluent-radio>
+    <fluent-radio checked value="apple">Apple</fluent-radio>
+    <fluent-radio disabled value="pear">Pear</fluent-radio>
+    <fluent-radio value="banana">Banana</fluent-radio>
+    <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 82fad963da3855..4fc0f7fccaf530 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -10,13 +10,7 @@ type RadioStoryMeta = Meta<RadioStoryArgs>;
 
 const storyTemplate = html<RadioStoryArgs>`
   <fluent-radio-group orientation="vertical" role="radiogroup" name="radio-story">
-    <fluent-radio
-      ?disabled=${(x: { disabled: boolean }) => x.disabled}
-      ?checked=${(x: { checked: boolean }) => x.checked}
-      value="Apple"
-    >
-      Option 1
-    </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Option 1 </fluent-radio>
   </fluent-radio-group>
 `;
 
@@ -59,12 +53,12 @@ export const Radio = renderComponent(storyTemplate).bind({});
 
 export const Checked = renderComponent(html<RadioStoryArgs>`
   <fluent-radio-group name="radio-story">
-    <fluent-radio checked="true" value="Apple"> Option 1 </fluent-radio>
+    <fluent-radio checked="true" value="Apple">Apple</fluent-radio>
   </fluent-radio-group>
 `);
 
 export const Disabled = renderComponent(html<RadioStoryArgs>`
   <fluent-radio-group name="radio-story">
-    <fluent-radio disabled="true" value="Apple"> Option 1 </fluent-radio>
+    <fluent-radio disabled="true" value="Apple">Apple</fluent-radio>
   </fluent-radio-group>
 `);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index ddb7f6a15fa312..537e14887db197 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -39,10 +39,6 @@ export const styles = css`
     user-select: none;
     color: var(--state-color);
   }
-  :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
-    pointer-events: none;
-  }
   .label {
     cursor: pointer;
     font-family: ${fontFamilyBase};
@@ -72,7 +68,7 @@ export const styles = css`
     opacity: 0;
     width: 10px;
   }
-  :host([aria-checked='false']:hover:not([disabled])) .control {
+  :host([aria-checked='false']:hover) .control {
     color: ${colorNeutralForeground2};
   }
   :host(:focus-visible)::after {
@@ -85,31 +81,31 @@ export const styles = css`
     outline: none;
     position: absolute;
   }
-  :host(:hover:not([disabled])) .control {
+  :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host(:active:not([disabled])) .control {
+  :host(:active) .control {
     border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']) .checked-indicator {
     opacity: 1;
   }
-  :host([aria-checked='true']:not([disabled])) .control {
+  :host([aria-checked='true']) .control {
     border-color: var(--control-border-color);
   }
-  :host([aria-checked='true']:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']) .checked-indicator {
     background-color: var(--checked-indicator-background-color);
   }
-  :host([aria-checked='true']:hover:not([disabled])) .control {
+  :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:hover:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:hover) .checked-indicator {
     background-color: ${colorCompoundBrandStrokeHover};
   }
-  :host([aria-checked='true']:active:not([disabled])) .control {
+  :host([aria-checked='true']:active) .control {
     border-color: ${colorCompoundBrandStrokePressed};
   }
-  :host([aria-checked='true']:active:not([disabled])) .checked-indicator {
+  :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
   :host([disabled]) .control {
@@ -117,4 +113,8 @@ export const styles = css`
     border-color: ${colorNeutralForegroundDisabled};
     pointer-events: none;
   }
+  :host([disabled]) {
+    color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
+  }
 `;

From 6921a19c6e1e1b9b3d0e16033a835e7f5c51befa Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 31 Mar 2023 14:31:30 -0700
Subject: [PATCH 102/122] radio: updates disabled styles

---
 packages/web-components/src/radio/radio.stories.ts | 2 +-
 packages/web-components/src/radio/radio.styles.ts  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 4fc0f7fccaf530..449b52c00c7157 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -10,7 +10,7 @@ type RadioStoryMeta = Meta<RadioStoryArgs>;
 
 const storyTemplate = html<RadioStoryArgs>`
   <fluent-radio-group orientation="vertical" role="radiogroup" name="radio-story">
-    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple"> Option 1 </fluent-radio>
+    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple">Option 1</fluent-radio>
   </fluent-radio-group>
 `;
 
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 537e14887db197..0eb2765fb553fe 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -108,13 +108,16 @@ export const styles = css`
   :host([aria-checked='true']:active) .checked-indicator {
     background: ${colorCompoundBrandForeground1Pressed};
   }
+  :host([disabled]) {
+    color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
+  }
   :host([disabled]) .control {
     pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
     pointer-events: none;
   }
-  :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
-    pointer-events: none;
+  :host([disabled]) .checked-indicator {
+    background: ${colorNeutralForegroundDisabled};
   }
 `;

From 02b9cfffafd98515dff070fcf5cf2a476f2e8bcc Mon Sep 17 00:00:00 2001
From: BrdyBrn <brian.christopher.brady@gmail.com>
Date: Fri, 31 Mar 2023 14:32:12 -0700
Subject: [PATCH 103/122] Update
 packages/web-components/src/radio/radio.stories.ts

Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 packages/web-components/src/radio/radio.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 449b52c00c7157..47a49620f2079a 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -39,7 +39,7 @@ export default {
       },
       table: {
         type: {
-          summary: 'Sets default state on radio',
+          summary: 'Sets disabled state on radio',
         },
         defaultValue: {
           summary: 'false',

From 30d7c05c5088c87b6333c53d03276383befde325 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 31 Mar 2023 14:34:40 -0700
Subject: [PATCH 104/122] radio: swaps args table value for const

---
 .../web-components/src/radio-group/radio-group.stories.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index fca52aef252fa0..5048563829eb79 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -76,13 +76,13 @@ export default {
         type: 'select',
         options: Object.values(RadioGroupOrientation),
       },
-      defaultValue: 'primary',
+      defaultValue: RadioGroupOrientation.horizontal,
       table: {
         type: {
           summary: 'Sets orientation of radio group',
         },
         defaultValue: {
-          summary: 'horizontal',
+          summary: RadioGroupOrientation.horizontal,
         },
       },
     },

From 96a50f3bca212e57aad9062ecb33aaec712909f7 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 31 Mar 2023 16:25:29 -0700
Subject: [PATCH 105/122] radio: removes duplicate style

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

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 0eb2765fb553fe..db7aa736d84941 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -115,7 +115,6 @@ export const styles = css`
   :host([disabled]) .control {
     pointer-events: none;
     border-color: ${colorNeutralForegroundDisabled};
-    pointer-events: none;
   }
   :host([disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};

From 592421ee124e022431c7eb951867db2841da9fc1 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 4 Apr 2023 11:05:15 -0700
Subject: [PATCH 106/122] radio: optimizes styles

---
 packages/web-components/src/radio-group/radio-group.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 42a532f10e6e75..887e3c89324346 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -45,7 +45,7 @@ export const styles = css`
   :host([orientation='horizontal']) .positioning-region {
     flex-direction: row;
   }
-  :host([orientation='horizontal']:not([stacked])) ::slotted([role='radio']) {
+  :host([orientation='horizontal']) ::slotted([role='radio']) {
     padding-inline-end: ${spacingHorizontalS};
   }
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {

From 53927984d9fc77ab6819177adc94799bcac8e598 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 4 Apr 2023 11:40:25 -0700
Subject: [PATCH 107/122] radio: swaps js for css disabled styling solution

---
 .../src/radio-group/radio-group.styles.ts     |  6 ++++++
 .../src/radio-group/radio-group.ts            | 19 -------------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 887e3c89324346..6ba6b283cce815 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -4,6 +4,7 @@ import {
   colorCompoundBrandForeground1,
   colorNeutralForeground1,
   colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
   colorNeutralStrokeAccessible,
   fontFamilyBase,
   fontSizeBase300,
@@ -28,6 +29,11 @@ export const styles = css`
     flex-direction: column;
     row-gap: ${spacingVerticalS};
   }
+  :host([disabled]) {
+    --control-border-color: ${colorNeutralForegroundDisabled};
+    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
+    --state-color: ${colorNeutralForegroundDisabled};
+  }
   ::slotted([slot='label']) {
     color: ${colorNeutralForeground1};
     padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 8946eb7174a8e7..9c462359d611f2 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -16,23 +16,4 @@ export class RadioGroup extends FASTRadioGroup {
    */
   @attr({ mode: 'boolean' })
   public stacked: boolean = false;
-
-  protected createLocalTokens(): void {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-
-    if (this.disabled) {
-      this.style.setProperty('--control-border-color', `${colorNeutralForegroundDisabled.$value}`);
-      this.style.setProperty('--checked-indicator-background-color', `${colorNeutralForegroundDisabled.$value}`);
-      this.style.setProperty('--state-color', `${colorNeutralForegroundDisabled.$value}`);
-    }
-  }
-
-  protected slottedRadioButtonsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
-    super.slottedRadioButtonsChanged(oldValue, newValue);
-    if (this.disabled) {
-      this.createLocalTokens();
-    }
-  }
 }

From a7b2a11cfeea93092fb25d090d2c009a5e857e8a Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 19 Apr 2023 18:11:14 -0700
Subject: [PATCH 108/122] radiogroup, radio: updates based on feedback

---
 .../src/radio-group/radio-group.stories.ts    | 53 ++++++++++++++++++-
 .../src/radio-group/radio-group.ts            |  1 -
 packages/web-components/src/radio/README.md   | 15 +++---
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 5048563829eb79..28ffde9ea54adf 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -1,10 +1,10 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 import { renderComponent } from '../helpers.stories.js';
 import { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import './define.js';
 import '../radio/define.js';
-import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 
 type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
@@ -86,6 +86,17 @@ export default {
         },
       },
     },
+    change: {
+      action: 'change',
+      table: {
+        type: {
+          summary: 'Event that is fired when the selected radio button changes',
+        },
+        defaultValue: {
+          summary: null,
+        },
+      },
+    },
   },
 } as RadioGroupStoryMeta;
 
@@ -154,9 +165,47 @@ export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>`
 export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
   <fluent-radio-group aria-labelledby="label-8" name="radio-story">
     <span id="label-8" slot="label">Favorite Fruit</span>
-    <fluent-radio checked value="apple">Apple</fluent-radio>
+    <fluent-radio id="baby" checked value="apple">Apple</fluent-radio>
     <fluent-radio disabled value="pear">Pear</fluent-radio>
     <fluent-radio value="banana">Banana</fluent-radio>
     <fluent-radio value="orange">Orange</fluent-radio>
   </fluent-radio-group>
 `);
+
+export const RadioGroupChangeEvent = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group
+    id="radio-group-fruit"
+    aria-labelledby="label-8"
+    name="radio-story"
+    @change="${(event: any) => handleChange(event)}"
+  >
+    <span id="label-8" slot="label">${getLabelContent}</span>
+    <fluent-radio checked value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="Banana">Banana</fluent-radio>
+    <fluent-radio value="Orange">Orange</fluent-radio>
+  </fluent-radio-group>
+`);
+
+function getLabelContent(): string | undefined {
+  const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
+  if (!radioGroup) return; // add a check to make sure radioGroup exists
+  const selectedRadio = radioGroup.value as string;
+  if (selectedRadio) {
+    return `Favorite fruit: ${selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1)}`;
+  } else {
+    return 'Please select your favorite fruit';
+  }
+}
+
+function handleChange(event: Event) {
+  const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
+  if (!radioGroup) return; // add a check to make sure radioGroup exists
+
+  const selectedRadio = radioGroup.value as string;
+  const labelElement = radioGroup.querySelector('[slot="label"]') as HTMLSpanElement;
+  if (selectedRadio) {
+    const labelContent = selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1);
+    labelElement.textContent = `Favorite fruit: ${labelContent}`;
+  }
+}
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 9c462359d611f2..7ad958af222835 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,4 +1,3 @@
-import { colorNeutralForegroundDisabled } from '@fluentui/web-components';
 import { attr } from '@microsoft/fast-element';
 import { FASTRadioGroup } from '@microsoft/fast-foundation';
 
diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index 10152def1bbc1a..8c0c5e951c3a52 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -38,12 +38,11 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 ### **Fields**
 
-| Name            | Privacy | Type                | Default   | Description                                                                                                                                 |
-| --------------- | ------- | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`          | public  | `string`            |           | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. |
-| `disabled`      | public  | `boolean`           |           | Sets disabled state for radio                                                                                                               |
-| `labelPosition` | public  | `"after"` `"below"` | `"below"` | The position of the label relative to the radio indicator.                                                                                  |
-| `checked`       | public  | `boolean`           | `false`   | When true, radio button will be checked                                                                                                     |
+| Name       | Privacy | Type      | Default | Description                                                                                                                                 |
+| ---------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`     | public  | `string`  |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. |
+| `disabled` | public  | `boolean` |         | Sets disabled state for radio                                                                                                               |
+| `checked`  | public  | `boolean` | `false` | When true, radio button will be checked                                                                                                     |
 
 <br />
 
@@ -117,6 +116,10 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 ### **Fluent Web Component v3 v.s Fluent React 9**
 
+**Deltas**
+
+In contrast to the FUIRv9 implimentation of the `Radio` component the WC3 `Radio` must be rendered inside the `RadioGroup` to inherit all appropriate styles.
+
 <br />
 
 **Component and Slot Mapping**

From c7cc45f53217ebb61553e836bfd93594a8ecbc38 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 20 Apr 2023 10:59:02 -0700
Subject: [PATCH 109/122] radiogroup, radio: updates storybook content and
 README

---
 .../web-components/src/radio-group/README.md  |  6 +--
 .../src/radio-group/radio-group.stories.ts    | 42 ++++++++++---------
 packages/web-components/src/radio/README.md   |  8 ----
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index 0353fbac9b786c..5cd837b5c32160 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -58,9 +58,9 @@ Used anywhere an author might group a list of radio options.
 
 ### **Events**
 
-| Name     | Type | Description                                          |
-| -------- | ---- | ---------------------------------------------------- |
-| `change` |      | Fires a custom 'change' event when the value changes |
+| Name     | Event Type    | Target           | Arguments | Description                                          |
+| -------- | ------------- | ---------------- | --------- | ---------------------------------------------------- |
+| `change` | `CustomEvent` | `FASTRadioGroup` | none      | Fires a custom 'change' event when the value changes |
 
 <br />
 
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 28ffde9ea54adf..388bdef5bdc770 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -172,23 +172,9 @@ export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>`
   </fluent-radio-group>
 `);
 
-export const RadioGroupChangeEvent = renderComponent(html<RadioGroupStoryArgs>`
-  <fluent-radio-group
-    id="radio-group-fruit"
-    aria-labelledby="label-8"
-    name="radio-story"
-    @change="${(event: any) => handleChange(event)}"
-  >
-    <span id="label-8" slot="label">${getLabelContent}</span>
-    <fluent-radio checked value="apple">Apple</fluent-radio>
-    <fluent-radio value="pear">Pear</fluent-radio>
-    <fluent-radio value="Banana">Banana</fluent-radio>
-    <fluent-radio value="Orange">Orange</fluent-radio>
-  </fluent-radio-group>
-`);
-
-function getLabelContent(): string | undefined {
+const getLabelContent = (): string | undefined => {
   const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
+
   if (!radioGroup) return; // add a check to make sure radioGroup exists
   const selectedRadio = radioGroup.value as string;
   if (selectedRadio) {
@@ -196,10 +182,13 @@ function getLabelContent(): string | undefined {
   } else {
     return 'Please select your favorite fruit';
   }
-}
+};
 
-function handleChange(event: Event) {
+const handleChange = (event: CustomEvent) => {
+  const changedRadio: HTMLInputElement = event.target as HTMLInputElement;
+  console.log(changedRadio);
   const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
+
   if (!radioGroup) return; // add a check to make sure radioGroup exists
 
   const selectedRadio = radioGroup.value as string;
@@ -208,4 +197,19 @@ function handleChange(event: Event) {
     const labelContent = selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1);
     labelElement.textContent = `Favorite fruit: ${labelContent}`;
   }
-}
+};
+
+export const RadioGroupChangeEvent = renderComponent(html<RadioGroupStoryArgs>`
+  <fluent-radio-group
+    id="radio-group-fruit"
+    aria-labelledby="label-8"
+    name="radio-story"
+    @change="${(event: CustomEvent) => handleChange(event)}"
+  >
+    <span id="label-8" slot="label">${getLabelContent}</span>
+    <fluent-radio checked value="apple">Apple</fluent-radio>
+    <fluent-radio value="pear">Pear</fluent-radio>
+    <fluent-radio value="Banana">Banana</fluent-radio>
+    <fluent-radio value="Orange">Orange</fluent-radio>
+  </fluent-radio-group>
+`);
diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index 8c0c5e951c3a52..54071e370e45df 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -50,14 +50,6 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 <br />
 
-### **Events**
-
-| Name     | Type | Inherited From |
-| -------- | ---- | -------------- |
-| `change` |      |                |
-
-<br />
-
 ### **Attributes**
 
 | Name             | Field         |

From b5c84d867a036576934232b70ad056a9ee7c3fc6 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 20 Apr 2023 11:07:22 -0700
Subject: [PATCH 110/122] radiogroup, radio: updates docs

---
 packages/web-components/src/radio-group/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index 5cd837b5c32160..0794f1973cb40d 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -58,9 +58,9 @@ Used anywhere an author might group a list of radio options.
 
 ### **Events**
 
-| Name     | Event Type    | Target           | Arguments | Description                                          |
-| -------- | ------------- | ---------------- | --------- | ---------------------------------------------------- |
-| `change` | `CustomEvent` | `FASTRadioGroup` | none      | Fires a custom 'change' event when the value changes |
+| Name     | Event Type    | Target           | Arguments | Description                                                                                                       |
+| -------- | ------------- | ---------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |
+| `change` | `CustomEvent` | `FASTRadioGroup` | none      | Fired when the value of the RadioGroup changes (i.e., when a different radio button within the group is selected) |
 
 <br />
 

From 329bd37579649f76cd1b12fe6a9547e00fffcf79 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 20 Apr 2023 11:11:03 -0700
Subject: [PATCH 111/122] radiogroup, radio: removes label-position from docs

---
 packages/web-components/src/radio/README.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index 54071e370e45df..defa23478a2c20 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -52,12 +52,11 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 ### **Attributes**
 
-| Name             | Field         |
-| ---------------- | ------------- |
-| `name`           | name          |
-| `disabled`       | disabled      |
-| `label-position` | labelPosition |
-| `checked`        | checked       |
+| Name       | Field    |
+| ---------- | -------- |
+| `name`     | name     |
+| `disabled` | disabled |
+| `checked`  | checked  |
 
 <br />
 

From fae698ae940464b8920dd790c8a82a55885a83e0 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 20 Apr 2023 11:35:35 -0700
Subject: [PATCH 112/122] radiogroup, radio: updates docs

---
 packages/web-components/src/radio/README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index defa23478a2c20..d5cb6acb68621c 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -109,7 +109,13 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 **Deltas**
 
-In contrast to the FUIRv9 implimentation of the `Radio` component the WC3 `Radio` must be rendered inside the `RadioGroup` to inherit all appropriate styles.
+In contrast to the FUIRv9 implimentation of the `Radio` component the WC3 `Radio` must be rendered inside the WC3 `RadioGroup` to inherit all appropriate styles.
+
+```html
+<fluent-radio-group>
+  <fluent-radio></fluent-radio>
+</fluent-radio-group>
+```
 
 <br />
 

From e475e2156492da76ad098ce1aa84af44fdcb35a2 Mon Sep 17 00:00:00 2001
From: BrdyBrn <brian.christopher.brady@gmail.com>
Date: Mon, 24 Apr 2023 15:33:43 -0700
Subject: [PATCH 113/122] Update packages/web-components/src/radio/README.md

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
---
 packages/web-components/src/radio/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index d5cb6acb68621c..02c37713943189 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -40,7 +40,7 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 | Name       | Privacy | Type      | Default | Description                                                                                                                                 |
 | ---------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`     | public  | `string`  |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. |
+| `name`     | public  | `string`  |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. When the `radio` component is rendered inside a `radio-group`, the `radio-group` overwrites the `name` in all its `radio` components. |
 | `disabled` | public  | `boolean` |         | Sets disabled state for radio                                                                                                               |
 | `checked`  | public  | `boolean` | `false` | When true, radio button will be checked                                                                                                     |
 

From 81c509554851194858d69fed8a21b75c03eb0784 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Mon, 24 Apr 2023 15:52:40 -0700
Subject: [PATCH 114/122] radiogroup, radio: addresses feedback

---
 .../web-components/src/radio-group/README.md    | 16 ++++++++--------
 .../src/radio-group/radio-group.stories.ts      | 17 +----------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index 0794f1973cb40d..2e32db118e4242 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -36,14 +36,14 @@ Used anywhere an author might group a list of radio options.
 
 ### **Fields**
 
-| Name          | Privacy | Type                     | Default      | Description                                                                                           |
-| ------------- | ------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------- |
-| `disabled`    | public  | `boolean`                | `false`      | Disables the radio group and child radios.                                                            |
-| `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements. |
-| `value`       | public  | `string`                 |              | The value of the checked radio.                                                                       |
-| `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                          |
-| `stacked`     | public  | `boolean`                | `false`      | places each radio item in a row, with labels below the radio indicator.                               |
-| default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items                                                                |
+| Name          | Privacy | Type                     | Default      | Description                                                                                                                                                                                                                                                                                                                                         |
+| ------------- | ------- | ------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`    | public  | `boolean`                | `false`      | Disables the radio group and child radios.                                                                                                                                                                                                                                                                                                          |
+| `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements.                                                                                                                                                                                                                                               |
+| `value`       | public  | `string`                 |              | The value of the checked radio.                                                                                                                                                                                                                                                                                                                     |
+| `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                                                                                                                                                                                                                                                                        |
+| `stacked`     | public  | `boolean`                | `false`      | When the orientation attribute is set to `horizontal`, `stacked` arranges each radio item in a row, with the labels displayed beneath the radio indicators. However, when the orientation is set to `vertical` and the stacked attribute is also present, the stacked styles will be overridden, and the default `vertical` layout will be applied. |
+| default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items                                                                                                                                                                                                                                                                                                              |
 
 <br />
 
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 388bdef5bdc770..3a22ab1ef43a57 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,7 +18,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple" ?checked=${x => x.checked}>Apple</fluent-radio>
+    <fluent-radio value="apple">Apple</fluent-radio>
     <fluent-radio value="pear">Pear</fluent-radio>
     <fluent-radio value="banana">Banana</fluent-radio>
     <fluent-radio value="orange">Orange</fluent-radio>
@@ -32,19 +32,6 @@ export default {
     orientation: RadioGroupOrientation.horizontal,
   },
   argTypes: {
-    checked: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'Sets checked state on radio',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
-      },
-    },
     disabled: {
       control: {
         type: 'boolean',
@@ -185,8 +172,6 @@ const getLabelContent = (): string | undefined => {
 };
 
 const handleChange = (event: CustomEvent) => {
-  const changedRadio: HTMLInputElement = event.target as HTMLInputElement;
-  console.log(changedRadio);
   const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
 
   if (!radioGroup) return; // add a check to make sure radioGroup exists

From 4d56030ae1cb2d70b3aef9a33029b96414ab27b3 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 26 Apr 2023 12:44:10 -0700
Subject: [PATCH 115/122] radiogroup, radio: updates docs

---
 .../web-components/src/radio-group/README.md     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/radio-group/README.md b/packages/web-components/src/radio-group/README.md
index 2e32db118e4242..b94bc67efda979 100644
--- a/packages/web-components/src/radio-group/README.md
+++ b/packages/web-components/src/radio-group/README.md
@@ -36,14 +36,14 @@ Used anywhere an author might group a list of radio options.
 
 ### **Fields**
 
-| Name          | Privacy | Type                     | Default      | Description                                                                                                                                                                                                                                                                                                                                         |
-| ------------- | ------- | ------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `disabled`    | public  | `boolean`                | `false`      | Disables the radio group and child radios.                                                                                                                                                                                                                                                                                                          |
-| `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements.                                                                                                                                                                                                                                               |
-| `value`       | public  | `string`                 |              | The value of the checked radio.                                                                                                                                                                                                                                                                                                                     |
-| `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                                                                                                                                                                                                                                                                        |
-| `stacked`     | public  | `boolean`                | `false`      | When the orientation attribute is set to `horizontal`, `stacked` arranges each radio item in a row, with the labels displayed beneath the radio indicators. However, when the orientation is set to `vertical` and the stacked attribute is also present, the stacked styles will be overridden, and the default `vertical` layout will be applied. |
-| default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items                                                                                                                                                                                                                                                                                                              |
+| Name          | Privacy | Type                     | Default      | Description                                                                                                                                                                                                                                                                                                         |
+| ------------- | ------- | ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`    | public  | `boolean`                | `false`      | Disables the radio group and child radios.                                                                                                                                                                                                                                                                          |
+| `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements.                                                                                                                                                                                                               |
+| `value`       | public  | `string`                 |              | The value of the checked radio.                                                                                                                                                                                                                                                                                     |
+| `orientation` | public  | `horizontal \| vertical` | `horizontal` | Determines whether radios in a radio group are rendered in a horizontal row or a vertical column. The default value is horizontal, which will render radios in a horizontal row with labels appearing inline. Setting orientation to vertical will render radios in a vertical column with labels appearing inline. |
+| `stacked`     | public  | `boolean`                | `false`      | Determines whether the labels for radios appear inline or stacked when orientation is set to horizontal. The default value is false, which will display the labels inline. If stacked is set to true, the labels will appear under each radio in a horizontal row.                                                  |
+| default slot  | public  | `HTMLElement[]`          |              | The default slot expecting Radio items.                                                                                                                                                                                                                                                                             |
 
 <br />
 

From 163def9b6b91565bf769912a442f1d1981cacc42 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 26 Apr 2023 13:03:04 -0700
Subject: [PATCH 116/122] radiogroup, radio: addresses feedback

---
 .../src/radio-group/radio-group.stories.ts    | 15 +++++++++-
 .../web-components/src/radio/radio.stories.ts | 17 +++++------
 .../web-components/src/radio/radio.styles.ts  | 30 +++++++++++--------
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 3a22ab1ef43a57..dc4cf35d5c998e 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -18,7 +18,7 @@ const storyTemplate = html<RadioGroupStoryArgs>`
     name="radio-story"
   >
     <span id="label-1" slot="label">Favorite Fruit</span>
-    <fluent-radio value="apple">Apple</fluent-radio>
+    <fluent-radio ?checked="${x => x.checked}" value="apple">Apple</fluent-radio>
     <fluent-radio value="pear">Pear</fluent-radio>
     <fluent-radio value="banana">Banana</fluent-radio>
     <fluent-radio value="orange">Orange</fluent-radio>
@@ -45,6 +45,19 @@ export default {
         },
       },
     },
+    checked: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'Sets checked state on radio',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
     stacked: {
       control: {
         type: 'boolean',
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 47a49620f2079a..52afdf568c0f21 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -9,14 +9,17 @@ type RadioStoryArgs = Args & FluentRadio;
 type RadioStoryMeta = Meta<RadioStoryArgs>;
 
 const storyTemplate = html<RadioStoryArgs>`
-  <fluent-radio-group orientation="vertical" role="radiogroup" name="radio-story">
-    <fluent-radio ?disabled=${x => x.disabled} ?checked=${x => x.checked} value="Apple">Option 1</fluent-radio>
-  </fluent-radio-group>
+  <form @submit="${() => false}">
+    <fluent-radio ?checked="${x => x.checked}" ?disabled="${x => x.disabled}" name="radio-story" value="option1"
+      >Option 1</fluent-radio
+    >
+  </form>
 `;
 
 export default {
   title: 'Components/Radio',
   args: {
+    checked: false,
     disabled: false,
   },
   argTypes: {
@@ -52,13 +55,9 @@ export default {
 export const Radio = renderComponent(storyTemplate).bind({});
 
 export const Checked = renderComponent(html<RadioStoryArgs>`
-  <fluent-radio-group name="radio-story">
-    <fluent-radio checked="true" value="Apple">Apple</fluent-radio>
-  </fluent-radio-group>
+  <fluent-radio checked value="Apple">Apple</fluent-radio>
 `);
 
 export const Disabled = renderComponent(html<RadioStoryArgs>`
-  <fluent-radio-group name="radio-story">
-    <fluent-radio disabled="true" value="Apple">Apple</fluent-radio>
-  </fluent-radio-group>
+  <fluent-radio disabled value="Apple">Apple</fluent-radio>
 `);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index db7aa736d84941..9c8ab67ec9d9c7 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -2,12 +2,15 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
-  borderRadiusMedium,
+  borderRadiusSmall,
+  colorCompoundBrandForeground1,
   colorCompoundBrandForeground1Pressed,
   colorCompoundBrandStrokeHover,
   colorCompoundBrandStrokePressed,
   colorNeutralForeground2,
+  colorNeutralForeground3,
   colorNeutralForegroundDisabled,
+  colorNeutralStrokeAccessible,
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,
   colorStrokeFocus1,
@@ -37,7 +40,13 @@ export const styles = css`
     outline: none;
     position: relative;
     user-select: none;
-    color: var(--state-color);
+    color: blue;
+    color: var(--state-color, ${colorNeutralForeground3});
+  }
+  :host([disabled]) {
+    --control-border-color: ${colorNeutralForegroundDisabled};
+    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
+    --state-color: ${colorNeutralForegroundDisabled};
   }
   .label {
     cursor: pointer;
@@ -52,7 +61,7 @@ export const styles = css`
   .control {
     box-sizing: border-box;
     align-items: center;
-    border: 1px solid var(--control-border-color);
+    border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
     border-radius: ${borderRadiusCircular};
     display: flex;
     height: 16px;
@@ -71,15 +80,10 @@ export const styles = css`
   :host([aria-checked='false']:hover) .control {
     color: ${colorNeutralForeground2};
   }
-  :host(:focus-visible)::after {
-    border: 2px solid ${colorStrokeFocus1};
-    border-radius: ${borderRadiusMedium};
-    box-shadow: inset 0 0 0 2px ${colorStrokeFocus2};
-    content: '';
-    cursor: pointer;
-    inset: 0px;
-    outline: none;
-    position: absolute;
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusSmall};
+    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
+    outline: 1px solid ${colorStrokeFocus1};
   }
   :host(:hover) .control {
     border-color: ${colorNeutralStrokeAccessibleHover};
@@ -94,7 +98,7 @@ export const styles = css`
     border-color: var(--control-border-color);
   }
   :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color);
+    background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
   }
   :host([aria-checked='true']:hover) .control {
     border-color: ${colorCompoundBrandStrokeHover};

From 9e554ebff662c39445847481129a2b6f58fc9e50 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Wed, 26 Apr 2023 13:40:53 -0700
Subject: [PATCH 117/122] radiogroup, radio: updates styles

---
 packages/web-components/src/radio/radio.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 9c8ab67ec9d9c7..fd5a3c953c9d86 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -42,6 +42,7 @@ export const styles = css`
     user-select: none;
     color: blue;
     color: var(--state-color, ${colorNeutralForeground3});
+    padding-inline-end: ${spacingHorizontalS};
   }
   :host([disabled]) {
     --control-border-color: ${colorNeutralForegroundDisabled};

From 8e61ff1103cbb9d524203001eabccf5847319370 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 27 Apr 2023 11:52:24 -0700
Subject: [PATCH 118/122] radiogroup, radio: removes whitespace

---
 packages/web-components/src/radio/radio.template.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/radio/radio.template.ts b/packages/web-components/src/radio/radio.template.ts
index ceb729eb8e4426..5c387758c66704 100644
--- a/packages/web-components/src/radio/radio.template.ts
+++ b/packages/web-components/src/radio/radio.template.ts
@@ -3,5 +3,5 @@ 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> `,
+  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`,
 });

From 5423421d7d24ff1b44abf6b86fc809a3f3617420 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Tue, 2 May 2023 13:25:12 -0700
Subject: [PATCH 119/122] radiogroup, radio: updates styles per review

---
 .../web-components/src/radio-group/radio-group.styles.ts  | 8 +-------
 packages/web-components/src/radio/radio.styles.ts         | 5 ++++-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index 6ba6b283cce815..ec203c42a9a6ef 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,11 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
-  colorCompoundBrandForeground1,
   colorNeutralForeground1,
-  colorNeutralForeground3,
   colorNeutralForegroundDisabled,
-  colorNeutralStrokeAccessible,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
@@ -22,14 +19,11 @@ export const styles = css`
   ${display('flex')}
 
   :host {
-    --control-border-color: ${colorNeutralStrokeAccessible};
-    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
-    --state-color: ${colorNeutralForeground3};
     align-items: flex-start;
     flex-direction: column;
     row-gap: ${spacingVerticalS};
   }
-  :host([disabled]) {
+  :host([disabled]) ::slotted([role='radio']) {
     --control-border-color: ${colorNeutralForegroundDisabled};
     --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
     --state-color: ${colorNeutralForegroundDisabled};
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index fd5a3c953c9d86..d80095a1894105 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -43,6 +43,9 @@ export const styles = css`
     color: blue;
     color: var(--state-color, ${colorNeutralForeground3});
     padding-inline-end: ${spacingHorizontalS};
+    --control-border-color: ${colorNeutralStrokeAccessible};
+    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
+    --state-color: ${colorNeutralForeground3};
   }
   :host([disabled]) {
     --control-border-color: ${colorNeutralForegroundDisabled};
@@ -96,7 +99,7 @@ export const styles = css`
     opacity: 1;
   }
   :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color);
+    border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
   }
   :host([aria-checked='true']) .checked-indicator {
     background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});

From 42b2a13ad57beb8548bc554f0a1d68776e337954 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 4 May 2023 14:44:36 -0700
Subject: [PATCH 120/122] radiogroup, radio: formats files

---
 packages/web-components/src/radio/README.md | 8 ++++----
 packages/web-components/src/radio/radio.ts  | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/radio/README.md b/packages/web-components/src/radio/README.md
index 02c37713943189..9193cfb46909a8 100644
--- a/packages/web-components/src/radio/README.md
+++ b/packages/web-components/src/radio/README.md
@@ -38,11 +38,11 @@ Used anywhere an author might otherwise use an input[type="radio"]. Used to faci
 
 ### **Fields**
 
-| Name       | Privacy | Type      | Default | Description                                                                                                                                 |
-| ---------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| Name       | Privacy | Type      | Default | Description                                                                                                                                                                                                                                                                       |
+| ---------- | ------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `name`     | public  | `string`  |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. When the `radio` component is rendered inside a `radio-group`, the `radio-group` overwrites the `name` in all its `radio` components. |
-| `disabled` | public  | `boolean` |         | Sets disabled state for radio                                                                                                               |
-| `checked`  | public  | `boolean` | `false` | When true, radio button will be checked                                                                                                     |
+| `disabled` | public  | `boolean` |         | Sets disabled state for radio                                                                                                                                                                                                                                                     |
+| `checked`  | public  | `boolean` | `false` | When true, radio button will be checked                                                                                                                                                                                                                                           |
 
 <br />
 
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index de75e9633e6e12..56c36b4198b26e 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -1,4 +1,3 @@
-import { attr } from '@microsoft/fast-element';
 import { FASTRadio } from '@microsoft/fast-foundation';
 
 /**

From 596c03143523a0b6730fbab4be8a1a6286e991a7 Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Thu, 4 May 2023 16:56:21 -0700
Subject: [PATCH 121/122] radiogroup, radio: format document

---
 packages/web-components/src/radio-group/radio-group.stories.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index dc4cf35d5c998e..33d1eb816a9541 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -176,7 +176,9 @@ const getLabelContent = (): string | undefined => {
   const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup;
 
   if (!radioGroup) return; // add a check to make sure radioGroup exists
+
   const selectedRadio = radioGroup.value as string;
+
   if (selectedRadio) {
     return `Favorite fruit: ${selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1)}`;
   } else {

From 9a6705fc5e6a8b5982be92088357018bbffa3edd Mon Sep 17 00:00:00 2001
From: Brian Brady <brianbrady@microsoft.com>
Date: Fri, 5 May 2023 11:52:18 -0700
Subject: [PATCH 122/122] radiogroup, radio: fixes import

---
 .../web-components/src/radio-group/radio-group.template.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/radio-group/radio-group.template.ts b/packages/web-components/src/radio-group/radio-group.template.ts
index d13afcb79a5c00..5f884fd9e4c3b5 100644
--- a/packages/web-components/src/radio-group/radio-group.template.ts
+++ b/packages/web-components/src/radio-group/radio-group.template.ts
@@ -1,5 +1,5 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
 import { radioGroupTemplate } from '@microsoft/fast-foundation';
-import type { Radio } from './radio-group.js';
+import type { RadioGroup } from './radio-group.js';
 
-export const template: ElementViewTemplate<Radio> = radioGroupTemplate();
+export const template: ElementViewTemplate<RadioGroup> = radioGroupTemplate();