From 6c8c024030bc1a13e88cb3d6c9a319ddf13b6b9c Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 6 May 2022 17:22:27 +0000
Subject: [PATCH 01/19] setup new tokens

---
 package.json                       |  2 +-
 src/core/index.scss                |  2 ++
 src/form-control/form-control.scss | 30 ++++++++++++++++++++++++++++++
 src/primitives/index.scss          |  9 +++++++++
 yarn.lock                          |  2 +-
 5 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 src/form-control/form-control.scss
 create mode 100644 src/primitives/index.scss

diff --git a/package.json b/package.json
index 2bf0902e45..9e78574a00 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.7.0"
+    "@primer/primitives": "^7.8.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",
diff --git a/src/core/index.scss b/src/core/index.scss
index 166da98b06..e11fd53b6f 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -24,6 +24,8 @@
 @import '../pagination/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
+@import '../form-control/form-control.scss';
 
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';
+@import '../primitives/index.scss';
diff --git a/src/form-control/form-control.scss b/src/form-control/form-control.scss
new file mode 100644
index 0000000000..e4f80607ea
--- /dev/null
+++ b/src/form-control/form-control.scss
@@ -0,0 +1,30 @@
+// size
+// label placement
+// hidden label
+// placeholder
+// leading visual
+// clear button
+// invisible?
+// focus-within
+// state
+
+.FormControl {
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium);
+  height: var(--primer-control-medium-size);
+  padding-inline: var(--primer-control-medium-paddingInline-normal);
+}
+
+// size
+
+.FormControl--small {
+  height: var(--primer-control-small-size);
+}
+
+.FormControl--medium {
+  height: var(--primer-control-medium-size);
+}
+
+.FormControl--large {
+  height: var(--primer-control-large-size);
+}
diff --git a/src/primitives/index.scss b/src/primitives/index.scss
new file mode 100644
index 0000000000..1a6bf9d92e
--- /dev/null
+++ b/src/primitives/index.scss
@@ -0,0 +1,9 @@
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
diff --git a/yarn.lock b/yarn.lock
index 6d1b2e6ce1..b069cd67ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1162,7 +1162,7 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.7.0":
+"@primer/primitives@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.3.tgz#de7e03492cf977e99f2417490d76421db9715e9f"
   integrity sha512-04ZwfJhpZ0QFwDrJfCuLX6iOh0BflWDTvuoRA80lQH9xk0RtIg16INbruwwtnbSgnKKXXRSykRRJ5BbxnqufRA==

From 88b7d108e7fec855d8ecee8fb951dc542f977543 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sat, 7 May 2022 00:30:45 +0000
Subject: [PATCH 02/19] layout

---
 src/form-control/form-control.scss | 81 +++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/form-control/form-control.scss b/src/form-control/form-control.scss
index e4f80607ea..3039b79b32 100644
--- a/src/form-control/form-control.scss
+++ b/src/form-control/form-control.scss
@@ -9,10 +9,13 @@
 // state
 
 .FormControl {
+  height: var(--primer-control-medium-size);
+  font-size: var(--primer-text-body-size-medium);
+  line-height: var(--primer-text-body-lineHeight-medium);
   border: solid var(--primer-borderWidth-thin) var(--color-border-default);
   border-radius: var(--primer-borderRadius-medium);
-  height: var(--primer-control-medium-size);
   padding-inline: var(--primer-control-medium-paddingInline-normal);
+  background-color: var(--color-canvas-default);
 }
 
 // size
@@ -28,3 +31,79 @@
 .FormControl--large {
   height: var(--primer-control-large-size);
 }
+
+.FormControl-label {
+  font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--primer-text-body-lineHeight-medium);
+}
+
+.FormGroup {
+  display: grid;
+  gap: var(--primer-controlStack-medium-gap-condensed);
+}
+
+.FormControl-fieldWrap {
+  display: inline-grid;
+  grid-template-areas: 'leadingVisual input trailingAction';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  grid-template-rows: var(--primer-control-medium-size);
+  gap: var(--primer-controlStack-medium-gap-condensed);
+  align-items: center;
+  height: var(--primer-control-medium-size);
+  //   border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium);
+  box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
+  padding-inline: var(--primer-control-medium-paddingInline-normal);
+  overflow: hidden;
+  background-color: var(--color-canvas-default);
+  padding-bottom: 1px; // optical alignment for firefox
+
+  .FormControl-leadingVisual {
+    grid-area: leadingVisual;
+  }
+
+  .FormControl {
+    grid-area: input;
+    border: 0;
+    padding: unset;
+    height: calc(var(--primer-control-medium-size) - 2px);
+    background-color: transparent;
+
+    &:focus-visible,
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  .FormControl-trailingAction {
+    grid-area: trailingAction;
+    display: grid;
+    width: calc(var(--primer-control-medium-size) - 2px);
+    height: calc(var(--primer-control-medium-size) - 2px);
+    color: var(--color-fg-muted);
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: solid var(--primer-borderWidth-thin) transparent;
+    border-radius: var(--primer-borderRadius-medium);
+    // border-top-left-radius: 0;
+    // border-bottom-left-radius: 0;
+    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    transition-property: color, background-color, border-color;
+    place-content: center;
+    margin-right: calc(var(--primer-control-medium-paddingInline-normal) * -1);
+
+    &:hover {
+      background-color: var(--color-btn-hover-bg);
+      border: $border-width $border-style var(--color-btn-hover-bg);
+    }
+  }
+
+  &:focus-within {
+    // box-shadow: var(--primer-borderInset-thin) var(--color-accent-fg);
+
+    @include focusBoxShadowInset(2px, var(--color-accent-fg));
+  }
+}

From d4a3065048bd2d74dc16b8823b6472b9b2b04cf4 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sat, 7 May 2022 01:33:34 +0000
Subject: [PATCH 03/19] label positioning

---
 src/form-control/form-control.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/form-control/form-control.scss b/src/form-control/form-control.scss
index 3039b79b32..f11b02fee9 100644
--- a/src/form-control/form-control.scss
+++ b/src/form-control/form-control.scss
@@ -39,10 +39,20 @@
 }
 
 .FormGroup {
-  display: grid;
+  display: inline-flex;
+  flex-direction: column;
   gap: var(--primer-controlStack-medium-gap-condensed);
 }
 
+.FormGroup--inline {
+  flex-direction: row;
+  align-items: center;
+}
+
+.FormGroup--fullWidth {
+  display: flex;
+}
+
 .FormControl-fieldWrap {
   display: inline-grid;
   grid-template-areas: 'leadingVisual input trailingAction';

From 628251a8405aede28e757e7e5f9bc602e449c6aa Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sat, 7 May 2022 05:29:38 +0000
Subject: [PATCH 04/19] cleanup

---
 src/form-control/form-control.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/form-control/form-control.scss b/src/form-control/form-control.scss
index f11b02fee9..b0973f0981 100644
--- a/src/form-control/form-control.scss
+++ b/src/form-control/form-control.scss
@@ -20,14 +20,17 @@
 
 // size
 
+.FormControl-fieldWrap.FormControl--small,
 .FormControl--small {
   height: var(--primer-control-small-size);
 }
 
+.FormControl-fieldWrap.FormControl--medium,
 .FormControl--medium {
   height: var(--primer-control-medium-size);
 }
 
+.FormControl-fieldWrap.FormControl--large,
 .FormControl--large {
   height: var(--primer-control-large-size);
 }
@@ -51,13 +54,17 @@
 
 .FormGroup--fullWidth {
   display: flex;
+
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
 }
 
 .FormControl-fieldWrap {
   display: inline-grid;
   grid-template-areas: 'leadingVisual input trailingAction';
   grid-template-columns: min-content minmax(0, auto) min-content;
-  grid-template-rows: var(--primer-control-medium-size);
+  grid-template-rows: auto;
   gap: var(--primer-controlStack-medium-gap-condensed);
   align-items: center;
   height: var(--primer-control-medium-size);
@@ -77,7 +84,7 @@
     grid-area: input;
     border: 0;
     padding: unset;
-    height: calc(var(--primer-control-medium-size) - 2px);
+    height: 100%;
     background-color: transparent;
 
     &:focus-visible,
@@ -98,8 +105,6 @@
     background-color: transparent;
     border: solid var(--primer-borderWidth-thin) transparent;
     border-radius: var(--primer-borderRadius-medium);
-    // border-top-left-radius: 0;
-    // border-bottom-left-radius: 0;
     transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
     transition-property: color, background-color, border-color;
     place-content: center;

From 01118969ac9c36996d920b838cf8f7329b0beee0 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sat, 7 May 2022 16:52:33 +0000
Subject: [PATCH 05/19] states

---
 src/form-control/form-control.scss | 59 ++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/form-control/form-control.scss b/src/form-control/form-control.scss
index b0973f0981..6275dd9090 100644
--- a/src/form-control/form-control.scss
+++ b/src/form-control/form-control.scss
@@ -16,6 +16,30 @@
   border-radius: var(--primer-borderRadius-medium);
   padding-inline: var(--primer-control-medium-paddingInline-normal);
   background-color: var(--color-canvas-default);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+
+    &::placeholder {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+
+  &[invalid] {
+    border-color: var(--color-attention-emphasis);
+  }
+
+  // Custom styling for HTML5 validation bubbles (WebKit only)
+  ::placeholder {
+    color: var(--color-fg-subtle);
+    opacity: 1; // override opacity in normalize.css
+  }
 }
 
 // size
@@ -23,16 +47,31 @@
 .FormControl-fieldWrap.FormControl--small,
 .FormControl--small {
   height: var(--primer-control-small-size);
+  font-size: var(--primer-text-body-size-small);
+
+  .FormControl-trailingAction {
+    width: calc(var(--primer-control-small-size) - 8px);
+    height: calc(var(--primer-control-small-size) - 8px);
+  }
 }
 
 .FormControl-fieldWrap.FormControl--medium,
 .FormControl--medium {
   height: var(--primer-control-medium-size);
+
+  .FormControl-trailingAction {
+    width: calc(var(--primer-control-medium-size) - 8px);
+    height: calc(var(--primer-control-medium-size) - 8px);
+  }
 }
 
 .FormControl-fieldWrap.FormControl--large,
 .FormControl--large {
   height: var(--primer-control-large-size);
+  .FormControl-trailingAction {
+    width: calc(var(--primer-control-large-size) - 8px);
+    height: calc(var(--primer-control-large-size) - 8px);
+  }
 }
 
 .FormControl-label {
@@ -67,14 +106,15 @@
   grid-template-rows: auto;
   gap: var(--primer-controlStack-medium-gap-condensed);
   align-items: center;
+  align-content: center;
   height: var(--primer-control-medium-size);
   //   border: solid var(--primer-borderWidth-thin) var(--color-border-default);
   border-radius: var(--primer-borderRadius-medium);
   box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
   padding-inline: var(--primer-control-medium-paddingInline-normal);
-  overflow: hidden;
+  //   overflow: hidden;
   background-color: var(--color-canvas-default);
-  padding-bottom: 1px; // optical alignment for firefox
+  //   padding-bottom: 1px; // optical alignment for firefox
 
   .FormControl-leadingVisual {
     grid-area: leadingVisual;
@@ -97,8 +137,8 @@
   .FormControl-trailingAction {
     grid-area: trailingAction;
     display: grid;
-    width: calc(var(--primer-control-medium-size) - 2px);
-    height: calc(var(--primer-control-medium-size) - 2px);
+    width: calc(var(--primer-control-medium-size) - 4px);
+    height: calc(var(--primer-control-medium-size) - 4px);
     color: var(--color-fg-muted);
     cursor: pointer;
     user-select: none;
@@ -109,6 +149,8 @@
     transition-property: color, background-color, border-color;
     place-content: center;
     margin-right: calc(var(--primer-control-medium-paddingInline-normal) * -1);
+    margin-right: -8px;
+    padding: 0;
 
     &:hover {
       background-color: var(--color-btn-hover-bg);
@@ -121,4 +163,13 @@
 
     @include focusBoxShadowInset(2px, var(--color-accent-fg));
   }
+
+  &.FormControl-fieldWrap--disabled {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+  }
+
+  &.FormControl-fieldWrap--invalid {
+    box-shadow: var(--primer-borderInset-thin) var(--color-danger-emphasis);
+  }
 }

From 75fc5e6d804c5548db3a90feae1285abf1a3e7a5 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Mon, 9 May 2022 00:49:11 +0000
Subject: [PATCH 06/19] cleanup

---
 src/core/index.scss                           |   1 -
 src/forms/checkbox-radio.scss                 |  20 +++
 src/forms/form-common.scss                    | 102 +++++++++++
 src/forms/index.scss                          |   4 +
 .../select-input.scss}                        | 158 +++++++-----------
 5 files changed, 184 insertions(+), 101 deletions(-)
 create mode 100644 src/forms/checkbox-radio.scss
 create mode 100644 src/forms/form-common.scss
 rename src/{form-control/form-control.scss => forms/select-input.scss} (56%)

diff --git a/src/core/index.scss b/src/core/index.scss
index e11fd53b6f..7d9352fe3f 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -24,7 +24,6 @@
 @import '../pagination/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
-@import '../form-control/form-control.scss';
 
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';
diff --git a/src/forms/checkbox-radio.scss b/src/forms/checkbox-radio.scss
new file mode 100644
index 0000000000..74dfebf1eb
--- /dev/null
+++ b/src/forms/checkbox-radio.scss
@@ -0,0 +1,20 @@
+// checkbox + radio specific styles
+.FormControl--checkbox,
+.FormControl--radio {
+  display: block;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  background: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+  border-radius: var(--primer-borderRadius-small);
+
+  &:disabled {
+    & + .FormControl-label {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+}
+
+.FormControl--radio {
+  border-radius: var(--primer-borderRadius-full);
+}
diff --git a/src/forms/form-common.scss b/src/forms/form-common.scss
new file mode 100644
index 0000000000..69dca243ea
--- /dev/null
+++ b/src/forms/form-common.scss
@@ -0,0 +1,102 @@
+:root {
+  accent-color: var(--color-accent-fg);
+}
+
+.FormControl {
+  background-color: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+  }
+
+  &[invalid] {
+    border-color: var(--color-attention-emphasis);
+  }
+}
+
+// size
+
+.FormControl-fieldWrap.FormControl--small,
+.FormControl--small {
+  height: var(--primer-control-small-size);
+  font-size: var(--primer-text-body-size-small);
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-small-size) - 8px);
+    height: calc(var(--primer-control-small-size) - 8px);
+  }
+}
+
+.FormControl-fieldWrap.FormControl--medium,
+.FormControl--medium {
+  height: var(--primer-control-medium-size);
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-medium-size) - 8px);
+    height: calc(var(--primer-control-medium-size) - 8px);
+  }
+}
+
+.FormControl-fieldWrap.FormControl--large,
+.FormControl--large {
+  height: var(--primer-control-large-size);
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-large-size) - 8px);
+    height: calc(var(--primer-control-large-size) - 8px);
+  }
+}
+
+// <label>
+.FormControl-label {
+  display: flex;
+  font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--primer-text-body-lineHeight-medium);
+  flex-direction: column;
+  user-select: none;
+  gap: 4px;
+}
+
+.FormControl-label--hint {
+  margin-bottom: 0;
+  font-size: var(--primer-text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  color: var(--color-fg-muted);
+}
+
+// group label and field
+.FormGroup {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--primer-controlStack-medium-gap-condensed);
+}
+
+.FormGroup--inline {
+  flex-direction: row;
+  align-items: center;
+}
+
+.FormGroup--formControls {
+  flex-direction: row;
+  align-items: start;
+
+  .FormControl[type='checkbox'],
+  .FormControl[type='radio'] {
+    flex-shrink: 0;
+    margin-top: 0.15625rem;
+  }
+}
+
+.FormGroup--fullWidth {
+  display: flex;
+
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
+}
diff --git a/src/forms/index.scss b/src/forms/index.scss
index 11af7688af..98916878d3 100644
--- a/src/forms/index.scss
+++ b/src/forms/index.scss
@@ -5,3 +5,7 @@
 @import './form-validation.scss';
 @import './input-group.scss';
 @import './radio-group.scss';
+// new pvc components
+@import './select-input.scss';
+@import './checkbox-radio.scss';
+@import './form-common.scss';
diff --git a/src/form-control/form-control.scss b/src/forms/select-input.scss
similarity index 56%
rename from src/form-control/form-control.scss
rename to src/forms/select-input.scss
index 6275dd9090..ab076978e7 100644
--- a/src/form-control/form-control.scss
+++ b/src/forms/select-input.scss
@@ -1,40 +1,21 @@
-// size
-// label placement
-// hidden label
-// placeholder
-// leading visual
-// clear button
-// invisible?
-// focus-within
-// state
-
-.FormControl {
+// input + select specific styles
+.FormControl--input,
+.FormControl--select,
+.FormControl--textarea {
   height: var(--primer-control-medium-size);
   font-size: var(--primer-text-body-size-medium);
   line-height: var(--primer-text-body-lineHeight-medium);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
   border-radius: var(--primer-borderRadius-medium);
   padding-inline: var(--primer-control-medium-paddingInline-normal);
-  background-color: var(--color-canvas-default);
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
   &[disabled] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
-    opacity: 1; // Fix for Safari iOS
-
     &::placeholder {
       color: var(--color-primer-fg-disabled);
     }
   }
 
-  &[invalid] {
-    border-color: var(--color-attention-emphasis);
-  }
-
   // Custom styling for HTML5 validation bubbles (WebKit only)
   ::placeholder {
     color: var(--color-fg-subtle);
@@ -42,86 +23,21 @@
   }
 }
 
