From 27f2f0d76967ddc8bf5daf0f659fcb661deb1b35 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 20 Jul 2020 16:20:58 -0400
Subject: [PATCH] Fix clearable tags demo

---
 docs/components/tag.md | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/components/tag.md b/docs/components/tag.md
index 5a2642a2a..4758fd58a 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -39,9 +39,27 @@ Use the `pill` prop to give tabs rounded edges.
 Use the `clearable` attribute to add a clear button to the tag.
 
 ```html preview
-<sl-tag size="small" clearable>Small</sl-tag>
-<sl-tag size="medium" clearable>Medium</sl-tag>
-<sl-tag size="large" clearable>Large</sl-tag>
+<div class="tags-clearable">
+  <sl-tag size="small" clearable>Small</sl-tag>
+  <sl-tag size="medium" clearable>Medium</sl-tag>
+  <sl-tag size="large" clearable>Large</sl-tag>
+</div>
+
+<script>
+  const div = document.querySelector('.tags-clearable');
+
+  div.addEventListener('slClear', event => {
+    const tag = event.target;
+    tag.style.opacity = '0';
+    setTimeout(() => tag.style.opacity = '1', 2000);
+  });
+</script>
+
+<style>
+  .tags-clearable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
+  }
+</style>
 ```
 
 [component-metadata:sl-tag]