feat(chat): chat-launcher-button emits (clicked) output (#354)

The inner <button> now directly emits a `clicked` output, replacing
the previous pattern where consumers bound `(click)` to the host
element and relied on event bubbling. The bubbling approach worked
visually but was fragile under hit-testing — Playwright (and
potentially screen readers / pointer-event detection in higher
stacking contexts) could mis-target the wrapping host element when
a higher-z-index sibling overlapped the launcher's bounding box.

Migrated internal consumers (chat-sidebar, chat-popup) to (clicked).

Back-compat: native (click) bindings on the host still work — the
click event still bubbles unchanged. External consumers don't need
to migrate, but should prefer (clicked) for new code.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: blove

apps/website/content/docs/chat/api/api-docs.json

@@ -2801,7 +2801,14 @@
     "description": "",
     "params": [],
     "examples": [],
-    "properties": [],
+    "properties": [
+      {
+        "name": "clicked",
+        "type": "OutputEmitterRef<void>",
+        "description": "Fires when the inner <button> receives a click. Prefer this over\n binding `(click)` on the host element — explicit output gives\n consumers (and Playwright) an unambiguous click target that won't\n be intercepted by sibling overlays in higher stacking contexts.\n Native `(click)` on the host still works for back-compat: the\n click event bubbles through unchanged.",
+        "optional": false
+      }
+    ],
     "methods": []
   },
   {

libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts

@@ -59,7 +59,7 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
   `],
   template: `
     <div class="chat-popup__launcher">
-      <chat-launcher-button (click)="toggle()" />
+      <chat-launcher-button (clicked)="toggle()" />
     </div>
     <div class="chat-popup__window" [attr.data-open]="open() ? 'true' : 'false'" role="dialog" aria-modal="false">
       <button type="button" class="chat-popup__close" (click)="closeWindow()" aria-label="Close chat">

libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts

@@ -67,7 +67,7 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
   template: `
     <div class="chat-sidebar__content"><ng-content /></div>
     <div class="chat-sidebar__launcher">
-      <chat-launcher-button (click)="toggle()" />
+      <chat-launcher-button (clicked)="toggle()" />
     </div>
     <aside class="chat-sidebar__panel" [attr.data-open]="open() ? 'true' : 'false'" role="complementary" [attr.aria-hidden]="open() ? 'false' : 'true'">
       <button type="button" class="chat-sidebar__close" (click)="closeWindow()" aria-label="Close chat">

libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.spec.ts

@@ -21,4 +21,28 @@ describe('ChatLauncherButtonComponent', () => {
     const svg = (fx.nativeElement as HTMLElement).querySelector('.chat-launcher-button svg');
     expect(svg).toBeTruthy();
   });
+
+  it('emits clicked output when the inner button is clicked', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(ChatLauncherButtonComponent);
+    fx.detectChanges();
+    let fired = 0;
+    fx.componentInstance.clicked.subscribe(() => fired++);
+    const btn = (fx.nativeElement as HTMLElement).querySelector('button.chat-launcher-button') as HTMLButtonElement;
+    btn.click();
+    expect(fired).toBe(1);
+  });
+
+  it('keeps native (click) on the host working — event bubbles through', () => {
+    // Back-compat: existing consumers that bind `(click)` on
+    // <chat-launcher-button> must continue to fire on inner-button clicks.
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(ChatLauncherButtonComponent);
+    fx.detectChanges();
+    let hostClicks = 0;
+    fx.nativeElement.addEventListener('click', () => hostClicks++);
+    const btn = (fx.nativeElement as HTMLElement).querySelector('button.chat-launcher-button') as HTMLButtonElement;
+    btn.click();
+    expect(hostClicks).toBe(1);
+  });
 });

libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, output } from '@angular/core';
 import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 import { CHAT_LAUNCHER_BUTTON_STYLES } from '../../styles/chat-launcher-button.styles';
 
@@ -9,11 +9,19 @@ import { CHAT_LAUNCHER_BUTTON_STYLES } from '../../styles/chat-launcher-button.s
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [CHAT_HOST_TOKENS, CHAT_LAUNCHER_BUTTON_STYLES],
   template: `
-    <button type="button" class="chat-launcher-button" aria-label="Open chat">
+    <button type="button" class="chat-launcher-button" aria-label="Open chat" (click)="clicked.emit()">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
       </svg>
     </button>
   `,
 })
-export class ChatLauncherButtonComponent {}
+export class ChatLauncherButtonComponent {
+  /** Fires when the inner <button> receives a click. Prefer this over
+   *  binding `(click)` on the host element — explicit output gives
+   *  consumers (and Playwright) an unambiguous click target that won't
+   *  be intercepted by sibling overlays in higher stacking contexts.
+   *  Native `(click)` on the host still works for back-compat: the
+   *  click event bubbles through unchanged. */
+  readonly clicked = output<void>();
+}