feat(tag): dispatch close event

COMPONENT_INDEX.md

@@ -3640,12 +3640,13 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| click      | forwarded  | --     |
+| mouseover  | forwarded  | --     |
+| mouseenter | forwarded  | --     |
+| mouseleave | forwarded  | --     |
+| close      | dispatched | --     |
 
 ## `TagSkeleton`
 

docs/src/COMPONENT_API.json

@@ -7859,7 +7859,8 @@
         { "type": "forwarded", "name": "click", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
-        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }
+        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
+        { "type": "dispatched", "name": "close" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div | span" }

docs/src/pages/components/Tag.svx

@@ -25,7 +25,7 @@
 
 ### Filterable
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:close>Filterable</Tag>
 
 ### Custom icon
 

src/Tag/Tag.svelte

@@ -30,6 +30,10 @@
 
   import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 {#if skeleton}
@@ -70,6 +74,9 @@
         disabled="{disabled}"
         title="{title}"
         on:click|stopPropagation
+        on:click|stopPropagation="{() => {
+          dispatch('close');
+        }}"
         on:mouseover
         on:mouseenter
         on:mouseleave

tests/Tag.test.svelte

@@ -27,7 +27,7 @@
 
 <Tag type="high-contrast">high-contrast</Tag>
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:click on:close>Filterable</Tag>
 
 <Tag icon="{Add16}">Custom icon</Tag>
 

types/Tag/Tag.d.ts

@@ -65,5 +65,6 @@ export default class Tag {
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }