fix(tags): make the 'delete' event cancelable (#3778)

* fix(tags): make the 'delete' event cancelable

* chore(tags): address review feedback

---------

Co-authored-by: Luca Trușcă <ltrusca@adobe.com>

packages/tags/src/Tag.ts

@@ -87,6 +87,7 @@ export class Tag extends SizedMixin(SpectrumElement, {
         const applyDefault = this.dispatchEvent(
             new Event('delete', {
                 bubbles: true,
+                cancelable: true,
                 composed: true,
             })
         );

packages/tags/test/tag.test.ts

@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 
 import '@spectrum-web-components/tags/sp-tag.js';
 import '@spectrum-web-components/tags/sp-tags.js';
@@ -186,4 +186,30 @@ describe('Tag', () => {
             'Does not respond after `focusout`'
         ).to.equal(expectedEventCount);
     });
+    it('can have delete event prevented', async () => {
+        const deleteSpy = spy();
+        const handleDelete = (event: Event): void => {
+            event.preventDefault();
+            deleteSpy();
+        };
+        const el = await fixture<Tag>(
+            html`
+                <sp-tag deletable @delete=${handleDelete}>Tag</sp-tag>
+            `
+        );
+
+        const removeStub = stub(el, 'remove');
+
+        await elementUpdated(el);
+
+        expect(deleteSpy.called).to.be.false;
+
+        const deleteButton = el.shadowRoot.querySelector(
+            'sp-clear-button'
+        ) as ClearButton;
+        deleteButton.click();
+
+        expect(deleteSpy.callCount).to.equal(1);
+        expect(removeStub.called).to.be.false;
+    });
 });