From e9eabff2a0962a4481218227f3f66af5c3de0147 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Fri, 18 Oct 2019 12:34:25 +0200
Subject: [PATCH 01/12] RSP-1129: Tag and TagGroup component

---
 .../components/tags/index.css                 | 27 +++----
 .../components/tags/skin.css                  | 64 +++++-----------
 .../spectrum-css-temp/vars/spectrum-dark.css  |  4 +-
 .../vars/spectrum-darkest.css                 |  4 +-
 .../spectrum-css-temp/vars/spectrum-light.css |  6 +-
 .../vars/spectrum-lightest.css                |  4 +-
 .../vars/spectrum-middark.css                 |  4 +-
 .../vars/spectrum-midlight.css                |  4 +-
 packages/@react-aria/tag/index.ts             |  1 +
 packages/@react-aria/tag/intl/cs-CZ.json      |  3 +
 packages/@react-aria/tag/intl/da-DK.json      |  3 +
 packages/@react-aria/tag/intl/de-DE.json      |  3 +
 packages/@react-aria/tag/intl/en-US.json      |  3 +
 packages/@react-aria/tag/intl/es-ES.json      |  3 +
 packages/@react-aria/tag/intl/fi-FI.json      |  3 +
 packages/@react-aria/tag/intl/fr-FR.json      |  3 +
 packages/@react-aria/tag/intl/hu-HU.json      |  3 +
 packages/@react-aria/tag/intl/it-IT.json      |  3 +
 packages/@react-aria/tag/intl/ja-JP.json      |  3 +
 packages/@react-aria/tag/intl/ko-KR.json      |  3 +
 packages/@react-aria/tag/intl/nb-NO.json      |  3 +
 packages/@react-aria/tag/intl/nl-NL.json      |  3 +
 packages/@react-aria/tag/intl/pl-PL.json      |  3 +
 packages/@react-aria/tag/intl/pt-BR.json      |  3 +
 packages/@react-aria/tag/intl/ru-RU.json      |  3 +
 packages/@react-aria/tag/intl/sv-SE.json      |  3 +
 packages/@react-aria/tag/intl/tr-TR.json      |  3 +
 packages/@react-aria/tag/intl/uk-UA.json      |  3 +
 packages/@react-aria/tag/intl/zh-CN.json      |  3 +
 packages/@react-aria/tag/intl/zh-TW.json      |  3 +
 packages/@react-aria/tag/package.json         | 30 ++++++++
 packages/@react-aria/tag/src/index.ts         |  2 +
 packages/@react-aria/tag/src/useTag.ts        | 46 ++++++++++++
 packages/@react-aria/tag/src/useTagGroup.ts   | 25 +++++++
 packages/@react-aria/tag/test/useTag.test.js  | 19 +++++
 .../button/src/ClearButton.tsx                |  7 +-
 packages/@react-spectrum/tag/index.ts         |  1 +
 packages/@react-spectrum/tag/package.json     | 50 +++++++++++++
 packages/@react-spectrum/tag/src/Tag.tsx      | 74 +++++++++++++++++++
 packages/@react-spectrum/tag/src/TagGroup.tsx | 72 ++++++++++++++++++
 packages/@react-spectrum/tag/src/index.ts     |  2 +
 .../tag/stories/Tag.stories.tsx               | 67 +++++++++++++++++
 .../tag/stories/TagGroup.stories.tsx          | 31 ++++++++
 packages/@react-spectrum/tag/test/Tag.test.js | 37 ++++++++++
 packages/@react-types/shared/src/index.d.ts   |  1 +
 .../@react-types/shared/src/removable.d.ts    |  6 ++
 packages/@react-types/tag/package.json        | 16 ++++
 packages/@react-types/tag/src/index.d.ts      | 21 ++++++
 48 files changed, 618 insertions(+), 70 deletions(-)
 create mode 100644 packages/@react-aria/tag/index.ts
 create mode 100644 packages/@react-aria/tag/intl/cs-CZ.json
 create mode 100644 packages/@react-aria/tag/intl/da-DK.json
 create mode 100644 packages/@react-aria/tag/intl/de-DE.json
 create mode 100644 packages/@react-aria/tag/intl/en-US.json
 create mode 100644 packages/@react-aria/tag/intl/es-ES.json
 create mode 100644 packages/@react-aria/tag/intl/fi-FI.json
 create mode 100644 packages/@react-aria/tag/intl/fr-FR.json
 create mode 100644 packages/@react-aria/tag/intl/hu-HU.json
 create mode 100644 packages/@react-aria/tag/intl/it-IT.json
 create mode 100644 packages/@react-aria/tag/intl/ja-JP.json
 create mode 100644 packages/@react-aria/tag/intl/ko-KR.json
 create mode 100644 packages/@react-aria/tag/intl/nb-NO.json
 create mode 100644 packages/@react-aria/tag/intl/nl-NL.json
 create mode 100644 packages/@react-aria/tag/intl/pl-PL.json
 create mode 100644 packages/@react-aria/tag/intl/pt-BR.json
 create mode 100644 packages/@react-aria/tag/intl/ru-RU.json
 create mode 100644 packages/@react-aria/tag/intl/sv-SE.json
 create mode 100644 packages/@react-aria/tag/intl/tr-TR.json
 create mode 100644 packages/@react-aria/tag/intl/uk-UA.json
 create mode 100644 packages/@react-aria/tag/intl/zh-CN.json
 create mode 100644 packages/@react-aria/tag/intl/zh-TW.json
 create mode 100644 packages/@react-aria/tag/package.json
 create mode 100644 packages/@react-aria/tag/src/index.ts
 create mode 100644 packages/@react-aria/tag/src/useTag.ts
 create mode 100644 packages/@react-aria/tag/src/useTagGroup.ts
 create mode 100644 packages/@react-aria/tag/test/useTag.test.js
 create mode 100644 packages/@react-spectrum/tag/index.ts
 create mode 100644 packages/@react-spectrum/tag/package.json
 create mode 100644 packages/@react-spectrum/tag/src/Tag.tsx
 create mode 100644 packages/@react-spectrum/tag/src/TagGroup.tsx
 create mode 100644 packages/@react-spectrum/tag/src/index.ts
 create mode 100644 packages/@react-spectrum/tag/stories/Tag.stories.tsx
 create mode 100644 packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
 create mode 100644 packages/@react-spectrum/tag/test/Tag.test.js
 create mode 100644 packages/@react-types/shared/src/removable.d.ts
 create mode 100644 packages/@react-types/tag/package.json
 create mode 100644 packages/@react-types/tag/src/index.d.ts

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/index.css b/packages/@adobe/spectrum-css-temp/components/tags/index.css
index 59d73cafec3..d2784727cf0 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/index.css
@@ -41,8 +41,8 @@ governing permissions and limitations under the License.
 
   margin: calc(var(--spectrum-taggroup-tag-gap-y) / 2) calc(var(--spectrum-taggroup-tag-gap-x) / 2);
   padding: 0 calc(var(--spectrum-tag-padding-x) - var(--spectrum-tag-border-size));
-  height: var(--spectrum-tag-height);
-  max-width: 100%;
+  block-size: var(--spectrum-tag-height);
+  max-inline-size: 100%;
 
   border-width: var(--spectrum-tag-border-size);
   border-style: solid;
@@ -59,25 +59,22 @@ governing permissions and limitations under the License.
     pointer-events: none;
   }
 
-  > .spectrum-Icon,
-  > .spectrum-Avatar {
-    margin-right: var(--spectrum-tag-icon-padding-x);
-
-    /* Add padding for "avatar" variant */
-    margin-left: calc(var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-x));
-
-    ~ .spectrum-Tags-itemLabel {
-      margin-right: calc(var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-x));
-    }
+  > .spectrum-Tags-itemIcon {
+    margin-inline-end: var(--spectrum-tag-icon-padding-x);
+    margin-inline-start: calc(-1 * var(--spectrum-tag-deletable-border-size-key-focus));
   }
 
-  .spectrum-ClearButton {
-    margin-right: calc(-1 * var(--spectrum-tag-padding-x));
+  > .spectrum-Tags-item-ClearButton {
+    margin-inline-end: calc(-0.5 * var(--spectrum-tag-padding-x));
+    margin-inline-start: var(--spectrum-tag-deletable-border-size-key-focus);
+    block-size: var(--spectrum-alias-font-size-default);
+    inline-size: var(--spectrum-alias-font-size-default);
+    border-radius: var(--spectrum-alias-border-radius-small);
   }
 }
 
 .spectrum-Tags-itemLabel {
-  height: 100%;
+  block-size: 100%;
   line-height: calc(var(--spectrum-tag-height) - calc(var(--spectrum-tag-border-size) * 2));
   flex: 1 1 auto;
   font-size: var(--spectrum-tag-text-size);
diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index 43920b66ade..b77a9f5895b 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -15,18 +15,10 @@ governing permissions and limitations under the License.
   background-color: var(--spectrum-tag-background-color);
   border-color: var(--spectrum-tag-border-color);
 
-  .spectrum-ClearButton {
-    color: var(--spectrum-tag-deletable-icon-color);
-  }
-
   &:hover {
     background-color: var(--spectrum-tag-background-color-hover);
     color: var(--spectrum-tag-text-color-hover);
     border-color: var(--spectrum-tag-border-color-hover);
-
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-deletable-icon-color-hover);
-    }
   }
 
   &:focus-ring {
@@ -34,38 +26,34 @@ governing permissions and limitations under the License.
     color: var(--spectrum-tag-text-color-key-focus);
     border-color: var(--spectrum-tag-border-color-key-focus);
     box-shadow: 0 0 0 1px var(--spectrum-tag-border-color-key-focus);
-
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-deletable-icon-color-key-focus);
-    }
   }
 
   &.is-invalid {
     color: var(--spectrum-tag-text-color-error);
     border-color: var(--spectrum-tag-border-color-error);
 
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-icon-color-error);
-    }
-
     &:hover {
       color: var(--spectrum-tag-text-color-error-hover);
       border-color: var(--spectrum-tag-border-color-error-hover);
-
-      .spectrum-ClearButton {
-        color: var(--spectrum-tag-icon-color-error-hover);
-      }
     }
 
     &:focus-ring {
       color: var(--spectrum-tag-text-color-error-key-focus);
       border-color: var(--spectrum-tag-border-color-key-focus);
       box-shadow: 0 0 0 1px var(--spectrum-tag-border-color-key-focus);
+    }
 
-      .spectrum-ClearButton {
-        color: var(--spectrum-tag-icon-color-error-key-focus);
+    .spectrum-Tags-itemLabel {
+      color: var(--spectrum-tag-text-color-error);
+    }
+    .spectrum-Tags-itemIcon,
+    .spectrum-Tags-item-ClearButton {
+      color: var(--spectrum-tag-border-color-error);
+      &.clearButton-focus {
+         color: white;
       }
     }
+
   }
 
   &.is-disabled {
@@ -83,55 +71,39 @@ governing permissions and limitations under the License.
 .spectrum-Tags-item--deletable {
   &:hover {
     color: var(--spectrum-tag-deletable-text-color-hover);
-
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-deletable-icon-color-hover);
-    }
   }
 
   &:active {
     color: var(--spectrum-tag-deletable-text-color-down);
-
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-deletable-icon-color-down);
-    }
   }
 
   &.is-invalid {
     &:hover {
       border-color: var(--spectrum-tag-deletable-border-color-error-hover);
       color: var(--spectrum-tag-deletable-text-color-error-hover);
-
-      .spectrum-ClearButton {
-        color: var(--spectrum-tag-deletable-icon-color-error-hover);
-      }
     }
 
     &:active {
       border-color: var(--spectrum-tag-deletable-border-color-error-down);
       color: var(--spectrum-tag-deletable-text-color-error-down);
-
-      .spectrum-ClearButton {
-        color: var(--spectrum-tag-deletable-icon-color-error-down);
-      }
     }
   }
 
   &:focus-ring {
     color: var(--spectrum-tag-deletable-text-color-key-focus);
 
-    .spectrum-ClearButton {
-      color: var(--spectrum-tag-deletable-icon-color-key-focus);
-    }
-
     &.is-invalid {
       color: var(--spectrum-tag-deletable-text-color-error-key-focus);
     }
   }
-}
 
-.spectrum-Tags-item.is-disabled .spectrum-ClearButton {
-  .spectrum-Icon {
-    color: var(--spectrum-tag-icon-color-disabled);
+  > .spectrum-Tags-item-ClearButton {
+    &.clearButton-focus {
+      background-color: var(--spectrum-tag-deletable-background-color-focus);
+      color: white;
+    }
+    &:hover {
+      background-color: var(--spectrum-global-color-gray-300)
+    }
   }
 }
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
index fbc12b79135..f6bbab63f2f 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(110, 110, 110);
   --spectrum-tag-border-color-error: rgb(236, 91, 98);
   --spectrum-tag-icon-color-error: rgb(236, 91, 98);
-  --spectrum-tag-text-color-error: rgb(185, 185, 185);
+  --spectrum-tag-text-color-error: rgb(247, 109, 116);
   --spectrum-tag-border-color-error-hover: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error-hover: rgb(247, 109, 116);
   --spectrum-tag-text-color-error-hover: rgb(255, 255, 255);
@@ -2330,6 +2330,8 @@
   --spectrum-tag-deletable-text-color-down: rgb(185, 185, 185);
   --spectrum-tag-deletable-icon-color-down: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color-key-focus: rgb(47, 47, 47);
+  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-border-color-key-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-text-color-key-focus: rgb(185, 185, 185);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
index e0dcf737c40..957f49847a6 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(92, 92, 92);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
-  --spectrum-tag-text-color-error: rgb(162, 162, 162);
+  --spectrum-tag-text-color-error: rgb(236, 91, 98);
   --spectrum-tag-border-color-error-hover: rgb(236, 91, 98);
   --spectrum-tag-icon-color-error-hover: rgb(236, 91, 98);
   --spectrum-tag-text-color-error-hover: rgb(239, 239, 239);
@@ -2330,6 +2330,8 @@
   --spectrum-tag-deletable-text-color-down: rgb(162, 162, 162);
   --spectrum-tag-deletable-icon-color-down: rgb(239, 239, 239);
   --spectrum-tag-deletable-background-color-key-focus: rgb(26, 26, 26);
+  --spectrum-tag-deletable-color-focus: rgb(239, 239, 239);
+  --spectrum-tag-deletable-background-color-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-border-color-key-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-text-color-key-focus: rgb(162, 162, 162);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(239, 239, 239);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
index b4fd874f9d2..f2a82183323 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(179, 179, 179);
   --spectrum-tag-border-color-error: rgb(215, 55, 63);
   --spectrum-tag-icon-color-error: rgb(215, 55, 63);
-  --spectrum-tag-text-color-error: rgb(110, 110, 110);
+  --spectrum-tag-text-color-error: rgb(201, 37, 45);
   --spectrum-tag-border-color-error-hover: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error-hover: rgb(201, 37, 45);
   --spectrum-tag-text-color-error-hover: rgb(44, 44, 44);
@@ -2323,7 +2323,7 @@
   --spectrum-tag-deletable-icon-color: rgb(142, 142, 142);
   --spectrum-tag-deletable-background-color-hover: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-hover: rgb(44, 44, 44);
-  --spectrum-tag-deletable-text-color-hover: rgb(110, 110, 110);
+  --spectrum-tag-deletable-text-color-hover: rgb(44, 44, 44);
   --spectrum-tag-deletable-icon-color-hover: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-down: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-down: rgb(44, 44, 44);
@@ -2331,6 +2331,8 @@
   --spectrum-tag-deletable-icon-color-down: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-key-focus: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-text-color-key-focus: rgb(110, 110, 110);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-disabled: rgb(234, 234, 234);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
index a6ef6bdd50b..54d50dd2296 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(188, 188, 188);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
-  --spectrum-tag-text-color-error: rgb(116, 116, 116);
+  --spectrum-tag-text-color-error: rgb(215, 55, 63);
   --spectrum-tag-border-color-error-hover: rgb(215, 55, 63);
   --spectrum-tag-icon-color-error-hover: rgb(215, 55, 63);
   --spectrum-tag-text-color-error-hover: rgb(50, 50, 50);
@@ -2330,6 +2330,8 @@
   --spectrum-tag-deletable-text-color-down: rgb(116, 116, 116);
   --spectrum-tag-deletable-icon-color-down: rgb(50, 50, 50);
   --spectrum-tag-deletable-background-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-border-color-key-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-text-color-key-focus: rgb(116, 116, 116);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(50, 50, 50);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
index 2dd83ca84ca..1f7d82f7704 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(118, 118, 118);
   --spectrum-tag-border-color-error: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error: rgb(247, 109, 116);
-  --spectrum-tag-text-color-error: rgb(186, 186, 186);
+  --spectrum-tag-text-color-error: rgb(255, 123, 130);
   --spectrum-tag-border-color-error-hover: rgb(255, 123, 130);
   --spectrum-tag-icon-color-error-hover: rgb(255, 123, 130);
   --spectrum-tag-text-color-error-hover: rgb(255, 255, 255);
@@ -2330,6 +2330,8 @@
   --spectrum-tag-deletable-text-color-down: rgb(186, 186, 186);
   --spectrum-tag-deletable-icon-color-down: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color-key-focus: rgb(71, 71, 71);
+  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-border-color-key-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-text-color-key-focus: rgb(186, 186, 186);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
index 129a29c7ad4..0ad798f5ec6 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(160, 160, 160);
   --spectrum-tag-border-color-error: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error: rgb(201, 37, 45);
-  --spectrum-tag-text-color-error: rgb(97, 97, 97);
+  --spectrum-tag-text-color-error: rgb(187, 18, 26);
   --spectrum-tag-border-color-error-hover: rgb(187, 18, 26);
   --spectrum-tag-icon-color-error-hover: rgb(187, 18, 26);
   --spectrum-tag-text-color-error-hover: rgb(25, 25, 25);
@@ -2330,6 +2330,8 @@
   --spectrum-tag-deletable-text-color-down: rgb(97, 97, 97);
   --spectrum-tag-deletable-icon-color-down: rgb(25, 25, 25);
   --spectrum-tag-deletable-background-color-key-focus: rgb(228, 228, 228);
+  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-border-color-key-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-text-color-key-focus: rgb(97, 97, 97);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(25, 25, 25);
diff --git a/packages/@react-aria/tag/index.ts b/packages/@react-aria/tag/index.ts
new file mode 100644
index 00000000000..8420b1093fd
--- /dev/null
+++ b/packages/@react-aria/tag/index.ts
@@ -0,0 +1 @@
+export * from './src';
diff --git a/packages/@react-aria/tag/intl/cs-CZ.json b/packages/@react-aria/tag/intl/cs-CZ.json
new file mode 100644
index 00000000000..2aa8bd22e0d
--- /dev/null
+++ b/packages/@react-aria/tag/intl/cs-CZ.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Odebrat"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/da-DK.json b/packages/@react-aria/tag/intl/da-DK.json
new file mode 100644
index 00000000000..8e7b4c569fe
--- /dev/null
+++ b/packages/@react-aria/tag/intl/da-DK.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Fjern"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/de-DE.json b/packages/@react-aria/tag/intl/de-DE.json
new file mode 100644
index 00000000000..adb1d2ed5d6
--- /dev/null
+++ b/packages/@react-aria/tag/intl/de-DE.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Entfernen"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/en-US.json b/packages/@react-aria/tag/intl/en-US.json
new file mode 100644
index 00000000000..67ff0e1312a
--- /dev/null
+++ b/packages/@react-aria/tag/intl/en-US.json
@@ -0,0 +1,3 @@
+{
+  "remove": "Remove"
+}
diff --git a/packages/@react-aria/tag/intl/es-ES.json b/packages/@react-aria/tag/intl/es-ES.json
new file mode 100644
index 00000000000..7ec4fc35115
--- /dev/null
+++ b/packages/@react-aria/tag/intl/es-ES.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Quitar"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/fi-FI.json b/packages/@react-aria/tag/intl/fi-FI.json
new file mode 100644
index 00000000000..7373cc76a68
--- /dev/null
+++ b/packages/@react-aria/tag/intl/fi-FI.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Poista"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/fr-FR.json b/packages/@react-aria/tag/intl/fr-FR.json
new file mode 100644
index 00000000000..f8e24efa4b0
--- /dev/null
+++ b/packages/@react-aria/tag/intl/fr-FR.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Supprimer"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/hu-HU.json b/packages/@react-aria/tag/intl/hu-HU.json
new file mode 100644
index 00000000000..0ecb8992cca
--- /dev/null
+++ b/packages/@react-aria/tag/intl/hu-HU.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Eltávolítás"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/it-IT.json b/packages/@react-aria/tag/intl/it-IT.json
new file mode 100644
index 00000000000..a3a21047fe9
--- /dev/null
+++ b/packages/@react-aria/tag/intl/it-IT.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Rimuovi"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/ja-JP.json b/packages/@react-aria/tag/intl/ja-JP.json
new file mode 100644
index 00000000000..54893071fe0
--- /dev/null
+++ b/packages/@react-aria/tag/intl/ja-JP.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "削除"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/ko-KR.json b/packages/@react-aria/tag/intl/ko-KR.json
new file mode 100644
index 00000000000..1b983b3a827
--- /dev/null
+++ b/packages/@react-aria/tag/intl/ko-KR.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "제거"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/nb-NO.json b/packages/@react-aria/tag/intl/nb-NO.json
new file mode 100644
index 00000000000..8e7b4c569fe
--- /dev/null
+++ b/packages/@react-aria/tag/intl/nb-NO.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Fjern"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/nl-NL.json b/packages/@react-aria/tag/intl/nl-NL.json
new file mode 100644
index 00000000000..f53d4522b0a
--- /dev/null
+++ b/packages/@react-aria/tag/intl/nl-NL.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Verwijderen"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/pl-PL.json b/packages/@react-aria/tag/intl/pl-PL.json
new file mode 100644
index 00000000000..caab1655e4c
--- /dev/null
+++ b/packages/@react-aria/tag/intl/pl-PL.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Usuń"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/pt-BR.json b/packages/@react-aria/tag/intl/pt-BR.json
new file mode 100644
index 00000000000..7fcaa36880f
--- /dev/null
+++ b/packages/@react-aria/tag/intl/pt-BR.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Remover"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/ru-RU.json b/packages/@react-aria/tag/intl/ru-RU.json
new file mode 100644
index 00000000000..e638e251b04
--- /dev/null
+++ b/packages/@react-aria/tag/intl/ru-RU.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Удалить"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/sv-SE.json b/packages/@react-aria/tag/intl/sv-SE.json
new file mode 100644
index 00000000000..b840bda6e5c
--- /dev/null
+++ b/packages/@react-aria/tag/intl/sv-SE.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Ta bort"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/tr-TR.json b/packages/@react-aria/tag/intl/tr-TR.json
new file mode 100644
index 00000000000..703759e92c6
--- /dev/null
+++ b/packages/@react-aria/tag/intl/tr-TR.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Kaldır"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/uk-UA.json b/packages/@react-aria/tag/intl/uk-UA.json
new file mode 100644
index 00000000000..683c9e259ab
--- /dev/null
+++ b/packages/@react-aria/tag/intl/uk-UA.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "Видалити"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/zh-CN.json b/packages/@react-aria/tag/intl/zh-CN.json
new file mode 100644
index 00000000000..061e5350ab0
--- /dev/null
+++ b/packages/@react-aria/tag/intl/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "删除"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/intl/zh-TW.json b/packages/@react-aria/tag/intl/zh-TW.json
new file mode 100644
index 00000000000..a2417e60ddd
--- /dev/null
+++ b/packages/@react-aria/tag/intl/zh-TW.json
@@ -0,0 +1,3 @@
+{
+  "Remove": "移除"
+}
\ No newline at end of file
diff --git a/packages/@react-aria/tag/package.json b/packages/@react-aria/tag/package.json
new file mode 100644
index 00000000000..939d6a08c89
--- /dev/null
+++ b/packages/@react-aria/tag/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@react-aria/tag",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/i18n": "^3.0.0-alpha.1",
+    "@react-aria/utils": "^3.0.0-alpha.1",
+    "@react-types/shared": "^3.0.0-alpha.1",
+    "@react-types/tag": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/@react-aria/tag/src/index.ts b/packages/@react-aria/tag/src/index.ts
new file mode 100644
index 00000000000..e7f45f3726a
--- /dev/null
+++ b/packages/@react-aria/tag/src/index.ts
@@ -0,0 +1,2 @@
+export * from './useTag';
+export * from './useTagGroup';
diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
new file mode 100644
index 00000000000..9d51981686c
--- /dev/null
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -0,0 +1,46 @@
+import {AriaTagProps} from '@react-types/tag';
+import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
+import intlMessages from '../intl/*.json';
+import {mergeProps} from '@react-aria/utils';
+import {useMessageFormatter} from '@react-aria/i18n';
+
+interface TagAria {
+  tagProps: HTMLAttributes<HTMLElement>,
+  clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
+}
+
+export function useTag(props: AriaTagProps): TagAria {
+  const {
+    isRemovable,
+    isDisabled,
+    onRemove,
+    children,
+    selected,
+    role
+  } = props;
+  const formatMessage = useMessageFormatter(intlMessages);
+  const removeString = formatMessage('remove');
+
+  function onKeyDown(e: KeyboardEvent<HTMLElement>) {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      onRemove(children, e);
+      e.preventDefault();
+    }
+  }
+  const pressProps = {
+    onPress: e => onRemove(children, e)
+  };
+  return {
+    tagProps: {
+      'aria-selected': role === 'gridcell' ? undefined : !isDisabled && selected,
+      onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
+      role,
+      tabIndex: isDisabled ? -1 : 0
+    },
+    clearButtonProps: mergeProps(pressProps, {
+      'aria-label': children ? `${removeString}: ${children}` : removeString,
+      title: removeString,
+      isDisabled
+    })
+  };
+}
diff --git a/packages/@react-aria/tag/src/useTagGroup.ts b/packages/@react-aria/tag/src/useTagGroup.ts
new file mode 100644
index 00000000000..d5470751d54
--- /dev/null
+++ b/packages/@react-aria/tag/src/useTagGroup.ts
@@ -0,0 +1,25 @@
+import {DOMProps, MultipleSelectionBase} from '@react-types/shared';
+
+interface AriaTagGroupProps extends MultipleSelectionBase {
+  isDisabled?: boolean,
+  isReadOnly?: boolean, // removes close button
+  validationState?: 'valid' | 'invalid'
+}
+
+interface TagGroupAria {
+  tagGroupProps: DOMProps
+}
+
+export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
+  const {isDisabled, validationState} = props;
+  return {
+    tagGroupProps: {
+      role: 'grid',
+      'aria-atomic': false,
+      'aria-relevant': 'additions',
+      // 'aria-live': focused ? 'polite' : 'off',
+      'aria-disabled': isDisabled,
+      'aria-invalid': validationState === 'invalid'
+    }
+  };
+}
diff --git a/packages/@react-aria/tag/test/useTag.test.js b/packages/@react-aria/tag/test/useTag.test.js
new file mode 100644
index 00000000000..585d914eba7
--- /dev/null
+++ b/packages/@react-aria/tag/test/useTag.test.js
@@ -0,0 +1,19 @@
+import {renderHook} from 'react-hooks-testing-library';
+import {useTag} from '../';
+
+describe('useTag tests', () => {
+  it('handles defaults', () => {
+    let props = {};
+    let {result} = renderHook(() => useTag(props));
+    expect(result.current.tagProps.onKeyDown).toBeDefined();
+    expect(result.current.clearButtonProps.onPress).toBeDefined();
+  });
+
+  it('handles disabled flag', () => {
+    let props = {isDisabled: true};
+    let {result} = renderHook(() => useTag(props));
+    expect(result.current.tagProps.onKeyDown).toBe(null);
+    expect(result.current.tagProps.tabIndex).toBe(-1);
+    expect(result.current.clearButtonProps.isDisabled).toBe(true);
+  });
+});
diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx
index f84664061ee..7aed638bbba 100644
--- a/packages/@react-spectrum/button/src/ClearButton.tsx
+++ b/packages/@react-spectrum/button/src/ClearButton.tsx
@@ -6,18 +6,21 @@ import React, {RefObject, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {useButton} from '@react-aria/button';
 
-interface ClearButtonProps extends ButtonBase {}
+interface ClearButtonProps extends ButtonBase {
+  focusClassName?: string,
+}
 
 export const ClearButton = React.forwardRef((props: ClearButtonProps, ref: RefObject<HTMLButtonElement>) => {
   let {
     className,
+    focusClassName,
     ...otherProps
   } = props;
   ref = ref || useRef();
   let {buttonProps, isPressed} = useButton({...props, ref});
 
   return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusClassName)}>
       <button
         {...filterDOMProps(otherProps, {icon: false})}
         {...buttonProps}
diff --git a/packages/@react-spectrum/tag/index.ts b/packages/@react-spectrum/tag/index.ts
new file mode 100644
index 00000000000..8420b1093fd
--- /dev/null
+++ b/packages/@react-spectrum/tag/index.ts
@@ -0,0 +1 @@
+export * from './src';
diff --git a/packages/@react-spectrum/tag/package.json b/packages/@react-spectrum/tag/package.json
new file mode 100644
index 00000000000..3e7461f0b79
--- /dev/null
+++ b/packages/@react-spectrum/tag/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@react-spectrum/tag",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/focus": "^3.0.0-alpha.1",
+    "@react-aria/tag": "^3.0.0-alpha.1",
+    "@react-spectrum/button": "^3.0.0-alpha.1",
+    "@react-spectrum/provider": "^3.0.0-alpha.1",
+    "@react-types/shared": "^3.0.0-alpha.1",
+    "@react-types/tag": "^3.0.0-alpha.1",
+    "@react-spectrum/utils": "^3.0.0-alpha.1",
+    "@spectrum-icons/workflow": "^3.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
new file mode 100644
index 00000000000..c3061c9cf02
--- /dev/null
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -0,0 +1,74 @@
+import Alert from '@spectrum-icons/workflow/Alert';
+import {classNames, filterDOMProps} from '@react-spectrum/utils';
+import {ClearButton} from '@react-spectrum/button';
+import {FocusRing} from '@react-aria/focus';
+import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
+import {TagProps} from '@react-types/tag';
+import {useTag} from '@react-aria/tag';
+import {useTagGroupProvider} from './TagGroup';
+
+export const Tag = ((props: TagProps) => {
+  const {
+    className,
+    isDisabled,
+    isRemovable,
+    validationState,
+    ...otherProps
+  } = props;
+  const {
+    isDisabled: isGroupDisabled,
+    isRemovable: isGroupRemovable,
+    validationState: groupValidationState,
+    onRemove,
+    role
+  } =  useTagGroupProvider();
+
+  let removable = isRemovable || isGroupRemovable;
+  let disabled = isDisabled || isGroupDisabled;
+  let isInvalid = (validationState || groupValidationState) === 'invalid';
+  let {clearButtonProps, tagProps} = useTag({
+    ...props,
+    isRemovable: removable,
+    isDisabled: disabled,
+    onRemove: props.onRemove || onRemove,
+    role
+  });
+  let icon = props.icon || (isInvalid && <Alert />);
+
+  // TODO: add avatar component
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
+      <div
+        {...filterDOMProps(otherProps)}
+        {...tagProps}
+        className={classNames(
+          styles,
+          'spectrum-Tags-item',
+          {
+            'is-disabled': disabled,
+            'spectrum-Tags-item--deletable': removable,
+            'is-invalid': isInvalid
+          },
+          className
+        )}>
+        {icon && React.cloneElement(icon, {size: 'S', className: classNames(styles, 'spectrum-Tags-itemIcon')})}
+        <span
+          role={tagProps.role}
+          className={classNames(
+            styles,
+            'spectrum-Tags-itemLabel'
+          )}>
+          {props.children}
+        </span>
+        {removable &&
+          <ClearButton
+            tabIndex={tagProps.tabIndex}
+            focusClassName={classNames(styles, 'clearButton-focus')}
+            className={classNames(styles, 'spectrum-Tags-item-ClearButton')}
+            {...clearButtonProps} />
+        }
+      </div>
+    </FocusRing>
+  );
+});
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
new file mode 100644
index 00000000000..d00d67263c6
--- /dev/null
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -0,0 +1,72 @@
+import {classNames, filterDOMProps} from '@react-spectrum/utils';
+import React, {useContext} from 'react';
+import {Removable} from '@react-types/shared';
+import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
+import {TagGroupProps} from '@react-types/tag';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useTagGroup} from '@react-aria/tag';
+
+interface TagGroupContext extends Removable<any, void> {
+  isDisabled?: boolean,
+  isRequired?: boolean,
+  isReadOnly?: boolean,
+  validationState?: 'valid' | 'invalid',
+  role?: 'gridcell'
+}
+
+const TagGroupContext = React.createContext<TagGroupContext | {}>({});
+
+export function useTagGroupProvider(): TagGroupContext {
+  return useContext(TagGroupContext);
+}
+
+export const TagGroup = ((props: TagGroupProps) => {
+  let completeProps = useProviderProps(props);
+
+  let {
+    isReadOnly,
+    isDisabled,
+    isRemovable,
+    onRemove,
+    validationState,
+    children,
+    className,
+    ...otherProps
+  } = completeProps;
+
+  const {tagGroupProps} = useTagGroup(completeProps);
+
+  function removeAll(tags) {
+    // TODO: implement when selection state hook is available
+    onRemove([tags]);
+  }
+
+  return (
+    <div
+      {...filterDOMProps(otherProps)}
+      className={
+        classNames(
+          styles,
+          'spectrum-Tags',
+          {
+            'is-disabled': isDisabled
+          },
+          className
+        )
+      }
+      {...tagGroupProps}>
+      <TagGroupContext.Provider
+        value={{
+          isRemovable: !isReadOnly && isRemovable,
+          isDisabled,
+          onRemove: removeAll,
+          validationState,
+          role: 'gridcell'
+        }}>
+        <span role="row">
+          {children}
+        </span>
+      </TagGroupContext.Provider>
+    </div>
+  );
+});
diff --git a/packages/@react-spectrum/tag/src/index.ts b/packages/@react-spectrum/tag/src/index.ts
new file mode 100644
index 00000000000..e50e63c2baa
--- /dev/null
+++ b/packages/@react-spectrum/tag/src/index.ts
@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './TagGroup';
diff --git a/packages/@react-spectrum/tag/stories/Tag.stories.tsx b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
new file mode 100644
index 00000000000..6604aabb8d8
--- /dev/null
+++ b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
@@ -0,0 +1,67 @@
+import {action} from '@storybook/addon-actions';
+import Camera from '@spectrum-icons/workflow/Camera';
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {Tag} from '../src';
+
+storiesOf('Tag', module)
+  .add(
+    'default',
+    () => render({}, 'Cool tag')
+  )
+  .add(
+    'disabled',
+    () => render({isDisabled: true}, 'Cool tag')
+  )
+  .add(
+    'icon',
+    () => render({
+      icon: <Camera />
+    }, 'Cool tag')
+  )
+  .add(
+    'removable',
+    () => render({
+      onRemove: action('onRemove'),
+      isRemovable: true
+    }, 'Cool tag')
+  )
+  .add(
+    'invalid',
+    () => render({
+      validationState: 'invalid'
+    }, 'Cool tag')
+  )
+  .add(
+    'invalid, removable',
+    () => render({
+      validationState: 'invalid',
+      onRemove: action('onRemove'),
+      isRemovable: true
+    }, 'Cool tag')
+  )
+  .add(
+    'icon, removable',
+    () => render({
+      icon: <Camera />,
+      onRemove: action('onRemove'),
+      isRemovable: true
+    }, 'Cool tag')
+  )
+  .add(
+  'disabled icon, removable',
+  () => render({
+    isDisabled: true,
+    icon: <Camera />,
+    onRemove: action('onRemove'),
+    isRemovable: true
+  }, 'Cool tag')
+);
+
+function render(props, childText: string) {
+  return (
+    <Tag {...props}>
+      {childText}
+    </Tag>
+  );
+}
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
new file mode 100644
index 00000000000..0a2154ce0ac
--- /dev/null
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -0,0 +1,31 @@
+import {action} from '@storybook/addon-actions';
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {Tag, TagGroup} from '../src';
+
+storiesOf('TagGroup', module)
+  .add(
+    'default',
+    () => render({})
+  ).add(
+    'with remove',
+    () => render({
+      isRemovable: true,
+      onRemove: action('onRemove')
+    })
+  ).add(
+    'is Disabled',
+    () => render({
+      isDisabled: true
+    })
+  );
+
+function render(props: any = {}) {
+  return (
+    <TagGroup {...props}>
+      <Tag>Cool Tag 1</Tag>
+      <Tag>Cool Tag 2</Tag>
+      <Tag>Cool Tag 3</Tag>
+    </TagGroup>
+  );
+}
diff --git a/packages/@react-spectrum/tag/test/Tag.test.js b/packages/@react-spectrum/tag/test/Tag.test.js
new file mode 100644
index 00000000000..db0312e7bd0
--- /dev/null
+++ b/packages/@react-spectrum/tag/test/Tag.test.js
@@ -0,0 +1,37 @@
+import {cleanup, render} from '@testing-library/react';
+import {fireEvent} from '@testing-library/react';
+import React from 'react';
+import {Tag} from '../';
+import {Tag as V2Tag} from '@react/react-spectrum/TagList';
+
+
+describe('Tag', function () {
+  let onRemoveSpy = jest.fn();
+  afterEach(() => {
+    cleanup();
+    onRemoveSpy.mockClear();
+  });
+
+  it.each`
+   Component        | props
+    ${Tag}          | ${{}}
+    ${V2Tag}        | ${{}}
+  `('v2/3 parity allows custom props to be passed through to the tag', function ({Component, props}) {
+    let {container} = render(<Component {...props} data-foo="bar" aria-hidden name="s">Cool Tag</Component>);
+
+    let tag = container.firstElementChild;
+    expect(tag).toHaveAttribute('data-foo', 'bar');
+    expect(tag).toHaveAttribute('aria-hidden', 'true');
+    expect(tag).toHaveAttribute('name', 's');
+  });
+
+  it('handles key down', function () {
+    const props = {isRemovable: true, onRemove: onRemoveSpy};
+    let {getByText} = render(<Tag {...props}>Cool Tag</Tag>);
+
+    let tag = getByText('Cool Tag');
+
+    fireEvent.keyDown(tag, {key: 'Delete'});
+    expect(onRemoveSpy).toHaveBeenCalledWith('Cool Tag', expect.anything());
+  });
+});
diff --git a/packages/@react-types/shared/src/index.d.ts b/packages/@react-types/shared/src/index.d.ts
index 0a956500c71..0c2fa828790 100644
--- a/packages/@react-types/shared/src/index.d.ts
+++ b/packages/@react-types/shared/src/index.d.ts
@@ -4,3 +4,4 @@ export * from './selection';
 export * from './splitview';
 export * from './dnd';
 export * from './theme';