-// size
-
-.FormControl-fieldWrap.FormControl--small,
-.FormControl--small {
-  height: var(--primer-control-small-size);
-  font-size: var(--primer-text-body-size-small);
-
-  .FormControl-trailingAction {
-    width: calc(var(--primer-control-small-size) - 8px);
-    height: calc(var(--primer-control-small-size) - 8px);
-  }
-}
-
-.FormControl-fieldWrap.FormControl--medium,
-.FormControl--medium {
-  height: var(--primer-control-medium-size);
-
-  .FormControl-trailingAction {
-    width: calc(var(--primer-control-medium-size) - 8px);
-    height: calc(var(--primer-control-medium-size) - 8px);
-  }
-}
-
-.FormControl-fieldWrap.FormControl--large,
-.FormControl--large {
-  height: var(--primer-control-large-size);
-  .FormControl-trailingAction {
-    width: calc(var(--primer-control-large-size) - 8px);
-    height: calc(var(--primer-control-large-size) - 8px);
-  }
-}
-
-.FormControl-label {
-  font-size: var(--primer-text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--primer-text-body-lineHeight-medium);
-}
-
-.FormGroup {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--primer-controlStack-medium-gap-condensed);
-}
-
-.FormGroup--inline {
-  flex-direction: row;
-  align-items: center;
-}
-
-.FormGroup--fullWidth {
-  display: flex;
-
-  .FormControl-fieldWrap {
-    flex-grow: 1;
-  }
-}
-
+// pseudo input styles to allow for visual and action slots
 .FormControl-fieldWrap {
   display: inline-grid;
-  grid-template-areas: 'leadingVisual input trailingAction';
-  grid-template-columns: min-content minmax(0, auto) min-content;
   grid-template-rows: auto;
   gap: var(--primer-controlStack-medium-gap-condensed);
   align-items: center;
   align-content: center;
   height: var(--primer-control-medium-size);
-  //   border: solid var(--primer-borderWidth-thin) var(--color-border-default);
   border-radius: var(--primer-borderRadius-medium);
   box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
   padding-inline: var(--primer-control-medium-paddingInline-normal);
-  //   overflow: hidden;
   background-color: var(--color-canvas-default);
   //   padding-bottom: 1px; // optical alignment for firefox
 
-  .FormControl-leadingVisual {
-    grid-area: leadingVisual;
-  }
-
   .FormControl {
-    grid-area: input;
     border: 0;
     padding: unset;
     height: 100%;
@@ -134,7 +50,34 @@
     }
   }
 
-  .FormControl-trailingAction {
+  &:focus-within {
+    @include focusBoxShadowInset(2px, var(--color-accent-fg));
+  }
+
+  &.FormControl-fieldWrap--disabled {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+  }
+
+  &.FormControl-fieldWrap--invalid {
+    box-shadow: var(--primer-borderInset-thin) var(--color-danger-emphasis);
+  }
+}
+
+.FormControl-fieldWrap--input {
+  grid-template-areas: 'leadingVisual input trailingAction';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+
+  .FormControl--input-leadingVisual {
+    grid-area: leadingVisual;
+  }
+
+  .FormControl--input {
+    grid-area: input;
+  }
+
+  // TODO: replace with new Button component
+  .FormControl--input-trailingAction {
     grid-area: trailingAction;
     display: grid;
     width: calc(var(--primer-control-medium-size) - 4px);
@@ -156,20 +99,35 @@
       background-color: var(--color-btn-hover-bg);
       border: $border-width $border-style var(--color-btn-hover-bg);
     }
-  }
-
-  &:focus-within {
-    // box-shadow: var(--primer-borderInset-thin) var(--color-accent-fg);
 
-    @include focusBoxShadowInset(2px, var(--color-accent-fg));
+    &[disabled] {
+      color: var(--color-primer-fg-disabled);
+      pointer-events: none;
+    }
   }
+}
 
-  &.FormControl-fieldWrap--disabled {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
+.FormControl-fieldWrap--select {
+  grid-template-columns: minmax(0, auto) var(--base-size-16);
+  padding-inline-end: var(--primer-control-medium-paddingInline-condensed);
+
+  &::after {
+    content: '';
+    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+    background-color: var(--color-fg-muted);
+    height: var(--base-size-16);
+    width: var(--base-size-16);
+    mask-size: cover;
+    pointer-events: none;
+    grid-column: 2;
+    grid-row: 1;
+    place-self: center end;
   }
 
-  &.FormControl-fieldWrap--invalid {
-    box-shadow: var(--primer-borderInset-thin) var(--color-danger-emphasis);
+  .FormControl {
+    grid-column: 1/-1;
+    grid-row: 1;
+    appearance: none;
+    padding-right: var(--base-size-16);
   }
 }

From 23af1fad9aea11031a7bf227a4041d3418940aac Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Tue, 10 May 2022 03:48:24 +0000
Subject: [PATCH 07/19] convert label to use grid for caption text (start)

---
 src/autocomplete/autocomplete.scss |  3 +++
 src/forms/form-common.scss         | 14 ++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 9d403f3fbb..d9b37bd325 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -1,3 +1,6 @@
+// This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
+// AutoComplete relies on FormControl, Overlay and ActionList CSS
+
 // Stacked label (default)
 .autocomplete-label-stacked {
   display: block;
diff --git a/src/forms/form-common.scss b/src/forms/form-common.scss
index 69dca243ea..2ff2db76a6 100644
--- a/src/forms/form-common.scss
+++ b/src/forms/form-common.scss
@@ -54,32 +54,37 @@
 
 // <label>
 .FormControl-label {
-  display: flex;
+  //   display: flex;
   font-size: var(--primer-text-body-size-medium);
   font-weight: var(--base-text-weight-semibold);
   line-height: var(--primer-text-body-lineHeight-medium);
-  flex-direction: column;
+  //   flex-direction: column;
   user-select: none;
-  gap: 4px;
+  //   gap: 4px;
+  grid-area: label;
 }
 
-.FormControl-label--hint {
+.FormControl-label--caption {
   margin-bottom: 0;
   font-size: var(--primer-text-body-size-small);
   font-weight: var(--base-text-weight-normal);
   color: var(--color-fg-muted);
+  grid-area: caption;
 }
 
 // group label and field
 .FormGroup {
   display: inline-flex;
+  display: inline-grid;
   flex-direction: column;
   gap: var(--primer-controlStack-medium-gap-condensed);
+  grid-template-areas: 'label' 'field' 'caption';
 }
 
 .FormGroup--inline {
   flex-direction: row;
   align-items: center;
+  grid-template-areas: 'label field' '. caption';
 }
 
 .FormGroup--formControls {
@@ -95,6 +100,7 @@
 
 .FormGroup--fullWidth {
   display: flex;
+  display: grid;
 
   .FormControl-fieldWrap {
     flex-grow: 1;

From 613bd93f822fb2d92b49369f4e5ed4968434e30c Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 12 May 2022 19:42:43 +0000
Subject: [PATCH 08/19] begin checkbox/radio custom styles

---
 src/forms/checkbox-radio.scss | 52 +++++++++++++++++++++++++++++++++++
 src/forms/form-common.scss    | 13 +++++++++
 src/forms/select-input.scss   | 18 ++++++++----
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/forms/checkbox-radio.scss b/src/forms/checkbox-radio.scss
index 74dfebf1eb..68fb61a7b2 100644
--- a/src/forms/checkbox-radio.scss
+++ b/src/forms/checkbox-radio.scss
@@ -18,3 +18,55 @@
 .FormControl--radio {
   border-radius: var(--primer-borderRadius-full);
 }
+
+// remove default checkbox/radio styling
+input[type='checkbox'] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* For iOS < 15 */
+  background-color: var(--form-background);
+  /* Not removed via appearance */
+  margin: 0;
+
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+}
+
+input[type='checkbox']::before {
+  content: '';
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  transform: scale(0);
+  transform-origin: bottom left;
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-control-color);
+  /* Windows High Contrast Mode */
+  background-color: CanvasText;
+}
+
+input[type='checkbox']:checked::before {
+  transform: scale(1);
+}
+
+input[type='checkbox']:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}
+
+input[type='checkbox']:disabled {
+  --form-control-color: var(--form-control-disabled);
+
+  color: var(--form-control-disabled);
+  cursor: not-allowed;
+}
diff --git a/src/forms/form-common.scss b/src/forms/form-common.scss
index 2ff2db76a6..19660556e0 100644
--- a/src/forms/form-common.scss
+++ b/src/forms/form-common.scss
@@ -30,6 +30,10 @@
     width: calc(var(--primer-control-small-size) - 8px);
     height: calc(var(--primer-control-small-size) - 8px);
   }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-small-paddingInline-condensed));
+  }
 }
 
 .FormControl-fieldWrap.FormControl--medium,
@@ -40,16 +44,25 @@
     width: calc(var(--primer-control-medium-size) - 8px);
     height: calc(var(--primer-control-medium-size) - 8px);
   }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
+  }
 }
 
 .FormControl-fieldWrap.FormControl--large,
 .FormControl--large {
   height: var(--primer-control-large-size);
+  //   padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
 
   .FormControl--input-trailingAction {
     width: calc(var(--primer-control-large-size) - 8px);
     height: calc(var(--primer-control-large-size) - 8px);
   }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
+  }
 }
 
 // <label>
diff --git a/src/forms/select-input.scss b/src/forms/select-input.scss
index ab076978e7..aef7c669a7 100644
--- a/src/forms/select-input.scss
+++ b/src/forms/select-input.scss
@@ -33,14 +33,14 @@
   height: var(--primer-control-medium-size);
   border-radius: var(--primer-borderRadius-medium);
   box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
-  padding-inline: var(--primer-control-medium-paddingInline-normal);
+  padding-inline: var(--primer-control-medium-paddingInline-condensed);
   background-color: var(--color-canvas-default);
   //   padding-bottom: 1px; // optical alignment for firefox
 
   .FormControl {
     border: 0;
     padding: unset;
-    height: 100%;
+    // height: 100%;
     background-color: transparent;
 
     &:focus-visible,
@@ -65,15 +65,21 @@
 }
 
 .FormControl-fieldWrap--input {
-  grid-template-areas: 'leadingVisual input trailingAction';
-  grid-template-columns: min-content minmax(0, auto) min-content;
+  //   grid-template-areas: 'leadingVisual input trailingAction';
+  grid-template-columns: 1rem minmax(0, auto) min-content;
+  grid-template-rows: max-content;
 
   .FormControl--input-leadingVisual {
-    grid-area: leadingVisual;
+    // grid-area: leadingVisual;
+    grid-column: 1;
+    grid-row: 1;
   }
 
   .FormControl--input {
-    grid-area: input;
+    // grid-area: input;
+    grid-column: 1/-1;
+    grid-row: 1;
+    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
   }
 
   // TODO: replace with new Button component

From e6d21be2c6cf99b9efc2f76f34a76598223be77e Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 20 May 2022 00:30:44 +0000
Subject: [PATCH 09/19] fix input grid (mostly)

---
 src/forms/checkbox-radio.scss |  72 -----------
 src/forms/form-common.scss    | 121 -------------------
 src/forms/select-input.scss   | 220 +++++++++++++++++++++++++++++++++-
 3 files changed, 216 insertions(+), 197 deletions(-)

diff --git a/src/forms/checkbox-radio.scss b/src/forms/checkbox-radio.scss
index 68fb61a7b2..e69de29bb2 100644
--- a/src/forms/checkbox-radio.scss
+++ b/src/forms/checkbox-radio.scss
@@ -1,72 +0,0 @@
-// checkbox + radio specific styles
-.FormControl--checkbox,
-.FormControl--radio {
-  display: block;
-  width: var(--base-size-16);
-  height: var(--base-size-16);
-  background: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
-  border-radius: var(--primer-borderRadius-small);
-
-  &:disabled {
-    & + .FormControl-label {
-      color: var(--color-primer-fg-disabled);
-    }
-  }
-}
-
-.FormControl--radio {
-  border-radius: var(--primer-borderRadius-full);
-}
-
-// remove default checkbox/radio styling
-input[type='checkbox'] {
-  /* Add if not using autoprefixer */
-  -webkit-appearance: none;
-  /* Remove most all native input styles */
-  appearance: none;
-  /* For iOS < 15 */
-  background-color: var(--form-background);
-  /* Not removed via appearance */
-  margin: 0;
-
-  font: inherit;
-  color: currentColor;
-  width: 1.15em;
-  height: 1.15em;
-  border: 0.15em solid currentColor;
-  border-radius: 0.15em;
-  transform: translateY(-0.075em);
-
-  display: grid;
-  place-content: center;
-}
-
-input[type='checkbox']::before {
-  content: '';
-  width: 0.65em;
-  height: 0.65em;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  transform: scale(0);
-  transform-origin: bottom left;
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--form-control-color);
-  /* Windows High Contrast Mode */
-  background-color: CanvasText;
-}
-
-input[type='checkbox']:checked::before {
-  transform: scale(1);
-}
-
-input[type='checkbox']:focus {
-  outline: max(2px, 0.15em) solid currentColor;
-  outline-offset: max(2px, 0.15em);
-}
-
-input[type='checkbox']:disabled {
-  --form-control-color: var(--form-control-disabled);
-
-  color: var(--form-control-disabled);
-  cursor: not-allowed;
-}
diff --git a/src/forms/form-common.scss b/src/forms/form-common.scss
index 19660556e0..e69de29bb2 100644
--- a/src/forms/form-common.scss
+++ b/src/forms/form-common.scss
@@ -1,121 +0,0 @@
-:root {
-  accent-color: var(--color-accent-fg);
-}
-
-.FormControl {
-  background-color: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
-
-  &[disabled] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
-    opacity: 1; // Fix for Safari iOS
-  }
-
-  &[invalid] {
-    border-color: var(--color-attention-emphasis);
-  }
-}
-
-// size
-
-.FormControl-fieldWrap.FormControl--small,
-.FormControl--small {
-  height: var(--primer-control-small-size);
-  font-size: var(--primer-text-body-size-small);
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-small-size) - 8px);
-    height: calc(var(--primer-control-small-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-small-paddingInline-condensed));
-  }
-}
-
-.FormControl-fieldWrap.FormControl--medium,
-.FormControl--medium {
-  height: var(--primer-control-medium-size);
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-medium-size) - 8px);
-    height: calc(var(--primer-control-medium-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
-  }
-}
-
-.FormControl-fieldWrap.FormControl--large,
-.FormControl--large {
-  height: var(--primer-control-large-size);
-  //   padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-large-size) - 8px);
-    height: calc(var(--primer-control-large-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
-  }
-}
-
-// <label>
-.FormControl-label {
-  //   display: flex;
-  font-size: var(--primer-text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--primer-text-body-lineHeight-medium);
-  //   flex-direction: column;
-  user-select: none;
-  //   gap: 4px;
-  grid-area: label;
-}
-
-.FormControl-label--caption {
-  margin-bottom: 0;
-  font-size: var(--primer-text-body-size-small);
-  font-weight: var(--base-text-weight-normal);
-  color: var(--color-fg-muted);
-  grid-area: caption;
-}
-
-// group label and field
-.FormGroup {
-  display: inline-flex;
-  display: inline-grid;
-  flex-direction: column;
-  gap: var(--primer-controlStack-medium-gap-condensed);
-  grid-template-areas: 'label' 'field' 'caption';
-}
-
-.FormGroup--inline {
-  flex-direction: row;
-  align-items: center;
-  grid-template-areas: 'label field' '. caption';
-}
-
-.FormGroup--formControls {
-  flex-direction: row;
-  align-items: start;
-
-  .FormControl[type='checkbox'],
-  .FormControl[type='radio'] {
-    flex-shrink: 0;
-    margin-top: 0.15625rem;
-  }
-}
-
-.FormGroup--fullWidth {
-  display: flex;
-  display: grid;
-
-  .FormControl-fieldWrap {
-    flex-grow: 1;
-  }
-}
diff --git a/src/forms/select-input.scss b/src/forms/select-input.scss
index aef7c669a7..8f322a8158 100644
--- a/src/forms/select-input.scss
+++ b/src/forms/select-input.scss
@@ -1,3 +1,5 @@
+// rename file FormControl
+
 // input + select specific styles
 .FormControl--input,
 .FormControl--select,
@@ -64,27 +66,42 @@
   }
 }
 
+.FormControl-fieldWrap--leadingVisual {
+  grid-template-columns: 1rem minmax(0, auto);
+
+  &.FormControl-fieldWrap--trailingAction {
+    grid-template-columns: 1rem minmax(0, auto) min-content;
+  }
+}
+
+.FormControl-fieldWrap--trailingAction {
+  grid-template-columns: minmax(0, auto) min-content;
+}
+
 .FormControl-fieldWrap--input {
   //   grid-template-areas: 'leadingVisual input trailingAction';
-  grid-template-columns: 1rem minmax(0, auto) min-content;
+  //   grid-auto-columns: minmax(0, auto) minmax(0, auto) min-content;
   grid-template-rows: max-content;
 
   .FormControl--input-leadingVisual {
     // grid-area: leadingVisual;
-    grid-column: 1;
+    grid-column: 1 / 2;
     grid-row: 1;
   }
 
   .FormControl--input {
     // grid-area: input;
-    grid-column: 1/-1;
+    grid-column: 1 / -1;
+    // grid-column-start: 1;
     grid-row: 1;
     padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
   }
 
   // TODO: replace with new Button component
   .FormControl--input-trailingAction {
-    grid-area: trailingAction;
+    // grid-area: trailingAction;
+    // grid-column: 3 / 4;
+    grid-row: 1;
     display: grid;
     width: calc(var(--primer-control-medium-size) - 4px);
     height: calc(var(--primer-control-medium-size) - 4px);
@@ -137,3 +154,198 @@
     padding-right: var(--base-size-16);
   }
 }
