@kouji-ui/components 0.1.1

package/src/confirm-popup/_examples/confirm-popup.placement.example.ts

@@ -0,0 +1,97 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjConfirmPopupActionComponent,
+  KjConfirmPopupActionsComponent,
+  KjConfirmPopupCancelComponent,
+  KjConfirmPopupComponent,
+  KjConfirmPopupContentComponent,
+  KjConfirmPopupMessageComponent,
+} from '../confirm-popup';
+import { KjConfirmPopupTrigger } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * Placement override — explicit `kjPopoverSide` for confirm popups in
+ * unusual layouts (e.g. row-end actions in a long table where the default
+ * `'top'` would fall outside the viewport on the first / last row).
+ */
+@Component({
+  selector: 'kj-confirm-popup-placement-example',
+  standalone: true,
+  imports: [
+    KjConfirmPopupComponent,
+    KjConfirmPopupTrigger,
+    KjConfirmPopupContentComponent,
+    KjConfirmPopupMessageComponent,
+    KjConfirmPopupActionComponent,
+    KjConfirmPopupCancelComponent,
+    KjConfirmPopupActionsComponent,
+    KjButtonComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+        flex-wrap: wrap;
+        padding: var(--kj-space-2xl);
+        min-height: 16rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-confirm-popup>
+      <kj-button kjConfirmPopupTrigger #t1="kjConfirmPopupTrigger">Top</kj-button>
+      <kj-confirm-popup-content [kjFor]="t1">
+        <p kjConfirmPopupMessage>Confirm action above the trigger.</p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel
+            ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+          >
+          <kj-confirm-popup-action><kj-button>OK</kj-button></kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+
+    <kj-confirm-popup>
+      <kj-button kjConfirmPopupTrigger #t2="kjConfirmPopupTrigger">Right</kj-button>
+      <kj-confirm-popup-content [kjFor]="t2">
+        <p kjConfirmPopupMessage>Confirm action to the right.</p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel
+            ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+          >
+          <kj-confirm-popup-action><kj-button>OK</kj-button></kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+
+    <kj-confirm-popup>
+      <kj-button kjConfirmPopupTrigger #t3="kjConfirmPopupTrigger">Bottom</kj-button>
+      <kj-confirm-popup-content [kjFor]="t3">
+        <p kjConfirmPopupMessage>Confirm action below the trigger.</p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel
+            ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+          >
+          <kj-confirm-popup-action><kj-button>OK</kj-button></kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+
+    <kj-confirm-popup>
+      <kj-button kjConfirmPopupTrigger #t4="kjConfirmPopupTrigger">Left</kj-button>
+      <kj-confirm-popup-content [kjFor]="t4">
+        <p kjConfirmPopupMessage>Confirm action to the left.</p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel
+            ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+          >
+          <kj-confirm-popup-action><kj-button>OK</kj-button></kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+  `,
+})
+export class KjConfirmPopupPlacementExample {}

package/src/confirm-popup/_examples/confirm-popup.usage.example.ts

@@ -0,0 +1,94 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjConfirmPopupTrigger } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+import {
+  KjConfirmPopupActionComponent,
+  KjConfirmPopupActionsComponent,
+  KjConfirmPopupCancelComponent,
+  KjConfirmPopupComponent,
+  KjConfirmPopupContentComponent,
+  KjConfirmPopupMessageComponent,
+} from '../confirm-popup';
+
+/**
+ * A walkthrough of the most common confirm-popup usages — a destructive
+ * delete confirmation and a benign archive confirmation, both with two-way
+ * `(kjResult)` handling.
+ */
+@Component({
+  selector: 'kj-confirm-popup-usage-example',
+  standalone: true,
+  imports: [
+    KjConfirmPopupComponent,
+    KjConfirmPopupTrigger,
+    KjConfirmPopupContentComponent,
+    KjConfirmPopupMessageComponent,
+    KjConfirmPopupActionComponent,
+    KjConfirmPopupCancelComponent,
+    KjConfirmPopupActionsComponent,
+    KjButtonComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+        padding: var(--kj-space-2xl);
+        min-height: 16rem;
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+      }
+      .status {
+        font-size: 0.875rem;
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-confirm-popup [kjDestructive]="true" (kjResult)="last.set('delete: ' + $event)">
+        <kj-button kjConfirmPopupTrigger #t1="kjConfirmPopupTrigger" kjVariant="destructive"
+          >Delete</kj-button
+        >
+        <kj-confirm-popup-content [kjFor]="t1">
+          <p kjConfirmPopupMessage>Delete this item? This cannot be undone.</p>
+          <kj-confirm-popup-actions>
+            <kj-confirm-popup-cancel
+              ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+            >
+            <kj-confirm-popup-action
+              ><kj-button kjVariant="destructive">Delete</kj-button></kj-confirm-popup-action
+            >
+          </kj-confirm-popup-actions>
+        </kj-confirm-popup-content>
+      </kj-confirm-popup>
+
+      <kj-confirm-popup (kjResult)="last.set('archive: ' + $event)">
+        <kj-button kjConfirmPopupTrigger #t2="kjConfirmPopupTrigger" kjVariant="outline"
+          >Archive</kj-button
+        >
+        <kj-confirm-popup-content [kjFor]="t2">
+          <p kjConfirmPopupMessage>Archive this conversation?</p>
+          <kj-confirm-popup-actions>
+            <kj-confirm-popup-cancel
+              ><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel
+            >
+            <kj-confirm-popup-action
+              ><kj-button kjVariant="default">Archive</kj-button></kj-confirm-popup-action
+            >
+          </kj-confirm-popup-actions>
+        </kj-confirm-popup-content>
+      </kj-confirm-popup>
+    </div>
+
+    <span class="status">Last action: {{ last() }}</span>
+  `,
+})
+export class KjConfirmPopupUsageExample {
+  readonly last = signal<string>('—');
+}

package/src/confirm-popup/_examples/confirm-popup.with-message.example.ts

@@ -0,0 +1,76 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjConfirmPopupActionComponent,
+  KjConfirmPopupActionsComponent,
+  KjConfirmPopupCancelComponent,
+  KjConfirmPopupComponent,
+  KjConfirmPopupContentComponent,
+  KjConfirmPopupMessageComponent,
+} from '../confirm-popup';
+import { KjConfirmPopupTrigger } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * Confirm popup with a longer multi-sentence message. The `<p>` is marked
+ * with `kjConfirmPopupMessage` so its id is wired to the panel's
+ * `aria-describedby`. Two sentences is roughly the practical ceiling for an
+ * anchored confirm — anything longer wants the centred `KjAlertDialog`.
+ */
+@Component({
+  selector: 'kj-confirm-popup-with-message-example',
+  standalone: true,
+  imports: [
+    KjConfirmPopupComponent,
+    KjConfirmPopupTrigger,
+    KjConfirmPopupContentComponent,
+    KjConfirmPopupMessageComponent,
+    KjConfirmPopupActionComponent,
+    KjConfirmPopupCancelComponent,
+    KjConfirmPopupActionsComponent,
+    KjButtonComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+        padding: var(--kj-space-2xl);
+        min-height: 14rem;
+      }
+      .kj-confirm-popup-example__status {
+        margin-top: var(--kj-space-md);
+        color: var(--kj-fg-default);
+        opacity: 0.85;
+        font-size: 0.875rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-confirm-popup (kjResult)="onResult($event)">
+      <kj-button kjConfirmPopupTrigger #trig="kjConfirmPopupTrigger" kjVariant="default"
+        >Discard draft</kj-button
+      >
+      <kj-confirm-popup-content [kjFor]="trig">
+        <p kjConfirmPopupMessage>
+          Discard this draft? Your changes since last save will be lost and cannot be recovered from
+          this device.
+        </p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel>
+            <kj-button kjVariant="ghost">Keep editing</kj-button>
+          </kj-confirm-popup-cancel>
+          <kj-confirm-popup-action>
+            <kj-button kjVariant="default">Discard</kj-button>
+          </kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+    <p class="kj-confirm-popup-example__status">Last result: {{ status() }}</p>
+  `,
+})
+export class KjConfirmPopupWithMessageExample {
+  readonly status = signal<string>('—');
+  onResult(result: boolean): void {
+    this.status.set(result ? 'discarded' : 'kept');
+  }
+}

package/src/confirm-popup/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjConfirmPopupDestructiveExample } from './confirm-popup.destructive.example';
+export { KjConfirmPopupExample } from './confirm-popup.example';
+export { KjConfirmPopupPlacementExample } from './confirm-popup.placement.example';
+export { KjConfirmPopupUsageExample } from './confirm-popup.usage.example';
+export { KjConfirmPopupWithMessageExample } from './confirm-popup.with-message.example';

package/src/confirm-popup/confirm-popup.css

@@ -0,0 +1,47 @@
+@layer kj.component {
+  .kj-confirm-popup-content {
+    --kj-confirm-popup-bg:           var(--kj-bg-elevated);
+    --kj-confirm-popup-fg:           var(--kj-fg-default);
+    --kj-confirm-popup-border-color: var(--kj-border-default);
+    --kj-confirm-popup-radius:       var(--kj-radius-box);
+    --kj-confirm-popup-padding-x:    var(--kj-space-md);
+    --kj-confirm-popup-padding-y:    var(--kj-space-md);
+    --kj-confirm-popup-shadow:       var(--kj-shadow-md);
+
+    display: block;
+    box-sizing: border-box;
+    max-width: min(20rem, calc(100vw - 2rem));
+    background: var(--kj-confirm-popup-bg);
+    color: var(--kj-confirm-popup-fg);
+    border: var(--kj-border) solid var(--kj-confirm-popup-border-color);
+    border-radius: var(--kj-confirm-popup-radius);
+    padding: var(--kj-confirm-popup-padding-y) var(--kj-confirm-popup-padding-x);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    box-shadow: var(--kj-confirm-popup-shadow);
+    pointer-events: auto;
+    z-index: 1000;
+    word-wrap: break-word;
+  }
+
+  .kj-confirm-popup-content[hidden] { display: none; }
+
+  .kj-confirm-popup-message {
+    display: block;
+    margin: 0 0 var(--kj-space-sm);
+    color: var(--kj-fg-default);
+  }
+
+  .kj-confirm-popup-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kj-space-sm);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-confirm-popup-content {
+      transition: opacity 140ms ease-out, transform 140ms ease-out;
+    }
+    .kj-confirm-popup-content[data-state="closed"] { opacity: 0; transform: scale(0.98); }
+    .kj-confirm-popup-content[data-state="open"]   { opacity: 1; transform: scale(1); }
+  }
+}

package/src/confirm-popup/confirm-popup.playground.ts

@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  KjConfirmPopupActionComponent,
+  KjConfirmPopupActionsComponent,
+  KjConfirmPopupCancelComponent,
+  KjConfirmPopupComponent,
+  KjConfirmPopupContentComponent,
+} from './confirm-popup';
+import { KjConfirmPopupMessage } from '@kouji-ui/core';
+import { KjConfirmPopupTrigger } from '@kouji-ui/core';
+import { KjButtonComponent } from '../button/button';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover the destructive
+ * posture, the trigger / message text, and which control (`'cancel'` /
+ * `'action'`) receives initial focus when the panel opens.
+ */
+const triggerLabel = signal('Delete item');
+const message = signal('Delete this item?');
+const destructive = signal(true);
+const defaultFocus = signal<'cancel' | 'confirm'>('cancel');
+
+@Component({
+  selector: 'kj-confirm-popup-playground',
+  standalone: true,
+  imports: [
+    KjConfirmPopupComponent,
+    KjConfirmPopupTrigger,
+    KjConfirmPopupContentComponent,
+    KjConfirmPopupMessage,
+    KjConfirmPopupActionComponent,
+    KjConfirmPopupCancelComponent,
+    KjConfirmPopupActionsComponent,
+    KjButtonComponent,
+  ],
+  styles: [`:host { display: flex; padding: var(--kj-space-lg); min-height: 14rem; }`],
+  template: `
+    <kj-confirm-popup
+      [kjDestructive]="destructive()"
+      [kjDefaultFocus]="defaultFocus()"
+    >
+      <kj-button
+        kjConfirmPopupTrigger
+        #trig="kjConfirmPopupTrigger"
+        [kjVariant]="destructive() ? 'destructive' : 'default'"
+      >{{ triggerLabel() }}</kj-button>
+      <kj-confirm-popup-content [kjFor]="trig">
+        <p kjConfirmPopupMessage class="kj-confirm-popup-message">{{ message() }}</p>
+        <kj-confirm-popup-actions>
+          <kj-confirm-popup-cancel>
+            <kj-button kjVariant="ghost">Cancel</kj-button>
+          </kj-confirm-popup-cancel>
+          <kj-confirm-popup-action>
+            <kj-button [kjVariant]="destructive() ? 'destructive' : 'default'">Confirm</kj-button>
+          </kj-confirm-popup-action>
+        </kj-confirm-popup-actions>
+      </kj-confirm-popup-content>
+    </kj-confirm-popup>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjConfirmPopupPlaygroundDemo {
+  protected readonly triggerLabel = triggerLabel;
+  protected readonly message = message;
+  protected readonly destructive = destructive;
+  protected readonly defaultFocus = defaultFocus;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjConfirmPopupPlaygroundDemo,
+  state: {
+    triggerLabel: triggerLabel as unknown as ReturnType<typeof signal>,
+    message: message as unknown as ReturnType<typeof signal>,
+    destructive: destructive as unknown as ReturnType<typeof signal>,
+    defaultFocus: defaultFocus as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'text', name: 'triggerLabel', label: 'trigger' },
+    { kind: 'text', name: 'message', label: 'message' },
+    { kind: 'chips', name: 'defaultFocus', label: 'default focus', options: ['cancel', 'confirm'] },
+    { kind: 'toggle', name: 'destructive', label: 'destructive' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      triggerLabel: string;
+      message: string;
+      destructive: boolean;
+      defaultFocus: string;
+    };
+    const popupAttrs: string[] = [];
+    if (s.destructive) popupAttrs.push('[kjDestructive]="true"');
+    if (s.defaultFocus !== 'cancel') popupAttrs.push(`kjDefaultFocus="${s.defaultFocus}"`);
+    const variant = s.destructive ? 'destructive' : 'default';
+    const head = popupAttrs.length ? `<kj-confirm-popup\n  ${popupAttrs.join('\n  ')}\n>` : '<kj-confirm-popup>';
+    return [
+      head,
+      `  <kj-button kjConfirmPopupTrigger #trig="kjConfirmPopupTrigger" kjVariant="${variant}">${s.triggerLabel}</kj-button>`,
+      `  <kj-confirm-popup-content [kjFor]="trig">`,
+      `    <p kjConfirmPopupMessage>${s.message}</p>`,
+      `    <kj-confirm-popup-actions>`,
+      `      <kj-confirm-popup-cancel><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel>`,
+      `      <kj-confirm-popup-action><kj-button kjVariant="${variant}">Confirm</kj-button></kj-confirm-popup-action>`,
+      `    </kj-confirm-popup-actions>`,
+      `  </kj-confirm-popup-content>`,
+      `</kj-confirm-popup>`,
+    ].join('\n');
+  },
+};

package/src/confirm-popup/confirm-popup.spec.ts

@@ -0,0 +1,209 @@
+import { Component, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import {
+  KjConfirmPopupActionComponent,
+  KjConfirmPopupActionsComponent,
+  KjConfirmPopupCancelComponent,
+  KjConfirmPopupComponent,
+  KjConfirmPopupContentComponent,
+  KjConfirmPopupMessageComponent,
+  KjConfirmPopupTriggerComponent,
+} from './confirm-popup';
+
+function findOverlays(): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[data-kj-overlay]'));
+}
+
+function findPanel(): HTMLElement | null {
+  for (const o of findOverlays()) {
+    if (o.getAttribute('role') === 'alertdialog') return o;
+    if (o.getAttribute('role') === 'dialog') return o;
+    const dialog = o.querySelector<HTMLElement>('[role="alertdialog"], [role="dialog"]');
+    if (dialog) return dialog;
+  }
+  return null;
+}
+
+function cleanupOverlays(): void {
+  for (const o of findOverlays()) o.remove();
+  document.documentElement.style.overflow = '';
+}
+
+function advance(fixture: ReturnType<typeof TestBed.createComponent>, ms: number, step = 1): void {
+  let remaining = ms;
+  while (remaining > 0) {
+    const dt = Math.min(step, remaining);
+    vi.advanceTimersByTime(dt);
+    fixture.detectChanges();
+    remaining -= dt;
+  }
+}
+
+function settle(fixture: ReturnType<typeof TestBed.createComponent>): void {
+  fixture.detectChanges();
+  advance(fixture, 32);
+  fixture.detectChanges();
+}
+
+describe('KjConfirmPopupComponent (wrapper)', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({});
+    vi.useFakeTimers({
+      toFake: ['setTimeout', 'clearTimeout', 'requestAnimationFrame', 'cancelAnimationFrame', 'queueMicrotask', 'Date'],
+    });
+  });
+
+  afterEach(() => {
+    cleanupOverlays();
+    vi.useRealTimers();
+  });
+
+  test('renders projected trigger content with display: contents on host', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjConfirmPopupComponent,
+        KjConfirmPopupTriggerComponent,
+        KjConfirmPopupContentComponent,
+        KjConfirmPopupMessageComponent,
+        KjConfirmPopupActionComponent,
+        KjConfirmPopupCancelComponent,
+        KjConfirmPopupActionsComponent,
+      ],
+      template: `
+        <kj-confirm-popup>
+          <kj-confirm-popup-trigger>
+            <button>Delete</button>
+          </kj-confirm-popup-trigger>
+          <kj-confirm-popup-content>
+            <p kjConfirmPopupMessage>Sure?</p>
+            <kj-confirm-popup-actions>
+              <kj-confirm-popup-cancel><button>Cancel</button></kj-confirm-popup-cancel>
+              <kj-confirm-popup-action><button>OK</button></kj-confirm-popup-action>
+            </kj-confirm-popup-actions>
+          </kj-confirm-popup-content>
+        </kj-confirm-popup>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const btn = fixture.nativeElement.querySelector('button');
+    expect(btn).not.toBeNull();
+    expect(btn.textContent.trim()).toBe('Delete');
+  });
+
+  test('aliased trigger inputs reach the underlying directive (aria-haspopup, aria-controls)', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjConfirmPopupComponent,
+        KjConfirmPopupTriggerComponent,
+        KjConfirmPopupContentComponent,
+        KjConfirmPopupMessageComponent,
+      ],
+      template: `
+        <kj-confirm-popup>
+          <kj-confirm-popup-trigger>
+            <button>Delete</button>
+          </kj-confirm-popup-trigger>
+          <kj-confirm-popup-content>
+            <p kjConfirmPopupMessage>Sure?</p>
+          </kj-confirm-popup-content>
+        </kj-confirm-popup>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const triggerHost = fixture.nativeElement.querySelector('kj-confirm-popup-trigger')!;
+    expect(triggerHost.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(triggerHost.getAttribute('aria-expanded')).toBe('false');
+    expect(triggerHost.getAttribute('aria-controls')).toMatch(/^kj-popover-\d+$/);
+  });
+
+  test('opening the popup mounts a panel with role="alertdialog"', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjConfirmPopupComponent,
+        KjConfirmPopupTriggerComponent,
+        KjConfirmPopupContentComponent,
+        KjConfirmPopupMessageComponent,
+        KjConfirmPopupActionComponent,
+        KjConfirmPopupCancelComponent,
+      ],
+      template: `
+        <kj-confirm-popup>
+          <kj-confirm-popup-trigger>
+            <button>Delete</button>
+          </kj-confirm-popup-trigger>
+          <kj-confirm-popup-content>
+            <p kjConfirmPopupMessage>Sure?</p>
+            <kj-confirm-popup-cancel><button>Cancel</button></kj-confirm-popup-cancel>
+            <kj-confirm-popup-action><button>OK</button></kj-confirm-popup-action>
+          </kj-confirm-popup-content>
+        </kj-confirm-popup>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button')!.click();
+    settle(fixture);
+
+    const panel = findPanel();
+    expect(panel).not.toBeNull();
+    expect(panel!.getAttribute('role')).toBe('alertdialog');
+    expect(panel!.getAttribute('aria-modal')).toBe('false');
+  });
+
+  test('confirm action click resolves with kjResult(true)', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjConfirmPopupComponent,
+        KjConfirmPopupTriggerComponent,
+        KjConfirmPopupContentComponent,
+        KjConfirmPopupMessageComponent,
+        KjConfirmPopupActionComponent,
+        KjConfirmPopupCancelComponent,
+      ],
+      template: `
+        <kj-confirm-popup (kjResult)="result.set($event)">
+          <kj-confirm-popup-trigger>
+            <button>Delete</button>
+          </kj-confirm-popup-trigger>
+          <kj-confirm-popup-content>
+            <p kjConfirmPopupMessage>Sure?</p>
+            <kj-confirm-popup-cancel><button>Cancel</button></kj-confirm-popup-cancel>
+            <kj-confirm-popup-action><button>OK</button></kj-confirm-popup-action>
+          </kj-confirm-popup-content>
+        </kj-confirm-popup>
+      `,
+    })
+    class Host {
+      readonly result = signal<boolean | null>(null);
+    }
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button')!.click();
+    settle(fixture);
+
+    const panel = findPanel()!;
+    panel.querySelector<HTMLElement>('kj-confirm-popup-action button')!.click();
+    settle(fixture);
+
+    expect(fixture.componentInstance.result()).toBe(true);
+    expect(findPanel()).toBeNull();
+  });
+});