+export * from './removable';
diff --git a/packages/@react-types/shared/src/removable.d.ts b/packages/@react-types/shared/src/removable.d.ts
new file mode 100644
index 00000000000..6c06846c60e
--- /dev/null
+++ b/packages/@react-types/shared/src/removable.d.ts
@@ -0,0 +1,6 @@
+import {SyntheticEvent} from 'react';
+
+export interface Removable<T, R> {
+  isRemovable?: boolean,
+  onRemove?: (value: T, event?: SyntheticEvent) => R
+}
diff --git a/packages/@react-types/tag/package.json b/packages/@react-types/tag/package.json
new file mode 100644
index 00000000000..055aa817887
--- /dev/null
+++ b/packages/@react-types/tag/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@react-types/tag",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "types": "src/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-types/shared": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  }
+}
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
new file mode 100644
index 00000000000..cff98491843
--- /dev/null
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -0,0 +1,21 @@
+import {DOMProps, MultipleSelectionBase, Removable} from '@react-types/shared';
+import {ReactChild, ReactElement} from 'react';
+
+export interface TagProps extends DOMProps, Removable<ReactChild, void> {
+  children?: ReactChild,
+  icon?: ReactElement,
+  isDisabled?: boolean,
+  validationState?: 'invalid' | 'valid'
+}
+
+export interface TagGroupProps extends DOMProps, MultipleSelectionBase {
+  children: ReactElement<AriaTagProps> | ReactElement<AriaTagProps>[],
+  isDisabled?: boolean
+}
+
+export interface AriaTagProps extends Removable<ReactChild, void> {
+  children?: ReactChild,
+  isDisabled?: boolean,
+  selected?: boolean,
+  role?: string
+}

From 28c8a7ca348e536cd296135f4c4a21b06142c660 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Fri, 18 Oct 2019 16:12:13 +0200
Subject: [PATCH 02/12] addressing css comments

---
 .../spectrum-css-temp/components/tags/index.css    |  4 ++--
 .../spectrum-css-temp/components/tags/skin.css     | 14 ++++++--------
 packages/@react-spectrum/tag/src/Tag.tsx           |  4 ++--
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/index.css b/packages/@adobe/spectrum-css-temp/components/tags/index.css
index d2784727cf0..5b053f31bf1 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/index.css
@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tags-item {
-  float: left;
+  float: start;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -64,7 +64,7 @@ governing permissions and limitations under the License.
     margin-inline-start: calc(-1 * var(--spectrum-tag-deletable-border-size-key-focus));
   }
 
-  > .spectrum-Tags-item-ClearButton {
+  .spectrum-Tags-itemClearButton {
     margin-inline-end: calc(-0.5 * var(--spectrum-tag-padding-x));
     margin-inline-start: var(--spectrum-tag-deletable-border-size-key-focus);
     block-size: var(--spectrum-alias-font-size-default);
diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index b77a9f5895b..9510f0f7015 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -47,11 +47,8 @@ governing permissions and limitations under the License.
       color: var(--spectrum-tag-text-color-error);
     }
     .spectrum-Tags-itemIcon,
-    .spectrum-Tags-item-ClearButton {
+    .spectrum-Tags-itemClearButton {
       color: var(--spectrum-tag-border-color-error);
-      &.clearButton-focus {
-         color: white;
-      }
     }
 
   }
@@ -97,10 +94,11 @@ governing permissions and limitations under the License.
     }
   }
 