+
+:root {
+  accent-color: var(--color-accent-fg);
+}
+
+.FormControl {
+  background-color: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+  }
+
+  &[invalid] {
+    border-color: var(--color-attention-emphasis);
+  }
+}
+
+// size
+
+.FormControl-fieldWrap.FormControl--small,
+.FormControl--small {
+  height: var(--primer-control-small-size);
+  font-size: var(--primer-text-body-size-small);
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-small-size) - 8px);
+    height: calc(var(--primer-control-small-size) - 8px);
+  }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-small-paddingInline-condensed));
+  }
+}
+
+.FormControl-fieldWrap.FormControl--medium,
+.FormControl--medium {
+  height: var(--primer-control-medium-size);
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-medium-size) - 8px);
+    height: calc(var(--primer-control-medium-size) - 8px);
+  }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
+  }
+}
+
+.FormControl-fieldWrap.FormControl--large,
+.FormControl--large {
+  height: var(--primer-control-large-size);
+  //   padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
+
+  .FormControl--input-trailingAction {
+    width: calc(var(--primer-control-large-size) - 8px);
+    height: calc(var(--primer-control-large-size) - 8px);
+  }
+
+  &.FormControl--input {
+    padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
+  }
+}
+
+// <label>
+.FormControl-label {
+  //   display: flex;
+  font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--primer-text-body-lineHeight-medium);
+  //   flex-direction: column;
+  user-select: none;
+  //   gap: 4px;
+  grid-area: label;
+}
+
+.FormControl-label--caption {
+  margin-bottom: 0;
+  font-size: var(--primer-text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  color: var(--color-fg-muted);
+  grid-area: caption;
+}
+
+// group label and field
+.FormGroup {
+  display: inline-flex;
+  display: inline-grid;
+  flex-direction: column;
+  gap: var(--primer-controlStack-medium-gap-condensed);
+  grid-template-areas: 'label' 'field' 'caption';
+}
+
+.FormGroup--inline {
+  flex-direction: row;
+  align-items: center;
+  grid-template-areas: 'label field' '. caption';
+}
+
+.FormGroup--formControls {
+  flex-direction: row;
+  align-items: start;
+
+  .FormControl[type='checkbox'],
+  .FormControl[type='radio'] {
+    flex-shrink: 0;
+    margin-top: 0.15625rem;
+  }
+}
+
+.FormGroup--fullWidth {
+  display: flex;
+  display: grid;
+
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
+}
+
+// checkbox + radio specific styles
+.FormControl--checkbox,
+.FormControl--radio {
+  display: block;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  background: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+  border-radius: var(--primer-borderRadius-small);
+
+  &:disabled {
+    & + .FormControl-label {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+}
+
+.FormControl--radio {
+  border-radius: var(--primer-borderRadius-full);
+}
+
+// remove default checkbox/radio styling
+input[type='checkbox'] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* For iOS < 15 */
+  background-color: var(--form-background);
+  /* Not removed via appearance */
+  margin: 0;
+
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+}
+
+input[type='checkbox']::before {
+  content: '';
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  transform: scale(0);
+  transform-origin: bottom left;
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-control-color);
+  /* Windows High Contrast Mode */
+  background-color: CanvasText;
+}
+
+input[type='checkbox']:checked::before {
+  transform: scale(1);
+}
+
+input[type='checkbox']:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}
+
+input[type='checkbox']:disabled {
+  --form-control-color: var(--form-control-disabled);
+
+  color: var(--form-control-disabled);
+  cursor: not-allowed;
+}

From 29b2a95614d2dc32351ebc876edc358dc01c6b5a Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 20 May 2022 03:32:41 +0000
Subject: [PATCH 10/19] refactor + cleanup

---
 src/forms/select-input.scss | 375 ++++++++++++++++++------------------
 1 file changed, 185 insertions(+), 190 deletions(-)

diff --git a/src/forms/select-input.scss b/src/forms/select-input.scss
index 8f322a8158..e59f8f16bb 100644
--- a/src/forms/select-input.scss
+++ b/src/forms/select-input.scss
@@ -1,31 +1,104 @@
 // rename file FormControl
 
-// input + select specific styles
-.FormControl--input,
-.FormControl--select,
-.FormControl--textarea {
-  height: var(--primer-control-medium-size);
+//todo
+// add fallbacks
+// copy html to docs
+
+:root {
+  accent-color: var(--color-accent-fg);
+}
+
+// group label, field, caption and error message
+.FormGroup {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--primer-controlStack-medium-gap-condensed);
+}
+
+// fill container
+.FormGroup--fullWidth {
+  display: flex;
+
+  // stretch field to fill container
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
+}
+
+// <label>
+.FormControl-label {
   font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
   line-height: var(--primer-text-body-lineHeight-medium);
-  border-radius: var(--primer-borderRadius-medium);
-  padding-inline: var(--primer-control-medium-paddingInline-normal);
-  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
+  user-select: none;
+}
+
+// optional caption
+.FormControl-caption {
+  margin-bottom: 0;
+  font-size: var(--primer-text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  color: var(--color-fg-muted);
+}
+
+// shared among all form control components (input, select, textarea, checkbox, radio)
+.FormControl {
+  background-color: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
 
   &[disabled] {
-    &::placeholder {
-      color: var(--color-primer-fg-disabled);
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+  }
+
+  &[invalid] {
+    border-color: var(--color-attention-emphasis);
+  }
+
+  &.FormControl--input,
+  &.FormControl--select {
+    height: var(--primer-control-medium-size);
+    font-size: var(--primer-text-body-size-medium);
+    line-height: var(--primer-text-body-lineHeight-medium);
+    border-radius: var(--primer-borderRadius-medium);
+    padding-inline: var(--primer-control-medium-paddingInline-condensed);
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+
+    &[disabled] {
+      &::placeholder {
+        color: var(--color-primer-fg-disabled);
+      }
     }
+
+    ::placeholder {
+      color: var(--color-fg-subtle);
+      opacity: 1;
+    }
+  }
+
+  // sizes
+
+  &.FormControl--small {
+    height: var(--primer-control-small-size);
+    font-size: var(--primer-text-body-size-small);
   }
 
-  // Custom styling for HTML5 validation bubbles (WebKit only)
-  ::placeholder {
-    color: var(--color-fg-subtle);
-    opacity: 1; // override opacity in normalize.css
+  &.FormControl--medium {
+    height: var(--primer-control-medium-size);
+  }
+
+  &.FormControl--large {
+    height: var(--primer-control-large-size);
+    padding-inline: var(--primer-control-large-paddingInline-normal);
   }
 }
 
 // pseudo input styles to allow for visual and action slots
+// set input styles on -fieldWrap, remove styles from <input>
 .FormControl-fieldWrap {
   display: inline-grid;
   grid-template-rows: auto;
@@ -37,7 +110,6 @@
   box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
   padding-inline: var(--primer-control-medium-paddingInline-condensed);
   background-color: var(--color-canvas-default);
-  //   padding-bottom: 1px; // optical alignment for firefox
 
   .FormControl {
     border: 0;
@@ -64,68 +136,102 @@
   &.FormControl-fieldWrap--invalid {
     box-shadow: var(--primer-borderInset-thin) var(--color-danger-emphasis);
   }
-}
 
-.FormControl-fieldWrap--leadingVisual {
-  grid-template-columns: 1rem minmax(0, auto);
+  // if leadingVisual is present
+  &.FormControl-fieldWrap--input-leadingVisual {
+    grid-template-columns: 1rem minmax(0, auto);
+
+    .FormControl--input {
+      padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
+    }
 
-  &.FormControl-fieldWrap--trailingAction {
-    grid-template-columns: 1rem minmax(0, auto) min-content;
+    // if leadingVisual and trailingAction are present
+    &.FormControl-fieldWrap--input-trailingAction {
+      grid-template-columns: 1rem minmax(0, auto) min-content;
+    }
   }
-}
 
-.FormControl-fieldWrap--trailingAction {
-  grid-template-columns: minmax(0, auto) min-content;
-}
+  // if trailingAction is present
+  &.FormControl-fieldWrap--input-trailingAction {
+    grid-template-columns: minmax(0, auto) min-content;
+  }
 
-.FormControl-fieldWrap--input {
-  //   grid-template-areas: 'leadingVisual input trailingAction';
-  //   grid-auto-columns: minmax(0, auto) minmax(0, auto) min-content;
-  grid-template-rows: max-content;
+  &.FormControl-fieldWrap--input {
+    grid-template-rows: max-content;
 
-  .FormControl--input-leadingVisual {
-    // grid-area: leadingVisual;
-    grid-column: 1 / 2;
-    grid-row: 1;
-  }
+    .FormControl--input-leadingVisual {
+      grid-column: 1 / 2;
+      grid-row: 1;
+    }
 
-  .FormControl--input {
-    // grid-area: input;
-    grid-column: 1 / -1;
-    // grid-column-start: 1;
-    grid-row: 1;
-    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
-  }
+    // <input> spans entire grid
+    .FormControl--input {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
 
-  // TODO: replace with new Button component
-  .FormControl--input-trailingAction {
-    // grid-area: trailingAction;
-    // grid-column: 3 / 4;
-    grid-row: 1;
-    display: grid;
-    width: calc(var(--primer-control-medium-size) - 4px);
-    height: calc(var(--primer-control-medium-size) - 4px);
-    color: var(--color-fg-muted);
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: solid var(--primer-borderWidth-thin) transparent;
-    border-radius: var(--primer-borderRadius-medium);
-    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-    transition-property: color, background-color, border-color;
-    place-content: center;
-    margin-right: calc(var(--primer-control-medium-paddingInline-normal) * -1);
-    margin-right: -8px;
-    padding: 0;
-
-    &:hover {
-      background-color: var(--color-btn-hover-bg);
-      border: $border-width $border-style var(--color-btn-hover-bg);
+    // TODO: replace with new Button component
+    // trailingAction will auto fill last grid slot
+    .FormControl--input-trailingAction {
+      grid-row: 1;
+      display: grid;
+      width: calc(var(--primer-control-medium-size) - 4px);
+      height: calc(var(--primer-control-medium-size) - 4px);
+      color: var(--color-fg-muted);
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: solid var(--primer-borderWidth-thin) transparent;
+      border-radius: var(--primer-borderRadius-medium);
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      place-content: center;
+      // optically align the icon with field padding
+      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed) - 0.125rem) * -1);
+      padding: 0;
+
+      &:hover {
+        background-color: var(--color-btn-hover-bg);
+        border: $border-width $border-style var(--color-btn-hover-bg);
+      }
+
+      &[disabled] {
+        color: var(--color-primer-fg-disabled);
+        pointer-events: none;
+      }
     }
 
-    &[disabled] {
-      color: var(--color-primer-fg-disabled);
-      pointer-events: none;
+    // sizes
+
+    // these selectors can be refactored to use :has()
+    &.FormControl--small {
+      height: var(--primer-control-small-size);
+      font-size: var(--primer-text-body-size-small);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-small-size) - var(--base-size-8));
+        height: calc(var(--primer-control-small-size) - var(--base-size-8));
+      }
+    }
+
+    &.FormControl--medium {
+      height: var(--primer-control-medium-size);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-medium-size) - var(--base-size-8));
+        height: calc(var(--primer-control-medium-size) - var(--base-size-8));
+      }
+    }
+
+    &.FormControl--large {
+      height: var(--primer-control-large-size);
+      padding-inline: var(--primer-control-large-paddingInline-normal);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-large-size) - var(--base-size-8));
+        height: calc(var(--primer-control-large-size) - var(--base-size-8));
+        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal) - 0.125rem) * -1);
+      }
     }
   }
 }
