Coach Mark: Emit event when user hits the close button

.changeset/dirty-cows-leave.md

@@ -0,0 +1,5 @@
+---
+"@ithaka/pharos": minor
+---
+
+Emit `pharos-coach-mark-closed` event when coach mark is dismissed

packages/pharos/src/components/coach-mark/pharos-coach-mark.test.ts

@@ -47,7 +47,13 @@ describe('pharos-coach-mark', () => {
     expect(component.hide).to.be.true;
   });
 
-  it('closes when the close button is clicked', async () => {
+  it('closes when the close button is clicked and emits closed event', async () => {
+    let wasFired = false;
+    const handleClose = (): void => {
+      wasFired = true;
+    };
+    component.addEventListener('pharos-coach-mark-closed', handleClose);
+
     component.hide = false;
     await component.updateComplete;
 
@@ -56,6 +62,7 @@ describe('pharos-coach-mark', () => {
     await component.updateComplete;
 
     expect(component.hide).to.be.true;
+    expect(wasFired).to.be.true;
   });
 
   it('displays the header set in the element attribute', async () => {

packages/pharos/src/components/coach-mark/pharos-coach-mark.ts

@@ -18,6 +18,8 @@ export type Variant = 'light' | 'dark';
  *
  * @tag pharos-coach-mark
  *
+ * @fires pharos-coach-mark-closed - Fires when the coach mark is closed
+ *
  */
 export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
   static elementDefinitions = {
@@ -92,6 +94,16 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
     autoUpdate(document.documentElement, this, () => this.requestUpdate());
   }
 
+  private _hideCoachMark(): void {
+    this.hide = true;
+
+    const details = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('pharos-coach-mark-closed', details));
+  }
+
   private setOffset() {
     const id: string = this.getAttribute('id') || '';
     const targetElement: Element | null = document.querySelector(`[data-coach-mark="${id}"]`);
@@ -131,7 +143,7 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
               variant="${this.variant === 'light' ? 'subtle' : 'overlay'}"
               icon="close"
               a11y-label="Close"
-              @click="${() => (this.hide = true)}"
+              @click="${this._hideCoachMark}"
             ></pharos-button>
             <pharos-heading
               id="coach-mark-heading"