-  > .spectrum-Tags-item-ClearButton {
-    &.clearButton-focus {
-      background-color: var(--spectrum-tag-deletable-background-color-focus);
-      color: white;
+  .spectrum-Tags-itemClearButton {
+    &.is-focused {
+      border: 2px solid var(--spectrum-tag-deletable-border-color-key-focus);
+      border-radius: var(--spectrum-alias-border-radius-regular);
+      background-color: var(--spectrum-global-color-gray-300);
     }
     &:hover {
       background-color: var(--spectrum-global-color-gray-300)
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index c3061c9cf02..7e123362cf3 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -64,8 +64,8 @@ export const Tag = ((props: TagProps) => {
         {removable &&
           <ClearButton
             tabIndex={tagProps.tabIndex}
-            focusClassName={classNames(styles, 'clearButton-focus')}
-            className={classNames(styles, 'spectrum-Tags-item-ClearButton')}
+            focusClassName={classNames(styles, 'is-focused')}
+            className={classNames(styles, 'spectrum-Tags-itemClearButton')}
             {...clearButtonProps} />
         }
       </div>

From e0afae4ce16ad44b9503d5cc4124f08c82e7abfe Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Mon, 21 Oct 2019 14:56:20 +0200
Subject: [PATCH 03/12] one with improved accessibility, without announcing

---
 .../components/tags/index.css                 |  3 +-
 packages/@react-aria/tag/src/useTag.ts        | 24 +++++++++----
 packages/@react-aria/tag/src/useTagGroup.ts   | 10 ++++--
 packages/@react-spectrum/tag/src/Tag.tsx      | 28 +++++++--------
 packages/@react-spectrum/tag/src/TagGroup.tsx |  4 +--
 .../tag/stories/TagGroup.stories.tsx          | 11 ++++++
 .../@react-spectrum/tag/test/TagGroup.test.js | 34 +++++++++++++++++++
 packages/@react-types/tag/src/index.d.ts      |  2 +-
 8 files changed, 87 insertions(+), 29 deletions(-)
 create mode 100644 packages/@react-spectrum/tag/test/TagGroup.test.js

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/index.css b/packages/@adobe/spectrum-css-temp/components/tags/index.css
index 5b053f31bf1..03dcd3068d9 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/index.css
@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tags-item {
-  float: start;
+  float: inline-start;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -65,6 +65,7 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Tags-itemClearButton {
+    display: flex;
     margin-inline-end: calc(-0.5 * var(--spectrum-tag-padding-x));
     margin-inline-start: var(--spectrum-tag-deletable-border-size-key-focus);
     block-size: var(--spectrum-alias-font-size-default);
diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 9d51981686c..f1939ac283b 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -1,25 +1,28 @@
 import {AriaTagProps} from '@react-types/tag';
 import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
 import intlMessages from '../intl/*.json';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 
 interface TagAria {
   tagProps: HTMLAttributes<HTMLElement>,
+  labelProps: HTMLAttributes<HTMLElement>,
   clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
 }
 
 export function useTag(props: AriaTagProps): TagAria {
   const {
-    isRemovable,
     isDisabled,
+    isRemovable,
+    isSelected,
     onRemove,
     children,
-    selected,
     role
   } = props;
   const formatMessage = useMessageFormatter(intlMessages);
   const removeString = formatMessage('remove');
+  const tagId = useId();
+  const buttonId = useId();
 
   function onKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Delete' || e.key === 'Backspace') {
@@ -32,15 +35,22 @@ export function useTag(props: AriaTagProps): TagAria {
   };
   return {
     tagProps: {
-      'aria-selected': role === 'gridcell' ? undefined : !isDisabled && selected,
+      'aria-selected': role === 'gridcell' ? undefined : !isDisabled && isSelected,
       onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
-      role,
+      role: role === 'gridcell' ? 'row' : null,
       tabIndex: isDisabled ? -1 : 0
     },
+    labelProps: {
+      id: tagId,
+      role
+    },
     clearButtonProps: mergeProps(pressProps, {
-      'aria-label': children ? `${removeString}: ${children}` : removeString,
+      'aria-label': removeString,
+      'aria-labelledby': `${buttonId} ${tagId}`,
+      id: buttonId,
       title: removeString,
-      isDisabled
+      isDisabled,
+      role
     })
   };
 }
diff --git a/packages/@react-aria/tag/src/useTagGroup.ts b/packages/@react-aria/tag/src/useTagGroup.ts
index d5470751d54..ddcb3224159 100644
--- a/packages/@react-aria/tag/src/useTagGroup.ts
+++ b/packages/@react-aria/tag/src/useTagGroup.ts
@@ -1,4 +1,5 @@
-import {DOMProps, MultipleSelectionBase} from '@react-types/shared';
+import {HTMLAttributes, useRef} from 'react';
+import {MultipleSelectionBase} from '@react-types/shared';
 
 interface AriaTagGroupProps extends MultipleSelectionBase {
   isDisabled?: boolean,
@@ -7,17 +8,20 @@ interface AriaTagGroupProps extends MultipleSelectionBase {
 }
 
 interface TagGroupAria {
-  tagGroupProps: DOMProps
+  tagGroupProps: HTMLAttributes<HTMLElement>
 }
 
 export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
   const {isDisabled, validationState} = props;
+
+  let isFocused = useRef(false);
+
   return {
     tagGroupProps: {
       role: 'grid',
       'aria-atomic': false,
       'aria-relevant': 'additions',
-      // 'aria-live': focused ? 'polite' : 'off',
+      'aria-live': isFocused.current ? 'polite' : 'off',
       'aria-disabled': isDisabled,
       'aria-invalid': validationState === 'invalid'
     }
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index 7e123362cf3..ded876c4bac 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -24,16 +24,17 @@ export const Tag = ((props: TagProps) => {
     role
   } =  useTagGroupProvider();
 
-  let removable = isRemovable || isGroupRemovable;
-  let disabled = isDisabled || isGroupDisabled;
-  let isInvalid = (validationState || groupValidationState) === 'invalid';
-  let {clearButtonProps, tagProps} = useTag({
+  let removable = isRemovable !== undefined ? isRemovable : isGroupRemovable;
+  let disabled = isDisabled !== undefined ? isDisabled : isGroupDisabled;
+  let isInvalid = (validationState !== undefined ? validationState : groupValidationState) === 'invalid';
+  let {clearButtonProps, labelProps, tagProps} = useTag({
     ...props,
     isRemovable: removable,
     isDisabled: disabled,
     onRemove: props.onRemove || onRemove,
     role
   });
+  let {role: buttonRole, ...otherButtonProps} = clearButtonProps;
   let icon = props.icon || (isInvalid && <Alert />);
 
   // TODO: add avatar component
@@ -54,19 +55,18 @@ export const Tag = ((props: TagProps) => {
         )}>
         {icon && React.cloneElement(icon, {size: 'S', className: classNames(styles, 'spectrum-Tags-itemIcon')})}
         <span
-          role={tagProps.role}
-          className={classNames(
-            styles,
-            'spectrum-Tags-itemLabel'
-          )}>
+          {...labelProps}
+          className={classNames(styles, 'spectrum-Tags-itemLabel')}>
           {props.children}
         </span>
         {removable &&
-          <ClearButton
-            tabIndex={tagProps.tabIndex}
-            focusClassName={classNames(styles, 'is-focused')}
-            className={classNames(styles, 'spectrum-Tags-itemClearButton')}
-            {...clearButtonProps} />
+          <span role={buttonRole}>
+            <ClearButton
+              tabIndex={tagProps.tabIndex}
+              focusClassName={classNames(styles, 'is-focused')}
+              className={classNames(styles, 'spectrum-Tags-itemClearButton')}
+              {...otherButtonProps} />
+          </span>
         }
       </div>
     </FocusRing>
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index d00d67263c6..ccef8472a47 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -63,9 +63,7 @@ export const TagGroup = ((props: TagGroupProps) => {
           validationState,
           role: 'gridcell'
         }}>
-        <span role="row">
-          {children}
-        </span>
+        {children}
       </TagGroupContext.Provider>
     </div>
   );
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index 0a2154ce0ac..6c157ea7b92 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -18,6 +18,17 @@ storiesOf('TagGroup', module)
     () => render({
       isDisabled: true
     })
+  ).add(
+    'with child wrapper, disabled',
+    () => (
+      <TagGroup isDisabled>
+        <div>
+          <Tag>Tag 1</Tag>
+          <Tag isDisabled={false}>Tag 2</Tag>
+          <Tag>Tag 3</Tag>
+        </div>
+      </TagGroup>
+    )
   );
 
 function render(props: any = {}) {
diff --git a/packages/@react-spectrum/tag/test/TagGroup.test.js b/packages/@react-spectrum/tag/test/TagGroup.test.js
new file mode 100644
index 00000000000..9abd2ca3cb2
--- /dev/null
+++ b/packages/@react-spectrum/tag/test/TagGroup.test.js
@@ -0,0 +1,34 @@
+import {cleanup, render} from '@testing-library/react';
+import {fireEvent} from '@testing-library/react';
+import React from 'react';
+import {Tag, TagGroup} from '../src';
+
+describe('TagGroup', function () {
+  let onRemoveSpy = jest.fn();
+
+  afterEach(() => {
+    cleanup();
+    onRemoveSpy.mockClear();
+  });
+
+  it('provides context for Tag component', function () {
+    let {container} = render(
+      <TagGroup isRemovable onRemove={onRemoveSpy}>
+        <div>
+          <Tag>Tag 1</Tag>
+        </div>
+        <div>
+          <Tag>Tag 2</Tag>
+        </div>
+        <div>
+          <Tag>Tag 3</Tag>
+        </div>
+      </TagGroup>
+    );
+    let tags = container.querySelectorAll('[role=\'row\'');
+    expect(tags.length).toBe(3);
+
+    fireEvent.keyDown(tags[1], {key: 'Delete'});
+    expect(onRemoveSpy).toHaveBeenCalledWith(['Tag 2']);
+  });
+});
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
index cff98491843..3a987d50a1c 100644
--- a/packages/@react-types/tag/src/index.d.ts
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -16,6 +16,6 @@ export interface TagGroupProps extends DOMProps, MultipleSelectionBase {
 export interface AriaTagProps extends Removable<ReactChild, void> {
   children?: ReactChild,
   isDisabled?: boolean,
-  selected?: boolean,
+  isSelected?: boolean,
   role?: string
 }

From 352e4696e8f4108acb3abe9700955e5666d18f2f Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Mon, 21 Oct 2019 18:58:27 +0200
Subject: [PATCH 04/12] implemented selected Tag state

---
 .../components/tags/skin.css                  | 33 +++++++++++++++++++
 packages/@react-spectrum/tag/src/Tag.tsx      |  2 ++
 .../tag/stories/TagGroup.stories.tsx          |  8 ++---
 packages/@react-types/tag/src/index.d.ts      |  1 +
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index 9510f0f7015..61fcea293bc 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -28,6 +28,39 @@ governing permissions and limitations under the License.
     box-shadow: 0 0 0 1px var(--spectrum-tag-border-color-key-focus);
   }
 
+  &.is-selected {
+    background-color: var(--spectrum-tag-deletable-text-color);
+    /* Remove after dna pr is merged */
+    color: white;
+    border-color: inherit;
+    &:hover {
+      background-color: var(--spectrum-body-1-text-color);
+    }
+
+    &.focus-ring {
+      box-shadow: 0 0 0 2px var(--spectrum-tag-border-color-key-focus);
+      border-color: inherit;
+    }
+    &.is-invalid {
+      /* Remove after dna pr is merged */
+      border-color: white;
+      .spectrum-Tags-itemIcon,
+      .spectrum-Tags-itemLabel,
+      .spectrum-Tags-itemClearButton {
+        /* Remove after dna pr is merged */
+        color: white;
+      }
+      &.focus-ring {
+        box-shadow: 0 0 0 2px var(--spectrum-tag-border-color-key-focus);
+        /* Remove after dna pr is merged */
+        border-color: white;
+      }
+      &:hover {
+        border-color: initial;
+      }
+    }
+  }
+
   &.is-invalid {
     color: var(--spectrum-tag-text-color-error);
     border-color: var(--spectrum-tag-border-color-error);
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index ded876c4bac..a4bef679f78 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -13,6 +13,7 @@ export const Tag = ((props: TagProps) => {
     className,
     isDisabled,
     isRemovable,
+    isSelected,
     validationState,
     ...otherProps
   } = props;
@@ -48,6 +49,7 @@ export const Tag = ((props: TagProps) => {
           'spectrum-Tags-item',
           {
             'is-disabled': disabled,
+            'is-selected': isSelected,
             'spectrum-Tags-item--deletable': removable,
             'is-invalid': isInvalid
           },
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index 6c157ea7b92..2b766a69a85 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -21,11 +21,11 @@ storiesOf('TagGroup', module)
   ).add(
     'with child wrapper, disabled',
     () => (
-      <TagGroup isDisabled>
+      <TagGroup>
         <div>
-          <Tag>Tag 1</Tag>
-          <Tag isDisabled={false}>Tag 2</Tag>
-          <Tag>Tag 3</Tag>
+          <Tag isSelected>Tag 1</Tag>
+          <Tag isDisabled>Tag 2</Tag>
+          <Tag validationState="invalid" isSelected>Tag 3</Tag>
         </div>
       </TagGroup>
     )
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
index 3a987d50a1c..e7fb3efd742 100644
--- a/packages/@react-types/tag/src/index.d.ts
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -5,6 +5,7 @@ export interface TagProps extends DOMProps, Removable<ReactChild, void> {
   children?: ReactChild,
   icon?: ReactElement,
   isDisabled?: boolean,
+  isSelected?: boolean,
   validationState?: 'invalid' | 'valid'
 }
 

From 9dcc7ca2fbac969613c3d9e6bfc12016c55d9b03 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Tue, 22 Oct 2019 16:58:14 +0200
Subject: [PATCH 05/12] one with stories for selected tag and css for more
 cases

---
 .../components/tags/skin.css                  | 25 ++++++++++++++++---
 .../tag/stories/Tag.stories.tsx               | 25 ++++++++++++++++++-
 .../tag/stories/TagGroup.stories.tsx          |  1 +
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index 61fcea293bc..087dd37bfed 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -32,7 +32,7 @@ governing permissions and limitations under the License.
     background-color: var(--spectrum-tag-deletable-text-color);
     /* Remove after dna pr is merged */
     color: white;
-    border-color: inherit;
+    border-color: var(--spectrum-alias-border-color-transparent);
     &:hover {
       background-color: var(--spectrum-body-1-text-color);
     }
@@ -43,7 +43,7 @@ governing permissions and limitations under the License.
     }
     &.is-invalid {
       /* Remove after dna pr is merged */
-      border-color: white;
+      border-color: var(--spectrum-alias-border-color-transparent);
       .spectrum-Tags-itemIcon,
       .spectrum-Tags-itemLabel,
       .spectrum-Tags-itemClearButton {
@@ -56,7 +56,7 @@ governing permissions and limitations under the License.
         border-color: white;
       }
       &:hover {
-        border-color: initial;
+        border-color: var(--spectrum-alias-border-color-transparent);
       }
     }
   }
@@ -127,6 +127,25 @@ governing permissions and limitations under the License.
     }
   }
 
+  &.is-selected {
+    color: white;
+    &.is-focused {
+       color: white;
+    }
+    .spectrum-Tags-itemClearButton {
+      color: white;
+      &.is-focused {
+         border-color: transparent;
+         border-radius: var(--spectrum-alias-border-radius-regular);
+         background-color: white;
+         color: var(--spectrum-tag-deletable-text-color);
+      }
+      &:hover {
+         background-color: var(--spectrum-global-color-gray-500)
+      }
+    }
+  }
+
   .spectrum-Tags-itemClearButton {
     &.is-focused {
       border: 2px solid var(--spectrum-tag-deletable-border-color-key-focus);
diff --git a/packages/@react-spectrum/tag/stories/Tag.stories.tsx b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
index 6604aabb8d8..345809649d2 100644
--- a/packages/@react-spectrum/tag/stories/Tag.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
@@ -32,6 +32,29 @@ storiesOf('Tag', module)
       validationState: 'invalid'
     }, 'Cool tag')
   )
+  .add(
+    'selected, removable',
+    () => (
+      <React.Fragment>
+        {render({
+          onRemove: action('onRemove'),
+          isRemovable: true
+        }, 'Cool tag')}
+        {render({
+          onRemove: action('onRemove'),
+          isRemovable: true,
+          isSelected: true
+        }, 'Selected tag')}
+      </React.Fragment>
+    )
+  )
+  .add(
+    'selected, invalid',
+    () => render({
+      validationState: 'invalid',
+      isSelected: true
+    }, 'Cool tag')
+  )
   .add(
     'invalid, removable',
     () => render({
@@ -49,7 +72,7 @@ storiesOf('Tag', module)
     }, 'Cool tag')
   )
   .add(
-  'disabled icon, removable',
+  'disabled, icon, removable',
   () => render({
     isDisabled: true,
     icon: <Camera />,
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index 2b766a69a85..4d890c2716e 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -26,6 +26,7 @@ storiesOf('TagGroup', module)
           <Tag isSelected>Tag 1</Tag>
           <Tag isDisabled>Tag 2</Tag>
           <Tag validationState="invalid" isSelected>Tag 3</Tag>
+          <Tag isRemovable onRemove={action('onRemove')} isSelected>Tag 3</Tag>
         </div>
       </TagGroup>
     )

From 6fbc48f4400101ae8513e6ca4c5787f71a65bec0 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Wed, 23 Oct 2019 12:40:55 +0200
Subject: [PATCH 06/12] One with announcing

---
 packages/@react-aria/tag/src/useTag.ts        |  9 ++-
 packages/@react-spectrum/tag/src/Tag.tsx      |  2 +
 packages/@react-spectrum/tag/src/TagGroup.tsx | 60 +++++++++++--------
 .../tag/stories/TagGroup.stories.tsx          | 27 ++++++++-
 packages/@react-types/tag/src/index.d.ts      |  1 +
 5 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index f1939ac283b..38aecfc36a5 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -1,5 +1,6 @@
+import {announce} from '@react-aria/live-announcer';
 import {AriaTagProps} from '@react-types/tag';
-import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
+import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent, useEffect} from 'react';
 import intlMessages from '../intl/*.json';
 import {mergeProps, useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
@@ -14,6 +15,7 @@ export function useTag(props: AriaTagProps): TagAria {
   const {
     isDisabled,
     isRemovable,
+    isGroupFocused,
     isSelected,
     onRemove,
     children,
@@ -33,6 +35,11 @@ export function useTag(props: AriaTagProps): TagAria {
   const pressProps = {
     onPress: e => onRemove(children, e)
   };
+  useEffect(() => {
+    if (isGroupFocused) {
+      announce(children, 'polite');
+    }
+  }, []);
   return {
     tagProps: {
       'aria-selected': role === 'gridcell' ? undefined : !isDisabled && isSelected,
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index a4bef679f78..12ada62a97c 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -21,6 +21,7 @@ export const Tag = ((props: TagProps) => {
     isDisabled: isGroupDisabled,
     isRemovable: isGroupRemovable,
     validationState: groupValidationState,
+    isFocused,
     onRemove,
     role
   } =  useTagGroupProvider();
@@ -30,6 +31,7 @@ export const Tag = ((props: TagProps) => {
   let isInvalid = (validationState !== undefined ? validationState : groupValidationState) === 'invalid';
   let {clearButtonProps, labelProps, tagProps} = useTag({
     ...props,
+    isGroupFocused: isFocused,
     isRemovable: removable,
     isDisabled: disabled,
     onRemove: props.onRemove || onRemove,
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index ccef8472a47..50f2fcbe763 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -1,5 +1,6 @@
 import {classNames, filterDOMProps} from '@react-spectrum/utils';
-import React, {useContext} from 'react';
+import {Focus} from '@react-aria/focus';
+import React, {useContext, useRef} from 'react';
 import {Removable} from '@react-types/shared';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
 import {TagGroupProps} from '@react-types/tag';
@@ -8,6 +9,7 @@ import {useTagGroup} from '@react-aria/tag';
 
 interface TagGroupContext extends Removable<any, void> {
   isDisabled?: boolean,
+  isFocused?: boolean,
   isRequired?: boolean,
   isReadOnly?: boolean,
   validationState?: 'valid' | 'invalid',
@@ -40,31 +42,39 @@ export const TagGroup = ((props: TagGroupProps) => {
     // TODO: implement when selection state hook is available
     onRemove([tags]);
   }
+  let isFocused = useRef(false);
+
+  let handleFocusWithin = (focused) => {
+    isFocused.current = focused;
+  };
 
   return (
-    <div
-      {...filterDOMProps(otherProps)}
-      className={
-        classNames(
-          styles,
-          'spectrum-Tags',
-          {
-            'is-disabled': isDisabled
-          },
-          className
-        )
-      }
-      {...tagGroupProps}>
-      <TagGroupContext.Provider
-        value={{
-          isRemovable: !isReadOnly && isRemovable,
-          isDisabled,
-          onRemove: removeAll,
-          validationState,
-          role: 'gridcell'
-        }}>
-        {children}
-      </TagGroupContext.Provider>
-    </div>
+    <Focus onFocusWithinChange={handleFocusWithin}>
+      <div
+        {...filterDOMProps(otherProps)}
+        className={
+          classNames(
+            styles,
+            'spectrum-Tags',
+            {
+              'is-disabled': isDisabled
+            },
+            className
+          )
+        }
+        {...tagGroupProps}>
+        <TagGroupContext.Provider
+          value={{
+            isRemovable: !isReadOnly && isRemovable,
+            isDisabled,
+            onRemove: removeAll,
+            isFocused: isFocused.current,
+            validationState,
+            role: 'gridcell'
+          }}>
+          {children}
+        </TagGroupContext.Provider>
+      </div>
+    </Focus>
   );
 });
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index 4d890c2716e..d426ef77b45 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -1,5 +1,5 @@
 import {action} from '@storybook/addon-actions';
-import React from 'react';
+import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Tag, TagGroup} from '../src';
 
@@ -30,6 +30,11 @@ storiesOf('TagGroup', module)
         </div>
       </TagGroup>
     )
+  ).add(
+    'with announcing',
+    () => (
+      <WithAnnouncing />
+    )
   );
 
 function render(props: any = {}) {
@@ -41,3 +46,23 @@ function render(props: any = {}) {
     </TagGroup>
   );
 }
+
+function WithAnnouncing() {
+  let [tags, setTags] = useState(['Tag']);
+
+  function handleKeyDown(e) {
+    if (e.ctrlKey && e.key === 'd') {
+      e.preventDefault();
+      setTags([...tags, 'New Tag']);
+    }
+  }
+  return (
+    <React.Fragment>
+      {/*
+        // @ts-ignore */}
+      <TagGroup onKeyDown={handleKeyDown}>
+        {tags.map(t => <Tag>{t}</Tag>)}
+      </TagGroup>
+    </React.Fragment>
+  );
+}
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
index e7fb3efd742..d7c05c41ea8 100644
--- a/packages/@react-types/tag/src/index.d.ts
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -17,6 +17,7 @@ export interface TagGroupProps extends DOMProps, MultipleSelectionBase {
 export interface AriaTagProps extends Removable<ReactChild, void> {
   children?: ReactChild,
   isDisabled?: boolean,
+  isGroupFocused?: boolean,
   isSelected?: boolean,
   role?: string
 }

From 1b0748db3b2834c9052dced30d81de09a4e15049 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Thu, 24 Oct 2019 14:10:03 +0200
Subject: [PATCH 07/12] Use aria-live and removed TODO's

---
 packages/@react-aria/tag/src/useTag.ts        | 10 ++--------
 packages/@react-aria/tag/src/useTagGroup.ts   |  9 ++++-----
 packages/@react-spectrum/tag/src/Tag.tsx      |  1 -
 packages/@react-spectrum/tag/src/TagGroup.tsx | 14 ++++++--------
 4 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 38aecfc36a5..16fca15e1e5 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -1,6 +1,5 @@
-import {announce} from '@react-aria/live-announcer';
 import {AriaTagProps} from '@react-types/tag';
-import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent, useEffect} from 'react';
+import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
 import intlMessages from '../intl/*.json';
 import {mergeProps, useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
@@ -15,7 +14,6 @@ export function useTag(props: AriaTagProps): TagAria {
   const {
     isDisabled,
     isRemovable,
-    isGroupFocused,
     isSelected,
     onRemove,
     children,
@@ -35,11 +33,7 @@ export function useTag(props: AriaTagProps): TagAria {
   const pressProps = {
     onPress: e => onRemove(children, e)
   };
-  useEffect(() => {
-    if (isGroupFocused) {
-      announce(children, 'polite');
-    }
-  }, []);
+
   return {
     tagProps: {
       'aria-selected': role === 'gridcell' ? undefined : !isDisabled && isSelected,
diff --git a/packages/@react-aria/tag/src/useTagGroup.ts b/packages/@react-aria/tag/src/useTagGroup.ts
index ddcb3224159..01ba296bc36 100644
--- a/packages/@react-aria/tag/src/useTagGroup.ts
+++ b/packages/@react-aria/tag/src/useTagGroup.ts
@@ -1,8 +1,9 @@
-import {HTMLAttributes, useRef} from 'react';
+import {HTMLAttributes} from 'react';
 import {MultipleSelectionBase} from '@react-types/shared';
 
 interface AriaTagGroupProps extends MultipleSelectionBase {
   isDisabled?: boolean,
+  isFocused?: boolean,
   isReadOnly?: boolean, // removes close button
   validationState?: 'valid' | 'invalid'
 }
@@ -12,16 +13,14 @@ interface TagGroupAria {
 }
 
 export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
-  const {isDisabled, validationState} = props;
-
-  let isFocused = useRef(false);
+  const {isDisabled, isFocused, validationState} = props;
 
   return {
     tagGroupProps: {
       role: 'grid',
       'aria-atomic': false,
       'aria-relevant': 'additions',
-      'aria-live': isFocused.current ? 'polite' : 'off',
+      'aria-live': isFocused ? 'polite' : 'off',
       'aria-disabled': isDisabled,
       'aria-invalid': validationState === 'invalid'
     }
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index 12ada62a97c..deee67cedf4 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -40,7 +40,6 @@ export const Tag = ((props: TagProps) => {
   let {role: buttonRole, ...otherButtonProps} = clearButtonProps;
   let icon = props.icon || (isInvalid && <Alert />);
 
-  // TODO: add avatar component
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
       <div
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index 50f2fcbe763..6e98f371178 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -35,19 +35,18 @@ export const TagGroup = ((props: TagGroupProps) => {
     className,
     ...otherProps
   } = completeProps;
-
-  const {tagGroupProps} = useTagGroup(completeProps);
-
-  function removeAll(tags) {
-    // TODO: implement when selection state hook is available
-    onRemove([tags]);
-  }
   let isFocused = useRef(false);
 
   let handleFocusWithin = (focused) => {
     isFocused.current = focused;
   };
 
+  const {tagGroupProps} = useTagGroup({...completeProps, isFocused});
+
+  function removeAll(tags) {
+    onRemove([tags]);
+  }
+
   return (
     <Focus onFocusWithinChange={handleFocusWithin}>
       <div
@@ -68,7 +67,6 @@ export const TagGroup = ((props: TagGroupProps) => {
             isRemovable: !isReadOnly && isRemovable,
             isDisabled,
             onRemove: removeAll,
-            isFocused: isFocused.current,
             validationState,
             role: 'gridcell'
           }}>

From 61e9d5218e664df7693dd90a29b09df83a30ab4e Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Thu, 24 Oct 2019 18:26:01 +0200
Subject: [PATCH 08/12] isReadOnly flag + tests

---
 packages/@react-aria/tag/src/useTag.ts        |  2 +
 packages/@react-spectrum/tag/src/Tag.tsx      |  3 +-
 packages/@react-spectrum/tag/test/Tag.test.js | 48 +++++++++++++++----
 .../@react-spectrum/tag/test/TagGroup.test.js | 35 +++++++++++++-
 packages/@react-types/tag/src/index.d.ts      |  6 ++-
 5 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 16fca15e1e5..7a9154463af 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -13,6 +13,7 @@ interface TagAria {
 export function useTag(props: AriaTagProps): TagAria {
   const {
     isDisabled,
+    validationState,
     isRemovable,
     isSelected,
     onRemove,
@@ -37,6 +38,7 @@ export function useTag(props: AriaTagProps): TagAria {
   return {
     tagProps: {
       'aria-selected': role === 'gridcell' ? undefined : !isDisabled && isSelected,
+      'aria-invalid': validationState === 'invalid' || undefined,
       onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
       role: role === 'gridcell' ? 'row' : null,
       tabIndex: isDisabled ? -1 : 0
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index deee67cedf4..84d40a1302d 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -21,7 +21,6 @@ export const Tag = ((props: TagProps) => {
     isDisabled: isGroupDisabled,
     isRemovable: isGroupRemovable,
     validationState: groupValidationState,
-    isFocused,
     onRemove,
     role
   } =  useTagGroupProvider();
@@ -31,9 +30,9 @@ export const Tag = ((props: TagProps) => {
   let isInvalid = (validationState !== undefined ? validationState : groupValidationState) === 'invalid';
   let {clearButtonProps, labelProps, tagProps} = useTag({
     ...props,
-    isGroupFocused: isFocused,
     isRemovable: removable,
     isDisabled: disabled,
+    validationState: validationState !== undefined ? validationState : groupValidationState,
     onRemove: props.onRemove || onRemove,
     role
   });
diff --git a/packages/@react-spectrum/tag/test/Tag.test.js b/packages/@react-spectrum/tag/test/Tag.test.js
index db0312e7bd0..54e840534ec 100644
--- a/packages/@react-spectrum/tag/test/Tag.test.js
+++ b/packages/@react-spectrum/tag/test/Tag.test.js
@@ -13,10 +13,10 @@ describe('Tag', function () {
   });
 
   it.each`
-   Component        | props
-    ${Tag}          | ${{}}
-    ${V2Tag}        | ${{}}
-  `('v2/3 parity allows custom props to be passed through to the tag', function ({Component, props}) {
+   Name          | Component         | props
+   ${'Tag'}      | ${Tag}            | ${{}}
+   ${'V2Tag'}    | ${V2Tag}          | ${{}}
+  `('$Name allows custom props to be passed through to the tag', function ({Component, props}) {
     let {container} = render(<Component {...props} data-foo="bar" aria-hidden name="s">Cool Tag</Component>);
 
     let tag = container.firstElementChild;
@@ -25,13 +25,45 @@ describe('Tag', function () {
     expect(tag).toHaveAttribute('name', 's');
   });
 
-  it('handles key down', function () {
-    const props = {isRemovable: true, onRemove: onRemoveSpy};
-    let {getByText} = render(<Tag {...props}>Cool Tag</Tag>);
+  it.each`
+   Name         | Component         | props
+   ${'Tag'}     | ${Tag}            | ${{isRemovable: true, onRemove: onRemoveSpy}}
+   ${'V2Tag'}   | ${V2Tag}          | ${{closable: true, onClose: onRemoveSpy}}
+  `('$Name handles appropriate key down in order to delete tag', function ({Component, props}) {
+    let {getByText} = render(<Component {...props}>Cool Tag</Component>);
 
     let tag = getByText('Cool Tag');
 
-    fireEvent.keyDown(tag, {key: 'Delete'});
+    fireEvent.keyDown(tag, {key: 'Delete', keyCode: 46});
     expect(onRemoveSpy).toHaveBeenCalledWith('Cool Tag', expect.anything());
+    onRemoveSpy.mockReset();
+
+    fireEvent.keyDown(tag, {key: 'Backspace', keyCode: 8});
+    expect(onRemoveSpy).toHaveBeenCalledWith('Cool Tag', expect.anything());
+  });
+
+  it.each`
+   Name          | Component         | props
+   ${'Tag'}      | ${Tag}            | ${{isDisabled: true, isRemovable: true, onRemove: onRemoveSpy}}
+   ${'V2Tag'}    | ${V2Tag}          | ${{disabled: true, closable: true, onClose: onRemoveSpy}}
+  `('$Name can be disabled', function ({Component, props}) {
+    let {getByText} = render(<Component {...props}>Cool Tag</Component>);
+
+    let tag = getByText('Cool Tag');
+
+    fireEvent.keyDown(tag, {key: 'Delete'});
+    expect(onRemoveSpy).not.toHaveBeenCalledWith('Cool Tag', expect.anything());
+  });
+
+  it.each`
+   Name          | Component         | props
+   ${'Tag'}      | ${Tag}            | ${{validationState: 'invalid'}}
+  `('$Name can be disabled', function ({Component, props}) {
+    let {getByText} = render(<Component {...props}>Cool Tag</Component>);
+
+    let tag = getByText('Cool Tag');
+    tag = tag.parentElement;
+
+    expect(tag).toHaveAttribute('aria-invalid', 'true');
   });
 });
diff --git a/packages/@react-spectrum/tag/test/TagGroup.test.js b/packages/@react-spectrum/tag/test/TagGroup.test.js
index 9abd2ca3cb2..6988edf40a5 100644
--- a/packages/@react-spectrum/tag/test/TagGroup.test.js
+++ b/packages/@react-spectrum/tag/test/TagGroup.test.js
@@ -2,6 +2,7 @@ import {cleanup, render} from '@testing-library/react';
 import {fireEvent} from '@testing-library/react';
 import React from 'react';
 import {Tag, TagGroup} from '../src';
+import {TagList} from '@react/react-spectrum/TagList';
 
 describe('TagGroup', function () {
   let onRemoveSpy = jest.fn();
@@ -25,10 +26,42 @@ describe('TagGroup', function () {
         </div>
       </TagGroup>
     );
-    let tags = container.querySelectorAll('[role=\'row\'');
+    let tags = container.querySelectorAll('[role="row"');
     expect(tags.length).toBe(3);
 
     fireEvent.keyDown(tags[1], {key: 'Delete'});
     expect(onRemoveSpy).toHaveBeenCalledWith(['Tag 2']);
   });
+
+  it.each`
+   Name           | Component         | props
+   ${'TagGroup'}  | ${TagGroup}       | ${{isReadOnly: true, isRemovable: true, onRemove: onRemoveSpy}}
+   ${'TagList'}   | ${TagList}        | ${{readOnly: true, onClose: onRemoveSpy}}
+  `('$Name can be read only', ({Component, props}) => {
+    let {getByText} = render(
+      <Component {...props}>
+        <Tag>Tag 1</Tag>
+      </Component>
+    );
+    let tag = getByText('Tag 1');
+    fireEvent.keyDown(tag, {key: 'Delete', keyCode: 46});
+    expect(onRemoveSpy).not.toHaveBeenCalledWith('Tag 1', expect.anything());
+  });
+
+  it.each`
+   Name           | Component         | props
+   ${'TagGroup'}  | ${TagGroup}       | ${{}}
+  `('$Name have correct accessibility roles', ({Component, props}) => {
+    let {container, getByText} = render(
+      <Component {...props}>
+        <Tag>Tag 1</Tag>
+      </Component>
+    );
+    let tagGroup = container.children[0];
+    expect(tagGroup).toHaveAttribute('role', 'grid');
+    let tag = tagGroup.children[0];
+    expect(tag).toHaveAttribute('role', 'row');
+    let tagContent = getByText('Tag 1');
+    expect(tagContent).toHaveAttribute('role', 'gridcell');
+  });
 });
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
index d7c05c41ea8..ab00eaec59b 100644
--- a/packages/@react-types/tag/src/index.d.ts
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -9,15 +9,17 @@ export interface TagProps extends DOMProps, Removable<ReactChild, void> {
   validationState?: 'invalid' | 'valid'
 }
 
-export interface TagGroupProps extends DOMProps, MultipleSelectionBase {
+export interface TagGroupProps extends DOMProps, MultipleSelectionBase, Removable<ReactChild[], void> {
   children: ReactElement<AriaTagProps> | ReactElement<AriaTagProps>[],
   isDisabled?: boolean
+  isReadOnly?: boolean,
+  validationState?: 'invalid' | 'valid'
 }
 
 export interface AriaTagProps extends Removable<ReactChild, void> {
   children?: ReactChild,
   isDisabled?: boolean,
-  isGroupFocused?: boolean,
+  validationState?: 'invalid' | 'valid',
   isSelected?: boolean,
   role?: string
 }

From 0c5e1a4b603d2d9ad5d6d98110241d8007c070fc Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Thu, 24 Oct 2019 18:43:27 +0200
Subject: [PATCH 09/12] more tests

---
 packages/@react-aria/tag/src/useTag.ts       |  2 +-
 packages/@react-aria/tag/test/useTag.test.js | 21 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 7a9154463af..5653560cf34 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -37,7 +37,7 @@ export function useTag(props: AriaTagProps): TagAria {
 
   return {
     tagProps: {
-      'aria-selected': role === 'gridcell' ? undefined : !isDisabled && isSelected,
+      'aria-selected': !isDisabled && isSelected,
       'aria-invalid': validationState === 'invalid' || undefined,
       onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
       role: role === 'gridcell' ? 'row' : null,
diff --git a/packages/@react-aria/tag/test/useTag.test.js b/packages/@react-aria/tag/test/useTag.test.js
index 585d914eba7..a30b14ede09 100644
--- a/packages/@react-aria/tag/test/useTag.test.js
+++ b/packages/@react-aria/tag/test/useTag.test.js
@@ -6,10 +6,29 @@ describe('useTag tests', () => {
     let props = {};
     let {result} = renderHook(() => useTag(props));
     expect(result.current.tagProps.onKeyDown).toBeDefined();
+    expect(result.current.tagProps['aria-selected']).not.toBeDefined();
+    expect(result.current.tagProps['aria-invalid']).not.toBeDefined();
     expect(result.current.clearButtonProps.onPress).toBeDefined();
+    expect(result.current.labelProps.id).toBeDefined();
   });
 
-  it('handles disabled flag', () => {
+  it('set correct aria if it is invalid', () => {
+    let props = {validationState: 'invalid'};
+    let {result} = renderHook(() => useTag(props));
+    expect(result.current.tagProps['aria-invalid']).toBe(true);
+  });
+
+  it('set correct aria if it is selected', () => {
+    let props = {isSelected: true};
+    let hook = renderHook(() => useTag(props));
+    expect(hook.result.current.tagProps['aria-selected']).toBe(true);
+
+    props = {isSelected: true, isDisabled: true};
+    hook = renderHook(() => useTag(props));
+    expect(hook.result.current.tagProps['aria-selected']).toBe(false);
+  });
+
+  it('handles isDisabled flag', () => {
     let props = {isDisabled: true};
     let {result} = renderHook(() => useTag(props));
     expect(result.current.tagProps.onKeyDown).toBe(null);

From 94c463d4ac1d5950923cb98f5ec7afdc8d5acb43 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Tue, 29 Oct 2019 12:17:38 +0100
Subject: [PATCH 10/12] added dna variables into css file and addressed code
 review comments   * AriaTagProps moved to @react-aria/tag package   * Deleted
 isRemovable flag and its usage from TagGroup   * Removed isSelected flag and
 its usage for Tag (stories removed)

---
 .../components/tags/skin.css                  | 82 +++++++++----------
 packages/@react-aria/tag/src/useTag.ts        | 15 +++-
 packages/@react-spectrum/tag/src/Tag.tsx      |  9 +-
 packages/@react-spectrum/tag/src/TagGroup.tsx |  5 +-
 .../tag/stories/Tag.stories.tsx               | 23 ------
 .../tag/stories/TagGroup.stories.tsx          | 32 ++++----
 .../@react-spectrum/tag/test/TagGroup.test.js |  8 +-
 packages/@react-types/tag/src/index.d.ts      | 18 ++--
 8 files changed, 81 insertions(+), 111 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index 087dd37bfed..a7655e2dfb1 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -21,7 +21,7 @@ governing permissions and limitations under the License.
     border-color: var(--spectrum-tag-border-color-hover);
   }
 
-  &:focus-ring {
+  &.focus-ring {
     background-color: var(--spectrum-tag-background-color-key-focus);
     color: var(--spectrum-tag-text-color-key-focus);
     border-color: var(--spectrum-tag-border-color-key-focus);
@@ -29,56 +29,49 @@ governing permissions and limitations under the License.
   }
 
   &.is-selected {
-    background-color: var(--spectrum-tag-deletable-text-color);
-    /* Remove after dna pr is merged */
-    color: white;
-    border-color: var(--spectrum-alias-border-color-transparent);
+    background-color: var(--spectrum-tag-background-color-selected);
+    color: var(--spectrum-tag-text-color-selected);
+    border-color: var(--spectrum-tag-border-color-selected);
     &:hover {
-      background-color: var(--spectrum-body-1-text-color);
+      background-color: var(--spectrum-tag-background-color-selected-hover);
     }
 
     &.focus-ring {
-      box-shadow: 0 0 0 2px var(--spectrum-tag-border-color-key-focus);
-      border-color: inherit;
+      box-shadow: 0 0 0 2px var(--spectrum-tag-border-color-selected-key-focus);
+      border-color: var(--spectrum-tag-text-color-selected-key-focus);
     }
     &.is-invalid {
-      /* Remove after dna pr is merged */
-      border-color: var(--spectrum-alias-border-color-transparent);
+      border-color: var(--spectrum-tag-border-color-error-selected);
       .spectrum-Tags-itemIcon,
       .spectrum-Tags-itemLabel,
       .spectrum-Tags-itemClearButton {
-        /* Remove after dna pr is merged */
-        color: white;
+        color: var(--spectrum-tag-text-color-error-selected);
       }
       &.focus-ring {
         box-shadow: 0 0 0 2px var(--spectrum-tag-border-color-key-focus);
-        /* Remove after dna pr is merged */
-        border-color: white;
+        border-color: var(--spectrum-tag-border-color-error-selected);
       }
       &:hover {
-        border-color: var(--spectrum-alias-border-color-transparent);
+        border-color: var(--spectrum-tag-border-color-selected);
       }
     }
   }
 
   &.is-invalid {
-    color: var(--spectrum-tag-text-color-error);
+    color: var(--spectrum-tag-icon-color-error);
     border-color: var(--spectrum-tag-border-color-error);
 
     &:hover {
-      color: var(--spectrum-tag-text-color-error-hover);
+      color: var(--spectrum-tag-icon-color-error-hover);
       border-color: var(--spectrum-tag-border-color-error-hover);
     }
 
-    &:focus-ring {
+    &.focus-ring {
       color: var(--spectrum-tag-text-color-error-key-focus);
       border-color: var(--spectrum-tag-border-color-key-focus);
       box-shadow: 0 0 0 1px var(--spectrum-tag-border-color-key-focus);
     }
 
-    .spectrum-Tags-itemLabel {
-      color: var(--spectrum-tag-text-color-error);
-    }
     .spectrum-Tags-itemIcon,
     .spectrum-Tags-itemClearButton {
       color: var(--spectrum-tag-border-color-error);
@@ -98,62 +91,61 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Tags-item--deletable {
+.spectrum-Tags-item--removable {
   &:hover {
-    color: var(--spectrum-tag-deletable-text-color-hover);
+    color: var(--spectrum-tag-removable-text-color-hover);
   }
 
   &:active {
-    color: var(--spectrum-tag-deletable-text-color-down);
+    color: var(--spectrum-tag-removable-text-color-down);
   }
 
   &.is-invalid {
     &:hover {
-      border-color: var(--spectrum-tag-deletable-border-color-error-hover);
-      color: var(--spectrum-tag-deletable-text-color-error-hover);
+      border-color: var(--spectrum-tag-removable-border-color-error-hover);
+      .spectrum-Tags-itemClearButton {
+        color: var(--spectrum-tag-removable-border-color-error-hover);
+      }
     }
 
     &:active {
-      border-color: var(--spectrum-tag-deletable-border-color-error-down);
-      color: var(--spectrum-tag-deletable-text-color-error-down);
+      border-color: var(--spectrum-tag-removable-border-color-error-down);
+      color: var(--spectrum-tag-removable-text-color-error-down);
     }
   }
 
-  &:focus-ring {
-    color: var(--spectrum-tag-deletable-text-color-key-focus);
+  &.is-focused {
+    color: var(--spectrum-tag-removable-text-color-key-focus);
 
     &.is-invalid {
-      color: var(--spectrum-tag-deletable-text-color-error-key-focus);
+      color: var(--spectrum-tag-removable-text-color-error-key-focus);
     }
   }
 
   &.is-selected {
-    color: white;
+    color: var(--spectrum-tag-removable-text-color-selected);
     &.is-focused {
-       color: white;
+       color: var(--spectrum-tag-removable-text-color-selected-key-focus);
     }
     .spectrum-Tags-itemClearButton {
-      color: white;
-      &.is-focused {
-         border-color: transparent;
-         border-radius: var(--spectrum-alias-border-radius-regular);
-         background-color: white;
-         color: var(--spectrum-tag-deletable-text-color);
-      }
+      color: var(--spectrum-tag-removable-button-icon-color-selected);
       &:hover {
-         background-color: var(--spectrum-global-color-gray-500)
+         background-color: var(--spectrum-tag-removable-button-background-color-selected-hover);
+         color: var(--spectrum-tag-removable-button-icon-color-selected-hover);
       }
     }
   }
 
   .spectrum-Tags-itemClearButton {
     &.is-focused {
-      border: 2px solid var(--spectrum-tag-deletable-border-color-key-focus);
-      border-radius: var(--spectrum-alias-border-radius-regular);
-      background-color: var(--spectrum-global-color-gray-300);
+       border: 2px solid var(--spectrum-tag-removable-border-color-key-focus);
+       border-radius: var(--spectrum-alias-border-radius-regular);
+       background-color: var(--spectrum-tag-removable-button-background-color-key-focus);
+       color: var(--spectrum-tag-removable-button-icon-color-key-focus);
     }
     &:hover {
-      background-color: var(--spectrum-global-color-gray-300)
+      background-color: var(--spectrum-tag-removable-button-background-color-hover);
+      color: var(--spectrum-tag-removable-button-icon-color-hover);
     }
   }
 }
diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 5653560cf34..2cb9bd7c80b 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -1,10 +1,19 @@
-import {AriaTagProps} from '@react-types/tag';
-import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
+import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent, ReactNode} from 'react';
 import intlMessages from '../intl/*.json';
 import {mergeProps, useId} from '@react-aria/utils';
+import {Removable} from '@react-types/shared';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface TagAria {
+
+export interface AriaTagProps extends Removable<ReactNode, void> {
+  children?: ReactNode,
+  isDisabled?: boolean,
+  validationState?: 'invalid' | 'valid',
+  isSelected?: boolean,
+  role?: string
+}
+
+export interface TagAria {
   tagProps: HTMLAttributes<HTMLElement>,
   labelProps: HTMLAttributes<HTMLElement>,
   clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx
index 84d40a1302d..84eb747b22a 100644
--- a/packages/@react-spectrum/tag/src/Tag.tsx
+++ b/packages/@react-spectrum/tag/src/Tag.tsx
@@ -13,7 +13,6 @@ export const Tag = ((props: TagProps) => {
     className,
     isDisabled,
     isRemovable,
-    isSelected,
     validationState,
     ...otherProps
   } = props;
@@ -25,8 +24,8 @@ export const Tag = ((props: TagProps) => {
     role
   } =  useTagGroupProvider();
 
-  let removable = isRemovable !== undefined ? isRemovable : isGroupRemovable;
-  let disabled = isDisabled !== undefined ? isDisabled : isGroupDisabled;
+  let removable = isGroupRemovable !== undefined ? isGroupRemovable : isRemovable;
+  let disabled = isGroupDisabled !== undefined ? isGroupDisabled : isDisabled;
   let isInvalid = (validationState !== undefined ? validationState : groupValidationState) === 'invalid';
   let {clearButtonProps, labelProps, tagProps} = useTag({
     ...props,
@@ -49,8 +48,8 @@ export const Tag = ((props: TagProps) => {
           'spectrum-Tags-item',
           {
             'is-disabled': disabled,
-            'is-selected': isSelected,
-            'spectrum-Tags-item--deletable': removable,
+            // 'is-selected': isSelected,
+            'spectrum-Tags-item--removable': removable,
             'is-invalid': isInvalid
           },
           className
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index 6e98f371178..e0fb27625b3 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -28,7 +28,6 @@ export const TagGroup = ((props: TagGroupProps) => {
   let {
     isReadOnly,
     isDisabled,
-    isRemovable,
     onRemove,
     validationState,
     children,
@@ -64,9 +63,9 @@ export const TagGroup = ((props: TagGroupProps) => {
         {...tagGroupProps}>
         <TagGroupContext.Provider
           value={{
-            isRemovable: !isReadOnly && isRemovable,
+            isRemovable: isReadOnly ? false : isReadOnly,
             isDisabled,
-            onRemove: removeAll,
+            onRemove: isReadOnly ? null : removeAll,
             validationState,
             role: 'gridcell'
           }}>
diff --git a/packages/@react-spectrum/tag/stories/Tag.stories.tsx b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
index 345809649d2..d2a7ce19927 100644
--- a/packages/@react-spectrum/tag/stories/Tag.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/Tag.stories.tsx
@@ -32,29 +32,6 @@ storiesOf('Tag', module)
       validationState: 'invalid'
     }, 'Cool tag')
   )
-  .add(
-    'selected, removable',
-    () => (
-      <React.Fragment>
-        {render({
-          onRemove: action('onRemove'),
-          isRemovable: true
-        }, 'Cool tag')}
-        {render({
-          onRemove: action('onRemove'),
-          isRemovable: true,
-          isSelected: true
-        }, 'Selected tag')}
-      </React.Fragment>
-    )
-  )
-  .add(
-    'selected, invalid',
-    () => render({
-      validationState: 'invalid',
-      isSelected: true
-    }, 'Cool tag')
-  )
   .add(
     'invalid, removable',
     () => render({
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index d426ef77b45..13210930ba6 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -8,9 +8,8 @@ storiesOf('TagGroup', module)
     'default',
     () => render({})
   ).add(
-    'with remove',
-    () => render({
-      isRemovable: true,
+    'onRemove',
+    () => renderWithRemovableTags({
       onRemove: action('onRemove')
     })
   ).add(
@@ -19,17 +18,10 @@ storiesOf('TagGroup', module)
       isDisabled: true
     })
   ).add(
-    'with child wrapper, disabled',
-    () => (
-      <TagGroup>
-        <div>
-          <Tag isSelected>Tag 1</Tag>
-          <Tag isDisabled>Tag 2</Tag>
-          <Tag validationState="invalid" isSelected>Tag 3</Tag>
-          <Tag isRemovable onRemove={action('onRemove')} isSelected>Tag 3</Tag>
-        </div>
-      </TagGroup>
-    )
+    'isReadOnly',
+    () => renderWithRemovableTags({
+      isReadOnly: true
+    })
   ).add(
     'with announcing',
     () => (
@@ -47,6 +39,16 @@ function render(props: any = {}) {
   );
 }
 
+function renderWithRemovableTags(props: any = {}) {
+  return (
+    <TagGroup {...props}>
+      <Tag isRemovable>Cool Tag 1</Tag>
+      <Tag isRemovable>Cool Tag 2</Tag>
+      <Tag isRemovable>Cool Tag 3</Tag>
+    </TagGroup>
+  );
+}
+
 function WithAnnouncing() {
   let [tags, setTags] = useState(['Tag']);
 
@@ -61,7 +63,7 @@ function WithAnnouncing() {
       {/*
         // @ts-ignore */}
       <TagGroup onKeyDown={handleKeyDown}>
-        {tags.map(t => <Tag>{t}</Tag>)}
+        {tags.map((t, index) => <Tag key={index}>{t}</Tag>)}
       </TagGroup>
     </React.Fragment>
   );
diff --git a/packages/@react-spectrum/tag/test/TagGroup.test.js b/packages/@react-spectrum/tag/test/TagGroup.test.js
index 6988edf40a5..f3f4cfe9825 100644
--- a/packages/@react-spectrum/tag/test/TagGroup.test.js
+++ b/packages/@react-spectrum/tag/test/TagGroup.test.js
@@ -14,15 +14,15 @@ describe('TagGroup', function () {
 
   it('provides context for Tag component', function () {
     let {container} = render(
-      <TagGroup isRemovable onRemove={onRemoveSpy}>
+      <TagGroup onRemove={onRemoveSpy}>
         <div>
-          <Tag>Tag 1</Tag>
+          <Tag isRemovable>Tag 1</Tag>
         </div>
         <div>
-          <Tag>Tag 2</Tag>
+          <Tag isRemovable>Tag 2</Tag>
         </div>
         <div>
-          <Tag>Tag 3</Tag>
+          <Tag isRemovable>Tag 3</Tag>
         </div>
       </TagGroup>
     );
diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts
index ab00eaec59b..5e0b31c186e 100644
--- a/packages/@react-types/tag/src/index.d.ts
+++ b/packages/@react-types/tag/src/index.d.ts
@@ -1,25 +1,17 @@
 import {DOMProps, MultipleSelectionBase, Removable} from '@react-types/shared';
-import {ReactChild, ReactElement} from 'react';
+import {ReactChild, ReactElement, ReactNode} from 'react';
 
 export interface TagProps extends DOMProps, Removable<ReactChild, void> {
-  children?: ReactChild,
+  children?: ReactNode,
   icon?: ReactElement,
   isDisabled?: boolean,
-  isSelected?: boolean,
   validationState?: 'invalid' | 'valid'
 }
 
-export interface TagGroupProps extends DOMProps, MultipleSelectionBase, Removable<ReactChild[], void> {
-  children: ReactElement<AriaTagProps> | ReactElement<AriaTagProps>[],
+export interface TagGroupProps extends DOMProps, MultipleSelectionBase {
+  children: ReactElement<TagProps> | ReactElement<TagProps>[],
   isDisabled?: boolean
   isReadOnly?: boolean,
+  onRemove?: (items: any[]) => void,
   validationState?: 'invalid' | 'valid'
 }
-
-export interface AriaTagProps extends Removable<ReactChild, void> {
-  children?: ReactChild,
-  isDisabled?: boolean,
-  validationState?: 'invalid' | 'valid',
-  isSelected?: boolean,
-  role?: string
-}

From ad98d7e9f11b6ea0b5629e15be5d6a1f2e5e9e89 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Tue, 29 Oct 2019 12:33:41 +0100
Subject: [PATCH 11/12] revert spectrum-css-temp/vars files

---
 packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css    | 4 +---
 packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css | 4 +---
 packages/@adobe/spectrum-css-temp/vars/spectrum-light.css   | 6 ++----
 .../@adobe/spectrum-css-temp/vars/spectrum-lightest.css     | 4 +---
 packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css | 4 +---
 .../@adobe/spectrum-css-temp/vars/spectrum-midlight.css     | 4 +---
 6 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
index f6bbab63f2f..fbc12b79135 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(110, 110, 110);
   --spectrum-tag-border-color-error: rgb(236, 91, 98);
   --spectrum-tag-icon-color-error: rgb(236, 91, 98);
-  --spectrum-tag-text-color-error: rgb(247, 109, 116);
+  --spectrum-tag-text-color-error: rgb(185, 185, 185);
   --spectrum-tag-border-color-error-hover: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error-hover: rgb(247, 109, 116);
   --spectrum-tag-text-color-error-hover: rgb(255, 255, 255);
@@ -2330,8 +2330,6 @@
   --spectrum-tag-deletable-text-color-down: rgb(185, 185, 185);
   --spectrum-tag-deletable-icon-color-down: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color-key-focus: rgb(47, 47, 47);
-  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-background-color-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-border-color-key-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-text-color-key-focus: rgb(185, 185, 185);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
index 957f49847a6..e0dcf737c40 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(92, 92, 92);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
-  --spectrum-tag-text-color-error: rgb(236, 91, 98);
+  --spectrum-tag-text-color-error: rgb(162, 162, 162);
   --spectrum-tag-border-color-error-hover: rgb(236, 91, 98);
   --spectrum-tag-icon-color-error-hover: rgb(236, 91, 98);
   --spectrum-tag-text-color-error-hover: rgb(239, 239, 239);
@@ -2330,8 +2330,6 @@
   --spectrum-tag-deletable-text-color-down: rgb(162, 162, 162);
   --spectrum-tag-deletable-icon-color-down: rgb(239, 239, 239);
   --spectrum-tag-deletable-background-color-key-focus: rgb(26, 26, 26);
-  --spectrum-tag-deletable-color-focus: rgb(239, 239, 239);
-  --spectrum-tag-deletable-background-color-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-border-color-key-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-text-color-key-focus: rgb(162, 162, 162);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(239, 239, 239);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
index f2a82183323..b4fd874f9d2 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(179, 179, 179);
   --spectrum-tag-border-color-error: rgb(215, 55, 63);
   --spectrum-tag-icon-color-error: rgb(215, 55, 63);
-  --spectrum-tag-text-color-error: rgb(201, 37, 45);
+  --spectrum-tag-text-color-error: rgb(110, 110, 110);
   --spectrum-tag-border-color-error-hover: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error-hover: rgb(201, 37, 45);
   --spectrum-tag-text-color-error-hover: rgb(44, 44, 44);
@@ -2323,7 +2323,7 @@
   --spectrum-tag-deletable-icon-color: rgb(142, 142, 142);
   --spectrum-tag-deletable-background-color-hover: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-hover: rgb(44, 44, 44);
-  --spectrum-tag-deletable-text-color-hover: rgb(44, 44, 44);
+  --spectrum-tag-deletable-text-color-hover: rgb(110, 110, 110);
   --spectrum-tag-deletable-icon-color-hover: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-down: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-down: rgb(44, 44, 44);
@@ -2331,8 +2331,6 @@
   --spectrum-tag-deletable-icon-color-down: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-key-focus: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color-key-focus: rgb(38, 128, 235);
-  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-background-color-focus: rgb(38, 128, 235);
   --spectrum-tag-deletable-text-color-key-focus: rgb(110, 110, 110);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(44, 44, 44);
   --spectrum-tag-deletable-background-color-disabled: rgb(234, 234, 234);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
index 54d50dd2296..a6ef6bdd50b 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(188, 188, 188);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
-  --spectrum-tag-text-color-error: rgb(215, 55, 63);
+  --spectrum-tag-text-color-error: rgb(116, 116, 116);
   --spectrum-tag-border-color-error-hover: rgb(215, 55, 63);
   --spectrum-tag-icon-color-error-hover: rgb(215, 55, 63);
   --spectrum-tag-text-color-error-hover: rgb(50, 50, 50);
@@ -2330,8 +2330,6 @@
   --spectrum-tag-deletable-text-color-down: rgb(116, 116, 116);
   --spectrum-tag-deletable-icon-color-down: rgb(50, 50, 50);
   --spectrum-tag-deletable-background-color-key-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-background-color-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-border-color-key-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-text-color-key-focus: rgb(116, 116, 116);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(50, 50, 50);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
index 1f7d82f7704..2dd83ca84ca 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(118, 118, 118);
   --spectrum-tag-border-color-error: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error: rgb(247, 109, 116);
-  --spectrum-tag-text-color-error: rgb(255, 123, 130);
+  --spectrum-tag-text-color-error: rgb(186, 186, 186);
   --spectrum-tag-border-color-error-hover: rgb(255, 123, 130);
   --spectrum-tag-icon-color-error-hover: rgb(255, 123, 130);
   --spectrum-tag-text-color-error-hover: rgb(255, 255, 255);
@@ -2330,8 +2330,6 @@
   --spectrum-tag-deletable-text-color-down: rgb(186, 186, 186);
   --spectrum-tag-deletable-icon-color-down: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color-key-focus: rgb(71, 71, 71);
-  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-background-color-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-border-color-key-focus: rgb(55, 142, 240);
   --spectrum-tag-deletable-text-color-key-focus: rgb(186, 186, 186);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
index 0ad798f5ec6..129a29c7ad4 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
@@ -2307,7 +2307,7 @@
   --spectrum-tag-icon-color-disabled: rgb(160, 160, 160);
   --spectrum-tag-border-color-error: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error: rgb(201, 37, 45);
-  --spectrum-tag-text-color-error: rgb(187, 18, 26);
+  --spectrum-tag-text-color-error: rgb(97, 97, 97);
   --spectrum-tag-border-color-error-hover: rgb(187, 18, 26);
   --spectrum-tag-icon-color-error-hover: rgb(187, 18, 26);
   --spectrum-tag-text-color-error-hover: rgb(25, 25, 25);
@@ -2330,8 +2330,6 @@
   --spectrum-tag-deletable-text-color-down: rgb(97, 97, 97);
   --spectrum-tag-deletable-icon-color-down: rgb(25, 25, 25);
   --spectrum-tag-deletable-background-color-key-focus: rgb(228, 228, 228);
-  --spectrum-tag-deletable-color-focus: rgb(255, 255, 255);
-  --spectrum-tag-deletable-background-color-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-border-color-key-focus: rgb(20, 115, 230);
   --spectrum-tag-deletable-text-color-key-focus: rgb(97, 97, 97);
   --spectrum-tag-deletable-icon-color-key-focus: rgb(25, 25, 25);

From 2800457808c1310fefacbda1834285561e95fe10 Mon Sep 17 00:00:00 2001
From: Milan Brkic <end83022@adobe.com>
Date: Tue, 29 Oct 2019 19:05:42 +0100
Subject: [PATCH 12/12] pasting vars from dna pr

---
 .../components/tags/skin.css                  |   8 +-
 .../spectrum-css-temp/vars/spectrum-dark.css  | 104 ++++++++++++++++++
 .../vars/spectrum-darkest.css                 | 104 ++++++++++++++++++
 .../spectrum-css-temp/vars/spectrum-large.css |  14 +++
 .../spectrum-css-temp/vars/spectrum-light.css | 104 ++++++++++++++++++
 .../vars/spectrum-lightest.css                | 104 ++++++++++++++++++
 .../vars/spectrum-medium.css                  |  14 +++
 .../vars/spectrum-metadata.json               |  19 +++-
 .../vars/spectrum-middark.css                 | 104 ++++++++++++++++++
 .../vars/spectrum-midlight.css                | 104 ++++++++++++++++++
 10 files changed, 672 insertions(+), 7 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
index a7655e2dfb1..63b534826ca 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -67,7 +67,7 @@ governing permissions and limitations under the License.
     }
 
     &.focus-ring {
-      color: var(--spectrum-tag-text-color-error-key-focus);
+      color: var(--spectrum-tag-icon-color-error-hover);
       border-color: var(--spectrum-tag-border-color-key-focus);
       box-shadow: 0 0 0 1px var(--spectrum-tag-border-color-key-focus);
     }
@@ -108,6 +108,12 @@ governing permissions and limitations under the License.
       }
     }
 
+    .spectrum-Tags-itemClearButton {
+      &.is-focused {
+         color: var(--spectrum-tag-icon-color-error-hover);
+       }
+     }
+
     &:active {
       border-color: var(--spectrum-tag-removable-border-color-error-down);
       color: var(--spectrum-tag-removable-text-color-error-down);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
index fbc12b79135..15bb9c7f872 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(62, 62, 62);
   --spectrum-tag-text-color-disabled: rgb(110, 110, 110);
   --spectrum-tag-icon-color-disabled: rgb(110, 110, 110);
+  --spectrum-tag-background-color-selected: rgb(185, 185, 185);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-icon-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-background-color-selected-hover: rgb(227, 227, 227);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-icon-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-background-color-selected-key-focus: rgb(227, 227, 227);
+  --spectrum-tag-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-text-color-selected-key-focus: rgb(37, 37, 37);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(37, 37, 37);
   --spectrum-tag-border-color-error: rgb(236, 91, 98);
   --spectrum-tag-icon-color-error: rgb(236, 91, 98);
   --spectrum-tag-text-color-error: rgb(185, 185, 185);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(255, 123, 130);
   --spectrum-tag-icon-color-error-down: rgb(255, 123, 130);
   --spectrum-tag-text-color-error-down: rgb(255, 255, 255);
+  --spectrum-tag-background-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-border-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-text-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-icon-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-background-color-error-selected: rgb(185, 185, 185);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(37, 37, 37);
+  --spectrum-tag-text-color-error-selected: rgb(37, 37, 37);
   --spectrum-tag-deletable-background-color: rgb(47, 47, 47);
   --spectrum-tag-deletable-border-color: rgb(144, 144, 144);
   --spectrum-tag-deletable-text-color: rgb(185, 185, 185);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(62, 62, 62);
   --spectrum-tag-deletable-text-color-disabled: rgb(110, 110, 110);
   --spectrum-tag-deletable-icon-color-disabled: rgb(110, 110, 110);
+  --spectrum-tag-deletable-background-color-selected: rgb(185, 185, 185);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-deletable-icon-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(227, 227, 227);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(227, 227, 227);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(37, 37, 37);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(37, 37, 37);
   --spectrum-tag-deletable-border-color-error: rgb(236, 91, 98);
   --spectrum-tag-deletable-icon-color-error: rgb(236, 91, 98);
   --spectrum-tag-deletable-text-color-error: rgb(185, 185, 185);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(255, 123, 130);
   --spectrum-tag-deletable-icon-color-error-down: rgb(255, 123, 130);
   --spectrum-tag-deletable-text-color-error-down: rgb(185, 185, 185);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(185, 185, 185);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(37, 37, 37);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(37, 37, 37);
+  --spectrum-tag-removable-background-color: rgb(47, 47, 47);
+  --spectrum-tag-removable-border-color: rgb(144, 144, 144);
+  --spectrum-tag-removable-text-color: rgb(185, 185, 185);
+  --spectrum-tag-removable-icon-color: rgb(144, 144, 144);
+  --spectrum-tag-removable-background-color-hover: rgb(47, 47, 47);
+  --spectrum-tag-removable-border-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-hover: rgb(74, 74, 74);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-down: rgb(47, 47, 47);
+  --spectrum-tag-removable-border-color-down: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-down: rgb(185, 185, 185);
+  --spectrum-tag-removable-icon-color-down: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-key-focus: rgb(47, 47, 47);
+  --spectrum-tag-removable-border-color-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-key-focus: rgb(185, 185, 185);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(74, 74, 74);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-disabled: rgb(62, 62, 62);
+  --spectrum-tag-removable-border-color-disabled: rgb(62, 62, 62);
+  --spectrum-tag-removable-text-color-disabled: rgb(110, 110, 110);
+  --spectrum-tag-removable-icon-color-disabled: rgb(110, 110, 110);
+  --spectrum-tag-removable-background-color-selected: rgb(185, 185, 185);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-removable-icon-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(37, 37, 37);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(227, 227, 227);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(37, 37, 37);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(144, 144, 144);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(227, 227, 227);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(37, 37, 37);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(37, 37, 37);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(185, 185, 185);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(37, 37, 37);
+  --spectrum-tag-removable-border-color-error: rgb(236, 91, 98);
+  --spectrum-tag-removable-icon-color-error: rgb(236, 91, 98);
+  --spectrum-tag-removable-text-color-error: rgb(185, 185, 185);
+  --spectrum-tag-removable-border-color-error-hover: rgb(247, 109, 116);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(247, 109, 116);
+  --spectrum-tag-removable-text-color-error-hover: rgb(185, 185, 185);
+  --spectrum-tag-removable-background-color-error-hover: rgb(74, 74, 74);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(247, 109, 116);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(185, 185, 185);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(74, 74, 74);
+  --spectrum-tag-removable-border-color-error-down: rgb(255, 123, 130);
+  --spectrum-tag-removable-icon-color-error-down: rgb(255, 123, 130);
+  --spectrum-tag-removable-text-color-error-down: rgb(185, 185, 185);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(62, 62, 62);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(110, 110, 110);
+  --spectrum-tag-removable-background-color-error-selected: rgb(185, 185, 185);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(37, 37, 37);
+  --spectrum-tag-removable-text-color-error-selected: rgb(37, 37, 37);
   --spectrum-textfield-placeholder-text-color: rgb(144, 144, 144);
   --spectrum-textfield-text-color: rgb(227, 227, 227);
   --spectrum-textfield-background-color: rgb(37, 37, 37);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
index e0dcf737c40..8083994dc5b 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(44, 44, 44);
   --spectrum-tag-text-color-disabled: rgb(92, 92, 92);
   --spectrum-tag-icon-color-disabled: rgb(92, 92, 92);
+  --spectrum-tag-background-color-selected: rgb(162, 162, 162);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-icon-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-background-color-selected-hover: rgb(200, 200, 200);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-icon-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-background-color-selected-key-focus: rgb(200, 200, 200);
+  --spectrum-tag-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-text-color-selected-key-focus: rgb(8, 8, 8);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(8, 8, 8);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
   --spectrum-tag-text-color-error: rgb(162, 162, 162);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error-down: rgb(247, 109, 116);
   --spectrum-tag-text-color-error-down: rgb(239, 239, 239);
+  --spectrum-tag-background-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-border-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-text-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-icon-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-background-color-error-selected: rgb(162, 162, 162);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(8, 8, 8);
+  --spectrum-tag-text-color-error-selected: rgb(8, 8, 8);
   --spectrum-tag-deletable-background-color: rgb(26, 26, 26);
   --spectrum-tag-deletable-border-color: rgb(124, 124, 124);
   --spectrum-tag-deletable-text-color: rgb(162, 162, 162);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(44, 44, 44);
   --spectrum-tag-deletable-text-color-disabled: rgb(92, 92, 92);
   --spectrum-tag-deletable-icon-color-disabled: rgb(92, 92, 92);
+  --spectrum-tag-deletable-background-color-selected: rgb(162, 162, 162);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-deletable-icon-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(200, 200, 200);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(200, 200, 200);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(8, 8, 8);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(8, 8, 8);
   --spectrum-tag-deletable-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-deletable-icon-color-error: rgb(227, 72, 80);
   --spectrum-tag-deletable-text-color-error: rgb(162, 162, 162);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(247, 109, 116);
   --spectrum-tag-deletable-icon-color-error-down: rgb(247, 109, 116);
   --spectrum-tag-deletable-text-color-error-down: rgb(162, 162, 162);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(162, 162, 162);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(8, 8, 8);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(8, 8, 8);
+  --spectrum-tag-removable-background-color: rgb(26, 26, 26);
+  --spectrum-tag-removable-border-color: rgb(124, 124, 124);
+  --spectrum-tag-removable-text-color: rgb(162, 162, 162);
+  --spectrum-tag-removable-icon-color: rgb(124, 124, 124);
+  --spectrum-tag-removable-background-color-hover: rgb(26, 26, 26);
+  --spectrum-tag-removable-border-color-hover: rgb(239, 239, 239);
+  --spectrum-tag-removable-text-color-hover: rgb(239, 239, 239);
+  --spectrum-tag-removable-icon-color-hover: rgb(239, 239, 239);
+  --spectrum-tag-removable-button-background-color-hover: rgb(57, 57, 57);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(239, 239, 239);
+  --spectrum-tag-removable-background-color-down: rgb(26, 26, 26);
+  --spectrum-tag-removable-border-color-down: rgb(239, 239, 239);
+  --spectrum-tag-removable-text-color-down: rgb(162, 162, 162);
+  --spectrum-tag-removable-icon-color-down: rgb(239, 239, 239);
+  --spectrum-tag-removable-background-color-key-focus: rgb(26, 26, 26);
+  --spectrum-tag-removable-border-color-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-key-focus: rgb(162, 162, 162);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(239, 239, 239);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(57, 57, 57);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(239, 239, 239);
+  --spectrum-tag-removable-background-color-disabled: rgb(44, 44, 44);
+  --spectrum-tag-removable-border-color-disabled: rgb(44, 44, 44);
+  --spectrum-tag-removable-text-color-disabled: rgb(92, 92, 92);
+  --spectrum-tag-removable-icon-color-disabled: rgb(92, 92, 92);
+  --spectrum-tag-removable-background-color-selected: rgb(162, 162, 162);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-removable-icon-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(8, 8, 8);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(200, 200, 200);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(8, 8, 8);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(124, 124, 124);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(200, 200, 200);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(8, 8, 8);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(8, 8, 8);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(162, 162, 162);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(8, 8, 8);
+  --spectrum-tag-removable-border-color-error: rgb(227, 72, 80);
+  --spectrum-tag-removable-icon-color-error: rgb(227, 72, 80);
+  --spectrum-tag-removable-text-color-error: rgb(162, 162, 162);
+  --spectrum-tag-removable-border-color-error-hover: rgb(236, 91, 98);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(236, 91, 98);
+  --spectrum-tag-removable-text-color-error-hover: rgb(162, 162, 162);
+  --spectrum-tag-removable-background-color-error-hover: rgb(57, 57, 57);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(236, 91, 98);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(162, 162, 162);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(57, 57, 57);
+  --spectrum-tag-removable-border-color-error-down: rgb(247, 109, 116);
+  --spectrum-tag-removable-icon-color-error-down: rgb(247, 109, 116);
+  --spectrum-tag-removable-text-color-error-down: rgb(162, 162, 162);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(44, 44, 44);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(92, 92, 92);
+  --spectrum-tag-removable-background-color-error-selected: rgb(162, 162, 162);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(8, 8, 8);
+  --spectrum-tag-removable-text-color-error-selected: rgb(8, 8, 8);
   --spectrum-textfield-placeholder-text-color: rgb(124, 124, 124);
   --spectrum-textfield-text-color: rgb(200, 200, 200);
   --spectrum-textfield-background-color: rgb(8, 8, 8);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-large.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-large.css
index 21265d6374b..4a420dbc08e 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-large.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-large.css
@@ -2534,6 +2534,20 @@
   --spectrum-tag-deletable-icon-padding-x: 10px;
   --spectrum-tag-deletable-icon-size: 10px;
   --spectrum-tag-deletable-border-size-key-focus: 2px;
+  --spectrum-tag-removable-text-size: 15px;
+  --spectrum-tag-removable-text-font-weight: 400;
+  --spectrum-tag-removable-text-font-style: normal;
+  --spectrum-tag-removable-text-baseline: 10px;
+  --spectrum-tag-removable-height: 30px;
+  --spectrum-tag-removable-icon-height: 10px;
+  --spectrum-tag-removable-icon-width: 10px;
+  --spectrum-tag-removable-border-radius: 5px;
+  --spectrum-tag-removable-border-size: 1px;
+  --spectrum-tag-removable-padding-x: 13px;
+  --spectrum-tag-removable-avatar-padding-x: 10px;
+  --spectrum-tag-removable-icon-padding-x: 10px;
+  --spectrum-tag-removable-icon-size: 10px;
+  --spectrum-tag-removable-border-size-key-focus: 2px;
   --spectrum-taggroup-tag-gap-x: 10px;
   --spectrum-taggroup-tag-gap-y: 10px;
   --spectrum-textfield-placeholder-text-font-style: italic;
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
index b4fd874f9d2..6b0dcab50a5 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(234, 234, 234);
   --spectrum-tag-text-color-disabled: rgb(179, 179, 179);
   --spectrum-tag-icon-color-disabled: rgb(179, 179, 179);
+  --spectrum-tag-background-color-selected: rgb(110, 110, 110);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-background-color-selected-hover: rgb(75, 75, 75);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-background-color-selected-key-focus: rgb(75, 75, 75);
+  --spectrum-tag-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(255, 255, 255);
   --spectrum-tag-border-color-error: rgb(215, 55, 63);
   --spectrum-tag-icon-color-error: rgb(215, 55, 63);
   --spectrum-tag-text-color-error: rgb(110, 110, 110);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(187, 18, 26);
   --spectrum-tag-icon-color-error-down: rgb(187, 18, 26);
   --spectrum-tag-text-color-error-down: rgb(44, 44, 44);
+  --spectrum-tag-background-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-border-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-text-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-icon-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-background-color-error-selected: rgb(110, 110, 110);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-text-color-error-selected: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color: rgb(250, 250, 250);
   --spectrum-tag-deletable-border-color: rgb(142, 142, 142);
   --spectrum-tag-deletable-text-color: rgb(110, 110, 110);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(234, 234, 234);
   --spectrum-tag-deletable-text-color-disabled: rgb(179, 179, 179);
   --spectrum-tag-deletable-icon-color-disabled: rgb(179, 179, 179);
+  --spectrum-tag-deletable-background-color-selected: rgb(110, 110, 110);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(75, 75, 75);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(75, 75, 75);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(255, 255, 255);
   --spectrum-tag-deletable-border-color-error: rgb(215, 55, 63);
   --spectrum-tag-deletable-icon-color-error: rgb(215, 55, 63);
   --spectrum-tag-deletable-text-color-error: rgb(110, 110, 110);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(187, 18, 26);
   --spectrum-tag-deletable-icon-color-error-down: rgb(187, 18, 26);
   --spectrum-tag-deletable-text-color-error-down: rgb(110, 110, 110);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(110, 110, 110);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color: rgb(250, 250, 250);
+  --spectrum-tag-removable-border-color: rgb(142, 142, 142);
+  --spectrum-tag-removable-text-color: rgb(110, 110, 110);
+  --spectrum-tag-removable-icon-color: rgb(142, 142, 142);
+  --spectrum-tag-removable-background-color-hover: rgb(250, 250, 250);
+  --spectrum-tag-removable-border-color-hover: rgb(44, 44, 44);
+  --spectrum-tag-removable-text-color-hover: rgb(44, 44, 44);
+  --spectrum-tag-removable-icon-color-hover: rgb(44, 44, 44);
+  --spectrum-tag-removable-button-background-color-hover: rgb(225, 225, 225);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(44, 44, 44);
+  --spectrum-tag-removable-background-color-down: rgb(250, 250, 250);
+  --spectrum-tag-removable-border-color-down: rgb(44, 44, 44);
+  --spectrum-tag-removable-text-color-down: rgb(110, 110, 110);
+  --spectrum-tag-removable-icon-color-down: rgb(44, 44, 44);
+  --spectrum-tag-removable-background-color-key-focus: rgb(250, 250, 250);
+  --spectrum-tag-removable-border-color-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-key-focus: rgb(110, 110, 110);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(44, 44, 44);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(225, 225, 225);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(44, 44, 44);
+  --spectrum-tag-removable-background-color-disabled: rgb(234, 234, 234);
+  --spectrum-tag-removable-border-color-disabled: rgb(234, 234, 234);
+  --spectrum-tag-removable-text-color-disabled: rgb(179, 179, 179);
+  --spectrum-tag-removable-icon-color-disabled: rgb(179, 179, 179);
+  --spectrum-tag-removable-background-color-selected: rgb(110, 110, 110);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(75, 75, 75);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(142, 142, 142);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(75, 75, 75);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(110, 110, 110);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color-error: rgb(215, 55, 63);
+  --spectrum-tag-removable-icon-color-error: rgb(215, 55, 63);
+  --spectrum-tag-removable-text-color-error: rgb(110, 110, 110);
+  --spectrum-tag-removable-border-color-error-hover: rgb(201, 37, 45);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(201, 37, 45);
+  --spectrum-tag-removable-text-color-error-hover: rgb(110, 110, 110);
+  --spectrum-tag-removable-background-color-error-hover: rgb(225, 225, 225);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(201, 37, 45);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(38, 128, 235);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(110, 110, 110);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(225, 225, 225);
+  --spectrum-tag-removable-border-color-error-down: rgb(187, 18, 26);
+  --spectrum-tag-removable-icon-color-error-down: rgb(187, 18, 26);
+  --spectrum-tag-removable-text-color-error-down: rgb(110, 110, 110);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(234, 234, 234);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(179, 179, 179);
+  --spectrum-tag-removable-background-color-error-selected: rgb(110, 110, 110);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-error-selected: rgb(255, 255, 255);
   --spectrum-textfield-placeholder-text-color: rgb(142, 142, 142);
   --spectrum-textfield-text-color: rgb(75, 75, 75);
   --spectrum-textfield-background-color: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
index a6ef6bdd50b..657f5d9a87d 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(244, 244, 244);
   --spectrum-tag-text-color-disabled: rgb(188, 188, 188);
   --spectrum-tag-icon-color-disabled: rgb(188, 188, 188);
+  --spectrum-tag-background-color-selected: rgb(116, 116, 116);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-background-color-selected-hover: rgb(80, 80, 80);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-background-color-selected-key-focus: rgb(80, 80, 80);
+  --spectrum-tag-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(255, 255, 255);
   --spectrum-tag-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-icon-color-error: rgb(227, 72, 80);
   --spectrum-tag-text-color-error: rgb(116, 116, 116);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error-down: rgb(201, 37, 45);
   --spectrum-tag-text-color-error-down: rgb(50, 50, 50);
+  --spectrum-tag-background-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-border-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-text-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-icon-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-background-color-error-selected: rgb(116, 116, 116);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-text-color-error-selected: rgb(255, 255, 255);
   --spectrum-tag-deletable-background-color: rgb(255, 255, 255);
   --spectrum-tag-deletable-border-color: rgb(149, 149, 149);
   --spectrum-tag-deletable-text-color: rgb(116, 116, 116);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(244, 244, 244);
   --spectrum-tag-deletable-text-color-disabled: rgb(188, 188, 188);
   --spectrum-tag-deletable-icon-color-disabled: rgb(188, 188, 188);
+  --spectrum-tag-deletable-background-color-selected: rgb(116, 116, 116);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(80, 80, 80);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(80, 80, 80);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(255, 255, 255);
   --spectrum-tag-deletable-border-color-error: rgb(227, 72, 80);
   --spectrum-tag-deletable-icon-color-error: rgb(227, 72, 80);
   --spectrum-tag-deletable-text-color-error: rgb(116, 116, 116);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(201, 37, 45);
   --spectrum-tag-deletable-icon-color-error-down: rgb(201, 37, 45);
   --spectrum-tag-deletable-text-color-error-down: rgb(116, 116, 116);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(116, 116, 116);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color: rgb(149, 149, 149);
+  --spectrum-tag-removable-text-color: rgb(116, 116, 116);
+  --spectrum-tag-removable-icon-color: rgb(149, 149, 149);
+  --spectrum-tag-removable-background-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color-hover: rgb(50, 50, 50);
+  --spectrum-tag-removable-text-color-hover: rgb(50, 50, 50);
+  --spectrum-tag-removable-icon-color-hover: rgb(50, 50, 50);
+  --spectrum-tag-removable-button-background-color-hover: rgb(234, 234, 234);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(50, 50, 50);
+  --spectrum-tag-removable-background-color-down: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color-down: rgb(50, 50, 50);
+  --spectrum-tag-removable-text-color-down: rgb(116, 116, 116);
+  --spectrum-tag-removable-icon-color-down: rgb(50, 50, 50);
+  --spectrum-tag-removable-background-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-key-focus: rgb(116, 116, 116);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(50, 50, 50);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(234, 234, 234);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(50, 50, 50);
+  --spectrum-tag-removable-background-color-disabled: rgb(244, 244, 244);
+  --spectrum-tag-removable-border-color-disabled: rgb(244, 244, 244);
+  --spectrum-tag-removable-text-color-disabled: rgb(188, 188, 188);
+  --spectrum-tag-removable-icon-color-disabled: rgb(188, 188, 188);
+  --spectrum-tag-removable-background-color-selected: rgb(116, 116, 116);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(80, 80, 80);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(149, 149, 149);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(80, 80, 80);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(116, 116, 116);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-border-color-error: rgb(227, 72, 80);
+  --spectrum-tag-removable-icon-color-error: rgb(227, 72, 80);
+  --spectrum-tag-removable-text-color-error: rgb(116, 116, 116);
+  --spectrum-tag-removable-border-color-error-hover: rgb(215, 55, 63);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(215, 55, 63);
+  --spectrum-tag-removable-text-color-error-hover: rgb(116, 116, 116);
+  --spectrum-tag-removable-background-color-error-hover: rgb(234, 234, 234);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(215, 55, 63);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(116, 116, 116);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(234, 234, 234);
+  --spectrum-tag-removable-border-color-error-down: rgb(201, 37, 45);
+  --spectrum-tag-removable-icon-color-error-down: rgb(201, 37, 45);
+  --spectrum-tag-removable-text-color-error-down: rgb(116, 116, 116);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(244, 244, 244);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(188, 188, 188);
+  --spectrum-tag-removable-background-color-error-selected: rgb(116, 116, 116);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-error-selected: rgb(255, 255, 255);
   --spectrum-textfield-placeholder-text-color: rgb(149, 149, 149);
   --spectrum-textfield-text-color: rgb(80, 80, 80);
   --spectrum-textfield-background-color: rgb(255, 255, 255);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-medium.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-medium.css
index 3966a98d9a3..7281f02575f 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-medium.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-medium.css
@@ -2534,6 +2534,20 @@
   --spectrum-tag-deletable-icon-padding-x: 8px;
   --spectrum-tag-deletable-icon-size: 8px;
   --spectrum-tag-deletable-border-size-key-focus: 2px;
+  --spectrum-tag-removable-text-size: 12px;
+  --spectrum-tag-removable-text-font-weight: 400;
+  --spectrum-tag-removable-text-font-style: normal;
+  --spectrum-tag-removable-text-baseline: 8px;
+  --spectrum-tag-removable-height: 24px;
+  --spectrum-tag-removable-icon-height: 8px;
+  --spectrum-tag-removable-icon-width: 8px;
+  --spectrum-tag-removable-border-radius: 4px;
+  --spectrum-tag-removable-border-size: 1px;
+  --spectrum-tag-removable-padding-x: 10px;
+  --spectrum-tag-removable-avatar-padding-x: 8px;
+  --spectrum-tag-removable-icon-padding-x: 8px;
+  --spectrum-tag-removable-icon-size: 8px;
+  --spectrum-tag-removable-border-size-key-focus: 2px;
   --spectrum-taggroup-tag-gap-x: 8px;
   --spectrum-taggroup-tag-gap-y: 8px;
   --spectrum-textfield-placeholder-text-font-style: italic;
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-metadata.json b/packages/@adobe/spectrum-css-temp/vars/spectrum-metadata.json
index 24e3e0dd6fc..8e471670af5 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-metadata.json
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-metadata.json
@@ -563,13 +563,20 @@
   "spectrum-tabs-vertical-status": "Canon",
   "spectrum-tag-name": "Tag (Default)",
   "spectrum-tag-description": "The default variant of Tag",
-  "spectrum-tag-status": "Canon",
-  "spectrum-tag-deletable-name": "Tag (Deletable)",
-  "spectrum-tag-deletable-description": "The deletable variant of Tag",
-  "spectrum-tag-deletable-status": "Canon",
+  "spectrum-tag-status": "Verified",
+  "spectrum-tag-version": "6.0.0",
+  "spectrum-tag-deletable-name": "Tag (Deletable - DEPRECATED)",
+  "spectrum-tag-deletable-description": "Deprecated; use Tag (Removable)",
+  "spectrum-tag-deletable-status": "Deprecated",
+  "spectrum-tag-deletable-version": "5.0.0",
+  "spectrum-tag-removable-name": "Tag (Removable)",
+  "spectrum-tag-removable-description": "The removable variant of Tag",
+  "spectrum-tag-removable-status": "Verified",
+  "spectrum-tag-removable-version": "6.0.0",
   "spectrum-taggroup-name": "Tag Group (Default)",
   "spectrum-taggroup-description": "Group of tags",
-  "spectrum-taggroup-status": "Canon",
+  "spectrum-taggroup-status": "Verified",
+  "spectrum-taggroup-version": "5.0.0",
   "spectrum-textfield-decorated-name": "Textfield (Decorated)",
   "spectrum-textfield-decorated-description": "The Decorated variant of Textfield",
   "spectrum-textfield-decorated-status": "Precursor",
@@ -1290,4 +1297,4 @@
   "spectrum-well-name": "Well (Default)",
   "spectrum-well-description": "The default variant for Well",
   "spectrum-well-status": "Precursor"
-}
\ No newline at end of file
+}
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
index 2dd83ca84ca..4974d90e536 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-middark.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(81, 81, 81);
   --spectrum-tag-text-color-disabled: rgb(118, 118, 118);
   --spectrum-tag-icon-color-disabled: rgb(118, 118, 118);
+  --spectrum-tag-background-color-selected: rgb(186, 186, 186);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-icon-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-background-color-selected-hover: rgb(245, 245, 245);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-icon-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-background-color-selected-key-focus: rgb(245, 245, 245);
+  --spectrum-tag-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-text-color-selected-key-focus: rgb(63, 63, 63);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(63, 63, 63);
   --spectrum-tag-border-color-error: rgb(247, 109, 116);
   --spectrum-tag-icon-color-error: rgb(247, 109, 116);
   --spectrum-tag-text-color-error: rgb(186, 186, 186);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(255, 146, 151);
   --spectrum-tag-icon-color-error-down: rgb(255, 146, 151);
   --spectrum-tag-text-color-error-down: rgb(255, 255, 255);
+  --spectrum-tag-background-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-border-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-text-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-icon-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-background-color-error-selected: rgb(186, 186, 186);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(63, 63, 63);
+  --spectrum-tag-text-color-error-selected: rgb(63, 63, 63);
   --spectrum-tag-deletable-background-color: rgb(71, 71, 71);
   --spectrum-tag-deletable-border-color: rgb(152, 152, 152);
   --spectrum-tag-deletable-text-color: rgb(186, 186, 186);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(81, 81, 81);
   --spectrum-tag-deletable-text-color-disabled: rgb(118, 118, 118);
   --spectrum-tag-deletable-icon-color-disabled: rgb(118, 118, 118);
+  --spectrum-tag-deletable-background-color-selected: rgb(186, 186, 186);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-deletable-icon-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(245, 245, 245);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(245, 245, 245);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(63, 63, 63);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(63, 63, 63);
   --spectrum-tag-deletable-border-color-error: rgb(247, 109, 116);
   --spectrum-tag-deletable-icon-color-error: rgb(247, 109, 116);
   --spectrum-tag-deletable-text-color-error: rgb(186, 186, 186);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(255, 146, 151);
   --spectrum-tag-deletable-icon-color-error-down: rgb(255, 146, 151);
   --spectrum-tag-deletable-text-color-error-down: rgb(186, 186, 186);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(186, 186, 186);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(63, 63, 63);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(63, 63, 63);
+  --spectrum-tag-removable-background-color: rgb(71, 71, 71);
+  --spectrum-tag-removable-border-color: rgb(152, 152, 152);
+  --spectrum-tag-removable-text-color: rgb(186, 186, 186);
+  --spectrum-tag-removable-icon-color: rgb(152, 152, 152);
+  --spectrum-tag-removable-background-color-hover: rgb(71, 71, 71);
+  --spectrum-tag-removable-border-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-icon-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-hover: rgb(87, 87, 87);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-down: rgb(71, 71, 71);
+  --spectrum-tag-removable-border-color-down: rgb(255, 255, 255);
+  --spectrum-tag-removable-text-color-down: rgb(186, 186, 186);
+  --spectrum-tag-removable-icon-color-down: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-key-focus: rgb(71, 71, 71);
+  --spectrum-tag-removable-border-color-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-key-focus: rgb(186, 186, 186);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(87, 87, 87);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(255, 255, 255);
+  --spectrum-tag-removable-background-color-disabled: rgb(81, 81, 81);
+  --spectrum-tag-removable-border-color-disabled: rgb(81, 81, 81);
+  --spectrum-tag-removable-text-color-disabled: rgb(118, 118, 118);
+  --spectrum-tag-removable-icon-color-disabled: rgb(118, 118, 118);
+  --spectrum-tag-removable-background-color-selected: rgb(186, 186, 186);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-removable-icon-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(63, 63, 63);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(245, 245, 245);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(63, 63, 63);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(152, 152, 152);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(245, 245, 245);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(63, 63, 63);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(63, 63, 63);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(186, 186, 186);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(63, 63, 63);
+  --spectrum-tag-removable-border-color-error: rgb(247, 109, 116);
+  --spectrum-tag-removable-icon-color-error: rgb(247, 109, 116);
+  --spectrum-tag-removable-text-color-error: rgb(186, 186, 186);
+  --spectrum-tag-removable-border-color-error-hover: rgb(255, 123, 130);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(255, 123, 130);
+  --spectrum-tag-removable-text-color-error-hover: rgb(186, 186, 186);
+  --spectrum-tag-removable-background-color-error-hover: rgb(87, 87, 87);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(255, 123, 130);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(55, 142, 240);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(186, 186, 186);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(87, 87, 87);
+  --spectrum-tag-removable-border-color-error-down: rgb(255, 146, 151);
+  --spectrum-tag-removable-icon-color-error-down: rgb(255, 146, 151);
+  --spectrum-tag-removable-text-color-error-down: rgb(186, 186, 186);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(81, 81, 81);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(118, 118, 118);
+  --spectrum-tag-removable-background-color-error-selected: rgb(186, 186, 186);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(63, 63, 63);
+  --spectrum-tag-removable-text-color-error-selected: rgb(63, 63, 63);
   --spectrum-textfield-placeholder-text-color: rgb(152, 152, 152);
   --spectrum-textfield-text-color: rgb(245, 245, 245);
   --spectrum-textfield-background-color: rgb(63, 63, 63);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
index 129a29c7ad4..494de1b1750 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-midlight.css
@@ -2305,6 +2305,18 @@
   --spectrum-tag-border-color-disabled: rgb(210, 210, 210);
   --spectrum-tag-text-color-disabled: rgb(160, 160, 160);
   --spectrum-tag-icon-color-disabled: rgb(160, 160, 160);
+  --spectrum-tag-background-color-selected: rgb(97, 97, 97);
+  --spectrum-tag-border-color-selected: transparent;
+  --spectrum-tag-text-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-icon-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-background-color-selected-hover: rgb(60, 60, 60);
+  --spectrum-tag-border-color-selected-hover: transparent;
+  --spectrum-tag-text-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-icon-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-background-color-selected-key-focus: rgb(60, 60, 60);
+  --spectrum-tag-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-text-color-selected-key-focus: rgb(240, 240, 240);
+  --spectrum-tag-icon-color-selected-key-focus: rgb(240, 240, 240);
   --spectrum-tag-border-color-error: rgb(201, 37, 45);
   --spectrum-tag-icon-color-error: rgb(201, 37, 45);
   --spectrum-tag-text-color-error: rgb(97, 97, 97);
@@ -2317,6 +2329,14 @@
   --spectrum-tag-border-color-error-down: rgb(170, 13, 21);
   --spectrum-tag-icon-color-error-down: rgb(170, 13, 21);
   --spectrum-tag-text-color-error-down: rgb(25, 25, 25);
+  --spectrum-tag-background-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-border-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-text-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-icon-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-background-color-error-selected: rgb(97, 97, 97);
+  --spectrum-tag-border-color-error-selected: transparent;
+  --spectrum-tag-icon-color-error-selected: rgb(240, 240, 240);
+  --spectrum-tag-text-color-error-selected: rgb(240, 240, 240);
   --spectrum-tag-deletable-background-color: rgb(228, 228, 228);
   --spectrum-tag-deletable-border-color: rgb(125, 125, 125);
   --spectrum-tag-deletable-text-color: rgb(97, 97, 97);
@@ -2337,6 +2357,18 @@
   --spectrum-tag-deletable-border-color-disabled: rgb(210, 210, 210);
   --spectrum-tag-deletable-text-color-disabled: rgb(160, 160, 160);
   --spectrum-tag-deletable-icon-color-disabled: rgb(160, 160, 160);
+  --spectrum-tag-deletable-background-color-selected: rgb(97, 97, 97);
+  --spectrum-tag-deletable-border-color-selected: transparent;
+  --spectrum-tag-deletable-text-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-deletable-icon-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-deletable-background-color-selected-hover: rgb(60, 60, 60);
+  --spectrum-tag-deletable-border-color-selected-hover: transparent;
+  --spectrum-tag-deletable-text-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-deletable-icon-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-deletable-background-color-selected-key-focus: rgb(60, 60, 60);
+  --spectrum-tag-deletable-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-deletable-text-color-selected-key-focus: rgb(240, 240, 240);
+  --spectrum-tag-deletable-icon-color-selected-key-focus: rgb(240, 240, 240);
   --spectrum-tag-deletable-border-color-error: rgb(201, 37, 45);
   --spectrum-tag-deletable-icon-color-error: rgb(201, 37, 45);
   --spectrum-tag-deletable-text-color-error: rgb(97, 97, 97);
@@ -2349,6 +2381,78 @@
   --spectrum-tag-deletable-border-color-error-down: rgb(170, 13, 21);
   --spectrum-tag-deletable-icon-color-error-down: rgb(170, 13, 21);
   --spectrum-tag-deletable-text-color-error-down: rgb(97, 97, 97);
+  --spectrum-tag-deletable-background-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-deletable-border-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-deletable-text-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-deletable-icon-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-deletable-background-color-error-selected: rgb(97, 97, 97);
+  --spectrum-tag-deletable-border-color-error-selected: transparent;
+  --spectrum-tag-deletable-icon-color-error-selected: rgb(240, 240, 240);
+  --spectrum-tag-deletable-text-color-error-selected: rgb(240, 240, 240);
+  --spectrum-tag-removable-background-color: rgb(228, 228, 228);
+  --spectrum-tag-removable-border-color: rgb(125, 125, 125);
+  --spectrum-tag-removable-text-color: rgb(97, 97, 97);
+  --spectrum-tag-removable-icon-color: rgb(125, 125, 125);
+  --spectrum-tag-removable-background-color-hover: rgb(228, 228, 228);
+  --spectrum-tag-removable-border-color-hover: rgb(25, 25, 25);
+  --spectrum-tag-removable-text-color-hover: rgb(25, 25, 25);
+  --spectrum-tag-removable-icon-color-hover: rgb(25, 25, 25);
+  --spectrum-tag-removable-button-background-color-hover: rgb(202, 202, 202);
+  --spectrum-tag-removable-button-icon-color-hover: rgb(25, 25, 25);
+  --spectrum-tag-removable-background-color-down: rgb(228, 228, 228);
+  --spectrum-tag-removable-border-color-down: rgb(25, 25, 25);
+  --spectrum-tag-removable-text-color-down: rgb(97, 97, 97);
+  --spectrum-tag-removable-icon-color-down: rgb(25, 25, 25);
+  --spectrum-tag-removable-background-color-key-focus: rgb(228, 228, 228);
+  --spectrum-tag-removable-border-color-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-key-focus: rgb(97, 97, 97);
+  --spectrum-tag-removable-icon-color-key-focus: rgb(25, 25, 25);
+  --spectrum-tag-removable-button-background-color-key-focus: rgb(202, 202, 202);
+  --spectrum-tag-removable-button-icon-color-key-focus: rgb(25, 25, 25);
+  --spectrum-tag-removable-background-color-disabled: rgb(210, 210, 210);
+  --spectrum-tag-removable-border-color-disabled: rgb(210, 210, 210);
+  --spectrum-tag-removable-text-color-disabled: rgb(160, 160, 160);
+  --spectrum-tag-removable-icon-color-disabled: rgb(160, 160, 160);
+  --spectrum-tag-removable-background-color-selected: rgb(97, 97, 97);
+  --spectrum-tag-removable-border-color-selected: transparent;
+  --spectrum-tag-removable-text-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-removable-icon-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-removable-button-icon-color-selected: rgb(240, 240, 240);
+  --spectrum-tag-removable-button-background-color-selected: transparent;
+  --spectrum-tag-removable-background-color-selected-hover: rgb(60, 60, 60);
+  --spectrum-tag-removable-border-color-selected-hover: transparent;
+  --spectrum-tag-removable-text-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-removable-icon-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-removable-button-icon-color-selected-hover: rgb(240, 240, 240);
+  --spectrum-tag-removable-button-background-color-selected-hover: rgb(125, 125, 125);
+  --spectrum-tag-removable-background-color-selected-key-focus: rgb(60, 60, 60);
+  --spectrum-tag-removable-border-color-selected-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-selected-key-focus: rgb(240, 240, 240);
+  --spectrum-tag-removable-icon-color-selected-key-focus: rgb(240, 240, 240);
+  --spectrum-tag-removable-button-icon-color-selected-key-focus: rgb(97, 97, 97);
+  --spectrum-tag-removable-button-background-color-selected-key-focus: rgb(240, 240, 240);
+  --spectrum-tag-removable-border-color-error: rgb(201, 37, 45);
+  --spectrum-tag-removable-icon-color-error: rgb(201, 37, 45);
+  --spectrum-tag-removable-text-color-error: rgb(97, 97, 97);
+  --spectrum-tag-removable-border-color-error-hover: rgb(187, 18, 26);
+  --spectrum-tag-removable-icon-color-error-hover: rgb(187, 18, 26);
+  --spectrum-tag-removable-text-color-error-hover: rgb(97, 97, 97);
+  --spectrum-tag-removable-background-color-error-hover: rgb(202, 202, 202);
+  --spectrum-tag-removable-icon-color-error-key-focus: rgb(187, 18, 26);
+  --spectrum-tag-removable-border-color-error-key-focus: rgb(20, 115, 230);
+  --spectrum-tag-removable-text-color-error-key-focus: rgb(97, 97, 97);
+  --spectrum-tag-removable-background-color-error-key-focus: rgb(202, 202, 202);
+  --spectrum-tag-removable-border-color-error-down: rgb(170, 13, 21);
+  --spectrum-tag-removable-icon-color-error-down: rgb(170, 13, 21);
+  --spectrum-tag-removable-text-color-error-down: rgb(97, 97, 97);
+  --spectrum-tag-removable-background-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-removable-border-color-error-disabled: rgb(210, 210, 210);
+  --spectrum-tag-removable-text-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-removable-icon-color-error-disabled: rgb(160, 160, 160);
+  --spectrum-tag-removable-background-color-error-selected: rgb(97, 97, 97);
+  --spectrum-tag-removable-border-color-error-selected: transparent;
+  --spectrum-tag-removable-icon-color-error-selected: rgb(240, 240, 240);
+  --spectrum-tag-removable-text-color-error-selected: rgb(240, 240, 240);
   --spectrum-textfield-placeholder-text-color: rgb(125, 125, 125);
   --spectrum-textfield-text-color: rgb(60, 60, 60);
   --spectrum-textfield-background-color: rgb(240, 240, 240);