@@ -155,128 +261,6 @@
   }
 }
 
-:root {
-  accent-color: var(--color-accent-fg);
-}
-
-.FormControl {
-  background-color: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
-
-  &[disabled] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
-    opacity: 1; // Fix for Safari iOS
-  }
-
-  &[invalid] {
-    border-color: var(--color-attention-emphasis);
-  }
-}
-
-// size
-
-.FormControl-fieldWrap.FormControl--small,
-.FormControl--small {
-  height: var(--primer-control-small-size);
-  font-size: var(--primer-text-body-size-small);
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-small-size) - 8px);
-    height: calc(var(--primer-control-small-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-small-paddingInline-condensed));
-  }
-}
-
-.FormControl-fieldWrap.FormControl--medium,
-.FormControl--medium {
-  height: var(--primer-control-medium-size);
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-medium-size) - 8px);
-    height: calc(var(--primer-control-medium-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
-  }
-}
-
-.FormControl-fieldWrap.FormControl--large,
-.FormControl--large {
-  height: var(--primer-control-large-size);
-  //   padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
-
-  .FormControl--input-trailingAction {
-    width: calc(var(--primer-control-large-size) - 8px);
-    height: calc(var(--primer-control-large-size) - 8px);
-  }
-
-  &.FormControl--input {
-    padding-inline-start: calc(1rem + var(--primer-control-large-paddingInline-normal));
-  }
-}
-
-// <label>
-.FormControl-label {
-  //   display: flex;
-  font-size: var(--primer-text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--primer-text-body-lineHeight-medium);
-  //   flex-direction: column;
-  user-select: none;
-  //   gap: 4px;
-  grid-area: label;
-}
-
-.FormControl-label--caption {
-  margin-bottom: 0;
-  font-size: var(--primer-text-body-size-small);
-  font-weight: var(--base-text-weight-normal);
-  color: var(--color-fg-muted);
-  grid-area: caption;
-}
-
-// group label and field
-.FormGroup {
-  display: inline-flex;
-  display: inline-grid;
-  flex-direction: column;
-  gap: var(--primer-controlStack-medium-gap-condensed);
-  grid-template-areas: 'label' 'field' 'caption';
-}
-
-.FormGroup--inline {
-  flex-direction: row;
-  align-items: center;
-  grid-template-areas: 'label field' '. caption';
-}
-
-.FormGroup--formControls {
-  flex-direction: row;
-  align-items: start;
-
-  .FormControl[type='checkbox'],
-  .FormControl[type='radio'] {
-    flex-shrink: 0;
-    margin-top: 0.15625rem;
-  }
-}
-
-.FormGroup--fullWidth {
-  display: flex;
-  display: grid;
-
-  .FormControl-fieldWrap {
-    flex-grow: 1;
-  }
-}
-
 // checkbox + radio specific styles
 .FormControl--checkbox,
 .FormControl--radio {
@@ -349,3 +333,14 @@ input[type='checkbox']:disabled {
   color: var(--form-control-disabled);
   cursor: not-allowed;
 }
+
+.FormControl-caption {
+  flex-direction: row;
+  align-items: start;
+
+  .FormControl[type='checkbox'],
+  .FormControl[type='radio'] {
+    flex-shrink: 0;
+    margin-top: 0.15625rem;
+  }
+}

From 0157e0c70f48b58e3ee3baaa70e9b37d177b5a1e Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 20 May 2022 22:54:50 +0000
Subject: [PATCH 11/19] consolidate styles, start custom checkbox

---
 .../{select-input.scss => FormControl.scss}   | 141 +++++++++---------
 src/forms/checkbox-radio.scss                 |   0
 src/forms/form-common.scss                    |   0
 src/forms/index.scss                          |   4 +-
 4 files changed, 70 insertions(+), 75 deletions(-)
 rename src/forms/{select-input.scss => FormControl.scss} (78%)
 delete mode 100644 src/forms/checkbox-radio.scss
 delete mode 100644 src/forms/form-common.scss

diff --git a/src/forms/select-input.scss b/src/forms/FormControl.scss
similarity index 78%
rename from src/forms/select-input.scss
rename to src/forms/FormControl.scss
index e59f8f16bb..f2306f4160 100644
--- a/src/forms/select-input.scss
+++ b/src/forms/FormControl.scss
@@ -1,9 +1,5 @@
 // rename file FormControl
 
-//todo
-// add fallbacks
-// copy html to docs
-
 :root {
   accent-color: var(--color-accent-fg);
 }
@@ -58,6 +54,7 @@
     border-color: var(--color-attention-emphasis);
   }
 
+  // <select> and <input>
   &.FormControl--input,
   &.FormControl--select {
     height: var(--primer-control-medium-size);
@@ -114,7 +111,6 @@
   .FormControl {
     border: 0;
     padding: unset;
-    // height: 100%;
     background-color: transparent;
 
     &:focus-visible,
@@ -139,15 +135,15 @@
 
   // if leadingVisual is present
   &.FormControl-fieldWrap--input-leadingVisual {
-    grid-template-columns: 1rem minmax(0, auto);
+    grid-template-columns: var(--base-size-16) minmax(0, auto);
 
     .FormControl--input {
-      padding-inline-start: calc(1rem + var(--primer-control-medium-paddingInline-condensed));
+      padding-inline-start: calc(var(--base-size-16) + var(--primer-control-medium-paddingInline-condensed));
     }
 
     // if leadingVisual and trailingAction are present
     &.FormControl-fieldWrap--input-trailingAction {
-      grid-template-columns: 1rem minmax(0, auto) min-content;
+      grid-template-columns: var(--base-size-16) minmax(0, auto) min-content;
     }
   }
 
@@ -240,6 +236,7 @@
   grid-template-columns: minmax(0, auto) var(--base-size-16);
   padding-inline-end: var(--primer-control-medium-paddingInline-condensed);
 
+  // mask allows for background-color to respect themes
   &::after {
     content: '';
     mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
@@ -253,6 +250,7 @@
     place-self: center end;
   }
 
+  // spans entire grid below mask
   .FormControl {
     grid-column: 1/-1;
     grid-row: 1;
@@ -261,86 +259,85 @@
   }
 }
 
+.FormGroup--checkbox {
+  display: inline-grid;
+  grid-template-areas: 'field label' '. caption';
+
+  .FormControl-label {
+    grid-area: label;
+  }
+
+  .FormControl-caption {
+    grid-area: caption;
+  }
+}
+
 // checkbox + radio specific styles
 .FormControl--checkbox,
 .FormControl--radio {
-  display: block;
+  position: absolute;
   width: var(--base-size-16);
   height: var(--base-size-16);
-  background: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
-  border-radius: var(--primer-borderRadius-small);
+  opacity: 0;
+
+  &:checked {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-check {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+        opacity: 1;
+        transition: visibility 0 linear 0, opacity 50ms;
 
-  &:disabled {
-    & + .FormControl-label {
-      color: var(--color-primer-fg-disabled);
+        @media screen and (prefers-reduced-motion: no-preference) {
+          animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+        }
+      }
     }
   }
-}
-
-.FormControl--radio {
-  border-radius: var(--primer-borderRadius-full);
-}
 
-// remove default checkbox/radio styling
-input[type='checkbox'] {
-  /* Add if not using autoprefixer */
-  -webkit-appearance: none;
-  /* Remove most all native input styles */
-  appearance: none;
-  /* For iOS < 15 */
-  background-color: var(--form-background);
-  /* Not removed via appearance */
-  margin: 0;
-
-  font: inherit;
-  color: currentColor;
-  width: 1.15em;
-  height: 1.15em;
-  border: 0.15em solid currentColor;
-  border-radius: 0.15em;
-  transform: translateY(-0.075em);
-
-  display: grid;
-  place-content: center;
-}
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
 
-input[type='checkbox']::before {
-  content: '';
-  width: 0.65em;
-  height: 0.65em;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  transform: scale(0);
-  transform-origin: bottom left;
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--form-control-color);
-  /* Windows High Contrast Mode */
-  background-color: CanvasText;
-}
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
 
-input[type='checkbox']:checked::before {
-  transform: scale(1);
-}
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
 
-input[type='checkbox']:focus {
-  outline: max(2px, 0.15em) solid currentColor;
-  outline-offset: max(2px, 0.15em);
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
 }
 
-input[type='checkbox']:disabled {
-  --form-control-color: var(--form-control-disabled);
+.FormControl--checkbox-svg {
+  margin-top: 0.125rem;
+  cursor: pointer;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
 
-  color: var(--form-control-disabled);
-  cursor: not-allowed;
-}
+  .FormControl--checkbox-background {
+    fill: var(--color-canvas-default);
+    stroke: var(--color-border-default);
+  }
 
-.FormControl-caption {
-  flex-direction: row;
-  align-items: start;
+  .FormControl--checkbox-check {
+    fill: transparent;
+    opacity: 0;
 
-  .FormControl[type='checkbox'],
-  .FormControl[type='radio'] {
-    flex-shrink: 0;
-    margin-top: 0.15625rem;
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+    }
   }
 }
diff --git a/src/forms/checkbox-radio.scss b/src/forms/checkbox-radio.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/forms/form-common.scss b/src/forms/form-common.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/forms/index.scss b/src/forms/index.scss
index 98916878d3..849a220a22 100644
--- a/src/forms/index.scss
+++ b/src/forms/index.scss
@@ -6,6 +6,4 @@
 @import './input-group.scss';
 @import './radio-group.scss';
 // new pvc components
-@import './select-input.scss';
-@import './checkbox-radio.scss';
-@import './form-common.scss';
+@import './FormControl.scss';

From a247c38688996801c503e3228340e727f3e4c4e1 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 20 May 2022 23:12:49 +0000
Subject: [PATCH 12/19] cleanup

---
 src/core/index.scss        | 1 -
 src/forms/FormControl.scss | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/index.scss b/src/core/index.scss
index 7e0bf1fcb4..bc704ee041 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -28,4 +28,3 @@
 
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';
-@import '../primitives/index.scss';
diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
index f2306f4160..1c16146e02 100644
--- a/src/forms/FormControl.scss
+++ b/src/forms/FormControl.scss
@@ -1,4 +1,4 @@
-// rename file FormControl
+// TODO: add fallbacks before merge
 
 :root {
   accent-color: var(--color-accent-fg);

From 68d7267edd1b7d04d0e71e8399028c2864fe470c Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sun, 22 May 2022 00:34:44 +0000
Subject: [PATCH 13/19] lint

---
 src/forms/FormControl.scss | 152 +++++++++++++++++++++----------------
 1 file changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
index 1c16146e02..9a599ced12 100644
--- a/src/forms/FormControl.scss
+++ b/src/forms/FormControl.scss
@@ -1,4 +1,4 @@
-// TODO: add fallbacks before merge
+// stylelint-disable primer/typography, primer/borders, primer/spacing, primer/box-shadow, max-nesting-depth
 
 :root {
   accent-color: var(--color-accent-fg);
@@ -8,7 +8,7 @@
 .FormGroup {
   display: inline-flex;
   flex-direction: column;
-  gap: var(--primer-controlStack-medium-gap-condensed);
+  gap: var(--base-size-4, 4px);
 }
 
 // fill container
@@ -23,45 +23,62 @@
 
 // <label>
 .FormControl-label {
-  font-size: var(--primer-text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--primer-text-body-lineHeight-medium);
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: var(--primer-text-body-lineHeight-medium, 20px);
   user-select: none;
 }
 
 // optional caption
 .FormControl-caption {
   margin-bottom: 0;
-  font-size: var(--primer-text-body-size-small);
-  font-weight: var(--base-text-weight-normal);
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--primer-text-caption-weight, 400);
+  line-height: var(--primer-text-caption-lineHeight, 16px);
   color: var(--color-fg-muted);
 }
 
+.FormControl-validation {
+  display: flex;
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+  fill: var(--color-danger-fg);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-size-4, 4px);
+
+  // stylelint-disable-next-line selector-max-type
+  p {
+    margin-bottom: 0;
+  }
+}
+
 // shared among all form control components (input, select, textarea, checkbox, radio)
 .FormControl {
   background-color: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin) var(--color-border-default);
+  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);
     border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
-    opacity: 1; // Fix for Safari iOS
+    -webkit-text-fill-color: var(--color-primer-fg-disabled);
+    opacity: 1;
   }
 
-  &[invalid] {
-    border-color: var(--color-attention-emphasis);
+  &:not(:focus)[invalid] {
+    border-color: var(--color-danger-emphasis);
   }
 
   // <select> and <input>
   &.FormControl--input,
   &.FormControl--select {
-    height: var(--primer-control-medium-size);
-    font-size: var(--primer-text-body-size-medium);
-    line-height: var(--primer-text-body-lineHeight-medium);
-    border-radius: var(--primer-borderRadius-medium);
-    padding-inline: var(--primer-control-medium-paddingInline-condensed);
+    height: var(--primer-control-medium-size, 32px);
+    font-size: var(--primer-text-body-size-medium, 14px);
+    line-height: var(--primer-text-body-lineHeight-medium, 20px);
+    border-radius: var(--primer-borderRadius-medium, 6px);
+    padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
     transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
     transition-property: color, background-color, box-shadow, border-color;
 
@@ -80,17 +97,17 @@
   // sizes
 
   &.FormControl--small {
-    height: var(--primer-control-small-size);
-    font-size: var(--primer-text-body-size-small);
+    height: var(--primer-control-small-size, 28px);
+    font-size: var(--primer-text-body-size-small, 12px);
   }
 
   &.FormControl--medium {
-    height: var(--primer-control-medium-size);
+    height: var(--primer-control-medium-size, 32px);
   }
 
   &.FormControl--large {
-    height: var(--primer-control-large-size);
-    padding-inline: var(--primer-control-large-paddingInline-normal);
+    height: var(--primer-control-large-size, 40px);
+    padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
   }
 }
 
@@ -98,25 +115,25 @@
 // set input styles on -fieldWrap, remove styles from <input>
 .FormControl-fieldWrap {
   display: inline-grid;
+  height: var(--primer-control-medium-size, 32px);
+  background-color: var(--color-canvas-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-border-default);
   grid-template-rows: auto;
-  gap: var(--primer-controlStack-medium-gap-condensed);
+  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
   align-items: center;
   align-content: center;
-  height: var(--primer-control-medium-size);
-  border-radius: var(--primer-borderRadius-medium);
-  box-shadow: var(--primer-borderInset-thin) var(--color-border-default);
-  padding-inline: var(--primer-control-medium-paddingInline-condensed);
-  background-color: var(--color-canvas-default);
+  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
 
   .FormControl {
-    border: 0;
     padding: unset;
     background-color: transparent;
+    border: 0;
 
     &:focus-visible,
     &:focus {
-      box-shadow: none;
       outline: none;
+      box-shadow: none;
     }
   }
 
@@ -129,21 +146,21 @@
     background-color: var(--color-input-disabled-bg);
   }
 
-  &.FormControl-fieldWrap--invalid {
-    box-shadow: var(--primer-borderInset-thin) var(--color-danger-emphasis);
+  &.FormControl-fieldWrap--invalid:not(:focus-within) {
+    box-shadow: var(--primer-borderInset-thin, 1px) var(--color-danger-emphasis);
   }
 
   // if leadingVisual is present
   &.FormControl-fieldWrap--input-leadingVisual {
-    grid-template-columns: var(--base-size-16) minmax(0, auto);
+    grid-template-columns: var(--base-size-16, 16px) minmax(0, auto);
 
     .FormControl--input {
-      padding-inline-start: calc(var(--base-size-16) + var(--primer-control-medium-paddingInline-condensed));
+      padding-inline-start: calc(var(--base-size-16, 16px) + var(--primer-control-medium-paddingInline-condensed, 8px));
     }
 
     // if leadingVisual and trailingAction are present
     &.FormControl-fieldWrap--input-trailingAction {
-      grid-template-columns: var(--base-size-16) minmax(0, auto) min-content;
+      grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
     }
   }
 
@@ -169,26 +186,27 @@
     // TODO: replace with new Button component
     // trailingAction will auto fill last grid slot
     .FormControl--input-trailingAction {
-      grid-row: 1;
       display: grid;
-      width: calc(var(--primer-control-medium-size) - 4px);
-      height: calc(var(--primer-control-medium-size) - 4px);
+      width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      padding: 0;
+      // optically align the icon with field padding
+      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem) * -1);
       color: var(--color-fg-muted);
       cursor: pointer;
       user-select: none;
       background-color: transparent;
-      border: solid var(--primer-borderWidth-thin) transparent;
-      border-radius: var(--primer-borderRadius-medium);
+      border: solid var(--primer-borderWidth-thin, 1px) transparent;
+      border-radius: var(--primer-borderRadius-medium, 6px);
       transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
       transition-property: color, background-color, border-color;
+      grid-row: 1;
       place-content: center;
-      // optically align the icon with field padding
-      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed) - 0.125rem) * -1);
-      padding: 0;
+      place-self: center end;
 
       &:hover {
         background-color: var(--color-btn-hover-bg);
-        border: $border-width $border-style var(--color-btn-hover-bg);
+        border: solid var(--primer-borderWidth-thin, 1px) var(--color-btn-hover-bg);
       }
 
       &[disabled] {
@@ -201,50 +219,50 @@
 
     // these selectors can be refactored to use :has()
     &.FormControl--small {
-      height: var(--primer-control-small-size);
-      font-size: var(--primer-text-body-size-small);
+      height: var(--primer-control-small-size, 28px);
+      font-size: var(--primer-text-body-size-small, 12px);
 
       .FormControl--input-trailingAction {
-        width: calc(var(--primer-control-small-size) - var(--base-size-8));
-        height: calc(var(--primer-control-small-size) - var(--base-size-8));
+        width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
       }
     }
 
     &.FormControl--medium {
-      height: var(--primer-control-medium-size);
+      height: var(--primer-control-medium-size, 32px);
 
       .FormControl--input-trailingAction {
-        width: calc(var(--primer-control-medium-size) - var(--base-size-8));
-        height: calc(var(--primer-control-medium-size) - var(--base-size-8));
+        width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
       }
     }
 
     &.FormControl--large {
-      height: var(--primer-control-large-size);
-      padding-inline: var(--primer-control-large-paddingInline-normal);
+      height: var(--primer-control-large-size, 40px);
+      padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
 
       .FormControl--input-trailingAction {
-        width: calc(var(--primer-control-large-size) - var(--base-size-8));
-        height: calc(var(--primer-control-large-size) - var(--base-size-8));
-        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal) - 0.125rem) * -1);
+        width: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal, 12px) - 0.125rem) * -1);
       }
     }
   }
 }
 
 .FormControl-fieldWrap--select {
-  grid-template-columns: minmax(0, auto) var(--base-size-16);
-  padding-inline-end: var(--primer-control-medium-paddingInline-condensed);
+  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
+  padding-inline-end: var(--primer-control-medium-paddingInline-condensed, 8px);
 
   // mask allows for background-color to respect themes
   &::after {
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    pointer-events: none;
     content: '';
-    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
     background-color: var(--color-fg-muted);
-    height: var(--base-size-16);
-    width: var(--base-size-16);
+    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
     mask-size: cover;
-    pointer-events: none;
     grid-column: 2;
     grid-row: 1;
     place-self: center end;
@@ -255,7 +273,7 @@
     grid-column: 1/-1;
     grid-row: 1;
     appearance: none;
-    padding-right: var(--base-size-16);
+    padding-right: var(--base-size-16, 16px);
   }
 }
 
@@ -276,8 +294,8 @@
 .FormControl--checkbox,
 .FormControl--radio {
   position: absolute;
-  width: var(--base-size-16);
-  height: var(--base-size-16);
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
   opacity: 0;
 
   &:checked {
@@ -322,10 +340,10 @@
 }
 
 .FormControl--checkbox-svg {
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
   margin-top: 0.125rem;
   cursor: pointer;
-  width: var(--base-size-16);
-  height: var(--base-size-16);
 
   .FormControl--checkbox-background {
     fill: var(--color-canvas-default);

From 8bcb0f1a3cfeb80e469f5f49cc201fa82f786ccf Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sun, 22 May 2022 15:01:47 +0000
Subject: [PATCH 14/19] add disabled state to actionlist-item

---
 src/actionlist/action-list-item.scss | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 5f4ecb1a83..c8b74a3b8a 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -235,6 +235,27 @@
     }
   }
 
+  // disabled
+  &[aria-disabled='true'] {
+    .ActionList-item-content {
+      .ActionList-item-label,
+      .ActionList-item-description {
+        color: var(--color-primer-fg-disabled);
+      }
+
+      .ActionList-item-visual {
+        fill: var(--color-primer-fg-disabled);
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          cursor: not-allowed;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
   // variants
 
   // danger

From c1fd9e4e382df5bf8fceed22f9cb7de386029f06 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sun, 22 May 2022 15:07:09 +0000
Subject: [PATCH 15/19] adjust trailing action grid

---
 src/forms/FormControl.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
index 9a599ced12..a466d23a4b 100644
--- a/src/forms/FormControl.scss
+++ b/src/forms/FormControl.scss
@@ -161,6 +161,10 @@
     // if leadingVisual and trailingAction are present
     &.FormControl-fieldWrap--input-trailingAction {
       grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
+
+      .FormControl--input-trailingAction {
+          grid-column: 3 / 4;
+      }
     }
   }
 
@@ -203,6 +207,7 @@
       grid-row: 1;
       place-content: center;
       place-self: center end;
+      grid-column: 2 / 3;
 
       &:hover {
         background-color: var(--color-btn-hover-bg);

From 5713e6693b145eef4dbb50297328fe3acb4e49b9 Mon Sep 17 00:00:00 2001
From: Actions Auto Build <actions@github.com>
Date: Sun, 22 May 2022 15:08:33 +0000
Subject: [PATCH 16/19] Stylelint auto-fixes

---
 src/forms/FormControl.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
index a466d23a4b..c8a6cf66ee 100644
--- a/src/forms/FormControl.scss
+++ b/src/forms/FormControl.scss
@@ -163,7 +163,7 @@
       grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
 
       .FormControl--input-trailingAction {
-          grid-column: 3 / 4;
+        grid-column: 3 / 4;
       }
     }
   }

From 7fc9afddde526d67dd240cb480da022b13823239 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Sun, 22 May 2022 15:09:55 +0000
Subject: [PATCH 17/19] remove docs

---
 docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 12a7819af7..fa72f456ed 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -46,8 +46,6 @@
   children:
     - title: Alerts
       url: /components/alerts
-    - title: Autocomplete
-      url: /components/autocomplete
     - title: Avatars
       url: /components/avatars
     - title: Blankslate

From 970dc62ba0fa74c9d138448661e77f71b0d9bcc8 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 26 May 2022 01:26:20 +0000
Subject: [PATCH 18/19] add indeterminate checkbox styles

---
 src/forms/FormControl.scss | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
index c8a6cf66ee..123c7e73db 100644
--- a/src/forms/FormControl.scss
+++ b/src/forms/FormControl.scss
@@ -1,9 +1,5 @@
 // stylelint-disable primer/typography, primer/borders, primer/spacing, primer/box-shadow, max-nesting-depth
 
-:root {
-  accent-color: var(--color-accent-fg);
-}
-
 // group label, field, caption and error message
 .FormGroup {
   display: inline-flex;
@@ -285,6 +281,7 @@
 .FormGroup--checkbox {
   display: inline-grid;
   grid-template-areas: 'field label' '. caption';
+  gap: var(--base-size-8, 8px);
 
   .FormControl-label {
     grid-area: label;
@@ -296,6 +293,7 @@
 }
 
 // checkbox + radio specific styles
+
 .FormControl--checkbox,
 .FormControl--radio {
   position: absolute;
@@ -313,8 +311,6 @@
       .FormControl--checkbox-check {
         fill: var(--color-fg-on-emphasis);
         visibility: visible;
-        opacity: 1;
-        transition: visibility 0 linear 0, opacity 50ms;
 
         @media screen and (prefers-reduced-motion: no-preference) {
           animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
@@ -323,6 +319,20 @@
     }
   }
 
+  &:indeterminate {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-indeterminate {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+      }
+    }
+  }
+
   @keyframes checkmarkIn {
     from {
       clip-path: inset(16px 0 0 0);
@@ -356,11 +366,17 @@
   }
 
   .FormControl--checkbox-check {
-    fill: transparent;
-    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0s linear 200ms;
+    clip-path: inset(16px 0 0 0);
 
     @media screen and (prefers-reduced-motion: no-preference) {
       animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
     }
   }
+
+  .FormControl--checkbox-indeterminate {
+    fill: transparent;
+    visibility: hidden;
+  }
 }

From 81510caf6b9b93a97361792bbd9b1ddb67f8d08d Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 26 May 2022 10:38:15 -0700
Subject: [PATCH 19/19] Create empty-drinks-report.md

---
 .changeset/empty-drinks-report.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/empty-drinks-report.md

diff --git a/.changeset/empty-drinks-report.md b/.changeset/empty-drinks-report.md
new file mode 100644
index 0000000000..a77f1a4993
--- /dev/null
+++ b/.changeset/empty-drinks-report.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+FormControl + Autocomplete component updates